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.
		
		
		
		
		
			
		
			
				
					292 lines
				
				10 KiB
			
		
		
			
		
	
	
					292 lines
				
				10 KiB
			| 
											3 years ago
										 | 'use strict'; | ||
|  | 
 | ||
|  | var React = require('react'); | ||
|  | var createCache = require('@emotion/cache'); | ||
|  | var _extends = require('@babel/runtime/helpers/extends'); | ||
|  | var weakMemoize = require('@emotion/weak-memoize'); | ||
|  | var _isolatedHnrs_dist_emotionReact_isolatedHnrs = require('../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.dev.js'); | ||
|  | var utils = require('@emotion/utils'); | ||
|  | var serialize = require('@emotion/serialize'); | ||
|  | var useInsertionEffectWithFallbacks = require('@emotion/use-insertion-effect-with-fallbacks'); | ||
|  | 
 | ||
|  | function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; } | ||
|  | 
 | ||
|  | var createCache__default = /*#__PURE__*/_interopDefault(createCache); | ||
|  | var weakMemoize__default = /*#__PURE__*/_interopDefault(weakMemoize); | ||
|  | 
 | ||
|  | var isBrowser = typeof document !== 'undefined'; | ||
|  | var hasOwnProperty = {}.hasOwnProperty; | ||
|  | 
 | ||
|  | var EmotionCacheContext = /* #__PURE__ */React.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__default['default']({ | ||
|  |   key: 'css' | ||
|  | }) : null); | ||
|  | 
 | ||
|  | if (process.env.NODE_ENV !== 'production') { | ||
|  |   EmotionCacheContext.displayName = 'EmotionCacheContext'; | ||
|  | } | ||
|  | 
 | ||
|  | var CacheProvider = EmotionCacheContext.Provider; | ||
|  | var __unsafe_useEmotionCache = function useEmotionCache() { | ||
|  |   return React.useContext(EmotionCacheContext); | ||
|  | }; | ||
|  | 
 | ||
|  | exports.withEmotionCache = function withEmotionCache(func) { | ||
|  |   // $FlowFixMe
 | ||
|  |   return /*#__PURE__*/React.forwardRef(function (props, ref) { | ||
|  |     // the cache will never be null in the browser
 | ||
|  |     var cache = React.useContext(EmotionCacheContext); | ||
|  |     return func(props, cache, ref); | ||
|  |   }); | ||
|  | }; | ||
|  | 
 | ||
|  | if (!isBrowser) { | ||
|  |   exports.withEmotionCache = function withEmotionCache(func) { | ||
|  |     return function (props) { | ||
|  |       var cache = React.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__default['default']({ | ||
|  |           key: 'css' | ||
|  |         }); | ||
|  |         return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, { | ||
|  |           value: cache | ||
|  |         }, func(props, cache)); | ||
|  |       } else { | ||
|  |         return func(props, cache); | ||
|  |       } | ||
|  |     }; | ||
|  |   }; | ||
|  | } | ||
|  | 
 | ||
|  | var ThemeContext = /* #__PURE__ */React.createContext({}); | ||
|  | 
 | ||
|  | if (process.env.NODE_ENV !== 'production') { | ||
|  |   ThemeContext.displayName = 'EmotionThemeContext'; | ||
|  | } | ||
|  | 
 | ||
|  | var useTheme = function useTheme() { | ||
|  |   return React.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__default['default'](function (outerTheme) { | ||
|  |   return weakMemoize__default['default'](function (theme) { | ||
|  |     return getTheme(outerTheme, theme); | ||
|  |   }); | ||
|  | }); | ||
|  | var ThemeProvider = function ThemeProvider(props) { | ||
|  |   var theme = React.useContext(ThemeContext); | ||
|  | 
 | ||
|  |   if (props.theme !== theme) { | ||
|  |     theme = createCacheWithTheme(theme)(props.theme); | ||
|  |   } | ||
|  | 
 | ||
|  |   return /*#__PURE__*/React.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 = React.useContext(ThemeContext); | ||
|  |     return /*#__PURE__*/React.createElement(Component, _extends({ | ||
|  |       theme: theme, | ||
|  |       ref: ref | ||
|  |     }, props)); | ||
|  |   }; // $FlowFixMe
 | ||
|  | 
 | ||
|  | 
 | ||
|  |   var WithTheme = /*#__PURE__*/React.forwardRef(render); | ||
|  |   WithTheme.displayName = "WithTheme(" + componentName + ")"; | ||
|  |   return _isolatedHnrs_dist_emotionReact_isolatedHnrs['default'](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; | ||
|  |   utils.registerStyles(cache, serialized, isStringTag); | ||
|  |   var rules = useInsertionEffectWithFallbacks.useInsertionEffectAlwaysWithSyncFallback(function () { | ||
|  |     return utils.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__*/React.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = { | ||
|  |       __html: rules | ||
|  |     }, _ref2.nonce = cache.sheet.nonce, _ref2)); | ||
|  |   } | ||
|  | 
 | ||
|  |   return null; | ||
|  | }; | ||
|  | 
 | ||
|  | var Emotion = /* #__PURE__ */exports.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 = utils.getRegisteredStyles(cache.registered, registeredStyles, props.className); | ||
|  |   } else if (props.className != null) { | ||
|  |     className = props.className + " "; | ||
|  |   } | ||
|  | 
 | ||
|  |   var serialized = serialize.serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext)); | ||
|  | 
 | ||
|  |   if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) { | ||
|  |     var labelFromStack = props[labelPropName]; | ||
|  | 
 | ||
|  |     if (labelFromStack) { | ||
|  |       serialized = serialize.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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, { | ||
|  |     cache: cache, | ||
|  |     serialized: serialized, | ||
|  |     isStringTag: typeof WrappedComponent === 'string' | ||
|  |   }), /*#__PURE__*/React.createElement(WrappedComponent, newProps)); | ||
|  | }); | ||
|  | 
 | ||
|  | if (process.env.NODE_ENV !== 'production') { | ||
|  |   Emotion.displayName = 'EmotionCssPropInternal'; | ||
|  | } | ||
|  | 
 | ||
|  | exports.CacheProvider = CacheProvider; | ||
|  | exports.Emotion = Emotion; | ||
|  | exports.ThemeContext = ThemeContext; | ||
|  | exports.ThemeProvider = ThemeProvider; | ||
|  | exports.__unsafe_useEmotionCache = __unsafe_useEmotionCache; | ||
|  | exports.createEmotionProps = createEmotionProps; | ||
|  | exports.hasOwnProperty = hasOwnProperty; | ||
|  | exports.isBrowser = isBrowser; | ||
|  | exports.useTheme = useTheme; | ||
|  | exports.withTheme = withTheme; |