styled-components 6.4.0-prerelease.1 → 6.4.0-prerelease.11

package/README.md

@@ -7,7 +7,9 @@
 <br />
 
 <div align="center">
-  <strong>Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅</strong>
+  <strong>Fast, expressive styling for React.</strong>
+  <br />
+  Server components, client components, streaming SSR, React Native—one API.
   <br />
   <br />
   <a href="https://www.npmjs.com/package/styled-components"><img src="https://img.shields.io/npm/dm/styled-components.svg" alt="npm downloads"></a>
@@ -16,19 +18,26 @@
 
 ---
 
-`styled-components` lets you write actual CSS in your JavaScript using tagged template literals. It removes the mapping between components and styles, making components the styling primitive.
+styled-components is largely maintained by one person. Please help fund the project for consistent long-term support and updates: [Open Collective](https://opencollective.com/styled-components)
+
+---
 
-- Built-in TypeScript types (no `@types` package needed)
-- React Server Components (RSC) support via automatic runtime detection
-- React Native support
-- Compatible with React 16.8+, including React 19
+Style React components with real CSS, scoped automatically and delivered only when needed. No class name juggling, no separate files, no build step required.
 
-## Installation
+- **Works everywhere React runs.** Server components, client components, streaming SSR, and React Native—same API, automatic runtime detection.
+- **Full CSS, no compromises.** Media queries, pseudo-selectors, nesting, keyframes, global styles. If CSS supports it, so does styled-components.
+- **TypeScript-first.** Built-in types ship with the package. Props flow through to your styles with full inference—no `@types` install, no manual generics.
+- **<13kB gzipped.** Small enough to disappear in your bundle. No build plugin required.
+
+## Install
 
 ```sh
 npm install styled-components
 ```
 
+<details>
+<summary>pnpm / yarn</summary>
+
 ```sh
 pnpm add styled-components
 ```
@@ -37,55 +46,228 @@ pnpm add styled-components
 yarn add styled-components
 ```
 
-## Example
+</details>
 
-```jsx
+## Quick examples
+
+### Dynamic props
+
+Vary styles based on component props. Prefix transient props with `$` to keep them off the DOM.
+
+```tsx
 import styled from 'styled-components';
 
-const Title = styled.h1`
-  font-size: 1.5em;
-  text-align: center;
-  color: palevioletred;
+const Button = styled.button<{ $primary?: boolean }>`
+  background: ${props => (props.$primary ? 'palevioletred' : 'white')};
+  color: ${props => (props.$primary ? 'white' : 'palevioletred')};
+  font-size: 1em;
+  padding: 0.25em 1em;
+  border: 2px solid palevioletred;
+  border-radius: 3px;
+`;
+
+<Button>Normal</Button>
+<Button $primary>Primary</Button>
+```
+
+### Extending styles
+
+Build variants on top of existing styled components.
+
+```tsx
+const TomatoButton = styled(Button)`
+  background: tomato;
+  color: white;
+  border-color: tomato;
 `;
+```
+
+### Polymorphic `as` prop
+
+Swap the rendered element without changing styles.
+
+```tsx
+// Renders a <a> tag with Button styles
+<Button as="a" href="/home">Link Button</Button>
+```
+
+### Pseudos and nesting
+
+Use `&` to reference the component's generated class name—works with pseudo-classes, pseudo-elements, and nested selectors.
+
+```tsx
+const Input = styled.input`
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0.5em;
+
+  &:focus {
+    border-color: palevioletred;
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #aaa;
+  }
+`;
+```
+
+### Animations
+
+Define `@keyframes` once, reference them across components. Names are scoped automatically.
+
+```tsx
+import styled, { keyframes } from 'styled-components';
+
+const rotate = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+
+const Spinner = styled.div`
+  animation: ${rotate} 1s linear infinite;
+  width: 40px;
+  height: 40px;
+  border: 3px solid palevioletred;
+  border-top-color: transparent;
+  border-radius: 50%;
+`;
+```
+
+### Theming
+
+Share design tokens across your app via React context. Every styled component receives `props.theme`.
+
+```tsx
+import styled, { ThemeProvider } from 'styled-components';
+
+const theme = {
+  fg: 'palevioletred',
+  bg: 'white',
+};
 
-const Wrapper = styled.section`
-  padding: 4em;
-  background: papayawhip;
+const Card = styled.div`
+  background: ${props => props.theme.bg};
+  color: ${props => props.theme.fg};
+  padding: 2em;
 `;
 
-function MyUI() {
-  return (
-    <Wrapper>
-      <Title>Hello World, this is my first styled component!</Title>
-    </Wrapper>
-  );
-}
+<ThemeProvider theme={theme}>
+  <Card>Themed content</Card>
+</ThemeProvider>
 ```
 
-Style objects are also supported:
+### RSC-compatible themes
 
-```jsx
-const Button = styled.button({
-  color: 'grey',
+`createTheme` turns your tokens into CSS custom properties. Class name hashes stay stable across theme variants—no hydration mismatch when switching light/dark.
+
+```tsx
+import styled, { createTheme, ThemeProvider } from 'styled-components';
+
+const { theme, GlobalStyle: ThemeVars } = createTheme({
+  colors: {
+    fg: 'palevioletred',
+    bg: 'white',
+  },
+  space: {
+    md: '1rem',
+  },
 });
+
+const Card = styled.div`
+  color: ${theme.colors.fg};       /* var(--sc-colors-fg, palevioletred) */
+  background: ${theme.colors.bg};
+  padding: ${theme.space.md};
+`;
+
+// Render <ThemeVars /> at the root to emit the CSS variable declarations
+// Pass the theme to ThemeProvider for stable hashes
+<ThemeProvider theme={theme}>
+  <ThemeVars />
+  <Card>Token-driven content</Card>
+</ThemeProvider>
+```
+
+### Shared styles with `css`
+
+Extract reusable style blocks to share across components or apply conditionally.
+
+```tsx
+import styled, { css } from 'styled-components';
+
+const truncate = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const Label = styled.span`
+  ${truncate}
+  max-width: 200px;
+`;
+```
+
+### Styling third-party components
+
+Wrap any component that accepts a `className` prop.
+
+```tsx
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)`
+  color: palevioletred;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
 ```
 
-## [Docs](https://www.styled-components.com/docs)
+### Global styles
+
+Inject app-wide CSS like resets and font faces. Supports theming and dynamic updates.
+
+```tsx
+import { createGlobalStyle } from 'styled-components';
 
-See the documentation at [styled-components.com/docs](https://www.styled-components.com/docs) for full usage information.
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    font-family: system-ui, sans-serif;
+  }
+`;
+
+// Render <GlobalStyle /> at the root of your app
+```
 
-- [Getting started](https://www.styled-components.com/docs/basics)
-- [API Reference](https://styled-components.com/docs/api)
-- [Theming](https://www.styled-components.com/docs/advanced#theming)
-- [Server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering)
-- [React Server Components](https://www.styled-components.com/docs/advanced#react-server-components)
-- [React Native](https://www.styled-components.com/docs/basics#react-native)
+### Attrs
 
-## Contributing
+Set default or static HTML attributes so consumers don't have to.
 
-See our [contributing and community guidelines](./CONTRIBUTING.md) and [Code of Conduct](./CODE_OF_CONDUCT.md).
+```tsx
+const PasswordInput = styled.input.attrs({
+  type: 'password',
+  placeholder: 'Enter password',
+})`
+  border: 1px solid #ccc;
+  padding: 0.5em;
+`;
+```
 
-Check out [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) for community libraries, projects, and examples.
+## Documentation
+
+- [Getting started](https://styled-components.com/docs/basics)
+- [API reference](https://styled-components.com/docs/api)
+- [Server-side rendering](https://styled-components.com/docs/advanced#server-side-rendering)
+- [React Server Components](https://styled-components.com/docs/advanced#react-server-components)
+- [Theming](https://styled-components.com/docs/advanced#theming)
+- [React Native](https://styled-components.com/docs/basics#react-native)
+
+## Community
+
+[Contributing guidelines](./CONTRIBUTING.md) | [Code of Conduct](./CODE_OF_CONDUCT.md) | [awesome-styled-components](https://github.com/styled-components/awesome-styled-components)
 
 ## Contributors
 
@@ -95,7 +277,7 @@ This project exists thanks to all the people who contribute.
 
 ## Backers
 
-Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/styled-components#backer)]
+Thank you to all our backers! [[Become a backer](https://opencollective.com/styled-components#backer)]
 
 <a href="https://opencollective.com/styled-components#backers" target="_blank"><img src="https://opencollective.com/styled-components/backers.svg?width=890"></a>
 
@@ -105,14 +287,10 @@ Support this project by becoming a sponsor. [[Become a sponsor](https://opencoll
 
 <a href="https://opencollective.com/styled-components#sponsors" target="_blank"><img src="https://opencollective.com/styled-components/sponsors.svg?width=890"></a>
 
-## License
-
-Licensed under the MIT License, Copyright © 2016-present styled-components contributors.
-
-See [LICENSE](./LICENSE) for more information.
-
 ## Acknowledgements
 
-This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.
+This project builds on earlier work by Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson, and Andrey Sitnik. Special thanks to [@okonet](https://github.com/okonet) for the logo.
+
+## License
 
-Special thanks to [@okonet](https://github.com/okonet) for the fantastic logo.
+Licensed under the MIT License, Copyright © 2016-present styled-components contributors. See [LICENSE](./LICENSE) for details.

package/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/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/dist/constructors/createGlobalStyle.d.ts

@@ -1,3 +1,13 @@
 import React from 'react';
 import { ExecutionProps, Interpolation, Styles } from '../types';
+/**
+ * Create a component that injects global CSS when mounted. Supports theming and dynamic props.
+ *
+ * ```tsx
+ * const GlobalStyle = createGlobalStyle`
+ *   body { margin: 0; font-family: system-ui; }
+ * `;
+ * // 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>;

package/dist/constructors/createTheme.d.ts

@@ -0,0 +1,108 @@
+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;
+};
+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 backed by CSS custom properties, bridging `ThemeProvider` and CSS variables.
+ *
+ * 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/dist/constructors/css.d.ts

@@ -1,4 +1,16 @@
 import { Interpolation, RuleSet, Styles } from '../types';
+/**
+ * Tag a CSS template literal for use in styled components, createGlobalStyle, or attrs.
+ * Enables interpolation type-checking and shared style blocks.
+ *
+ * ```tsx
+ * const truncate = css`
+ *   white-space: nowrap;
+ *   overflow: hidden;
+ *   text-overflow: ellipsis;
+ * `;
+ * ```
+ */
 declare function css(styles: Styles<object>, ...interpolations: Interpolation<object>[]): RuleSet<object>;
 declare function css<Props extends object>(styles: Styles<NoInfer<Props>>, ...interpolations: Interpolation<NoInfer<Props>>[]): RuleSet<NoInfer<Props>>;
 export default css;

package/dist/constructors/keyframes.d.ts

@@ -1,3 +1,14 @@
 import Keyframes from '../models/Keyframes';
 import { Interpolation, Styles } from '../types';
+/**
+ * Define a CSS `@keyframes` animation with an automatically scoped name.
+ *
+ * ```tsx
+ * const rotate = keyframes`
+ *   from { transform: rotate(0deg); }
+ *   to { transform: rotate(360deg); }
+ * `;
+ * const Spinner = styled.div`animation: ${rotate} 1s linear infinite;`;
+ * ```
+ */
 export default function keyframes<Props extends object = {}>(strings: Styles<Props>, ...interpolations: Array<Interpolation<Props>>): Keyframes;

package/dist/constructors/styled.d.ts

@@ -2,6 +2,14 @@ import * as React from 'react';
 import { BaseObject, KnownTarget, WebTarget } from '../types';
 import { SupportedHTMLElements } from '../utils/domElements';
 import { Styled as StyledInstance } from './constructWithOptions';
+/**
+ * Create a styled component from an HTML element or React component.
+ *
+ * ```tsx
+ * const Button = styled.button`color: red;`;
+ * const Link = styled(RouterLink)`text-decoration: none;`;
+ * ```
+ */
 declare const baseStyled: <Target extends WebTarget, InjectedProps extends object = BaseObject>(tag: Target) => StyledInstance<"web", Target, Target extends KnownTarget ? React.ComponentPropsWithRef<Target> & InjectedProps : InjectedProps, BaseObject, never>;
 declare const styled: typeof baseStyled & { [E in SupportedHTMLElements]: StyledInstance<"web", E, React.JSX.IntrinsicElements[E]>; };
 export default styled;

package/dist/hoc/withTheme.d.ts

@@ -2,5 +2,6 @@ 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;
+/** 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 {};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 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 { styled as default, LibraryStyled, Styled, styled, StyledInstance };

package/dist/models/ComponentStyle.d.ts

@@ -1,5 +1,10 @@
 import StyleSheet from '../sheet';
 import { ExecutionContext, RuleSet, Stringifier } from '../types';
+/**
+ * Get all compiled CSS for a ComponentStyle's registered names.
+ * Returns null on any cache miss (caller falls back to getGroup).
+ */
+export declare function getCompiledCSS(cs: ComponentStyle, styleSheet: StyleSheet): string | null;
 /**
  * ComponentStyle is all the CSS-specific stuff, not the React-specific stuff.
  */
@@ -7,12 +12,8 @@ export default class ComponentStyle {
     baseHash: number;
     baseStyle: ComponentStyle | null | undefined;
     componentId: string;
-    isStatic: boolean;
     rules: RuleSet<any>;
-    staticRulesId: string;
+    dynamicNameCache: Map<string, string> | undefined;
     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/dist/models/GlobalStyle.d.ts

@@ -1,11 +1,23 @@
 import StyleSheet from '../sheet';
 import { ExecutionContext, RuleSet, Stringifier } from '../types';
+type InstanceEntry = {
+    name: string;
+    rules: string[];
+};
 export default class GlobalStyle<Props extends object> {
     componentId: string;
     isStatic: boolean;
     rules: RuleSet<Props>;
+    /** @internal Per-instance rule cache for shared-group rebuild. */
+    instanceRules: Map<number, InstanceEntry>;
     constructor(rules: RuleSet<Props>, componentId: string);
-    createStyles(instance: number, executionContext: ExecutionContext & Props, styleSheet: StyleSheet, stylis: Stringifier): void;
     removeStyles(instance: number, styleSheet: StyleSheet): void;
     renderStyles(instance: number, executionContext: ExecutionContext & Props, styleSheet: StyleSheet, stylis: Stringifier): 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.
+     */
+    private rebuildGroup;
 }
+export {};

package/dist/models/InlineStyle.d.ts

@@ -1,6 +1,17 @@
 import { IInlineStyleConstructor, StyleSheet } from '../types';
 export declare const RN_UNSUPPORTED_VALUES: string[];
+/**
+ * Extract CSS declaration pairs from flat CSS text.
+ * Only handles `property: value;` — selectors, at-rules, and nesting
+ * are not supported (and not expected in the native inline style path).
+ */
+export declare function parseCSSDeclarations(rawCss: string): [string, string][];
+/** Clear the cached CSS-to-style-object mappings. Useful in tests or long-running RN apps with highly dynamic styles. */
 export declare const resetStyleCache: () => void;
+/**
+ * Parse flat CSS into a style object via css-to-react-native, with caching.
+ */
+export declare function cssToStyleObject(flatCSS: string, styleSheet: StyleSheet): any;
 /**
  * InlineStyle takes arbitrary CSS and generates a flat object
  */

package/dist/models/StyleSheetManager.d.ts

@@ -8,12 +8,13 @@ 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;
 };
 export declare const StyleSheetContext: React.Context<IStyleSheetContext>;
 export declare const StyleSheetConsumer: React.Consumer<IStyleSheetContext>;
 export type IStylisContext = Stringifier | void;
-export declare const StylisContext: React.Context<IStylisContext>;
-export declare const StylisConsumer: React.Consumer<IStylisContext>;
 export declare function useStyleSheetContext(): IStyleSheetContext;
 export type IStyleSheetManager = React.PropsWithChildren<{
     /**
@@ -49,6 +50,10 @@ export type IStyleSheetManager = React.PropsWithChildren<{
      *
      * 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.
      */
     shouldForwardProp?: undefined | IStyleSheetContext['shouldForwardProp'];
     /**
@@ -56,6 +61,10 @@ export type IStyleSheetManager = React.PropsWithChildren<{
      * 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.
+     *
+     * 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[];
     /**
@@ -68,4 +77,5 @@ export type IStyleSheetManager = React.PropsWithChildren<{
      */
     target?: undefined | InsertionTarget;
 }>;
+/** Configure style injection for descendant styled components (target element, stylis plugins, prop forwarding). */
 export declare function StyleSheetManager(props: IStyleSheetManager): React.JSX.Element;