Socket
Socket
Sign inDemoInstall

@emotion/styled

Package Overview
Dependencies
Maintainers
4
Versions
102
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@emotion/styled - npm Package Compare versions

Comparing version 11.6.0 to 11.8.0

src/useInsertionEffectMaybe.js

34

base/dist/emotion-styled-base.browser.cjs.js

@@ -15,2 +15,3 @@ 'use strict';

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var React__default = /*#__PURE__*/_interopDefault(React);
var isPropValid__default = /*#__PURE__*/_interopDefault(isPropValid);

@@ -47,5 +48,21 @@

var useInsertionEffect = React__default['default'].useInsertionEffect ? React__default['default'].useInsertionEffect : function useInsertionEffect(create) {
create();
};
function useInsertionEffectMaybe(create) {
useInsertionEffect(create);
}
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var Noop = function Noop() {
var Insertion = function Insertion(_ref) {
var cache = _ref.cache,
serialized = _ref.serialized,
isStringTag = _ref.isStringTag;
utils.registerStyles(cache, serialized, isStringTag);
var rules = useInsertionEffectMaybe(function () {
return utils.insertStyles(cache, serialized, isStringTag);
});
return null;

@@ -104,3 +121,3 @@ };

var Styled = react.withEmotionCache(function (props, cache, ref) {
var finalTag = shouldUseAs && props.as || baseTag;
var FinalTag = shouldUseAs && props.as || baseTag;
var className = '';

@@ -127,3 +144,2 @@ var classInterpolations = [];

var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
var rules = utils.insertStyles(cache, serialized, typeof finalTag === 'string');
className += cache.key + "-" + serialized.name;

@@ -135,3 +151,3 @@

var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
var newProps = {};

@@ -150,7 +166,7 @@

newProps.ref = ref;
var ele = /*#__PURE__*/React.createElement(finalTag, newProps);
var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop, null);
return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {
cache: cache,
serialized: serialized,
isStringTag: typeof FinalTag === 'string'
}), /*#__PURE__*/React.createElement(FinalTag, newProps));
});

@@ -157,0 +173,0 @@ Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";

37

base/dist/emotion-styled-base.browser.esm.js
import _extends from '@babel/runtime/helpers/esm/extends';
import { useContext, createElement, Fragment } from 'react';
import React, { useContext, createElement, Fragment } from 'react';
import isPropValid from '@emotion/is-prop-valid';
import { withEmotionCache, ThemeContext } from '@emotion/react';
import { getRegisteredStyles, insertStyles } from '@emotion/utils';
import { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';
import { serializeStyles } from '@emotion/serialize';

@@ -37,5 +37,21 @@

var useInsertionEffect = React.useInsertionEffect ? React.useInsertionEffect : function useInsertionEffect(create) {
create();
};
function useInsertionEffectMaybe(create) {
useInsertionEffect(create);
}
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var Noop = function Noop() {
var Insertion = function Insertion(_ref) {
var cache = _ref.cache,
serialized = _ref.serialized,
isStringTag = _ref.isStringTag;
registerStyles(cache, serialized, isStringTag);
var rules = useInsertionEffectMaybe(function () {
return insertStyles(cache, serialized, isStringTag);
});
return null;

@@ -94,3 +110,3 @@ };

var Styled = withEmotionCache(function (props, cache, ref) {
var finalTag = shouldUseAs && props.as || baseTag;
var FinalTag = shouldUseAs && props.as || baseTag;
var className = '';

@@ -117,3 +133,2 @@ var classInterpolations = [];

var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
var rules = insertStyles(cache, serialized, typeof finalTag === 'string');
className += cache.key + "-" + serialized.name;

@@ -125,3 +140,3 @@

var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
var newProps = {};

@@ -140,7 +155,7 @@

newProps.ref = ref;
var ele = /*#__PURE__*/createElement(finalTag, newProps);
var possiblyStyleElement = /*#__PURE__*/createElement(Noop, null);
return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele);
return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {
cache: cache,
serialized: serialized,
isStringTag: typeof FinalTag === 'string'
}), /*#__PURE__*/createElement(FinalTag, newProps));
});

@@ -147,0 +162,0 @@ Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";

72

base/dist/emotion-styled-base.cjs.dev.js

@@ -15,2 +15,3 @@ 'use strict';

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var React__default = /*#__PURE__*/_interopDefault(React);
var isPropValid__default = /*#__PURE__*/_interopDefault(isPropValid);

@@ -47,6 +48,42 @@

var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var isBrowser = typeof document !== 'undefined';
var useInsertionEffect = React__default['default'].useInsertionEffect ? React__default['default'].useInsertionEffect : function useInsertionEffect(create) {
create();
};
function useInsertionEffectMaybe(create) {
if (!isBrowser) {
return create();
}
var Noop = function Noop() {
useInsertionEffect(create);
}
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var isBrowser$1 = typeof document !== 'undefined';
var Insertion = function Insertion(_ref) {
var cache = _ref.cache,
serialized = _ref.serialized,
isStringTag = _ref.isStringTag;
utils.registerStyles(cache, serialized, isStringTag);
var rules = useInsertionEffectMaybe(function () {
return utils.insertStyles(cache, serialized, isStringTag);
});
if (!isBrowser$1 && 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;

@@ -105,3 +142,3 @@ };

var Styled = react.withEmotionCache(function (props, cache, ref) {
var finalTag = shouldUseAs && props.as || baseTag;
var FinalTag = shouldUseAs && props.as || baseTag;
var className = '';

@@ -128,3 +165,2 @@ var classInterpolations = [];

var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
var rules = utils.insertStyles(cache, serialized, typeof finalTag === 'string');
className += cache.key + "-" + serialized.name;

@@ -136,3 +172,3 @@

var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
var newProps = {};

@@ -151,23 +187,7 @@

newProps.ref = ref;
var ele = /*#__PURE__*/React.createElement(finalTag, newProps);
var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop, null);
if (!isBrowser && rules !== undefined) {
var _ref;
var serializedNames = serialized.name;
var next = serialized.next;
while (next !== undefined) {
serializedNames += ' ' + next.name;
next = next.next;
}
possiblyStyleElement = /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref));
} // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {
cache: cache,
serialized: serialized,
isStringTag: typeof FinalTag === 'string'
}), /*#__PURE__*/React.createElement(FinalTag, newProps));
});

@@ -174,0 +194,0 @@ Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";

48

base/dist/emotion-styled-base.cjs.prod.js

@@ -15,3 +15,3 @@ "use strict";

var _extends__default = _interopDefault(_extends), isPropValid__default = _interopDefault(isPropValid), testOmitPropsOnStringTag = isPropValid__default.default, testOmitPropsOnComponent = function(key) {
var _extends__default = _interopDefault(_extends), React__default = _interopDefault(React), isPropValid__default = _interopDefault(isPropValid), testOmitPropsOnStringTag = isPropValid__default.default, testOmitPropsOnComponent = function(key) {
return "theme" !== key;

@@ -30,3 +30,25 @@ }, getDefaultShouldForwardProp = function(tag) {

shouldForwardProp;
}, ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences", isBrowser = "undefined" != typeof document, Noop = function() {
}, isBrowser = "undefined" != typeof document, useInsertionEffect = React__default.default.useInsertionEffect ? React__default.default.useInsertionEffect : function(create) {
create();
};
function useInsertionEffectMaybe(create) {
if (!isBrowser) return create();
useInsertionEffect(create);
}
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences", isBrowser$1 = "undefined" != typeof document, Insertion = function(_ref) {
var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
utils.registerStyles(cache, serialized, isStringTag);
var rules = useInsertionEffectMaybe((function() {
return utils.insertStyles(cache, serialized, isStringTag);
}));
if (!isBrowser$1 && void 0 !== rules) {
for (var _ref2, serializedNames = serialized.name, next = serialized.next; void 0 !== next; ) serializedNames += " " + next.name,
next = next.next;
return React.createElement("style", ((_ref2 = {})["data-emotion"] = cache.key + " " + serializedNames,
_ref2.dangerouslySetInnerHTML = {
__html: rules
}, _ref2.nonce = cache.sheet.nonce, _ref2));
}
return null;

@@ -44,3 +66,3 @@ }, createStyled = function createStyled(tag, options) {

var Styled = react.withEmotionCache((function(props, cache, ref) {
var finalTag = shouldUseAs && props.as || baseTag, className = "", classInterpolations = [], mergedProps = props;
var FinalTag = shouldUseAs && props.as || baseTag, className = "", classInterpolations = [], mergedProps = props;
if (null == props.theme) {

@@ -51,17 +73,11 @@ for (var key in mergedProps = {}, props) mergedProps[key] = props[key];

"string" == typeof props.className ? className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className) : null != props.className && (className = props.className + " ");
var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps), rules = utils.insertStyles(cache, serialized, "string" == typeof finalTag);
var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
className += cache.key + "-" + serialized.name, void 0 !== targetClassName && (className += " " + targetClassName);
var finalShouldForwardProp = shouldUseAs && void 0 === shouldForwardProp ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp, newProps = {};
var finalShouldForwardProp = shouldUseAs && void 0 === shouldForwardProp ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp, newProps = {};
for (var _key in props) shouldUseAs && "as" === _key || finalShouldForwardProp(_key) && (newProps[_key] = props[_key]);
newProps.className = className, newProps.ref = ref;
var ele = React.createElement(finalTag, newProps), possiblyStyleElement = React.createElement(Noop, null);
if (!isBrowser && void 0 !== rules) {
for (var _ref, serializedNames = serialized.name, next = serialized.next; void 0 !== next; ) serializedNames += " " + next.name,
next = next.next;
possiblyStyleElement = React.createElement("style", ((_ref = {})["data-emotion"] = cache.key + " " + serializedNames,
_ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref));
}
return React.createElement(React.Fragment, null, possiblyStyleElement, ele);
return newProps.className = className, newProps.ref = ref, React.createElement(React.Fragment, null, React.createElement(Insertion, {
cache: cache,
serialized: serialized,
isStringTag: "string" == typeof FinalTag
}), React.createElement(FinalTag, newProps));
}));

@@ -68,0 +84,0 @@ return Styled.displayName = void 0 !== identifierName ? identifierName : "Styled(" + ("string" == typeof baseTag ? baseTag : baseTag.displayName || baseTag.name || "Component") + ")",

75

base/dist/emotion-styled-base.esm.js
import _extends from '@babel/runtime/helpers/esm/extends';
import { useContext, createElement, Fragment } from 'react';
import React, { useContext, createElement, Fragment } from 'react';
import isPropValid from '@emotion/is-prop-valid';
import { withEmotionCache, ThemeContext } from '@emotion/react';
import { getRegisteredStyles, insertStyles } from '@emotion/utils';
import { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';
import { serializeStyles } from '@emotion/serialize';

@@ -37,6 +37,42 @@

var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var isBrowser = typeof document !== 'undefined';
var useInsertionEffect = React.useInsertionEffect ? React.useInsertionEffect : function useInsertionEffect(create) {
create();
};
function useInsertionEffectMaybe(create) {
if (!isBrowser) {
return create();
}
var Noop = function Noop() {
useInsertionEffect(create);
}
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var isBrowser$1 = typeof document !== 'undefined';
var Insertion = function Insertion(_ref) {
var cache = _ref.cache,
serialized = _ref.serialized,
isStringTag = _ref.isStringTag;
registerStyles(cache, serialized, isStringTag);
var rules = useInsertionEffectMaybe(function () {
return insertStyles(cache, serialized, isStringTag);
});
if (!isBrowser$1 && 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;

@@ -95,3 +131,3 @@ };

var Styled = withEmotionCache(function (props, cache, ref) {
var finalTag = shouldUseAs && props.as || baseTag;
var FinalTag = shouldUseAs && props.as || baseTag;
var className = '';

@@ -118,3 +154,2 @@ var classInterpolations = [];

var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
var rules = insertStyles(cache, serialized, typeof finalTag === 'string');
className += cache.key + "-" + serialized.name;

@@ -126,3 +161,3 @@

var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
var newProps = {};

@@ -141,23 +176,7 @@

newProps.ref = ref;
var ele = /*#__PURE__*/createElement(finalTag, newProps);
var possiblyStyleElement = /*#__PURE__*/createElement(Noop, null);
if (!isBrowser && rules !== undefined) {
var _ref;
var serializedNames = serialized.name;
var next = serialized.next;
while (next !== undefined) {
serializedNames += ' ' + next.name;
next = next.next;
}
possiblyStyleElement = /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
__html: rules
}, _ref.nonce = cache.sheet.nonce, _ref));
} // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele);
return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {
cache: cache,
serialized: serialized,
isStringTag: typeof FinalTag === 'string'
}), /*#__PURE__*/createElement(FinalTag, newProps));
});

@@ -164,0 +183,0 @@ Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";

2

base/dist/emotion-styled-base.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["react","@emotion/react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).emotionStyledBase=t(e.React,e.emotionReact)}(this,(function(e,t){"use strict";function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var n=r(function(e,t,r){return e(r={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&r.path)}},r.exports),r.exports}((function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},e.exports.default=e.exports,e.exports.__esModule=!0,t.apply(this,arguments)}e.exports=t,e.exports.default=e.exports,e.exports.__esModule=!0})));function o(e){var t=Object.create(null);return function(r){return void 0===t[r]&&(t[r]=e(r)),t[r]}}var i=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,a=o((function(e){return i.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91})),l=function(e){return"theme"!==e},s=function(e){return"string"==typeof e&&e.charCodeAt(0)>96?a:l},c=function(e,t,r){var n;if(t){var o=t.shouldForwardProp;n=e.__emotion_forwardProp&&o?function(t){return e.__emotion_forwardProp(t)&&o(t)}:o}return"function"!=typeof n&&r&&(n=e.__emotion_forwardProp),n};function u(e,t,r){var n="";return r.split(" ").forEach((function(r){void 0!==e[r]?t.push(e[r]+";"):n+=r+" "})),n}var d=function(e,t,r){var n=e.key+"-"+t.name;if(!1===r&&void 0===e.registered[n]&&(e.registered[n]=t.styles),void 0===e.inserted[t.name]){var o=t;do{e.insert(t===o?"."+n:"",o,e.sheet,!0);o=o.next}while(void 0!==o)}};var p={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},f=/[A-Z]|^ms/g,m=/_EMO_([^_]+?)_([^]*?)_EMO_/g,h=function(e){return 45===e.charCodeAt(1)},g=function(e){return null!=e&&"boolean"!=typeof e},y=o((function(e){return h(e)?e:e.replace(f,"-$&").toLowerCase()})),v=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(m,(function(e,t,r){return k={name:t,styles:r,next:k},t}))}return 1===p[e]||h(e)||"number"!=typeof t||0===t?t:t+"px"};function x(e,t,r){if(null==r)return"";if(void 0!==r.__emotion_styles)return r;switch(typeof r){case"boolean":return"";case"object":if(1===r.anim)return k={name:r.name,styles:r.styles,next:k},r.name;if(void 0!==r.styles){var n=r.next;if(void 0!==n)for(;void 0!==n;)k={name:n.name,styles:n.styles,next:k},n=n.next;var o=r.styles+";";return o}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=x(e,t,r[o])+";";else for(var i in r){var a=r[i];if("object"!=typeof a)null!=t&&void 0!==t[a]?n+=i+"{"+t[a]+"}":g(a)&&(n+=y(i)+":"+v(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var l=x(e,t,a);switch(i){case"animation":case"animationName":n+=y(i)+":"+l+";";break;default:n+=i+"{"+l+"}"}}else for(var s=0;s<a.length;s++)g(a[s])&&(n+=y(i)+":"+v(i,a[s])+";")}return n}(e,t,r);case"function":if(void 0!==e){var i=k,a=r(e);return k=i,x(e,t,a)}break;case"string":}if(null==t)return r;var l=t[r];return void 0!==l?l:r}var k,b=/label:\s*([^\s;\n{]+)\s*(;|$)/g;var w=function(e,t,r){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var n=!0,o="";k=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=x(r,t,i)):o+=i[0];for(var a=1;a<e.length;a++)o+=x(r,t,e[a]),n&&(o+=i[a]);b.lastIndex=0;for(var l,s="";null!==(l=b.exec(o));)s+="-"+l[1];var c=function(e){for(var t,r=0,n=0,o=e.length;o>=4;++n,o-=4)t=1540483477*(65535&(t=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+(59797*(t>>>16)<<16),r=1540483477*(65535&(t^=t>>>24))+(59797*(t>>>16)<<16)^1540483477*(65535&r)+(59797*(r>>>16)<<16);switch(o){case 3:r^=(255&e.charCodeAt(n+2))<<16;case 2:r^=(255&e.charCodeAt(n+1))<<8;case 1:r=1540483477*(65535&(r^=255&e.charCodeAt(n)))+(59797*(r>>>16)<<16)}return(((r=1540483477*(65535&(r^=r>>>13))+(59797*(r>>>16)<<16))^r>>>15)>>>0).toString(36)}(o)+s;return{name:c,styles:o,next:k}},_=function(){return null};return function r(o,i){var a,l,p=o.__emotion_real===o,f=p&&o.__emotion_base||o;void 0!==i&&(a=i.label,l=i.target);var m=c(o,i,p),h=m||s(f),g=!h("as");return function(){var y=arguments,v=p&&void 0!==o.__emotion_styles?o.__emotion_styles.slice(0):[];if(void 0!==a&&v.push("label:"+a+";"),null==y[0]||void 0===y[0].raw)v.push.apply(v,y);else{0,v.push(y[0][0]);for(var x=y.length,k=1;k<x;k++)v.push(y[k],y[0][k])}var b=t.withEmotionCache((function(r,n,o){var i=g&&r.as||f,a="",c=[],p=r;if(null==r.theme){for(var y in p={},r)p[y]=r[y];p.theme=e.useContext(t.ThemeContext)}"string"==typeof r.className?a=u(n.registered,c,r.className):null!=r.className&&(a=r.className+" ");var x=w(v.concat(c),n.registered,p);d(n,x,"string"==typeof i);a+=n.key+"-"+x.name,void 0!==l&&(a+=" "+l);var k=g&&void 0===m?s(i):h,b={};for(var C in r)g&&"as"===C||k(C)&&(b[C]=r[C]);b.className=a,b.ref=o;var S=e.createElement(i,b),A=e.createElement(_,null);return e.createElement(e.Fragment,null,A,S)}));return b.displayName=void 0!==a?a:"Styled("+("string"==typeof f?f:f.displayName||f.name||"Component")+")",b.defaultProps=o.defaultProps,b.__emotion_real=b,b.__emotion_base=f,b.__emotion_styles=v,b.__emotion_forwardProp=m,Object.defineProperty(b,"toString",{value:function(){return"."+l}}),b.withComponent=function(e,t){return r(e,n({},i,t,{shouldForwardProp:c(b,t,!0)})).apply(void 0,v)},b}}}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["react","@emotion/react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).emotionStyledBase=t(e.React,e.emotionReact)}(this,(function(e,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var n=r(e);function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var i=o(function(e,t,r){return e(r={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&r.path)}},r.exports),r.exports}((function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},e.exports.default=e.exports,e.exports.__esModule=!0,t.apply(this,arguments)}e.exports=t,e.exports.default=e.exports,e.exports.__esModule=!0})));function a(e){var t=Object.create(null);return function(r){return void 0===t[r]&&(t[r]=e(r)),t[r]}}var s=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,l=a((function(e){return s.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91})),c=function(e){return"theme"!==e},u=function(e){return"string"==typeof e&&e.charCodeAt(0)>96?l:c},d=function(e,t,r){var n;if(t){var o=t.shouldForwardProp;n=e.__emotion_forwardProp&&o?function(t){return e.__emotion_forwardProp(t)&&o(t)}:o}return"function"!=typeof n&&r&&(n=e.__emotion_forwardProp),n};function p(e,t,r){var n="";return r.split(" ").forEach((function(r){void 0!==e[r]?t.push(e[r]+";"):n+=r+" "})),n}var f=function(e,t,r){var n=e.key+"-"+t.name;!1===r&&void 0===e.registered[n]&&(e.registered[n]=t.styles)};var m={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},h=/[A-Z]|^ms/g,g=/_EMO_([^_]+?)_([^]*?)_EMO_/g,y=function(e){return 45===e.charCodeAt(1)},v=function(e){return null!=e&&"boolean"!=typeof e},x=a((function(e){return y(e)?e:e.replace(h,"-$&").toLowerCase()})),k=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(g,(function(e,t,r){return _={name:t,styles:r,next:_},t}))}return 1===m[e]||y(e)||"number"!=typeof t||0===t?t:t+"px"};function b(e,t,r){if(null==r)return"";if(void 0!==r.__emotion_styles)return r;switch(typeof r){case"boolean":return"";case"object":if(1===r.anim)return _={name:r.name,styles:r.styles,next:_},r.name;if(void 0!==r.styles){var n=r.next;if(void 0!==n)for(;void 0!==n;)_={name:n.name,styles:n.styles,next:_},n=n.next;var o=r.styles+";";return o}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=b(e,t,r[o])+";";else for(var i in r){var a=r[i];if("object"!=typeof a)null!=t&&void 0!==t[a]?n+=i+"{"+t[a]+"}":v(a)&&(n+=x(i)+":"+k(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var s=b(e,t,a);switch(i){case"animation":case"animationName":n+=x(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)v(a[l])&&(n+=x(i)+":"+k(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var i=_,a=r(e);return _=i,b(e,t,a)}break;case"string":}if(null==t)return r;var s=t[r];return void 0!==s?s:r}var _,w=/label:\s*([^\s;\n{]+)\s*(;|$)/g;var C=function(e,t,r){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var n=!0,o="";_=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=b(r,t,i)):o+=i[0];for(var a=1;a<e.length;a++)o+=b(r,t,e[a]),n&&(o+=i[a]);w.lastIndex=0;for(var s,l="";null!==(s=w.exec(o));)l+="-"+s[1];var c=function(e){for(var t,r=0,n=0,o=e.length;o>=4;++n,o-=4)t=1540483477*(65535&(t=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+(59797*(t>>>16)<<16),r=1540483477*(65535&(t^=t>>>24))+(59797*(t>>>16)<<16)^1540483477*(65535&r)+(59797*(r>>>16)<<16);switch(o){case 3:r^=(255&e.charCodeAt(n+2))<<16;case 2:r^=(255&e.charCodeAt(n+1))<<8;case 1:r=1540483477*(65535&(r^=255&e.charCodeAt(n)))+(59797*(r>>>16)<<16)}return(((r=1540483477*(65535&(r^=r>>>13))+(59797*(r>>>16)<<16))^r>>>15)>>>0).toString(36)}(o)+l;return{name:c,styles:o,next:_}},S=n.default.useInsertionEffect?n.default.useInsertionEffect:function(e){e()};var A=function(e){var t=e.cache,r=e.serialized,n=e.isStringTag;f(t,r,n);S((function(){return function(e,t,r){f(e,t,r);var n=e.key+"-"+t.name;if(void 0===e.inserted[t.name]){var o=t;do{e.insert(t===o?"."+n:"",o,e.sheet,!0),o=o.next}while(void 0!==o)}}(t,r,n)}));return null};return function r(n,o){var a,s,l=n.__emotion_real===n,c=l&&n.__emotion_base||n;void 0!==o&&(a=o.label,s=o.target);var f=d(n,o,l),m=f||u(c),h=!m("as");return function(){var g=arguments,y=l&&void 0!==n.__emotion_styles?n.__emotion_styles.slice(0):[];if(void 0!==a&&y.push("label:"+a+";"),null==g[0]||void 0===g[0].raw)y.push.apply(y,g);else{0,y.push(g[0][0]);for(var v=g.length,x=1;x<v;x++)y.push(g[x],g[0][x])}var k=t.withEmotionCache((function(r,n,o){var i=h&&r.as||c,a="",l=[],d=r;if(null==r.theme){for(var g in d={},r)d[g]=r[g];d.theme=e.useContext(t.ThemeContext)}"string"==typeof r.className?a=p(n.registered,l,r.className):null!=r.className&&(a=r.className+" ");var v=C(y.concat(l),n.registered,d);a+=n.key+"-"+v.name,void 0!==s&&(a+=" "+s);var x=h&&void 0===f?u(i):m,k={};for(var b in r)h&&"as"===b||x(b)&&(k[b]=r[b]);return k.className=a,k.ref=o,e.createElement(e.Fragment,null,e.createElement(A,{cache:n,serialized:v,isStringTag:"string"==typeof i}),e.createElement(i,k))}));return k.displayName=void 0!==a?a:"Styled("+("string"==typeof c?c:c.displayName||c.name||"Component")+")",k.defaultProps=n.defaultProps,k.__emotion_real=k,k.__emotion_base=c,k.__emotion_styles=y,k.__emotion_forwardProp=f,Object.defineProperty(k,"toString",{value:function(){return"."+s}}),k.withComponent=function(e,t){return r(e,i({},o,t,{shouldForwardProp:d(k,t,!0)})).apply(void 0,y)},k}}}));
//# sourceMappingURL=emotion-styled-base.umd.min.js.map

14

CHANGELOG.md
# @emotion/styled
## 11.8.0
### Minor Changes
- [#2600](https://github.com/emotion-js/emotion/pull/2600) [`2f27156a`](https://github.com/emotion-js/emotion/commit/2f27156a73f94c3aac82e4ed492cbfdc97225573) Thanks [@Andarist](https://github.com/Andarist)! - Refactored code to use the upcoming `React.useInsertionEffect` when it's available (this is a new hook that is going to be introduced in React 18). This shouldn't have any effect on existing codebases and the change should be transparent.
### Patch Changes
- Updated dependencies [[`d2531639`](https://github.com/emotion-js/emotion/commit/d25316393639232df16ba836b407e3678eea5e4d), [`2f27156a`](https://github.com/emotion-js/emotion/commit/2f27156a73f94c3aac82e4ed492cbfdc97225573)]:
- @emotion/is-prop-valid@1.1.2
- @emotion/utils@1.1.0
## 11.6.0

@@ -7,3 +19,3 @@

- [#2542](https://github.com/emotion-js/emotion/pull/2542) [`eb013d25`](https://github.com/emotion-js/emotion/commit/eb013d25722f4fd9af9acf699789bf6b8afac871) Thanks [@eps1lon](https://github.com/eps1lon)! - Fixed hydration mismatches if `React.useId` (the upcoming API of the React 18) is used within a tree below our components.
- [#2542](https://github.com/emotion-js/emotion/pull/2542) [`eb013d25`](https://github.com/emotion-js/emotion/commit/eb013d25722f4fd9af9acf699789bf6b8afac871) Thanks [@eps1lon](https://github.com/eps1lon)! - Fixed hydration mismatches if `React.useId` (an upcoming API in React 18) is used within a tree below our components.

@@ -10,0 +22,0 @@ ### Patch Changes

2

dist/emotion-styled.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["react","@emotion/react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).emotionStyled=t(e.React,e.emotionReact)}(this,(function(e,t){"use strict";function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var n=r(function(e,t,r){return e(r={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&r.path)}},r.exports),r.exports}((function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},e.exports.default=e.exports,e.exports.__esModule=!0,t.apply(this,arguments)}e.exports=t,e.exports.default=e.exports,e.exports.__esModule=!0})));function o(e){var t=Object.create(null);return function(r){return void 0===t[r]&&(t[r]=e(r)),t[r]}}var i=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,a=o((function(e){return i.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91})),l=function(e){return"theme"!==e},s=function(e){return"string"==typeof e&&e.charCodeAt(0)>96?a:l},c=function(e,t,r){var n;if(t){var o=t.shouldForwardProp;n=e.__emotion_forwardProp&&o?function(t){return e.__emotion_forwardProp(t)&&o(t)}:o}return"function"!=typeof n&&r&&(n=e.__emotion_forwardProp),n};function d(e,t,r){var n="";return r.split(" ").forEach((function(r){void 0!==e[r]?t.push(e[r]+";"):n+=r+" "})),n}var u=function(e,t,r){var n=e.key+"-"+t.name;if(!1===r&&void 0===e.registered[n]&&(e.registered[n]=t.styles),void 0===e.inserted[t.name]){var o=t;do{e.insert(t===o?"."+n:"",o,e.sheet,!0);o=o.next}while(void 0!==o)}};var p={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},f=/[A-Z]|^ms/g,m=/_EMO_([^_]+?)_([^]*?)_EMO_/g,h=function(e){return 45===e.charCodeAt(1)},g=function(e){return null!=e&&"boolean"!=typeof e},y=o((function(e){return h(e)?e:e.replace(f,"-$&").toLowerCase()})),v=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(m,(function(e,t,r){return x={name:t,styles:r,next:x},t}))}return 1===p[e]||h(e)||"number"!=typeof t||0===t?t:t+"px"};function b(e,t,r){if(null==r)return"";if(void 0!==r.__emotion_styles)return r;switch(typeof r){case"boolean":return"";case"object":if(1===r.anim)return x={name:r.name,styles:r.styles,next:x},r.name;if(void 0!==r.styles){var n=r.next;if(void 0!==n)for(;void 0!==n;)x={name:n.name,styles:n.styles,next:x},n=n.next;var o=r.styles+";";return o}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=b(e,t,r[o])+";";else for(var i in r){var a=r[i];if("object"!=typeof a)null!=t&&void 0!==t[a]?n+=i+"{"+t[a]+"}":g(a)&&(n+=y(i)+":"+v(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var l=b(e,t,a);switch(i){case"animation":case"animationName":n+=y(i)+":"+l+";";break;default:n+=i+"{"+l+"}"}}else for(var s=0;s<a.length;s++)g(a[s])&&(n+=y(i)+":"+v(i,a[s])+";")}return n}(e,t,r);case"function":if(void 0!==e){var i=x,a=r(e);return x=i,b(e,t,a)}break;case"string":}if(null==t)return r;var l=t[r];return void 0!==l?l:r}var x,k=/label:\s*([^\s;\n{]+)\s*(;|$)/g;var w=function(e,t,r){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var n=!0,o="";x=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=b(r,t,i)):o+=i[0];for(var a=1;a<e.length;a++)o+=b(r,t,e[a]),n&&(o+=i[a]);k.lastIndex=0;for(var l,s="";null!==(l=k.exec(o));)s+="-"+l[1];var c=function(e){for(var t,r=0,n=0,o=e.length;o>=4;++n,o-=4)t=1540483477*(65535&(t=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+(59797*(t>>>16)<<16),r=1540483477*(65535&(t^=t>>>24))+(59797*(t>>>16)<<16)^1540483477*(65535&r)+(59797*(r>>>16)<<16);switch(o){case 3:r^=(255&e.charCodeAt(n+2))<<16;case 2:r^=(255&e.charCodeAt(n+1))<<8;case 1:r=1540483477*(65535&(r^=255&e.charCodeAt(n)))+(59797*(r>>>16)<<16)}return(((r=1540483477*(65535&(r^=r>>>13))+(59797*(r>>>16)<<16))^r>>>15)>>>0).toString(36)}(o)+s;return{name:c,styles:o,next:x}},_=function(){return null},C=function r(o,i){var a,l,p=o.__emotion_real===o,f=p&&o.__emotion_base||o;void 0!==i&&(a=i.label,l=i.target);var m=c(o,i,p),h=m||s(f),g=!h("as");return function(){var y=arguments,v=p&&void 0!==o.__emotion_styles?o.__emotion_styles.slice(0):[];if(void 0!==a&&v.push("label:"+a+";"),null==y[0]||void 0===y[0].raw)v.push.apply(v,y);else{0,v.push(y[0][0]);for(var b=y.length,x=1;x<b;x++)v.push(y[x],y[0][x])}var k=t.withEmotionCache((function(r,n,o){var i=g&&r.as||f,a="",c=[],p=r;if(null==r.theme){for(var y in p={},r)p[y]=r[y];p.theme=e.useContext(t.ThemeContext)}"string"==typeof r.className?a=d(n.registered,c,r.className):null!=r.className&&(a=r.className+" ");var b=w(v.concat(c),n.registered,p);u(n,b,"string"==typeof i);a+=n.key+"-"+b.name,void 0!==l&&(a+=" "+l);var x=g&&void 0===m?s(i):h,k={};for(var C in r)g&&"as"===C||x(C)&&(k[C]=r[C]);k.className=a,k.ref=o;var S=e.createElement(i,k),A=e.createElement(_,null);return e.createElement(e.Fragment,null,A,S)}));return k.displayName=void 0!==a?a:"Styled("+("string"==typeof f?f:f.displayName||f.name||"Component")+")",k.defaultProps=o.defaultProps,k.__emotion_real=k,k.__emotion_base=f,k.__emotion_styles=v,k.__emotion_forwardProp=m,Object.defineProperty(k,"toString",{value:function(){return"."+l}}),k.withComponent=function(e,t){return r(e,n({},i,t,{shouldForwardProp:c(k,t,!0)})).apply(void 0,v)},k}}.bind();return["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"].forEach((function(e){C[e]=C(e)})),C}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["react","@emotion/react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).emotionStyled=t(e.React,e.emotionReact)}(this,(function(e,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var n=r(e);function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var i=o(function(e,t,r){return e(r={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&r.path)}},r.exports),r.exports}((function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},e.exports.default=e.exports,e.exports.__esModule=!0,t.apply(this,arguments)}e.exports=t,e.exports.default=e.exports,e.exports.__esModule=!0})));function a(e){var t=Object.create(null);return function(r){return void 0===t[r]&&(t[r]=e(r)),t[r]}}var s=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,l=a((function(e){return s.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91})),c=function(e){return"theme"!==e},d=function(e){return"string"==typeof e&&e.charCodeAt(0)>96?l:c},u=function(e,t,r){var n;if(t){var o=t.shouldForwardProp;n=e.__emotion_forwardProp&&o?function(t){return e.__emotion_forwardProp(t)&&o(t)}:o}return"function"!=typeof n&&r&&(n=e.__emotion_forwardProp),n};function p(e,t,r){var n="";return r.split(" ").forEach((function(r){void 0!==e[r]?t.push(e[r]+";"):n+=r+" "})),n}var f=function(e,t,r){var n=e.key+"-"+t.name;!1===r&&void 0===e.registered[n]&&(e.registered[n]=t.styles)};var m={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},h=/[A-Z]|^ms/g,g=/_EMO_([^_]+?)_([^]*?)_EMO_/g,y=function(e){return 45===e.charCodeAt(1)},v=function(e){return null!=e&&"boolean"!=typeof e},b=a((function(e){return y(e)?e:e.replace(h,"-$&").toLowerCase()})),x=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(g,(function(e,t,r){return w={name:t,styles:r,next:w},t}))}return 1===m[e]||y(e)||"number"!=typeof t||0===t?t:t+"px"};function k(e,t,r){if(null==r)return"";if(void 0!==r.__emotion_styles)return r;switch(typeof r){case"boolean":return"";case"object":if(1===r.anim)return w={name:r.name,styles:r.styles,next:w},r.name;if(void 0!==r.styles){var n=r.next;if(void 0!==n)for(;void 0!==n;)w={name:n.name,styles:n.styles,next:w},n=n.next;var o=r.styles+";";return o}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=k(e,t,r[o])+";";else for(var i in r){var a=r[i];if("object"!=typeof a)null!=t&&void 0!==t[a]?n+=i+"{"+t[a]+"}":v(a)&&(n+=b(i)+":"+x(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var s=k(e,t,a);switch(i){case"animation":case"animationName":n+=b(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)v(a[l])&&(n+=b(i)+":"+x(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var i=w,a=r(e);return w=i,k(e,t,a)}break;case"string":}if(null==t)return r;var s=t[r];return void 0!==s?s:r}var w,_=/label:\s*([^\s;\n{]+)\s*(;|$)/g;var C=function(e,t,r){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var n=!0,o="";w=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=k(r,t,i)):o+=i[0];for(var a=1;a<e.length;a++)o+=k(r,t,e[a]),n&&(o+=i[a]);_.lastIndex=0;for(var s,l="";null!==(s=_.exec(o));)l+="-"+s[1];var c=function(e){for(var t,r=0,n=0,o=e.length;o>=4;++n,o-=4)t=1540483477*(65535&(t=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+(59797*(t>>>16)<<16),r=1540483477*(65535&(t^=t>>>24))+(59797*(t>>>16)<<16)^1540483477*(65535&r)+(59797*(r>>>16)<<16);switch(o){case 3:r^=(255&e.charCodeAt(n+2))<<16;case 2:r^=(255&e.charCodeAt(n+1))<<8;case 1:r=1540483477*(65535&(r^=255&e.charCodeAt(n)))+(59797*(r>>>16)<<16)}return(((r=1540483477*(65535&(r^=r>>>13))+(59797*(r>>>16)<<16))^r>>>15)>>>0).toString(36)}(o)+l;return{name:c,styles:o,next:w}},S=n.default.useInsertionEffect?n.default.useInsertionEffect:function(e){e()};var A=function(e){var t=e.cache,r=e.serialized,n=e.isStringTag;f(t,r,n);S((function(){return function(e,t,r){f(e,t,r);var n=e.key+"-"+t.name;if(void 0===e.inserted[t.name]){var o=t;do{e.insert(t===o?"."+n:"",o,e.sheet,!0),o=o.next}while(void 0!==o)}}(t,r,n)}));return null},O=function r(n,o){var a,s,l=n.__emotion_real===n,c=l&&n.__emotion_base||n;void 0!==o&&(a=o.label,s=o.target);var f=u(n,o,l),m=f||d(c),h=!m("as");return function(){var g=arguments,y=l&&void 0!==n.__emotion_styles?n.__emotion_styles.slice(0):[];if(void 0!==a&&y.push("label:"+a+";"),null==g[0]||void 0===g[0].raw)y.push.apply(y,g);else{0,y.push(g[0][0]);for(var v=g.length,b=1;b<v;b++)y.push(g[b],g[0][b])}var x=t.withEmotionCache((function(r,n,o){var i=h&&r.as||c,a="",l=[],u=r;if(null==r.theme){for(var g in u={},r)u[g]=r[g];u.theme=e.useContext(t.ThemeContext)}"string"==typeof r.className?a=p(n.registered,l,r.className):null!=r.className&&(a=r.className+" ");var v=C(y.concat(l),n.registered,u);a+=n.key+"-"+v.name,void 0!==s&&(a+=" "+s);var b=h&&void 0===f?d(i):m,x={};for(var k in r)h&&"as"===k||b(k)&&(x[k]=r[k]);return x.className=a,x.ref=o,e.createElement(e.Fragment,null,e.createElement(A,{cache:n,serialized:v,isStringTag:"string"==typeof i}),e.createElement(i,x))}));return x.displayName=void 0!==a?a:"Styled("+("string"==typeof c?c:c.displayName||c.name||"Component")+")",x.defaultProps=n.defaultProps,x.__emotion_real=x,x.__emotion_base=c,x.__emotion_styles=y,x.__emotion_forwardProp=f,Object.defineProperty(x,"toString",{value:function(){return"."+s}}),x.withComponent=function(e,t){return r(e,i({},o,t,{shouldForwardProp:u(x,t,!0)})).apply(void 0,y)},x}}.bind();return["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"].forEach((function(e){O[e]=O(e)})),O}));
//# sourceMappingURL=emotion-styled.umd.min.js.map

10

package.json
{
"name": "@emotion/styled",
"version": "11.6.0",
"version": "11.8.0",
"description": "styled API for emotion",

@@ -15,6 +15,6 @@ "main": "dist/emotion-styled.cjs.js",

"@babel/runtime": "^7.13.10",
"@emotion/babel-plugin": "^11.3.0",
"@emotion/is-prop-valid": "^1.1.1",
"@emotion/babel-plugin": "^11.7.1",
"@emotion/is-prop-valid": "^1.1.2",
"@emotion/serialize": "^1.0.2",
"@emotion/utils": "^1.0.0"
"@emotion/utils": "^1.1.0"
},

@@ -36,3 +36,3 @@ "peerDependencies": {

"@babel/core": "^7.13.10",
"@emotion/react": "11.6.0",
"@emotion/react": "11.8.0",
"dtslint": "^0.3.0",

@@ -39,0 +39,0 @@ "react": "16.14.0"

72

src/base.js

@@ -12,4 +12,9 @@ // @flow

import { withEmotionCache, ThemeContext } from '@emotion/react'
import { getRegisteredStyles, insertStyles } from '@emotion/utils'
import {
getRegisteredStyles,
insertStyles,
registerStyles
} from '@emotion/utils'
import { serializeStyles } from '@emotion/serialize'
import useInsertionEffectMaybe from './useInsertionEffectMaybe'

@@ -22,4 +27,30 @@ const ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.

let isBrowser = typeof document !== 'undefined'
const Noop = () => null
const Insertion = ({ cache, serialized, isStringTag }) => {
registerStyles(cache, serialized, isStringTag)
const rules = useInsertionEffectMaybe(() =>
insertStyles(cache, serialized, isStringTag)
)
if (!isBrowser && rules !== undefined) {
let serializedNames = serialized.name
let next = serialized.next
while (next !== undefined) {
serializedNames += ' ' + next.name
next = next.next
}
return (
<style
{...{
[`data-emotion`]: `${cache.key} ${serializedNames}`,
dangerouslySetInnerHTML: { __html: rules },
nonce: cache.sheet.nonce
}}
/>
)
}
return null
}
let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {

@@ -78,3 +109,3 @@ if (process.env.NODE_ENV !== 'production') {

(props, cache, ref) => {
const finalTag = (shouldUseAs && props.as) || baseTag
const FinalTag = (shouldUseAs && props.as) || baseTag

@@ -107,7 +138,2 @@ let className = ''

)
const rules = insertStyles(
cache,
serialized,
typeof finalTag === 'string'
)
className += `${cache.key}-${serialized.name}`

@@ -120,3 +146,3 @@ if (targetClassName !== undefined) {

shouldUseAs && shouldForwardProp === undefined
? getDefaultShouldForwardProp(finalTag)
? getDefaultShouldForwardProp(FinalTag)
: defaultShouldForwardProp

@@ -140,26 +166,10 @@

const ele = React.createElement(finalTag, newProps)
let possiblyStyleElement = <Noop />
if (!isBrowser && rules !== undefined) {
let serializedNames = serialized.name
let next = serialized.next
while (next !== undefined) {
serializedNames += ' ' + next.name
next = next.next
}
possiblyStyleElement = (
<style
{...{
[`data-emotion`]: `${cache.key} ${serializedNames}`,
dangerouslySetInnerHTML: { __html: rules },
nonce: cache.sheet.nonce
}}
/>
)
}
// Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
return (
<>
{possiblyStyleElement}
{ele}
<Insertion
cache={cache}
serialized={serialized}
isStringTag={typeof FinalTag === 'string'}
/>
<FinalTag {...newProps} />
</>

@@ -166,0 +176,0 @@ )

base/dist/emotion-styled-base.umd.min.js.map

Sorry, the diff of this file is not supported yet

dist/emotion-styled.umd.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc