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

package/dist/utils/hoist.d.ts

@@ -4,15 +4,11 @@ import { AnyComponent } from '../types';
  * Adapted from hoist-non-react-statics to avoid the react-is dependency.
  */
 declare const REACT_STATICS: {
-    childContextTypes: boolean;
     contextType: boolean;
-    contextTypes: boolean;
     defaultProps: boolean;
     displayName: boolean;
-    getDefaultProps: boolean;
     getDerivedStateFromError: boolean;
     getDerivedStateFromProps: boolean;
-    mixins: boolean;
     propTypes: boolean;
     type: boolean;
 };

package/native/dist/base.d.ts

@@ -1,5 +1,6 @@
 import { SC_VERSION } from './constants';
 import createGlobalStyle from './constructors/createGlobalStyle';
+import createTheme from './constructors/createTheme';
 import css from './constructors/css';
 import keyframes from './constructors/keyframes';
 import withTheme from './hoc/withTheme';
@@ -9,4 +10,4 @@ import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from './models/T
 import isStyledComponent from './utils/isStyledComponent';
 export * from './secretInternals';
 export { Attrs, DefaultTheme, Keyframes, ShouldForwardProp } from './types';
-export { IStyleSheetContext, IStyleSheetManager, IStylisContext, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, css, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };
+export { IStyleSheetContext, IStyleSheetManager, IStylisContext, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, createTheme, css, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };

package/native/dist/constants.d.ts

@@ -13,4 +13,5 @@ export declare const IS_BROWSER: boolean;
  */
 export declare const IS_RSC: boolean;
 export declare const DISABLE_SPEEDY: boolean;
+export declare const KEYFRAMES_ID_PREFIX = "sc-keyframes-";
 export declare const STATIC_EXECUTION_CONTEXT: {};

package/native/dist/constructors/createTheme.d.ts

@@ -0,0 +1,89 @@
+import createGlobalStyle from './createGlobalStyle';
+type ThemeLeaf = string | number;
+/**
+ * Recursively maps a theme object so every leaf value becomes
+ * a `var(--sc-path, fallback)` CSS string.
+ */
+type CSSVarTheme<T> = {
+    [K in keyof T]: T[K] extends ThemeLeaf ? string : CSSVarTheme<T[K]>;
+};
+/**
+ * The object returned by `createTheme`. Same shape as the input theme but
+ * every leaf is a CSS `var()` reference. Also carries a `GlobalStyle`
+ * component and the original `raw` theme object.
+ */
+type ThemeContract<T> = CSSVarTheme<T> & {
+    /**
+     * A `createGlobalStyle` component that emits `:root` CSS custom properties
+     * from the current ThemeProvider context. Mount this once at the root of
+     * your app so RSC components can consume theme values via CSS variables.
+     */
+    GlobalStyle: ReturnType<typeof createGlobalStyle>;
+    /** The original theme object, for passing to `ThemeProvider`. */
+    raw: T;
+    /**
+     * Read the current resolved CSS variable values from the DOM and return
+     * an object with the same shape as the original theme. Each leaf is the
+     * computed value (e.g. `"#0070f3"`), not the `var()` reference.
+     *
+     * Optionally pass a target element to read scoped variables from
+     * (defaults to `document.documentElement`).
+     *
+     * Client-only — throws if called on the server.
+     */
+    resolve(el?: Element): T;
+};
+interface CreateThemeOptions {
+    /**
+     * Prefix for CSS variable names. Defaults to `"sc"`.
+     * Useful for isolation when multiple design systems or microfrontends
+     * coexist on the same page.
+     *
+     * @example
+     * createTheme(theme, { prefix: 'ds' })
+     * // → var(--ds-colors-primary, #0070f3)
+     */
+    prefix?: string;
+    /**
+     * CSS selector for the variable declarations. Defaults to `":root"`.
+     * Use `":host"` for web components / Shadow DOM, or a class selector
+     * for scoped theming.
+     *
+     * @example
+     * createTheme(theme, { selector: ':host' })
+     * // → :host { --sc-colors-primary: #0070f3; }
+     */
+    selector?: string;
+}
+/**
+ * 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)"
+ * `;
+ * ```
+ */
+export default function createTheme<T extends Record<string, any>>(defaultTheme: T, options?: CreateThemeOptions): ThemeContract<T>;
+export {};

package/native/dist/dist/base.d.ts

@@ -1,5 +1,6 @@
 import { SC_VERSION } from './constants';
 import createGlobalStyle from './constructors/createGlobalStyle';
+import createTheme from './constructors/createTheme';
 import css from './constructors/css';
 import keyframes from './constructors/keyframes';
 import withTheme from './hoc/withTheme';
@@ -9,4 +10,4 @@ import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from './models/T
 import isStyledComponent from './utils/isStyledComponent';
 export * from './secretInternals';
 export { Attrs, DefaultTheme, Keyframes, ShouldForwardProp } from './types';
-export { IStyleSheetContext, IStyleSheetManager, IStylisContext, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, css, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };
+export { IStyleSheetContext, IStyleSheetManager, IStylisContext, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, createTheme, css, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };

package/native/dist/dist/constants.d.ts

@@ -13,4 +13,5 @@ export declare const IS_BROWSER: boolean;
  */
 export declare const IS_RSC: boolean;
 export declare const DISABLE_SPEEDY: boolean;
+export declare const KEYFRAMES_ID_PREFIX = "sc-keyframes-";
 export declare const STATIC_EXECUTION_CONTEXT: {};

package/native/dist/dist/constructors/createTheme.d.ts

@@ -0,0 +1,89 @@
+import createGlobalStyle from './createGlobalStyle';
+type ThemeLeaf = string | number;
+/**
+ * Recursively maps a theme object so every leaf value becomes
+ * a `var(--sc-path, fallback)` CSS string.
+ */
+type CSSVarTheme<T> = {
+    [K in keyof T]: T[K] extends ThemeLeaf ? string : CSSVarTheme<T[K]>;
+};
+/**
+ * The object returned by `createTheme`. Same shape as the input theme but
+ * every leaf is a CSS `var()` reference. Also carries a `GlobalStyle`
+ * component and the original `raw` theme object.
+ */
+type ThemeContract<T> = CSSVarTheme<T> & {
+    /**
+     * A `createGlobalStyle` component that emits `:root` CSS custom properties
+     * from the current ThemeProvider context. Mount this once at the root of
+     * your app so RSC components can consume theme values via CSS variables.
+     */
+    GlobalStyle: ReturnType<typeof createGlobalStyle>;
+    /** The original theme object, for passing to `ThemeProvider`. */
+    raw: T;
+    /**
+     * Read the current resolved CSS variable values from the DOM and return
+     * an object with the same shape as the original theme. Each leaf is the
+     * computed value (e.g. `"#0070f3"`), not the `var()` reference.
+     *
+     * Optionally pass a target element to read scoped variables from
+     * (defaults to `document.documentElement`).
+     *
+     * Client-only — throws if called on the server.
+     */
+    resolve(el?: Element): T;
+};
+interface CreateThemeOptions {
+    /**
+     * Prefix for CSS variable names. Defaults to `"sc"`.
+     * Useful for isolation when multiple design systems or microfrontends
+     * coexist on the same page.
+     *
+     * @example
+     * createTheme(theme, { prefix: 'ds' })
+     * // → var(--ds-colors-primary, #0070f3)
+     */
+    prefix?: string;
+    /**
+     * CSS selector for the variable declarations. Defaults to `":root"`.
+     * Use `":host"` for web components / Shadow DOM, or a class selector
+     * for scoped theming.
+     *
+     * @example
+     * createTheme(theme, { selector: ':host' })
+     * // → :host { --sc-colors-primary: #0070f3; }
+     */
+    selector?: string;
+}
+/**
+ * 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)"
+ * `;
+ * ```
+ */
+export default function createTheme<T extends Record<string, any>>(defaultTheme: T, options?: CreateThemeOptions): ThemeContract<T>;
+export {};

package/native/dist/dist/models/ComponentStyle.d.ts

@@ -11,8 +11,5 @@ export default class ComponentStyle {
     rules: RuleSet<any>;
     staticRulesId: string;
     constructor(rules: RuleSet<any>, componentId: string, baseStyle?: ComponentStyle | undefined);
-    generateAndInjectStyles(executionContext: ExecutionContext, styleSheet: StyleSheet, stylis: Stringifier): {
-        className: string;
-        css: string;
-    };
+    generateAndInjectStyles(executionContext: ExecutionContext, styleSheet: StyleSheet, stylis: Stringifier): string;
 }

package/native/dist/dist/sheet/Sheet.d.ts

@@ -13,6 +13,8 @@ type NamesAllocationMap = Map<string, Set<string>>;
 /** Contains the main stylesheet logic for stringification and caching */
 export default class StyleSheet implements Sheet {
     gs: GlobalStylesAllocationMap;
+    /** Keyframe component IDs for efficient RSC rendering (avoids scanning all names) */
+    keyframeIds: Set<string>;
     names: NamesAllocationMap;
     options: SheetOptions;
     server: boolean;

package/native/dist/dist/utils/hoist.d.ts

@@ -4,15 +4,11 @@ import { AnyComponent } from '../types';
  * Adapted from hoist-non-react-statics to avoid the react-is dependency.
  */
 declare const REACT_STATICS: {
-    childContextTypes: boolean;
     contextType: boolean;
-    contextTypes: boolean;
     defaultProps: boolean;
     displayName: boolean;
-    getDefaultProps: boolean;
     getDerivedStateFromError: boolean;
     getDerivedStateFromProps: boolean;
-    mixins: boolean;
     propTypes: boolean;
     type: boolean;
 };

package/native/dist/models/ComponentStyle.d.ts

@@ -11,8 +11,5 @@ export default class ComponentStyle {
     rules: RuleSet<any>;
     staticRulesId: string;
     constructor(rules: RuleSet<any>, componentId: string, baseStyle?: ComponentStyle | undefined);
-    generateAndInjectStyles(executionContext: ExecutionContext, styleSheet: StyleSheet, stylis: Stringifier): {
-        className: string;
-        css: string;
-    };
+    generateAndInjectStyles(executionContext: ExecutionContext, styleSheet: StyleSheet, stylis: Stringifier): string;
 }

package/native/dist/sheet/Sheet.d.ts

@@ -13,6 +13,8 @@ type NamesAllocationMap = Map<string, Set<string>>;
 /** Contains the main stylesheet logic for stringification and caching */
 export default class StyleSheet implements Sheet {
     gs: GlobalStylesAllocationMap;
+    /** Keyframe component IDs for efficient RSC rendering (avoids scanning all names) */
+    keyframeIds: Set<string>;
     names: NamesAllocationMap;
     options: SheetOptions;
     server: boolean;

package/native/dist/sheet/Tag.d.ts

@@ -2,21 +2,21 @@ import { InsertionTarget } from '../types';
 import { SheetOptions } from './types';
 /** Create a CSSStyleSheet-like tag depending on the environment */
 export declare const makeTag: ({ isServer, useCSSOMInjection, target, nonce }: SheetOptions) => {
-    rules: string[];
+    element: HTMLStyleElement;
+    sheet: CSSStyleSheet;
     length: number;
     insertRule(index: number, rule: string): boolean;
     deleteRule(index: number): void;
     getRule(index: number): string;
 } | {
     element: HTMLStyleElement;
-    sheet: CSSStyleSheet;
+    nodes: NodeListOf<Node>;
     length: number;
     insertRule(index: number, rule: string): boolean;
     deleteRule(index: number): void;
     getRule(index: number): string;
 } | {
-    element: HTMLStyleElement;
-    nodes: NodeListOf<Node>;
+    rules: string[];
     length: number;
     insertRule(index: number, rule: string): boolean;
     deleteRule(index: number): void;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("css-to-react-native"),t=require("postcss"),r=require("tslib"),n=require("@emotion/unitless"),o=require("react");function s(e){return e&&e.__esModule?e:{default:e}}var a=/*#__PURE__*/s(e),i=/*#__PURE__*/s(n),c=/*#__PURE__*/s(o),u=Object.freeze([]),l=Object.freeze({}),p="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s 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.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function d(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var r=e[0],n=[],o=1,s=e.length;o<s;o+=1)n.push(e[o]);return n.forEach(function(e){r=r.replace(/%[a-z]/,e)}),r}function f(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return"production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(e," for more information.").concat(t.length>0?" Args: ".concat(t.join(", ")):"")):new Error(d.apply(void 0,r.__spreadArray([p[e]],t,!1)).trim())}function y(e,t){return null==t||"boolean"==typeof t||""===t?"":"number"!=typeof t||0===t||e in i.default||e.startsWith("--")?String(t).trim():"".concat(t,"px")}function h(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}var m=function(e){return e>="A"&&e<="Z"};function v(e){for(var t="",r=0;r<e.length;r++){var n=e[r];if(1===r&&"-"===n&&"-"===e[0])return e;m(n)?t+="-"+n.toLowerCase():t+=n}return t.startsWith("ms-")?"-"+t:t}function g(e){return"function"==typeof e}var S=Symbol.for("sc-keyframes");function _(e){return"object"==typeof e&&null!==e&&S in e}function w(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function E(e){return"object"==typeof e&&"styledComponentId"in e}var b=function(e){return null==e||!1===e||""===e},P=function(e){var t=[];for(var n in e){var o=e[n];e.hasOwnProperty(n)&&!b(o)&&(Array.isArray(o)&&o.isCss||g(o)?t.push("".concat(v(n),":"),o,";"):w(o)?t.push.apply(t,r.__spreadArray(r.__spreadArray(["".concat(n," {")],P(o),!1),["}"],!1)):t.push("".concat(v(n),": ").concat(y(n,o),";")))}return t};function A(e,t,r,n,o){if(void 0===o&&(o=[]),"string"==typeof e)return e&&o.push(e),o;if(b(e))return o;if(E(e))return o.push(".".concat(e.styledComponentId)),o;if(g(e)){if(!g(a=e)||a.prototype&&a.prototype.isReactComponent||!t)return o.push(e),o;var s=e(t);return"production"===process.env.NODE_ENV||"object"!=typeof s||Array.isArray(s)||_(s)||w(s)||null===s||console.error("".concat(h(e)," 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.")),A(s,t,r,n,o)}var a;if(_(e))return r?(e.inject(r,n),o.push(e.getName(n))):o.push(e),o;if(w(e)){for(var i=P(e),c=0;c<i.length;c++)o.push(i[c]);return o}if(!Array.isArray(e))return o.push(e.toString()),o;for(c=0;c<e.length;c++)A(e[c],t,r,n,o);return o}function C(e,t){for(var r=[e[0]],n=0,o=t.length;n<o;n+=1)r.push(t[n],e[n+1]);return r}var D=function(e){return Object.assign(e,{isCss:!0})};function N(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];if(g(e)||w(e))return D(A(C(u,r.__spreadArray([e],t,!0))));var o=e;return 0===t.length&&1===o.length&&"string"==typeof o[0]?A(o):D(A(C(o,t)))}function T(e,t,n){if(void 0===n&&(n=l),!t)throw f(1,t);var o=function(o){for(var s=[],a=1;a<arguments.length;a++)s[a-1]=arguments[a];return e(t,n,N.apply(void 0,r.__spreadArray([o],s,!1)))};return o.attrs=function(o){return T(e,t,r.__assign(r.__assign({},n),{attrs:Array.prototype.concat(n.attrs,o).filter(Boolean)}))},o.withConfig=function(o){return T(e,t,r.__assign(r.__assign({},n),o))},o}"undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process),Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV);var O,j=c.default.createContext(void 0),x=j.Consumer;function I(e,t,r){return void 0===r&&(r=l),e.theme!==r.theme&&e.theme||t||r.theme}var V="function"==typeof Symbol&&Symbol.for,B=V?Symbol.for("react.memo"):60115,L=V?Symbol.for("react.forward_ref"):60112,$={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},R={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},k={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},F=((O={})[L]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},O[B]=k,O);function Y(e){return("type"in(t=e)&&t.type.$$typeof)===B?k:"$$typeof"in e?F[e.$$typeof]:$;var t}var M=Object.defineProperty,q=Object.getOwnPropertyNames,W=Object.getOwnPropertySymbols,z=Object.getOwnPropertyDescriptor,H=Object.getPrototypeOf,G=Object.prototype;function K(e,t,r){if("string"!=typeof t){if(G){var n=H(t);n&&n!==G&&K(e,n,r)}var o=q(t);W&&(o=o.concat(W(t)));for(var s=Y(e),a=Y(t),i=0;i<o.length;++i){var c=o[i];if(!(c in R||r&&r[c]||a&&c in a||s&&c in s)){var u=z(t,c);try{M(e,c,u)}catch(e){}}}}return e}var U=/(a)(d)/gi,Z=function(e){return String.fromCharCode(e+(e>25?39:97))};function J(e,t){return e.join(t||"")}var Q=["fit-content","min-content","max-content"],X={};function ee(e,t,r){if(void 0===r&&(r=!1),!r&&!w(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var n=0;n<t.length;n++)e[n]=ee(e[n],t[n]);else if(w(t))for(var n in t)e[n]=ee(e[n],t[n]);return e}var te,re,ne=require("react-native"),oe=(te=ne.StyleSheet,re=function(){function e(e){this.rules=e}return e.prototype.generateStyleObject=function(e){var r=J(A(this.rules,e)),n=function(e){var t,r="";for(t=Math.abs(e);t>52;t=t/52|0)r=Z(t%52)+r;return(Z(t%52)+r).replace(U,"$1-$2")}(function(e,t){for(var r=t.length;r;)e=33*e^t.charCodeAt(--r);return e}(5381,r)>>>0);if(!X[n]){var o=void 0;try{o=t.parse(r)}catch(e){return"production"!==process.env.NODE_ENV&&console.warn("[styled-components/native] Failed to parse CSS: ".concat(e instanceof Error?e.message:e)),X[n]={},X[n]}var s=[];o.each(function(e){if("decl"===e.type){if(Q.includes(e.value))return void("production"!==process.env.NODE_ENV&&console.warn('[styled-components/native] The value "'.concat(e.value,'" for property "').concat(e.prop,'" is not supported in React Native and will be ignored.')));s.push([e.prop,e.value])}else"production"!==process.env.NODE_ENV&&"comment"!==e.type&&console.warn("Node of type ".concat(e.type," not supported as an inline style"))});var i=a.default(s,["borderWidth","borderColor"]),c=te.create({generated:i});X[n]=c.generated}return X[n]},e}(),function(e,t,n){var s=E(e),a=e,i=t.displayName,p=void 0===i?function(e){return function(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}(e)?"styled.".concat(e):"Styled(".concat(h(e),")")}(e):i,d=t.attrs,f=void 0===d?u:d,y=s&&a.attrs?a.attrs.concat(f).filter(Boolean):f,m=t.shouldForwardProp;if(s&&a.shouldForwardProp){var v=a.shouldForwardProp;if(t.shouldForwardProp){var S=t.shouldForwardProp;m=function(e,t){return v(e,t)&&S(e,t)}}else m=v}var _=function(e,t){return function(e,t,n){var s=e.attrs,a=e.inlineStyle,i=e.defaultProps,u=e.shouldForwardProp,p=e.target,d=c.default.useContext?c.default.useContext(j):void 0,f=function(e,t,n){void 0===e&&(e=l);var o=r.__assign(r.__assign({},t),{theme:e}),s={};return n.forEach(function(e){var t,r=g(e)?e(o):e;for(t in r)o[t]=s[t]=r[t]}),[o,s]}(I(t,d,i)||l,t,s),y=f[1],h=a.generateStyleObject(f[0]),m=n,v=y.as||t.as||p,S=y!==t?r.__assign(r.__assign({},t),y):t,_={};for(var w in S)"$"!==w[0]&&"as"!==w&&("forwardedAs"===w?_.as=S[w]:u&&!u(w,v)||(_[w]=S[w]));return _.style=c.default.useMemo?c.default.useMemo(function(){return g(t.style)?function(e){return[h].concat(t.style(e))}:t.style?[h].concat(t.style):h},[t.style,h]):g(t.style)?function(e){return[h].concat(t.style(e))}:t.style?[h].concat(t.style):h,n&&(_.ref=m),o.createElement(v,_)}(w,e,t)};_.displayName=p;var w=c.default.forwardRef(_);return w.attrs=y,w.inlineStyle=new re(s?a.inlineStyle.rules.concat(n):n),w.displayName=p,w.shouldForwardProp=m,w.styledComponentId=!0,w.target=s?a.target:e,Object.defineProperty(w,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=s?function(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];for(var n=0,o=t;n<o.length;n++)ee(e,o[n],!0);return e}({},a.defaultProps,e):e}}),K(w,e,{attrs:!0,inlineStyle:!0,displayName:!0,shouldForwardProp:!0,target:!0}),w}),se=function(e){return T(oe,e)};["ActivityIndicator","Button","DatePickerIOS","DrawerLayoutAndroid","FlatList","Image","ImageBackground","KeyboardAvoidingView","Modal","Pressable","ProgressBarAndroid","ProgressViewIOS","RefreshControl","SafeAreaView","ScrollView","SectionList","Slider","Switch","Text","TextInput","TouchableHighlight","TouchableOpacity","View","VirtualizedList"].forEach(function(e){return Object.defineProperty(se,e,{enumerable:!0,configurable:!1,get:function(){if(e in ne&&ne[e])return se(ne[e]);throw new Error("".concat(e," is not available in the currently-installed version of react-native"))}})}),exports.ThemeConsumer=x,exports.ThemeContext=j,exports.ThemeProvider=function(e){var t=c.default.useContext(j),n=c.default.useMemo(function(){return function(e,t){if(!e)throw f(14);if(g(e)){var n=e(t);if("production"!==process.env.NODE_ENV&&(null===n||Array.isArray(n)||"object"!=typeof n))throw f(7);return n}if(Array.isArray(e)||"object"!=typeof e)throw f(8);return t?r.__assign(r.__assign({},t),e):e}(e.theme,t)},[e.theme,t]);return e.children?c.default.createElement(j.Provider,{value:n},e.children):null},exports.css=N,exports.default=se,exports.isStyledComponent=E,exports.styled=se,exports.toStyleSheet=function(e){var r=J(A(e)),n=t.parse(r),o=[];n.each(function(e){"decl"===e.type?o.push([e.prop,e.value]):"production"!==process.env.NODE_ENV&&"comment"!==e.type&&console.warn("Node of type ".concat(e.type," not supported as an inline style"))});var s=a.default(o,["borderWidth","borderColor"]);return ne.StyleSheet.create({style:s}).style},exports.useTheme=function(){var e=c.default.useContext(j);if(!e)throw f(18);return e},exports.withTheme=function(e){var t=c.default.forwardRef(function(t,n){var o=I(t,c.default.useContext(j),e.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===o&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'.concat(h(e),'"')),c.default.createElement(e,r.__assign(r.__assign({},t),{theme:o,ref:n}))});return t.displayName="WithTheme(".concat(h(e),")"),K(t,e)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("css-to-react-native"),t=require("postcss"),n=require("react");function o(e){return e&&e.__esModule?e:{default:e}}var r=/*#__PURE__*/o(e),s=/*#__PURE__*/o(n);const i=Object.freeze([]),a=Object.freeze({}),c="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s 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.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function l(e,...t){return"production"===process.env.NODE_ENV?new Error(`An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#${e} for more information.${t.length>0?` Args: ${t.join(", ")}`:""}`):new Error(function(...e){let t=e[0];const n=[];for(let t=1,o=e.length;t<o;t+=1)n.push(e[t]);return n.forEach(e=>{t=t.replace(/%[a-z]/,e)}),t}(c[e],...t).trim())}const u={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};function p(e,t){return null==t||"boolean"==typeof t||""===t?"":"number"!=typeof t||0===t||e in u||e.startsWith("--")?String(t).trim():`${t}px`}function d(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}const f=e=>e>="A"&&e<="Z";function y(e){let t="";for(let n=0;n<e.length;n++){const o=e[n];if(1===n&&"-"===o&&"-"===e[0])return e;f(o)?t+="-"+o.toLowerCase():t+=o}return t.startsWith("ms-")?"-"+t:t}function h(e){return"function"==typeof e}const m=Symbol.for("sc-keyframes");function g(e){return"object"==typeof e&&null!==e&&m in e}function v(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function b(e){return"object"==typeof e&&"styledComponentId"in e}const w=e=>null==e||!1===e||""===e,S=e=>{const t=[];for(const n in e){const o=e[n];e.hasOwnProperty(n)&&!w(o)&&(Array.isArray(o)&&o.isCss||h(o)?t.push(`${y(n)}:`,o,";"):v(o)?t.push(`${n} {`,...S(o),"}"):t.push(`${y(n)}: ${p(n,o)};`))}return t};function P(e,t,n,o,r=[]){if("string"==typeof e)return e&&r.push(e),r;if(w(e))return r;if(b(e))return r.push(`.${e.styledComponentId}`),r;if(h(e)){if(!h(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return r.push(e),r;{const s=e(t);return"production"===process.env.NODE_ENV||"object"!=typeof s||Array.isArray(s)||g(s)||v(s)||null===s||console.error(`${d(e)} 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.`),P(s,t,n,o,r)}}var s;if(g(e))return n?(e.inject(n,o),r.push(e.getName(o))):r.push(e),r;if(v(e)){const t=S(e);for(let e=0;e<t.length;e++)r.push(t[e]);return r}if(!Array.isArray(e))return r.push(e.toString()),r;for(let s=0;s<e.length;s++)P(e[s],t,n,o,r);return r}function O(e,t){const n=[e[0]];for(let o=0,r=t.length;o<r;o+=1)n.push(t[o],e[o+1]);return n}const E=e=>Object.assign(e,{isCss:!0});function C(e,...t){if(h(e)||v(e))return E(P(O(i,[e,...t])));const n=e;return 0===t.length&&1===n.length&&"string"==typeof n[0]?P(n):E(P(O(n,t)))}function j(e,t,n=a){if(!t)throw l(1,t);const o=(o,...r)=>e(t,n,C(o,...r));return o.attrs=o=>j(e,t,Object.assign(Object.assign({},n),{attrs:Array.prototype.concat(n.attrs,o).filter(Boolean)})),o.withConfig=o=>j(e,t,Object.assign(Object.assign({},n),o)),o}var A,N;function $(e){if("undefined"!=typeof process&&void 0!==process.env){const t=process.env[e];if(void 0!==t&&""!==t)return"false"!==t}}"undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process),Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:null!==(N=null!==(A=$("REACT_APP_SC_DISABLE_SPEEDY"))&&void 0!==A?A:$("SC_DISABLE_SPEEDY"))&&void 0!==N?N:"undefined"==typeof process||void 0===process.env||"production"!==process.env.NODE_ENV);const _=s.default.createContext(void 0),T=_.Consumer;function D(e,t,n=a){return e.theme!==n.theme&&e.theme||t||n.theme}const x=Symbol.for("react.memo"),I=Symbol.for("react.forward_ref"),k={contextType:!0,defaultProps:!0,displayName:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,propTypes:!0,type:!0},V={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},R={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},F={[I]:{$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},[x]:R};function L(e){return("type"in(t=e)&&t.type.$$typeof)===x?R:"$$typeof"in e?F[e.$$typeof]:k;var t}const M=Object.defineProperty,B=Object.getOwnPropertyNames,W=Object.getOwnPropertySymbols,q=Object.getOwnPropertyDescriptor,z=Object.getPrototypeOf,Y=Object.prototype;function H(e,t,n){if("string"!=typeof t){const o=z(t);o&&o!==Y&&H(e,o,n);const r=B(t).concat(W(t)),s=L(e),i=L(t);for(let o=0;o<r.length;++o){const a=r[o];if(!(a in V||n&&n[a]||i&&a in i||s&&a in s)){const n=q(t,a);try{M(e,a,n)}catch(e){}}}}return e}const G=/(a)(d)/gi,K=e=>String.fromCharCode(e+(e>25?39:97));function U(e,t){return e.join(t||"")}const Z=["fit-content","min-content","max-content"];let J={};function Q(e){return function(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}(e)?`styled.${e}`:`Styled(${d(e)})`}function X(e,t,n=!1){if(!n&&!v(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(let n=0;n<t.length;n++)e[n]=X(e[n],t[n]);else if(v(t))for(const n in t)e[n]=X(e[n],t[n]);return e}const ee=require("react-native");var te;const ne=(te=ee.StyleSheet,re=class{constructor(e){this.rules=e}generateStyleObject(e){const n=U(P(this.rules,e)),o=function(e){let t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=K(t%52)+n;return(K(t%52)+n).replace(G,"$1-$2")}(((e,t)=>{let n=t.length;for(;n;)e=33*e^t.charCodeAt(--n);return e})(5381,n)>>>0);if(!J[o]){let e;try{e=t.parse(n)}catch(e){return"production"!==process.env.NODE_ENV&&console.warn(`[styled-components/native] Failed to parse CSS: ${e instanceof Error?e.message:e}`),J[o]={},J[o]}const s=[];e.each(e=>{if("decl"===e.type){if(Z.includes(e.value))return void("production"!==process.env.NODE_ENV&&console.warn(`[styled-components/native] The value "${e.value}" for property "${e.prop}" is not supported in React Native and will be ignored.`));s.push([e.prop,e.value])}else"production"!==process.env.NODE_ENV&&"comment"!==e.type&&console.warn(`Node of type ${e.type} not supported as an inline style`)});const i=r.default(s,["borderWidth","borderColor"]),a=te.create({generated:i});J[o]=a.generated}return J[o]}},(e,t,o)=>{const r=b(e),c=e,{displayName:l=Q(e),attrs:u=i}=t,p=r&&c.attrs?c.attrs.concat(u).filter(Boolean):u;let d=t.shouldForwardProp;if(r&&c.shouldForwardProp){const e=c.shouldForwardProp;if(t.shouldForwardProp){const n=t.shouldForwardProp;d=(t,o)=>e(t,o)&&n(t,o)}else d=e}const f=(e,t)=>function(e,t,o){const{attrs:r,inlineStyle:i,defaultProps:c,shouldForwardProp:l,target:u}=e,p=s.default.useContext?s.default.useContext(_):void 0,d=D(t,p,c),[f,y]=function(e=a,t,n){const o=Object.assign(Object.assign({},t),{theme:e}),r={};return n.forEach(e=>{let t,n=h(e)?e(o):e;for(t in n)o[t]=r[t]=n[t]}),[o,r]}(d||a,t,r),m=i.generateStyleObject(f),g=o,v=y.as||t.as||u,b=y!==t?Object.assign(Object.assign({},t),y):t,w={};for(const e in b)"$"!==e[0]&&"as"!==e&&("forwardedAs"===e?w.as=b[e]:l&&!l(e,v)||(w[e]=b[e]));return w.style=s.default.useMemo?s.default.useMemo(()=>h(t.style)?e=>[m].concat(t.style(e)):t.style?[m].concat(t.style):m,[t.style,m]):h(t.style)?e=>[m].concat(t.style(e)):t.style?[m].concat(t.style):m,o&&(w.ref=g),n.createElement(v,w)}(y,e,t);f.displayName=l;let y=s.default.forwardRef(f);return y.attrs=p,y.inlineStyle=new re(r?c.inlineStyle.rules.concat(o):o),y.displayName=l,y.shouldForwardProp=d,y.styledComponentId=!0,y.target=r?c.target:e,Object.defineProperty(y,"defaultProps",{get(){return this._foldedDefaultProps},set(e){this._foldedDefaultProps=r?function(e,...t){for(const n of t)X(e,n,!0);return e}({},c.defaultProps,e):e}}),H(y,e,{attrs:!0,inlineStyle:!0,displayName:!0,shouldForwardProp:!0,target:!0}),y}),oe=e=>j(ne,e);var re;["ActivityIndicator","Button","DatePickerIOS","DrawerLayoutAndroid","FlatList","Image","ImageBackground","KeyboardAvoidingView","Modal","Pressable","ProgressBarAndroid","ProgressViewIOS","RefreshControl","SafeAreaView","ScrollView","SectionList","Slider","Switch","Text","TextInput","TouchableHighlight","TouchableOpacity","View","VirtualizedList"].forEach(e=>Object.defineProperty(oe,e,{enumerable:!0,configurable:!1,get(){if(e in ee&&ee[e])return oe(ee[e]);throw new Error(`${e} is not available in the currently-installed version of react-native`)}})),exports.ThemeConsumer=T,exports.ThemeContext=_,exports.ThemeProvider=function(e){const t=s.default.useContext(_),n=s.default.useMemo(()=>function(e,t){if(!e)throw l(14);if(h(e)){const n=e(t);if("production"!==process.env.NODE_ENV&&(null===n||Array.isArray(n)||"object"!=typeof n))throw l(7);return n}if(Array.isArray(e)||"object"!=typeof e)throw l(8);return t?Object.assign(Object.assign({},t),e):e}(e.theme,t),[e.theme,t]);return e.children?s.default.createElement(_.Provider,{value:n},e.children):null},exports.css=C,exports.default=oe,exports.isStyledComponent=b,exports.styled=oe,exports.toStyleSheet=e=>{const n=U(P(e)),o=t.parse(n),s=[];o.each(e=>{"decl"===e.type?s.push([e.prop,e.value]):"production"!==process.env.NODE_ENV&&"comment"!==e.type&&console.warn(`Node of type ${e.type} not supported as an inline style`)});const i=r.default(s,["borderWidth","borderColor"]);return ee.StyleSheet.create({style:i}).style},exports.useTheme=function(){const e=s.default.useContext(_);if(!e)throw l(18);return e},exports.withTheme=function(e){const t=s.default.forwardRef((t,n)=>{const o=D(t,s.default.useContext(_),e.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===o&&console.warn(`[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "${d(e)}"`),s.default.createElement(e,Object.assign(Object.assign({},t),{theme:o,ref:n}))});return t.displayName=`WithTheme(${d(e)})`,H(t,e)};
 //# sourceMappingURL=styled-components.native.cjs.js.map