emotion-react.esm.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Sun, Jan 26, 07:41

emotion-react.esm.js
View Options

	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, i as isBrowser$1 } from './emotion-element-3838ba9e.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-3838ba9e.esm.js';
	import '@babel/runtime/helpers/extends';
	import '@emotion/weak-memoize';
	import 'hoist-non-react-statics';
	import '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.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));

	if (!isBrowser$1) {
	var _ref;

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

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

	var shouldCache = cache.compat === true;
	var rules = cache.insert("", {
	name: serializedNames,
	styles: serializedStyles
	}, cache.sheet, shouldCache);

	if (shouldCache) {
	return null;
	}

	return /#__PURE__/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
	__html: rules
	}, _ref.nonce = cache.sheet.nonce, _ref));
	} // yes, i know these hooks are used conditionally
	// 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 () {
	var rules = '';

	for (var i = 0; i < serializedArr.length; i++) {
	var res = insertStyles(cache, serializedArr[i], false);

	if (!isBrowser$1 && res !== undefined) {
	rules += res;
	}
	}

	if (!isBrowser$1) {
	return rules;
	}
	});

	if (!isBrowser$1 && rules.length !== 0) {
	var _ref2;

	return /#__PURE__/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
	return serialized.name;
	}).join(' '), _ref2.dangerouslySetInnerHTML = {
	__html: rules
	}, _ref2.nonce = cache.sheet.nonce, _ref2));
	}

	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 = typeof document !== '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 };

emotion-react.esm.jsNo OneTemporaryActions

File Metadata

emotion-react.esm.jsView Options

Event Timeline

emotion-react.esm.js
No OneTemporary
Actions

emotion-react.esm.js
View Options