styled-components 6.4.1 → 7.0.0-prerelease-20260511181111

package/README.md

@@ -188,6 +188,20 @@ const Card = styled.div`
 </ThemeProvider>
 ```
 
+Tokens are placeholder references that resolve at render time, not raw values. Interpolate them anywhere a CSS value goes; don't combine them with JS arithmetic. For runtime composition use `calc()`, or reach for `theme.raw.space.md` when you genuinely need the original number in JS.
+
+```tsx
+// works
+padding: ${theme.space.md};
+margin: ${theme.space.sm} ${theme.space.md};
+top: calc(${insets.top}px + ${theme.space.md});
+
+// breaks: JS `+` produces a malformed string the browser drops
+top: ${insets.top + theme.space.md};
+```
+
+See the [createTheme API docs](https://styled-components.com/docs/api#createtheme) for the full composition rules.
+
 ### Shared styles with `css`
 
 Extract reusable style blocks to share across components or apply conditionally.
@@ -256,6 +270,21 @@ const PasswordInput = styled.input.attrs({
 `;
 ```
 
+The function form receives a second `ast` argument for bridging declarations or theme tokens into props on third-party components. `peek` reads a value; `pop` reads and removes it from the rendered style. Both accept either a CSS property name or a typed dot-separated theme path:
+
+```tsx
+import { Path } from 'react-native-svg';
+
+const Icon = styled(Path).attrs((_props, ast) => ({
+  fill: ast.pop('color'),                  // lift the CSS color decl
+  stroke: ast.peek('palette.brand'),        // read from theme via typed path
+}))`
+  color: red;
+`;
+```
+
+Both methods take an optional fallback as the second argument, returned when the value is missing. The lift happens at construction time when the callback's behavior is fully determined by static declarations, so renders pay nothing extra.
+
 ## Documentation
 
 - [Getting started](https://styled-components.com/docs/basics)

package/dist/base.d.ts

@@ -5,9 +5,10 @@ import css from './constructors/css';
 import keyframes from './constructors/keyframes';
 import withTheme from './hoc/withTheme';
 import ServerStyleSheet from './models/ServerStyleSheet';
-import { IStyleSheetContext, IStyleSheetManager, IStylisContext, StyleSheetConsumer, StyleSheetContext, StyleSheetManager } from './models/StyleSheetManager';
+import { ICompilerContext, IStyleSheetContext, IStyleSheetManager, StyleSheetConsumer, StyleSheetContext, StyleSheetManager } from './models/StyleSheetManager';
 import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from './models/ThemeProvider';
+import extractCSS from './utils/extractCSS';
 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, createTheme, css, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };
+export { ICompilerContext, IStyleSheetContext, IStyleSheetManager, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, createTheme, css, extractCSS, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };

package/dist/constants.d.ts

@@ -4,14 +4,5 @@ export declare const SC_ATTR_VERSION = "data-styled-version";
 export declare const SC_VERSION: string;
 export declare const SPLITTER = "/*!sc*/\n";
 export declare const IS_BROWSER: boolean;
-/**
- * True when running in a React Server Component environment (createContext
- * is unavailable). In browser / standalone / native builds the entire
- * expression is replaced with the literal `false` via rollup-plugin-replace
- * with empty delimiters (exact string match), enabling rollup constant
- * inlining and terser dead-code elimination for all RSC branches.
- */
-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/dist/constructors/createGlobalStyle.d.ts

@@ -10,4 +10,6 @@ import { ExecutionProps, Interpolation, Styles } from '../types';
  * // Render <GlobalStyle /> at the root of your app
  * ```
  */
-export default function createGlobalStyle<Props extends object>(strings: Styles<Props>, ...interpolations: Array<Interpolation<Props>>): React.NamedExoticComponent<ExecutionProps & Props>;
+export default function createGlobalStyle<Props extends object>(strings: Styles<Props>, ...interpolations: Array<Interpolation<Props>>): React.NamedExoticComponent<ExecutionProps & Props> & {
+    styledComponentId: string;
+};

package/dist/constructors/createTheme.d.ts

@@ -1,57 +1,4 @@
-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;
-    /**
-     * Same shape as the theme but every leaf is the bare CSS custom property
-     * name (e.g. `"--sc-colors-primary"`). Useful for building dark mode
-     * overrides without hand-writing variable names.
-     *
-     * @example
-     * ```tsx
-     * const { vars } = createTheme({ colors: { bg: '#fff', text: '#000' } });
-     * vars.colors.bg  // "--sc-colors-bg"
-     *
-     * const DarkMode = createGlobalStyle`
-     *   .dark {
-     *     ${vars.colors.bg}: #111;
-     *     ${vars.colors.text}: #eee;
-     *   }
-     * `;
-     * ```
-     */
-    vars: CSSVarTheme<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;
-};
+import type { ThemeContract } from './createTheme.types';
 interface CreateThemeOptions {
     /**
      * Prefix for CSS variable names. Defaults to `"sc"`.
@@ -79,7 +26,7 @@ interface CreateThemeOptions {
  *
  * 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.
+ * 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

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

@@ -0,0 +1,19 @@
+import type { ThemeContract } from './createTheme.types';
+interface CreateThemeOptions {
+    prefix?: string;
+    /** Ignored on native; only web uses selector scoping. */
+    selector?: string;
+}
+/**
+ * React Native entry for `createTheme`. Leaves are sentinel strings of
+ * the form `\0<prefix>:<path>:<fallback>` that the render-time
+ * resolver in `src/native/transform/polyfills/resolvers.ts` substitutes
+ * with the current `<ThemeProvider>` value. Keeps zero DOM imports so
+ * the native bundle can't transitively drag in `createGlobalStyle`.
+ *
+ * `GlobalStyle` is a no-op null component on native; style variables
+ * don't need a cascade-layer root because `<ThemeProvider>` deep-merges
+ * overrides into a single resolved theme object each render.
+ */
+export default function createTheme<T extends Record<string, any>>(defaultTheme: T, options?: CreateThemeOptions): ThemeContract<T>;
+export {};

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

@@ -0,0 +1,15 @@
+/**
+ * Shared helpers for the web (`createTheme.ts`) and native
+ * (`createTheme.native.ts`) entry points. Imported by both; keeps the
+ * tree-walking + path concatenation logic in one place so changes
+ * stay coherent across platforms.
+ */
+/**
+ * Recursive theme traversal. For each leaf value, calls `leafFn(path, val)`
+ * and writes the return into `result` at the matching key. Nested objects
+ * recurse, accumulating `path` segments separated by `separator`.
+ *
+ * Web uses `-` (CSS-friendly: `--sc-colors-bg`).
+ * Native uses `.` (dot-path-friendly: `colors.bg`).
+ */
+export declare function walkTheme(obj: Record<string, any>, separator: string, result: Record<string, any>, leafFn: (fullPath: string, val: any) => any, path?: string): void;

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

@@ -0,0 +1,30 @@
+import type createGlobalStyle from './createGlobalStyle';
+type ThemeLeaf = string | number;
+/** Every leaf becomes a string (CSS `var()` on web, sentinel on native). */
+export 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
+ * with every leaf replaced by a string, plus a few auxiliary fields
+ * that let consumers wire the theme up to their render tree.
+ */
+export type ThemeContract<T> = CSSVarTheme<T> & {
+    /**
+     * A component that, when mounted, emits the CSS custom properties on
+     * web or acts as a no-op null on native.
+     */
+    GlobalStyle: ReturnType<typeof createGlobalStyle>;
+    /** The original theme object (unmodified). */
+    raw: T;
+    /** Bare CSS custom-property names (`"--sc-colors-bg"` etc). */
+    vars: CSSVarTheme<T>;
+    /**
+     * Snapshot the current resolved theme. On web, reads computed CSS
+     * values from the target element (or `document.documentElement`).
+     * On native, returns the default theme (live overrides are already
+     * applied at each render via the resolver pass).
+     */
+    resolve(el?: Element): T;
+};
+export {};

package/dist/constructors/css.d.ts

@@ -1,4 +1,13 @@
-import { Interpolation, RuleSet, Styles } from '../types';
+import { BaseObject, Interpolation, RuleSet, Styles } from '../types';
+export { getSource } from '../parser/source';
+/**
+ * Body of `css(...)`, accepting interpolations as a pre-built array so
+ * the hot call site (`templateFunction` in `constructWithOptions`) can
+ * skip the rest→spread→rest dance. Public `css(...)` collects its rest
+ * args into an array and forwards here; `templateFunction` already has
+ * a rest array and forwards it directly.
+ */
+export declare function cssWithInterpolations<Props extends object = BaseObject>(styles: Styles<NoInfer<Props>>, interpolations: Interpolation<NoInfer<Props>>[]): RuleSet<NoInfer<Props>>;
 /**
  * Tag a CSS template literal for use in styled components, createGlobalStyle, or attrs.
  * Enables interpolation type-checking and shared style blocks.

package/dist/hoc/withTheme.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { AnyComponent, ExecutionProps } from '../types';
 import { NonReactStatics } from '../utils/hoist';
-type WithThemeOuterProps<T extends AnyComponent> = Omit<React.ComponentPropsWithRef<T>, keyof ExecutionProps> & ExecutionProps;
+type WithThemeOuterProps<T extends AnyComponent> = Omit<React.ComponentPropsWithRef<T>, keyof ExecutionProps> & ExecutionProps & {
+    ref?: React.Ref<any> | undefined;
+};
 /** Higher-order component that injects the current theme as a prop. Prefer `useTheme` in function components. */
-export default function withTheme<T extends AnyComponent>(Component: T): React.ForwardRefExoticComponent<React.PropsWithoutRef<WithThemeOuterProps<T>> & React.RefAttributes<any>> & NonReactStatics<T>;
+export default function withTheme<T extends AnyComponent>(Component: T): React.FC<WithThemeOuterProps<T>> & NonReactStatics<T>;
 export {};

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import styled, { LibraryStyled, Styled, StyledInstance } from './constructors/styled';
 export * from './base';
-export { default as stylisPluginRSC } from './utils/stylisPluginRSC';
-export { CSSKeyframes, CSSObject, CSSProp, CSSProperties, CSSPseudos, DataAttributes, DefaultTheme, ExecutionContext, ExecutionProps, FastOmit, Interpolation, IStyledComponent, IStyledComponentFactory, IStyledStatics, PolymorphicComponent, PolymorphicComponentProps, RuleSet, Runtime, StyledObject, StyledOptions, StyleFunction, SupportedHTMLElements, WebTarget, } from './types';
+export { CompiledAst, CSSKeyframes, CSSObject, CSSProp, CSSProperties, CSSPseudos, DataAttributes, DefaultTheme, ExecutionContext, ExecutionProps, FastOmit, Interpolation, IStyledComponent, IStyledComponentFactory, IStyledStatics, PolymorphicComponent, PolymorphicComponentProps, RuleSet, Runtime, StyledObject, StyledOptions, StyleFunction, SupportedHTMLElements, WebTarget, } from './types';
 export { styled as default, LibraryStyled, Styled, styled, StyledInstance };

package/dist/models/Keyframes.d.ts

@@ -1,12 +1,34 @@
 import StyleSheet from '../sheet';
-import { Keyframes as KeyframesType, Stringifier } from '../types';
+import { Compiler, Keyframes as KeyframesType } from '../types';
 import { KEYFRAMES_SYMBOL } from '../utils/isKeyframes';
+/**
+ * Pure compile output for a keyframes interpolation. `id` is the
+ * KEYFRAMES_ID_PREFIX-prefixed sheet group ID; `name` is the compiler-resolved
+ * keyframes name (used as both the @keyframes identifier and the dedup key);
+ * `rules` is the compiled CSS ready for `StyleSheet.insertRules`.
+ */
+export interface CompiledKeyframes {
+    id: string;
+    name: string;
+    rules: string[];
+}
 export default class Keyframes implements KeyframesType {
     readonly [KEYFRAMES_SYMBOL]: true;
     id: string;
     name: string;
     rules: string;
     constructor(name: string, rules: string);
-    inject: (styleSheet: StyleSheet, stylisInstance?: Stringifier) => void;
-    getName(stylisInstance?: Stringifier): string;
+    /**
+     * Pure: produce the compiled CSS without touching any sheet. Callers carry
+     * the result through their own generate→inject pipeline so the parser stays
+     * side-effect-free.
+     */
+    compile(compiler?: Compiler): CompiledKeyframes;
+    getName(compiler?: Compiler): string;
 }
+/**
+ * Write a batch of compiled keyframes to the sheet. Idempotent via
+ * `hasNameForId`. Shared by `WebStyle.inject` and `WebGlobalStyle.computeRules`
+ * so both callers route through one bytecode path.
+ */
+export declare function flushKeyframes(styleSheet: StyleSheet, compiled: CompiledKeyframes[]): void;

package/dist/models/NativeStyle.d.ts

@@ -0,0 +1,7 @@
+import { INativeStyleConstructor, StyleSheet } from '../types';
+import { NativeStyles, cssToStyleObject, resetNativeStyleCache, RN_UNSUPPORTED_VALUES } from './compileNative';
+export { RN_UNSUPPORTED_VALUES, cssToStyleObject };
+export type { NativeStyles };
+/** Clear the cached CSS-to-style-object mappings. Useful in tests or long-running RN apps with highly dynamic styles. */
+export declare const resetStyleCache: typeof resetNativeStyleCache;
+export default function makeNativeStyleClass<Props extends object>(styleSheet: StyleSheet): INativeStyleConstructor<Props>;

package/dist/models/StyleSheetManager.d.ts

@@ -1,33 +1,31 @@
 import React from 'react';
-import type stylis from 'stylis';
 import StyleSheet from '../sheet';
-import { InsertionTarget, ShouldForwardProp, Stringifier } from '../types';
+import { Compiler, InsertionTarget, ShouldForwardProp } from '../types';
+import { SCPlugin } from '../utils/compiler';
 export declare const mainSheet: StyleSheet;
-export declare const mainStylis: Stringifier;
+export declare const mainCompiler: Compiler;
+/**
+ * Reset the RSC override slot. Test-only; production code never reads this.
+ * `React.cache` scopes the slot per render in true Flight environments, but
+ * regular SSR (`ReactDOMServer.renderToString`) doesn't activate that
+ * scoping, so the slot persists across sequential calls. Suites that
+ * simulate RSC mode call this in `beforeEach` to start each render from a
+ * clean default context.
+ */
+export declare function __resetRSCOverrideForTesting(): void;
 export type IStyleSheetContext = {
     shouldForwardProp?: ShouldForwardProp<'web'> | undefined;
     styleSheet: StyleSheet;
-    stylis: Stringifier;
-    /** Preserved for inheritance — inner SSMs that set namespace/vendorPrefixes
-     *  but not stylisPlugins can still inherit the parent's plugins. */
-    stylisPlugins?: stylis.Middleware[] | undefined;
+    compiler: Compiler;
+    /** Preserved for inheritance; inner SSMs that set namespace but not plugins
+     *  still inherit the parent's plugins. */
+    plugins?: SCPlugin[] | undefined;
 };
 export declare const StyleSheetContext: React.Context<IStyleSheetContext>;
 export declare const StyleSheetConsumer: React.Consumer<IStyleSheetContext>;
-export type IStylisContext = Stringifier | void;
+export type ICompilerContext = Compiler | void;
 export declare function useStyleSheetContext(): IStyleSheetContext;
 export type IStyleSheetManager = React.PropsWithChildren<{
-    /**
-     * If desired, you can pass this prop to disable "speedy" insertion mode, which
-     * uses the browser [CSSOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet).
-     * When disabled, rules are inserted as simple text into style blocks.
-     */
-    disableCSSOMInjection?: undefined | boolean;
-    /**
-     * If you are working exclusively with modern browsers, vendor prefixes can often be omitted
-     * to reduce the weight of CSS on the page.
-     */
-    enableVendorPrefixes?: undefined | boolean;
     /**
      * Provide an optional selector to be prepended to all generated style rules.
      */
@@ -38,35 +36,25 @@ export type IStyleSheetManager = React.PropsWithChildren<{
      */
     sheet?: undefined | StyleSheet;
     /**
-     * Starting in v6, styled-components no longer does its own prop validation
-     * and recommends use of transient props "$prop" to pass style-only props to
-     * components. If for some reason you are not able to use transient props, a
-     * prop validation function can be provided via `StyleSheetManager`, such as
-     * `@emotion/is-prop-valid`.
-     *
-     * When the return value is `true`, props will be forwarded to the DOM/underlying
-     * component. If return value is `false`, the prop will be discarded after styles
-     * are calculated.
-     *
-     * Manually composing `styled.{element}.withConfig({shouldForwardProp})` will
-     * override this default.
-     *
-     * When nested inside another `StyleSheetManager`, omitting this prop inherits
-     * the parent's function. Pass `undefined` explicitly or a passthrough function
-     * to disable inherited behavior for a subtree.
+     * Filter which props reach the underlying DOM element. Return `true` to
+     * forward, `false` to drop. Prefer transient props (`$prop`) when
+     * possible; reach for this when bridging a third-party prop validator.
+     * Component-level `withConfig({shouldForwardProp})` overrides this. Nested
+     * SSMs inherit the parent's function unless this prop is set to
+     * `undefined` or a passthrough.
      */
     shouldForwardProp?: undefined | IStyleSheetContext['shouldForwardProp'];
     /**
-     * An array of plugins to be run by stylis (style processor) during compilation.
-     * Check out [what's available on npm*](https://www.npmjs.com/search?q=keywords%3Astylis).
-     *
-     * \* The plugin(s) must be compatible with stylis v4 or above.
+     * Plugins to apply during CSS emission. v7 ships first-party plugins via
+     * `styled-components/plugins` (`rscPlugin`, `rtlPlugin`); other plugins must
+     * implement the v7 `SCPlugin` shape (`{ name, rw?, decl? }`). Legacy stylis
+     * plugins are not supported.
      *
      * When nested inside another `StyleSheetManager`, omitting this prop inherits
      * the parent's plugins. Pass an empty array (`[]`) to explicitly disable
      * inherited plugins for a subtree.
      */
-    stylisPlugins?: undefined | stylis.Middleware[];
+    plugins?: undefined | SCPlugin[];
     /**
      * CSP nonce to attach to injected `<style>` tags. Overrides auto-detection
      * from `<meta name="sc-nonce">`, `<meta property="csp-nonce">`, or `__webpack_nonce__`.
@@ -77,5 +65,5 @@ export type IStyleSheetManager = React.PropsWithChildren<{
      */
     target?: undefined | InsertionTarget;
 }>;
-/** Configure style injection for descendant styled components (target element, stylis plugins, prop forwarding). */
+/** Configure style injection for descendant styled components (target element, plugins, prop forwarding). */
 export declare function StyleSheetManager(props: IStyleSheetManager): React.JSX.Element;

package/dist/models/StyledComponent.d.ts

@@ -1,3 +1,6 @@
 import type { BaseObject, IStyledComponentFactory, RuleSet, StyledOptions, WebTarget } from '../types';
+/** Test-only: clear the per-displayName counter so component IDs stay stable
+ *  across tests. Not for production use. */
+export declare const resetIdentifiers: () => void;
 declare function createStyledComponent<Target extends WebTarget, OuterProps extends BaseObject, Statics extends BaseObject = BaseObject>(target: Target, options: StyledOptions<'web', OuterProps>, rules: RuleSet<OuterProps>): ReturnType<IStyledComponentFactory<'web', Target, OuterProps, Statics>>;
 export default createStyledComponent;

package/dist/models/StyledNativeComponent.d.ts

@@ -1,3 +1,22 @@
-import type { BaseObject, ExecutionProps, IInlineStyleConstructor, IStyledComponentFactory, NativeTarget, RuleSet, StyledOptions } from '../types';
-declare const _default: (InlineStyle: IInlineStyleConstructor<any>) => <Target extends NativeTarget, OuterProps extends ExecutionProps, Statics extends object = BaseObject>(target: Target, options: StyledOptions<"native", OuterProps>, rules: RuleSet<OuterProps>) => ReturnType<IStyledComponentFactory<"native", Target, OuterProps, Statics>>;
+import { ContainerContextValue, MediaQueryEnv } from '../native/responsive';
+import type { BaseObject, Dict, ExecutionProps, INativeStyleConstructor, IStyledComponentFactory, NativeTarget, RuleSet, StyledOptions } from '../types';
+import type { NativeStyles } from './compileNative';
+/**
+ * Compose a static `base` style with the user-supplied `props.style`. RN's
+ * `Pressable`/`TextInput` accept a function for `style` (state callback);
+ * pass-through that shape by wrapping the function call.
+ *
+ * `normalizeStyleForWeb` is invoked on the user-supplied side; it patches
+ * around rn-web's translation gaps (e.g. 16-element matrix transforms).
+ * It's a no-op on native and returns the same reference when no rewrite
+ * is needed, so identity-based caches downstream stay intact.
+ */
+export declare function composeBase(base: object, userStyle: any): any;
+/**
+ * Assemble the final `style` value passed to the underlying RN element.
+ * Pulled out of the render hook so the cache-hit path can short-circuit
+ * to a single property read without paying for any of this work.
+ */
+export declare function assembleFinalStyle(compiled: NativeStyles, env: MediaQueryEnv, containerCtx: ContainerContextValue, theme: Record<string, any>, userStyle: any, props: Record<string, unknown>, baseOverride?: Dict<any>): any;
+declare const _default: (NativeStyle: INativeStyleConstructor<any>) => <Target extends NativeTarget, OuterProps extends ExecutionProps, Statics extends object = BaseObject>(target: Target, options: StyledOptions<"native", OuterProps>, rules: RuleSet<OuterProps>) => ReturnType<IStyledComponentFactory<"native", Target, OuterProps, Statics>>;
 export default _default;

package/dist/models/ThemeProvider.d.ts

@@ -32,16 +32,7 @@ type Props = {
 };
 export declare const ThemeContext: React.Context<DefaultTheme | undefined>;
 export declare const ThemeConsumer: React.Consumer<DefaultTheme | undefined>;
-/**
- * Returns the current theme (as provided by the closest ancestor `ThemeProvider`.)
- *
- * If no `ThemeProvider` is found, the function will error. If you need access to the theme in an
- * uncertain composition scenario, `React.useContext(ThemeContext)` will not emit an error if there
- * is no `ThemeProvider` ancestor.
- */
+/** Returns the current theme; throws if no `ThemeProvider` ancestor. */
 export declare function useTheme(): DefaultTheme;
-/**
- * Provide a theme to an entire react component tree via context
- */
 export default function ThemeProvider(props: Props): React.JSX.Element | null;
 export {};

package/dist/models/WebGlobalStyle.d.ts

@@ -0,0 +1,24 @@
+import StyleSheet from '../sheet';
+import { Compiler, ExecutionContext, RuleSet } from '../types';
+type InstanceEntry = {
+    name: string;
+    rules: string[];
+};
+export default class WebGlobalStyle<Props extends object> {
+    componentId: string;
+    isStatic: boolean;
+    rules: RuleSet<Props>;
+    /** @internal Per-instance rule cache for shared-group rebuild. */
+    instanceRules: Map<string, InstanceEntry>;
+    constructor(rules: RuleSet<Props>, componentId: string);
+    removeStyles(instance: string, styleSheet: StyleSheet): void;
+    renderStyles(instance: string, executionContext: ExecutionContext & Props, styleSheet: StyleSheet, compiler: Compiler): void;
+    private computeRules;
+    /**
+     * Clear all CSS rules in the shared group and re-insert from surviving instances.
+     * Must run synchronously; no yielding between clear and re-insert.
+     * Static globals: all instances share identical CSS, emit once.
+     */
+    private rebuildGroup;
+}
+export {};

package/dist/models/WebStyle.d.ts

@@ -0,0 +1,55 @@
+import StyleSheet from '../sheet';
+import { Compiler, ExecutionContext, RuleSet } from '../types';
+import { type CompiledKeyframes } from './Keyframes';
+/** Per-level output of `generate()`; one entry per link in the inheritance chain. */
+type GeneratedLevel = {
+    componentId: string;
+    name: string;
+    rules: string[];
+    isNew: boolean;
+};
+export type GeneratedStyle = {
+    /** Space-joined class name chain (base first, `this` last). */
+    className: string;
+    /** Inheritance chain output, base first, `this` last. */
+    levels: GeneratedLevel[];
+    /**
+     * Compiled keyframes referenced via `${kf}` interpolation, including those
+     * collected by base styles. Order is base-first → this-last so injection
+     * preserves the v6 sheet-ordering invariant. Empty when no `${kf}` refs.
+     */
+    keyframes: CompiledKeyframes[];
+};
+/** CSS-side state for one styled component (parallel to the React-side `StyledComponent`). */
+export default class WebStyle {
+    baseHash: number;
+    baseStyle: WebStyle | null | undefined;
+    componentId: string;
+    rules: RuleSet<any>;
+    /** Interp-tuple → class name. Hit skips `buildHashCSS` entirely. */
+    interpKeyCache: Map<string, string> | undefined;
+    /** Joined-CSS → class name. Hit skips `phash + generateName`. */
+    cssKeyCache: Map<string, string> | undefined;
+    /** Lazy `getSource(rules)` cache; once read, future renders skip the WeakMap. */
+    private resolvedSource;
+    /** Reused scratch buffer so warm renders don't allocate fresh `filled[]`. */
+    private filledBuffer;
+    /** Parallel fragment side-table; allocated lazily on first fragment-bearing render. */
+    private fragmentsBuffer;
+    /**
+     * Pending keyframes collected during `evaluateForFastPath`. Reused across
+     * renders; cleared at the top of `generate()`. Only allocated lazily when
+     * the source actually carries `${kf}` interpolations.
+     */
+    private keyframesBuffer;
+    constructor(rules: RuleSet<any>, componentId: string, baseStyle?: WebStyle | undefined);
+    /**
+     * Produce per-level compiled CSS without writing to the sheet. Walks the
+     * inheritance chain so callers get the full chain's output in one pass.
+     */
+    generate(executionContext: ExecutionContext, styleSheet: StyleSheet, compiler: Compiler): GeneratedStyle;
+    inject(styleSheet: StyleSheet, generated: GeneratedStyle): string;
+    /** Compute the inheritance plan and write any new rules to the sheet in one call. */
+    flush(executionContext: ExecutionContext, styleSheet: StyleSheet, compiler: Compiler): string;
+}
+export {};