styled-components 6.3.12 → 6.4.0-prerelease.0

package/dist/types.d.ts

@@ -132,8 +132,11 @@ export type PolymorphicComponentProps<R extends Runtime, BaseProps extends BaseO
  * props from the given rendering target to get proper typing for
  * any specialized props in the target component.
  */
-export interface PolymorphicComponent<R extends Runtime, BaseProps extends BaseObject> extends React.ForwardRefExoticComponent<BaseProps> {
-    <AsTarget extends StyledTarget<R> | void = void, ForwardedAsTarget extends StyledTarget<R> | void = void>(props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget>): React.JSX.Element;
+export interface PolymorphicComponent<R extends Runtime, BaseProps extends BaseObject> extends React.ForwardRefExoticComponent<BaseProps & {
+    as?: StyledTarget<R> | undefined;
+    forwardedAs?: StyledTarget<R> | undefined;
+}> {
+    <AsTarget extends StyledTarget<R> | void = void, ForwardedAsTarget extends StyledTarget<R> | void = void>(props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget> & React.RefAttributes<any>): React.JSX.Element;
 }
 export interface IStyledComponentBase<R extends Runtime, Props extends BaseObject = BaseObject> extends PolymorphicComponent<R, Props>, IStyledStatics<R, Props>, StyledComponentBrand {
     defaultProps?: (ExecutionProps & Partial<Props>) | undefined;
@@ -210,6 +213,15 @@ export interface StyledObject<Props extends BaseObject = BaseObject> extends CSS
  * {@link DefaultTheme}.
  */
 export type CSSProp = Interpolation<any>;
+/**
+ * @deprecated Use the built-in NoInfer from TypeScript 5.4+ directly.
+ * Kept for backward compatibility.
+ */
 export type NoInfer<T> = [T][T extends any ? 0 : never];
-export type Substitute<A extends BaseObject, B extends BaseObject> = FastOmit<A, keyof B> & B;
+export type Substitute<A extends BaseObject, B extends BaseObject> = keyof B extends never ? A : FastOmit<A, keyof B> & B;
+/**
+ * Makes keys in K optional while keeping all others required.
+ * Used to make attrs-provided props optional on the final component.
+ */
+export type MakeAttrsOptional<P extends BaseObject, K extends keyof any> = keyof K extends never ? P : FastOmit<P, K & keyof P> & Partial<Pick<P, K & keyof P>>;
 export type InsertionTarget = HTMLElement | ShadowRoot;

package/dist/utils/nonce.d.ts

@@ -1 +1,3 @@
-export default function getNonce(): string | null;
+/** @internal Reset the nonce cache (for testing only). */
+export declare function resetNonceCache(): void;
+export default function getNonce(): string | undefined;

package/native/dist/bench/run.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Minimal Node.js benchmark harness for styled-components hot paths.
+ * Run: pnpm --filter styled-components bench
+ */
+export {};

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

@@ -1,4 +1,4 @@
-import { Attrs, BaseObject, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, NoInfer, Runtime, StyledOptions, StyledTarget, Styles, Substitute } from '../types';
+import { Attrs, BaseObject, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, MakeAttrsOptional, Runtime, StyledOptions, StyledTarget, Styles, Substitute } from '../types';
 type AttrsResult<T extends Attrs<any>> = T extends (...args: any) => infer P ? P extends object ? P : never : T extends object ? T : never;
 /**
  * Based on Attrs being a simple object or function that returns
@@ -8,10 +8,10 @@ type AttrsResult<T extends Attrs<any>> = T extends (...args: any) => infer P ? P
 type AttrsTarget<R extends Runtime, T extends Attrs<any>, FallbackTarget extends StyledTarget<R>, Result extends ExecutionProps = AttrsResult<T>> = Result extends {
     as: infer RuntimeTarget;
 } ? RuntimeTarget extends KnownTarget ? RuntimeTarget : FallbackTarget : FallbackTarget;
-export interface Styled<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object, OuterStatics extends object = BaseObject> {
-    <Props extends object = BaseObject, Statics extends object = BaseObject>(initialStyles: Styles<Substitute<OuterProps, NoInfer<Props>>>, ...interpolations: Interpolation<Substitute<OuterProps, NoInfer<Props>>>[]): IStyledComponent<R, Substitute<OuterProps, Props>> & OuterStatics & Statics & (R extends 'web' ? Target extends string ? {} : Omit<Target, keyof React.Component<any>> : {});
-    attrs: <Props extends object = BaseObject, PrivateMergedProps extends object = Substitute<OuterProps, Props>, PrivateAttrsArg extends Attrs<PrivateMergedProps> = Attrs<PrivateMergedProps>, PrivateResolvedTarget extends StyledTarget<R> = AttrsTarget<R, PrivateAttrsArg, Target>>(attrs: PrivateAttrsArg) => Styled<R, PrivateResolvedTarget, PrivateResolvedTarget extends KnownTarget ? Substitute<Substitute<OuterProps, React.ComponentPropsWithRef<PrivateResolvedTarget>>, Props> : PrivateMergedProps, OuterStatics>;
-    withConfig: (config: StyledOptions<R, OuterProps>) => Styled<R, Target, OuterProps, OuterStatics>;
+export interface Styled<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object, OuterStatics extends object = BaseObject, AttrsKeys extends keyof any = never> {
+    <Props extends object = BaseObject, Statics extends object = BaseObject>(initialStyles: Styles<Substitute<OuterProps, NoInfer<Props>>>, ...interpolations: Interpolation<Substitute<OuterProps, NoInfer<Props>>>[]): IStyledComponent<R, MakeAttrsOptional<Substitute<OuterProps, Props>, AttrsKeys>> & OuterStatics & Statics & (R extends 'web' ? Target extends string ? {} : Omit<Target, keyof React.Component<any>> : {});
+    attrs: <Props extends object = BaseObject, PrivateMergedProps extends object = Substitute<OuterProps, Props>, PrivateAttrsArg extends Attrs<PrivateMergedProps> = Attrs<PrivateMergedProps>, PrivateResolvedTarget extends StyledTarget<R> = AttrsTarget<R, PrivateAttrsArg, Target>>(attrs: PrivateAttrsArg) => Styled<R, PrivateResolvedTarget, PrivateResolvedTarget extends KnownTarget ? Substitute<Substitute<OuterProps, React.ComponentPropsWithRef<PrivateResolvedTarget>>, Props> : PrivateMergedProps, OuterStatics, AttrsKeys | keyof AttrsResult<PrivateAttrsArg>>;
+    withConfig: (config: StyledOptions<R, OuterProps>) => Styled<R, Target, OuterProps, OuterStatics, AttrsKeys>;
 }
-export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.ComponentPropsWithRef<Target> : BaseObject, OuterStatics extends object = BaseObject>(componentConstructor: IStyledComponentFactory<R, StyledTarget<R>, object, any>, tag: StyledTarget<R>, options?: StyledOptions<R, OuterProps>): Styled<R, Target, OuterProps, OuterStatics>;
+export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.ComponentPropsWithRef<Target> : BaseObject, OuterStatics extends object = BaseObject, AttrsKeys extends keyof any = never>(componentConstructor: IStyledComponentFactory<R, StyledTarget<R>, object, any>, tag: StyledTarget<R>, options?: StyledOptions<R, OuterProps>): Styled<R, Target, OuterProps, OuterStatics, AttrsKeys>;
 export {};

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

@@ -1,4 +1,4 @@
-import { Interpolation, NoInfer, RuleSet, Styles } from '../types';
+import { Interpolation, RuleSet, Styles } from '../types';
 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/native/dist/constructors/styled.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BaseObject, KnownTarget, WebTarget } from '../types';
 import { SupportedHTMLElements } from '../utils/domElements';
 import { Styled as StyledInstance } from './constructWithOptions';
-declare const baseStyled: <Target extends WebTarget, InjectedProps extends object = BaseObject>(tag: Target) => StyledInstance<"web", Target, Target extends KnownTarget ? React.ComponentPropsWithRef<Target> & InjectedProps : InjectedProps, BaseObject>;
+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;
 export { StyledInstance };

package/native/dist/dist/bench/run.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Minimal Node.js benchmark harness for styled-components hot paths.
+ * Run: pnpm --filter styled-components bench
+ */
+export {};

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

@@ -1,4 +1,4 @@
-import { Attrs, BaseObject, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, NoInfer, Runtime, StyledOptions, StyledTarget, Styles, Substitute } from '../types';
+import { Attrs, BaseObject, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, MakeAttrsOptional, Runtime, StyledOptions, StyledTarget, Styles, Substitute } from '../types';
 type AttrsResult<T extends Attrs<any>> = T extends (...args: any) => infer P ? P extends object ? P : never : T extends object ? T : never;
 /**
  * Based on Attrs being a simple object or function that returns
@@ -8,10 +8,10 @@ type AttrsResult<T extends Attrs<any>> = T extends (...args: any) => infer P ? P
 type AttrsTarget<R extends Runtime, T extends Attrs<any>, FallbackTarget extends StyledTarget<R>, Result extends ExecutionProps = AttrsResult<T>> = Result extends {
     as: infer RuntimeTarget;
 } ? RuntimeTarget extends KnownTarget ? RuntimeTarget : FallbackTarget : FallbackTarget;
-export interface Styled<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object, OuterStatics extends object = BaseObject> {
-    <Props extends object = BaseObject, Statics extends object = BaseObject>(initialStyles: Styles<Substitute<OuterProps, NoInfer<Props>>>, ...interpolations: Interpolation<Substitute<OuterProps, NoInfer<Props>>>[]): IStyledComponent<R, Substitute<OuterProps, Props>> & OuterStatics & Statics & (R extends 'web' ? Target extends string ? {} : Omit<Target, keyof React.Component<any>> : {});
-    attrs: <Props extends object = BaseObject, PrivateMergedProps extends object = Substitute<OuterProps, Props>, PrivateAttrsArg extends Attrs<PrivateMergedProps> = Attrs<PrivateMergedProps>, PrivateResolvedTarget extends StyledTarget<R> = AttrsTarget<R, PrivateAttrsArg, Target>>(attrs: PrivateAttrsArg) => Styled<R, PrivateResolvedTarget, PrivateResolvedTarget extends KnownTarget ? Substitute<Substitute<OuterProps, React.ComponentPropsWithRef<PrivateResolvedTarget>>, Props> : PrivateMergedProps, OuterStatics>;
-    withConfig: (config: StyledOptions<R, OuterProps>) => Styled<R, Target, OuterProps, OuterStatics>;
+export interface Styled<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object, OuterStatics extends object = BaseObject, AttrsKeys extends keyof any = never> {
+    <Props extends object = BaseObject, Statics extends object = BaseObject>(initialStyles: Styles<Substitute<OuterProps, NoInfer<Props>>>, ...interpolations: Interpolation<Substitute<OuterProps, NoInfer<Props>>>[]): IStyledComponent<R, MakeAttrsOptional<Substitute<OuterProps, Props>, AttrsKeys>> & OuterStatics & Statics & (R extends 'web' ? Target extends string ? {} : Omit<Target, keyof React.Component<any>> : {});
+    attrs: <Props extends object = BaseObject, PrivateMergedProps extends object = Substitute<OuterProps, Props>, PrivateAttrsArg extends Attrs<PrivateMergedProps> = Attrs<PrivateMergedProps>, PrivateResolvedTarget extends StyledTarget<R> = AttrsTarget<R, PrivateAttrsArg, Target>>(attrs: PrivateAttrsArg) => Styled<R, PrivateResolvedTarget, PrivateResolvedTarget extends KnownTarget ? Substitute<Substitute<OuterProps, React.ComponentPropsWithRef<PrivateResolvedTarget>>, Props> : PrivateMergedProps, OuterStatics, AttrsKeys | keyof AttrsResult<PrivateAttrsArg>>;
+    withConfig: (config: StyledOptions<R, OuterProps>) => Styled<R, Target, OuterProps, OuterStatics, AttrsKeys>;
 }
-export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.ComponentPropsWithRef<Target> : BaseObject, OuterStatics extends object = BaseObject>(componentConstructor: IStyledComponentFactory<R, StyledTarget<R>, object, any>, tag: StyledTarget<R>, options?: StyledOptions<R, OuterProps>): Styled<R, Target, OuterProps, OuterStatics>;
+export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.ComponentPropsWithRef<Target> : BaseObject, OuterStatics extends object = BaseObject, AttrsKeys extends keyof any = never>(componentConstructor: IStyledComponentFactory<R, StyledTarget<R>, object, any>, tag: StyledTarget<R>, options?: StyledOptions<R, OuterProps>): Styled<R, Target, OuterProps, OuterStatics, AttrsKeys>;
 export {};

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

@@ -1,4 +1,4 @@
-import { Interpolation, NoInfer, RuleSet, Styles } from '../types';
+import { Interpolation, RuleSet, Styles } from '../types';
 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/native/dist/dist/constructors/styled.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BaseObject, KnownTarget, WebTarget } from '../types';
 import { SupportedHTMLElements } from '../utils/domElements';
 import { Styled as StyledInstance } from './constructWithOptions';
-declare const baseStyled: <Target extends WebTarget, InjectedProps extends object = BaseObject>(tag: Target) => StyledInstance<"web", Target, Target extends KnownTarget ? React.ComponentPropsWithRef<Target> & InjectedProps : InjectedProps, BaseObject>;
+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;
 export { StyledInstance };

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

@@ -4,7 +4,9 @@ import StyleSheet from '../sheet';
 export default class ServerStyleSheet {
     instance: StyleSheet;
     sealed: boolean;
-    constructor();
+    constructor({ nonce }?: {
+        nonce?: string;
+    });
     _emitSheetCSS: () => string;
     collectStyles(children: any): React.JSX.Element;
     getStyleTags: () => string;

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

@@ -33,6 +33,7 @@ export type IStyleSheetManager = React.PropsWithChildren<{
     namespace?: undefined | string;
     /**
      * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.
+     * When provided, `target` and `nonce` props are ignored (configure them on the sheet directly).
      */
     sheet?: undefined | StyleSheet;
     /**
@@ -57,6 +58,11 @@ export type IStyleSheetManager = React.PropsWithChildren<{
      * \* The plugin(s) must be compatible with stylis v4 or above.
      */
     stylisPlugins?: undefined | stylis.Middleware[];
+    /**
+     * CSP nonce to attach to injected `<style>` tags. Overrides auto-detection
+     * from `<meta name="sc-nonce">`, `<meta property="csp-nonce">`, or `__webpack_nonce__`.
+     */
+    nonce?: undefined | string;
     /**
      * Provide an alternate DOM node to host generated styles; useful for iframes.
      */

package/native/dist/dist/native/index.d.ts

@@ -6,7 +6,7 @@ import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from '../models/
 import { NativeTarget, RuleSet } from '../types';
 import isStyledComponent from '../utils/isStyledComponent';
 declare const reactNative: Awaited<typeof import("react-native")>;
-declare const baseStyled: <Target extends NativeTarget>(tag: Target) => Styled<"native", Target, Target extends import("../types").KnownTarget ? React.ComponentPropsWithRef<Target> : import("../types").BaseObject, import("../types").BaseObject>;
+declare const baseStyled: <Target extends NativeTarget>(tag: Target) => Styled<"native", Target, Target extends import("../types").KnownTarget ? React.ComponentPropsWithRef<Target> : import("../types").BaseObject, import("../types").BaseObject, never>;
 declare const aliases: readonly ["ActivityIndicator", "Button", "DatePickerIOS", "DrawerLayoutAndroid", "FlatList", "Image", "ImageBackground", "KeyboardAvoidingView", "Modal", "Pressable", "ProgressBarAndroid", "ProgressViewIOS", "RefreshControl", "SafeAreaView", "ScrollView", "SectionList", "Slider", "Switch", "Text", "TextInput", "TouchableHighlight", "TouchableOpacity", "View", "VirtualizedList"];
 type KnownComponents = (typeof aliases)[number];
 /** Isolates RN-provided components since they don't expose a helper type for this. */

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

@@ -2,6 +2,7 @@ import { InsertionTarget } from '../types';
 import { GroupedTag, Sheet, SheetOptions } from './types';
 type SheetConstructorArgs = {
     isServer?: boolean;
+    nonce?: string | undefined;
     useCSSOMInjection?: boolean;
     target?: InsertionTarget | undefined;
 };

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

@@ -1,7 +1,7 @@
 import { InsertionTarget } from '../types';
 import { SheetOptions } from './types';
 /** Create a CSSStyleSheet-like tag depending on the environment */
-export declare const makeTag: ({ isServer, useCSSOMInjection, target }: SheetOptions) => {
+export declare const makeTag: ({ isServer, useCSSOMInjection, target, nonce }: SheetOptions) => {
     rules: string[];
     length: number;
     insertRule(index: number, rule: string): boolean;
@@ -23,7 +23,7 @@ export declare const makeTag: ({ isServer, useCSSOMInjection, target }: SheetOpt
     getRule(index: number): string;
 };
 export declare const CSSOMTag: {
-    new (target?: InsertionTarget | undefined): {
+    new (target?: InsertionTarget | undefined, nonce?: string | undefined): {
         element: HTMLStyleElement;
         sheet: CSSStyleSheet;
         length: number;
@@ -34,7 +34,7 @@ export declare const CSSOMTag: {
 };
 /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
 export declare const TextTag: {
-    new (target?: InsertionTarget | undefined): {
+    new (target?: InsertionTarget | undefined, nonce?: string | undefined): {
         element: HTMLStyleElement;
         nodes: NodeListOf<Node>;
         length: number;

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

@@ -1,6 +1,6 @@
 import { InsertionTarget } from '../types';
 /** Create a style element inside `target` or <head> after the last */
-export declare const makeStyleTag: (target?: InsertionTarget | undefined) => HTMLStyleElement;
+export declare const makeStyleTag: (target?: InsertionTarget | undefined, nonce?: string | undefined) => HTMLStyleElement;
 /** Get the CSSStyleSheet instance for a given style element */
 export declare const getSheet: (tag: HTMLStyleElement) => CSSStyleSheet;
 /** Remove a GlobalStyle's SSR-rendered inline style tag(s) from the DOM */

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

@@ -17,6 +17,7 @@ export interface GroupedTag {
 }
 export type SheetOptions = {
     isServer: boolean;
+    nonce?: string | undefined;
     target?: InsertionTarget | undefined;
     useCSSOMInjection: boolean;
 };

package/native/dist/dist/test/globals.d.ts

@@ -0,0 +1,2 @@
+declare var __SERVER__: boolean;
+declare var __VERSION__: string;

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

@@ -0,0 +1,163 @@
+export declare const seedNextClassnames: (names: string[]) => string[];
+export declare const resetStyled: (isServer?: boolean) => (<Target extends import("..").WebTarget, InjectedProps extends object = import("../types").BaseObject>(tag: Target) => import("../constructors/constructWithOptions").Styled<"web", Target, Target extends import("../types").KnownTarget ? import("react").ComponentPropsWithRef<Target> & InjectedProps : InjectedProps, import("../types").BaseObject>) & {
+    symbol: import("../constructors/constructWithOptions").Styled<"web", "symbol", import("react").SVGProps<SVGSymbolElement>, import("../types").BaseObject>;
+    object: import("../constructors/constructWithOptions").Styled<"web", "object", import("react").DetailedHTMLProps<import("react").ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, import("../types").BaseObject>;
+    slot: import("../constructors/constructWithOptions").Styled<"web", "slot", import("react").DetailedHTMLProps<import("react").SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>, import("../types").BaseObject>;
+    button: import("../constructors/constructWithOptions").Styled<"web", "button", import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("../types").BaseObject>;
+    meter: import("../constructors/constructWithOptions").Styled<"web", "meter", import("react").DetailedHTMLProps<import("react").MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>, import("../types").BaseObject>;
+    textarea: import("../constructors/constructWithOptions").Styled<"web", "textarea", import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, import("../types").BaseObject>;
+    progress: import("../constructors/constructWithOptions").Styled<"web", "progress", import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>, import("../types").BaseObject>;
+    text: import("../constructors/constructWithOptions").Styled<"web", "text", import("react").SVGTextElementAttributes<SVGTextElement>, import("../types").BaseObject>;
+    ruby: import("../constructors/constructWithOptions").Styled<"web", "ruby", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    table: import("../constructors/constructWithOptions").Styled<"web", "table", import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, import("../types").BaseObject>;
+    small: import("../constructors/constructWithOptions").Styled<"web", "small", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    sub: import("../constructors/constructWithOptions").Styled<"web", "sub", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    circle: import("../constructors/constructWithOptions").Styled<"web", "circle", import("react").SVGProps<SVGCircleElement>, import("../types").BaseObject>;
+    embed: import("../constructors/constructWithOptions").Styled<"web", "embed", import("react").DetailedHTMLProps<import("react").EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>, import("../types").BaseObject>;
+    pre: import("../constructors/constructWithOptions").Styled<"web", "pre", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLPreElement>, HTMLPreElement>, import("../types").BaseObject>;
+    caption: import("../constructors/constructWithOptions").Styled<"web", "caption", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    menu: import("../constructors/constructWithOptions").Styled<"web", "menu", import("react").DetailedHTMLProps<import("react").MenuHTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    a: import("../constructors/constructWithOptions").Styled<"web", "a", import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, import("../types").BaseObject>;
+    abbr: import("../constructors/constructWithOptions").Styled<"web", "abbr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    address: import("../constructors/constructWithOptions").Styled<"web", "address", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    area: import("../constructors/constructWithOptions").Styled<"web", "area", import("react").DetailedHTMLProps<import("react").AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>, import("../types").BaseObject>;
+    article: import("../constructors/constructWithOptions").Styled<"web", "article", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    aside: import("../constructors/constructWithOptions").Styled<"web", "aside", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    audio: import("../constructors/constructWithOptions").Styled<"web", "audio", import("react").DetailedHTMLProps<import("react").AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, import("../types").BaseObject>;
+    b: import("../constructors/constructWithOptions").Styled<"web", "b", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    bdi: import("../constructors/constructWithOptions").Styled<"web", "bdi", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    bdo: import("../constructors/constructWithOptions").Styled<"web", "bdo", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    blockquote: import("../constructors/constructWithOptions").Styled<"web", "blockquote", import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, import("../types").BaseObject>;
+    body: import("../constructors/constructWithOptions").Styled<"web", "body", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>, import("../types").BaseObject>;
+    canvas: import("../constructors/constructWithOptions").Styled<"web", "canvas", import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, import("../types").BaseObject>;
+    cite: import("../constructors/constructWithOptions").Styled<"web", "cite", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    code: import("../constructors/constructWithOptions").Styled<"web", "code", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    col: import("../constructors/constructWithOptions").Styled<"web", "col", import("react").DetailedHTMLProps<import("react").ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, import("../types").BaseObject>;
+    colgroup: import("../constructors/constructWithOptions").Styled<"web", "colgroup", import("react").DetailedHTMLProps<import("react").ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, import("../types").BaseObject>;
+    data: import("../constructors/constructWithOptions").Styled<"web", "data", import("react").DetailedHTMLProps<import("react").DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>, import("../types").BaseObject>;
+    datalist: import("../constructors/constructWithOptions").Styled<"web", "datalist", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>, import("../types").BaseObject>;
+    dd: import("../constructors/constructWithOptions").Styled<"web", "dd", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    del: import("../constructors/constructWithOptions").Styled<"web", "del", import("react").DetailedHTMLProps<import("react").DelHTMLAttributes<HTMLModElement>, HTMLModElement>, import("../types").BaseObject>;
+    details: import("../constructors/constructWithOptions").Styled<"web", "details", import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, import("../types").BaseObject>;
+    dfn: import("../constructors/constructWithOptions").Styled<"web", "dfn", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    dialog: import("../constructors/constructWithOptions").Styled<"web", "dialog", import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, import("../types").BaseObject>;
+    div: import("../constructors/constructWithOptions").Styled<"web", "div", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../types").BaseObject>;
+    dl: import("../constructors/constructWithOptions").Styled<"web", "dl", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, import("../types").BaseObject>;
+    dt: import("../constructors/constructWithOptions").Styled<"web", "dt", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    em: import("../constructors/constructWithOptions").Styled<"web", "em", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    fieldset: import("../constructors/constructWithOptions").Styled<"web", "fieldset", import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, import("../types").BaseObject>;
+    figcaption: import("../constructors/constructWithOptions").Styled<"web", "figcaption", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    figure: import("../constructors/constructWithOptions").Styled<"web", "figure", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    footer: import("../constructors/constructWithOptions").Styled<"web", "footer", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    form: import("../constructors/constructWithOptions").Styled<"web", "form", import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, import("../types").BaseObject>;
+    h1: import("../constructors/constructWithOptions").Styled<"web", "h1", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("../types").BaseObject>;
+    h2: import("../constructors/constructWithOptions").Styled<"web", "h2", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("../types").BaseObject>;
+    h3: import("../constructors/constructWithOptions").Styled<"web", "h3", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("../types").BaseObject>;
+    h4: import("../constructors/constructWithOptions").Styled<"web", "h4", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("../types").BaseObject>;
+    h5: import("../constructors/constructWithOptions").Styled<"web", "h5", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("../types").BaseObject>;
+    h6: import("../constructors/constructWithOptions").Styled<"web", "h6", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, import("../types").BaseObject>;
+    header: import("../constructors/constructWithOptions").Styled<"web", "header", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    hgroup: import("../constructors/constructWithOptions").Styled<"web", "hgroup", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    hr: import("../constructors/constructWithOptions").Styled<"web", "hr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, import("../types").BaseObject>;
+    html: import("../constructors/constructWithOptions").Styled<"web", "html", import("react").DetailedHTMLProps<import("react").HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>, import("../types").BaseObject>;
+    i: import("../constructors/constructWithOptions").Styled<"web", "i", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    iframe: import("../constructors/constructWithOptions").Styled<"web", "iframe", import("react").DetailedHTMLProps<import("react").IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, import("../types").BaseObject>;
+    img: import("../constructors/constructWithOptions").Styled<"web", "img", import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, import("../types").BaseObject>;
+    input: import("../constructors/constructWithOptions").Styled<"web", "input", import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, import("../types").BaseObject>;
+    ins: import("../constructors/constructWithOptions").Styled<"web", "ins", import("react").DetailedHTMLProps<import("react").InsHTMLAttributes<HTMLModElement>, HTMLModElement>, import("../types").BaseObject>;
+    kbd: import("../constructors/constructWithOptions").Styled<"web", "kbd", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    label: import("../constructors/constructWithOptions").Styled<"web", "label", import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, import("../types").BaseObject>;
+    legend: import("../constructors/constructWithOptions").Styled<"web", "legend", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, import("../types").BaseObject>;
+    li: import("../constructors/constructWithOptions").Styled<"web", "li", import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, import("../types").BaseObject>;
+    main: import("../constructors/constructWithOptions").Styled<"web", "main", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    map: import("../constructors/constructWithOptions").Styled<"web", "map", import("react").DetailedHTMLProps<import("react").MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>, import("../types").BaseObject>;
+    mark: import("../constructors/constructWithOptions").Styled<"web", "mark", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    nav: import("../constructors/constructWithOptions").Styled<"web", "nav", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    ol: import("../constructors/constructWithOptions").Styled<"web", "ol", import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, import("../types").BaseObject>;
+    optgroup: import("../constructors/constructWithOptions").Styled<"web", "optgroup", import("react").DetailedHTMLProps<import("react").OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>, import("../types").BaseObject>;
+    option: import("../constructors/constructWithOptions").Styled<"web", "option", import("react").DetailedHTMLProps<import("react").OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, import("../types").BaseObject>;
+    output: import("../constructors/constructWithOptions").Styled<"web", "output", import("react").DetailedHTMLProps<import("react").OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>, import("../types").BaseObject>;
+    p: import("../constructors/constructWithOptions").Styled<"web", "p", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, import("../types").BaseObject>;
+    picture: import("../constructors/constructWithOptions").Styled<"web", "picture", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    q: import("../constructors/constructWithOptions").Styled<"web", "q", import("react").DetailedHTMLProps<import("react").QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, import("../types").BaseObject>;
+    rp: import("../constructors/constructWithOptions").Styled<"web", "rp", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    rt: import("../constructors/constructWithOptions").Styled<"web", "rt", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    s: import("../constructors/constructWithOptions").Styled<"web", "s", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    samp: import("../constructors/constructWithOptions").Styled<"web", "samp", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    search: import("../constructors/constructWithOptions").Styled<"web", "search", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    section: import("../constructors/constructWithOptions").Styled<"web", "section", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    select: import("../constructors/constructWithOptions").Styled<"web", "select", import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, import("../types").BaseObject>;
+    span: import("../constructors/constructWithOptions").Styled<"web", "span", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("../types").BaseObject>;
+    strong: import("../constructors/constructWithOptions").Styled<"web", "strong", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    summary: import("../constructors/constructWithOptions").Styled<"web", "summary", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    sup: import("../constructors/constructWithOptions").Styled<"web", "sup", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    tbody: import("../constructors/constructWithOptions").Styled<"web", "tbody", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, import("../types").BaseObject>;
+    td: import("../constructors/constructWithOptions").Styled<"web", "td", import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, import("../types").BaseObject>;
+    template: import("../constructors/constructWithOptions").Styled<"web", "template", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>, import("../types").BaseObject>;
+    tfoot: import("../constructors/constructWithOptions").Styled<"web", "tfoot", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, import("../types").BaseObject>;
+    th: import("../constructors/constructWithOptions").Styled<"web", "th", import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, import("../types").BaseObject>;
+    thead: import("../constructors/constructWithOptions").Styled<"web", "thead", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, import("../types").BaseObject>;
+    time: import("../constructors/constructWithOptions").Styled<"web", "time", import("react").DetailedHTMLProps<import("react").TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>, import("../types").BaseObject>;
+    tr: import("../constructors/constructWithOptions").Styled<"web", "tr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, import("../types").BaseObject>;
+    u: import("../constructors/constructWithOptions").Styled<"web", "u", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    ul: import("../constructors/constructWithOptions").Styled<"web", "ul", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, import("../types").BaseObject>;
+    var: import("../constructors/constructWithOptions").Styled<"web", "var", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    video: import("../constructors/constructWithOptions").Styled<"web", "video", import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, import("../types").BaseObject>;
+    wbr: import("../constructors/constructWithOptions").Styled<"web", "wbr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
+    clipPath: import("../constructors/constructWithOptions").Styled<"web", "clipPath", import("react").SVGProps<SVGClipPathElement>, import("../types").BaseObject>;
+    defs: import("../constructors/constructWithOptions").Styled<"web", "defs", import("react").SVGProps<SVGDefsElement>, import("../types").BaseObject>;
+    ellipse: import("../constructors/constructWithOptions").Styled<"web", "ellipse", import("react").SVGProps<SVGEllipseElement>, import("../types").BaseObject>;
+    feBlend: import("../constructors/constructWithOptions").Styled<"web", "feBlend", import("react").SVGProps<SVGFEBlendElement>, import("../types").BaseObject>;
+    feColorMatrix: import("../constructors/constructWithOptions").Styled<"web", "feColorMatrix", import("react").SVGProps<SVGFEColorMatrixElement>, import("../types").BaseObject>;
+    feComponentTransfer: import("../constructors/constructWithOptions").Styled<"web", "feComponentTransfer", import("react").SVGProps<SVGFEComponentTransferElement>, import("../types").BaseObject>;
+    feComposite: import("../constructors/constructWithOptions").Styled<"web", "feComposite", import("react").SVGProps<SVGFECompositeElement>, import("../types").BaseObject>;
+    feConvolveMatrix: import("../constructors/constructWithOptions").Styled<"web", "feConvolveMatrix", import("react").SVGProps<SVGFEConvolveMatrixElement>, import("../types").BaseObject>;
+    feDiffuseLighting: import("../constructors/constructWithOptions").Styled<"web", "feDiffuseLighting", import("react").SVGProps<SVGFEDiffuseLightingElement>, import("../types").BaseObject>;
+    feDisplacementMap: import("../constructors/constructWithOptions").Styled<"web", "feDisplacementMap", import("react").SVGProps<SVGFEDisplacementMapElement>, import("../types").BaseObject>;
+    feDistantLight: import("../constructors/constructWithOptions").Styled<"web", "feDistantLight", import("react").SVGProps<SVGFEDistantLightElement>, import("../types").BaseObject>;
+    feDropShadow: import("../constructors/constructWithOptions").Styled<"web", "feDropShadow", import("react").SVGProps<SVGFEDropShadowElement>, import("../types").BaseObject>;
+    feFlood: import("../constructors/constructWithOptions").Styled<"web", "feFlood", import("react").SVGProps<SVGFEFloodElement>, import("../types").BaseObject>;
+    feFuncA: import("../constructors/constructWithOptions").Styled<"web", "feFuncA", import("react").SVGProps<SVGFEFuncAElement>, import("../types").BaseObject>;
+    feFuncB: import("../constructors/constructWithOptions").Styled<"web", "feFuncB", import("react").SVGProps<SVGFEFuncBElement>, import("../types").BaseObject>;
+    feFuncG: import("../constructors/constructWithOptions").Styled<"web", "feFuncG", import("react").SVGProps<SVGFEFuncGElement>, import("../types").BaseObject>;
+    feFuncR: import("../constructors/constructWithOptions").Styled<"web", "feFuncR", import("react").SVGProps<SVGFEFuncRElement>, import("../types").BaseObject>;
+    feGaussianBlur: import("../constructors/constructWithOptions").Styled<"web", "feGaussianBlur", import("react").SVGProps<SVGFEGaussianBlurElement>, import("../types").BaseObject>;
+    feImage: import("../constructors/constructWithOptions").Styled<"web", "feImage", import("react").SVGProps<SVGFEImageElement>, import("../types").BaseObject>;
+    feMerge: import("../constructors/constructWithOptions").Styled<"web", "feMerge", import("react").SVGProps<SVGFEMergeElement>, import("../types").BaseObject>;
+    feMergeNode: import("../constructors/constructWithOptions").Styled<"web", "feMergeNode", import("react").SVGProps<SVGFEMergeNodeElement>, import("../types").BaseObject>;
+    feMorphology: import("../constructors/constructWithOptions").Styled<"web", "feMorphology", import("react").SVGProps<SVGFEMorphologyElement>, import("../types").BaseObject>;
+    feOffset: import("../constructors/constructWithOptions").Styled<"web", "feOffset", import("react").SVGProps<SVGFEOffsetElement>, import("../types").BaseObject>;
+    fePointLight: import("../constructors/constructWithOptions").Styled<"web", "fePointLight", import("react").SVGProps<SVGFEPointLightElement>, import("../types").BaseObject>;
+    feSpecularLighting: import("../constructors/constructWithOptions").Styled<"web", "feSpecularLighting", import("react").SVGProps<SVGFESpecularLightingElement>, import("../types").BaseObject>;
+    feSpotLight: import("../constructors/constructWithOptions").Styled<"web", "feSpotLight", import("react").SVGProps<SVGFESpotLightElement>, import("../types").BaseObject>;
+    feTile: import("../constructors/constructWithOptions").Styled<"web", "feTile", import("react").SVGProps<SVGFETileElement>, import("../types").BaseObject>;
+    feTurbulence: import("../constructors/constructWithOptions").Styled<"web", "feTurbulence", import("react").SVGProps<SVGFETurbulenceElement>, import("../types").BaseObject>;
+    filter: import("../constructors/constructWithOptions").Styled<"web", "filter", import("react").SVGProps<SVGFilterElement>, import("../types").BaseObject>;
+    foreignObject: import("../constructors/constructWithOptions").Styled<"web", "foreignObject", import("react").SVGProps<SVGForeignObjectElement>, import("../types").BaseObject>;
+    g: import("../constructors/constructWithOptions").Styled<"web", "g", import("react").SVGProps<SVGGElement>, import("../types").BaseObject>;
+    image: import("../constructors/constructWithOptions").Styled<"web", "image", import("react").SVGProps<SVGImageElement>, import("../types").BaseObject>;
+    line: import("../constructors/constructWithOptions").Styled<"web", "line", import("react").SVGLineElementAttributes<SVGLineElement>, import("../types").BaseObject>;
+    linearGradient: import("../constructors/constructWithOptions").Styled<"web", "linearGradient", import("react").SVGProps<SVGLinearGradientElement>, import("../types").BaseObject>;
+    marker: import("../constructors/constructWithOptions").Styled<"web", "marker", import("react").SVGProps<SVGMarkerElement>, import("../types").BaseObject>;
+    mask: import("../constructors/constructWithOptions").Styled<"web", "mask", import("react").SVGProps<SVGMaskElement>, import("../types").BaseObject>;
+    path: import("../constructors/constructWithOptions").Styled<"web", "path", import("react").SVGProps<SVGPathElement>, import("../types").BaseObject>;
+    pattern: import("../constructors/constructWithOptions").Styled<"web", "pattern", import("react").SVGProps<SVGPatternElement>, import("../types").BaseObject>;
+    polygon: import("../constructors/constructWithOptions").Styled<"web", "polygon", import("react").SVGProps<SVGPolygonElement>, import("../types").BaseObject>;
+    polyline: import("../constructors/constructWithOptions").Styled<"web", "polyline", import("react").SVGProps<SVGPolylineElement>, import("../types").BaseObject>;
+    radialGradient: import("../constructors/constructWithOptions").Styled<"web", "radialGradient", import("react").SVGProps<SVGRadialGradientElement>, import("../types").BaseObject>;
+    rect: import("../constructors/constructWithOptions").Styled<"web", "rect", import("react").SVGProps<SVGRectElement>, import("../types").BaseObject>;
+    stop: import("../constructors/constructWithOptions").Styled<"web", "stop", import("react").SVGProps<SVGStopElement>, import("../types").BaseObject>;
+    svg: import("../constructors/constructWithOptions").Styled<"web", "svg", import("react").SVGProps<SVGSVGElement>, import("../types").BaseObject>;
+    switch: import("../constructors/constructWithOptions").Styled<"web", "switch", import("react").SVGProps<SVGSwitchElement>, import("../types").BaseObject>;
+    textPath: import("../constructors/constructWithOptions").Styled<"web", "textPath", import("react").SVGProps<SVGTextPathElement>, import("../types").BaseObject>;
+    tspan: import("../constructors/constructWithOptions").Styled<"web", "tspan", import("react").SVGProps<SVGTSpanElement>, import("../types").BaseObject>;
+    use: import("../constructors/constructWithOptions").Styled<"web", "use", import("react").SVGProps<SVGUseElement>, import("../types").BaseObject>;
+};
+export declare const rehydrateTestStyles: () => void;
+export declare const stripComments: (str: string) => string;
+export declare const stripWhitespace: (str: string) => string;
+export declare const getCSS: (scope: Document | HTMLElement) => string;
+export declare const expectCSSMatches: (_expectation: string, opts?: {
+    ignoreWhitespace: boolean;
+}) => string;
+export declare const getRenderedCSS: () => string;

package/native/dist/dist/test/veryLargeUnionType.d.ts

@@ -0,0 +1 @@
+export type VeryLargeUnionType = 'add-clip' | 'add-column-left' | 'add-column-right' | 'add-location' | 'add-row-bottom' | 'add-row-top' | 'add-to-artifact' | 'add-to-folder' | 'add' | 'aimpoints-target' | 'airplane' | 'align-center' | 'align-justify' | 'align-left' | 'align-right' | 'alignment-bottom' | 'alignment-horizontal-center' | 'alignment-left' | 'alignment-right' | 'alignment-top' | 'alignment-vertical-center' | 'anchor' | 'annotation' | 'antenna' | 'app-header' | 'application' | 'applications' | 'archive' | 'area-of-interest' | 'array-boolean' | 'array-date' | 'array-floating-point' | 'array-numeric' | 'array-string' | 'array-timestamp' | 'array' | 'arrow-bottom-left' | 'arrow-bottom-right' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-top-left' | 'arrow-top-right' | 'arrow-up' | 'arrows-horizontal' | 'arrows-vertical' | 'asterisk' | 'at' | 'automatic-updates' | 'axle' | 'backlink' | 'badge' | 'ban-circle' | 'bank-account' | 'barcode' | 'blank' | 'blocked-person' | 'bold' | 'book' | 'bookmark' | 'box' | 'briefcase' | 'bring-data' | 'bug' | 'buggy' | 'build' | 'calculator' | 'calendar' | 'camera' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'cargo-ship' | 'cell-tower' | 'changes' | 'chart' | 'chat' | 'chevron-backward' | 'chevron-down' | 'chevron-forward' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-arrow-down' | 'circle-arrow-left' | 'circle-arrow-right' | 'circle-arrow-up' | 'circle' | 'citation' | 'clean' | 'clip' | 'clipboard' | 'cloud-download' | 'cloud-upload' | 'cloud' | 'code-block' | 'code' | 'cog' | 'collapse-all' | 'color-fill' | 'column-layout' | 'comment' | 'comparison' | 'compass' | 'compressed' | 'confirm' | 'console' | 'contrast' | 'control' | 'credit-card' | 'cross-circle' | 'cross' | 'crown' | 'cube-add' | 'cube-remove' | 'cube' | 'curved-range-chart' | 'cut' | 'cycle' | 'dashboard' | 'data-connection' | 'data-lineage' | 'database' | 'delete' | 'delta' | 'derive-column' | 'desktop' | 'diagnosis' | 'diagram-tree' | 'direction-left' | 'direction-right' | 'disable' | 'divide' | 'document-open' | 'document-share' | 'document' | 'dollar' | 'dot' | 'double-caret-horizontal' | 'double-caret-vertical' | 'double-chevron-down' | 'double-chevron-left' | 'double-chevron-right' | 'double-chevron-up' | 'doughnut-chart' | 'download' | 'drag-handle-horizontal' | 'drag-handle-vertical' | 'draw' | 'drawer-left-filled' | 'drawer-left' | 'drawer-right-filled' | 'drawer-right' | 'drive-time' | 'duplicate' | 'edit' | 'eject' | 'emoji' | 'endorsed' | 'envelope' | 'equals' | 'eraser' | 'error' | 'euro' | 'exchange' | 'exclude-row' | 'expand-all' | 'export' | 'eye-off' | 'eye-on' | 'eye-open' | 'fast-backward' | 'fast-forward' | 'feed-subscribed' | 'feed' | 'film' | 'filter-keep' | 'filter-list' | 'filter-open' | 'filter-remove' | 'filter' | 'flag' | 'flame' | 'flash' | 'floating-point' | 'floppy-disk' | 'flow-branch' | 'flow-end' | 'flow-linear' | 'flow-review-branch' | 'flow-review' | 'flows' | 'folder-close' | 'folder-new' | 'folder-open' | 'folder-shared-open' | 'folder-shared' | 'follower' | 'following' | 'font' | 'fork' | 'form' | 'fuel' | 'full-circle' | 'full-stacked-chart' | 'fullscreen' | 'function' | 'gantt-chart' | 'geofence' | 'geolocation' | 'geosearch' | 'git-branch' | 'git-commit' | 'git-merge' | 'git-new-branch' | 'git-pull' | 'git-push' | 'git-repo' | 'glass' | 'globe-network' | 'globe' | 'graph-remove' | 'graph' | 'greater-than-or-equal-to' | 'greater-than' | 'grid-view' | 'grid' | 'group-objects' | 'grouped-bar-chart' | 'hand-down' | 'hand-left' | 'hand-right' | 'hand-up' | 'hand' | 'hat' | 'header-one' | 'header-three' | 'header-two' | 'header' | 'headset' | 'heart-broken' | 'heart' | 'heat-grid' | 'heatmap' | 'helicopter' | 'help' | 'helper-management' | 'high-priority' | 'high-voltage-pole' | 'highlight' | 'history' | 'home' | 'horizontal-bar-chart-asc' | 'horizontal-bar-chart-desc' | 'horizontal-bar-chart' | 'horizontal-distribution' | 'horizontal-inbetween' | 'hurricane' | 'id-number' | 'image-rotate-left' | 'image-rotate-right' | 'import' | 'inbox-filtered' | 'inbox-geo' | 'inbox-search' | 'inbox-update' | 'inbox' | 'info-sign' | 'inheritance' | 'inherited-group' | 'inner-join' | 'insert' | 'intelligence' | 'intersection' | 'ip-address' | 'issue-closed' | 'issue-new' | 'issue' | 'italic' | 'join-table' | 'key-backspace' | 'key-command' | 'key-control' | 'key-delete' | 'key-enter' | 'key-escape' | 'key-option' | 'key-shift' | 'key-tab' | 'key' | 'known-vehicle' | 'lab-test' | 'label' | 'layer-outline' | 'layer' | 'layers' | 'layout-auto' | 'layout-balloon' | 'layout-circle' | 'layout-grid' | 'layout-group-by' | 'layout-hierarchy' | 'layout-linear' | 'layout-skew-grid' | 'layout-sorted-clusters' | 'layout' | 'learning' | 'left-join' | 'less-than-or-equal-to' | 'less-than' | 'lifesaver' | 'lightbulb' | 'lightning' | 'link' | 'list-columns' | 'list-detail-view' | 'list' | 'locate' | 'lock' | 'locomotive' | 'log-in' | 'log-out' | 'low-voltage-pole' | 'manual' | 'manually-entered-data' | 'many-to-many' | 'many-to-one' | 'map-create' | 'map-marker' | 'map' | 'maximize' | 'media' | 'menu-closed' | 'menu-open' | 'menu' | 'merge-columns' | 'merge-links' | 'minimize' | 'minus' | 'mobile-phone' | 'mobile-video' | 'modal-filled' | 'modal' | 'model' | 'moon' | 'more' | 'mountain' | 'move' | 'mugshot' | 'multi-select' | 'music' | 'nest' | 'new-drawing' | 'new-grid-item' | 'new-layer' | 'new-layers' | 'new-link' | 'new-object' | 'new-person' | 'new-prescription' | 'new-text-box' | 'ninja' | 'not-equal-to' | 'notifications-snooze' | 'notifications-updated' | 'notifications' | 'numbered-list' | 'numerical' | 'office' | 'offline' | 'oil-field' | 'one-column' | 'one-to-many' | 'one-to-one' | 'open-application' | 'outdated' | 'page-layout' | 'panel-stats' | 'panel-table' | 'paperclip' | 'paragraph' | 'path-search' | 'path' | 'pause' | 'people' | 'percentage' | 'person' | 'phone' | 'pie-chart' | 'pin' | 'pivot-table' | 'pivot' | 'play' | 'playbook' | 'plus' | 'polygon-filter' | 'power' | 'predictive-analysis' | 'prescription' | 'presentation' | 'print' | 'projects' | 'properties' | 'property' | 'publish-function' | 'pulse' | 'rain' | 'random' | 'record' | 'rect-height' | 'rect-width' | 'rectangle' | 'redo' | 'refresh' | 'regex' | 'regression-chart' | 'remove-column-left' | 'remove-column-right' | 'remove-column' | 'remove-row-bottom' | 'remove-row-top' | 'remove' | 'repeat' | 'reset' | 'resolve' | 'rig' | 'right-join' | 'ring' | 'rocket-slant' | 'rocket' | 'rotate-document' | 'rotate-page' | 'route' | 'satellite' | 'saved' | 'scatter-plot' | 'search-around' | 'search-template' | 'search-text' | 'search' | 'segmented-control' | 'select' | 'selection' | 'send-message' | 'send-to-graph' | 'send-to-map' | 'send-to' | 'sensor' | 'series-add' | 'series-configuration' | 'series-derived' | 'series-filtered' | 'series-search' | 'settings' | 'shapes' | 'share' | 'shared-filter' | 'shield' | 'ship' | 'shop' | 'shopping-cart' | 'signal-search' | 'sim-card' | 'slash' | 'small-cross' | 'small-info-sign' | 'small-minus' | 'small-plus' | 'small-square' | 'small-tick' | 'snowflake' | 'social-media' | 'sort-alphabetical-desc' | 'sort-alphabetical' | 'sort-asc' | 'sort-desc' | 'sort-numerical-desc' | 'sort-numerical' | 'sort' | 'split-columns' | 'square' | 'stacked-chart' | 'stadium-geometry' | 'star-empty' | 'star' | 'step-backward' | 'step-chart' | 'step-forward' | 'stop' | 'stopwatch' | 'strikethrough' | 'style' | 'subscript' | 'superscript' | 'swap-horizontal' | 'swap-vertical' | 'switch' | 'symbol-circle' | 'symbol-cross' | 'symbol-diamond' | 'symbol-rectangle' | 'symbol-square' | 'symbol-triangle-down' | 'symbol-triangle-up' | 'syringe' | 'tag' | 'take-action' | 'tank' | 'target' | 'taxi' | 'temperature' | 'text-highlight' | 'th-derived' | 'th-disconnect' | 'th-filtered' | 'th-list' | 'th' | 'third-party' | 'thumbs-down' | 'thumbs-up' | 'tick-circle' | 'tick' | 'time' | 'timeline-area-chart' | 'timeline-bar-chart' | 'timeline-events' | 'timeline-line-chart' | 'tint' | 'torch' | 'tractor' | 'train' | 'translate' | 'trash' | 'tree' | 'trending-down' | 'trending-up' | 'truck' | 'two-columns' | 'unarchive' | 'underline' | 'undo' | 'ungroup-objects' | 'unknown-vehicle' | 'unlock' | 'unpin' | 'unresolve' | 'updated' | 'upload' | 'user' | 'variable' | 'vertical-bar-chart-asc' | 'vertical-bar-chart-desc' | 'vertical-distribution' | 'vertical-inbetween' | 'video' | 'virus' | 'volume-down' | 'volume-off' | 'volume-up' | 'walk' | 'warning-sign' | 'waterfall-chart' | 'waves' | 'widget-button' | 'widget-footer' | 'widget-header' | 'widget' | 'wind' | 'wrench' | 'zoom-in' | 'zoom-out' | 'zoom-to-fit';

package/native/dist/dist/types.d.ts

@@ -132,8 +132,11 @@ export type PolymorphicComponentProps<R extends Runtime, BaseProps extends BaseO
  * props from the given rendering target to get proper typing for
  * any specialized props in the target component.
  */
-export interface PolymorphicComponent<R extends Runtime, BaseProps extends BaseObject> extends React.ForwardRefExoticComponent<BaseProps> {
-    <AsTarget extends StyledTarget<R> | void = void, ForwardedAsTarget extends StyledTarget<R> | void = void>(props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget>): React.JSX.Element;
+export interface PolymorphicComponent<R extends Runtime, BaseProps extends BaseObject> extends React.ForwardRefExoticComponent<BaseProps & {
+    as?: StyledTarget<R> | undefined;
+    forwardedAs?: StyledTarget<R> | undefined;
+}> {
+    <AsTarget extends StyledTarget<R> | void = void, ForwardedAsTarget extends StyledTarget<R> | void = void>(props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget> & React.RefAttributes<any>): React.JSX.Element;
 }
 export interface IStyledComponentBase<R extends Runtime, Props extends BaseObject = BaseObject> extends PolymorphicComponent<R, Props>, IStyledStatics<R, Props>, StyledComponentBrand {
     defaultProps?: (ExecutionProps & Partial<Props>) | undefined;
@@ -210,6 +213,15 @@ export interface StyledObject<Props extends BaseObject = BaseObject> extends CSS
  * {@link DefaultTheme}.
  */
 export type CSSProp = Interpolation<any>;
+/**
+ * @deprecated Use the built-in NoInfer from TypeScript 5.4+ directly.
+ * Kept for backward compatibility.
+ */
 export type NoInfer<T> = [T][T extends any ? 0 : never];
-export type Substitute<A extends BaseObject, B extends BaseObject> = FastOmit<A, keyof B> & B;
+export type Substitute<A extends BaseObject, B extends BaseObject> = keyof B extends never ? A : FastOmit<A, keyof B> & B;
+/**
+ * Makes keys in K optional while keeping all others required.
+ * Used to make attrs-provided props optional on the final component.
+ */
+export type MakeAttrsOptional<P extends BaseObject, K extends keyof any> = keyof K extends never ? P : FastOmit<P, K & keyof P> & Partial<Pick<P, K & keyof P>>;
 export type InsertionTarget = HTMLElement | ShadowRoot;

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

@@ -1 +1,3 @@
-export default function getNonce(): string | null;
+/** @internal Reset the nonce cache (for testing only). */
+export declare function resetNonceCache(): void;
+export default function getNonce(): string | undefined;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Creates a React element as a raw object, bypassing React.createElement.
+ * ~60-120x faster than React.createElement for the same output.
+ *
+ * Compatibility: React 16.8+. The $$typeof symbol is auto-detected.
+ * - React 16-18: reads ref from element.ref
+ * - React 19: reads ref from element.props.ref
+ * Both are set correctly when ref is in props AND on the element.
+ */
+export declare function rawElement(type: any, props: any, ref?: any, key?: any): React.ReactElement;

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

@@ -4,7 +4,9 @@ import StyleSheet from '../sheet';
 export default class ServerStyleSheet {
     instance: StyleSheet;
     sealed: boolean;
-    constructor();
+    constructor({ nonce }?: {
+        nonce?: string;
+    });
     _emitSheetCSS: () => string;
     collectStyles(children: any): React.JSX.Element;
     getStyleTags: () => string;

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

@@ -33,6 +33,7 @@ export type IStyleSheetManager = React.PropsWithChildren<{
     namespace?: undefined | string;
     /**
      * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.
+     * When provided, `target` and `nonce` props are ignored (configure them on the sheet directly).
      */
     sheet?: undefined | StyleSheet;
     /**
@@ -57,6 +58,11 @@ export type IStyleSheetManager = React.PropsWithChildren<{
      * \* The plugin(s) must be compatible with stylis v4 or above.
      */
     stylisPlugins?: undefined | stylis.Middleware[];
+    /**
+     * CSP nonce to attach to injected `<style>` tags. Overrides auto-detection
+     * from `<meta name="sc-nonce">`, `<meta property="csp-nonce">`, or `__webpack_nonce__`.
+     */
+    nonce?: undefined | string;
     /**
      * Provide an alternate DOM node to host generated styles; useful for iframes.
      */