@emotion/styled - npm Package Compare versions

Comparing version 11.0.0-next.15 to 11.0.0-next.16

base/dist/styled.browser.cjs.js

@@ -26,3 +26,19 @@ 'use strict';
 };
+var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
+  var shouldForwardProp;
 
+  if (options) {
+    var optionsShouldForwardProp = options.shouldForwardProp;
+    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
+      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
+    } : optionsShouldForwardProp;
+  }
+
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
+  }
+
+  return shouldForwardProp;
+};
+
 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";
@@ -37,4 +53,5 @@
 
+  var isReal = tag.__emotion_real === tag;
+  var baseTag = isReal && tag.__emotion_base || tag;
   var identifierName;
-  var shouldForwardProp;
   var targetClassName;
@@ -45,15 +62,5 @@
     targetClassName = options.target;
-    shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
-      return tag.__emotion_forwardProp(propName) && // $FlowFixMe
-      options.shouldForwardProp(propName);
-    } : options.shouldForwardProp;
   }
 
-  var isReal = tag.__emotion_real === tag;
-  var baseTag = isReal && tag.__emotion_base || tag;
-
-  if (typeof shouldForwardProp !== 'function' && isReal) {
-    shouldForwardProp = tag.__emotion_forwardProp;
-  }
-
+  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
   var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
@@ -156,3 +163,5 @@ var shouldUseAs = !defaultShouldForwardProp('as');
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, {}, nextOptions) : options).apply(void 0, styles);
+      return createStyled(nextTag, _extends({}, options, {}, nextOptions, {
+        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
+      })).apply(void 0, styles);
     };
@@ -159,0 +168,0 @@

base/dist/styled.browser.esm.js

@@ -20,3 +20,19 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 };
+var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
+  var shouldForwardProp;
 
+  if (options) {
+    var optionsShouldForwardProp = options.shouldForwardProp;
+    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
+      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
+    } : optionsShouldForwardProp;
+  }
+
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
+  }
+
+  return shouldForwardProp;
+};
+
 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";
@@ -31,4 +47,5 @@
 
+  var isReal = tag.__emotion_real === tag;
+  var baseTag = isReal && tag.__emotion_base || tag;
   var identifierName;
-  var shouldForwardProp;
   var targetClassName;
@@ -39,15 +56,5 @@
     targetClassName = options.target;
-    shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
-      return tag.__emotion_forwardProp(propName) && // $FlowFixMe
-      options.shouldForwardProp(propName);
-    } : options.shouldForwardProp;
   }
 
-  var isReal = tag.__emotion_real === tag;
-  var baseTag = isReal && tag.__emotion_base || tag;
-
-  if (typeof shouldForwardProp !== 'function' && isReal) {
-    shouldForwardProp = tag.__emotion_forwardProp;
-  }
-
+  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
   var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
@@ -150,3 +157,5 @@ var shouldUseAs = !defaultShouldForwardProp('as');
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, {}, nextOptions) : options).apply(void 0, styles);
+      return createStyled(nextTag, _extends({}, options, {}, nextOptions, {
+        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
+      })).apply(void 0, styles);
     };
@@ -153,0 +162,0 @@

base/dist/styled.cjs.dev.js

@@ -26,3 +26,19 @@ 'use strict';
 };
+var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
+  var shouldForwardProp;
 
+  if (options) {
+    var optionsShouldForwardProp = options.shouldForwardProp;
+    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
+      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
+    } : optionsShouldForwardProp;
+  }
+
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
+  }
+
+  return shouldForwardProp;
+};
+
 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";
@@ -38,4 +54,5 @@ var isBrowser = typeof document !== 'undefined';
 
+  var isReal = tag.__emotion_real === tag;
+  var baseTag = isReal && tag.__emotion_base || tag;
   var identifierName;
-  var shouldForwardProp;
   var targetClassName;
@@ -46,15 +63,5 @@
     targetClassName = options.target;
-    shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
-      return tag.__emotion_forwardProp(propName) && // $FlowFixMe
-      options.shouldForwardProp(propName);
-    } : options.shouldForwardProp;
   }
 
-  var isReal = tag.__emotion_real === tag;
-  var baseTag = isReal && tag.__emotion_base || tag;
-
-  if (typeof shouldForwardProp !== 'function' && isReal) {
-    shouldForwardProp = tag.__emotion_forwardProp;
-  }
-
+  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
   var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
@@ -173,3 +180,5 @@ var shouldUseAs = !defaultShouldForwardProp('as');
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, {}, nextOptions) : options).apply(void 0, styles);
+      return createStyled(nextTag, _extends({}, options, {}, nextOptions, {
+        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
+      })).apply(void 0, styles);
     };
@@ -176,0 +185,0 @@

base/dist/styled.cjs.prod.js

@@ -15,11 +15,16 @@ "use strict";
   return "string" == typeof tag && tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+}, composeShouldForwardProps = function(tag, options, isReal) {
+  var shouldForwardProp;
+  if (options) {
+    var optionsShouldForwardProp = options.shouldForwardProp;
+    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function(propName) {
+      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
+    } : optionsShouldForwardProp;
+  }
+  return "function" != typeof shouldForwardProp && isReal && (shouldForwardProp = tag.__emotion_forwardProp), 
+  shouldForwardProp;
 }, isBrowser = "undefined" != typeof document, createStyled = function createStyled(tag, options) {
-  var identifierName, shouldForwardProp, targetClassName;
-  void 0 !== options && (identifierName = options.label, targetClassName = options.target, 
-  shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function(propName) {
-    return tag.__emotion_forwardProp(propName) && options.shouldForwardProp(propName);
-  } : options.shouldForwardProp);
-  var isReal = tag.__emotion_real === tag, baseTag = isReal && tag.__emotion_base || tag;
-  "function" != typeof shouldForwardProp && isReal && (shouldForwardProp = tag.__emotion_forwardProp);
-  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag), shouldUseAs = !defaultShouldForwardProp("as");
+  var identifierName, targetClassName, isReal = tag.__emotion_real === tag, baseTag = isReal && tag.__emotion_base || tag;
+  void 0 !== options && (identifierName = options.label, targetClassName = options.target);
+  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal), defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag), shouldUseAs = !defaultShouldForwardProp("as");
   return function() {
@@ -62,3 +67,5 @@ var args = arguments, styles = isReal && void 0 !== tag.__emotion_styles ? tag.__emotion_styles.slice(0) : [];
     }), Styled.withComponent = function(nextTag, nextOptions) {
-      return createStyled(nextTag, void 0 !== nextOptions ? _extends({}, options || {}, {}, nextOptions) : options).apply(void 0, styles);
+      return createStyled(nextTag, _extends({}, options, {}, nextOptions, {
+        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, !0)
+      })).apply(void 0, styles);
     }, Styled;
@@ -65,0 +72,0 @@ };

base/dist/styled.esm.js

@@ -20,3 +20,19 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 };
+var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
+  var shouldForwardProp;
 
+  if (options) {
+    var optionsShouldForwardProp = options.shouldForwardProp;
+    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
+      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
+    } : optionsShouldForwardProp;
+  }
+
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
+  }
+
+  return shouldForwardProp;
+};
+
 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";
@@ -32,4 +48,5 @@ var isBrowser = typeof document !== 'undefined';
 
+  var isReal = tag.__emotion_real === tag;
+  var baseTag = isReal && tag.__emotion_base || tag;
   var identifierName;
-  var shouldForwardProp;
   var targetClassName;
@@ -40,15 +57,5 @@
     targetClassName = options.target;
-    shouldForwardProp = tag.__emotion_forwardProp && options.shouldForwardProp ? function (propName) {
-      return tag.__emotion_forwardProp(propName) && // $FlowFixMe
-      options.shouldForwardProp(propName);
-    } : options.shouldForwardProp;
   }
 
-  var isReal = tag.__emotion_real === tag;
-  var baseTag = isReal && tag.__emotion_base || tag;
-
-  if (typeof shouldForwardProp !== 'function' && isReal) {
-    shouldForwardProp = tag.__emotion_forwardProp;
-  }
-
+  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
   var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
@@ -167,3 +174,5 @@ var shouldUseAs = !defaultShouldForwardProp('as');
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, {}, nextOptions) : options).apply(void 0, styles);
+      return createStyled(nextTag, _extends({}, options, {}, nextOptions, {
+        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
+      })).apply(void 0, styles);
     };
@@ -170,0 +179,0 @@

base/dist/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=e||self).emotionStyledBase=t(e.React,e.emotionReact)}(this,(function(e,t){"use strict";var r=function(e,t){return e(t={exports:{}},t.exports),t.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},t.apply(this,arguments)}e.exports=t}));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|disablePictureInPicture|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|inert|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};function l(e,t,r){var n="";return r.split(" ").forEach((function(r){void 0!==e[r]?t.push(e[r]+";"):n+=r+" "})),n}var c=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 d={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},u=/[A-Z]|^ms/g,p=/_EMO_([^_]+?)_([^]*?)_EMO_/g,f=function(e){return 45===e.charCodeAt(1)},m=function(e){return null!=e&&"boolean"!=typeof e},h=n((function(e){return f(e)?e:e.replace(u,"-$&").toLowerCase()})),g=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(p,(function(e,t,r){return v={name:t,styles:r,next:v},t}))}return 1===d[e]||f(e)||"number"!=typeof t||0===t?t:t+"px"};function y(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 v={name:r.name,styles:r.styles,next:v},r.name;if(void 0!==r.styles){var n=r.next;if(void 0!==n)for(;void 0!==n;)v={name:n.name,styles:n.styles,next:v},n=n.next;return r.styles+";"}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=y(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]+"}":m(a)&&(n+=h(i)+":"+g(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var s=y(e,t,a);switch(i){case"animation":case"animationName":n+=h(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)m(a[l])&&(n+=h(i)+":"+g(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var o=v,i=r(e);return v=o,y(e,t,i)}}if(null==t)return r;var a=t[r];return void 0!==a?a:r}var v,x=/label:\s*([^\s;\n{]+)\s*;/g,k=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="";v=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=y(r,t,i)):o+=i[0];for(var a=1;a<e.length;a++)o+=y(r,t,e[a]),n&&(o+=i[a]);x.lastIndex=0;for(var s,l="";null!==(s=x.exec(o));)l+="-"+s[1];return{name: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,styles:o,next:v}};return function n(o,i){var a,d,u;void 0!==i&&(a=i.label,u=i.target,d=o.__emotion_forwardProp&&i.shouldForwardProp?function(e){return o.__emotion_forwardProp(e)&&i.shouldForwardProp(e)}:i.shouldForwardProp);var p=o.__emotion_real===o,f=p&&o.__emotion_base||o;"function"!=typeof d&&p&&(d=o.__emotion_forwardProp);var m=d||s(f),h=!m("as");return function(){var g=arguments,y=p&&void 0!==o.__emotion_styles?o.__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{y.push(g[0][0]);for(var v=g.length,x=1;x<v;x++)y.push(g[x],g[0][x])}var b=t.withEmotionCache((function(r,n,o){var i=h&&r.as||f,a="",p=[],g=r;if(null==r.theme){for(var v in g={},r)g[v]=r[v];g.theme=e.useContext(t.ThemeContext)}"string"==typeof r.className?a=l(n.registered,p,r.className):null!=r.className&&(a=r.className+" ");var x=k(y.concat(p),n.registered,g);c(n,x,"string"==typeof i);a+=n.key+"-"+x.name,void 0!==u&&(a+=" "+u);var b=h&&void 0===d?s(i):m,w={};for(var C in r)h&&"as"===C||b(C)&&(w[C]=r[C]);return w.className=a,w.ref=o,e.createElement(i,w)}));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=y,b.__emotion_forwardProp=d,Object.defineProperty(b,"toString",{value:function(){return"."+u}}),b.withComponent=function(e,t){return n(e,void 0!==t?r({},i||{},{},t):i).apply(void 0,y)},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=e||self).emotionStyledBase=t(e.React,e.emotionReact)}(this,(function(e,t){"use strict";var r=function(e,t){return e(t={exports:{}},t.exports),t.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},t.apply(this,arguments)}e.exports=t}));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|disablePictureInPicture|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|inert|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},l=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 c(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 u={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},p=/[A-Z]|^ms/g,f=/_EMO_([^_]+?)_([^]*?)_EMO_/g,m=function(e){return 45===e.charCodeAt(1)},h=function(e){return null!=e&&"boolean"!=typeof e},g=n((function(e){return m(e)?e:e.replace(p,"-$&").toLowerCase()})),y=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(f,(function(e,t,r){return x={name:t,styles:r,next:x},t}))}return 1===u[e]||m(e)||"number"!=typeof t||0===t?t:t+"px"};function v(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;return r.styles+";"}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=v(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]+"}":h(a)&&(n+=g(i)+":"+y(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var s=v(e,t,a);switch(i){case"animation":case"animationName":n+=g(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)h(a[l])&&(n+=g(i)+":"+y(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var o=x,i=r(e);return x=o,v(e,t,i)}}if(null==t)return r;var a=t[r];return void 0!==a?a:r}var x,k=/label:\s*([^\s;\n{]+)\s*;/g,b=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+=v(r,t,i)):o+=i[0];for(var a=1;a<e.length;a++)o+=v(r,t,e[a]),n&&(o+=i[a]);k.lastIndex=0;for(var s,l="";null!==(s=k.exec(o));)l+="-"+s[1];return{name: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,styles:o,next:x}};return function n(o,i){var a,u,p=o.__emotion_real===o,f=p&&o.__emotion_base||o;void 0!==i&&(a=i.label,u=i.target);var m=l(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{v.push(y[0][0]);for(var x=y.length,k=1;k<x;k++)v.push(y[k],y[0][k])}var w=t.withEmotionCache((function(r,n,o){var i=g&&r.as||f,a="",l=[],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=c(n.registered,l,r.className):null!=r.className&&(a=r.className+" ");var x=b(v.concat(l),n.registered,p);d(n,x,"string"==typeof i);a+=n.key+"-"+x.name,void 0!==u&&(a+=" "+u);var k=g&&void 0===m?s(i):h,w={};for(var C in r)g&&"as"===C||k(C)&&(w[C]=r[C]);return w.className=a,w.ref=o,e.createElement(i,w)}));return w.displayName=void 0!==a?a:"Styled("+("string"==typeof f?f:f.displayName||f.name||"Component")+")",w.defaultProps=o.defaultProps,w.__emotion_real=w,w.__emotion_base=f,w.__emotion_styles=v,w.__emotion_forwardProp=m,Object.defineProperty(w,"toString",{value:function(){return"."+u}}),w.withComponent=function(e,t){return n(e,r({},i,{},t,{shouldForwardProp:l(w,t,!0)})).apply(void 0,v)},w}}}));
 //# sourceMappingURL=styled.umd.min.js.map

CHANGELOG.md

 # @emotion/styled
 
+## 11.0.0-next.16
+
+### Minor Changes
+
+- [`18c0d5f4`](https://github.com/emotion-js/emotion/commit/18c0d5f4fbe59545c335eab2e0a28d414db33a36) [#1668](https://github.com/emotion-js/emotion/pull/1668) Thanks [@animecyc](https://github.com/animecyc)! - Custom `shouldForwardProp` is being preserved now when using `.withComponent`. Also, when passing an additional `shouldForwardProp` in `.withComponent`'s options (like this: `SomeComponent.withComponent('span', { shouldForwardProp })`) it's being composed with the potentially existing `shouldForwardProp`.
+
+### Patch Changes
+
+- [`23faf9ef`](https://github.com/emotion-js/emotion/commit/23faf9ef76f31064ca642bcb36300d04c6fa65e4) [#1996](https://github.com/emotion-js/emotion/pull/1996) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with wrapped class components not having a type for the `ref` prop.
+
+* [`0895f1f3`](https://github.com/emotion-js/emotion/commit/0895f1f3c0f428a2dedc501028068fedf6e6c45e) [#1995](https://github.com/emotion-js/emotion/pull/1995) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with typing for the `as` prop not being provided to components created using component factories available on the `styled` factory (e.g. `styled.div`).
+
+* Updated dependencies [[`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`58b2bbca`](https://github.com/emotion-js/emotion/commit/58b2bbcad63f8ea22389ccdc2a8f6c5064984e82)]:
+  - @emotion/utils@1.0.0-next.1
+  - @emotion/react@11.0.0-next.16
+  - @emotion/serialize@0.11.15-next.4
+  - @emotion/babel-plugin@11.0.0-next.16
+
 ## 11.0.0-next.15
@@ -4,0 +22,0 @@

dist/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=e||self).emotionStyled=t(e.React,e.emotionReact)}(this,(function(e,t){"use strict";var r=function(e,t){return e(t={exports:{}},t.exports),t.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},t.apply(this,arguments)}e.exports=t}));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|disablePictureInPicture|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|inert|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};function l(e,t,r){var n="";return r.split(" ").forEach((function(r){void 0!==e[r]?t.push(e[r]+";"):n+=r+" "})),n}var c=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 d={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},u=/[A-Z]|^ms/g,p=/_EMO_([^_]+?)_([^]*?)_EMO_/g,f=function(e){return 45===e.charCodeAt(1)},m=function(e){return null!=e&&"boolean"!=typeof e},h=n((function(e){return f(e)?e:e.replace(u,"-$&").toLowerCase()})),g=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(p,(function(e,t,r){return v={name:t,styles:r,next:v},t}))}return 1===d[e]||f(e)||"number"!=typeof t||0===t?t:t+"px"};function y(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 v={name:r.name,styles:r.styles,next:v},r.name;if(void 0!==r.styles){var n=r.next;if(void 0!==n)for(;void 0!==n;)v={name:n.name,styles:n.styles,next:v},n=n.next;return r.styles+";"}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=y(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]+"}":m(a)&&(n+=h(i)+":"+g(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var s=y(e,t,a);switch(i){case"animation":case"animationName":n+=h(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)m(a[l])&&(n+=h(i)+":"+g(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var o=v,i=r(e);return v=o,y(e,t,i)}}if(null==t)return r;var a=t[r];return void 0!==a?a:r}var v,b=/label:\s*([^\s;\n{]+)\s*;/g,x=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="";v=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=y(r,t,i)):o+=i[0];for(var a=1;a<e.length;a++)o+=y(r,t,e[a]),n&&(o+=i[a]);b.lastIndex=0;for(var s,l="";null!==(s=b.exec(o));)l+="-"+s[1];return{name: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,styles:o,next:v}},k=function n(o,i){var a,d,u;void 0!==i&&(a=i.label,u=i.target,d=o.__emotion_forwardProp&&i.shouldForwardProp?function(e){return o.__emotion_forwardProp(e)&&i.shouldForwardProp(e)}:i.shouldForwardProp);var p=o.__emotion_real===o,f=p&&o.__emotion_base||o;"function"!=typeof d&&p&&(d=o.__emotion_forwardProp);var m=d||s(f),h=!m("as");return function(){var g=arguments,y=p&&void 0!==o.__emotion_styles?o.__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{y.push(g[0][0]);for(var v=g.length,b=1;b<v;b++)y.push(g[b],g[0][b])}var k=t.withEmotionCache((function(r,n,o){var i=h&&r.as||f,a="",p=[],g=r;if(null==r.theme){for(var v in g={},r)g[v]=r[v];g.theme=e.useContext(t.ThemeContext)}"string"==typeof r.className?a=l(n.registered,p,r.className):null!=r.className&&(a=r.className+" ");var b=x(y.concat(p),n.registered,g);c(n,b,"string"==typeof i);a+=n.key+"-"+b.name,void 0!==u&&(a+=" "+u);var k=h&&void 0===d?s(i):m,w={};for(var C in r)h&&"as"===C||k(C)&&(w[C]=r[C]);return w.className=a,w.ref=o,e.createElement(i,w)}));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=y,k.__emotion_forwardProp=d,Object.defineProperty(k,"toString",{value:function(){return"."+u}}),k.withComponent=function(e,t){return n(e,void 0!==t?r({},i||{},{},t):i).apply(void 0,y)},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){k[e]=k(e)})),k}));
+!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=e||self).emotionStyled=t(e.React,e.emotionReact)}(this,(function(e,t){"use strict";var r=function(e,t){return e(t={exports:{}},t.exports),t.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},t.apply(this,arguments)}e.exports=t}));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|disablePictureInPicture|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|inert|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},l=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 c(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 u={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},p=/[A-Z]|^ms/g,f=/_EMO_([^_]+?)_([^]*?)_EMO_/g,m=function(e){return 45===e.charCodeAt(1)},h=function(e){return null!=e&&"boolean"!=typeof e},g=n((function(e){return m(e)?e:e.replace(p,"-$&").toLowerCase()})),y=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(f,(function(e,t,r){return b={name:t,styles:r,next:b},t}))}return 1===u[e]||m(e)||"number"!=typeof t||0===t?t:t+"px"};function v(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 b={name:r.name,styles:r.styles,next:b},r.name;if(void 0!==r.styles){var n=r.next;if(void 0!==n)for(;void 0!==n;)b={name:n.name,styles:n.styles,next:b},n=n.next;return r.styles+";"}return function(e,t,r){var n="";if(Array.isArray(r))for(var o=0;o<r.length;o++)n+=v(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]+"}":h(a)&&(n+=g(i)+":"+y(i,a)+";");else if(!Array.isArray(a)||"string"!=typeof a[0]||null!=t&&void 0!==t[a[0]]){var s=v(e,t,a);switch(i){case"animation":case"animationName":n+=g(i)+":"+s+";";break;default:n+=i+"{"+s+"}"}}else for(var l=0;l<a.length;l++)h(a[l])&&(n+=g(i)+":"+y(i,a[l])+";")}return n}(e,t,r);case"function":if(void 0!==e){var o=b,i=r(e);return b=o,v(e,t,i)}}if(null==t)return r;var a=t[r];return void 0!==a?a:r}var b,x=/label:\s*([^\s;\n{]+)\s*;/g,k=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="";b=void 0;var i=e[0];null==i||void 0===i.raw?(n=!1,o+=v(r,t,i)):o+=i[0];for(var a=1;a<e.length;a++)o+=v(r,t,e[a]),n&&(o+=i[a]);x.lastIndex=0;for(var s,l="";null!==(s=x.exec(o));)l+="-"+s[1];return{name: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,styles:o,next:b}},w=function n(o,i){var a,u,p=o.__emotion_real===o,f=p&&o.__emotion_base||o;void 0!==i&&(a=i.label,u=i.target);var m=l(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{v.push(y[0][0]);for(var b=y.length,x=1;x<b;x++)v.push(y[x],y[0][x])}var w=t.withEmotionCache((function(r,n,o){var i=g&&r.as||f,a="",l=[],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=c(n.registered,l,r.className):null!=r.className&&(a=r.className+" ");var b=k(v.concat(l),n.registered,p);d(n,b,"string"==typeof i);a+=n.key+"-"+b.name,void 0!==u&&(a+=" "+u);var x=g&&void 0===m?s(i):h,w={};for(var C in r)g&&"as"===C||x(C)&&(w[C]=r[C]);return w.className=a,w.ref=o,e.createElement(i,w)}));return w.displayName=void 0!==a?a:"Styled("+("string"==typeof f?f:f.displayName||f.name||"Component")+")",w.defaultProps=o.defaultProps,w.__emotion_real=w,w.__emotion_base=f,w.__emotion_styles=v,w.__emotion_forwardProp=m,Object.defineProperty(w,"toString",{value:function(){return"."+u}}),w.withComponent=function(e,t){return n(e,r({},i,{},t,{shouldForwardProp:l(w,t,!0)})).apply(void 0,v)},w}}.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){w[e]=w(e)})),w}));
 //# sourceMappingURL=styled.umd.min.js.map

package.json

 {
   "name": "@emotion/styled",
-  "version": "11.0.0-next.15",
+  "version": "11.0.0-next.16",
   "description": "styled API for emotion",
@@ -15,10 +15,10 @@ "main": "dist/styled.cjs.js",
     "@babel/runtime": "^7.7.2",
-    "@emotion/babel-plugin": "^11.0.0-next.15",
+    "@emotion/babel-plugin": "^11.0.0-next.16",
     "@emotion/is-prop-valid": "0.9.0-next.1",
-    "@emotion/serialize": "^1.0.0-next.3",
-    "@emotion/utils": "1.0.0-next.0"
+    "@emotion/serialize": "^0.11.15-next.4",
+    "@emotion/utils": "1.0.0-next.1"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",
-    "@emotion/react": "^11.0.0-next.15",
+    "@emotion/react": "^11.0.0-next.16",
     "react": ">=16.8.0"
@@ -36,3 +36,3 @@ },
     "@babel/core": "^7.7.2",
-    "@emotion/react": "11.0.0-next.15",
+    "@emotion/react": "11.0.0-next.16",
     "dtslint": "^0.3.0",
@@ -39,0 +39,0 @@ "react": "^16.11.0"

src/base.js

@@ -6,2 +6,3 @@ // @flow
   getDefaultShouldForwardProp,
+  composeShouldForwardProps,
   type StyledOptions,
@@ -30,4 +31,6 @@ type CreateStyled,
   }
+  const isReal = tag.__emotion_real === tag
+  const baseTag = (isReal && tag.__emotion_base) || tag
+
   let identifierName
-  let shouldForwardProp
   let targetClassName
@@ -37,17 +40,6 @@ if (options !== undefined) {
     targetClassName = options.target
-    shouldForwardProp =
-      tag.__emotion_forwardProp && options.shouldForwardProp
-        ? propName =>
-            tag.__emotion_forwardProp(propName) &&
-            // $FlowFixMe
-            options.shouldForwardProp(propName)
-        : options.shouldForwardProp
   }
-  const isReal = tag.__emotion_real === tag
-  const baseTag = (isReal && tag.__emotion_base) || tag
 
-  if (typeof shouldForwardProp !== 'function' && isReal) {
-    shouldForwardProp = tag.__emotion_forwardProp
-  }
-  let defaultShouldForwardProp =
+  const shouldForwardProp = composeShouldForwardProps(tag, options, isReal)
+  const defaultShouldForwardProp =
     shouldForwardProp || getDefaultShouldForwardProp(baseTag)
@@ -202,8 +194,8 @@ const shouldUseAs = !defaultShouldForwardProp('as')
     ) => {
-      return createStyled(
-        nextTag,
-        nextOptions !== undefined
-          ? { ...(options || {}), ...nextOptions }
-          : options
-      )(...styles)
+      return createStyled(nextTag, {
+        ...options,
+        // $FlowFixMe
+        ...nextOptions,
+        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
+      })(...styles)
     }
@@ -210,0 +202,0 @@

src/utils.js

@@ -41,2 +41,25 @@ // @flow
 
+export const composeShouldForwardProps = (
+  tag: PrivateStyledComponent<any>,
+  options: StyledOptions | void,
+  isReal: boolean
+) => {
+  let shouldForwardProp
+  if (options) {
+    const optionsShouldForwardProp = options.shouldForwardProp
+    shouldForwardProp =
+      tag.__emotion_forwardProp && optionsShouldForwardProp
+        ? (propName: string) =>
+            tag.__emotion_forwardProp(propName) &&
+            optionsShouldForwardProp(propName)
+        : optionsShouldForwardProp
+  }
+
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp
+  }
+
+  return shouldForwardProp
+}
+
 export type CreateStyledComponent = <Props>(
@@ -43,0 +66,0 @@ ...args: Interpolations

types/base.d.ts

@@ -38,4 +38,14 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
   ComponentProps extends {},
-  SpecificComponentProps extends {} = {}
-> extends React.FC<ComponentProps & SpecificComponentProps>, ComponentSelector {
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {}
+>
+  extends React.FC<ComponentProps & SpecificComponentProps & JSXProps>,
+    ComponentSelector {
+  withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
+    component: C
+  ): StyledComponent<
+    ComponentProps & PropsOf<C>,
+    {},
+    { ref?: React.Ref<InstanceType<C>> }
+  >
   withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
@@ -55,3 +65,4 @@ component: C
   ComponentProps extends {},
-  SpecificComponentProps extends {} = {}
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {}
 > {
@@ -69,3 +80,7 @@ /**
     >
-  ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
+  ): StyledComponent<
+    ComponentProps & AdditionalProps,
+    SpecificComponentProps,
+    JSXProps
+  >
 
@@ -77,3 +92,3 @@ (
     >
-  ): StyledComponent<ComponentProps, SpecificComponentProps>
+  ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
 
@@ -92,3 +107,7 @@ /**
     >
-  ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
+  ): StyledComponent<
+    ComponentProps & AdditionalProps,
+    SpecificComponentProps,
+    JSXProps
+  >
 }
@@ -107,2 +126,35 @@
   <
+    C extends React.ComponentClass<React.ComponentProps<C>>,
+    ForwardedProps extends keyof React.ComponentProps<
+      C
+    > = keyof React.ComponentProps<C>
+  >(
+    component: C,
+    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
+  ): CreateStyledComponent<
+    Pick<PropsOf<C>, ForwardedProps> & {
+      theme?: Theme
+      as?: React.ElementType
+    },
+    {},
+    {
+      ref?: React.Ref<InstanceType<C>>
+    }
+  >
+
+  <C extends React.ComponentClass<React.ComponentProps<C>>>(
+    component: C,
+    options?: StyledOptions<React.ComponentProps<C>>
+  ): CreateStyledComponent<
+    PropsOf<C> & {
+      theme?: Theme
+      as?: React.ElementType
+    },
+    {},
+    {
+      ref?: React.Ref<InstanceType<C>>
+    }
+  >
+
+  <
     C extends React.ComponentType<React.ComponentProps<C>>,
@@ -109,0 +161,0 @@ ForwardedProps extends keyof React.ComponentProps<

types/index.d.ts

@@ -20,3 +20,6 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
   [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<
-    { theme?: Theme },
+    {
+      theme?: Theme
+      as?: React.ElementType
+    },
     JSX.IntrinsicElements[Tag]
@@ -23,0 +26,0 @@ >

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

Total package byte prevSize

179010

increased by3.34%

Lines of code

1413

increased by7.86%

Dependency changes

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/serialize@0.11.16(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@emotion/utils@0.11.31.0.0-next.1(transitive)

• + Addedcsstype@2.6.21(transitive)

• - Removed@emotion/utils@1.0.0-next.0(transitive)

• Updated@emotion/babel-plugin@^11.0.0-next.16

• Updated@emotion/serialize@^0.11.15-next.4

• Updated@emotion/utils@1.0.0-next.1