styled-components 6.4.4 → 6.5.0

package/dist/types.d.ts

@@ -82,8 +82,8 @@ export interface ExecutionContext extends ExecutionProps {
 export interface StyleFunction<Props extends BaseObject> {
     (executionContext: ExecutionContext & Props): Interpolation<Props>;
 }
-export type Interpolation<Props extends BaseObject> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | StyledComponentBrand | RuleSet<Props> | Interpolation<Props>[];
-export type Attrs<Props extends BaseObject = BaseObject> = (ExecutionProps & Partial<OverrideStyle<Props>>) | ((props: ExecutionContext & Props) => ExecutionProps & Partial<OverrideStyle<Props>>);
+export type Interpolation<Props extends BaseObject> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | StyledComponentBrand | RuleSet<Props>;
+export type Attrs<Props extends BaseObject = BaseObject> = (ExecutionProps & Partial<Props>) | ((props: ExecutionContext & Props) => ExecutionProps & Partial<Props>);
 export type RuleSet<Props extends BaseObject = BaseObject> = Interpolation<Props>[];
 export type Styles<Props extends BaseObject> = TemplateStringsArray | StyledObject<Props> | StyleFunction<Props>;
 export type NameGenerator = (hash: number) => string;
@@ -122,23 +122,65 @@ export interface IStyledStatics<out R extends Runtime, in out OuterProps extends
 interface ThemedExecutionProps {
     theme?: DefaultTheme | undefined;
 }
+/**
+ * Props of a render target, for `as` / `forwardedAs`.
+ *
+ * One distributive conditional, never two nested, and tags resolve by indexed
+ * access rather than `React.ComponentPropsWithRef`. Both are load-bearing: this
+ * shape is the #5767 fix, and nesting a `T extends KnownTarget` check around it
+ * costs ~4x the check time. The `AnyComponent` arm doubles as that test, and
+ * every non-target falls through to `{}`.
+ *
+ * The `style` widening happens here, once per target, rather than at every JSX
+ * call site -- directly via {@link WithCSSVars} on the intrinsic arm, which
+ * needs no guard, and via {@link OverrideStyle} on the component arm, which
+ * does. See AGENTS.md before changing any of it.
+ *
+ * `R` carries the runtime so the widening stays web-only; it is deliberately
+ * undefaulted, since a default is what would let a native call site pick up web
+ * CSS by omission.
+ */
+export type TargetProps<R extends Runtime, T> = T extends keyof React.JSX.IntrinsicElements ? IntrinsicProps<T> : T extends AnyComponent ? ComponentTargetProps<R, T> : {};
+/**
+ * Props of an HTML or SVG tag.
+ *
+ * Both branches of {@link TargetProps} are named rather than inlined, so a
+ * component's type reads as `Substituted<IntrinsicProps<"button">, { … }>`
+ * instead of the full expansion of every tag attribute. See {@link WithCSSVars}
+ * for why a conditional's inline branch cannot keep a name.
+ *
+ * Applies the widening directly rather than through {@link OverrideStyle}: every
+ * intrinsic element declares `style`, so the guard has nothing to decide here.
+ */
+type IntrinsicProps<T extends keyof React.JSX.IntrinsicElements> = WithCSSVars<React.JSX.IntrinsicElements[T]>;
+/**
+ * Props of a component render target. Named for the same reason as {@link IntrinsicProps}.
+ *
+ * The `style` widening is web-only: a React Native `style` takes a `ViewStyle`,
+ * which carries neither web CSS nor custom properties. This is the only seam that
+ * knows the runtime, which is why the gate sits here rather than inside
+ * {@link OverrideStyle}. The conditional is over `Runtime` -- two members, concrete
+ * at every entry point -- never over the target union.
+ */
+type ComponentTargetProps<R extends Runtime, T extends AnyComponent> = R extends 'web' ? OverrideStyle<React.ComponentPropsWithRef<T>> : React.ComponentPropsWithRef<T>;
 /**
  * Used by PolymorphicComponent to define prop override cascading order.
  */
 export type PolymorphicComponentProps<R extends Runtime, BaseProps extends BaseObject, AsTarget extends StyledTarget<R> | (BaseProps extends {
     as?: infer A;
-} ? A : never) | void, ForwardedAsTarget extends StyledTarget<R> | void, AsTargetProps extends BaseObject = AsTarget extends KnownTarget ? React.ComponentPropsWithRef<AsTarget> : {}, ForwardedAsTargetProps extends BaseObject = ForwardedAsTarget extends KnownTarget ? React.ComponentPropsWithRef<ForwardedAsTarget> : {}> = OverrideStyle<NoInfer<FastOmit<Substitute<BaseProps, Substitute<ForwardedAsTargetProps, AsTargetProps>>, keyof ExecutionProps>> & ThemedExecutionProps & {
+} ? A : never) | void, ForwardedAsTarget extends StyledTarget<R> | void, AsTargetProps extends BaseObject = TargetProps<R, AsTarget>, ForwardedAsTargetProps extends BaseObject = TargetProps<R, ForwardedAsTarget>> = NoInfer<FastOmit<MergeProps<BaseProps, Substitute<ForwardedAsTargetProps, AsTargetProps>>, keyof ExecutionProps>> & ThemedExecutionProps & {
     as?: AsTarget;
     forwardedAs?: ForwardedAsTarget;
-}>;
+};
 /**
  * Resolves the call-site props for one usage of a polymorphic component from its
- * `as` / `forwardedAs` targets. An `as` render target substitutes that target's
- * props and requires `as`; plain usage (or `as` being the wrapped component's own
- * non-target type, e.g. Next.js Link's `as?: Url`) keeps Substitute-free base
- * props so ref callbacks infer with spread props (#5687), the wrapped `as` stays
- * assignable (#5734), and BaseProps keys keep completing (#5741); `forwardedAs`
- * substitutes the forwarded target's props.
+ * `as` / `forwardedAs` targets. An `as` render target has its props merged over
+ * the base props and requires `as`; plain usage (or `as` being the wrapped
+ * component's own non-target type, e.g. Next.js Link's `as?: Url`) reaches
+ * {@link PolymorphicComponentProps} not at all, so the base props stay untouched
+ * and ref callbacks infer with spread props (#5687), the wrapped `as` stays
+ * assignable (#5734), and BaseProps keys keep completing (#5741). `forwardedAs`
+ * merges the same way, and loses to `as` where both name a target.
  *
  * The target test is `string | AnyComponent`, not `KnownTarget`: narrowing it
  * drops custom element strings (`as="my-element"`) out of the target branch.
@@ -161,7 +203,7 @@ type PolymorphicCallProps<R extends Runtime, BaseProps extends BaseObject, AsTar
     as: AsTarget;
 } : unknown) & ([AsTarget] extends [string | AnyComponent] ? unknown : [ForwardedAsTarget] extends [string | AnyComponent] ? PolymorphicComponentProps<R, BaseProps, void, ForwardedAsTarget> & {
     forwardedAs: ForwardedAsTarget;
-} : OverrideStyle<NoInfer<FastOmit<BaseProps, keyof ExecutionProps>> & ThemedExecutionProps>);
+} : NoInfer<FastOmit<BaseProps, keyof ExecutionProps>> & ThemedExecutionProps);
 /**
  * This type forms the signature for a forwardRef-enabled component
  * that accepts the "as" prop to dynamically change the underlying
@@ -189,13 +231,25 @@ export interface PolymorphicComponent<out R extends Runtime, in out BaseProps ex
  * statics (`IStyledStatics`, `defaultProps`), so internal code keeps the real
  * `Props` and the widening can't leak past the call site.
  *
- * The "no known keys" test is distributed over `Props` first. `keyof` on a union
- * intersects each member's keys, so a bare union of disjoint shapes (e.g.
- * `{ a: string } | { b: string }`) has `keyof` of `never` despite being fully
- * introspectable. Checking each constituent independently widens only when every
- * member is truly empty.
+ * The test distributes over `Props` first: `keyof` on a union intersects each
+ * member's keys, so a union of disjoint shapes has `keyof` of `never` while
+ * being perfectly introspectable. Checking each member alone avoids widening it.
+ */
+export type WidenUntypedProps<Props extends BaseObject> = WidenForUntypedTarget<Props, Props>;
+/**
+ * Widens because the *target* is un-introspectable, even when the component
+ * declares props of its own.
+ *
+ * `Target` must be the target's props, never a bag the component's own props
+ * were merged into. Pass the latter and the test degrades: adding one transient
+ * prop makes `keyof` non-`never`, the widening switches off, and the target's
+ * own props including `children` start being rejected. That is #5756, and every
+ * call site here passes `TargetProps<R, Target>` for that reason.
+ *
+ * Applying it to an already-widened `Target` is a no-op, since the index
+ * signature makes `keyof` be `string`.
  */
-export type WidenUntypedProps<Props extends BaseObject> = (Props extends unknown ? (keyof Props extends never ? true : false) : never) extends true ? Props & {
+export type WidenForUntypedTarget<Target extends BaseObject, Props extends BaseObject> = (Target extends unknown ? (keyof Target extends never ? true : false) : never) extends true ? Props & {
     [key: string]: unknown;
 } : Props;
 export interface IStyledComponentBase<out R extends Runtime, in out Props extends BaseObject = BaseObject> extends PolymorphicComponent<R, WidenUntypedProps<Props>>, IStyledStatics<R, Props>, StyledComponentBrand {
@@ -224,11 +278,55 @@ export type CSSProperties = CSS.Properties<number | (string & {})>;
 export type CSSPropertiesWithVars = CSSProperties & {
     [key: `--${string}`]: string | number | undefined;
 };
-type OverrideStyle<P> = P extends {
-    style?: infer S;
-} ? Omit<P, 'style'> & {
-    style?: CSSPropertiesWithVars | (S & {});
-} : P;
+/**
+ * A `style` type that accepts exactly the fields given and nothing else.
+ *
+ * A declared `style` normally narrows the fields it names and leaves the rest of
+ * CSS available, which is what you want when constraining one or two properties:
+ *
+ * ```tsx
+ * // `width` must be a number; `color` and custom properties still work
+ * const Box = styled.div<{ style?: { width: number } }>``;
+ * ```
+ *
+ * Wrap the declaration in `CustomStyle` when the point is to forbid everything
+ * else, rather than writing `color?: never` for every property by hand:
+ *
+ * ```tsx
+ * // `width` is the only accepted style field
+ * const Box = styled.div<{ style?: CustomStyle<{ width: number }> }>``;
+ * ```
+ */
+export type CustomStyle<T extends object> = T & {
+    [K in Exclude<keyof CSSPropertiesWithVars, keyof T>]?: never;
+};
+/**
+ * Widens a target's `style` prop so CSS custom properties are accepted, and the
+ * taken branch of {@link OverrideStyle}. Keep it named: a conditional alias
+ * loses its name once it resolves, so an inline branch prints its whole
+ * expansion in every hover and error.
+ *
+ * `(P['style'] & {})` is load-bearing under `exactOptionalPropertyTypes` -- it
+ * filters `undefined` out so the `?:` stays the sole optional source -- and the
+ * explicit `| undefined` then restores `style={undefined}`.
+ */
+type WithCSSVars<P extends BaseObject> = Omit<P, 'style'> & {
+    style?: CSSPropertiesWithVars | (P[keyof P & 'style'] & {}) | undefined;
+};
+/**
+ * Applies the `style` widening to a target that may or may not declare `style`.
+ *
+ * Applied once per target in {@link TargetProps}, never to a merged prop bag at
+ * a JSX call site. It runs before a component's own props, which then merge over
+ * it via {@link MergeProps} rather than replacing it.
+ *
+ * The test is `'style' extends keyof P`, not `P extends { style?: infer S }`:
+ * the latter is vacuously satisfied by `{}`, which would hand a `style` key to
+ * targets that expose no props at all and defeat `WidenUntypedProps` (#5756).
+ * Only {@link ComponentTargetProps} needs the guard; every intrinsic element
+ * declares `style`, so {@link IntrinsicProps} applies `WithCSSVars` directly.
+ */
+type OverrideStyle<P extends BaseObject> = 'style' extends keyof P ? WithCSSVars<P> : P;
 export type CSSPseudos = {
     [K in CSS.Pseudos]?: CSSObject;
 };
@@ -261,15 +359,38 @@ export interface StyledObject<Props extends BaseObject = BaseObject> extends CSS
  * {@link DefaultTheme}.
  */
 export type CSSProp = Interpolation<any>;
+export type { NoInfer } from './utils/noInfer';
+/** The taken branch of {@link Substitute}. Named so it survives into hovers and
+ * error messages; see {@link WithCSSVars} for why an inline branch does not. */
+export type Substituted<A extends BaseObject, B> = FastOmit<A, keyof B> & B;
+export type Substitute<A extends BaseObject, B> = keyof B extends never ? A : Substituted<A, B>;
 /**
- * @deprecated Use the built-in NoInfer from TypeScript 5.4+ directly.
- * Kept for backward compatibility.
+ * A component's own props over its target's props, with `style` merged rather
+ * than replaced, so `styled.div<{ style?: { width: number } }>` constrains
+ * `width` and leaves the rest of CSS accepted. A field declared `never` is
+ * removed; {@link CustomStyle} removes everything a declaration omits.
+ *
+ * Under `exactOptionalPropertyTypes` the intersection leaves no `undefined` arm,
+ * so such a component rejects an explicit `style={undefined}`; declare
+ * `style?: X | undefined` to allow it. Omitting the prop is unaffected.
+ *
+ * Both conditional spellings of this were measured and rejected, one of them
+ * fatal. Keep it an intersection; see AGENTS.md before changing the shape.
  */
-export type NoInfer<T> = [T][T extends any ? 0 : never];
-export type Substitute<A extends BaseObject, B extends BaseObject> = keyof B extends never ? A : FastOmit<A, keyof B> & B;
+export type MergeProps<A extends BaseObject, B> = keyof B extends never ? A : Merged<A, B>;
+/** The taken branch of {@link MergeProps}, named so hovers print a name rather
+ * than the expansion. Keep it named; see {@link Substituted}. */
+export type Merged<A extends BaseObject, B> = FastOmit<A, Exclude<keyof B, 'style'>> & B;
 /**
  * Makes keys in K optional while keeping all others required.
  * Used to make attrs-provided props optional on the final component.
+ *
+ * The guard is `[K] extends [never]`, not `keyof K extends never`. `K` is the set
+ * of attrs-provided keys and is `never` for any component without `.attrs()`,
+ * which is most of them, but `keyof never` is `string | number | symbol`, so the
+ * old spelling never short-circuited. Every such component paid an omit plus a
+ * `Partial<Pick<...>>` that removed and re-added nothing, and carried both in its
+ * displayed type.
  */
-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 MakeAttrsOptional<P extends BaseObject, K extends keyof any> = [K] extends [never] ? P : FastOmit<P, K & keyof P> & Partial<Pick<P, K & keyof P>>;
 export type InsertionTarget = HTMLElement | ShadowRoot;

package/dist/utils/domElements.d.ts

@@ -1,4 +1,4 @@
 declare const elements: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "blockquote", "body", "button", "br", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "menu", "meter", "nav", "object", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "search", "section", "select", "slot", "small", "span", "strong", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "u", "ul", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "switch", "symbol", "text", "textPath", "tspan", "use"];
-declare const _default: Set<"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "bdi" | "bdo" | "blockquote" | "body" | "button" | "br" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meter" | "nav" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "section" | "select" | "slot" | "small" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use">;
+declare const _default: Set<"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meter" | "nav" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "section" | "select" | "small" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "svg" | "circle" | "clipPath" | "defs" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use">;
 export default _default;
 export type SupportedHTMLElements = (typeof elements)[number];

package/dist/utils/noInfer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @deprecated Use the built-in `NoInfer` from TypeScript 5.4+ directly.
+ *
+ * Kept for consumers importing it from `styled-components/dist/types`. It lives
+ * in its own module rather than in `types.ts` because a module-local `NoInfer`
+ * shadows the TypeScript intrinsic within that module, silently downgrading
+ * every reference there to this slower deferred form. `types.ts` re-exports the
+ * name, and a re-export introduces no local binding.
+ */
+export type NoInfer<T> = [T][T extends any ? 0 : never];

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

@@ -1,4 +1,4 @@
-import { Attrs, BaseObject, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, MakeAttrsOptional, Runtime, StyledOptions, StyledTarget, Styles, Substitute, WidenUntypedProps } from '../types';
+import { Attrs, BaseObject, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, MakeAttrsOptional, MergeProps, Runtime, StyledOptions, StyledTarget, Styles, TargetProps, WidenForUntypedTarget } 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
@@ -9,9 +9,9 @@ type AttrsTarget<R extends Runtime, T extends Attrs<any>, FallbackTarget extends
     as: infer RuntimeTarget;
 } ? RuntimeTarget extends KnownTarget ? RuntimeTarget : FallbackTarget : FallbackTarget;
 export interface Styled<out R extends Runtime, out Target extends StyledTarget<R>, in out OuterProps extends object, out OuterStatics extends object = BaseObject, out 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<WidenUntypedProps<PrivateMergedProps>> = Attrs<WidenUntypedProps<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>>;
+    <Props extends object = BaseObject, Statics extends object = BaseObject>(initialStyles: Styles<MergeProps<OuterProps, NoInfer<Props>>>, ...interpolations: Interpolation<MergeProps<OuterProps, NoInfer<Props>>>[]): IStyledComponent<R, WidenForUntypedTarget<TargetProps<R, Target>, MakeAttrsOptional<MergeProps<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 = MergeProps<OuterProps, Props>, PrivateAttrsArg extends Attrs<WidenForUntypedTarget<TargetProps<R, Target>, PrivateMergedProps>> = Attrs<WidenForUntypedTarget<TargetProps<R, Target>, PrivateMergedProps>>, PrivateResolvedTarget extends StyledTarget<R> = AttrsTarget<R, PrivateAttrsArg, Target>>(attrs: PrivateAttrsArg) => Styled<R, PrivateResolvedTarget, PrivateResolvedTarget extends KnownTarget ? MergeProps<MergeProps<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, 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 default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = TargetProps<R, Target>, 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/styled.d.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { BaseObject, KnownTarget, WebTarget } from '../types';
+import { BaseObject, TargetProps, WebTarget } from '../types';
 import { SupportedHTMLElements } from '../utils/domElements';
 import { Styled as StyledInstance } from './constructWithOptions';
 /**
@@ -10,8 +9,8 @@ import { Styled as StyledInstance } from './constructWithOptions';
  * 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]>; };
+declare const baseStyled: <Target extends WebTarget, InjectedProps extends object = BaseObject>(tag: Target) => StyledInstance<"web", Target, TargetProps<"web", Target> & InjectedProps, BaseObject, never>;
+declare const styled: typeof baseStyled & { [E in SupportedHTMLElements]: StyledInstance<"web", E, TargetProps<"web", E>>; };
 export default styled;
 export { StyledInstance };
 /**

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

@@ -1,4 +1,4 @@
-import { Attrs, BaseObject, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, MakeAttrsOptional, Runtime, StyledOptions, StyledTarget, Styles, Substitute, WidenUntypedProps } from '../types';
+import { Attrs, BaseObject, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, MakeAttrsOptional, MergeProps, Runtime, StyledOptions, StyledTarget, Styles, TargetProps, WidenForUntypedTarget } 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
@@ -9,9 +9,9 @@ type AttrsTarget<R extends Runtime, T extends Attrs<any>, FallbackTarget extends
     as: infer RuntimeTarget;
 } ? RuntimeTarget extends KnownTarget ? RuntimeTarget : FallbackTarget : FallbackTarget;
 export interface Styled<out R extends Runtime, out Target extends StyledTarget<R>, in out OuterProps extends object, out OuterStatics extends object = BaseObject, out 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<WidenUntypedProps<PrivateMergedProps>> = Attrs<WidenUntypedProps<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>>;
+    <Props extends object = BaseObject, Statics extends object = BaseObject>(initialStyles: Styles<MergeProps<OuterProps, NoInfer<Props>>>, ...interpolations: Interpolation<MergeProps<OuterProps, NoInfer<Props>>>[]): IStyledComponent<R, WidenForUntypedTarget<TargetProps<R, Target>, MakeAttrsOptional<MergeProps<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 = MergeProps<OuterProps, Props>, PrivateAttrsArg extends Attrs<WidenForUntypedTarget<TargetProps<R, Target>, PrivateMergedProps>> = Attrs<WidenForUntypedTarget<TargetProps<R, Target>, PrivateMergedProps>>, PrivateResolvedTarget extends StyledTarget<R> = AttrsTarget<R, PrivateAttrsArg, Target>>(attrs: PrivateAttrsArg) => Styled<R, PrivateResolvedTarget, PrivateResolvedTarget extends KnownTarget ? MergeProps<MergeProps<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, 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 default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = TargetProps<R, Target>, 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/styled.d.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { BaseObject, KnownTarget, WebTarget } from '../types';
+import { BaseObject, TargetProps, WebTarget } from '../types';
 import { SupportedHTMLElements } from '../utils/domElements';
 import { Styled as StyledInstance } from './constructWithOptions';
 /**
@@ -10,8 +9,8 @@ import { Styled as StyledInstance } from './constructWithOptions';
  * 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]>; };
+declare const baseStyled: <Target extends WebTarget, InjectedProps extends object = BaseObject>(tag: Target) => StyledInstance<"web", Target, TargetProps<"web", Target> & InjectedProps, BaseObject, never>;
+declare const styled: typeof baseStyled & { [E in SupportedHTMLElements]: StyledInstance<"web", E, TargetProps<"web", E>>; };
 export default styled;
 export { StyledInstance };
 /**

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

@@ -1,5 +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 { CSSKeyframes, CSSObject, CSSProp, CSSProperties, CSSPseudos, CustomStyle, 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/native/dist/dist/native/index.d.ts

@@ -3,7 +3,7 @@ import { Styled } from '../constructors/constructWithOptions';
 import css from '../constructors/css';
 import withTheme from '../hoc/withTheme';
 import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from '../models/ThemeProvider';
-import { NativeTarget, RuleSet } from '../types';
+import { NativeTarget, RuleSet, TargetProps } from '../types';
 import isStyledComponent from '../utils/isStyledComponent';
 declare const reactNative: Awaited<typeof import("react-native")>;
 /**
@@ -14,14 +14,14 @@ declare const reactNative: Awaited<typeof import("react-native")>;
  * const Label = styled(Text)`font-size: 14px;`;
  * ```
  */
-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 baseStyled: <Target extends NativeTarget>(tag: Target) => Styled<"native", Target, TargetProps<"native", Target>, import("../types").BaseObject, never>;
 declare const aliases: readonly ["ActivityIndicator", "Button", "FlatList", "Image", "ImageBackground", "InputAccessoryView", "KeyboardAvoidingView", "Modal", "Pressable", "RefreshControl", "SafeAreaView", "ScrollView", "SectionList", "StatusBar", "Switch", "Text", "TextInput", "TouchableHighlight", "TouchableNativeFeedback", "TouchableOpacity", "TouchableWithoutFeedback", "View", "VirtualizedList"];
 type KnownComponents = (typeof aliases)[number];
 /** Isolates RN-provided components since they don't expose a helper type for this. */
 type RNComponents = {
     [K in keyof typeof reactNative]: (typeof reactNative)[K] extends React.ComponentType<any> ? (typeof reactNative)[K] : never;
 };
-declare const styled: typeof baseStyled & { [E in KnownComponents]: Styled<"native", RNComponents[E], React.ComponentProps<RNComponents[E]>>; };
+declare const styled: typeof baseStyled & { [E in KnownComponents]: Styled<"native", RNComponents[E], TargetProps<"native", RNComponents[E]>>; };
 /**
  * Convert a `css` tagged template to a React Native StyleSheet object.
  *
@@ -31,5 +31,5 @@ declare const styled: typeof baseStyled & { [E in KnownComponents]: Styled<"nati
  * ```
  */
 declare const toStyleSheet: (rules: RuleSet<object>) => any;
-export { CSSKeyframes, CSSObject, CSSProperties, CSSPseudos, DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, NativeTarget, PolymorphicComponent, PolymorphicComponentProps, Runtime, StyledObject, StyledOptions, } from '../types';
+export { CSSKeyframes, CSSObject, CSSProperties, CSSPseudos, CustomStyle, DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, NativeTarget, PolymorphicComponent, PolymorphicComponentProps, Runtime, StyledObject, StyledOptions, } from '../types';
 export { css, styled as default, isStyledComponent, styled, ThemeConsumer, ThemeContext, ThemeProvider, toStyleSheet, useTheme, withTheme, };