styled-components 6.0.0-alpha.7 → 6.0.0-beta.2

package/native/dist/styled-components.native.esm.js

@@ -1,12 +1,13 @@
+import { __spreadArray, __assign } from 'tslib';
 import React, { useContext, useMemo, createElement } from 'react';
 import 'shallowequal';
-import { prefixer, stringify, serialize, compile, middleware, RULESET } from 'stylis';
+import { prefixer, stringify, middleware, compile, RULESET } from 'stylis';
 import unitless from '@emotion/unitless';
 import transformDeclPairs from 'css-to-react-native';
 import { parse } from 'postcss';
 
-const EMPTY_ARRAY = Object.freeze([]);
-const EMPTY_OBJECT = Object.freeze({});
+var EMPTY_ARRAY = Object.freeze([]);
+var EMPTY_OBJECT = Object.freeze({});
 
 var errorMap = {
     '1': 'Cannot create styled-component for component: %s.\n\n',
@@ -28,17 +29,21 @@ var errorMap = {
     '17': "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",
 };
 
-const ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};
+var ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};
 /**
  * super basic version of sprintf
  */
-function format(...args) {
-    let a = args[0];
-    const b = [];
-    for (let c = 1, len = args.length; c < len; c += 1) {
+function format() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var a = args[0];
+    var b = [];
+    for (var c = 1, len = args.length; c < len; c += 1) {
         b.push(args[c]);
     }
-    b.forEach(d => {
+    b.forEach(function (d) {
         a = a.replace(/%[a-z]/, d);
     });
     return a;
@@ -47,23 +52,27 @@ function format(...args) {
  * Create an error file out of errors.md for development and a simple web link to the full errors
  * in production mode.
  */
-function throwStyledComponentsError(code, ...interpolations) {
+function throwStyledComponentsError(code) {
+    var interpolations = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        interpolations[_i - 1] = arguments[_i];
+    }
     if (process.env.NODE_ENV === 'production') {
-        return new Error(`An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#${code} for more information.${interpolations.length > 0 ? ` Args: ${interpolations.join(', ')}` : ''}`);
+        return new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(code, " for more information.").concat(interpolations.length > 0 ? " Args: ".concat(interpolations.join(', ')) : ''));
     }
     else {
-        return new Error(format(ERRORS[code], ...interpolations).trim());
+        return new Error(format.apply(void 0, __spreadArray([ERRORS[code]], interpolations, false)).trim());
     }
 }
 
-const SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
+var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
     'data-styled';
-const SC_ATTR_ACTIVE = 'active';
-const SC_ATTR_VERSION = 'data-styled-version';
-const SC_VERSION = "6.0.0-alpha.7";
-const SPLITTER = '/*!sc*/\n';
-const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
-const DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
+var SC_ATTR_ACTIVE = 'active';
+var SC_ATTR_VERSION = 'data-styled-version';
+var SC_VERSION = "6.0.0-beta.2";
+var SPLITTER = '/*!sc*/\n';
+var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
+var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
     ? SC_DISABLE_SPEEDY
     : typeof process !== 'undefined' &&
         typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
@@ -80,47 +89,44 @@ const DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
             : process.env.NODE_ENV !== 'production');
 
 /** Create a GroupedTag with an underlying Tag implementation */
-const makeGroupedTag = (tag) => {
+var makeGroupedTag = function (tag) {
     return new DefaultGroupedTag(tag);
 };
-const BASE_SIZE = 1 << 9;
-const DefaultGroupedTag = class DefaultGroupedTag {
-    groupSizes;
-    length;
-    tag;
-    constructor(tag) {
+var BASE_SIZE = 1 << 9;
+var DefaultGroupedTag = /** @class */ (function () {
+    function DefaultGroupedTag(tag) {
         this.groupSizes = new Uint32Array(BASE_SIZE);
         this.length = BASE_SIZE;
         this.tag = tag;
     }
-    indexOfGroup(group) {
-        let index = 0;
-        for (let i = 0; i < group; i++) {
+    DefaultGroupedTag.prototype.indexOfGroup = function (group) {
+        var index = 0;
+        for (var i = 0; i < group; i++) {
             index += this.groupSizes[i];
         }
         return index;
-    }
-    insertRules(group, rules) {
+    };
+    DefaultGroupedTag.prototype.insertRules = function (group, rules) {
         if (group >= this.groupSizes.length) {
-            const oldBuffer = this.groupSizes;
-            const oldSize = oldBuffer.length;
-            let newSize = oldSize;
+            var oldBuffer = this.groupSizes;
+            var oldSize = oldBuffer.length;
+            var newSize = oldSize;
             while (group >= newSize) {
                 newSize <<= 1;
                 if (newSize < 0) {
-                    throw throwStyledComponentsError(16, `${group}`);
+                    throw throwStyledComponentsError(16, "".concat(group));
                 }
             }
             this.groupSizes = new Uint32Array(newSize);
             this.groupSizes.set(oldBuffer);
             this.length = newSize;
-            for (let i = oldSize; i < newSize; i++) {
+            for (var i = oldSize; i < newSize; i++) {
                 this.groupSizes[i] = 0;
             }
         }
-        let ruleIndex = this.indexOfGroup(group + 1);
+        var ruleIndex = this.indexOfGroup(group + 1);
         if (Array.isArray(rules)) {
-            for (let i = 0, l = rules.length; i < l; i++) {
+            for (var i = 0, l = rules.length; i < l; i++) {
                 if (this.tag.insertRule(ruleIndex, rules[i])) {
                     this.groupSizes[group]++;
                     ruleIndex++;
@@ -132,110 +138,115 @@ const DefaultGroupedTag = class DefaultGroupedTag {
                 this.groupSizes[group]++;
             }
         }
-    }
-    clearGroup(group) {
+    };
+    DefaultGroupedTag.prototype.clearGroup = function (group) {
         if (group < this.length) {
-            const length = this.groupSizes[group];
-            const startIndex = this.indexOfGroup(group);
-            const endIndex = startIndex + length;
+            var length_1 = this.groupSizes[group];
+            var startIndex = this.indexOfGroup(group);
+            var endIndex = startIndex + length_1;
             this.groupSizes[group] = 0;
-            for (let i = startIndex; i < endIndex; i++) {
+            for (var i = startIndex; i < endIndex; i++) {
                 this.tag.deleteRule(startIndex);
             }
         }
-    }
-    getGroup(group) {
-        let css = '';
+    };
+    DefaultGroupedTag.prototype.getGroup = function (group) {
+        var css = '';
         if (group >= this.length || this.groupSizes[group] === 0) {
             return css;
         }
-        const length = this.groupSizes[group];
-        const startIndex = this.indexOfGroup(group);
-        const endIndex = startIndex + length;
-        for (let i = startIndex; i < endIndex; i++) {
-            css += `${this.tag.getRule(i)}${SPLITTER}`;
+        var length = this.groupSizes[group];
+        var startIndex = this.indexOfGroup(group);
+        var endIndex = startIndex + length;
+        for (var i = startIndex; i < endIndex; i++) {
+            css += "".concat(this.tag.getRule(i)).concat(SPLITTER);
         }
         return css;
-    }
-};
+    };
+    return DefaultGroupedTag;
+}());
 
-const MAX_SMI = 1 << (31 - 1);
-let groupIDRegister = new Map();
-let reverseRegister = new Map();
-let nextFreeGroup = 1;
-const getGroupForId = (id) => {
+var MAX_SMI = 1 << (31 - 1);
+var groupIDRegister = new Map();
+var reverseRegister = new Map();
+var nextFreeGroup = 1;
+var getGroupForId = function (id) {
     if (groupIDRegister.has(id)) {
         return groupIDRegister.get(id);
     }
     while (reverseRegister.has(nextFreeGroup)) {
         nextFreeGroup++;
     }
-    const group = nextFreeGroup++;
+    var group = nextFreeGroup++;
     if (process.env.NODE_ENV !== 'production' && ((group | 0) < 0 || group > MAX_SMI)) {
-        throw throwStyledComponentsError(16, `${group}`);
+        throw throwStyledComponentsError(16, "".concat(group));
     }
     groupIDRegister.set(id, group);
     reverseRegister.set(group, id);
     return group;
 };
-const getIdForGroup = (group) => {
+var getIdForGroup = function (group) {
     return reverseRegister.get(group);
 };
-const setGroupForId = (id, group) => {
+var setGroupForId = function (id, group) {
     groupIDRegister.set(id, group);
     reverseRegister.set(group, id);
 };
 
-const SELECTOR = `style[${SC_ATTR}][${SC_ATTR_VERSION}="${SC_VERSION}"]`;
-const MARKER_RE = new RegExp(`^${SC_ATTR}\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)`);
-const outputSheet = (sheet) => {
-    const tag = sheet.getTag();
-    const { length } = tag;
-    let css = '';
-    for (let group = 0; group < length; group++) {
-        const id = getIdForGroup(group);
+var SELECTOR = "style[".concat(SC_ATTR, "][").concat(SC_ATTR_VERSION, "=\"").concat(SC_VERSION, "\"]");
+var MARKER_RE = new RegExp("^".concat(SC_ATTR, "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)"));
+var outputSheet = function (sheet) {
+    var tag = sheet.getTag();
+    var length = tag.length;
+    var css = '';
+    var _loop_1 = function (group) {
+        var id = getIdForGroup(group);
         if (id === undefined)
-            continue;
-        const names = sheet.names.get(id);
-        const rules = tag.getGroup(group);
+            return "continue";
+        var names = sheet.names.get(id);
+        var rules = tag.getGroup(group);
         if (names === undefined || rules.length === 0)
-            continue;
-        const selector = `${SC_ATTR}.g${group}[id="${id}"]`;
-        let content = '';
+            return "continue";
+        var selector = "".concat(SC_ATTR, ".g").concat(group, "[id=\"").concat(id, "\"]");
+        var content = '';
         if (names !== undefined) {
-            names.forEach(name => {
+            names.forEach(function (name) {
                 if (name.length > 0) {
-                    content += `${name},`;
+                    content += "".concat(name, ",");
                 }
             });
         }
         // NOTE: It's easier to collect rules and have the marker
         // after the actual rules to simplify the rehydration
-        css += `${rules}${selector}{content:"${content}"}${SPLITTER}`;
+        css += "".concat(rules).concat(selector, "{content:\"").concat(content, "\"}").concat(SPLITTER);
+    };
+    for (var group = 0; group < length; group++) {
+        _loop_1(group);
     }
     return css;
 };
-const rehydrateNamesFromContent = (sheet, id, content) => {
-    const names = content.split(',');
-    let name;
-    for (let i = 0, l = names.length; i < l; i++) {
+var rehydrateNamesFromContent = function (sheet, id, content) {
+    var names = content.split(',');
+    var name;
+    for (var i = 0, l = names.length; i < l; i++) {
         // eslint-disable-next-line
         if ((name = names[i])) {
             sheet.registerName(id, name);
         }
     }
 };
-const rehydrateSheetFromTag = (sheet, style) => {
-    const parts = (style.textContent ?? '').split(SPLITTER);
-    const rules = [];
-    for (let i = 0, l = parts.length; i < l; i++) {
-        const part = parts[i].trim();
+var rehydrateSheetFromTag = function (sheet, style) {
+    var _a;
+    var parts = ((_a = style.textContent) !== null && _a !== void 0 ? _a : '').split(SPLITTER);
+    var rules = [];
+    for (var i = 0, l = parts.length; i < l; i++) {
+        var part = parts[i].trim();
         if (!part)
             continue;
-        const marker = part.match(MARKER_RE);
+        var marker = part.match(MARKER_RE);
         if (marker) {
-            const group = parseInt(marker[1], 10) | 0;
-            const id = marker[2];
+            var group = parseInt(marker[1], 10) | 0;
+            var id = marker[2];
             if (group !== 0) {
                 // Rehydrate componentId to group index mapping
                 setGroupForId(id, group);
@@ -251,10 +262,10 @@ const rehydrateSheetFromTag = (sheet, style) => {
         }
     }
 };
-const rehydrateSheet = (sheet) => {
-    const nodes = document.querySelectorAll(SELECTOR);
-    for (let i = 0, l = nodes.length; i < l; i++) {
-        const node = nodes[i];
+var rehydrateSheet = function (sheet) {
+    var nodes = document.querySelectorAll(SELECTOR);
+    for (var i = 0, l = nodes.length; i < l; i++) {
+        var node = nodes[i];
         if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {
             rehydrateSheetFromTag(sheet, node);
             if (node.parentNode) {
@@ -268,13 +279,13 @@ function getNonce() {
     return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
 }
 
-const ELEMENT_TYPE = 1;
+var ELEMENT_TYPE = 1;
 /* Node.ELEMENT_TYPE */
 /** Find last style element if any inside target */
-const findLastStyleTag = (target) => {
-    const { childNodes } = target;
-    for (let i = childNodes.length; i >= 0; i--) {
-        const child = childNodes[i];
+var findLastStyleTag = function (target) {
+    var childNodes = target.childNodes;
+    for (var i = childNodes.length; i >= 0; i--) {
+        var child = childNodes[i];
         if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {
             return child;
         }
@@ -282,29 +293,29 @@ const findLastStyleTag = (target) => {
     return undefined;
 };
 /** Create a style element inside `target` or <head> after the last */
-const makeStyleTag = (target) => {
-    const head = document.head;
-    const parent = target || head;
-    const style = document.createElement('style');
-    const prevStyle = findLastStyleTag(parent);
-    const nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;
+var makeStyleTag = function (target) {
+    var head = document.head;
+    var parent = target || head;
+    var style = document.createElement('style');
+    var prevStyle = findLastStyleTag(parent);
+    var nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;
     style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);
     style.setAttribute(SC_ATTR_VERSION, SC_VERSION);
-    const nonce = getNonce();
+    var nonce = getNonce();
     if (nonce)
         style.setAttribute('nonce', nonce);
     parent.insertBefore(style, nextSibling);
     return style;
 };
 /** Get the CSSStyleSheet instance for a given style element */
-const getSheet = (tag) => {
+var getSheet = function (tag) {
     if (tag.sheet) {
         return tag.sheet;
     }
     // Avoid Firefox quirk where the style element might not have a sheet property
-    const { styleSheets } = document;
-    for (let i = 0, l = styleSheets.length; i < l; i++) {
-        const sheet = styleSheets[i];
+    var styleSheets = document.styleSheets;
+    for (var i = 0, l = styleSheets.length; i < l; i++) {
+        var sheet = styleSheets[i];
         if (sheet.ownerNode === tag) {
             return sheet;
         }
@@ -313,7 +324,8 @@ const getSheet = (tag) => {
 };
 
 /** Create a CSSStyleSheet-like tag depending on the environment */
-const makeTag = ({ isServer, useCSSOMInjection, target }) => {
+var makeTag = function (_a) {
+    var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target;
     if (isServer) {
         return new VirtualTag(target);
     }
@@ -324,18 +336,15 @@ const makeTag = ({ isServer, useCSSOMInjection, target }) => {
         return new TextTag(target);
     }
 };
-const CSSOMTag = class CSSOMTag {
-    element;
-    sheet;
-    length;
-    constructor(target) {
-        const element = (this.element = makeStyleTag(target));
+var CSSOMTag = /** @class */ (function () {
+    function CSSOMTag(target) {
+        var element = (this.element = makeStyleTag(target));
         // Avoid Edge bug where empty style elements don't create sheets
         element.appendChild(document.createTextNode(''));
         this.sheet = getSheet(element);
         this.length = 0;
     }
-    insertRule(index, rule) {
+    CSSOMTag.prototype.insertRule = function (index, rule) {
         try {
             this.sheet.insertRule(rule, index);
             this.length++;
@@ -344,13 +353,13 @@ const CSSOMTag = class CSSOMTag {
         catch (_error) {
             return false;
         }
-    }
-    deleteRule(index) {
+    };
+    CSSOMTag.prototype.deleteRule = function (index) {
         this.sheet.deleteRule(index);
         this.length--;
-    }
-    getRule(index) {
-        const rule = this.sheet.cssRules[index];
+    };
+    CSSOMTag.prototype.getRule = function (index) {
+        var rule = this.sheet.cssRules[index];
         // Avoid IE11 quirk where cssText is inaccessible on some invalid rules
         if (rule !== undefined && typeof rule.cssText === 'string') {
             return rule.cssText;
@@ -358,22 +367,20 @@ const CSSOMTag = class CSSOMTag {
         else {
             return '';
         }
-    }
-};
+    };
+    return CSSOMTag;
+}());
 /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
-const TextTag = class TextTag {
-    element;
-    nodes;
-    length;
-    constructor(target) {
-        const element = (this.element = makeStyleTag(target));
+var TextTag = /** @class */ (function () {
+    function TextTag(target) {
+        var element = (this.element = makeStyleTag(target));
         this.nodes = element.childNodes;
         this.length = 0;
     }
-    insertRule(index, rule) {
+    TextTag.prototype.insertRule = function (index, rule) {
         if (index <= this.length && index >= 0) {
-            const node = document.createTextNode(rule);
-            const refNode = this.nodes[index];
+            var node = document.createTextNode(rule);
+            var refNode = this.nodes[index];
             this.element.insertBefore(node, refNode || null);
             this.length++;
             return true;
@@ -381,29 +388,28 @@ const TextTag = class TextTag {
         else {
             return false;
         }
-    }
-    deleteRule(index) {
+    };
+    TextTag.prototype.deleteRule = function (index) {
         this.element.removeChild(this.nodes[index]);
         this.length--;
-    }
-    getRule(index) {
+    };
+    TextTag.prototype.getRule = function (index) {
         if (index < this.length) {
             return this.nodes[index].textContent;
         }
         else {
             return '';
         }
-    }
-};
+    };
+    return TextTag;
+}());
 /** A completely virtual (server-side) Tag that doesn't manipulate the DOM */
-const VirtualTag = class VirtualTag {
-    rules;
-    length;
-    constructor(_target) {
+var VirtualTag = /** @class */ (function () {
+    function VirtualTag(_target) {
         this.rules = [];
         this.length = 0;
     }
-    insertRule(index, rule) {
+    VirtualTag.prototype.insertRule = function (index, rule) {
         if (index <= this.length) {
             this.rules.splice(index, 0, rule);
             this.length++;
@@ -412,42 +418,33 @@ const VirtualTag = class VirtualTag {
         else {
             return false;
         }
-    }
-    deleteRule(index) {
+    };
+    VirtualTag.prototype.deleteRule = function (index) {
         this.rules.splice(index, 1);
         this.length--;
-    }
-    getRule(index) {
+    };
+    VirtualTag.prototype.getRule = function (index) {
         if (index < this.length) {
             return this.rules[index];
         }
         else {
             return '';
         }
-    }
-};
+    };
+    return VirtualTag;
+}());
 
-let SHOULD_REHYDRATE = IS_BROWSER;
-const defaultOptions = {
+var SHOULD_REHYDRATE = IS_BROWSER;
+var defaultOptions = {
     isServer: !IS_BROWSER,
     useCSSOMInjection: !DISABLE_SPEEDY,
 };
 /** Contains the main stylesheet logic for stringification and caching */
-class StyleSheet {
-    gs;
-    names;
-    options;
-    server;
-    tag;
-    /** Register a group ID to give it an index */
-    static registerId(id) {
-        return getGroupForId(id);
-    }
-    constructor(options = EMPTY_OBJECT, globalStyles = {}, names) {
-        this.options = {
-            ...defaultOptions,
-            ...options,
-        };
+var StyleSheet = /** @class */ (function () {
+    function StyleSheet(options, globalStyles, names) {
+        if (options === void 0) { options = EMPTY_OBJECT; }
+        if (globalStyles === void 0) { globalStyles = {}; }
+        this.options = __assign(__assign({}, defaultOptions), options);
         this.gs = globalStyles;
         this.names = new Map(names);
         this.server = !!options.isServer;
@@ -457,89 +454,103 @@ class StyleSheet {
             rehydrateSheet(this);
         }
     }
-    reconstructWithOptions(options, withNames = true) {
-        return new StyleSheet({ ...this.options, ...options }, this.gs, (withNames && this.names) || undefined);
-    }
-    allocateGSInstance(id) {
+    /** Register a group ID to give it an index */
+    StyleSheet.registerId = function (id) {
+        return getGroupForId(id);
+    };
+    StyleSheet.prototype.reconstructWithOptions = function (options, withNames) {
+        if (withNames === void 0) { withNames = true; }
+        return new StyleSheet(__assign(__assign({}, this.options), options), this.gs, (withNames && this.names) || undefined);
+    };
+    StyleSheet.prototype.allocateGSInstance = function (id) {
         return (this.gs[id] = (this.gs[id] || 0) + 1);
-    }
+    };
     /** Lazily initialises a GroupedTag for when it's actually needed */
-    getTag() {
+    StyleSheet.prototype.getTag = function () {
         return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));
-    }
+    };
     /** Check whether a name is known for caching */
-    hasNameForId(id, name) {
+    StyleSheet.prototype.hasNameForId = function (id, name) {
         return this.names.has(id) && this.names.get(id).has(name);
-    }
+    };
     /** Mark a group's name as known for caching */
-    registerName(id, name) {
+    StyleSheet.prototype.registerName = function (id, name) {
         getGroupForId(id);
         if (!this.names.has(id)) {
-            const groupNames = new Set();
+            var groupNames = new Set();
             groupNames.add(name);
             this.names.set(id, groupNames);
         }
         else {
             this.names.get(id).add(name);
         }
-    }
+    };
     /** Insert new rules which also marks the name as known */
-    insertRules(id, name, rules) {
+    StyleSheet.prototype.insertRules = function (id, name, rules) {
         this.registerName(id, name);
         this.getTag().insertRules(getGroupForId(id), rules);
-    }
+    };
     /** Clears all cached names for a given group ID */
-    clearNames(id) {
+    StyleSheet.prototype.clearNames = function (id) {
         if (this.names.has(id)) {
             this.names.get(id).clear();
         }
-    }
+    };
     /** Clears all rules for a given group ID */
-    clearRules(id) {
+    StyleSheet.prototype.clearRules = function (id) {
         this.getTag().clearGroup(getGroupForId(id));
         this.clearNames(id);
-    }
+    };
     /** Clears the entire tag which deletes all rules but not its names */
-    clearTag() {
+    StyleSheet.prototype.clearTag = function () {
         // NOTE: This does not clear the names, since it's only used during SSR
         // so that we can continuously output only new rules
         this.tag = undefined;
-    }
+    };
     /** Outputs the current sheet as a CSS string with markers for SSR */
-    toString() {
+    StyleSheet.prototype.toString = function () {
         return outputSheet(this);
-    }
-}
+    };
+    return StyleSheet;
+}());
 
-const SEED = 5381;
+var SEED = 5381;
 // When we have separate strings it's useful to run a progressive
 // version of djb2 where we pretend that we're still looping over
 // the same string
-const phash = (h, x) => {
-    let i = x.length;
+var phash = function (h, x) {
+    var i = x.length;
     while (i) {
         h = (h * 33) ^ x.charCodeAt(--i);
     }
     return h;
 };
 // This is a djb2 hashing function
-const hash = (x) => {
+var hash = function (x) {
     return phash(SEED, x);
 };
 
-const COMMENT_REGEX = /^\s*\/\/.*$/gm;
-const COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
-function createStylisInstance({ options = EMPTY_OBJECT, plugins = EMPTY_ARRAY, } = EMPTY_OBJECT) {
-    let _componentId;
-    let _selector;
-    let _selectorRegexp;
-    let _consecutiveSelfRefRegExp;
-    const selfReferenceReplacer = (match, offset, string) => {
+var COMMENT_REGEX = /^\s*\/\/.*$/gm;
+var COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
+/**
+ * Serialize stylis output as an array of css strings. It is important that rules are
+ * separated when using CSSOM injection.
+ */
+function serialize(children, callback) {
+    return children.map(function (c, i) { return callback(c, i, children, callback); }).filter(Boolean);
+}
+function createStylisInstance(_a) {
+    var _b = _a === void 0 ? EMPTY_OBJECT : _a, _c = _b.options, options = _c === void 0 ? EMPTY_OBJECT : _c, _d = _b.plugins, plugins = _d === void 0 ? EMPTY_ARRAY : _d;
+    var _componentId;
+    var _selector;
+    var _selectorRegexp;
+    var _consecutiveSelfRefRegExp;
+    var selfReferenceReplacer = function (match, offset, string) {
         if (
         // do not replace the first occurrence if it is complex (has a modifier)
         (offset === 0 ? !COMPLEX_SELECTOR_PREFIX.includes(string[_selector.length]) : true) && // no consecutive self refs (.b.b); that is a precedence boost and treated differently
             !string.match(_consecutiveSelfRefRegExp)) {
-            return `.${_componentId}`;
+            return ".".concat(_componentId);
         }
         return match;
     };
@@ -555,31 +566,34 @@ function createStylisInstance({ options = EMPTY_OBJECT, plugins = EMPTY_ARRAY, }
      *
      * https://github.com/thysultan/stylis.js/tree/v4.0.2#abstract-syntax-structure
      */
-    const selfReferenceReplacementPlugin = element => {
+    var selfReferenceReplacementPlugin = function (element) {
         if (element.type === RULESET && element.value.includes('&')) {
-            const props = element.props;
+            var props = element.props;
             props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);
         }
     };
-    const stringifyRules = (css, selector = '', prefix = '', componentId = '&') => {
-        let flatCSS = css.replace(COMMENT_REGEX, '');
+    var stringifyRules = function (css, selector, prefix, componentId) {
+        if (selector === void 0) { selector = ''; }
+        if (prefix === void 0) { prefix = ''; }
+        if (componentId === void 0) { componentId = '&'; }
+        var flatCSS = css.replace(COMMENT_REGEX, '');
         // stylis has no concept of state to be passed to plugins
         // but since JS is single-threaded, we can rely on that to ensure
         // these properties stay in sync with the current stylis run
         _componentId = componentId;
         _selector = selector;
-        _selectorRegexp = new RegExp(`\\${_selector}\\b`, 'g');
-        _consecutiveSelfRefRegExp = new RegExp(`(\\${_selector}\\b){2,}`);
-        const middlewares = plugins.slice();
+        _selectorRegexp = new RegExp("\\".concat(_selector, "\\b"), 'g');
+        _consecutiveSelfRefRegExp = new RegExp("(\\".concat(_selector, "\\b){2,}"));
+        var middlewares = plugins.slice();
         if (options.prefix || options.prefix === undefined) {
             middlewares.unshift(prefixer);
         }
         middlewares.push(selfReferenceReplacementPlugin, stringify);
-        return serialize(compile(prefix || selector ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS), middleware(middlewares));
+        return serialize(compile(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS), middleware(middlewares));
     };
     stringifyRules.hash = plugins.length
         ? plugins
-            .reduce((acc, plugin) => {
+            .reduce(function (acc, plugin) {
             if (!plugin.name) {
                 throwStyledComponentsError(15);
             }
@@ -590,35 +604,36 @@ function createStylisInstance({ options = EMPTY_OBJECT, plugins = EMPTY_ARRAY, }
     return stringifyRules;
 }
 
-const StyleSheetContext = React.createContext(undefined);
+var StyleSheetContext = React.createContext(undefined);
 StyleSheetContext.Consumer;
-const StylisContext = React.createContext(undefined);
+var StylisContext = React.createContext(undefined);
 StylisContext.Consumer;
 new StyleSheet();
-const mainStylis = createStylisInstance();
+var mainStylis = createStylisInstance();
 
-class Keyframes {
-    id;
-    name;
-    rules;
-    constructor(name, rules) {
+var Keyframes = /** @class */ (function () {
+    function Keyframes(name, rules) {
+        var _this = this;
+        this.inject = function (styleSheet, stylisInstance) {
+            if (stylisInstance === void 0) { stylisInstance = mainStylis; }
+            var resolvedName = _this.name + stylisInstance.hash;
+            if (!styleSheet.hasNameForId(_this.id, resolvedName)) {
+                styleSheet.insertRules(_this.id, resolvedName, stylisInstance(_this.rules, resolvedName, '@keyframes'));
+            }
+        };
+        this.toString = function () {
+            throw throwStyledComponentsError(12, String(_this.name));
+        };
         this.name = name;
-        this.id = `sc-keyframes-${name}`;
+        this.id = "sc-keyframes-".concat(name);
         this.rules = rules;
     }
-    inject = (styleSheet, stylisInstance = mainStylis) => {
-        const resolvedName = this.name + stylisInstance.hash;
-        if (!styleSheet.hasNameForId(this.id, resolvedName)) {
-            styleSheet.insertRules(this.id, resolvedName, stylisInstance(this.rules, resolvedName, '@keyframes'));
-        }
-    };
-    toString = () => {
-        throw throwStyledComponentsError(12, String(this.name));
-    };
-    getName(stylisInstance = mainStylis) {
+    Keyframes.prototype.getName = function (stylisInstance) {
+        if (stylisInstance === void 0) { stylisInstance = mainStylis; }
         return this.name + stylisInstance.hash;
-    }
-}
+    };
+    return Keyframes;
+}());
 
 // Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js
 function addUnitIfNeeded(name, value) {
@@ -627,7 +642,7 @@ function addUnitIfNeeded(name, value) {
         return '';
     }
     if (typeof value === 'number' && value !== 0 && !(name in unitless)) {
-        return `${value}px`; // Presumes implicit 'px' suffix for unitless numbers
+        return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
     }
     return String(value).trim();
 }
@@ -643,10 +658,10 @@ function getComponentName(target) {
  * inlined version of
  * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
  */
-const uppercaseCheck = /([A-Z])/;
-const uppercasePattern = /([A-Z])/g;
-const msPattern = /^ms-/;
-const prefixAndLowerCase = (char) => `-${char.toLowerCase()}`;
+var uppercaseCheck = /([A-Z])/;
+var uppercasePattern = /([A-Z])/g;
+var msPattern = /^ms-/;
+var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase()); };
 /**
  * Hyphenates a camelcased CSS property name, for example:
  *
@@ -692,33 +707,35 @@ function isStyledComponent(target) {
 /**
  * It's falsish not falsy because 0 is allowed.
  */
-const isFalsish = (chunk) => chunk === undefined || chunk === null || chunk === false || chunk === '';
-const objToCssArray = (obj, prevKey) => {
-    const rules = [];
-    for (const key in obj) {
+var isFalsish = function (chunk) {
+    return chunk === undefined || chunk === null || chunk === false || chunk === '';
+};
+var objToCssArray = function (obj, prevKey) {
+    var rules = [];
+    for (var key in obj) {
         if (!obj.hasOwnProperty(key) || isFalsish(obj[key]))
             continue;
         if ((Array.isArray(obj[key]) && obj[key].isCss) || isFunction(obj[key])) {
-            rules.push(`${hyphenateStyleName(key)}:`, obj[key], ';');
+            rules.push("".concat(hyphenateStyleName(key), ":"), obj[key], ';');
         }
         else if (isPlainObject(obj[key])) {
-            rules.push(...objToCssArray(obj[key], key));
+            rules.push.apply(rules, objToCssArray(obj[key], key));
         }
         else {
-            rules.push(`${hyphenateStyleName(key)}: ${addUnitIfNeeded(key, obj[key])};`);
+            rules.push("".concat(hyphenateStyleName(key), ": ").concat(addUnitIfNeeded(key, obj[key]), ";"));
         }
     }
-    return prevKey ? [`${prevKey} {`, ...rules, '}'] : rules;
+    return prevKey ? __spreadArray(__spreadArray(["".concat(prevKey, " {")], rules, true), ['}'], false) : rules;
 };
 function flatten(chunk, executionContext, styleSheet, stylisInstance) {
     if (Array.isArray(chunk)) {
-        const ruleSet = [];
-        for (let i = 0, len = chunk.length, result; i < len; i += 1) {
+        var ruleSet = [];
+        for (var i = 0, len = chunk.length, result = void 0; i < len; i += 1) {
             result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);
             if (result === '')
                 continue;
             else if (Array.isArray(result))
-                ruleSet.push(...result);
+                ruleSet.push.apply(ruleSet, result);
             else
                 ruleSet.push(result);
         }
@@ -729,22 +746,20 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
     }
     /* Handle other components */
     if (isStyledComponent(chunk)) {
-        return `.${chunk.styledComponentId}`;
+        return ".".concat(chunk.styledComponentId);
     }
     /* Either execute or defer the function */
     if (isFunction(chunk)) {
         if (isStatelessFunction(chunk) && executionContext) {
-            const chunkFn = chunk;
-            const result = chunkFn(executionContext);
+            var chunkFn = chunk;
+            var result = chunkFn(executionContext);
             if (process.env.NODE_ENV !== 'production' &&
                 typeof result === 'object' &&
                 !Array.isArray(result) &&
                 !(result instanceof Keyframes) &&
                 !isPlainObject(result)) {
                 // eslint-disable-next-line no-console
-                console.error(`${getComponentName(
-                // @ts-expect-error handling unexpected input
-                chunkFn)} is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.`);
+                console.error("".concat(getComponentName(chunkFn), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."));
             }
             return flatten(result, executionContext, styleSheet, stylisInstance);
         }
@@ -764,8 +779,8 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
 }
 
 function interleave(strings, interpolations) {
-    const result = [strings[0]];
-    for (let i = 0, len = interpolations.length; i < len; i += 1) {
+    var result = [strings[0]];
+    for (var i = 0, len = interpolations.length; i < len; i += 1) {
         result.push(interpolations[i], strings[i + 1]);
     }
     return result;
@@ -775,22 +790,25 @@ function interleave(strings, interpolations) {
  * Used when flattening object styles to determine if we should
  * expand an array of styles.
  */
-const addTag = (arg) => {
+var addTag = function (arg) {
     if (Array.isArray(arg)) {
         // eslint-disable-next-line no-param-reassign
         arg.isCss = true;
     }
     return arg;
 };
-function css(styles, ...interpolations) {
+function css(styles) {
+    var interpolations = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        interpolations[_i - 1] = arguments[_i];
+    }
     if (isFunction(styles) || isPlainObject(styles)) {
-        const styleFunctionOrObject = styles;
-        return addTag(flatten(interleave(EMPTY_ARRAY, [
-            styleFunctionOrObject,
-            ...interpolations,
-        ])));
+        var styleFunctionOrObject = styles;
+        return addTag(flatten(interleave(EMPTY_ARRAY, __spreadArray([
+            styleFunctionOrObject
+        ], interpolations, true))));
     }
-    const styleStringArray = styles;
+    var styleStringArray = styles;
     if (interpolations.length === 0 &&
         styleStringArray.length === 1 &&
         typeof styleStringArray[0] === 'string') {
@@ -799,7 +817,8 @@ function css(styles, ...interpolations) {
     return addTag(flatten(interleave(styleStringArray, interpolations)));
 }
 
-function constructWithOptions(componentConstructor, tag, options = EMPTY_OBJECT) {
+function constructWithOptions(componentConstructor, tag, options) {
+    if (options === void 0) { options = EMPTY_OBJECT; }
     // We trust that the tag is a valid component as long as it isn't falsish
     // Typically the tag here is a string or function (i.e. class or pure function component)
     // However a component may also be an object if it uses another utility, e.g. React.memo
@@ -808,30 +827,34 @@ function constructWithOptions(componentConstructor, tag, options = EMPTY_OBJECT)
         throw throwStyledComponentsError(1, tag);
     }
     /* This is callable directly as a template function */
-    const templateFunction = (initialStyles, ...interpolations) => componentConstructor(tag, options, css(initialStyles, ...interpolations));
+    var templateFunction = function (initialStyles) {
+        var interpolations = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            interpolations[_i - 1] = arguments[_i];
+        }
+        return componentConstructor(tag, options, css.apply(void 0, __spreadArray([initialStyles], interpolations, false)));
+    };
     /* Modify/inject new props at runtime */
-    templateFunction.attrs = (attrs) => constructWithOptions(componentConstructor, tag, {
-        ...options,
-        attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean),
-    });
+    templateFunction.attrs = function (attrs) {
+        return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), { attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean) }));
+    };
     /**
      * If config methods are called, wrap up a new template function and merge options */
-    templateFunction.withConfig = (config) => constructWithOptions(componentConstructor, tag, {
-        ...options,
-        ...config,
-    });
+    templateFunction.withConfig = function (config) {
+        return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), config));
+    };
     return templateFunction;
 }
 
-const ThemeContext = React.createContext(undefined);
-const ThemeConsumer = ThemeContext.Consumer;
+var ThemeContext = React.createContext(undefined);
+var ThemeConsumer = ThemeContext.Consumer;
 function mergeTheme(theme, outerTheme) {
     if (!theme) {
         throw throwStyledComponentsError(14);
     }
     if (isFunction(theme)) {
-        const themeFn = theme;
-        const mergedTheme = themeFn(outerTheme);
+        var themeFn = theme;
+        var mergedTheme = themeFn(outerTheme);
         if (process.env.NODE_ENV !== 'production' &&
             (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')) {
             throw throwStyledComponentsError(7);
@@ -841,32 +864,34 @@ function mergeTheme(theme, outerTheme) {
     if (Array.isArray(theme) || typeof theme !== 'object') {
         throw throwStyledComponentsError(8);
     }
-    return outerTheme ? { ...outerTheme, ...theme } : theme;
+    return outerTheme ? __assign(__assign({}, outerTheme), theme) : theme;
 }
 /**
  * Provide a theme to an entire react component tree via context
  */
 function ThemeProvider(props) {
-    const outerTheme = useContext(ThemeContext);
-    const themeContext = useMemo(() => mergeTheme(props.theme, outerTheme), [props.theme, outerTheme]);
+    var outerTheme = useContext(ThemeContext);
+    var themeContext = useMemo(function () { return mergeTheme(props.theme, outerTheme); }, [props.theme, outerTheme]);
     if (!props.children) {
         return null;
     }
     return React.createElement(ThemeContext.Provider, { value: themeContext }, props.children);
 }
 
-function determineTheme(props, providedTheme, defaultProps = EMPTY_OBJECT) {
+function determineTheme(props, providedTheme, defaultProps) {
+    if (defaultProps === void 0) { defaultProps = EMPTY_OBJECT; }
     return (props.theme !== defaultProps.theme && props.theme) || providedTheme || defaultProps.theme;
 }
 
-const hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var _a;
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
 // copied from react-is
-const REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
 /**
  * Adapted from hoist-non-react-statics to avoid the react-is dependency.
  */
-const REACT_STATICS = {
+var REACT_STATICS = {
     childContextTypes: true,
     contextType: true,
     contextTypes: true,
@@ -879,7 +904,7 @@ const REACT_STATICS = {
     propTypes: true,
     type: true,
 };
-const KNOWN_STATICS = {
+var KNOWN_STATICS = {
     name: true,
     length: true,
     prototype: true,
@@ -888,14 +913,14 @@ const KNOWN_STATICS = {
     arguments: true,
     arity: true,
 };
-const FORWARD_REF_STATICS = {
+var FORWARD_REF_STATICS = {
     $$typeof: true,
     render: true,
     defaultProps: true,
     displayName: true,
     propTypes: true,
 };
-const MEMO_STATICS = {
+var MEMO_STATICS = {
     $$typeof: true,
     compare: true,
     defaultProps: true,
@@ -903,13 +928,13 @@ const MEMO_STATICS = {
     propTypes: true,
     type: true,
 };
-const TYPE_STATICS = {
-    [REACT_FORWARD_REF_TYPE]: FORWARD_REF_STATICS,
-    [REACT_MEMO_TYPE]: MEMO_STATICS,
-};
+var TYPE_STATICS = (_a = {},
+    _a[REACT_FORWARD_REF_TYPE] = FORWARD_REF_STATICS,
+    _a[REACT_MEMO_TYPE] = MEMO_STATICS,
+    _a);
 // adapted from react-is
 function isMemo(object) {
-    const $$typeofType = 'type' in object && object.type.$$typeof;
+    var $$typeofType = 'type' in object && object.type.$$typeof;
     return $$typeofType === REACT_MEMO_TYPE;
 }
 function getStatics(component) {
@@ -922,34 +947,34 @@ function getStatics(component) {
         ? TYPE_STATICS[component['$$typeof']]
         : REACT_STATICS;
 }
-const defineProperty = Object.defineProperty;
-const getOwnPropertyNames = Object.getOwnPropertyNames;
-const getOwnPropertySymbols = Object.getOwnPropertySymbols;
-const getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-const getPrototypeOf = Object.getPrototypeOf;
-const objectPrototype = Object.prototype;
+var defineProperty = Object.defineProperty;
+var getOwnPropertyNames = Object.getOwnPropertyNames;
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+var getPrototypeOf = Object.getPrototypeOf;
+var objectPrototype = Object.prototype;
 function hoistNonReactStatics(targetComponent, sourceComponent, excludelist) {
     if (typeof sourceComponent !== 'string') {
         // don't hoist over string (html) components
         if (objectPrototype) {
-            const inheritedComponent = getPrototypeOf(sourceComponent);
+            var inheritedComponent = getPrototypeOf(sourceComponent);
             if (inheritedComponent && inheritedComponent !== objectPrototype) {
                 hoistNonReactStatics(targetComponent, inheritedComponent, excludelist);
             }
         }
-        let keys = getOwnPropertyNames(sourceComponent);
+        var keys = getOwnPropertyNames(sourceComponent);
         if (getOwnPropertySymbols) {
             keys = keys.concat(getOwnPropertySymbols(sourceComponent));
         }
-        const targetStatics = getStatics(targetComponent);
-        const sourceStatics = getStatics(sourceComponent);
-        for (let i = 0; i < keys.length; ++i) {
-            const key = keys[i];
+        var targetStatics = getStatics(targetComponent);
+        var sourceStatics = getStatics(sourceComponent);
+        for (var i = 0; i < keys.length; ++i) {
+            var key = keys[i];
             if (!(key in KNOWN_STATICS) &&
                 !(excludelist && excludelist[key]) &&
                 !(sourceStatics && key in sourceStatics) &&
                 !(targetStatics && key in targetStatics)) {
-                const descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+                var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
                 try {
                     // Avoid failures from read-only properties
                     defineProperty(targetComponent, key, descriptor);
@@ -964,31 +989,31 @@ function hoistNonReactStatics(targetComponent, sourceComponent, excludelist) {
 }
 
 function withTheme(Component) {
-    const WithTheme = React.forwardRef((props, ref) => {
-        const theme = React.useContext(ThemeContext);
-        const themeProp = determineTheme(props, theme, Component.defaultProps);
+    var WithTheme = React.forwardRef(function (props, ref) {
+        var theme = React.useContext(ThemeContext);
+        var themeProp = determineTheme(props, theme, Component.defaultProps);
         if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {
             // eslint-disable-next-line no-console
-            console.warn(`[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "${getComponentName(Component)}"`);
+            console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"".concat(getComponentName(Component), "\""));
         }
-        return React.createElement(Component, { ...props, theme: themeProp, ref: ref });
+        return React.createElement(Component, __assign({}, props, { theme: themeProp, ref: ref }));
     });
-    WithTheme.displayName = `WithTheme(${getComponentName(Component)})`;
+    WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
     return hoistNonReactStatics(WithTheme, Component);
 }
 
-const useTheme = () => useContext(ThemeContext);
+var useTheme = function () { return useContext(ThemeContext); };
 
-const AD_REPLACER_R = /(a)(d)/gi;
+var AD_REPLACER_R = /(a)(d)/gi;
 /* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
  * counterparts */
-const charsLength = 52;
+var charsLength = 52;
 /* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
-const getAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
+var getAlphabeticChar = function (code) { return String.fromCharCode(code + (code > 25 ? 39 : 97)); };
 /* input a number, usually a hash and convert it to base-52 */
 function generateAlphabeticName(code) {
-    let name = '';
-    let x;
+    var name = '';
+    var x;
     /* get a char and divide by alphabet-length */
     for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {
         name = getAlphabeticChar(x % charsLength) + name;
@@ -1000,41 +1025,41 @@ function generateComponentId(str) {
     return generateAlphabeticName(hash(str) >>> 0);
 }
 
-let generated = {};
+var generated = {};
 /**
  * InlineStyle takes arbitrary CSS and generates a flat object
  */
 function makeInlineStyleClass(styleSheet) {
-    const InlineStyle = class InlineStyle {
-        rules;
-        constructor(rules) {
+    var InlineStyle = /** @class */ (function () {
+        function InlineStyle(rules) {
             this.rules = rules;
         }
-        generateStyleObject(executionContext) {
+        InlineStyle.prototype.generateStyleObject = function (executionContext) {
             // keyframes, functions, and component selectors are not allowed for React Native
-            const flatCSS = flatten(this.rules, executionContext).join('');
-            const hash = generateComponentId(flatCSS);
+            var flatCSS = flatten(this.rules, executionContext).join('');
+            var hash = generateComponentId(flatCSS);
             if (!generated[hash]) {
-                const root = parse(flatCSS);
-                const declPairs = [];
-                root.each(node => {
+                var root = parse(flatCSS);
+                var declPairs_1 = [];
+                root.each(function (node) {
                     if (node.type === 'decl') {
-                        declPairs.push([node.prop, node.value]);
+                        declPairs_1.push([node.prop, node.value]);
                     }
                     else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
                         /* eslint-disable no-console */
-                        console.warn(`Node of type ${node.type} not supported as an inline style`);
+                        console.warn("Node of type ".concat(node.type, " not supported as an inline style"));
                     }
                 });
-                const styleObject = transformDeclPairs(declPairs);
-                const styles = styleSheet.create({
+                var styleObject = transformDeclPairs(declPairs_1);
+                var styles = styleSheet.create({
                     generated: styleObject,
                 });
                 generated[hash] = styles.generated;
             }
             return generated[hash];
-        }
-    };
+        };
+        return InlineStyle;
+    }());
     return InlineStyle;
 }
 
@@ -1046,22 +1071,23 @@ function isTag(target) {
 }
 
 function generateDisplayName(target) {
-    return isTag(target) ? `styled.${target}` : `Styled(${getComponentName(target)})`;
+    return isTag(target) ? "styled.".concat(target) : "Styled(".concat(getComponentName(target), ")");
 }
 
-function mixinRecursively(target, source, forceMerge = false) {
+function mixinRecursively(target, source, forceMerge) {
+    if (forceMerge === void 0) { forceMerge = false; }
     /* only merge into POJOs, Arrays, but for top level objects only
      * allow to merge into anything by passing forceMerge = true */
     if (!forceMerge && !isPlainObject(target) && !Array.isArray(target)) {
         return source;
     }
     if (Array.isArray(source)) {
-        for (let key = 0; key < source.length; key++) {
+        for (var key = 0; key < source.length; key++) {
             target[key] = mixinRecursively(target[key], source[key]);
         }
     }
     else if (isPlainObject(source)) {
-        for (const key in source) {
+        for (var key in source) {
             target[key] = mixinRecursively(target[key], source[key]);
         }
     }
@@ -1072,23 +1098,30 @@ function mixinRecursively(target, source, forceMerge = false) {
  * If target is not a POJO or an Array, it will get source properties injected via shallow merge
  * Source objects applied left to right.  Mutates & returns target.  Similar to lodash merge.
  */
-function mixinDeep(target = {}, ...sources) {
-    for (const source of sources) {
+function mixinDeep(target) {
+    if (target === void 0) { target = {}; }
+    var sources = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        sources[_i - 1] = arguments[_i];
+    }
+    for (var _a = 0, sources_1 = sources; _a < sources_1.length; _a++) {
+        var source = sources_1[_a];
         mixinRecursively(target, source, true);
     }
     return target;
 }
 
-function useResolvedAttrs(theme = EMPTY_OBJECT, props, attrs) {
+function useResolvedAttrs(theme, props, attrs) {
+    if (theme === void 0) { theme = EMPTY_OBJECT; }
     // NOTE: can't memoize this
     // returns [context, resolvedAttrs]
     // where resolvedAttrs is only the things injected by the attrs themselves
-    const context = { ...props, theme };
-    const resolvedAttrs = {};
-    attrs.forEach(attrDef => {
+    var context = __assign(__assign({}, props), { theme: theme });
+    var resolvedAttrs = {};
+    attrs.forEach(function (attrDef) {
         // @ts-expect-error narrowing isn't working properly for some reason
-        let resolvedAttrDef = typeof attrDef === 'function' ? attrDef(context) : attrDef;
-        let key;
+        var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(context) : attrDef;
+        var key;
         /* eslint-disable guard-for-in */
         for (key in resolvedAttrDef) {
             // @ts-expect-error bad types
@@ -1098,34 +1131,32 @@ function useResolvedAttrs(theme = EMPTY_OBJECT, props, attrs) {
     });
     return [context, resolvedAttrs];
 }
-// Validator defaults to true if not in HTML/DOM env
-const validAttr = () => true;
 function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
-    const { attrs: componentAttrs, inlineStyle, defaultProps, shouldForwardProp, target, } = forwardedComponent;
+    var componentAttrs = forwardedComponent.attrs, inlineStyle = forwardedComponent.inlineStyle, defaultProps = forwardedComponent.defaultProps, shouldForwardProp = forwardedComponent.shouldForwardProp, target = forwardedComponent.target;
     // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
     // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
     // should be an immutable value, but behave for now.
-    const theme = determineTheme(props, useContext(ThemeContext), defaultProps);
-    const [context, attrs] = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);
-    const generatedStyles = inlineStyle.generateStyleObject(context);
-    const refToForward = forwardedRef;
-    const elementToBeCreated = attrs.$as || props.$as || attrs.as || props.as || target;
-    const computedProps = attrs !== props ? { ...props, ...attrs } : props;
-    const propsForElement = {};
+    var theme = determineTheme(props, useContext(ThemeContext), defaultProps);
+    var _a = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs), context = _a[0], attrs = _a[1];
+    var generatedStyles = inlineStyle.generateStyleObject(context);
+    var refToForward = forwardedRef;
+    var elementToBeCreated = attrs.$as || props.$as || attrs.as || props.as || target;
+    var computedProps = attrs !== props ? __assign(__assign({}, props), attrs) : props;
+    var propsForElement = {};
     // eslint-disable-next-line guard-for-in
-    for (const key in computedProps) {
+    for (var key in computedProps) {
         if (key[0] === '$' || key === 'as')
             continue;
         else if (key === 'forwardedAs') {
             propsForElement.as = computedProps[key];
         }
-        else if (!shouldForwardProp || shouldForwardProp(key, validAttr, elementToBeCreated)) {
+        else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
             propsForElement[key] = computedProps[key];
         }
     }
-    propsForElement.style = useMemo(() => {
+    propsForElement.style = useMemo(function () {
         if (typeof props.style === 'function') {
-            return (state) => {
+            return function (state) {
                 return [generatedStyles].concat(props.style(state));
             };
         }
@@ -1139,39 +1170,42 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
     propsForElement.ref = refToForward;
     return createElement(elementToBeCreated, propsForElement);
 }
-var _StyledNativeComponent = (InlineStyle) => {
-    const createStyledNativeComponent = (target, options, rules) => {
-        const isTargetStyledComp = isStyledComponent(target);
-        const styledComponentTarget = target;
-        const { displayName = generateDisplayName(target), attrs = EMPTY_ARRAY } = options;
+var _StyledNativeComponent = (function (InlineStyle) {
+    var createStyledNativeComponent = function (target, options, rules) {
+        var isTargetStyledComp = isStyledComponent(target);
+        var styledComponentTarget = target;
+        var _a = options.displayName, displayName = _a === void 0 ? generateDisplayName(target) : _a, _b = options.attrs, attrs = _b === void 0 ? EMPTY_ARRAY : _b;
         // fold the underlying StyledComponent attrs up (implicit extend)
-        const finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
+        var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
             ? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
             : attrs;
         // eslint-disable-next-line prefer-destructuring
-        let shouldForwardProp = options.shouldForwardProp;
+        var shouldForwardProp = options.shouldForwardProp;
         if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {
-            const shouldForwardPropFn = styledComponentTarget.shouldForwardProp;
+            var shouldForwardPropFn_1 = styledComponentTarget.shouldForwardProp;
             if (options.shouldForwardProp) {
-                const passedShouldForwardPropFn = options.shouldForwardProp;
+                var passedShouldForwardPropFn_1 = options.shouldForwardProp;
                 // compose nested shouldForwardProp calls
-                shouldForwardProp = (prop, filterFn, elementToBeCreated) => shouldForwardPropFn(prop, filterFn, elementToBeCreated) &&
-                    passedShouldForwardPropFn(prop, filterFn, elementToBeCreated);
+                shouldForwardProp = function (prop, elementToBeCreated) {
+                    return shouldForwardPropFn_1(prop, elementToBeCreated) &&
+                        passedShouldForwardPropFn_1(prop, elementToBeCreated);
+                };
             }
             else {
                 // eslint-disable-next-line prefer-destructuring
-                shouldForwardProp = shouldForwardPropFn;
+                shouldForwardProp = shouldForwardPropFn_1;
             }
         }
-        const forwardRef = (props, ref) => 
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useStyledComponentImpl(WrappedStyledComponent, props, ref);
+        var forwardRef = function (props, ref) {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            return useStyledComponentImpl(WrappedStyledComponent, props, ref);
+        };
         forwardRef.displayName = displayName;
         /**
          * forwardRef creates a new interim component, which we'll take advantage of
          * instead of extending ParentComponent to create _another_ interim class
          */
-        let WrappedStyledComponent = React.forwardRef(forwardRef);
+        var WrappedStyledComponent = React.forwardRef(forwardRef);
         WrappedStyledComponent.attrs = finalAttrs;
         WrappedStyledComponent.inlineStyle = new InlineStyle(isTargetStyledComp ? styledComponentTarget.inlineStyle.rules.concat(rules) : rules);
         WrappedStyledComponent.displayName = displayName;
@@ -1181,17 +1215,14 @@ var _StyledNativeComponent = (InlineStyle) => {
         // fold the underlying StyledComponent target up since we folded the styles
         WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
         WrappedStyledComponent.withComponent = function withComponent(tag) {
-            const newOptions = {
-                ...options,
-                attrs: finalAttrs,
-            };
+            var newOptions = __assign(__assign({}, options), { attrs: finalAttrs });
             return createStyledNativeComponent(tag, newOptions, rules);
         };
         Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
-            get() {
+            get: function () {
                 return this._foldedDefaultProps;
             },
-            set(obj) {
+            set: function (obj) {
                 this._foldedDefaultProps = isTargetStyledComp
                     ? mixinDeep({}, styledComponentTarget.defaultProps, obj)
                     : obj;
@@ -1209,16 +1240,18 @@ var _StyledNativeComponent = (InlineStyle) => {
         return WrappedStyledComponent;
     };
     return createStyledNativeComponent;
-};
+});
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const reactNative = require('react-native');
-const InlineStyle = makeInlineStyleClass(reactNative.StyleSheet);
-const StyledNativeComponent = _StyledNativeComponent(InlineStyle);
-const baseStyled = (tag) => constructWithOptions(StyledNativeComponent, tag);
+var reactNative = require('react-native');
+var InlineStyle = makeInlineStyleClass(reactNative.StyleSheet);
+var StyledNativeComponent = _StyledNativeComponent(InlineStyle);
+var baseStyled = function (tag) {
+    return constructWithOptions(StyledNativeComponent, tag);
+};
 /* React native lazy-requires each of these modules for some reason, so let's
  *  assume it's for a good reason and not eagerly load them all */
-const aliases = [
+var aliases = [
     'ActivityIndicator',
     'Button',
     'DatePickerIOS',
@@ -1244,19 +1277,21 @@ const aliases = [
     'View',
     'VirtualizedList',
 ];
-const styled = baseStyled;
+var styled = baseStyled;
 /* Define a getter for each alias which simply gets the reactNative component
  * and passes it to styled */
-aliases.forEach(alias => Object.defineProperty(styled, alias, {
-    enumerable: true,
-    configurable: false,
-    get() {
-        if (alias in reactNative && reactNative[alias]) {
-            return styled(reactNative[alias]);
-        }
-        throw new Error(`${alias} is not available in the currently-installed version of react-native`);
-    },
-}));
+aliases.forEach(function (alias) {
+    return Object.defineProperty(styled, alias, {
+        enumerable: true,
+        configurable: false,
+        get: function () {
+            if (alias in reactNative && reactNative[alias]) {
+                return styled(reactNative[alias]);
+            }
+            throw new Error("".concat(alias, " is not available in the currently-installed version of react-native"));
+        },
+    });
+});
 
 export { ThemeConsumer, ThemeContext, ThemeProvider, css, styled as default, isStyledComponent, useTheme, withTheme };
 //# sourceMappingURL=styled-components.native.esm.js.map