Files F101011666

emotion-element-3838ba9e.esm.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Tue, Feb 4, 19:23

emotion-element-3838ba9e.esm.js
View Options

	import { createContext, useContext, forwardRef, createElement, Fragment } from 'react';
	import createCache from '@emotion/cache';
	import _extends from '@babel/runtime/helpers/esm/extends';
	import weakMemoize from '@emotion/weak-memoize';
	import hoistNonReactStatics from '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js';
	import { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';
	import { serializeStyles } from '@emotion/serialize';
	import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';

	var isBrowser = typeof document !== 'undefined';
	var hasOwnProperty = {}.hasOwnProperty;

	var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
	// because this module is primarily intended for the browser and node
	// but it's also required in react native and similar environments sometimes
	// and we could have a special build just for that
	// but this is much easier and the native packages
	// might use a different theme context in the future anyway
	typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
	key: 'css'
	}) : null);

	if (process.env.NODE_ENV !== 'production') {
	EmotionCacheContext.displayName = 'EmotionCacheContext';
	}

	var CacheProvider = EmotionCacheContext.Provider;
	var __unsafe_useEmotionCache = function useEmotionCache() {
	return useContext(EmotionCacheContext);
	};

	var withEmotionCache = function withEmotionCache(func) {
	// $FlowFixMe
	return /#__PURE__/forwardRef(function (props, ref) {
	// the cache will never be null in the browser
	var cache = useContext(EmotionCacheContext);
	return func(props, cache, ref);
	});
	};

	if (!isBrowser) {
	withEmotionCache = function withEmotionCache(func) {
	return function (props) {
	var cache = useContext(EmotionCacheContext);

	if (cache === null) {
	// yes, we're potentially creating this on every render
	// it doesn't actually matter though since it's only on the server
	// so there will only every be a single render
	// that could change in the future because of suspense and etc. but for now,
	// this works and i don't want to optimise for a future thing that we aren't sure about
	cache = createCache({
	key: 'css'
	});
	return /#__PURE__/createElement(EmotionCacheContext.Provider, {
	value: cache
	}, func(props, cache));
	} else {
	return func(props, cache);
	}
	};
	};
	}

	var ThemeContext = /* #__PURE__ */createContext({});

	if (process.env.NODE_ENV !== 'production') {
	ThemeContext.displayName = 'EmotionThemeContext';
	}

	var useTheme = function useTheme() {
	return useContext(ThemeContext);
	};

	var getTheme = function getTheme(outerTheme, theme) {
	if (typeof theme === 'function') {
	var mergedTheme = theme(outerTheme);

	if (process.env.NODE_ENV !== 'production' && (mergedTheme == null \|\| typeof mergedTheme !== 'object' \|\| Array.isArray(mergedTheme))) {
	throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
	}

	return mergedTheme;
	}

	if (process.env.NODE_ENV !== 'production' && (theme == null \|\| typeof theme !== 'object' \|\| Array.isArray(theme))) {
	throw new Error('[ThemeProvider] Please make your theme prop a plain object');
	}

	return _extends({}, outerTheme, theme);
	};

	var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
	return weakMemoize(function (theme) {
	return getTheme(outerTheme, theme);
	});
	});
	var ThemeProvider = function ThemeProvider(props) {
	var theme = useContext(ThemeContext);

	if (props.theme !== theme) {
	theme = createCacheWithTheme(theme)(props.theme);
	}

	return /#__PURE__/createElement(ThemeContext.Provider, {
	value: theme
	}, props.children);
	};
	function withTheme(Component) {
	var componentName = Component.displayName \|\| Component.name \|\| 'Component';

	var render = function render(props, ref) {
	var theme = useContext(ThemeContext);
	return /#__PURE__/createElement(Component, _extends({
	theme: theme,
	ref: ref
	}, props));
	}; // $FlowFixMe


	var WithTheme = /#__PURE__/forwardRef(render);
	WithTheme.displayName = "WithTheme(" + componentName + ")";
	return hoistNonReactStatics(WithTheme, Component);
	}

	var getLastPart = function getLastPart(functionName) {
	// The match may be something like 'Object.createEmotionProps' or
	// 'Loader.prototype.render'
	var parts = functionName.split('.');
	return parts[parts.length - 1];
	};

	var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {
	// V8
	var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line);
	if (match) return getLastPart(match[1]); // Safari / Firefox

	match = /^([A-Za-z0-9$.]+)@/.exec(line);
	if (match) return getLastPart(match[1]);
	return undefined;
	};

	var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS
	// identifiers, thus we only need to replace what is a valid character for JS,
	// but not for CSS.

	var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
	return identifier.replace(/\$/g, '-');
	};

	var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {
	if (!stackTrace) return undefined;
	var lines = stackTrace.split('\n');

	for (var i = 0; i < lines.length; i++) {
	var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error"

	if (!functionName) continue; // If we reach one of these, we have gone too far and should quit

	if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an
	// uppercase letter

	if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);
	}

	return undefined;
	};

	var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
	var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
	var createEmotionProps = function createEmotionProps(type, props) {
	if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration
	props.css.indexOf(':') !== -1) {
	throw new Error("Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`" + props.css + "`");
	}

	var newProps = {};

	for (var key in props) {
	if (hasOwnProperty.call(props, key)) {
	newProps[key] = props[key];
	}
	}

	newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when
	// the label hasn't already been computed

	if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' \|\| typeof props.css.name !== 'string' \|\| props.css.name.indexOf('-') === -1)) {
	var label = getLabelFromStackTrace(new Error().stack);
	if (label) newProps[labelPropName] = label;
	}

	return newProps;
	};

	var Insertion = function Insertion(_ref) {
	var cache = _ref.cache,
	serialized = _ref.serialized,
	isStringTag = _ref.isStringTag;
	registerStyles(cache, serialized, isStringTag);
	var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
	return insertStyles(cache, serialized, isStringTag);
	});

	if (!isBrowser && rules !== undefined) {
	var _ref2;

	var serializedNames = serialized.name;
	var next = serialized.next;

	while (next !== undefined) {
	serializedNames += ' ' + next.name;
	next = next.next;
	}

	return /#__PURE__/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
	__html: rules
	}, _ref2.nonce = cache.sheet.nonce, _ref2));
	}

	return null;
	};

	var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
	var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
	// not passing the registered cache to serializeStyles because it would
	// make certain babel optimisations not possible

	if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
	cssProp = cache.registered[cssProp];
	}

	var WrappedComponent = props[typePropName];
	var registeredStyles = [cssProp];
	var className = '';

	if (typeof props.className === 'string') {
	className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
	} else if (props.className != null) {
	className = props.className + " ";
	}

	var serialized = serializeStyles(registeredStyles, undefined, useContext(ThemeContext));

	if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
	var labelFromStack = props[labelPropName];

	if (labelFromStack) {
	serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);
	}
	}

	className += cache.key + "-" + serialized.name;
	var newProps = {};

	for (var key in props) {
	if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' \|\| key !== labelPropName)) {
	newProps[key] = props[key];
	}
	}

	newProps.ref = ref;
	newProps.className = className;
	return /#__PURE__/createElement(Fragment, null, /#__PURE__/createElement(Insertion, {
	cache: cache,
	serialized: serialized,
	isStringTag: typeof WrappedComponent === 'string'
	}), /#__PURE__/createElement(WrappedComponent, newProps));
	});

	if (process.env.NODE_ENV !== 'production') {
	Emotion.displayName = 'EmotionCssPropInternal';
	}

	export { CacheProvider as C, Emotion as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwnProperty as h, isBrowser as i, useTheme as u, withEmotionCache as w };

Event Timeline