styled-components 6.4.0-prerelease.2 → 6.4.0-prerelease.4

package/dist/styled-components.js

@@ -4,80 +4,36 @@
     (global = global || self, factory(global.styled = {}, global.React));
 })(this, (function (exports, React) { 'use strict';
 
-    var SC_ATTR = (typeof process !== 'undefined' &&
+    var _a$1, _b;
+    const SC_ATTR = (typeof process !== 'undefined' &&
         typeof process.env !== '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.4.0-prerelease.2";
-    var SPLITTER = '/*!sc*/\n';
-    var IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
-    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.4.0-prerelease.4";
+    const SPLITTER = '/*!sc*/\n';
+    const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
+    function readSpeedyFlag(name) {
+        if (typeof process !== 'undefined' && typeof process.env !== 'undefined') {
+            const val = process.env[name];
+            if (val !== undefined && val !== '') {
+                return val !== 'false';
+            }
+        }
+        return undefined;
+    }
+    const DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
         ? SC_DISABLE_SPEEDY
-        : typeof process !== 'undefined' &&
-            typeof process.env !== 'undefined' &&
-            typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
-            process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
-            ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
-                ? false
-                : process.env.REACT_APP_SC_DISABLE_SPEEDY
-            : typeof process !== 'undefined' &&
-                typeof process.env !== 'undefined' &&
-                typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
-                process.env.SC_DISABLE_SPEEDY !== ''
-                ? process.env.SC_DISABLE_SPEEDY === 'false'
-                    ? false
-                    : process.env.SC_DISABLE_SPEEDY
-                : "development" !== 'production');
+        : ((_b = (_a$1 = readSpeedyFlag('REACT_APP_SC_DISABLE_SPEEDY')) !== null && _a$1 !== void 0 ? _a$1 : readSpeedyFlag('SC_DISABLE_SPEEDY')) !== null && _b !== void 0 ? _b : (typeof process !== 'undefined' && typeof process.env !== 'undefined'
+            ? "development" !== 'production'
+            : true)));
+    const KEYFRAMES_ID_PREFIX = 'sc-keyframes-';
     // Shared empty execution context when generating static styles
-    var STATIC_EXECUTION_CONTEXT = {};
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-            if (ar || !(i in from)) {
-                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-                ar[i] = from[i];
-            }
-        }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
+    const STATIC_EXECUTION_CONTEXT = {};
 
-    var EMPTY_ARRAY = Object.freeze([]);
-    var EMPTY_OBJECT = Object.freeze({});
+    const EMPTY_ARRAY = Object.freeze([]);
+    const EMPTY_OBJECT = Object.freeze({});
 
     /**
      * If the Object prototype is frozen, the "toString" property is non-writable. This means that any objects which inherit this property
@@ -120,21 +76,17 @@
         '18': 'ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`',
     };
 
-    var ERRORS = errorMap ;
+    const ERRORS = 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;
@@ -143,68 +95,64 @@
      * 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) {
         {
-            return new Error(format.apply(void 0, __spreadArray([ERRORS[code]], interpolations, false)).trim());
+            return new Error(format(ERRORS[code], ...interpolations).trim());
         }
     }
 
     /** 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 {
+        constructor(tag) {
             this.groupSizes = new Uint32Array(BASE_SIZE);
             this.length = BASE_SIZE;
             this.tag = tag;
             this._cGroup = 0;
             this._cIndex = 0;
         }
-        DefaultGroupedTag.prototype.indexOfGroup = function (group) {
+        indexOfGroup(group) {
             if (group === this._cGroup)
                 return this._cIndex;
-            var index = this._cIndex;
+            let index = this._cIndex;
             if (group > this._cGroup) {
-                for (var i = this._cGroup; i < group; i++) {
+                for (let i = this._cGroup; i < group; i++) {
                     index += this.groupSizes[i];
                 }
             }
             else {
-                for (var i = this._cGroup - 1; i >= group; i--) {
+                for (let i = this._cGroup - 1; i >= group; i--) {
                     index -= this.groupSizes[i];
                 }
             }
             this._cGroup = group;
             this._cIndex = index;
             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);
-            var insertedCount = 0;
-            for (var i = 0, l = rules.length; i < l; i++) {
+            let ruleIndex = this.indexOfGroup(group + 1);
+            let insertedCount = 0;
+            for (let i = 0, l = rules.length; i < l; i++) {
                 if (this.tag.insertRule(ruleIndex, rules[i])) {
                     this.groupSizes[group]++;
                     ruleIndex++;
@@ -215,74 +163,73 @@
             if (insertedCount > 0 && this._cGroup > group) {
                 this._cIndex += insertedCount;
             }
-        };
-        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);
                 }
                 // Keep cache consistent: groups after the cleared group shift backward
-                if (length_1 > 0 && this._cGroup > group) {
-                    this._cIndex -= length_1;
+                if (length > 0 && this._cGroup > group) {
+                    this._cIndex -= length;
                 }
             }
-        };
-        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++) {
+            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 (((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) => {
         // move pointer
         nextFreeGroup = group + 1;
         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-]+)\"\\].*?\"([^\"]*)"));
+    const SELECTOR = `style[${SC_ATTR}][${SC_ATTR_VERSION}="${SC_VERSION}"]`;
+    const MARKER_RE = new RegExp(`^${SC_ATTR}\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)`);
     /**
      * Type guard to check if a node is a ShadowRoot.
      * Uses instanceof when available, with duck-typing fallback for cross-realm scenarios.
      */
-    var isShadowRoot = function (node) {
+    const isShadowRoot = (node) => {
         return ((typeof ShadowRoot !== 'undefined' && node instanceof ShadowRoot) ||
             ('host' in node &&
                 // https://dom.spec.whatwg.org/#dom-node-document_fragment_node
@@ -293,7 +240,7 @@
      * If the target is a ShadowRoot, return it directly.
      * If the target is an HTMLElement, return its root node if it's a ShadowRoot, otherwise return document.
      */
-    var getRehydrationContainer = function (target) {
+    const getRehydrationContainer = (target) => {
         if (!target) {
             return document;
         }
@@ -303,30 +250,30 @@
         }
         // Check if target is an HTMLElement inside a ShadowRoot
         if ('getRootNode' in target) {
-            var root = target.getRootNode();
+            const root = target.getRootNode();
             if (isShadowRoot(root)) {
                 return root;
             }
         }
         return document;
     };
-    var outputSheet = function (sheet) {
-        var tag = sheet.getTag();
-        var length = tag.length;
-        var css = '';
-        var _loop_1 = function (group) {
-            var id = getIdForGroup(group);
+    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);
+                continue;
+            const names = sheet.names.get(id);
             if (names === undefined || !names.size)
-                return "continue";
-            var rules = tag.getGroup(group);
+                continue;
+            const rules = tag.getGroup(group);
             if (rules.length === 0)
-                return "continue";
-            var selector = SC_ATTR + '.g' + group + '[id="' + id + '"]';
-            var content = '';
-            names.forEach(function (name) {
+                continue;
+            const selector = SC_ATTR + '.g' + group + '[id="' + id + '"]';
+            let content = '';
+            names.forEach(name => {
                 if (name.length > 0) {
                     content += name + ',';
                 }
@@ -334,33 +281,30 @@
             // 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;
-        };
-        for (var group = 0; group < length; group++) {
-            _loop_1(group);
         }
         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++) {
             if ((name = names[i])) {
                 sheet.registerName(id, name);
             }
         }
     };
-    var rehydrateSheetFromTag = function (sheet, style) {
+    const rehydrateSheetFromTag = (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 parts = ((_a = style.textContent) !== null && _a !== void 0 ? _a : '').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);
@@ -376,11 +320,11 @@
             }
         }
     };
-    var rehydrateSheet = function (sheet) {
-        var container = getRehydrationContainer(sheet.options.target);
-        var nodes = container.querySelectorAll(SELECTOR);
-        for (var i = 0, l = nodes.length; i < l; i++) {
-            var node = nodes[i];
+    const rehydrateSheet = (sheet) => {
+        const container = getRehydrationContainer(sheet.options.target);
+        const nodes = container.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) {
@@ -399,17 +343,17 @@
      * For Next.js/Remix, pass nonces explicitly via StyleSheetManager or
      * ServerStyleSheet instead—auto-detection doesn't apply to header-based nonces.
      */
-    var cached = false;
+    let cached = false;
     function getNonce() {
         if (cached !== false)
             return cached;
         if (typeof document !== 'undefined') {
             // Vite sets the nonce in the `nonce` attribute. Browsers expose this via
             // the .nonce DOM property but return "" from getAttribute('nonce').
-            var viteMeta = document.head.querySelector('meta[property="csp-nonce"]');
+            const viteMeta = document.head.querySelector('meta[property="csp-nonce"]');
             if (viteMeta)
                 return (cached = viteMeta.nonce || viteMeta.getAttribute('content') || undefined);
-            var scMeta = document.head.querySelector('meta[name="sc-nonce"]');
+            const scMeta = document.head.querySelector('meta[name="sc-nonce"]');
             if (scMeta)
                 return (cached = scMeta.getAttribute('content') || undefined);
         }
@@ -417,27 +361,27 @@
     }
 
     /** Find last style element if any inside target */
-    var findLastStyleTag = function (target) {
-        var arr = Array.from(target.querySelectorAll("style[".concat(SC_ATTR, "]")));
+    const findLastStyleTag = (target) => {
+        const arr = Array.from(target.querySelectorAll(`style[${SC_ATTR}]`));
         return arr[arr.length - 1];
     };
     /** Create a style element inside `target` or <head> after the last */
-    var makeStyleTag = function (target, nonce) {
-        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, nonce) => {
+        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 resolvedNonce = nonce || getNonce();
+        const resolvedNonce = nonce || getNonce();
         if (resolvedNonce)
             style.setAttribute('nonce', resolvedNonce);
         parent.insertBefore(style, nextSibling);
         return style;
     };
     /** Get the CSSStyleSheet instance for a given style element */
-    var getSheet = function (tag) {
+    const getSheet = (tag) => {
         var _a;
         if (tag.sheet) {
             return tag.sheet;
@@ -445,10 +389,10 @@
         // Avoid Firefox quirk where the style element might not have a sheet property.
         // Use the tag's root node to find styleSheets — document.styleSheets doesn't
         // include sheets inside shadow roots.
-        var root = tag.getRootNode();
-        var styleSheets = (_a = root.styleSheets) !== null && _a !== void 0 ? _a : document.styleSheets;
-        for (var i = 0, l = styleSheets.length; i < l; i++) {
-            var sheet = styleSheets[i];
+        const root = tag.getRootNode();
+        const styleSheets = (_a = root.styleSheets) !== null && _a !== void 0 ? _a : document.styleSheets;
+        for (let i = 0, l = styleSheets.length; i < l; i++) {
+            const sheet = styleSheets[i];
             if (sheet.ownerNode === tag) {
                 return sheet;
             }
@@ -457,8 +401,7 @@
     };
 
     /** Create a CSSStyleSheet-like tag depending on the environment */
-    var makeTag = function (_a) {
-        var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target, nonce = _a.nonce;
+    const makeTag = ({ isServer, useCSSOMInjection, target, nonce }) => {
         if (isServer) {
             return new VirtualTag(target);
         }
@@ -469,15 +412,15 @@
             return new TextTag(target, nonce);
         }
     };
-    var CSSOMTag = /** @class */ (function () {
-        function CSSOMTag(target, nonce) {
+    const CSSOMTag = class CSSOMTag {
+        constructor(target, nonce) {
             this.element = makeStyleTag(target, nonce);
             // Avoid Edge bug where empty style elements don't create sheets
             this.element.appendChild(document.createTextNode(''));
             this.sheet = getSheet(this.element);
             this.length = 0;
         }
-        CSSOMTag.prototype.insertRule = function (index, rule) {
+        insertRule(index, rule) {
             try {
                 this.sheet.insertRule(rule, index);
                 this.length++;
@@ -486,13 +429,13 @@
             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 && rule.cssText) {
                 return rule.cssText;
@@ -500,20 +443,19 @@
             else {
                 return '';
             }
-        };
-        return CSSOMTag;
-    }());
+        }
+    };
     /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
-    var TextTag = /** @class */ (function () {
-        function TextTag(target, nonce) {
+    const TextTag = class TextTag {
+        constructor(target, nonce) {
             this.element = makeStyleTag(target, nonce);
             this.nodes = this.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;
@@ -521,28 +463,27 @@
             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 {
+        constructor(_target) {
             this.rules = [];
             this.length = 0;
         }
-        VirtualTag.prototype.insertRule = function (index, rule) {
+        insertRule(index, rule) {
             if (index <= this.length) {
                 if (index === this.length) {
                     this.rules.push(rule);
@@ -556,35 +497,36 @@
             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 = {}; }
-            var _this = this;
-            this.options = __assign(__assign({}, defaultOptions), options);
+    class StyleSheet {
+        /** Register a group ID to give it an index */
+        static registerId(id) {
+            return getGroupForId(id);
+        }
+        constructor(options = EMPTY_OBJECT, globalStyles = {}, names) {
+            this.options = Object.assign(Object.assign({}, defaultOptions), options);
             this.gs = globalStyles;
+            this.keyframeIds = new Set();
             this.names = new Map(names);
             this.server = !!options.isServer;
             // We rehydrate only once and use the sheet that is created first
@@ -592,139 +534,131 @@
                 SHOULD_REHYDRATE = false;
                 rehydrateSheet(this);
             }
-            setToString(this, function () { return outputSheet(_this); });
+            setToString(this, () => outputSheet(this));
         }
-        /** Register a group ID to give it an index */
-        StyleSheet.registerId = function (id) {
-            return getGroupForId(id);
-        };
-        StyleSheet.prototype.rehydrate = function () {
+        rehydrate() {
             if (!this.server && IS_BROWSER) {
                 rehydrateSheet(this);
             }
-        };
-        StyleSheet.prototype.reconstructWithOptions = function (options, withNames) {
-            if (withNames === void 0) { withNames = true; }
-            var newSheet = new StyleSheet(__assign(__assign({}, this.options), options), this.gs, (withNames && this.names) || undefined);
+        }
+        reconstructWithOptions(options, withNames = true) {
+            const newSheet = new StyleSheet(Object.assign(Object.assign({}, this.options), options), this.gs, (withNames && this.names) || undefined);
+            newSheet.keyframeIds = new Set(this.keyframeIds);
             // If we're reconstructing with a new target on the client, check if the container changed
             // This handles the case where StyleSheetManager's target prop changes (e.g., from undefined to shadowRoot)
             // We only rehydrate if the container (Document or ShadowRoot) actually changes
             if (!this.server && IS_BROWSER && options.target !== this.options.target) {
-                var oldContainer = getRehydrationContainer(this.options.target);
-                var newContainer = getRehydrationContainer(options.target);
+                const oldContainer = getRehydrationContainer(this.options.target);
+                const newContainer = getRehydrationContainer(options.target);
                 if (oldContainer !== newContainer) {
                     rehydrateSheet(newSheet);
                 }
             }
             return newSheet;
-        };
-        StyleSheet.prototype.allocateGSInstance = function (id) {
+        }
+        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) {
             var _a, _b;
             return (_b = (_a = this.names.get(id)) === null || _a === void 0 ? void 0 : _a.has(name)) !== null && _b !== void 0 ? _b : false;
-        };
+        }
         /** Mark a group's name as known for caching */
-        StyleSheet.prototype.registerName = function (id, name) {
+        registerName(id, name) {
             getGroupForId(id);
-            var existing = this.names.get(id);
+            if (id.startsWith(KEYFRAMES_ID_PREFIX)) {
+                this.keyframeIds.add(id);
+            }
+            const existing = this.names.get(id);
             if (existing) {
                 existing.add(name);
             }
             else {
                 this.names.set(id, new Set([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;
-        };
-        return StyleSheet;
-    }());
+        }
+    }
 
-    var unitlessKeys = {
-      animationIterationCount: 1,
-      aspectRatio: 1,
-      borderImageOutset: 1,
-      borderImageSlice: 1,
-      borderImageWidth: 1,
-      boxFlex: 1,
-      boxFlexGroup: 1,
-      boxOrdinalGroup: 1,
-      columnCount: 1,
-      columns: 1,
-      flex: 1,
-      flexGrow: 1,
-      flexPositive: 1,
-      flexShrink: 1,
-      flexNegative: 1,
-      flexOrder: 1,
-      gridRow: 1,
-      gridRowEnd: 1,
-      gridRowSpan: 1,
-      gridRowStart: 1,
-      gridColumn: 1,
-      gridColumnEnd: 1,
-      gridColumnSpan: 1,
-      gridColumnStart: 1,
-      msGridRow: 1,
-      msGridRowSpan: 1,
-      msGridColumn: 1,
-      msGridColumnSpan: 1,
-      fontWeight: 1,
-      lineHeight: 1,
-      opacity: 1,
-      order: 1,
-      orphans: 1,
-      scale: 1,
-      tabSize: 1,
-      widows: 1,
-      zIndex: 1,
-      zoom: 1,
-      WebkitLineClamp: 1,
-      // SVG-related properties
-      fillOpacity: 1,
-      floodOpacity: 1,
-      stopOpacity: 1,
-      strokeDasharray: 1,
-      strokeDashoffset: 1,
-      strokeMiterlimit: 1,
-      strokeOpacity: 1,
-      strokeWidth: 1
+    /**
+     * CSS properties that accept unitless numeric values.
+     * Inlined from @emotion/unitless with IE-only entries removed
+     * (boxFlex, boxFlexGroup, boxOrdinalGroup, flexPositive, flexNegative,
+     * flexOrder, msGridRow, msGridRowSpan, msGridColumn, msGridColumnSpan).
+     */
+    const unitless = {
+        animationIterationCount: 1,
+        aspectRatio: 1,
+        borderImageOutset: 1,
+        borderImageSlice: 1,
+        borderImageWidth: 1,
+        columnCount: 1,
+        columns: 1,
+        flex: 1,
+        flexGrow: 1,
+        flexShrink: 1,
+        gridRow: 1,
+        gridRowEnd: 1,
+        gridRowSpan: 1,
+        gridRowStart: 1,
+        gridColumn: 1,
+        gridColumnEnd: 1,
+        gridColumnSpan: 1,
+        gridColumnStart: 1,
+        fontWeight: 1,
+        lineHeight: 1,
+        opacity: 1,
+        order: 1,
+        orphans: 1,
+        scale: 1,
+        tabSize: 1,
+        widows: 1,
+        zIndex: 1,
+        zoom: 1,
+        WebkitLineClamp: 1,
+        fillOpacity: 1,
+        floodOpacity: 1,
+        stopOpacity: 1,
+        strokeDasharray: 1,
+        strokeDashoffset: 1,
+        strokeMiterlimit: 1,
+        strokeOpacity: 1,
+        strokeWidth: 1,
     };
-
     // Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js
     function addUnitIfNeeded(name, value) {
         // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133
         if (value == null || typeof value === 'boolean' || value === '') {
             return '';
         }
-        if (typeof value === 'number' && value !== 0 && !(name in unitlessKeys) && !name.startsWith('--')) {
-            return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
+        if (typeof value === 'number' && value !== 0 && !(name in unitless) && !name.startsWith('--')) {
+            return `${value}px`; // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
         }
         return String(value).trim();
     }
@@ -736,7 +670,7 @@
             'Component');
     }
 
-    var isUpper = function (c) { return c >= 'A' && c <= 'Z'; };
+    const isUpper = (c) => c >= 'A' && c <= 'Z';
     /**
      * Hyphenates a camelcased CSS property name, for example:
      *
@@ -751,9 +685,9 @@
      * is converted to `-ms-`.
      */
     function hyphenateStyleName(string) {
-        var output = '';
-        for (var i = 0; i < string.length; i++) {
-            var c = string[i];
+        let output = '';
+        for (let i = 0; i < string.length; i++) {
+            const c = string[i];
             // Check for CSS variable prefix
             if (i === 1 && c === '-' && string[0] === '-') {
                 return string;
@@ -772,7 +706,7 @@
         return typeof test === 'function';
     }
 
-    var KEYFRAMES_SYMBOL = Symbol.for('sc-keyframes');
+    const KEYFRAMES_SYMBOL = Symbol.for('sc-keyframes');
     function isKeyframes(value) {
         return typeof value === 'object' && value !== null && KEYFRAMES_SYMBOL in value;
     }
@@ -796,30 +730,27 @@
     /**
      * 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) {
-        var rules = [];
-        for (var key in obj) {
-            var val = obj[key];
+    const isFalsish = (chunk) => chunk === undefined || chunk === null || chunk === false || chunk === '';
+    const objToCssArray = (obj) => {
+        const rules = [];
+        for (const key in obj) {
+            const val = obj[key];
             if (!obj.hasOwnProperty(key) || isFalsish(val))
                 continue;
             // @ts-expect-error Property 'isCss' does not exist on type 'any[]'
             if ((Array.isArray(val) && val.isCss) || isFunction(val)) {
-                rules.push("".concat(hyphenateStyleName(key), ":"), val, ';');
+                rules.push(`${hyphenateStyleName(key)}:`, val, ';');
             }
             else if (isPlainObject(val)) {
-                rules.push.apply(rules, __spreadArray(__spreadArray(["".concat(key, " {")], objToCssArray(val), false), ['}'], false));
+                rules.push(`${key} {`, ...objToCssArray(val), '}');
             }
             else {
-                rules.push("".concat(hyphenateStyleName(key), ": ").concat(addUnitIfNeeded(key, val), ";"));
+                rules.push(`${hyphenateStyleName(key)}: ${addUnitIfNeeded(key, val)};`);
             }
         }
         return rules;
     };
-    function flatten(chunk, executionContext, styleSheet, stylisInstance, result) {
-        if (result === void 0) { result = []; }
+    function flatten(chunk, executionContext, styleSheet, stylisInstance, result = []) {
         if (typeof chunk === 'string') {
             if (chunk)
                 result.push(chunk);
@@ -830,19 +761,19 @@
         }
         /* Handle other components */
         if (isStyledComponent(chunk)) {
-            result.push(".".concat(chunk.styledComponentId));
+            result.push(`.${chunk.styledComponentId}`);
             return result;
         }
         /* Either execute or defer the function */
         if (isFunction(chunk)) {
             if (isStatelessFunction(chunk) && executionContext) {
-                var fnResult = chunk(executionContext);
+                const fnResult = chunk(executionContext);
                 if (typeof fnResult === 'object' &&
                     !Array.isArray(fnResult) &&
                     !isKeyframes(fnResult) &&
                     !isPlainObject(fnResult) &&
                     fnResult !== null) {
-                    console.error("".concat(getComponentName(chunk), " 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(`${getComponentName(chunk)} 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(fnResult, executionContext, styleSheet, stylisInstance, result);
             }
@@ -863,8 +794,8 @@
         }
         /* Handle objects */
         if (isPlainObject(chunk)) {
-            var cssArr = objToCssArray(chunk);
-            for (var i = 0; i < cssArr.length; i++)
+            const cssArr = objToCssArray(chunk);
+            for (let i = 0; i < cssArr.length; i++)
                 result.push(cssArr[i]);
             return result;
         }
@@ -872,15 +803,15 @@
             result.push(chunk.toString());
             return result;
         }
-        for (var i = 0; i < chunk.length; i++) {
+        for (let i = 0; i < chunk.length; i++) {
             flatten(chunk[i], executionContext, styleSheet, stylisInstance, result);
         }
         return result;
     }
 
     function isStaticRules(rules) {
-        for (var i = 0; i < rules.length; i += 1) {
-            var rule = rules[i];
+        for (let i = 0; i < rules.length; i += 1) {
+            const rule = rules[i];
             if (isFunction(rule) && !isStyledComponent(rule)) {
                 // functions are allowed to be static if they're just being
                 // used to get the classname of a nested styled component
@@ -894,14 +825,14 @@
      * Convenience function for joining strings to form className chains
      */
     function joinStrings(a, b) {
-        return a && b ? "".concat(a, " ").concat(b) : a || b || '';
+        return a && b ? `${a} ${b}` : a || b || '';
     }
     function joinStringArray(arr, sep) {
         return arr.join(sep || '');
     }
 
-    var GlobalStyle = /** @class */ (function () {
-        function GlobalStyle(rules, componentId) {
+    class GlobalStyle {
+        constructor(rules, componentId) {
             /** @internal Per-instance rule cache for shared-group rebuild. */
             this.instanceRules = new Map();
             this.rules = rules;
@@ -911,15 +842,15 @@
             // components always appear before them in the stylesheet.
             StyleSheet.registerId(this.componentId);
         }
-        GlobalStyle.prototype.removeStyles = function (instance, styleSheet) {
+        removeStyles(instance, styleSheet) {
             this.instanceRules.delete(instance);
             this.rebuildGroup(styleSheet);
-        };
-        GlobalStyle.prototype.renderStyles = function (instance, executionContext, styleSheet, stylis) {
-            var id = this.componentId;
+        }
+        renderStyles(instance, executionContext, styleSheet, stylis) {
+            const id = this.componentId;
             if (this.isStatic) {
                 if (!styleSheet.hasNameForId(id, id + instance)) {
-                    var entry = this.computeRules(instance, executionContext, styleSheet, stylis);
+                    const entry = this.computeRules(instance, executionContext, styleSheet, stylis);
                     styleSheet.insertRules(id, entry.name, entry.rules);
                 }
                 else if (!this.instanceRules.has(instance)) {
@@ -932,14 +863,14 @@
             // Compute new rules; skip CSSOM rebuild if CSS is unchanged.
             // The fast-path is only safe on the client where the tag persists between renders.
             // During SSR, clearTag() destroys the tag between requests, so we must always rebuild.
-            var prev = this.instanceRules.get(instance);
+            const prev = this.instanceRules.get(instance);
             this.computeRules(instance, executionContext, styleSheet, stylis);
             if (!styleSheet.server && prev) {
-                var a = prev.rules;
-                var b = this.instanceRules.get(instance).rules;
+                const a = prev.rules;
+                const b = this.instanceRules.get(instance).rules;
                 if (a.length === b.length) {
-                    var same = true;
-                    for (var i = 0; i < a.length; i++) {
+                    let same = true;
+                    for (let i = 0; i < a.length; i++) {
                         if (a[i] !== b[i]) {
                             same = false;
                             break;
@@ -950,61 +881,60 @@
                 }
             }
             this.rebuildGroup(styleSheet);
-        };
-        GlobalStyle.prototype.computeRules = function (instance, executionContext, styleSheet, stylis) {
-            var flatCSS = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
-            var entry = {
+        }
+        computeRules(instance, executionContext, styleSheet, stylis) {
+            const flatCSS = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
+            const entry = {
                 name: this.componentId + instance,
                 rules: stylis(flatCSS, ''),
             };
             this.instanceRules.set(instance, entry);
             return entry;
-        };
+        }
         /**
          * Clear all CSS rules in the shared group and re-insert from surviving instances.
          * Must run synchronously — no yielding between clear and re-insert.
          */
-        GlobalStyle.prototype.rebuildGroup = function (styleSheet) {
-            var id = this.componentId;
+        rebuildGroup(styleSheet) {
+            const id = this.componentId;
             styleSheet.clearRules(id);
-            this.instanceRules.forEach(function (entry) {
+            this.instanceRules.forEach(entry => {
                 styleSheet.insertRules(id, entry.name, entry.rules);
             });
-        };
-        return GlobalStyle;
-    }());
+        }
+    }
 
     var e="-ms-";var r="-moz-";var a="-webkit-";var c="comm";var n="rule";var s="decl";var i="@import";var v="@namespace";var b="@keyframes";var g="@layer";var $=Math.abs;var m=String.fromCharCode;var x=Object.assign;function y(e,r){return A(e,0)^45?(((r<<2^A(e,0))<<2^A(e,1))<<2^A(e,2))<<2^A(e,3):0}function j(e){return e.trim()}function z(e,r){return (e=r.exec(e))?e[0]:e}function C(e,r,a){return e.replace(r,a)}function O(e,r,a){return e.indexOf(r,a)}function A(e,r){return e.charCodeAt(r)|0}function M(e,r,a){return e.slice(r,a)}function S(e){return e.length}function q(e){return e.length}function B(e,r){return r.push(e),e}function D(e,r){return e.map(r).join("")}function E(e,r){return e.filter((function(e){return !z(e,r)}))}var F=1;var G=1;var H=0;var I=0;var J=0;var K="";function L(e,r,a,c,n,s,t,u){return {value:e,root:r,parent:a,type:c,props:n,children:s,line:F,column:G,length:t,return:"",siblings:u}}function N(e,r){return x(L("",null,null,"",null,null,0,e.siblings),e,{length:-e.length},r)}function P(e){while(e.root)e=N(e.root,{children:[e]});B(e,e.siblings);}function Q(){return J}function R(){J=I>0?A(K,--I):0;if(G--,J===10)G=1,F--;return J}function T(){J=I<H?A(K,I++):0;if(G++,J===10)G=1,F++;return J}function U(){return A(K,I)}function V(){return I}function W(e,r){return M(K,e,r)}function X(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function Y(e){return F=G=1,H=S(K=e),I=0,[]}function Z(e){return K="",e}function _(e){return j(W(I-1,ne(e===91?e+2:e===40?e+1:e)))}function re(e){while(J=U())if(J<33)T();else break;return X(e)>2||X(J)>3?"":" "}function ce(e,r){while(--r&&T())if(J<48||J>102||J>57&&J<65||J>70&&J<97)break;return W(e,V()+(r<6&&U()==32&&T()==32))}function ne(e){while(T())switch(J){case e:return I;case 34:case 39:if(e!==34&&e!==39)ne(J);break;case 40:if(e===41)ne(e);break;case 92:T();break}return I}function se(e,r){while(T())if(e+J===47+10)break;else if(e+J===42+42&&U()===47)break;return "/*"+W(r,I-1)+"*"+m(e===47?e:T())}function te(e){while(!X(U()))T();return W(e,I)}function ue(e){return Z(ie("",null,null,null,[""],e=Y(e),0,[0],e))}function ie(e,r,a,c,n,s,t,u,i){var f=0;var o=0;var l=t;var p=0;var v=0;var b=0;var h=1;var w=1;var d=1;var g=0;var k="";var x=n;var y=s;var j=c;var z=k;while(w)switch(b=g,g=T()){case 40:if(b!=108&&A(z,l-1)==58){if(O(z+=C(_(g),"&","&\f"),"&\f",$(f?u[f-1]:0))!=-1)d=-1;break}case 34:case 39:case 91:z+=_(g);break;case 9:case 10:case 13:case 32:z+=re(b);break;case 92:z+=ce(V()-1,7);continue;case 47:switch(U()){case 42:case 47:B(oe(se(T(),V()),r,a,i),i);if((X(b||1)==5||X(U()||1)==5)&&S(z)&&M(z,-1,void 0)!==" ")z+=" ";break;default:z+="/";}break;case 123*h:u[f++]=S(z)*d;case 125*h:case 59:case 0:switch(g){case 0:case 125:w=0;case 59+o:if(d==-1)z=C(z,/\f/g,"");if(v>0&&(S(z)-l||h===0&&b===47))B(v>32?le(z+";",c,a,l-1,i):le(C(z," ","")+";",c,a,l-2,i),i);break;case 59:z+=";";default:B(j=fe(z,r,a,f,o,n,u,k,x=[],y=[],l,s),s);if(g===123)if(o===0)ie(z,r,j,j,x,s,l,u,y);else {switch(p){case 99:if(A(z,3)===110)break;case 108:if(A(z,2)===97)break;default:o=0;case 100:case 109:case 115:}if(o)ie(e,j,j,c&&B(fe(e,j,j,0,0,n,u,k,n,x=[],l,y),y),n,y,l,u,c?x:y);else ie(z,j,j,j,[""],y,0,u,y);}}f=o=v=0,h=d=1,k=z="",l=t;break;case 58:l=1+S(z),v=b;default:if(h<1)if(g==123)--h;else if(g==125&&h++==0&&R()==125)continue;switch(z+=m(g),g*h){case 38:d=o>0?1:(z+="\f",-1);break;case 44:u[f++]=(S(z)-1)*d,d=1;break;case 64:if(U()===45)z+=_(T());p=U(),o=l=S(k=z+=te(V())),g++;break;case 45:if(b===45&&S(z)==2)h=0;}}return s}function fe(e,r,a,c,s,t,u,i,f,o,l,p){var v=s-1;var b=s===0?t:[""];var h=q(b);for(var w=0,d=0,g=0;w<c;++w)for(var k=0,m=M(e,v+1,v=$(d=u[w])),x=e;k<h;++k)if(x=j(d>0?b[k]+" "+m:C(m,/&\f/g,b[k])))f[g++]=x;return L(e,r,a,s===0?n:i,f,o,l,p)}function oe(e,r,a,n){return L(e,r,a,c,m(Q()),M(e,2,-2),0,n)}function le(e,r,a,c,n){return L(e,r,a,s,M(e,0,c),M(e,c+1,-1),c,n)}function pe(c,n,s){switch(y(c,n)){case 5103:return a+"print-"+c+c;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:case 6391:case 5879:case 5623:case 6135:case 4599:return a+c+c;case 4855:return a+c.replace("add","source-over").replace("substract","source-out").replace("intersect","source-in").replace("exclude","xor")+c;case 4789:return r+c+c;case 5349:case 4246:case 4810:case 6968:case 2756:return a+c+r+c+e+c+c;case 5936:switch(A(c,n+11)){case 114:return a+c+e+C(c,/[svh]\w+-[tblr]{2}/,"tb")+c;case 108:return a+c+e+C(c,/[svh]\w+-[tblr]{2}/,"tb-rl")+c;case 45:return a+c+e+C(c,/[svh]\w+-[tblr]{2}/,"lr")+c}case 6828:case 4268:case 2903:return a+c+e+c+c;case 6165:return a+c+e+"flex-"+c+c;case 5187:return a+c+C(c,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+c;case 5443:return a+c+e+"flex-item-"+C(c,/flex-|-self/g,"")+(!z(c,/flex-|baseline/)?e+"grid-row-"+C(c,/flex-|-self/g,""):"")+c;case 4675:return a+c+e+"flex-line-pack"+C(c,/align-content|flex-|-self/g,"")+c;case 5548:return a+c+e+C(c,"shrink","negative")+c;case 5292:return a+c+e+C(c,"basis","preferred-size")+c;case 6060:return a+"box-"+C(c,"-grow","")+a+c+e+C(c,"grow","positive")+c;case 4554:return a+C(c,/([^-])(transform)/g,"$1"+a+"$2")+c;case 6187:return C(C(C(c,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),c,"")+c;case 5495:case 3959:return C(c,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return C(C(c,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/space-between/,"justify")+a+c+c;case 4200:if(!z(c,/flex-|baseline/))return e+"grid-column-align"+M(c,n)+c;break;case 2592:case 3360:return e+C(c,"template-","")+c;case 4384:case 3616:if(s&&s.some((function(e,r){return n=r,z(e.props,/grid-\w+-end/)}))){return ~O(c+(s=s[n].value),"span",0)?c:e+C(c,"-start","")+c+e+"grid-row-span:"+(~O(s,"span",0)?z(s,/\d+/):+z(s,/\d+/)-+z(c,/\d+/))+";"}return e+C(c,"-start","")+c;case 4896:case 4128:return s&&s.some((function(e){return z(e.props,/grid-\w+-start/)}))?c:e+C(C(c,"-end","-span"),"span ","")+c;case 4095:case 3583:case 4068:case 2532:return C(c,/(.+)-inline(.+)/,a+"$1$2")+c;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(S(c)-1-n>6)switch(A(c,n+1)){case 109:if(A(c,n+4)!==45)break;case 102:return C(c,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(A(c,n+3)==108?"$3":"$2-$3"))+c;case 115:return ~O(c,"stretch",0)?pe(C(c,"stretch","fill-available"),n,s)+c:c}break;case 5152:case 5920:return C(c,/(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/,(function(r,a,n,s,t,u,i){return e+a+":"+n+i+(s?e+a+"-span:"+(t?u:+u-+n)+i:"")+c}));case 4949:if(A(c,n+6)===121)return C(c,":",":"+a)+c;break;case 6444:switch(A(c,A(c,14)===45?18:11)){case 120:return C(c,/(.+:)([^;\s!]+)(;|(\s+)?!.+)?/,"$1"+a+(A(c,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+c;case 100:return C(c,":",":"+e)+c}break;case 5719:case 2647:case 2135:case 3927:case 2391:return C(c,"scroll-","scroll-snap-")+c}return c}function ve(e,r){var a="";for(var c=0;c<e.length;c++)a+=r(e[c],c,e,r)||"";return a}function be(e,r,a,t){switch(e.type){case g:if(e.children.length)break;case i:case v:case s:return e.return=e.return||e.value;case c:return "";case b:return e.return=e.value+"{"+ve(e.children,t)+"}";case n:if(!S(e.value=e.props.join(",")))return ""}return S(a=ve(e.children,t))?e.return=e.value+"{"+a+"}":""}function he(e){var r=q(e);return function(a,c,n,s){var t="";for(var u=0;u<r;u++)t+=e[u](a,c,n,s)||"";return t}}function we(e){return function(r){if(!r.root)if(r=r.return)e(r);}}function de(c,t,u,i){if(c.length>-1)if(!c.return)switch(c.type){case s:c.return=pe(c.value,c.length,u);return;case b:return ve([N(c,{value:C(c.value,"@","@"+a)})],i);case n:if(c.length)return D(u=c.props,(function(n){switch(z(n,i=/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":P(N(c,{props:[C(n,/:(read-\w+)/,":"+r+"$1")]}));P(N(c,{props:[n]}));x(c,{props:E(u,i)});break;case"::placeholder":P(N(c,{props:[C(n,/:(plac\w+)/,":"+a+"input-$1")]}));P(N(c,{props:[C(n,/:(plac\w+)/,":"+r+"$1")]}));P(N(c,{props:[C(n,/:(plac\w+)/,e+"input-$1")]}));P(N(c,{props:[n]}));x(c,{props:E(u,i)});break}return ""}))}}
 
-    var SEED$1 = 5381;
+    const SEED$1 = 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$1, x);
     };
 
-    var AMP_REGEX = /&/g;
+    const AMP_REGEX = /&/g;
     // Character codes for fast comparison
-    var DOUBLE_QUOTE = 34; // "
-    var SINGLE_QUOTE = 39; // '
-    var SLASH = 47; // /
-    var ASTERISK = 42; // *
-    var BACKSLASH = 92; // \
-    var OPEN_BRACE = 123; // {
-    var CLOSE_BRACE = 125; // }
-    var SEMICOLON = 59; // ;
-    var NEWLINE = 10; // \n
-    var OPEN_PAREN = 40; // (
-    var CLOSE_PAREN = 41; // )
+    const DOUBLE_QUOTE = 34; // "
+    const SINGLE_QUOTE = 39; // '
+    const SLASH = 47; // /
+    const ASTERISK = 42; // *
+    const BACKSLASH = 92; // \
+    const OPEN_BRACE = 123; // {
+    const CLOSE_BRACE = 125; // }
+    const SEMICOLON = 59; // ;
+    const NEWLINE = 10; // \n
+    const OPEN_PAREN = 40; // (
+    const CLOSE_PAREN = 41; // )
     /**
      * Strips JS-style line comments (//) from CSS, handling comments anywhere
      * in the line while preserving strings, url() contents, and valid CSS.
@@ -1014,14 +944,14 @@
         // Fast path: no // means no line comments
         if (css.indexOf('//') === -1)
             return css;
-        var len = css.length;
-        var parts = [];
-        var start = 0;
-        var i = 0;
-        var inString = 0; // 0 = none, DOUBLE_QUOTE or SINGLE_QUOTE when in string
-        var urlDepth = 0; // Track nesting depth inside url()
+        const len = css.length;
+        const parts = [];
+        let start = 0;
+        let i = 0;
+        let inString = 0; // 0 = none, DOUBLE_QUOTE or SINGLE_QUOTE when in string
+        let urlDepth = 0; // Track nesting depth inside url()
         while (i < len) {
-            var code = css.charCodeAt(i);
+            const code = css.charCodeAt(i);
             // Track string state
             if ((code === DOUBLE_QUOTE || code === SINGLE_QUOTE) &&
                 (i === 0 || css.charCodeAt(i - 1) !== BACKSLASH)) {
@@ -1105,12 +1035,12 @@
         // Fast path: no closing brace means can't have unbalanced braces
         if (css.indexOf('}') === -1)
             return false;
-        var len = css.length;
-        var depth = 0;
-        var inString = 0; // 0 = none, char code when in string
-        var inComment = false;
-        for (var i = 0; i < len; i++) {
-            var code = css.charCodeAt(i);
+        const len = css.length;
+        let depth = 0;
+        let inString = 0; // 0 = none, char code when in string
+        let inComment = false;
+        for (let i = 0; i < len; i++) {
+            const code = css.charCodeAt(i);
             // Handle CSS comments
             if (inString === 0 && !inComment && code === SLASH && css.charCodeAt(i + 1) === ASTERISK) {
                 inComment = true;
@@ -1159,14 +1089,14 @@
         if (!hasUnbalancedBraces(css)) {
             return css;
         }
-        var len = css.length;
-        var result = '';
-        var declStart = 0;
-        var braceDepth = 0;
-        var inString = 0;
-        var inComment = false;
-        for (var i = 0; i < len; i++) {
-            var code = css.charCodeAt(i);
+        const len = css.length;
+        let result = '';
+        let declStart = 0;
+        let braceDepth = 0;
+        let inString = 0;
+        let inComment = false;
+        for (let i = 0; i < len; i++) {
+            const code = css.charCodeAt(i);
             // Handle CSS comments
             if (inString === 0 && !inComment && code === SLASH && css.charCodeAt(i + 1) === ASTERISK) {
                 inComment = true;
@@ -1200,9 +1130,9 @@
                 braceDepth--;
                 if (braceDepth < 0) {
                     // Extra closing brace - skip to next semicolon or newline
-                    var skipEnd = i + 1;
+                    let skipEnd = i + 1;
                     while (skipEnd < len) {
-                        var skipCode = css.charCodeAt(skipEnd);
+                        const skipCode = css.charCodeAt(skipEnd);
                         if (skipCode === SEMICOLON || skipCode === NEWLINE)
                             break;
                         skipEnd++;
@@ -1226,7 +1156,7 @@
         }
         // Add remaining valid content
         if (declStart < len) {
-            var remaining = css.substring(declStart);
+            const remaining = css.substring(declStart);
             if (!hasUnbalancedBraces(remaining)) {
                 result += remaining;
             }
@@ -1238,14 +1168,14 @@
      * Takes into account media queries by recursing through child rules if they are present.
      */
     function recursivelySetNamepace(compiled, namespace) {
-        return compiled.map(function (rule) {
+        return compiled.map(rule => {
             if (rule.type === 'rule') {
                 // add the namespace to the start
-                rule.value = "".concat(namespace, " ").concat(rule.value);
+                rule.value = `${namespace} ${rule.value}`;
                 // add the namespace after each comma for subsequent selectors.
-                rule.value = rule.value.replaceAll(',', ",".concat(namespace, " "));
-                rule.props = rule.props.map(function (prop) {
-                    return "".concat(namespace, " ").concat(prop);
+                rule.value = rule.value.replaceAll(',', `,${namespace} `);
+                rule.props = rule.props.map(prop => {
+                    return `${namespace} ${prop}`;
                 });
             }
             if (Array.isArray(rule.children) && rule.type !== '@keyframes') {
@@ -1254,12 +1184,11 @@
             return rule;
         });
     }
-    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 selfReferenceReplacer = function (match, offset, string) {
+    function createStylisInstance({ options = EMPTY_OBJECT, plugins = EMPTY_ARRAY, } = EMPTY_OBJECT) {
+        let _componentId;
+        let _selector;
+        let _selectorRegexp;
+        const selfReferenceReplacer = (match, offset, string) => {
             if (
             /**
              * We only want to refer to the static class directly if the selector is part of a
@@ -1268,7 +1197,7 @@
             string.startsWith(_selector) &&
                 string.endsWith(_selector) &&
                 string.replaceAll(_selector, '').length > 0) {
-                return ".".concat(_componentId);
+                return `.${_componentId}`;
             }
             return match;
         };
@@ -1284,11 +1213,11 @@
          *
          * https://github.com/thysultan/stylis.js/tree/v4.0.2#abstract-syntax-structure
          */
-        var selfReferenceReplacementPlugin = function (element) {
+        const selfReferenceReplacementPlugin = element => {
             if (element.type === n && element.value.includes('&')) {
                 // Lazy RegExp creation: only allocate when self-reference pattern is actually used
                 if (!_selectorRegexp) {
-                    _selectorRegexp = new RegExp("\\".concat(_selector, "\\b"), 'g');
+                    _selectorRegexp = new RegExp(`\\${_selector}\\b`, 'g');
                 }
                 element.props[0] = element.props[0]
                     // catch any hanging references that stylis missed
@@ -1296,7 +1225,7 @@
                     .replace(_selectorRegexp, selfReferenceReplacer);
             }
         };
-        var middlewares = plugins.slice();
+        const middlewares = plugins.slice();
         middlewares.push(selfReferenceReplacementPlugin);
         /**
          * Enables automatic vendor-prefixing for styles.
@@ -1308,24 +1237,21 @@
         // Pre-build the middleware chain once to avoid allocating closures,
         // arrays, and middleware wrappers on every stringifyRules call.
         // Safe because JS is single-threaded and _stack is consumed before next call.
-        var _stack = [];
-        var _middleware = he(middlewares.concat(we(function (value) { return _stack.push(value); })));
-        var stringifyRules = function (css, selector, 
+        let _stack = [];
+        const _middleware = he(middlewares.concat(we(value => _stack.push(value))));
+        const stringifyRules = (css, selector = '', 
         /**
          * This "prefix" referes to a _selector_ prefix.
          */
-        prefix, componentId) {
-            if (selector === void 0) { selector = ''; }
-            if (prefix === void 0) { prefix = ''; }
-            if (componentId === void 0) { componentId = '&'; }
+        prefix = '', componentId = '&') => {
             // 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 = undefined; // Reset for lazy creation per call
-            var flatCSS = sanitizeCSS(stripLineComments(css));
-            var compiled = ue(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS);
+            const flatCSS = sanitizeCSS(stripLineComments(css));
+            let compiled = ue(prefix || selector ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS);
             if (options.namespace) {
                 compiled = recursivelySetNamepace(compiled, options.namespace);
             }
@@ -1335,7 +1261,7 @@
         };
         stringifyRules.hash = plugins.length
             ? plugins
-                .reduce(function (acc, plugin) {
+                .reduce((acc, plugin) => {
                 if (!plugin.name) {
                     throwStyledComponentsError(15);
                 }
@@ -1346,18 +1272,18 @@
         return stringifyRules;
     }
 
-    var mainSheet = new StyleSheet();
-    var mainStylis = createStylisInstance();
-    var defaultContextValue = {
+    const mainSheet = new StyleSheet();
+    const mainStylis = createStylisInstance();
+    const defaultContextValue = {
         shouldForwardProp: undefined,
         styleSheet: mainSheet,
         stylis: mainStylis,
     };
     // Create context only if createContext is available, otherwise create a fallback
-    var StyleSheetContext = React.createContext(defaultContextValue)
+    const StyleSheetContext = React.createContext(defaultContextValue)
         ;
-    var StyleSheetConsumer = StyleSheetContext.Consumer;
-    var StylisContext = React.createContext(undefined)
+    const StyleSheetConsumer = StyleSheetContext.Consumer;
+    const StylisContext = React.createContext(undefined)
         ;
     function useStyleSheetContext() {
         // Skip useContext if we're in an RSC environment without context support
@@ -1368,9 +1294,9 @@
         if (!React.useMemo) {
             return props.children;
         }
-        var styleSheet = useStyleSheetContext().styleSheet;
-        var resolvedStyleSheet = React.useMemo(function () {
-            var sheet = styleSheet;
+        const { styleSheet } = useStyleSheetContext();
+        const resolvedStyleSheet = React.useMemo(() => {
+            let sheet = styleSheet;
             if (props.sheet) {
                 sheet = props.sheet;
             }
@@ -1385,32 +1311,30 @@
             }
             return sheet;
         }, [props.disableCSSOMInjection, props.nonce, props.sheet, props.target, styleSheet]);
-        var stylis = React.useMemo(function () {
-            return createStylisInstance({
-                options: { namespace: props.namespace, prefix: props.enableVendorPrefixes },
-                plugins: props.stylisPlugins,
-            });
-        }, [props.enableVendorPrefixes, props.namespace, props.stylisPlugins]);
-        var styleSheetContextValue = React.useMemo(function () { return ({
+        const stylis = React.useMemo(() => createStylisInstance({
+            options: { namespace: props.namespace, prefix: props.enableVendorPrefixes },
+            plugins: props.stylisPlugins,
+        }), [props.enableVendorPrefixes, props.namespace, props.stylisPlugins]);
+        const styleSheetContextValue = React.useMemo(() => ({
             shouldForwardProp: props.shouldForwardProp,
             styleSheet: resolvedStyleSheet,
-            stylis: stylis,
-        }); }, [props.shouldForwardProp, resolvedStyleSheet, stylis]);
+            stylis,
+        }), [props.shouldForwardProp, resolvedStyleSheet, stylis]);
         return (React.createElement(StyleSheetContext.Provider, { value: styleSheetContextValue },
             React.createElement(StylisContext.Provider, { value: stylis }, props.children)));
     }
 
     // Create context only if createContext is available, otherwise create a fallback
-    var ThemeContext = React.createContext(undefined)
+    const ThemeContext = React.createContext(undefined)
         ;
-    var ThemeConsumer = ThemeContext.Consumer;
+    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 ((mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')) {
                 throw throwStyledComponentsError(7);
             }
@@ -1419,7 +1343,7 @@
         if (Array.isArray(theme) || typeof theme !== 'object') {
             throw throwStyledComponentsError(8);
         }
-        return outerTheme ? __assign(__assign({}, outerTheme), theme) : theme;
+        return outerTheme ? Object.assign(Object.assign({}, outerTheme), theme) : theme;
     }
     /**
      * Returns the current theme (as provided by the closest ancestor `ThemeProvider`.)
@@ -1430,7 +1354,7 @@
      */
     function useTheme() {
         // Skip useContext if we're in an RSC environment without context support
-        var theme = React.useContext(ThemeContext) ;
+        const theme = React.useContext(ThemeContext) ;
         if (!theme) {
             throw throwStyledComponentsError(18);
         }
@@ -1440,43 +1364,39 @@
      * Provide a theme to an entire react component tree via context
      */
     function ThemeProvider(props) {
-        var outerTheme = React.useContext(ThemeContext);
-        var themeContext = React.useMemo(function () { return mergeTheme(props.theme, outerTheme); }, [props.theme, outerTheme]);
+        const outerTheme = React.useContext(ThemeContext);
+        const themeContext = React.useMemo(() => mergeTheme(props.theme, outerTheme), [props.theme, outerTheme]);
         if (!props.children) {
             return null;
         }
         return React.createElement(ThemeContext.Provider, { value: themeContext }, props.children);
     }
 
-    var invalidHookCallRe = /invalid hook call/i;
-    var seen = new Set();
-    var checkDynamicCreation = function (displayName, componentId) {
+    const invalidHookCallRe = /invalid hook call/i;
+    const seen = new Set();
+    const checkDynamicCreation = (displayName, componentId) => {
         {
-            var parsedIdString = componentId ? " with the id of \"".concat(componentId, "\"") : '';
-            var message_1 = "The component ".concat(displayName).concat(parsedIdString, " has been created dynamically.\n") +
+            const parsedIdString = componentId ? ` with the id of "${componentId}"` : '';
+            const message = `The component ${displayName}${parsedIdString} has been created dynamically.\n` +
                 "You may see this warning because you've called styled inside another component.\n" +
                 'To resolve this only create new StyledComponents outside of any render method and function component.\n' +
                 'See https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n';
             // If a hook is called outside of a component:
             // React 17 and earlier throw an error
             // React 18 and above use console.error
-            var originalConsoleError_1 = console.error;
+            const originalConsoleError = console.error;
             try {
-                var didNotCallInvalidHook_1 = true;
-                console.error = function (consoleErrorMessage) {
-                    var consoleErrorArgs = [];
-                    for (var _i = 1; _i < arguments.length; _i++) {
-                        consoleErrorArgs[_i - 1] = arguments[_i];
-                    }
+                let didNotCallInvalidHook = true;
+                console.error = (consoleErrorMessage, ...consoleErrorArgs) => {
                     // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to
                     // be called outside of a React component.
                     if (invalidHookCallRe.test(consoleErrorMessage)) {
-                        didNotCallInvalidHook_1 = false;
+                        didNotCallInvalidHook = false;
                         // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
-                        seen.delete(message_1);
+                        seen.delete(message);
                     }
                     else {
-                        originalConsoleError_1.apply(void 0, __spreadArray([consoleErrorMessage], consoleErrorArgs, false));
+                        originalConsoleError(consoleErrorMessage, ...consoleErrorArgs);
                     }
                 };
                 // We purposefully call a hook outside of a component and expect it to throw
@@ -1485,9 +1405,9 @@
                 if (typeof React.useState === 'function') {
                     React.useState(null);
                 }
-                if (didNotCallInvalidHook_1 && !seen.has(message_1)) {
-                    console.warn(message_1);
-                    seen.add(message_1);
+                if (didNotCallInvalidHook && !seen.has(message)) {
+                    console.warn(message);
+                    seen.add(message);
                 }
             }
             catch (error) {
@@ -1495,30 +1415,29 @@
                 // be called outside of a React component.
                 if (invalidHookCallRe.test(error.message)) {
                     // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
-                    seen.delete(message_1);
+                    seen.delete(message);
                 }
             }
             finally {
-                console.error = originalConsoleError_1;
+                console.error = originalConsoleError;
             }
         }
     };
 
-    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 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;
@@ -1531,8 +1450,8 @@
     }
 
     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;
@@ -1542,21 +1461,16 @@
      * Used when flattening object styles to determine if we should
      * expand an array of styles.
      */
-    var addTag = function (arg) {
-        return Object.assign(arg, { isCss: true });
-    };
-    function css(styles) {
-        var interpolations = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            interpolations[_i - 1] = arguments[_i];
-        }
+    const addTag = (arg) => Object.assign(arg, { isCss: true });
+    function css(styles, ...interpolations) {
         if (isFunction(styles) || isPlainObject(styles)) {
-            var styleFunctionOrObject = styles;
-            return addTag(flatten(interleave(EMPTY_ARRAY, __spreadArray([
-                styleFunctionOrObject
-            ], interpolations, true))));
+            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') {
@@ -1565,28 +1479,24 @@
         return addTag(flatten(interleave(styleStringArray, interpolations)));
     }
 
-    function createGlobalStyle(strings) {
-        var interpolations = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            interpolations[_i - 1] = arguments[_i];
-        }
-        var rules = css.apply(void 0, __spreadArray([strings], interpolations, false));
-        var styledComponentId = "sc-global-".concat(generateComponentId(JSON.stringify(rules)));
-        var globalStyle = new GlobalStyle(rules, styledComponentId);
+    function createGlobalStyle(strings, ...interpolations) {
+        const rules = css(strings, ...interpolations);
+        const styledComponentId = `sc-global-${generateComponentId(JSON.stringify(rules))}`;
+        const globalStyle = new GlobalStyle(rules, styledComponentId);
         {
             checkDynamicCreation(styledComponentId);
         }
-        var GlobalStyleComponent = function (props) {
-            var ssc = useStyleSheetContext();
-            var theme = React.useContext(ThemeContext) ;
+        const GlobalStyleComponent = props => {
+            const ssc = useStyleSheetContext();
+            const theme = React.useContext(ThemeContext) ;
             // Each mount needs a unique instance ID for the shared-group instanceRules cache.
             // false is a build-time constant: the dead branch is entirely eliminated,
             // so React never sees a conditional hook call.
             // Server bundle: direct allocation (one-shot renders, no stability needed).
             // Browser bundle: useRef for stable ID across re-renders + useLayoutEffect cleanup.
-            var instance;
+            let instance;
             {
-                var instanceRef = React.useRef(null);
+                const instanceRef = React.useRef(null);
                 if (instanceRef.current === null) {
                     instanceRef.current = ssc.styleSheet.allocateGSInstance(styledComponentId);
                 }
@@ -1594,29 +1504,42 @@
             }
             if (// @ts-expect-error invariant check
                 React.Children.count(props.children)) {
-                console.warn("The global style component ".concat(styledComponentId, " was given child JSX. createGlobalStyle does not render children."));
-            }
-            if (rules.some(function (rule) { return typeof rule === 'string' && rule.indexOf('@import') !== -1; })) {
-                console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.");
-            }
-            // Render styles during component execution for server environments.
-            // Uses false (build-time constant) OR styleSheet.server (runtime flag set by
-            // ServerStyleSheet) because some bundlers (Turbopack) resolve the browser entry
-            // for SSR of client components, making false false on the server.
+                console.warn(`The global style component ${styledComponentId} was given child JSX. createGlobalStyle does not render children.`);
+            }
+            if (rules.some(rule => typeof rule === 'string' && rule.indexOf('@import') !== -1)) {
+                console.warn(`Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.`);
+            }
+            // Render styles during component execution for RSC or explicit ServerStyleSheet.
+            // Gate on IS_RSC or styleSheet.server (runtime flag from ServerStyleSheet),
+            // NOT on false alone. The server build sets false=true and eliminates
+            // useLayoutEffect, so if we rendered here without cleanup, styles would
+            // accumulate unboundedly in jsdom test environments (O(n²) regression).
+            // On a real server without ServerStyleSheet, VirtualTag is used and styles are
+            // discarded anyway, so skipping this path has no functional impact.
+            // Turbopack resolves the browser entry for SSR, so false is false there;
+            // styleSheet.server handles that case at runtime.
             if (ssc.styleSheet.server) {
                 renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
             }
             // Client-side lifecycle: render styles in effect and clean up on unmount.
             // false and IS_RSC are build/module-level constants, so this doesn't violate rules of hooks.
             {
-                React.useLayoutEffect(function () {
+                // For static global styles, renderStyles exits early after the first injection
+                // (via hasNameForId check in GlobalStyle.renderStyles). We still need the effect
+                // for initial injection and unmount cleanup, but we use a narrow deps array
+                // to avoid unnecessary effect re-runs on every render.
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                const effectDeps = globalStyle.isStatic
+                    ? [instance, ssc.styleSheet]
+                    : [instance, props, ssc.styleSheet, theme, ssc.stylis];
+                React.useLayoutEffect(() => {
                     if (!ssc.styleSheet.server) {
                         renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
                     }
-                    return function () {
+                    return () => {
                         globalStyle.removeStyles(instance, ssc.styleSheet);
                     };
-                }, [instance, props, ssc.styleSheet, theme, ssc.stylis]);
+                }, effectDeps);
             }
             // Clean up server instance cache — no useLayoutEffect cleanup runs on the
             // server, so instanceRules would grow unboundedly across SSR requests.
@@ -1630,82 +1553,190 @@
                 globalStyle.renderStyles(instance, STATIC_EXECUTION_CONTEXT, styleSheet, stylis);
             }
             else {
-                var context = __assign(__assign({}, props), { theme: determineTheme(props, theme, GlobalStyleComponent.defaultProps) });
+                const context = Object.assign(Object.assign({}, props), { theme: determineTheme(props, theme, GlobalStyleComponent.defaultProps) });
                 globalStyle.renderStyles(instance, context, styleSheet, stylis);
             }
         }
         return React.memo(GlobalStyleComponent);
     }
 
-    var _a$1;
-    var Keyframes = /** @class */ (function () {
-        function Keyframes(name, rules) {
-            var _this = this;
-            this[_a$1] = true;
-            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'));
+    /** Shared recursive traversal — calls `leafFn` for each leaf, recurses for objects. */
+    function walkTheme(obj, varPrefix, result, leafFn, path) {
+        for (const key in obj) {
+            const val = obj[key];
+            const fullPath = path ? path + '-' + key : key;
+            if (typeof val === 'object' && val !== null) {
+                const nested = {};
+                walkTheme(val, varPrefix, nested, leafFn, fullPath);
+                result[key] = nested;
+            }
+            else {
+                result[key] = leafFn(fullPath, val, key);
+            }
+        }
+    }
+    /** Build `var(--prefix-a-b, fallback)` accessor object */
+    function buildVars(obj, varPrefix) {
+        const result = {};
+        walkTheme(obj, varPrefix, result, (fullPath, val) => {
+            {
+                const str = String(val);
+                let depth = 0;
+                for (let i = 0; i < str.length; i++) {
+                    if (str.charCodeAt(i) === 40)
+                        depth++;
+                    else if (str.charCodeAt(i) === 41)
+                        depth--;
+                    if (depth < 0)
+                        break;
+                }
+                if (depth !== 0) {
+                    console.warn(`createTheme: value "${str}" at "${fullPath}" contains unbalanced parentheses and may break the var() fallback`);
+                }
+            }
+            return 'var(--' + varPrefix + fullPath + ', ' + val + ')';
+        });
+        return result;
+    }
+    /** Read computed CSS variable values from the DOM */
+    function resolveVars(obj, varPrefix, styles) {
+        const result = {};
+        walkTheme(obj, varPrefix, result, (fullPath, val) => {
+            const resolved = styles.getPropertyValue('--' + varPrefix + fullPath).trim();
+            return resolved || val;
+        });
+        return result;
+    }
+    /**
+     * Emit CSS var declarations by walking `shape` for structure and reading
+     * values from `theme`. This avoids hardcoded skip lists — only keys
+     * present in the original theme shape are traversed.
+     */
+    function emitVarDeclarations(shape, theme, varPrefix, path) {
+        let css = '';
+        for (const key in shape) {
+            const shapeVal = shape[key];
+            const themeVal = theme[key];
+            const fullPath = path ? path + '-' + key : key;
+            if (typeof shapeVal === 'object' && shapeVal !== null) {
+                if (typeof themeVal === 'object' && themeVal !== null) {
+                    css += emitVarDeclarations(shapeVal, themeVal, varPrefix, fullPath);
+                }
+            }
+            else if (themeVal !== undefined && typeof themeVal !== 'function') {
+                css += '--' + varPrefix + fullPath + ':' + themeVal + ';';
+            }
+        }
+        return css;
+    }
+    /**
+     * Create a theme contract that bridges `ThemeProvider` and CSS custom properties.
+     *
+     * Returns an object with the same shape as the input theme, but every leaf value
+     * is a `var(--prefix-*, fallback)` CSS string. Use these in styled component
+     * templates — they work in both client and RSC contexts.
+     *
+     * Mount the returned `GlobalStyle` component inside your `ThemeProvider` to emit
+     * the CSS variables. When the theme changes (e.g. light → dark), the variables
+     * update automatically.
+     *
+     * @example
+     * ```tsx
+     * const theme = createTheme({
+     *   colors: { primary: '#0070f3', text: '#111' },
+     * });
+     *
+     * // Root layout (client):
+     * <ThemeProvider theme={themes[preset]}>
+     *   <theme.GlobalStyle />
+     *   {children}
+     * </ThemeProvider>
+     *
+     * // Any RSC file:
+     * const Card = styled.div`
+     *   color: ${theme.colors.primary};
+     *   // → "var(--sc-colors-primary, #0070f3)"
+     * `;
+     * ```
+     */
+    function createTheme(defaultTheme, options) {
+        var _a, _b;
+        const pfx = ((_a = options === null || options === void 0 ? void 0 : options.prefix) !== null && _a !== void 0 ? _a : 'sc') + '-';
+        const sel = (_b = options === null || options === void 0 ? void 0 : options.selector) !== null && _b !== void 0 ? _b : ':root';
+        const vars = buildVars(defaultTheme, pfx);
+        const GlobalStyle = createGlobalStyle `
+    ${sel} {
+      ${(p) => emitVarDeclarations(defaultTheme, p.theme, pfx)}
+    }
+  `;
+        return Object.assign(vars, {
+            GlobalStyle,
+            raw: defaultTheme,
+            resolve(el) {
+                if (!IS_BROWSER) {
+                    throw new Error('createTheme.resolve() is client-only');
+                }
+                const target = el !== null && el !== void 0 ? el : document.documentElement;
+                return resolveVars(defaultTheme, pfx, getComputedStyle(target));
+            },
+        });
+    }
+
+    var _a;
+    class Keyframes {
+        constructor(name, rules) {
+            this[_a] = true;
+            this.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'));
                 }
             };
             this.name = name;
-            this.id = "sc-keyframes-".concat(name);
+            this.id = KEYFRAMES_ID_PREFIX + name;
             this.rules = rules;
             // Eagerly register the group so keyframes defined before components
             // get a lower group ID and appear before them in the stylesheet.
             // Uses getGroupForId directly (not StyleSheet.registerId) because
             // GroupIDAllocator is pure JS — safe for native builds.
             getGroupForId(this.id);
-            setToString(this, function () {
-                throw throwStyledComponentsError(12, String(_this.name));
+            setToString(this, () => {
+                throw throwStyledComponentsError(12, String(this.name));
             });
         }
-        Keyframes.prototype.getName = function (stylisInstance) {
-            if (stylisInstance === void 0) { stylisInstance = mainStylis; }
+        getName(stylisInstance = mainStylis) {
             return this.name + stylisInstance.hash;
-        };
-        return Keyframes;
-    }());
-    _a$1 = KEYFRAMES_SYMBOL;
-
-    function keyframes(strings) {
-        var interpolations = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            interpolations[_i - 1] = arguments[_i];
         }
+    }
+    _a = KEYFRAMES_SYMBOL;
+
+    function keyframes(strings, ...interpolations) {
         /* Warning if you've used keyframes on React Native */
         if (typeof navigator !== 'undefined' &&
             navigator.product === 'ReactNative') {
             console.warn('`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.');
         }
-        var rules = joinStringArray(css.apply(void 0, __spreadArray([strings], interpolations, false)));
-        var name = generateComponentId(rules);
+        const rules = joinStringArray(css(strings, ...interpolations));
+        const name = generateComponentId(rules);
         return new Keyframes(name, rules);
     }
 
-    var _a;
-    var 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 = Symbol.for('react.memo');
+    const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
     /**
      * Adapted from hoist-non-react-statics to avoid the react-is dependency.
      */
-    var REACT_STATICS = {
-        childContextTypes: true,
+    const REACT_STATICS = {
         contextType: true,
-        contextTypes: true,
         defaultProps: true,
         displayName: true,
-        getDefaultProps: true,
         getDerivedStateFromError: true,
         getDerivedStateFromProps: true,
-        mixins: true,
         propTypes: true,
         type: true,
     };
-    var KNOWN_STATICS = {
+    const KNOWN_STATICS = {
         name: true,
         length: true,
         prototype: true,
@@ -1714,14 +1745,14 @@
         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,
@@ -1729,13 +1760,13 @@
         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) {
@@ -1748,34 +1779,29 @@
             ? 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);
-                if (inheritedComponent && inheritedComponent !== objectPrototype) {
-                    hoistNonReactStatics(targetComponent, inheritedComponent, excludelist);
-                }
-            }
-            var 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 inheritedComponent = getPrototypeOf(sourceComponent);
+            if (inheritedComponent && inheritedComponent !== objectPrototype) {
+                hoistNonReactStatics(targetComponent, inheritedComponent, excludelist);
+            }
+            const keys = getOwnPropertyNames(sourceComponent).concat(getOwnPropertySymbols(sourceComponent));
+            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);
@@ -1790,102 +1816,98 @@
     }
 
     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 (themeProp === undefined) {
-                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(__assign({}, props), { theme: themeProp, ref: ref }));
+            return React.createElement(Component, Object.assign(Object.assign({}, props), { theme: themeProp, ref }));
         });
-        WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
+        WithTheme.displayName = `WithTheme(${getComponentName(Component)})`;
         return hoistNonReactStatics(WithTheme, Component);
     }
 
-    var ServerStyleSheet = /** @class */ (function () {
-        function ServerStyleSheet(_a) {
-            var _b = _a === void 0 ? {} : _a, nonce = _b.nonce;
-            var _this = this;
-            this._emitSheetCSS = function () {
-                var css = _this.instance.toString();
+    class ServerStyleSheet {
+        constructor({ nonce } = {}) {
+            this._emitSheetCSS = () => {
+                const css = this.instance.toString();
                 if (!css)
                     return '';
-                var nonce = _this.instance.options.nonce || getNonce();
-                var attrs = [
-                    nonce && "nonce=\"".concat(nonce, "\""),
-                    "".concat(SC_ATTR, "=\"true\""),
-                    "".concat(SC_ATTR_VERSION, "=\"").concat(SC_VERSION, "\""),
+                const nonce = this.instance.options.nonce || getNonce();
+                const attrs = [
+                    nonce && `nonce="${nonce}"`,
+                    `${SC_ATTR}="true"`,
+                    `${SC_ATTR_VERSION}="${SC_VERSION}"`,
                 ];
-                var htmlAttr = joinStringArray(attrs.filter(Boolean), ' ');
-                return "<style ".concat(htmlAttr, ">").concat(css, "</style>");
+                const htmlAttr = joinStringArray(attrs.filter(Boolean), ' ');
+                return `<style ${htmlAttr}>${css}</style>`;
             };
-            this.getStyleTags = function () {
-                if (_this.sealed) {
+            this.getStyleTags = () => {
+                if (this.sealed) {
                     throw throwStyledComponentsError(2);
                 }
-                return _this._emitSheetCSS();
+                return this._emitSheetCSS();
             };
-            this.getStyleElement = function () {
-                var _a;
-                if (_this.sealed) {
+            this.getStyleElement = () => {
+                if (this.sealed) {
                     throw throwStyledComponentsError(2);
                 }
-                var css = _this.instance.toString();
+                const css = this.instance.toString();
                 if (!css)
                     return [];
-                var props = (_a = {},
-                    _a[SC_ATTR] = '',
-                    _a[SC_ATTR_VERSION] = SC_VERSION,
-                    _a.dangerouslySetInnerHTML = {
+                const props = {
+                    [SC_ATTR]: '',
+                    [SC_ATTR_VERSION]: SC_VERSION,
+                    dangerouslySetInnerHTML: {
                         __html: css,
                     },
-                    _a);
-                var nonce = _this.instance.options.nonce || getNonce();
+                };
+                const nonce = this.instance.options.nonce || getNonce();
                 if (nonce) {
                     props.nonce = nonce;
                 }
                 // v4 returned an array for this fn, so we'll do the same for v5 for backward compat
-                return [React.createElement("style", __assign({}, props, { key: "sc-0-0" }))];
+                return [React.createElement("style", Object.assign({}, props, { key: "sc-0-0" }))];
             };
-            this.seal = function () {
-                _this.sealed = true;
+            this.seal = () => {
+                this.sealed = true;
             };
-            this.instance = new StyleSheet({ isServer: true, nonce: nonce });
+            this.instance = new StyleSheet({ isServer: true, nonce });
             this.sealed = false;
         }
-        ServerStyleSheet.prototype.collectStyles = function (children) {
+        collectStyles(children) {
             if (this.sealed) {
                 throw throwStyledComponentsError(2);
             }
             return React.createElement(StyleSheetManager, { sheet: this.instance }, children);
-        };
-        ServerStyleSheet.prototype.interleaveWithNodeStream = function (input) {
+        }
+        interleaveWithNodeStream(input) {
             {
                 throw throwStyledComponentsError(3);
             }
-        };
-        return ServerStyleSheet;
-    }());
+        }
+    }
 
-    var __PRIVATE__ = {
-        StyleSheet: StyleSheet,
-        mainSheet: mainSheet,
+    const __PRIVATE__ = {
+        StyleSheet,
+        mainSheet,
     };
 
     /* Import singletons */
     /* Warning if you've imported this file on React Native */
     if (typeof navigator !== 'undefined' &&
         navigator.product === 'ReactNative') {
-        console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
+        console.warn(`It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native`);
     }
-    var windowGlobalKey = "__sc-".concat(SC_ATTR, "__");
+    const windowGlobalKey = `__sc-${SC_ATTR}__`;
     /* Warning if there are several instances of styled-components */
     if (typeof window !== 'undefined') {
         // @ts-expect-error dynamic key not in window object
         window[windowGlobalKey] || (window[windowGlobalKey] = 0);
         // @ts-expect-error dynamic key not in window object
         if (window[windowGlobalKey] === 1) {
-            console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info.");
+            console.warn(`It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info.`);
         }
         // @ts-expect-error dynamic key not in window object
         window[windowGlobalKey] += 1;
@@ -1902,6 +1924,7 @@
         ThemeProvider: ThemeProvider,
         __PRIVATE__: __PRIVATE__,
         createGlobalStyle: createGlobalStyle,
+        createTheme: createTheme,
         css: css,
         isStyledComponent: isStyledComponent,
         keyframes: keyframes,
@@ -1931,17 +1954,17 @@
     /* Z+1 */
     );
 
-    var LIMIT = 200;
-    var createWarnTooManyClasses = (function (displayName, componentId) {
-        var generatedClasses = {};
-        var warningSeen = false;
-        return function (className) {
+    const LIMIT = 200;
+    var createWarnTooManyClasses = (displayName, componentId) => {
+        let generatedClasses = {};
+        let warningSeen = false;
+        return (className) => {
             if (!warningSeen) {
                 generatedClasses[className] = true;
                 if (Object.keys(generatedClasses).length >= LIMIT) {
                     // Unable to find latestRule in test environment.
-                    var parsedIdString = componentId ? " with the id of \"".concat(componentId, "\"") : '';
-                    console.warn("Over ".concat(LIMIT, " classes were generated for component ").concat(displayName).concat(parsedIdString, ".\n") +
+                    const parsedIdString = componentId ? ` with the id of "${componentId}"` : '';
+                    console.warn(`Over ${LIMIT} classes were generated for component ${displayName}${parsedIdString}.\n` +
                         'Consider using the attrs method, together with a style object for frequently changed styles.\n' +
                         'Example:\n' +
                         '  const Component = styled.div.attrs(props => ({\n' +
@@ -1955,169 +1978,18 @@
                 }
             }
         };
-    });
+    };
 
-    var elements = [
-        'a',
-        'abbr',
-        'address',
-        'area',
-        'article',
-        'aside',
-        'audio',
-        'b',
-        'bdi',
-        'bdo',
-        'blockquote',
-        'body',
-        'button',
-        'br',
-        'canvas',
-        'caption',
-        'cite',
-        'code',
-        'col',
-        'colgroup',
-        'data',
-        'datalist',
-        'dd',
-        'del',
-        'details',
-        'dfn',
-        'dialog',
-        'div',
-        'dl',
-        'dt',
-        'em',
-        'embed',
-        'fieldset',
-        'figcaption',
-        'figure',
-        'footer',
-        'form',
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'header',
-        'hgroup',
-        'hr',
-        'html',
-        'i',
-        'iframe',
-        'img',
-        'input',
-        'ins',
-        'kbd',
-        'label',
-        'legend',
-        'li',
-        'main',
-        'map',
-        'mark',
-        'menu',
-        'meter',
-        'nav',
-        'object',
-        'ol',
-        'optgroup',
-        'option',
-        'output',
-        'p',
-        'picture',
-        'pre',
-        'progress',
-        'q',
-        'rp',
-        'rt',
-        'ruby',
-        's',
-        'samp',
-        'search',
-        'section',
-        'select',
-        'slot',
-        'small',
-        'span',
-        'strong',
-        'sub',
-        'summary',
-        'sup',
-        'table',
-        'tbody',
-        'td',
-        'template',
-        'textarea',
-        'tfoot',
-        'th',
-        'thead',
-        'time',
-        'tr',
-        'u',
-        'ul',
-        'var',
-        'video',
-        'wbr',
-        'circle',
-        'clipPath',
-        'defs',
-        'ellipse',
-        'feBlend',
-        'feColorMatrix',
-        'feComponentTransfer',
-        'feComposite',
-        'feConvolveMatrix',
-        'feDiffuseLighting',
-        'feDisplacementMap',
-        'feDistantLight',
-        'feDropShadow',
-        'feFlood',
-        'feFuncA',
-        'feFuncB',
-        'feFuncG',
-        'feFuncR',
-        'feGaussianBlur',
-        'feImage',
-        'feMerge',
-        'feMergeNode',
-        'feMorphology',
-        'feOffset',
-        'fePointLight',
-        'feSpecularLighting',
-        'feSpotLight',
-        'feTile',
-        'feTurbulence',
-        'filter',
-        'foreignObject',
-        'g',
-        'image',
-        'line',
-        'linearGradient',
-        'marker',
-        'mask',
-        'path',
-        'pattern',
-        'polygon',
-        'polyline',
-        'radialGradient',
-        'rect',
-        'stop',
-        'svg',
-        'switch',
-        'symbol',
-        'text',
-        'textPath',
-        'tspan',
-        'use',
+    // prettier-ignore
+    const elements = [
+        'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'blockquote', 'body', 'button', 'br', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'menu', 'meter', 'nav', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'search', 'section', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'u', 'ul', 'var', 'video', 'wbr', 'circle', 'clipPath', 'defs', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'switch', 'symbol', 'text', 'textPath', 'tspan', 'use',
     ];
     var domElements = new Set(elements);
 
     // Source: https://www.w3.org/TR/cssom-1/#serialize-an-identifier
     // Control characters and non-letter first symbols are not supported
-    var escapeRegex = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
-    var dashesAtEnds = /(^-|-$)/g;
+    const escapeRegex = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
+    const dashesAtEnds = /(^-|-$)/g;
     /**
      * TODO: Explore using CSS.escape when it becomes more available
      * in evergreen browsers.
@@ -2135,23 +2007,22 @@
     }
 
     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]);
             }
         }
@@ -2162,24 +2033,19 @@
      * 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 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];
+    function mixinDeep(target, ...sources) {
+        for (const source of sources) {
             mixinRecursively(target, source, true);
         }
         return target;
     }
 
-    var SEED = hash(SC_VERSION);
+    const SEED = hash(SC_VERSION);
     /**
      * ComponentStyle is all the CSS-specific stuff, not the React-specific stuff.
      */
-    var ComponentStyle = /** @class */ (function () {
-        function ComponentStyle(rules, componentId, baseStyle) {
+    class ComponentStyle {
+        constructor(rules, componentId, baseStyle) {
             this.rules = rules;
             this.staticRulesId = '';
             this.isStatic =
@@ -2191,9 +2057,9 @@
             // for this component's styles compared to others
             StyleSheet.registerId(componentId);
         }
-        ComponentStyle.prototype.generateAndInjectStyles = function (executionContext, styleSheet, stylis) {
-            var names = this.baseStyle
-                ? this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis).className
+        generateAndInjectStyles(executionContext, styleSheet, stylis) {
+            let names = this.baseStyle
+                ? this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis)
                 : '';
             // force dynamic classnames if user-supplied stylis plugins are in use
             if (this.isStatic && !stylis.hash) {
@@ -2201,27 +2067,27 @@
                     names = joinStrings(names, this.staticRulesId);
                 }
                 else {
-                    var cssStatic = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
-                    var name_1 = generateAlphabeticName(phash(this.baseHash, cssStatic) >>> 0);
-                    if (!styleSheet.hasNameForId(this.componentId, name_1)) {
-                        var cssStaticFormatted = stylis(cssStatic, ".".concat(name_1), undefined, this.componentId);
-                        styleSheet.insertRules(this.componentId, name_1, cssStaticFormatted);
+                    const cssStatic = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
+                    const name = generateAlphabeticName(phash(this.baseHash, cssStatic) >>> 0);
+                    if (!styleSheet.hasNameForId(this.componentId, name)) {
+                        const cssStaticFormatted = stylis(cssStatic, '.' + name, undefined, this.componentId);
+                        styleSheet.insertRules(this.componentId, name, cssStaticFormatted);
                     }
-                    names = joinStrings(names, name_1);
-                    this.staticRulesId = name_1;
+                    names = joinStrings(names, name);
+                    this.staticRulesId = name;
                 }
             }
             else {
-                var dynamicHash = phash(this.baseHash, stylis.hash);
-                var css = '';
-                for (var i = 0; i < this.rules.length; i++) {
-                    var partRule = this.rules[i];
+                let dynamicHash = phash(this.baseHash, stylis.hash);
+                let css = '';
+                for (let i = 0; i < this.rules.length; i++) {
+                    const partRule = this.rules[i];
                     if (typeof partRule === 'string') {
                         css += partRule;
                         dynamicHash = phash(dynamicHash, partRule);
                     }
                     else if (partRule) {
-                        var partString = joinStringArray(flatten(partRule, executionContext, styleSheet, stylis));
+                        const partString = joinStringArray(flatten(partRule, executionContext, styleSheet, stylis));
                         // The same value can switch positions in the array, so we include "i" in the hash.
                         // Split into two phash calls to avoid temp string allocation (partString + i).
                         // phash processes right-to-left, so phash(h, a+b) === phash(phash(h, b), a).
@@ -2230,59 +2096,53 @@
                     }
                 }
                 if (css) {
-                    var name_2 = generateAlphabeticName(dynamicHash >>> 0);
-                    if (!styleSheet.hasNameForId(this.componentId, name_2)) {
-                        var cssFormatted = stylis(css, ".".concat(name_2), undefined, this.componentId);
-                        styleSheet.insertRules(this.componentId, name_2, cssFormatted);
+                    const name = generateAlphabeticName(dynamicHash >>> 0);
+                    if (!styleSheet.hasNameForId(this.componentId, name)) {
+                        const cssFormatted = stylis(css, '.' + name, undefined, this.componentId);
+                        styleSheet.insertRules(this.componentId, name, cssFormatted);
                     }
-                    names = joinStrings(names, name_2);
+                    names = joinStrings(names, name);
                 }
             }
-            // Retrieve CSS from Tag for RSC rendering
-            var generatedCSS = typeof window === 'undefined'
-                ? styleSheet.getTag().getGroup(getGroupForId(this.componentId))
-                : '';
-            return { className: names, css: generatedCSS };
-        };
-        return ComponentStyle;
-    }());
+            return names;
+        }
+    }
 
-    var identifiers = {};
+    const identifiers = {};
     /* We depend on components having unique IDs */
     function generateId(displayName, parentComponentId) {
-        var name = typeof displayName !== 'string' ? 'sc' : escape(displayName);
+        const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);
         // Ensure that no displayName can lead to duplicate componentIds
         identifiers[name] = (identifiers[name] || 0) + 1;
-        var componentId = "".concat(name, "-").concat(generateComponentId(
-        // SC_VERSION gives us isolation between multiple runtimes on the page at once
-        // this is improved further with use of the babel plugin "namespace" feature
-        SC_VERSION + name + identifiers[name]));
-        return parentComponentId ? "".concat(parentComponentId, "-").concat(componentId) : componentId;
-    }
-    function useInjectedStyle(componentStyle, resolvedAttrs) {
-        var ssc = useStyleSheetContext();
-        var result = componentStyle.generateAndInjectStyles(resolvedAttrs, ssc.styleSheet, ssc.stylis);
+        const componentId = `${name}-${generateComponentId(
+    // SC_VERSION gives us isolation between multiple runtimes on the page at once
+    // this is improved further with use of the babel plugin "namespace" feature
+    SC_VERSION + name + identifiers[name])}`;
+        return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;
+    }
+    function useInjectedStyle(componentStyle, resolvedAttrs, styleSheet, stylis) {
+        const className = componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);
         if (React.useDebugValue) {
-            React.useDebugValue(result.className);
+            React.useDebugValue(className);
         }
-        return result;
+        return className;
     }
     function resolveContext(attrs, props, theme) {
-        var context = __assign(__assign({}, props), { 
+        const context = Object.assign(Object.assign({}, props), { 
             // unset, add `props.className` back at the end so props always "wins"
-            className: undefined, theme: theme });
-        var attrDef;
-        for (var i = 0; i < attrs.length; i += 1) {
+            className: undefined, theme });
+        let attrDef;
+        for (let i = 0; i < attrs.length; i += 1) {
             attrDef = attrs[i];
             // Pass a shallow copy to function attrs so the callback's captured
             // reference isn't mutated by subsequent attrs processing (#3336).
-            var resolvedAttrDef = isFunction(attrDef) ? attrDef(__assign({}, context)) : attrDef;
-            for (var key in resolvedAttrDef) {
+            const resolvedAttrDef = isFunction(attrDef) ? attrDef(Object.assign({}, context)) : attrDef;
+            for (const key in resolvedAttrDef) {
                 if (key === 'className') {
                     context.className = joinStrings(context.className, resolvedAttrDef[key]);
                 }
                 else if (key === 'style') {
-                    context.style = __assign(__assign({}, context.style), resolvedAttrDef[key]);
+                    context.style = Object.assign(Object.assign({}, context.style), resolvedAttrDef[key]);
                 }
                 else if (!(key in props && props[key] === undefined)) {
                     // Apply attr value unless the user explicitly passed undefined for this prop,
@@ -2297,23 +2157,23 @@
         }
         return context;
     }
-    var seenUnknownProps = new Set();
+    let seenUnknownProps = new Set();
     function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
-        var componentAttrs = forwardedComponent.attrs, componentStyle = forwardedComponent.componentStyle, defaultProps = forwardedComponent.defaultProps, foldedComponentIds = forwardedComponent.foldedComponentIds, styledComponentId = forwardedComponent.styledComponentId, target = forwardedComponent.target;
-        var contextTheme = React.useContext(ThemeContext) ;
-        var ssc = useStyleSheetContext();
-        var shouldForwardProp = forwardedComponent.shouldForwardProp || ssc.shouldForwardProp;
+        const { attrs: componentAttrs, componentStyle, defaultProps, foldedComponentIds, styledComponentId, target, } = forwardedComponent;
+        const contextTheme = React.useContext(ThemeContext) ;
+        const ssc = useStyleSheetContext();
+        const shouldForwardProp = forwardedComponent.shouldForwardProp || ssc.shouldForwardProp;
         if (React.useDebugValue) {
             React.useDebugValue(styledComponentId);
         }
         // 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, contextTheme, defaultProps) || (EMPTY_OBJECT);
-        var context = resolveContext(componentAttrs, props, theme);
-        var elementToBeCreated = context.as || target;
-        var propsForElement = {};
-        for (var key in context) {
+        const theme = determineTheme(props, contextTheme, defaultProps) || (EMPTY_OBJECT);
+        const context = resolveContext(componentAttrs, props, theme);
+        const elementToBeCreated = context.as || target;
+        const propsForElement = {};
+        for (const key in context) {
             // @ts-expect-error context may have arbitrary properties from attrs
             if (context[key] === undefined) ;
             else if (key[0] === '$' || key === 'as' || (key === 'theme' && context.theme === theme)) ;
@@ -2330,15 +2190,15 @@
                     // Only warn on DOM Element.
                     domElements.has(elementToBeCreated)) {
                     seenUnknownProps.add(key);
-                    console.warn("styled-components: it looks like an unknown prop \"".concat(key, "\" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)"));
+                    console.warn(`styled-components: it looks like an unknown prop "${key}" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via \`<StyleSheetManager shouldForwardProp={...}>\` (connect an API like \`@emotion/is-prop-valid\`) or consider using transient props (\`$\` prefix for automatic filtering.)`);
                 }
             }
         }
-        var _a = useInjectedStyle(componentStyle, context), generatedClassName = _a.className;
+        const generatedClassName = useInjectedStyle(componentStyle, context, ssc.styleSheet, ssc.stylis);
         if (forwardedComponent.warnTooManyClasses) {
             forwardedComponent.warnTooManyClasses(generatedClassName);
         }
-        var classString = joinStrings(foldedComponentIds, styledComponentId);
+        let classString = joinStrings(foldedComponentIds, styledComponentId);
         if (generatedClassName) {
             classString += ' ' + generatedClassName;
         }
@@ -2357,37 +2217,35 @@
         if (forwardedRef) {
             propsForElement.ref = forwardedRef;
         }
-        var element = React.createElement(elementToBeCreated, propsForElement);
+        const element = React.createElement(elementToBeCreated, propsForElement);
         return element;
     }
     function createStyledComponent(target, options, rules) {
-        var isTargetStyledComp = isStyledComponent(target);
-        var styledComponentTarget = target;
-        var isCompositeComponent = !isTag(target);
-        var _a = options.attrs, attrs = _a === void 0 ? EMPTY_ARRAY : _a, _b = options.componentId, componentId = _b === void 0 ? generateId(options.displayName, options.parentComponentId) : _b, _c = options.displayName, displayName = _c === void 0 ? generateDisplayName(target) : _c;
-        var styledComponentId = options.displayName && options.componentId
-            ? "".concat(escape(options.displayName), "-").concat(options.componentId)
+        const isTargetStyledComp = isStyledComponent(target);
+        const styledComponentTarget = target;
+        const isCompositeComponent = !isTag(target);
+        const { attrs = EMPTY_ARRAY, componentId = generateId(options.displayName, options.parentComponentId), displayName = generateDisplayName(target), } = options;
+        const styledComponentId = options.displayName && options.componentId
+            ? `${escape(options.displayName)}-${options.componentId}`
             : options.componentId || componentId;
         // 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;
-        var shouldForwardProp = options.shouldForwardProp;
+        let { shouldForwardProp } = options;
         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, elementToBeCreated) {
-                    return shouldForwardPropFn_1(prop, elementToBeCreated) &&
-                        passedShouldForwardPropFn_1(prop, elementToBeCreated);
-                };
+                shouldForwardProp = (prop, elementToBeCreated) => shouldForwardPropFn(prop, elementToBeCreated) &&
+                    passedShouldForwardPropFn(prop, elementToBeCreated);
             }
             else {
-                shouldForwardProp = shouldForwardPropFn_1;
+                shouldForwardProp = shouldForwardPropFn;
             }
         }
-        var componentStyle = new ComponentStyle(rules, styledComponentId, isTargetStyledComp ? styledComponentTarget.componentStyle : undefined);
+        const componentStyle = new ComponentStyle(rules, styledComponentId, isTargetStyledComp ? styledComponentTarget.componentStyle : undefined);
         function forwardRefRender(props, ref) {
             return useStyledComponentImpl(WrappedStyledComponent, props, ref);
         }
@@ -2396,7 +2254,7 @@
          * 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(forwardRefRender);
+        let WrappedStyledComponent = React.forwardRef(forwardRefRender);
         WrappedStyledComponent.attrs = finalAttrs;
         WrappedStyledComponent.componentStyle = componentStyle;
         WrappedStyledComponent.displayName = displayName;
@@ -2410,10 +2268,10 @@
         // fold the underlying StyledComponent target up since we folded the styles
         WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
         Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
-            get: function () {
+            get() {
                 return this._foldedDefaultProps;
             },
-            set: function (obj) {
+            set(obj) {
                 this._foldedDefaultProps = isTargetStyledComp
                     ? mixinDeep({}, styledComponentTarget.defaultProps, obj)
                     : obj;
@@ -2423,9 +2281,9 @@
             checkDynamicCreation(displayName, styledComponentId);
             WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName, styledComponentId);
         }
-        setToString(WrappedStyledComponent, function () { return ".".concat(WrappedStyledComponent.styledComponentId); });
+        setToString(WrappedStyledComponent, () => `.${WrappedStyledComponent.styledComponentId}`);
         if (isCompositeComponent) {
-            var compositeComponentTarget = target;
+            const compositeComponentTarget = target;
             hoistNonReactStatics(WrappedStyledComponent, compositeComponentTarget, {
                 // all SC-specific things should not be hoisted
                 attrs: true,
@@ -2440,8 +2298,7 @@
         return WrappedStyledComponent;
     }
 
-    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.
@@ -2453,38 +2310,26 @@
             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], interpolations, false)));
-        };
+        const templateFunction = (initialStyles, ...interpolations) => componentConstructor(tag, options, css(initialStyles, ...interpolations));
         /**
          * Attrs allows for accomplishing two goals:
          *
          * 1. Backfilling props at runtime more expressively than defaultProps
          * 2. Amending the prop interface of a wrapped styled component
          */
-        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, Object.assign(Object.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 = function (config) {
-            return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), config));
-        };
+        templateFunction.withConfig = (config) => constructWithOptions(componentConstructor, tag, Object.assign(Object.assign({}, options), config));
         return templateFunction;
     }
 
-    var baseStyled = function (tag) {
-        return constructWithOptions(createStyledComponent, tag);
-    };
-    var styled = baseStyled;
+    const baseStyled = (tag) => constructWithOptions(createStyledComponent, tag);
+    const styled = baseStyled;
     // Shorthands for all valid HTML Elements
-    domElements.forEach(function (domElement) {
+    domElements.forEach(domElement => {
         // @ts-expect-error some react typing bs
         styled[domElement] = baseStyled(domElement);
     });
@@ -2493,7 +2338,7 @@
      * eliminates the need to do styled.default since the other APIs
      * are directly assigned as properties to the main function
      * */
-    for (var key in secondary) {
+    for (const key in secondary) {
         // @ts-expect-error shush
         styled[key] = secondary[key];
     }