styled-components 6.0.0-alpha.5 → 6.0.0-alpha.6

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

@@ -1,4 +1,3 @@
-import { __spreadArray, __read, __assign, __values } from 'tslib';
 import React, { useContext, useMemo, createElement } from 'react';
 import 'shallowequal';
 import { prefixer, stringify, serialize, compile, middleware, RULESET } from 'stylis';
@@ -6,8 +5,8 @@ import unitless from '@emotion/unitless';
 import transformDeclPairs from 'css-to-react-native';
 import { parse } from 'postcss';
 
-var EMPTY_ARRAY = Object.freeze([]);
-var EMPTY_OBJECT = Object.freeze({});
+const EMPTY_ARRAY = Object.freeze([]);
+const EMPTY_OBJECT = Object.freeze({});
 
 var errorMap = {
     '1': 'Cannot create styled-component for component: %s.\n\n',
@@ -29,21 +28,17 @@ var errorMap = {
     '17': "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",
 };
 
-var ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};
+const ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};
 /**
  * super basic version of sprintf
  */
-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) {
+function format(...args) {
+    let a = args[0];
+    const b = [];
+    for (let c = 1, len = args.length; c < len; c += 1) {
         b.push(args[c]);
     }
-    b.forEach(function (d) {
+    b.forEach(d => {
         a = a.replace(/%[a-z]/, d);
     });
     return a;
@@ -52,27 +47,23 @@ function format() {
  * 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) {
-    var interpolations = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        interpolations[_i - 1] = arguments[_i];
-    }
+function throwStyledComponentsError(code, ...interpolations) {
     if (process.env.NODE_ENV === 'production') {
-        return new Error("An error occurred. See https://git.io/JUIaE#".concat(code, " for more information.").concat(interpolations.length > 0 ? " Args: ".concat(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#${code} for more information.${interpolations.length > 0 ? ` Args: ${interpolations.join(', ')}` : ''}`);
     }
     else {
-        return new Error(format.apply(void 0, __spreadArray([ERRORS[code]], __read(interpolations), false)).trim());
+        return new Error(format(ERRORS[code], ...interpolations).trim());
     }
 }
 
-var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
+const SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
     'data-styled';
-var SC_ATTR_ACTIVE = 'active';
-var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "6.0.0-alpha.5";
-var SPLITTER = '/*!sc*/\n';
-var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
-var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
+const SC_ATTR_ACTIVE = 'active';
+const SC_ATTR_VERSION = 'data-styled-version';
+const SC_VERSION = "6.0.0-alpha.6";
+const SPLITTER = '/*!sc*/\n';
+const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
+const DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
     ? SC_DISABLE_SPEEDY
     : typeof process !== 'undefined' &&
         typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
@@ -89,44 +80,47 @@ var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
             : process.env.NODE_ENV !== 'production');
 
 /** Create a GroupedTag with an underlying Tag implementation */
-var makeGroupedTag = function (tag) {
+const makeGroupedTag = (tag) => {
     return new DefaultGroupedTag(tag);
 };
-var BASE_SIZE = 1 << 9;
-var DefaultGroupedTag = /** @class */ (function () {
-    function DefaultGroupedTag(tag) {
+const BASE_SIZE = 1 << 9;
+const DefaultGroupedTag = class DefaultGroupedTag {
+    groupSizes;
+    length;
+    tag;
+    constructor(tag) {
         this.groupSizes = new Uint32Array(BASE_SIZE);
         this.length = BASE_SIZE;
         this.tag = tag;
     }
-    DefaultGroupedTag.prototype.indexOfGroup = function (group) {
-        var index = 0;
-        for (var i = 0; i < group; i++) {
+    indexOfGroup(group) {
+        let index = 0;
+        for (let i = 0; i < group; i++) {
             index += this.groupSizes[i];
         }
         return index;
-    };
-    DefaultGroupedTag.prototype.insertRules = function (group, rules) {
+    }
+    insertRules(group, rules) {
         if (group >= this.groupSizes.length) {
-            var oldBuffer = this.groupSizes;
-            var oldSize = oldBuffer.length;
-            var newSize = oldSize;
+            const oldBuffer = this.groupSizes;
+            const oldSize = oldBuffer.length;
+            let newSize = oldSize;
             while (group >= newSize) {
                 newSize <<= 1;
                 if (newSize < 0) {
-                    throw throwStyledComponentsError(16, "".concat(group));
+                    throw throwStyledComponentsError(16, `${group}`);
                 }
             }
             this.groupSizes = new Uint32Array(newSize);
             this.groupSizes.set(oldBuffer);
             this.length = newSize;
-            for (var i = oldSize; i < newSize; i++) {
+            for (let i = oldSize; i < newSize; i++) {
                 this.groupSizes[i] = 0;
             }
         }
-        var ruleIndex = this.indexOfGroup(group + 1);
+        let ruleIndex = this.indexOfGroup(group + 1);
         if (Array.isArray(rules)) {
-            for (var i = 0, l = rules.length; i < l; i++) {
+            for (let i = 0, l = rules.length; i < l; i++) {
                 if (this.tag.insertRule(ruleIndex, rules[i])) {
                     this.groupSizes[group]++;
                     ruleIndex++;
@@ -138,115 +132,110 @@ var DefaultGroupedTag = /** @class */ (function () {
                 this.groupSizes[group]++;
             }
         }
-    };
-    DefaultGroupedTag.prototype.clearGroup = function (group) {
+    }
+    clearGroup(group) {
         if (group < this.length) {
-            var length_1 = this.groupSizes[group];
-            var startIndex = this.indexOfGroup(group);
-            var endIndex = startIndex + length_1;
+            const length = this.groupSizes[group];
+            const startIndex = this.indexOfGroup(group);
+            const endIndex = startIndex + length;
             this.groupSizes[group] = 0;
-            for (var i = startIndex; i < endIndex; i++) {
+            for (let i = startIndex; i < endIndex; i++) {
                 this.tag.deleteRule(startIndex);
             }
         }
-    };
-    DefaultGroupedTag.prototype.getGroup = function (group) {
-        var css = '';
+    }
+    getGroup(group) {
+        let css = '';
         if (group >= this.length || this.groupSizes[group] === 0) {
             return css;
         }
-        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);
+        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}`;
         }
         return css;
-    };
-    return DefaultGroupedTag;
-}());
+    }
+};
 
-var MAX_SMI = 1 << (31 - 1);
-var groupIDRegister = new Map();
-var reverseRegister = new Map();
-var nextFreeGroup = 1;
-var getGroupForId = function (id) {
+const MAX_SMI = 1 << (31 - 1);
+let groupIDRegister = new Map();
+let reverseRegister = new Map();
+let nextFreeGroup = 1;
+const getGroupForId = (id) => {
     if (groupIDRegister.has(id)) {
         return groupIDRegister.get(id);
     }
     while (reverseRegister.has(nextFreeGroup)) {
         nextFreeGroup++;
     }
-    var group = nextFreeGroup++;
+    const group = nextFreeGroup++;
     if (process.env.NODE_ENV !== 'production' && ((group | 0) < 0 || group > MAX_SMI)) {
-        throw throwStyledComponentsError(16, "".concat(group));
+        throw throwStyledComponentsError(16, `${group}`);
     }
     groupIDRegister.set(id, group);
     reverseRegister.set(group, id);
     return group;
 };
-var getIdForGroup = function (group) {
+const getIdForGroup = (group) => {
     return reverseRegister.get(group);
 };
-var setGroupForId = function (id, group) {
+const setGroupForId = (id, group) => {
     groupIDRegister.set(id, group);
     reverseRegister.set(group, id);
 };
 
-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);
+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);
         if (id === undefined)
-            return "continue";
-        var names = sheet.names.get(id);
-        var rules = tag.getGroup(group);
+            continue;
+        const names = sheet.names.get(id);
+        const rules = tag.getGroup(group);
         if (names === undefined || rules.length === 0)
-            return "continue";
-        var selector = "".concat(SC_ATTR, ".g").concat(group, "[id=\"").concat(id, "\"]");
-        var content = '';
+            continue;
+        const selector = `${SC_ATTR}.g${group}[id="${id}"]`;
+        let content = '';
         if (names !== undefined) {
-            names.forEach(function (name) {
+            names.forEach(name => {
                 if (name.length > 0) {
-                    content += "".concat(name, ",");
+                    content += `${name},`;
                 }
             });
         }
         // NOTE: It's easier to collect rules and have the marker
         // after the actual rules to simplify the rehydration
-        css += "".concat(rules).concat(selector, "{content:\"").concat(content, "\"}").concat(SPLITTER);
-    };
-    for (var group = 0; group < length; group++) {
-        _loop_1(group);
+        css += `${rules}${selector}{content:"${content}"}${SPLITTER}`;
     }
     return css;
 };
-var rehydrateNamesFromContent = function (sheet, id, content) {
-    var names = content.split(',');
-    var name;
-    for (var i = 0, l = names.length; i < l; i++) {
+const rehydrateNamesFromContent = (sheet, id, content) => {
+    const names = content.split(',');
+    let name;
+    for (let i = 0, l = names.length; i < l; i++) {
         // eslint-disable-next-line
         if ((name = names[i])) {
             sheet.registerName(id, name);
         }
     }
 };
-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();
+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();
         if (!part)
             continue;
-        var marker = part.match(MARKER_RE);
+        const marker = part.match(MARKER_RE);
         if (marker) {
-            var group = parseInt(marker[1], 10) | 0;
-            var id = marker[2];
+            const group = parseInt(marker[1], 10) | 0;
+            const id = marker[2];
             if (group !== 0) {
                 // Rehydrate componentId to group index mapping
                 setGroupForId(id, group);
@@ -262,10 +251,10 @@ var rehydrateSheetFromTag = function (sheet, style) {
         }
     }
 };
-var rehydrateSheet = function (sheet) {
-    var nodes = document.querySelectorAll(SELECTOR);
-    for (var i = 0, l = nodes.length; i < l; i++) {
-        var node = nodes[i];
+const rehydrateSheet = (sheet) => {
+    const nodes = document.querySelectorAll(SELECTOR);
+    for (let i = 0, l = nodes.length; i < l; i++) {
+        const node = nodes[i];
         if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {
             rehydrateSheetFromTag(sheet, node);
             if (node.parentNode) {
@@ -279,13 +268,13 @@ function getNonce() {
     return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
 }
 
-var ELEMENT_TYPE = 1;
+const ELEMENT_TYPE = 1;
 /* Node.ELEMENT_TYPE */
 /** Find last style element if any inside target */
-var findLastStyleTag = function (target) {
-    var childNodes = target.childNodes;
-    for (var i = childNodes.length; i >= 0; i--) {
-        var child = childNodes[i];
+const findLastStyleTag = (target) => {
+    const { childNodes } = target;
+    for (let i = childNodes.length; i >= 0; i--) {
+        const child = childNodes[i];
         if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {
             return child;
         }
@@ -293,29 +282,29 @@ var findLastStyleTag = function (target) {
     return undefined;
 };
 /** Create a style element inside `target` or <head> after the last */
-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;
+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;
     style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);
     style.setAttribute(SC_ATTR_VERSION, SC_VERSION);
-    var nonce = getNonce();
+    const nonce = getNonce();
     if (nonce)
         style.setAttribute('nonce', nonce);
     parent.insertBefore(style, nextSibling);
     return style;
 };
 /** Get the CSSStyleSheet instance for a given style element */
-var getSheet = function (tag) {
+const getSheet = (tag) => {
     if (tag.sheet) {
         return tag.sheet;
     }
     // Avoid Firefox quirk where the style element might not have a sheet property
-    var styleSheets = document.styleSheets;
-    for (var i = 0, l = styleSheets.length; i < l; i++) {
-        var sheet = styleSheets[i];
+    const { styleSheets } = document;
+    for (let i = 0, l = styleSheets.length; i < l; i++) {
+        const sheet = styleSheets[i];
         if (sheet.ownerNode === tag) {
             return sheet;
         }
@@ -324,8 +313,7 @@ var getSheet = function (tag) {
 };
 
 /** Create a CSSStyleSheet-like tag depending on the environment */
-var makeTag = function (_a) {
-    var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target;
+const makeTag = ({ isServer, useCSSOMInjection, target }) => {
     if (isServer) {
         return new VirtualTag(target);
     }
@@ -336,15 +324,18 @@ var makeTag = function (_a) {
         return new TextTag(target);
     }
 };
-var CSSOMTag = /** @class */ (function () {
-    function CSSOMTag(target) {
-        var element = (this.element = makeStyleTag(target));
+const CSSOMTag = class CSSOMTag {
+    element;
+    sheet;
+    length;
+    constructor(target) {
+        const 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;
     }
-    CSSOMTag.prototype.insertRule = function (index, rule) {
+    insertRule(index, rule) {
         try {
             this.sheet.insertRule(rule, index);
             this.length++;
@@ -353,13 +344,13 @@ var CSSOMTag = /** @class */ (function () {
         catch (_error) {
             return false;
         }
-    };
-    CSSOMTag.prototype.deleteRule = function (index) {
+    }
+    deleteRule(index) {
         this.sheet.deleteRule(index);
         this.length--;
-    };
-    CSSOMTag.prototype.getRule = function (index) {
-        var rule = this.sheet.cssRules[index];
+    }
+    getRule(index) {
+        const 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;
@@ -367,20 +358,22 @@ var CSSOMTag = /** @class */ (function () {
         else {
             return '';
         }
-    };
-    return CSSOMTag;
-}());
+    }
+};
 /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
-var TextTag = /** @class */ (function () {
-    function TextTag(target) {
-        var element = (this.element = makeStyleTag(target));
+const TextTag = class TextTag {
+    element;
+    nodes;
+    length;
+    constructor(target) {
+        const element = (this.element = makeStyleTag(target));
         this.nodes = element.childNodes;
         this.length = 0;
     }
-    TextTag.prototype.insertRule = function (index, rule) {
+    insertRule(index, rule) {
         if (index <= this.length && index >= 0) {
-            var node = document.createTextNode(rule);
-            var refNode = this.nodes[index];
+            const node = document.createTextNode(rule);
+            const refNode = this.nodes[index];
             this.element.insertBefore(node, refNode || null);
             this.length++;
             return true;
@@ -388,28 +381,29 @@ var TextTag = /** @class */ (function () {
         else {
             return false;
         }
-    };
-    TextTag.prototype.deleteRule = function (index) {
+    }
+    deleteRule(index) {
         this.element.removeChild(this.nodes[index]);
         this.length--;
-    };
-    TextTag.prototype.getRule = function (index) {
+    }
+    getRule(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 */
-var VirtualTag = /** @class */ (function () {
-    function VirtualTag(_target) {
+const VirtualTag = class VirtualTag {
+    rules;
+    length;
+    constructor(_target) {
         this.rules = [];
         this.length = 0;
     }
-    VirtualTag.prototype.insertRule = function (index, rule) {
+    insertRule(index, rule) {
         if (index <= this.length) {
             this.rules.splice(index, 0, rule);
             this.length++;
@@ -418,33 +412,42 @@ var VirtualTag = /** @class */ (function () {
         else {
             return false;
         }
-    };
-    VirtualTag.prototype.deleteRule = function (index) {
+    }
+    deleteRule(index) {
         this.rules.splice(index, 1);
         this.length--;
-    };
-    VirtualTag.prototype.getRule = function (index) {
+    }
+    getRule(index) {
         if (index < this.length) {
             return this.rules[index];
         }
         else {
             return '';
         }
-    };
-    return VirtualTag;
-}());
+    }
+};
 
-var SHOULD_REHYDRATE = IS_BROWSER;
-var defaultOptions = {
+let SHOULD_REHYDRATE = IS_BROWSER;
+const defaultOptions = {
     isServer: !IS_BROWSER,
     useCSSOMInjection: !DISABLE_SPEEDY,
 };
 /** Contains the main stylesheet logic for stringification and caching */
-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);
+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,
+        };
         this.gs = globalStyles;
         this.names = new Map(names);
         this.server = !!options.isServer;
@@ -454,96 +457,89 @@ var StyleSheet = /** @class */ (function () {
             rehydrateSheet(this);
         }
     }
-    /** 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) {
+    reconstructWithOptions(options, withNames = true) {
+        return new StyleSheet({ ...this.options, ...options }, this.gs, (withNames && this.names) || undefined);
+    }
+    allocateGSInstance(id) {
         return (this.gs[id] = (this.gs[id] || 0) + 1);
-    };
+    }
     /** Lazily initialises a GroupedTag for when it's actually needed */
-    StyleSheet.prototype.getTag = function () {
+    getTag() {
         return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));
-    };
+    }
     /** Check whether a name is known for caching */
-    StyleSheet.prototype.hasNameForId = function (id, name) {
+    hasNameForId(id, name) {
         return this.names.has(id) && this.names.get(id).has(name);
-    };
+    }
     /** Mark a group's name as known for caching */
-    StyleSheet.prototype.registerName = function (id, name) {
+    registerName(id, name) {
         getGroupForId(id);
         if (!this.names.has(id)) {
-            var groupNames = new Set();
+            const 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 */
-    StyleSheet.prototype.insertRules = function (id, name, rules) {
+    insertRules(id, name, rules) {
         this.registerName(id, name);
         this.getTag().insertRules(getGroupForId(id), rules);
-    };
+    }
     /** Clears all cached names for a given group ID */
-    StyleSheet.prototype.clearNames = function (id) {
+    clearNames(id) {
         if (this.names.has(id)) {
             this.names.get(id).clear();
         }
-    };
+    }
     /** Clears all rules for a given group ID */
-    StyleSheet.prototype.clearRules = function (id) {
+    clearRules(id) {
         this.getTag().clearGroup(getGroupForId(id));
         this.clearNames(id);
-    };
+    }
     /** Clears the entire tag which deletes all rules but not its names */
-    StyleSheet.prototype.clearTag = function () {
+    clearTag() {
         // 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 */
-    StyleSheet.prototype.toString = function () {
+    toString() {
         return outputSheet(this);
-    };
-    return StyleSheet;
-}());
+    }
+}
 
-var SEED = 5381;
+const 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
-var phash = function (h, x) {
-    var i = x.length;
+const phash = (h, x) => {
+    let i = x.length;
     while (i) {
         h = (h * 33) ^ x.charCodeAt(--i);
     }
     return h;
 };
 // This is a djb2 hashing function
-var hash = function (x) {
+const hash = (x) => {
     return phash(SEED, x);
 };
 
-var COMMENT_REGEX = /^\s*\/\/.*$/gm;
-var COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
-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) {
+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) => {
         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 ".".concat(_componentId);
+            return `.${_componentId}`;
         }
         return match;
     };
@@ -559,34 +555,31 @@ function createStylisInstance(_a) {
      *
      * https://github.com/thysultan/stylis.js/tree/v4.0.2#abstract-syntax-structure
      */
-    var selfReferenceReplacementPlugin = function (element) {
+    const selfReferenceReplacementPlugin = element => {
         if (element.type === RULESET && element.value.includes('&')) {
-            var props = element.props;
+            const props = element.props;
             props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);
         }
     };
-    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, '');
+    const stringifyRules = (css, selector = '', prefix = '', componentId = '&') => {
+        let 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("\\".concat(_selector, "\\b"), 'g');
-        _consecutiveSelfRefRegExp = new RegExp("(\\".concat(_selector, "\\b){2,}"));
-        var middlewares = plugins.slice();
+        _selectorRegexp = new RegExp(`\\${_selector}\\b`, 'g');
+        _consecutiveSelfRefRegExp = new RegExp(`(\\${_selector}\\b){2,}`);
+        const middlewares = plugins.slice();
         if (options.prefix || options.prefix === undefined) {
             middlewares.unshift(prefixer);
         }
         middlewares.push(selfReferenceReplacementPlugin, stringify);
-        return serialize(compile(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS), middleware(middlewares));
+        return serialize(compile(prefix || selector ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS), middleware(middlewares));
     };
     stringifyRules.hash = plugins.length
         ? plugins
-            .reduce(function (acc, plugin) {
+            .reduce((acc, plugin) => {
             if (!plugin.name) {
                 throwStyledComponentsError(15);
             }
@@ -597,36 +590,35 @@ function createStylisInstance(_a) {
     return stringifyRules;
 }
 
-var StyleSheetContext = React.createContext(undefined);
+const StyleSheetContext = React.createContext(undefined);
 StyleSheetContext.Consumer;
-var StylisContext = React.createContext(undefined);
+const StylisContext = React.createContext(undefined);
 StylisContext.Consumer;
 new StyleSheet();
-var mainStylis = createStylisInstance();
+const mainStylis = createStylisInstance();
 
-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));
-        };
+class Keyframes {
+    id;
+    name;
+    rules;
+    constructor(name, rules) {
         this.name = name;
-        this.id = "sc-keyframes-".concat(name);
+        this.id = `sc-keyframes-${name}`;
         this.rules = rules;
     }
-    Keyframes.prototype.getName = function (stylisInstance) {
-        if (stylisInstance === void 0) { stylisInstance = mainStylis; }
-        return this.name + stylisInstance.hash;
+    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));
     };
-    return Keyframes;
-}());
+    getName(stylisInstance = mainStylis) {
+        return this.name + stylisInstance.hash;
+    }
+}
 
 // Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js
 function addUnitIfNeeded(name, value) {
@@ -635,7 +627,7 @@ function addUnitIfNeeded(name, value) {
         return '';
     }
     if (typeof value === 'number' && value !== 0 && !(name in unitless)) {
-        return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
+        return `${value}px`; // Presumes implicit 'px' suffix for unitless numbers
     }
     return String(value).trim();
 }
@@ -651,10 +643,10 @@ function getComponentName(target) {
  * inlined version of
  * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
  */
-var uppercaseCheck = /([A-Z])/;
-var uppercasePattern = /([A-Z])/g;
-var msPattern = /^ms-/;
-var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase()); };
+const uppercaseCheck = /([A-Z])/;
+const uppercasePattern = /([A-Z])/g;
+const msPattern = /^ms-/;
+const prefixAndLowerCase = (char) => `-${char.toLowerCase()}`;
 /**
  * Hyphenates a camelcased CSS property name, for example:
  *
@@ -700,35 +692,33 @@ function isStyledComponent(target) {
 /**
  * It's falsish not falsy because 0 is allowed.
  */
-var isFalsish = function (chunk) {
-    return chunk === undefined || chunk === null || chunk === false || chunk === '';
-};
-var objToCssArray = function (obj, prevKey) {
-    var rules = [];
-    for (var key in obj) {
+const isFalsish = (chunk) => chunk === undefined || chunk === null || chunk === false || chunk === '';
+const objToCssArray = (obj, prevKey) => {
+    const rules = [];
+    for (const key in obj) {
         if (!obj.hasOwnProperty(key) || isFalsish(obj[key]))
             continue;
         if ((Array.isArray(obj[key]) && obj[key].isCss) || isFunction(obj[key])) {
-            rules.push("".concat(hyphenateStyleName(key), ":"), obj[key], ';');
+            rules.push(`${hyphenateStyleName(key)}:`, obj[key], ';');
         }
         else if (isPlainObject(obj[key])) {
-            rules.push.apply(rules, __spreadArray([], __read(objToCssArray(obj[key], key)), false));
+            rules.push(...objToCssArray(obj[key], key));
         }
         else {
-            rules.push("".concat(hyphenateStyleName(key), ": ").concat(addUnitIfNeeded(key, obj[key]), ";"));
+            rules.push(`${hyphenateStyleName(key)}: ${addUnitIfNeeded(key, obj[key])};`);
         }
     }
-    return prevKey ? __spreadArray(__spreadArray(["".concat(prevKey, " {")], __read(rules), false), ['}'], false) : rules;
+    return prevKey ? [`${prevKey} {`, ...rules, '}'] : rules;
 };
 function flatten(chunk, executionContext, styleSheet, stylisInstance) {
     if (Array.isArray(chunk)) {
-        var ruleSet = [];
-        for (var i = 0, len = chunk.length, result = void 0; i < len; i += 1) {
+        const ruleSet = [];
+        for (let i = 0, len = chunk.length, result; i < len; i += 1) {
             result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);
             if (result === '')
                 continue;
             else if (Array.isArray(result))
-                ruleSet.push.apply(ruleSet, __spreadArray([], __read(result), false));
+                ruleSet.push(...result);
             else
                 ruleSet.push(result);
         }
@@ -739,22 +729,22 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
     }
     /* Handle other components */
     if (isStyledComponent(chunk)) {
-        return ".".concat(chunk.styledComponentId);
+        return `.${chunk.styledComponentId}`;
     }
     /* Either execute or defer the function */
     if (isFunction(chunk)) {
         if (isStatelessFunction(chunk) && executionContext) {
-            var chunkFn = chunk;
-            var result = chunkFn(executionContext);
+            const chunkFn = chunk;
+            const 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("".concat(getComponentName(
+                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."));
+                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);
         }
@@ -774,8 +764,8 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
 }
 
 function interleave(strings, interpolations) {
-    var result = [strings[0]];
-    for (var i = 0, len = interpolations.length; i < len; i += 1) {
+    const result = [strings[0]];
+    for (let i = 0, len = interpolations.length; i < len; i += 1) {
         result.push(interpolations[i], strings[i + 1]);
     }
     return result;
@@ -785,25 +775,22 @@ function interleave(strings, interpolations) {
  * Used when flattening object styles to determine if we should
  * expand an array of styles.
  */
-var addTag = function (arg) {
+const addTag = (arg) => {
     if (Array.isArray(arg)) {
         // eslint-disable-next-line no-param-reassign
         arg.isCss = true;
     }
     return arg;
 };
-function css(styles) {
-    var interpolations = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        interpolations[_i - 1] = arguments[_i];
-    }
+function css(styles, ...interpolations) {
     if (isFunction(styles) || isPlainObject(styles)) {
-        var styleFunctionOrObject = styles;
-        return addTag(flatten(interleave(EMPTY_ARRAY, __spreadArray([
-            styleFunctionOrObject
-        ], __read(interpolations), false))));
+        const styleFunctionOrObject = styles;
+        return addTag(flatten(interleave(EMPTY_ARRAY, [
+            styleFunctionOrObject,
+            ...interpolations,
+        ])));
     }
-    var styleStringArray = styles;
+    const styleStringArray = styles;
     if (interpolations.length === 0 &&
         styleStringArray.length === 1 &&
         typeof styleStringArray[0] === 'string') {
@@ -812,8 +799,7 @@ function css(styles) {
     return addTag(flatten(interleave(styleStringArray, interpolations)));
 }
 
-function constructWithOptions(componentConstructor, tag, options) {
-    if (options === void 0) { options = EMPTY_OBJECT; }
+function constructWithOptions(componentConstructor, tag, 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
@@ -822,34 +808,30 @@ function constructWithOptions(componentConstructor, tag, options) {
         throw throwStyledComponentsError(1, tag);
     }
     /* This is callable directly as a template function */
-    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], __read(interpolations), false)));
-    };
+    const templateFunction = (initialStyles, ...interpolations) => componentConstructor(tag, options, css(initialStyles, ...interpolations));
     /* Modify/inject new props at runtime */
-    templateFunction.attrs = function (attrs) {
-        return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), { attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean) }));
-    };
+    templateFunction.attrs = (attrs) => constructWithOptions(componentConstructor, tag, {
+        ...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 = function (config) {
-        return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), config));
-    };
+    templateFunction.withConfig = (config) => constructWithOptions(componentConstructor, tag, {
+        ...options,
+        ...config,
+    });
     return templateFunction;
 }
 
-var ThemeContext = React.createContext(undefined);
-var ThemeConsumer = ThemeContext.Consumer;
+const ThemeContext = React.createContext(undefined);
+const ThemeConsumer = ThemeContext.Consumer;
 function mergeTheme(theme, outerTheme) {
     if (!theme) {
         throw throwStyledComponentsError(14);
     }
     if (isFunction(theme)) {
-        var themeFn = theme;
-        var mergedTheme = themeFn(outerTheme);
+        const themeFn = theme;
+        const mergedTheme = themeFn(outerTheme);
         if (process.env.NODE_ENV !== 'production' &&
             (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')) {
             throw throwStyledComponentsError(7);
@@ -859,34 +841,32 @@ function mergeTheme(theme, outerTheme) {
     if (Array.isArray(theme) || typeof theme !== 'object') {
         throw throwStyledComponentsError(8);
     }
-    return outerTheme ? __assign(__assign({}, outerTheme), theme) : theme;
+    return outerTheme ? { ...outerTheme, ...theme } : theme;
 }
 /**
  * Provide a theme to an entire react component tree via context
  */
 function ThemeProvider(props) {
-    var outerTheme = useContext(ThemeContext);
-    var themeContext = useMemo(function () { return mergeTheme(props.theme, outerTheme); }, [props.theme, outerTheme]);
+    const outerTheme = useContext(ThemeContext);
+    const themeContext = useMemo(() => 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) {
-    if (defaultProps === void 0) { defaultProps = EMPTY_OBJECT; }
+function determineTheme(props, providedTheme, defaultProps = EMPTY_OBJECT) {
     return (props.theme !== defaultProps.theme && props.theme) || providedTheme || defaultProps.theme;
 }
 
-var _a;
-var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+const hasSymbol = typeof Symbol === 'function' && Symbol.for;
 // copied from react-is
-var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+const REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
 /**
  * Adapted from hoist-non-react-statics to avoid the react-is dependency.
  */
-var REACT_STATICS = {
+const REACT_STATICS = {
     childContextTypes: true,
     contextType: true,
     contextTypes: true,
@@ -899,7 +879,7 @@ var REACT_STATICS = {
     propTypes: true,
     type: true,
 };
-var KNOWN_STATICS = {
+const KNOWN_STATICS = {
     name: true,
     length: true,
     prototype: true,
@@ -908,14 +888,14 @@ var KNOWN_STATICS = {
     arguments: true,
     arity: true,
 };
-var FORWARD_REF_STATICS = {
+const FORWARD_REF_STATICS = {
     $$typeof: true,
     render: true,
     defaultProps: true,
     displayName: true,
     propTypes: true,
 };
-var MEMO_STATICS = {
+const MEMO_STATICS = {
     $$typeof: true,
     compare: true,
     defaultProps: true,
@@ -923,13 +903,13 @@ var MEMO_STATICS = {
     propTypes: true,
     type: true,
 };
-var TYPE_STATICS = (_a = {},
-    _a[REACT_FORWARD_REF_TYPE] = FORWARD_REF_STATICS,
-    _a[REACT_MEMO_TYPE] = MEMO_STATICS,
-    _a);
+const TYPE_STATICS = {
+    [REACT_FORWARD_REF_TYPE]: FORWARD_REF_STATICS,
+    [REACT_MEMO_TYPE]: MEMO_STATICS,
+};
 // adapted from react-is
 function isMemo(object) {
-    var $$typeofType = 'type' in object && object.type.$$typeof;
+    const $$typeofType = 'type' in object && object.type.$$typeof;
     return $$typeofType === REACT_MEMO_TYPE;
 }
 function getStatics(component) {
@@ -942,34 +922,34 @@ function getStatics(component) {
         ? TYPE_STATICS[component['$$typeof']]
         : REACT_STATICS;
 }
-var defineProperty = Object.defineProperty;
-var getOwnPropertyNames = Object.getOwnPropertyNames;
-var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-var getPrototypeOf = Object.getPrototypeOf;
-var objectPrototype = Object.prototype;
+const defineProperty = Object.defineProperty;
+const getOwnPropertyNames = Object.getOwnPropertyNames;
+const getOwnPropertySymbols = Object.getOwnPropertySymbols;
+const getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+const getPrototypeOf = Object.getPrototypeOf;
+const objectPrototype = Object.prototype;
 function hoistNonReactStatics(targetComponent, sourceComponent, excludelist) {
     if (typeof sourceComponent !== 'string') {
         // don't hoist over string (html) components
         if (objectPrototype) {
-            var inheritedComponent = getPrototypeOf(sourceComponent);
+            const inheritedComponent = getPrototypeOf(sourceComponent);
             if (inheritedComponent && inheritedComponent !== objectPrototype) {
                 hoistNonReactStatics(targetComponent, inheritedComponent, excludelist);
             }
         }
-        var keys = getOwnPropertyNames(sourceComponent);
+        let keys = getOwnPropertyNames(sourceComponent);
         if (getOwnPropertySymbols) {
             keys = keys.concat(getOwnPropertySymbols(sourceComponent));
         }
-        var targetStatics = getStatics(targetComponent);
-        var sourceStatics = getStatics(sourceComponent);
-        for (var i = 0; i < keys.length; ++i) {
-            var key = keys[i];
+        const targetStatics = getStatics(targetComponent);
+        const sourceStatics = getStatics(sourceComponent);
+        for (let i = 0; i < keys.length; ++i) {
+            const key = keys[i];
             if (!(key in KNOWN_STATICS) &&
                 !(excludelist && excludelist[key]) &&
                 !(sourceStatics && key in sourceStatics) &&
                 !(targetStatics && key in targetStatics)) {
-                var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+                const descriptor = getOwnPropertyDescriptor(sourceComponent, key);
                 try {
                     // Avoid failures from read-only properties
                     defineProperty(targetComponent, key, descriptor);
@@ -984,31 +964,31 @@ function hoistNonReactStatics(targetComponent, sourceComponent, excludelist) {
 }
 
 function withTheme(Component) {
-    var WithTheme = React.forwardRef(function (props, ref) {
-        var theme = React.useContext(ThemeContext);
-        var themeProp = determineTheme(props, theme, Component.defaultProps);
+    const WithTheme = React.forwardRef((props, ref) => {
+        const theme = React.useContext(ThemeContext);
+        const 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 \"".concat(getComponentName(Component), "\""));
+            console.warn(`[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "${getComponentName(Component)}"`);
         }
-        return React.createElement(Component, __assign({}, props, { theme: themeProp, ref: ref }));
+        return React.createElement(Component, { ...props, theme: themeProp, ref: ref });
     });
-    WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
+    WithTheme.displayName = `WithTheme(${getComponentName(Component)})`;
     return hoistNonReactStatics(WithTheme, Component);
 }
 
-var useTheme = function () { return useContext(ThemeContext); };
+const useTheme = () => useContext(ThemeContext);
 
-var AD_REPLACER_R = /(a)(d)/gi;
+const AD_REPLACER_R = /(a)(d)/gi;
 /* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
  * counterparts */
-var charsLength = 52;
+const charsLength = 52;
 /* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
-var getAlphabeticChar = function (code) { return String.fromCharCode(code + (code > 25 ? 39 : 97)); };
+const getAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
 /* input a number, usually a hash and convert it to base-52 */
 function generateAlphabeticName(code) {
-    var name = '';
-    var x;
+    let name = '';
+    let 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;
@@ -1020,41 +1000,41 @@ function generateComponentId(str) {
     return generateAlphabeticName(hash(str) >>> 0);
 }
 
-var generated = {};
+let generated = {};
 /**
  * InlineStyle takes arbitrary CSS and generates a flat object
  */
 function makeInlineStyleClass(styleSheet) {
-    var InlineStyle = /** @class */ (function () {
-        function InlineStyle(rules) {
+    const InlineStyle = class InlineStyle {
+        rules;
+        constructor(rules) {
             this.rules = rules;
         }
-        InlineStyle.prototype.generateStyleObject = function (executionContext) {
+        generateStyleObject(executionContext) {
             // keyframes, functions, and component selectors are not allowed for React Native
-            var flatCSS = flatten(this.rules, executionContext).join('');
-            var hash = generateComponentId(flatCSS);
+            const flatCSS = flatten(this.rules, executionContext).join('');
+            const hash = generateComponentId(flatCSS);
             if (!generated[hash]) {
-                var root = parse(flatCSS);
-                var declPairs_1 = [];
-                root.each(function (node) {
+                const root = parse(flatCSS);
+                const declPairs = [];
+                root.each(node => {
                     if (node.type === 'decl') {
-                        declPairs_1.push([node.prop, node.value]);
+                        declPairs.push([node.prop, node.value]);
                     }
                     else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
                         /* eslint-disable no-console */
-                        console.warn("Node of type ".concat(node.type, " not supported as an inline style"));
+                        console.warn(`Node of type ${node.type} not supported as an inline style`);
                     }
                 });
-                var styleObject = transformDeclPairs(declPairs_1);
-                var styles = styleSheet.create({
+                const styleObject = transformDeclPairs(declPairs);
+                const styles = styleSheet.create({
                     generated: styleObject,
                 });
                 generated[hash] = styles.generated;
             }
             return generated[hash];
-        };
-        return InlineStyle;
-    }());
+        }
+    };
     return InlineStyle;
 }
 
@@ -1066,23 +1046,22 @@ function isTag(target) {
 }
 
 function generateDisplayName(target) {
-    return isTag(target) ? "styled.".concat(target) : "Styled(".concat(getComponentName(target), ")");
+    return isTag(target) ? `styled.${target}` : `Styled(${getComponentName(target)})`;
 }
 
-function mixinRecursively(target, source, forceMerge) {
-    if (forceMerge === void 0) { forceMerge = false; }
+function mixinRecursively(target, source, 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 (var key = 0; key < source.length; key++) {
+        for (let key = 0; key < source.length; key++) {
             target[key] = mixinRecursively(target[key], source[key]);
         }
     }
     else if (isPlainObject(source)) {
-        for (var key in source) {
+        for (const key in source) {
             target[key] = mixinRecursively(target[key], source[key]);
         }
     }
@@ -1093,39 +1072,23 @@ function mixinRecursively(target, source, forceMerge) {
  * 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) {
-    var e_1, _a;
-    if (target === void 0) { target = {}; }
-    var sources = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        sources[_i - 1] = arguments[_i];
-    }
-    try {
-        for (var sources_1 = __values(sources), sources_1_1 = sources_1.next(); !sources_1_1.done; sources_1_1 = sources_1.next()) {
-            var source = sources_1_1.value;
-            mixinRecursively(target, source, true);
-        }
-    }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-    finally {
-        try {
-            if (sources_1_1 && !sources_1_1.done && (_a = sources_1.return)) _a.call(sources_1);
-        }
-        finally { if (e_1) throw e_1.error; }
+function mixinDeep(target = {}, ...sources) {
+    for (const source of sources) {
+        mixinRecursively(target, source, true);
     }
     return target;
 }
 
-function useResolvedAttrs(theme, props, attrs) {
-    if (theme === void 0) { theme = EMPTY_OBJECT; }
+function useResolvedAttrs(theme = EMPTY_OBJECT, props, attrs) {
     // NOTE: can't memoize this
     // returns [context, resolvedAttrs]
     // where resolvedAttrs is only the things injected by the attrs themselves
-    var context = __assign(__assign({}, props), { theme: theme });
-    var resolvedAttrs = {};
-    attrs.forEach(function (attrDef) {
-        var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(context) : attrDef;
-        var key;
+    const context = { ...props, theme };
+    const resolvedAttrs = {};
+    attrs.forEach(attrDef => {
+        // @ts-expect-error narrowing isn't working properly for some reason
+        let resolvedAttrDef = typeof attrDef === 'function' ? attrDef(context) : attrDef;
+        let key;
         /* eslint-disable guard-for-in */
         for (key in resolvedAttrDef) {
             // @ts-expect-error bad types
@@ -1136,21 +1099,21 @@ function useResolvedAttrs(theme, props, attrs) {
     return [context, resolvedAttrs];
 }
 // Validator defaults to true if not in HTML/DOM env
-var validAttr = function () { return true; };
+const validAttr = () => true;
 function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
-    var componentAttrs = forwardedComponent.attrs, inlineStyle = forwardedComponent.inlineStyle, defaultProps = forwardedComponent.defaultProps, shouldForwardProp = forwardedComponent.shouldForwardProp, target = forwardedComponent.target;
+    const { attrs: componentAttrs, inlineStyle, defaultProps, shouldForwardProp, target, } = forwardedComponent;
     // 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.
-    var theme = determineTheme(props, useContext(ThemeContext), defaultProps);
-    var _a = __read(useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs), 2), 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 = {};
+    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 = {};
     // eslint-disable-next-line guard-for-in
-    for (var key in computedProps) {
+    for (const key in computedProps) {
         if (key[0] === '$' || key === 'as')
             continue;
         else if (key === 'forwardedAs') {
@@ -1160,9 +1123,9 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
             propsForElement[key] = computedProps[key];
         }
     }
-    propsForElement.style = useMemo(function () {
+    propsForElement.style = useMemo(() => {
         if (typeof props.style === 'function') {
-            return function (state) {
+            return (state) => {
                 return [generatedStyles].concat(props.style(state));
             };
         }
@@ -1176,42 +1139,39 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
     propsForElement.ref = refToForward;
     return createElement(elementToBeCreated, propsForElement);
 }
-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;
+var _StyledNativeComponent = (InlineStyle) => {
+    const createStyledNativeComponent = (target, options, rules) => {
+        const isTargetStyledComp = isStyledComponent(target);
+        const styledComponentTarget = target;
+        const { displayName = generateDisplayName(target), attrs = EMPTY_ARRAY } = options;
         // fold the underlying StyledComponent attrs up (implicit extend)
-        var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
+        const finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
             ? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
             : attrs;
         // eslint-disable-next-line prefer-destructuring
-        var shouldForwardProp = options.shouldForwardProp;
+        let shouldForwardProp = options.shouldForwardProp;
         if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {
-            var shouldForwardPropFn_1 = styledComponentTarget.shouldForwardProp;
+            const shouldForwardPropFn = styledComponentTarget.shouldForwardProp;
             if (options.shouldForwardProp) {
-                var passedShouldForwardPropFn_1 = options.shouldForwardProp;
+                const passedShouldForwardPropFn = options.shouldForwardProp;
                 // compose nested shouldForwardProp calls
-                shouldForwardProp = function (prop, filterFn, elementToBeCreated) {
-                    return shouldForwardPropFn_1(prop, filterFn, elementToBeCreated) &&
-                        passedShouldForwardPropFn_1(prop, filterFn, elementToBeCreated);
-                };
+                shouldForwardProp = (prop, filterFn, elementToBeCreated) => shouldForwardPropFn(prop, filterFn, elementToBeCreated) &&
+                    passedShouldForwardPropFn(prop, filterFn, elementToBeCreated);
             }
             else {
                 // eslint-disable-next-line prefer-destructuring
-                shouldForwardProp = shouldForwardPropFn_1;
+                shouldForwardProp = shouldForwardPropFn;
             }
         }
-        var forwardRef = function (props, ref) {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            return useStyledComponentImpl(WrappedStyledComponent, props, ref);
-        };
+        const forwardRef = (props, ref) => 
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        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
          */
-        var WrappedStyledComponent = React.forwardRef(forwardRef);
+        let WrappedStyledComponent = React.forwardRef(forwardRef);
         WrappedStyledComponent.attrs = finalAttrs;
         WrappedStyledComponent.inlineStyle = new InlineStyle(isTargetStyledComp ? styledComponentTarget.inlineStyle.rules.concat(rules) : rules);
         WrappedStyledComponent.displayName = displayName;
@@ -1221,14 +1181,17 @@ var _StyledNativeComponent = (function (InlineStyle) {
         // fold the underlying StyledComponent target up since we folded the styles
         WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
         WrappedStyledComponent.withComponent = function withComponent(tag) {
-            var newOptions = __assign(__assign({}, options), { attrs: finalAttrs });
+            const newOptions = {
+                ...options,
+                attrs: finalAttrs,
+            };
             return createStyledNativeComponent(tag, newOptions, rules);
         };
         Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
-            get: function () {
+            get() {
                 return this._foldedDefaultProps;
             },
-            set: function (obj) {
+            set(obj) {
                 this._foldedDefaultProps = isTargetStyledComp
                     ? mixinDeep({}, styledComponentTarget.defaultProps, obj)
                     : obj;
@@ -1246,81 +1209,54 @@ var _StyledNativeComponent = (function (InlineStyle) {
         return WrappedStyledComponent;
     };
     return createStyledNativeComponent;
-});
+};
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-var reactNative = require('react-native');
-var InlineStyle = makeInlineStyleClass(reactNative.StyleSheet);
-var StyledNativeComponent = _StyledNativeComponent(InlineStyle);
-var baseStyled = function (tag) {
-    return constructWithOptions(StyledNativeComponent, tag);
-};
+const reactNative = require('react-native');
+const InlineStyle = makeInlineStyleClass(reactNative.StyleSheet);
+const StyledNativeComponent = _StyledNativeComponent(InlineStyle);
+const baseStyled = (tag) => 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 */
-var aliases = [
+const aliases = [
     'ActivityIndicator',
-    'ActivityIndicatorIOS',
-    'ART',
     'Button',
     'DatePickerIOS',
     'DrawerLayoutAndroid',
     'FlatList',
     'Image',
     'ImageBackground',
-    'ImageEditor',
-    'ImageStore',
     'KeyboardAvoidingView',
-    'ListView',
-    'MapView',
     'Modal',
-    'NavigatorIOS',
-    'Picker',
-    'PickerIOS',
     'Pressable',
     'ProgressBarAndroid',
     'ProgressViewIOS',
-    'RecyclerViewBackedScrollView',
     'RefreshControl',
     'SafeAreaView',
     'ScrollView',
     'SectionList',
-    'SegmentedControlIOS',
     'Slider',
-    'SliderIOS',
-    'SnapshotViewIOS',
-    'StatusBar',
-    'SwipeableListView',
     'Switch',
-    'SwitchAndroid',
-    'SwitchIOS',
-    'TabBarIOS',
     'Text',
     'TextInput',
-    'ToastAndroid',
-    'ToolbarAndroid',
-    'Touchable',
     'TouchableHighlight',
-    'TouchableNativeFeedback',
     'TouchableOpacity',
-    'TouchableWithoutFeedback',
     'View',
-    'ViewPagerAndroid',
     'VirtualizedList',
-    'WebView',
 ];
-var styled = baseStyled;
+const styled = baseStyled;
 /* Define a getter for each alias which simply gets the reactNative component
  * and passes it to styled */
-aliases.forEach(function (alias) {
-    return Object.defineProperty(styled, alias, {
-        enumerable: true,
-        configurable: false,
-        get: function () {
-            // @ts-expect-error supporting old imports in some cases
+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`);
+    },
+}));
 
 export { ThemeConsumer, ThemeContext, ThemeProvider, css, styled as default, isStyledComponent, useTheme, withTheme };
 //# sourceMappingURL=styled-components.native.esm.js.map