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.
		
		
		
		
		
			
		
			
				
					406 lines
				
				12 KiB
			
		
		
			
		
	
	
					406 lines
				
				12 KiB
			| 
											3 years ago
										 | import { createElement, useContext, useRef, Fragment } from 'react'; | ||
|  | import '@emotion/cache'; | ||
|  | import { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext } from './emotion-element-6a883da9.browser.esm.js'; | ||
|  | export { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-6a883da9.browser.esm.js'; | ||
|  | import '@babel/runtime/helpers/extends'; | ||
|  | import '@emotion/weak-memoize'; | ||
|  | import 'hoist-non-react-statics'; | ||
|  | import '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js'; | ||
|  | import { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils'; | ||
|  | import { serializeStyles } from '@emotion/serialize'; | ||
|  | import { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'; | ||
|  | 
 | ||
|  | var pkg = { | ||
|  | 	name: "@emotion/react", | ||
|  | 	version: "11.10.5", | ||
|  | 	main: "dist/emotion-react.cjs.js", | ||
|  | 	module: "dist/emotion-react.esm.js", | ||
|  | 	browser: { | ||
|  | 		"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js" | ||
|  | 	}, | ||
|  | 	exports: { | ||
|  | 		".": { | ||
|  | 			module: { | ||
|  | 				worker: "./dist/emotion-react.worker.esm.js", | ||
|  | 				browser: "./dist/emotion-react.browser.esm.js", | ||
|  | 				"default": "./dist/emotion-react.esm.js" | ||
|  | 			}, | ||
|  | 			"default": "./dist/emotion-react.cjs.js" | ||
|  | 		}, | ||
|  | 		"./jsx-runtime": { | ||
|  | 			module: { | ||
|  | 				worker: "./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js", | ||
|  | 				browser: "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js", | ||
|  | 				"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js" | ||
|  | 			}, | ||
|  | 			"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js" | ||
|  | 		}, | ||
|  | 		"./_isolated-hnrs": { | ||
|  | 			module: { | ||
|  | 				worker: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js", | ||
|  | 				browser: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js", | ||
|  | 				"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js" | ||
|  | 			}, | ||
|  | 			"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js" | ||
|  | 		}, | ||
|  | 		"./jsx-dev-runtime": { | ||
|  | 			module: { | ||
|  | 				worker: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js", | ||
|  | 				browser: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js", | ||
|  | 				"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js" | ||
|  | 			}, | ||
|  | 			"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js" | ||
|  | 		}, | ||
|  | 		"./package.json": "./package.json", | ||
|  | 		"./types/css-prop": "./types/css-prop.d.ts", | ||
|  | 		"./macro": "./macro.js" | ||
|  | 	}, | ||
|  | 	types: "types/index.d.ts", | ||
|  | 	files: [ | ||
|  | 		"src", | ||
|  | 		"dist", | ||
|  | 		"jsx-runtime", | ||
|  | 		"jsx-dev-runtime", | ||
|  | 		"_isolated-hnrs", | ||
|  | 		"types/*.d.ts", | ||
|  | 		"macro.js", | ||
|  | 		"macro.d.ts", | ||
|  | 		"macro.js.flow" | ||
|  | 	], | ||
|  | 	sideEffects: false, | ||
|  | 	author: "Emotion Contributors", | ||
|  | 	license: "MIT", | ||
|  | 	scripts: { | ||
|  | 		"test:typescript": "dtslint types" | ||
|  | 	}, | ||
|  | 	dependencies: { | ||
|  | 		"@babel/runtime": "^7.18.3", | ||
|  | 		"@emotion/babel-plugin": "^11.10.5", | ||
|  | 		"@emotion/cache": "^11.10.5", | ||
|  | 		"@emotion/serialize": "^1.1.1", | ||
|  | 		"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", | ||
|  | 		"@emotion/utils": "^1.2.0", | ||
|  | 		"@emotion/weak-memoize": "^0.3.0", | ||
|  | 		"hoist-non-react-statics": "^3.3.1" | ||
|  | 	}, | ||
|  | 	peerDependencies: { | ||
|  | 		"@babel/core": "^7.0.0", | ||
|  | 		react: ">=16.8.0" | ||
|  | 	}, | ||
|  | 	peerDependenciesMeta: { | ||
|  | 		"@babel/core": { | ||
|  | 			optional: true | ||
|  | 		}, | ||
|  | 		"@types/react": { | ||
|  | 			optional: true | ||
|  | 		} | ||
|  | 	}, | ||
|  | 	devDependencies: { | ||
|  | 		"@babel/core": "^7.18.5", | ||
|  | 		"@definitelytyped/dtslint": "0.0.112", | ||
|  | 		"@emotion/css": "11.10.5", | ||
|  | 		"@emotion/css-prettifier": "1.1.1", | ||
|  | 		"@emotion/server": "11.10.0", | ||
|  | 		"@emotion/styled": "11.10.5", | ||
|  | 		"html-tag-names": "^1.1.2", | ||
|  | 		react: "16.14.0", | ||
|  | 		"svg-tag-names": "^1.1.1", | ||
|  | 		typescript: "^4.5.5" | ||
|  | 	}, | ||
|  | 	repository: "https://github.com/emotion-js/emotion/tree/main/packages/react", | ||
|  | 	publishConfig: { | ||
|  | 		access: "public" | ||
|  | 	}, | ||
|  | 	"umd:main": "dist/emotion-react.umd.min.js", | ||
|  | 	preconstruct: { | ||
|  | 		entrypoints: [ | ||
|  | 			"./index.js", | ||
|  | 			"./jsx-runtime.js", | ||
|  | 			"./jsx-dev-runtime.js", | ||
|  | 			"./_isolated-hnrs.js" | ||
|  | 		], | ||
|  | 		umdName: "emotionReact", | ||
|  | 		exports: { | ||
|  | 			envConditions: [ | ||
|  | 				"browser", | ||
|  | 				"worker" | ||
|  | 			], | ||
|  | 			extra: { | ||
|  | 				"./types/css-prop": "./types/css-prop.d.ts", | ||
|  | 				"./macro": "./macro.js" | ||
|  | 			} | ||
|  | 		} | ||
|  | 	} | ||
|  | }; | ||
|  | 
 | ||
|  | var jsx = function jsx(type, props) { | ||
|  |   var args = arguments; | ||
|  | 
 | ||
|  |   if (props == null || !hasOwnProperty.call(props, 'css')) { | ||
|  |     // $FlowFixMe
 | ||
|  |     return createElement.apply(undefined, args); | ||
|  |   } | ||
|  | 
 | ||
|  |   var argsLength = args.length; | ||
|  |   var createElementArgArray = new Array(argsLength); | ||
|  |   createElementArgArray[0] = Emotion; | ||
|  |   createElementArgArray[1] = createEmotionProps(type, props); | ||
|  | 
 | ||
|  |   for (var i = 2; i < argsLength; i++) { | ||
|  |     createElementArgArray[i] = args[i]; | ||
|  |   } // $FlowFixMe
 | ||
|  | 
 | ||
|  | 
 | ||
|  |   return createElement.apply(null, createElementArgArray); | ||
|  | }; | ||
|  | 
 | ||
|  | var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
 | ||
|  | // initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
 | ||
|  | // initial client-side render from SSR, use place of hydrating tag
 | ||
|  | 
 | ||
|  | var Global = /* #__PURE__ */withEmotionCache(function (props, cache) { | ||
|  |   if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is
 | ||
|  |   // probably using the custom createElement which
 | ||
|  |   // means it will be turned into a className prop
 | ||
|  |   // $FlowFixMe I don't really want to add it to the type since it shouldn't be used
 | ||
|  |   props.className || props.css)) { | ||
|  |     console.error("It looks like you're using the css prop on Global, did you mean to use the styles prop instead?"); | ||
|  |     warnedAboutCssPropForGlobal = true; | ||
|  |   } | ||
|  | 
 | ||
|  |   var styles = props.styles; | ||
|  |   var serialized = serializeStyles([styles], undefined, useContext(ThemeContext)); | ||
|  |   // but it is based on a constant that will never change at runtime
 | ||
|  |   // it's effectively like having two implementations and switching them out
 | ||
|  |   // so it's not actually breaking anything
 | ||
|  | 
 | ||
|  | 
 | ||
|  |   var sheetRef = useRef(); | ||
|  |   useInsertionEffectWithLayoutFallback(function () { | ||
|  |     var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
 | ||
|  | 
 | ||
|  |     var sheet = new cache.sheet.constructor({ | ||
|  |       key: key, | ||
|  |       nonce: cache.sheet.nonce, | ||
|  |       container: cache.sheet.container, | ||
|  |       speedy: cache.sheet.isSpeedy | ||
|  |     }); | ||
|  |     var rehydrating = false; // $FlowFixMe
 | ||
|  | 
 | ||
|  |     var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]"); | ||
|  | 
 | ||
|  |     if (cache.sheet.tags.length) { | ||
|  |       sheet.before = cache.sheet.tags[0]; | ||
|  |     } | ||
|  | 
 | ||
|  |     if (node !== null) { | ||
|  |       rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
 | ||
|  | 
 | ||
|  |       node.setAttribute('data-emotion', key); | ||
|  |       sheet.hydrate([node]); | ||
|  |     } | ||
|  | 
 | ||
|  |     sheetRef.current = [sheet, rehydrating]; | ||
|  |     return function () { | ||
|  |       sheet.flush(); | ||
|  |     }; | ||
|  |   }, [cache]); | ||
|  |   useInsertionEffectWithLayoutFallback(function () { | ||
|  |     var sheetRefCurrent = sheetRef.current; | ||
|  |     var sheet = sheetRefCurrent[0], | ||
|  |         rehydrating = sheetRefCurrent[1]; | ||
|  | 
 | ||
|  |     if (rehydrating) { | ||
|  |       sheetRefCurrent[1] = false; | ||
|  |       return; | ||
|  |     } | ||
|  | 
 | ||
|  |     if (serialized.next !== undefined) { | ||
|  |       // insert keyframes
 | ||
|  |       insertStyles(cache, serialized.next, true); | ||
|  |     } | ||
|  | 
 | ||
|  |     if (sheet.tags.length) { | ||
|  |       // if this doesn't exist then it will be null so the style element will be appended
 | ||
|  |       var element = sheet.tags[sheet.tags.length - 1].nextElementSibling; | ||
|  |       sheet.before = element; | ||
|  |       sheet.flush(); | ||
|  |     } | ||
|  | 
 | ||
|  |     cache.insert("", serialized, sheet, false); | ||
|  |   }, [cache, serialized.name]); | ||
|  |   return null; | ||
|  | }); | ||
|  | 
 | ||
|  | if (process.env.NODE_ENV !== 'production') { | ||
|  |   Global.displayName = 'EmotionGlobal'; | ||
|  | } | ||
|  | 
 | ||
|  | function css() { | ||
|  |   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
|  |     args[_key] = arguments[_key]; | ||
|  |   } | ||
|  | 
 | ||
|  |   return serializeStyles(args); | ||
|  | } | ||
|  | 
 | ||
|  | var keyframes = function keyframes() { | ||
|  |   var insertable = css.apply(void 0, arguments); | ||
|  |   var name = "animation-" + insertable.name; // $FlowFixMe
 | ||
|  | 
 | ||
|  |   return { | ||
|  |     name: name, | ||
|  |     styles: "@keyframes " + name + "{" + insertable.styles + "}", | ||
|  |     anim: 1, | ||
|  |     toString: function toString() { | ||
|  |       return "_EMO_" + this.name + "_" + this.styles + "_EMO_"; | ||
|  |     } | ||
|  |   }; | ||
|  | }; | ||
|  | 
 | ||
|  | var classnames = function classnames(args) { | ||
|  |   var len = args.length; | ||
|  |   var i = 0; | ||
|  |   var cls = ''; | ||
|  | 
 | ||
|  |   for (; i < len; i++) { | ||
|  |     var arg = args[i]; | ||
|  |     if (arg == null) continue; | ||
|  |     var toAdd = void 0; | ||
|  | 
 | ||
|  |     switch (typeof arg) { | ||
|  |       case 'boolean': | ||
|  |         break; | ||
|  | 
 | ||
|  |       case 'object': | ||
|  |         { | ||
|  |           if (Array.isArray(arg)) { | ||
|  |             toAdd = classnames(arg); | ||
|  |           } else { | ||
|  |             if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) { | ||
|  |               console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.'); | ||
|  |             } | ||
|  | 
 | ||
|  |             toAdd = ''; | ||
|  | 
 | ||
|  |             for (var k in arg) { | ||
|  |               if (arg[k] && k) { | ||
|  |                 toAdd && (toAdd += ' '); | ||
|  |                 toAdd += k; | ||
|  |               } | ||
|  |             } | ||
|  |           } | ||
|  | 
 | ||
|  |           break; | ||
|  |         } | ||
|  | 
 | ||
|  |       default: | ||
|  |         { | ||
|  |           toAdd = arg; | ||
|  |         } | ||
|  |     } | ||
|  | 
 | ||
|  |     if (toAdd) { | ||
|  |       cls && (cls += ' '); | ||
|  |       cls += toAdd; | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   return cls; | ||
|  | }; | ||
|  | 
 | ||
|  | function merge(registered, css, className) { | ||
|  |   var registeredStyles = []; | ||
|  |   var rawClassName = getRegisteredStyles(registered, registeredStyles, className); | ||
|  | 
 | ||
|  |   if (registeredStyles.length < 2) { | ||
|  |     return className; | ||
|  |   } | ||
|  | 
 | ||
|  |   return rawClassName + css(registeredStyles); | ||
|  | } | ||
|  | 
 | ||
|  | var Insertion = function Insertion(_ref) { | ||
|  |   var cache = _ref.cache, | ||
|  |       serializedArr = _ref.serializedArr; | ||
|  |   var rules = useInsertionEffectAlwaysWithSyncFallback(function () { | ||
|  | 
 | ||
|  |     for (var i = 0; i < serializedArr.length; i++) { | ||
|  |       var res = insertStyles(cache, serializedArr[i], false); | ||
|  |     } | ||
|  |   }); | ||
|  | 
 | ||
|  |   return null; | ||
|  | }; | ||
|  | 
 | ||
|  | var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) { | ||
|  |   var hasRendered = false; | ||
|  |   var serializedArr = []; | ||
|  | 
 | ||
|  |   var css = function css() { | ||
|  |     if (hasRendered && process.env.NODE_ENV !== 'production') { | ||
|  |       throw new Error('css can only be used during render'); | ||
|  |     } | ||
|  | 
 | ||
|  |     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
|  |       args[_key] = arguments[_key]; | ||
|  |     } | ||
|  | 
 | ||
|  |     var serialized = serializeStyles(args, cache.registered); | ||
|  |     serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`
 | ||
|  | 
 | ||
|  |     registerStyles(cache, serialized, false); | ||
|  |     return cache.key + "-" + serialized.name; | ||
|  |   }; | ||
|  | 
 | ||
|  |   var cx = function cx() { | ||
|  |     if (hasRendered && process.env.NODE_ENV !== 'production') { | ||
|  |       throw new Error('cx can only be used during render'); | ||
|  |     } | ||
|  | 
 | ||
|  |     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
|  |       args[_key2] = arguments[_key2]; | ||
|  |     } | ||
|  | 
 | ||
|  |     return merge(cache.registered, css, classnames(args)); | ||
|  |   }; | ||
|  | 
 | ||
|  |   var content = { | ||
|  |     css: css, | ||
|  |     cx: cx, | ||
|  |     theme: useContext(ThemeContext) | ||
|  |   }; | ||
|  |   var ele = props.children(content); | ||
|  |   hasRendered = true; | ||
|  |   return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, { | ||
|  |     cache: cache, | ||
|  |     serializedArr: serializedArr | ||
|  |   }), ele); | ||
|  | }); | ||
|  | 
 | ||
|  | if (process.env.NODE_ENV !== 'production') { | ||
|  |   ClassNames.displayName = 'EmotionClassNames'; | ||
|  | } | ||
|  | 
 | ||
|  | if (process.env.NODE_ENV !== 'production') { | ||
|  |   var isBrowser = "object" !== 'undefined'; // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked
 | ||
|  | 
 | ||
|  |   var isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined'; | ||
|  | 
 | ||
|  |   if (isBrowser && !isTestEnv) { | ||
|  |     // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later
 | ||
|  |     var globalContext = // $FlowIgnore
 | ||
|  |     typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef
 | ||
|  |     : isBrowser ? window : global; | ||
|  |     var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__"; | ||
|  | 
 | ||
|  |     if (globalContext[globalKey]) { | ||
|  |       console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.'); | ||
|  |     } | ||
|  | 
 | ||
|  |     globalContext[globalKey] = true; | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | export { ClassNames, Global, jsx as createElement, css, jsx, keyframes }; |