@emotion/styled-base - npm Package Compare versions

Comparing version 11.0.0-next.1 to 11.0.0-next.2

CHANGELOG.md

 # @emotion/styled-base
 
+## 11.0.0-next.2
+
+### Major Changes
+
+- [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Remove support for deprecated `innerRef` prop
+
+* [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use hooks internally for improved bundle size and a better tree in React DevTools
+
+### Patch Changes
+
+- Updated dependencies [[`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967)]:
+  - @emotion/core@11.0.0-next.2
+
 ## 11.0.0-next.1
@@ -4,0 +17,0 @@

dist/styled-base.browser.cjs.js

@@ -17,3 +17,3 @@ 'use strict';
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
-  return key !== 'theme' && key !== 'innerRef';
+  return key !== 'theme';
 };
@@ -91,56 +91,49 @@
 
-    var Styled = core.withEmotionCache(function (props, context, ref) {
-      return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
-        var finalTag = shouldUseAs && props.as || baseTag;
-        var className = '';
-        var classInterpolations = [];
-        var mergedProps = props;
+    var Styled = core.withEmotionCache(function (props, cache, ref) {
+      var finalTag = shouldUseAs && props.as || baseTag;
+      var className = '';
+      var classInterpolations = [];
+      var mergedProps = props;
 
-        if (props.theme == null) {
-          mergedProps = {};
+      if (props.theme == null) {
+        mergedProps = {};
 
-          for (var key in props) {
-            mergedProps[key] = props[key];
-          }
-
-          mergedProps.theme = theme;
+        for (var key in props) {
+          mergedProps[key] = props[key];
         }
 
-        if (typeof props.className === 'string') {
-          className = utils.getRegisteredStyles(context.registered, classInterpolations, props.className);
-        } else if (props.className != null) {
-          className = props.className + " ";
-        }
+        mergedProps.theme = React.useContext(core.ThemeContext);
+      }
 
-        var serialized = serialize.serializeStyles(styles.concat(classInterpolations), context.registered, mergedProps);
-        var rules = utils.insertStyles(context, serialized, typeof finalTag === 'string');
-        className += context.key + "-" + serialized.name;
+      if (typeof props.className === 'string') {
+        className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className);
+      } else if (props.className != null) {
+        className = props.className + " ";
+      }
 
-        if (targetClassName !== undefined) {
-          className += " " + targetClassName;
-        }
+      var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
+      var rules = utils.insertStyles(cache, serialized, typeof finalTag === 'string');
+      className += cache.key + "-" + serialized.name;
 
-        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
-        var newProps = {};
+      if (targetClassName !== undefined) {
+        className += " " + targetClassName;
+      }
 
-        for (var _key in props) {
-          if (shouldUseAs && _key === 'as') continue;
+      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
+      var newProps = {};
 
-          if ( // $FlowFixMe
-          finalShouldForwardProp(_key)) {
-            newProps[_key] = props[_key];
-          }
-        }
+      for (var _key in props) {
+        if (shouldUseAs && _key === 'as') continue;
 
-        newProps.className = className;
-        newProps.ref = ref || props.innerRef;
-
-        if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-          console.error('`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' + (identifierName === undefined ? '' : " in the usage of `" + identifierName + "`"));
+        if ( // $FlowFixMe
+        finalShouldForwardProp(_key)) {
+          newProps[_key] = props[_key];
         }
+      }
 
-        var ele = React.createElement(finalTag, newProps);
+      newProps.className = className;
+      newProps.ref = ref;
+      var ele = React.createElement(finalTag, newProps);
 
-        return ele;
-      });
+      return ele;
     });
@@ -147,0 +140,0 @@ Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";

dist/styled-base.browser.esm.js

 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { createElement } from 'react';
+import { useContext, createElement } from 'react';
 import isPropValid from '@emotion/is-prop-valid';
@@ -11,3 +11,3 @@ import { withEmotionCache, ThemeContext } from '@emotion/core';
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
-  return key !== 'theme' && key !== 'innerRef';
+  return key !== 'theme';
 };
@@ -85,56 +85,49 @@
 
-    var Styled = withEmotionCache(function (props, context, ref) {
-      return createElement(ThemeContext.Consumer, null, function (theme) {
-        var finalTag = shouldUseAs && props.as || baseTag;
-        var className = '';
-        var classInterpolations = [];
-        var mergedProps = props;
+    var Styled = withEmotionCache(function (props, cache, ref) {
+      var finalTag = shouldUseAs && props.as || baseTag;
+      var className = '';
+      var classInterpolations = [];
+      var mergedProps = props;
 
-        if (props.theme == null) {
-          mergedProps = {};
+      if (props.theme == null) {
+        mergedProps = {};
 
-          for (var key in props) {
-            mergedProps[key] = props[key];
-          }
-
-          mergedProps.theme = theme;
+        for (var key in props) {
+          mergedProps[key] = props[key];
         }
 
-        if (typeof props.className === 'string') {
-          className = getRegisteredStyles(context.registered, classInterpolations, props.className);
-        } else if (props.className != null) {
-          className = props.className + " ";
-        }
+        mergedProps.theme = useContext(ThemeContext);
+      }
 
-        var serialized = serializeStyles(styles.concat(classInterpolations), context.registered, mergedProps);
-        var rules = insertStyles(context, serialized, typeof finalTag === 'string');
-        className += context.key + "-" + serialized.name;
+      if (typeof props.className === 'string') {
+        className = getRegisteredStyles(cache.registered, classInterpolations, props.className);
+      } else if (props.className != null) {
+        className = props.className + " ";
+      }
 
-        if (targetClassName !== undefined) {
-          className += " " + targetClassName;
-        }
+      var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
+      var rules = insertStyles(cache, serialized, typeof finalTag === 'string');
+      className += cache.key + "-" + serialized.name;
 
-        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
-        var newProps = {};
+      if (targetClassName !== undefined) {
+        className += " " + targetClassName;
+      }
 
-        for (var _key in props) {
-          if (shouldUseAs && _key === 'as') continue;
+      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
+      var newProps = {};
 
-          if ( // $FlowFixMe
-          finalShouldForwardProp(_key)) {
-            newProps[_key] = props[_key];
-          }
-        }
+      for (var _key in props) {
+        if (shouldUseAs && _key === 'as') continue;
 
-        newProps.className = className;
-        newProps.ref = ref || props.innerRef;
-
-        if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-          console.error('`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' + (identifierName === undefined ? '' : " in the usage of `" + identifierName + "`"));
+        if ( // $FlowFixMe
+        finalShouldForwardProp(_key)) {
+          newProps[_key] = props[_key];
         }
+      }
 
-        var ele = createElement(finalTag, newProps);
+      newProps.className = className;
+      newProps.ref = ref;
+      var ele = createElement(finalTag, newProps);
 
-        return ele;
-      });
+      return ele;
     });
@@ -141,0 +134,0 @@ Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";

dist/styled-base.cjs.dev.js

@@ -17,3 +17,3 @@ 'use strict';
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
-  return key !== 'theme' && key !== 'innerRef';
+  return key !== 'theme';
 };
@@ -92,72 +92,65 @@
 
-    var Styled = core.withEmotionCache(function (props, context, ref) {
-      return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
-        var finalTag = shouldUseAs && props.as || baseTag;
-        var className = '';
-        var classInterpolations = [];
-        var mergedProps = props;
+    var Styled = core.withEmotionCache(function (props, cache, ref) {
+      var finalTag = shouldUseAs && props.as || baseTag;
+      var className = '';
+      var classInterpolations = [];
+      var mergedProps = props;
 
-        if (props.theme == null) {
-          mergedProps = {};
+      if (props.theme == null) {
+        mergedProps = {};
 
-          for (var key in props) {
-            mergedProps[key] = props[key];
-          }
-
-          mergedProps.theme = theme;
+        for (var key in props) {
+          mergedProps[key] = props[key];
         }
 
-        if (typeof props.className === 'string') {
-          className = utils.getRegisteredStyles(context.registered, classInterpolations, props.className);
-        } else if (props.className != null) {
-          className = props.className + " ";
-        }
+        mergedProps.theme = React.useContext(core.ThemeContext);
+      }
 
-        var serialized = serialize.serializeStyles(styles.concat(classInterpolations), context.registered, mergedProps);
-        var rules = utils.insertStyles(context, serialized, typeof finalTag === 'string');
-        className += context.key + "-" + serialized.name;
+      if (typeof props.className === 'string') {
+        className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className);
+      } else if (props.className != null) {
+        className = props.className + " ";
+      }
 
-        if (targetClassName !== undefined) {
-          className += " " + targetClassName;
-        }
+      var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
+      var rules = utils.insertStyles(cache, serialized, typeof finalTag === 'string');
+      className += cache.key + "-" + serialized.name;
 
-        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
-        var newProps = {};
+      if (targetClassName !== undefined) {
+        className += " " + targetClassName;
+      }
 
-        for (var _key in props) {
-          if (shouldUseAs && _key === 'as') continue;
+      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
+      var newProps = {};
 
-          if ( // $FlowFixMe
-          finalShouldForwardProp(_key)) {
-            newProps[_key] = props[_key];
-          }
-        }
+      for (var _key in props) {
+        if (shouldUseAs && _key === 'as') continue;
 
-        newProps.className = className;
-        newProps.ref = ref || props.innerRef;
-
-        if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-          console.error('`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' + (identifierName === undefined ? '' : " in the usage of `" + identifierName + "`"));
+        if ( // $FlowFixMe
+        finalShouldForwardProp(_key)) {
+          newProps[_key] = props[_key];
         }
+      }
 
-        var ele = React.createElement(finalTag, newProps);
+      newProps.className = className;
+      newProps.ref = ref;
+      var ele = React.createElement(finalTag, newProps);
 
-        if (!isBrowser && rules !== undefined) {
-          var _ref;
+      if (!isBrowser && rules !== undefined) {
+        var _ref;
 
-          var serializedNames = serialized.name;
-          var next = serialized.next;
+        var serializedNames = serialized.name;
+        var next = serialized.next;
 
-          while (next !== undefined) {
-            serializedNames += ' ' + next.name;
-            next = next.next;
-          }
-
-          return React.createElement(React.Fragment, null, React.createElement("style", (_ref = {}, _ref["data-emotion-" + context.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
-            __html: rules
-          }, _ref.nonce = context.sheet.nonce, _ref)), ele);
+        while (next !== undefined) {
+          serializedNames += ' ' + next.name;
+          next = next.next;
         }
 
-        return ele;
-      });
+        return React.createElement(React.Fragment, null, React.createElement("style", (_ref = {}, _ref["data-emotion-" + cache.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
+          __html: rules
+        }, _ref.nonce = cache.sheet.nonce, _ref)), ele);
+      }
+
+      return ele;
     });
@@ -164,0 +157,0 @@ Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";

dist/styled-base.cjs.prod.js

@@ -12,3 +12,3 @@ "use strict";
 var _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), React = require("react"), isPropValid = _interopDefault(require("@emotion/is-prop-valid")), core = require("@emotion/core"), utils = require("@emotion/utils"), serialize = require("@emotion/serialize"), testOmitPropsOnStringTag = isPropValid, testOmitPropsOnComponent = function(key) {
-  return "theme" !== key && "innerRef" !== key;
+  return "theme" !== key;
 }, getDefaultShouldForwardProp = function(tag) {
@@ -56,26 +56,24 @@ return "string" == typeof tag && tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
     }
-    var Styled = core.withEmotionCache(function(props, context, ref) {
-      return React.createElement(core.ThemeContext.Consumer, null, function(theme) {
-        var finalTag = shouldUseAs && props.as || baseTag, className = "", classInterpolations = [], mergedProps = props;
-        if (null == props.theme) {
-          for (var key in mergedProps = {}, props) mergedProps[key] = props[key];
-          mergedProps.theme = theme;
-        }
-        "string" == typeof props.className ? className = utils.getRegisteredStyles(context.registered, classInterpolations, props.className) : null != props.className && (className = props.className + " ");
-        var serialized = serialize.serializeStyles(styles.concat(classInterpolations), context.registered, mergedProps), rules = utils.insertStyles(context, serialized, "string" == typeof finalTag);
-        className += context.key + "-" + serialized.name, void 0 !== targetClassName && (className += " " + targetClassName);
-        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 || props.innerRef;
-        var ele = React.createElement(finalTag, newProps);
-        if (!isBrowser && void 0 !== rules) {
-          for (var _ref, serializedNames = serialized.name, next = serialized.next; void 0 !== next; ) serializedNames += " " + next.name, 
-          next = next.next;
-          return React.createElement(React.Fragment, null, React.createElement("style", ((_ref = {})["data-emotion-" + context.key] = serializedNames, 
-          _ref.dangerouslySetInnerHTML = {
-            __html: rules
-          }, _ref.nonce = context.sheet.nonce, _ref)), ele);
-        }
-        return ele;
-      });
+    var Styled = core.withEmotionCache(function(props, cache, ref) {
+      var finalTag = shouldUseAs && props.as || baseTag, className = "", classInterpolations = [], mergedProps = props;
+      if (null == props.theme) {
+        for (var key in mergedProps = {}, props) mergedProps[key] = props[key];
+        mergedProps.theme = React.useContext(core.ThemeContext);
+      }
+      "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);
+      className += cache.key + "-" + serialized.name, void 0 !== targetClassName && (className += " " + targetClassName);
+      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);
+      if (!isBrowser && void 0 !== rules) {
+        for (var _ref, serializedNames = serialized.name, next = serialized.next; void 0 !== next; ) serializedNames += " " + next.name, 
+        next = next.next;
+        return React.createElement(React.Fragment, null, React.createElement("style", ((_ref = {})["data-emotion-" + cache.key] = serializedNames, 
+        _ref.dangerouslySetInnerHTML = {
+          __html: rules
+        }, _ref.nonce = cache.sheet.nonce, _ref)), ele);
+      }
+      return ele;
     });
@@ -82,0 +80,0 @@ return Styled.displayName = void 0 !== identifierName ? identifierName : "Styled(" + ("string" == typeof baseTag ? baseTag : baseTag.displayName || baseTag.name || "Component") + ")",

dist/styled-base.esm.js

 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { createElement, Fragment } from 'react';
+import { useContext, createElement, Fragment } from 'react';
 import isPropValid from '@emotion/is-prop-valid';
@@ -11,3 +11,3 @@ import { withEmotionCache, ThemeContext } from '@emotion/core';
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
-  return key !== 'theme' && key !== 'innerRef';
+  return key !== 'theme';
 };
@@ -86,72 +86,65 @@
 
-    var Styled = withEmotionCache(function (props, context, ref) {
-      return createElement(ThemeContext.Consumer, null, function (theme) {
-        var finalTag = shouldUseAs && props.as || baseTag;
-        var className = '';
-        var classInterpolations = [];
-        var mergedProps = props;
+    var Styled = withEmotionCache(function (props, cache, ref) {
+      var finalTag = shouldUseAs && props.as || baseTag;
+      var className = '';
+      var classInterpolations = [];
+      var mergedProps = props;
 
-        if (props.theme == null) {
-          mergedProps = {};
+      if (props.theme == null) {
+        mergedProps = {};
 
-          for (var key in props) {
-            mergedProps[key] = props[key];
-          }
-
-          mergedProps.theme = theme;
+        for (var key in props) {
+          mergedProps[key] = props[key];
         }
 
-        if (typeof props.className === 'string') {
-          className = getRegisteredStyles(context.registered, classInterpolations, props.className);
-        } else if (props.className != null) {
-          className = props.className + " ";
-        }
+        mergedProps.theme = useContext(ThemeContext);
+      }
 
-        var serialized = serializeStyles(styles.concat(classInterpolations), context.registered, mergedProps);
-        var rules = insertStyles(context, serialized, typeof finalTag === 'string');
-        className += context.key + "-" + serialized.name;
+      if (typeof props.className === 'string') {
+        className = getRegisteredStyles(cache.registered, classInterpolations, props.className);
+      } else if (props.className != null) {
+        className = props.className + " ";
+      }
 
-        if (targetClassName !== undefined) {
-          className += " " + targetClassName;
-        }
+      var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
+      var rules = insertStyles(cache, serialized, typeof finalTag === 'string');
+      className += cache.key + "-" + serialized.name;
 
-        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
-        var newProps = {};
+      if (targetClassName !== undefined) {
+        className += " " + targetClassName;
+      }
 
-        for (var _key in props) {
-          if (shouldUseAs && _key === 'as') continue;
+      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
+      var newProps = {};
 
-          if ( // $FlowFixMe
-          finalShouldForwardProp(_key)) {
-            newProps[_key] = props[_key];
-          }
-        }
+      for (var _key in props) {
+        if (shouldUseAs && _key === 'as') continue;
 
-        newProps.className = className;
-        newProps.ref = ref || props.innerRef;
-
-        if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-          console.error('`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' + (identifierName === undefined ? '' : " in the usage of `" + identifierName + "`"));
+        if ( // $FlowFixMe
+        finalShouldForwardProp(_key)) {
+          newProps[_key] = props[_key];
         }
+      }
 
-        var ele = createElement(finalTag, newProps);
+      newProps.className = className;
+      newProps.ref = ref;
+      var ele = createElement(finalTag, newProps);
 
-        if (!isBrowser && rules !== undefined) {
-          var _ref;
+      if (!isBrowser && rules !== undefined) {
+        var _ref;
 
-          var serializedNames = serialized.name;
-          var next = serialized.next;
+        var serializedNames = serialized.name;
+        var next = serialized.next;
 
-          while (next !== undefined) {
-            serializedNames += ' ' + next.name;
-            next = next.next;
-          }
-
-          return createElement(Fragment, null, createElement("style", (_ref = {}, _ref["data-emotion-" + context.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
-            __html: rules
-          }, _ref.nonce = context.sheet.nonce, _ref)), ele);
+        while (next !== undefined) {
+          serializedNames += ' ' + next.name;
+          next = next.next;
         }
 
-        return ele;
-      });
+        return createElement(Fragment, null, createElement("style", (_ref = {}, _ref["data-emotion-" + cache.key] = serializedNames, _ref.dangerouslySetInnerHTML = {
+          __html: rules
+        }, _ref.nonce = cache.sheet.nonce, _ref)), ele);
+      }
+
+      return ele;
     });
@@ -158,0 +151,0 @@ Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";

dist/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/core")):"function"==typeof define&&define.amd?define(["react","@emotion/core"],t):(e=e||self).emotionStyledBase=t(e.React,e.emotionCore)}(this,function(e,t){"use strict";var r=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e};function n(e){var t={};return function(r){return void 0===t[r]&&(t[r]=e(r)),t[r]}}var o=/^((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|download|draggable|encType|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|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|on|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)-.*))$/,i=n(function(e){return o.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91}),a=function(e){return"theme"!==e&&"innerRef"!==e},s=function(e){return"string"==typeof e&&e.charCodeAt(0)>96?i:a};var l={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},c=/[A-Z]|^ms/g,d=/_EMO_([^_]+?)_([^]*?)_EMO_/g,u=function(e){return 45===e.charCodeAt(1)},p=function(e){return null!=e&&"boolean"!=typeof e},f=n(function(e){return u(e)?e:e.replace(c,"-$&").toLowerCase()}),m=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(d,function(e,t,r){return g={name:t,styles:r,next:g},t})}return 1===l[e]||u(e)||"number"!=typeof t||0===t?t:t+"px"};function h(e,t,r,n){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 g={name:r.name,styles:r.styles,next:g},r.name;if(void 0!==r.styles){var o=r.next;if(void 0!==o)for(;void 0!==o;)g={name:o.name,styles:o.styles,next:g},o=o.next;return r.styles+";"}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=h(e,t,r[o],!1);else for(var i in r){var a=r[i];if("object"!=typeof a)null!=t&&void 0!==t[a]?n+=i+"{"+t[a]+"}":p(a)&&(n+=f(i)+":"+m(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var s=h(e,t,a,!1);switch(i){case"animation":case"animationName":n+=f(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)p(a[l])&&(n+=f(i)+":"+m(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var i=g,a=r(e);return g=i,h(e,t,a,n)}}if(null==t)return r;var s=t[r];return void 0===s||n?r:s}var g,y=/label:\s*([^\s;\n{]+)\s*;/g;function v(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}return function n(o,i){var a,l,c;void 0!==i&&(a=i.label,c=i.target,l=o.__emotion_forwardProp&&i.shouldForwardProp?function(e){return o.__emotion_forwardProp(e)&&i.shouldForwardProp(e)}:i.shouldForwardProp);var d=o.__emotion_real===o,u=d&&o.__emotion_base||o;"function"!=typeof l&&d&&(l=o.__emotion_forwardProp);var p=l||s(u),f=!p("as");return function(){var m=arguments,b=d&&void 0!==o.__emotion_styles?o.__emotion_styles.slice(0):[];if(void 0!==a&&b.push("label:"+a+";"),null==m[0]||void 0===m[0].raw)b.push.apply(b,m);else{b.push(m[0][0]);for(var x=m.length,k=1;k<x;k++)b.push(m[k],m[0][k])}var w=t.withEmotionCache(function(r,n,o){return e.createElement(t.ThemeContext.Consumer,null,function(t){var i,a,d,m,v=f&&r.as||u,x="",k=[],w=r;if(null==r.theme){for(var C in w={},r)w[C]=r[C];w.theme=t}"string"==typeof r.className?(i=n.registered,a=k,d=r.className,m="",d.split(" ").forEach(function(e){void 0!==i[e]?a.push(i[e]):m+=e+" "}),x=m):null!=r.className&&(x=r.className+" ");var _=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="";g=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=h(r,t,i,!1)):o+=i[0];for(var a=1;a<e.length;a++)o+=h(r,t,e[a],46===o.charCodeAt(o.length-1)),n&&(o+=i[a]);y.lastIndex=0;for(var s,l="";null!==(s=y.exec(o));)l+="-"+s[1];return{name:function(e){for(var t,r=e.length,n=r^r,o=0;r>=4;)t=1540483477*(65535&(t=255&e.charCodeAt(o)|(255&e.charCodeAt(++o))<<8|(255&e.charCodeAt(++o))<<16|(255&e.charCodeAt(++o))<<24))+((1540483477*(t>>>16)&65535)<<16),n=1540483477*(65535&n)+((1540483477*(n>>>16)&65535)<<16)^(t=1540483477*(65535&(t^=t>>>24))+((1540483477*(t>>>16)&65535)<<16)),r-=4,++o;switch(r){case 3:n^=(255&e.charCodeAt(o+2))<<16;case 2:n^=(255&e.charCodeAt(o+1))<<8;case 1:n=1540483477*(65535&(n^=255&e.charCodeAt(o)))+((1540483477*(n>>>16)&65535)<<16)}return n=1540483477*(65535&(n^=n>>>13))+((1540483477*(n>>>16)&65535)<<16),((n^=n>>>15)>>>0).toString(36)}(o)+l,styles:o,next:g}}(b.concat(k),n.registered,w);!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("."+n,o,e.sheet,!0),o=o.next}while(void 0!==o)}}(n,_,"string"==typeof v),x+=n.key+"-"+_.name,void 0!==c&&(x+=" "+c);var O=f&&void 0===l?s(v):p,S={};for(var A in r)f&&"as"===A||O(A)&&(S[A]=r[A]);return S.className=x,S.ref=o||r.innerRef,e.createElement(v,S)})});return w.displayName=void 0!==a?a:"Styled("+("string"==typeof u?u:u.displayName||u.name||"Component")+")",w.defaultProps=o.defaultProps,w.__emotion_real=w,w.__emotion_base=u,w.__emotion_styles=b,w.__emotion_forwardProp=l,Object.defineProperty(w,"toString",{value:function(){return"."+c}}),w.withComponent=function(e,t){return n(e,void 0!==t?function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(n,!0).forEach(function(t){r(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}({},i||{},{},t):i).apply(void 0,b)},w}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@emotion/core")):"function"==typeof define&&define.amd?define(["react","@emotion/core"],t):(e=e||self).emotionStyledBase=t(e.React,e.emotionCore)}(this,function(e,t){"use strict";var r=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e};function n(e){var t={};return function(r){return void 0===t[r]&&(t[r]=e(r)),t[r]}}var o=/^((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|download|draggable|encType|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|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|on|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)-.*))$/,i=n(function(e){return o.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91}),a=function(e){return"theme"!==e},s=function(e){return"string"==typeof e&&e.charCodeAt(0)>96?i:a};var l={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},c=/[A-Z]|^ms/g,d=/_EMO_([^_]+?)_([^]*?)_EMO_/g,u=function(e){return 45===e.charCodeAt(1)},p=function(e){return null!=e&&"boolean"!=typeof e},f=n(function(e){return u(e)?e:e.replace(c,"-$&").toLowerCase()}),m=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(d,function(e,t,r){return g={name:t,styles:r,next:g},t})}return 1===l[e]||u(e)||"number"!=typeof t||0===t?t:t+"px"};function h(e,t,r,n){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 g={name:r.name,styles:r.styles,next:g},r.name;if(void 0!==r.styles){var o=r.next;if(void 0!==o)for(;void 0!==o;)g={name:o.name,styles:o.styles,next:g},o=o.next;return r.styles+";"}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=h(e,t,r[o],!1);else for(var i in r){var a=r[i];if("object"!=typeof a)null!=t&&void 0!==t[a]?n+=i+"{"+t[a]+"}":p(a)&&(n+=f(i)+":"+m(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var s=h(e,t,a,!1);switch(i){case"animation":case"animationName":n+=f(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)p(a[l])&&(n+=f(i)+":"+m(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var i=g,a=r(e);return g=i,h(e,t,a,n)}}if(null==t)return r;var s=t[r];return void 0===s||n?r:s}var g,y=/label:\s*([^\s;\n{]+)\s*;/g;function v(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}return function n(o,i){var a,l,c;void 0!==i&&(a=i.label,c=i.target,l=o.__emotion_forwardProp&&i.shouldForwardProp?function(e){return o.__emotion_forwardProp(e)&&i.shouldForwardProp(e)}:i.shouldForwardProp);var d=o.__emotion_real===o,u=d&&o.__emotion_base||o;"function"!=typeof l&&d&&(l=o.__emotion_forwardProp);var p=l||s(u),f=!p("as");return function(){var m=arguments,b=d&&void 0!==o.__emotion_styles?o.__emotion_styles.slice(0):[];if(void 0!==a&&b.push("label:"+a+";"),null==m[0]||void 0===m[0].raw)b.push.apply(b,m);else{b.push(m[0][0]);for(var x=m.length,k=1;k<x;k++)b.push(m[k],m[0][k])}var w=t.withEmotionCache(function(r,n,o){var i,a,d,m,v=f&&r.as||u,x="",k=[],w=r;if(null==r.theme){for(var C in w={},r)w[C]=r[C];w.theme=e.useContext(t.ThemeContext)}"string"==typeof r.className?(i=n.registered,a=k,d=r.className,m="",d.split(" ").forEach(function(e){void 0!==i[e]?a.push(i[e]):m+=e+" "}),x=m):null!=r.className&&(x=r.className+" ");var _=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="";g=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=h(r,t,i,!1)):o+=i[0];for(var a=1;a<e.length;a++)o+=h(r,t,e[a],46===o.charCodeAt(o.length-1)),n&&(o+=i[a]);y.lastIndex=0;for(var s,l="";null!==(s=y.exec(o));)l+="-"+s[1];return{name:function(e){for(var t,r=e.length,n=r^r,o=0;r>=4;)t=1540483477*(65535&(t=255&e.charCodeAt(o)|(255&e.charCodeAt(++o))<<8|(255&e.charCodeAt(++o))<<16|(255&e.charCodeAt(++o))<<24))+((1540483477*(t>>>16)&65535)<<16),n=1540483477*(65535&n)+((1540483477*(n>>>16)&65535)<<16)^(t=1540483477*(65535&(t^=t>>>24))+((1540483477*(t>>>16)&65535)<<16)),r-=4,++o;switch(r){case 3:n^=(255&e.charCodeAt(o+2))<<16;case 2:n^=(255&e.charCodeAt(o+1))<<8;case 1:n=1540483477*(65535&(n^=255&e.charCodeAt(o)))+((1540483477*(n>>>16)&65535)<<16)}return n=1540483477*(65535&(n^=n>>>13))+((1540483477*(n>>>16)&65535)<<16),((n^=n>>>15)>>>0).toString(36)}(o)+l,styles:o,next:g}}(b.concat(k),n.registered,w);!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("."+n,o,e.sheet,!0),o=o.next}while(void 0!==o)}}(n,_,"string"==typeof v),x+=n.key+"-"+_.name,void 0!==c&&(x+=" "+c);var O=f&&void 0===l?s(v):p,S={};for(var A in r)f&&"as"===A||O(A)&&(S[A]=r[A]);return S.className=x,S.ref=o,e.createElement(v,S)});return w.displayName=void 0!==a?a:"Styled("+("string"==typeof u?u:u.displayName||u.name||"Component")+")",w.defaultProps=o.defaultProps,w.__emotion_real=w,w.__emotion_base=u,w.__emotion_styles=b,w.__emotion_forwardProp=l,Object.defineProperty(w,"toString",{value:function(){return"."+c}}),w.withComponent=function(e,t){return n(e,void 0!==t?function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(n,!0).forEach(function(t){r(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}({},i||{},{},t):i).apply(void 0,b)},w}}});
 //# sourceMappingURL=styled-base.umd.min.js.map

package.json

 {
   "name": "@emotion/styled-base",
-  "version": "11.0.0-next.1",
+  "version": "11.0.0-next.2",
   "description": "base styled API for emotion",
@@ -24,10 +24,10 @@ "main": "dist/styled-base.cjs.js",
   "devDependencies": {
-    "@emotion/core": "^11.0.0-next.1",
-    "@types/react": "^16.8.20",
+    "@emotion/core": "^11.0.0-next.2",
+    "@types/react": "^16.9.11",
     "dtslint": "^0.3.0",
-    "react": "^16.5.2"
+    "react": "^16.11.0"
   },
   "peerDependencies": {
-    "@emotion/core": "^11.0.0-next.1",
-    "react": ">=16.3.0"
+    "@emotion/core": "^11.0.0-next.2",
+    "react": ">=16.8.0"
   },
@@ -34,0 +34,0 @@ "publishConfig": {

src/index.js

@@ -82,99 +82,84 @@ // @flow
     const Styled: PrivateStyledComponent<Props> = withEmotionCache(
-      (props, context, ref) => {
-        return (
-          <ThemeContext.Consumer>
-            {theme => {
-              const finalTag = (shouldUseAs && props.as) || baseTag
+      (props, cache, ref) => {
+        const finalTag = (shouldUseAs && props.as) || baseTag
 
-              let className = ''
-              let classInterpolations = []
-              let mergedProps = props
-              if (props.theme == null) {
-                mergedProps = {}
-                for (let key in props) {
-                  mergedProps[key] = props[key]
-                }
-                mergedProps.theme = theme
-              }
+        let className = ''
+        let classInterpolations = []
+        let mergedProps = props
+        if (props.theme == null) {
+          mergedProps = {}
+          for (let key in props) {
+            mergedProps[key] = props[key]
+          }
+          mergedProps.theme = React.useContext(ThemeContext)
+        }
 
-              if (typeof props.className === 'string') {
-                className = getRegisteredStyles(
-                  context.registered,
-                  classInterpolations,
-                  props.className
-                )
-              } else if (props.className != null) {
-                className = `${props.className} `
-              }
+        if (typeof props.className === 'string') {
+          className = getRegisteredStyles(
+            cache.registered,
+            classInterpolations,
+            props.className
+          )
+        } else if (props.className != null) {
+          className = `${props.className} `
+        }
 
-              const serialized = serializeStyles(
-                styles.concat(classInterpolations),
-                context.registered,
-                mergedProps
-              )
-              const rules = insertStyles(
-                context,
-                serialized,
-                typeof finalTag === 'string'
-              )
-              className += `${context.key}-${serialized.name}`
-              if (targetClassName !== undefined) {
-                className += ` ${targetClassName}`
-              }
+        const serialized = serializeStyles(
+          styles.concat(classInterpolations),
+          cache.registered,
+          mergedProps
+        )
+        const rules = insertStyles(
+          cache,
+          serialized,
+          typeof finalTag === 'string'
+        )
+        className += `${cache.key}-${serialized.name}`
+        if (targetClassName !== undefined) {
+          className += ` ${targetClassName}`
+        }
 
-              const finalShouldForwardProp =
-                shouldUseAs && shouldForwardProp === undefined
-                  ? getDefaultShouldForwardProp(finalTag)
-                  : defaultShouldForwardProp
+        const finalShouldForwardProp =
+          shouldUseAs && shouldForwardProp === undefined
+            ? getDefaultShouldForwardProp(finalTag)
+            : defaultShouldForwardProp
 
-              let newProps = {}
+        let newProps = {}
 
-              for (let key in props) {
-                if (shouldUseAs && key === 'as') continue
+        for (let key in props) {
+          if (shouldUseAs && key === 'as') continue
 
-                if (
-                  // $FlowFixMe
-                  finalShouldForwardProp(key)
-                ) {
-                  newProps[key] = props[key]
-                }
-              }
+          if (
+            // $FlowFixMe
+            finalShouldForwardProp(key)
+          ) {
+            newProps[key] = props[key]
+          }
+        }
 
-              newProps.className = className
+        newProps.className = className
+        newProps.ref = ref
 
-              newProps.ref = ref || props.innerRef
-              if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-                console.error(
-                  '`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' +
-                    (identifierName === undefined
-                      ? ''
-                      : ` in the usage of \`${identifierName}\``)
-                )
-              }
-
-              const ele = React.createElement(finalTag, newProps)
-              if (!isBrowser && rules !== undefined) {
-                let serializedNames = serialized.name
-                let next = serialized.next
-                while (next !== undefined) {
-                  serializedNames += ' ' + next.name
-                  next = next.next
-                }
-                return (
-                  <React.Fragment>
-                    <style
-                      {...{
-                        [`data-emotion-${context.key}`]: serializedNames,
-                        dangerouslySetInnerHTML: { __html: rules },
-                        nonce: context.sheet.nonce
-                      }}
-                    />
-                    {ele}
-                  </React.Fragment>
-                )
-              }
-              return ele
-            }}
-          </ThemeContext.Consumer>
-        )
+        const ele = React.createElement(finalTag, newProps)
+        if (!isBrowser && rules !== undefined) {
+          let serializedNames = serialized.name
+          let next = serialized.next
+          while (next !== undefined) {
+            serializedNames += ' ' + next.name
+            next = next.next
+          }
+          return (
+            <React.Fragment>
+              <style
+                {...{
+                  [`data-emotion-${cache.key}`]: serializedNames,
+                  dangerouslySetInnerHTML: { __html: rules },
+                  nonce: cache.sheet.nonce
+                }}
+              />
+              {ele}
+            </React.Fragment>
+          )
+        }
+        return ele
       }
@@ -181,0 +166,0 @@ )

src/utils.js

@@ -30,4 +30,3 @@ // @flow
 const testOmitPropsOnStringTag = isPropValid
-const testOmitPropsOnComponent = (key: string) =>
-  key !== 'theme' && key !== 'innerRef'
+const testOmitPropsOnComponent = (key: string) => key !== 'theme'
 
@@ -34,0 +33,0 @@ export const getDefaultShouldForwardProp = (tag: ElementType) =>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

22

decreased by-15.38%

Worsened metrics

Total package byte prevSize

110416

decreased by-3.18%

Lines of code

1413

decreased by-2.55%

No dependency changes