500 lines
15 KiB
JavaScript
500 lines
15 KiB
JavaScript
|
'use strict';
|
||
|
|
||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||
|
|
||
|
var emotionElement = require('./emotion-element-f93e57b0.cjs.dev.js');
|
||
|
var React = require('react');
|
||
|
var utils = require('@emotion/utils');
|
||
|
var useInsertionEffectWithFallbacks = require('@emotion/use-insertion-effect-with-fallbacks');
|
||
|
var serialize = require('@emotion/serialize');
|
||
|
require('@emotion/cache');
|
||
|
require('@babel/runtime/helpers/extends');
|
||
|
require('@emotion/weak-memoize');
|
||
|
require('../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.dev.js');
|
||
|
require('hoist-non-react-statics');
|
||
|
|
||
|
function _interopNamespace(e) {
|
||
|
if (e && e.__esModule) return e;
|
||
|
var n = Object.create(null);
|
||
|
if (e) {
|
||
|
Object.keys(e).forEach(function (k) {
|
||
|
if (k !== 'default') {
|
||
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
||
|
Object.defineProperty(n, k, d.get ? d : {
|
||
|
enumerable: true,
|
||
|
get: function () { return e[k]; }
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
n["default"] = e;
|
||
|
return Object.freeze(n);
|
||
|
}
|
||
|
|
||
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
||
|
|
||
|
var pkg = {
|
||
|
name: "@emotion/react",
|
||
|
version: "11.11.4",
|
||
|
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"
|
||
|
},
|
||
|
"import": "./dist/emotion-react.cjs.mjs",
|
||
|
"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"
|
||
|
},
|
||
|
"import": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs",
|
||
|
"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"
|
||
|
},
|
||
|
"import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs",
|
||
|
"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"
|
||
|
},
|
||
|
"import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs",
|
||
|
"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": {
|
||
|
types: {
|
||
|
"import": "./macro.d.mts",
|
||
|
"default": "./macro.d.ts"
|
||
|
},
|
||
|
"default": "./macro.js"
|
||
|
}
|
||
|
},
|
||
|
types: "types/index.d.ts",
|
||
|
files: [
|
||
|
"src",
|
||
|
"dist",
|
||
|
"jsx-runtime",
|
||
|
"jsx-dev-runtime",
|
||
|
"_isolated-hnrs",
|
||
|
"types/*.d.ts",
|
||
|
"macro.*"
|
||
|
],
|
||
|
sideEffects: false,
|
||
|
author: "Emotion Contributors",
|
||
|
license: "MIT",
|
||
|
scripts: {
|
||
|
"test:typescript": "dtslint types"
|
||
|
},
|
||
|
dependencies: {
|
||
|
"@babel/runtime": "^7.18.3",
|
||
|
"@emotion/babel-plugin": "^11.11.0",
|
||
|
"@emotion/cache": "^11.11.0",
|
||
|
"@emotion/serialize": "^1.1.3",
|
||
|
"@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
|
||
|
"@emotion/utils": "^1.2.1",
|
||
|
"@emotion/weak-memoize": "^0.3.1",
|
||
|
"hoist-non-react-statics": "^3.3.1"
|
||
|
},
|
||
|
peerDependencies: {
|
||
|
react: ">=16.8.0"
|
||
|
},
|
||
|
peerDependenciesMeta: {
|
||
|
"@types/react": {
|
||
|
optional: true
|
||
|
}
|
||
|
},
|
||
|
devDependencies: {
|
||
|
"@definitelytyped/dtslint": "0.0.112",
|
||
|
"@emotion/css": "11.11.2",
|
||
|
"@emotion/css-prettifier": "1.1.3",
|
||
|
"@emotion/server": "11.11.0",
|
||
|
"@emotion/styled": "11.11.0",
|
||
|
"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": {
|
||
|
types: {
|
||
|
"import": "./macro.d.mts",
|
||
|
"default": "./macro.d.ts"
|
||
|
},
|
||
|
"default": "./macro.js"
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
var jsx = function jsx(type, props) {
|
||
|
var args = arguments;
|
||
|
|
||
|
if (props == null || !emotionElement.hasOwn.call(props, 'css')) {
|
||
|
// $FlowFixMe
|
||
|
return React__namespace.createElement.apply(undefined, args);
|
||
|
}
|
||
|
|
||
|
var argsLength = args.length;
|
||
|
var createElementArgArray = new Array(argsLength);
|
||
|
createElementArgArray[0] = emotionElement.Emotion;
|
||
|
createElementArgArray[1] = emotionElement.createEmotionProps(type, props);
|
||
|
|
||
|
for (var i = 2; i < argsLength; i++) {
|
||
|
createElementArgArray[i] = args[i];
|
||
|
} // $FlowFixMe
|
||
|
|
||
|
|
||
|
return React__namespace.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__ */emotionElement.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 = serialize.serializeStyles([styles], undefined, React__namespace.useContext(emotionElement.ThemeContext));
|
||
|
|
||
|
if (!emotionElement.isBrowser) {
|
||
|
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__*/React__namespace.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 = React__namespace.useRef();
|
||
|
useInsertionEffectWithFallbacks.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]);
|
||
|
useInsertionEffectWithFallbacks.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
|
||
|
utils.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 serialize.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 = utils.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 = useInsertionEffectWithFallbacks.useInsertionEffectAlwaysWithSyncFallback(function () {
|
||
|
var rules = '';
|
||
|
|
||
|
for (var i = 0; i < serializedArr.length; i++) {
|
||
|
var res = utils.insertStyles(cache, serializedArr[i], false);
|
||
|
|
||
|
if (!emotionElement.isBrowser && res !== undefined) {
|
||
|
rules += res;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (!emotionElement.isBrowser) {
|
||
|
return rules;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
if (!emotionElement.isBrowser && rules.length !== 0) {
|
||
|
var _ref2;
|
||
|
|
||
|
return /*#__PURE__*/React__namespace.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__ */emotionElement.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 = serialize.serializeStyles(args, cache.registered);
|
||
|
serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`
|
||
|
|
||
|
utils.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: React__namespace.useContext(emotionElement.ThemeContext)
|
||
|
};
|
||
|
var ele = props.children(content);
|
||
|
hasRendered = true;
|
||
|
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.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;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
exports.CacheProvider = emotionElement.CacheProvider;
|
||
|
exports.ThemeContext = emotionElement.ThemeContext;
|
||
|
exports.ThemeProvider = emotionElement.ThemeProvider;
|
||
|
exports.__unsafe_useEmotionCache = emotionElement.__unsafe_useEmotionCache;
|
||
|
exports.useTheme = emotionElement.useTheme;
|
||
|
Object.defineProperty(exports, 'withEmotionCache', {
|
||
|
enumerable: true,
|
||
|
get: function () { return emotionElement.withEmotionCache; }
|
||
|
});
|
||
|
exports.withTheme = emotionElement.withTheme;
|
||
|
exports.ClassNames = ClassNames;
|
||
|
exports.Global = Global;
|
||
|
exports.createElement = jsx;
|
||
|
exports.css = css;
|
||
|
exports.jsx = jsx;
|
||
|
exports.keyframes = keyframes;
|