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.
		
		
		
		
		
			
		
			
				
					
					
						
							275 lines
						
					
					
						
							9.7 KiB
						
					
					
				
			
		
		
	
	
							275 lines
						
					
					
						
							9.7 KiB
						
					
					
				| 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.worker.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);
 | |
|   });
 | |
| };
 | |
| 
 | |
| {
 | |
|   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 ( 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, useTheme as u, withEmotionCache as w };
 |