You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					235 lines
				
				8.5 KiB
			
		
		
			
		
	
	
					235 lines
				
				8.5 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								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.browser.esm.js';
							 | 
						||
| 
								 | 
							
								import { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';
							 | 
						||
| 
								 | 
							
								import { serializeStyles } from '@emotion/serialize';
							 | 
						||
| 
								 | 
							
								import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								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);
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								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);
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  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, useTheme as u, withEmotionCache as w };
							 |