styled-components 6.0.6 → 6.0.8

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 export declare const seedNextClassnames: (names: string[]) => string[];
 export declare const resetStyled: (isServer?: boolean) => (<Target extends import("..").WebTarget>(tag: Target) => import("../constructors/constructWithOptions").Styled<"web", Target, Target extends import("../types").KnownTarget ? import("react").ComponentPropsWithRef<Target> : import("../types").BaseObject, import("../types").BaseObject>) & {
+    object: import("../constructors/constructWithOptions").Styled<"web", "object", import("react").DetailedHTMLProps<import("react").ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, 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>;
@@ -46,7 +46,6 @@ export declare const resetStyled: (isServer?: boolean) => (<Target extends impor
     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>;
-    head: import("../constructors/constructWithOptions").Styled<"web", "head", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>, 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>;
@@ -70,9 +69,7 @@ export declare const resetStyled: (isServer?: boolean) => (<Target extends impor
     meta: import("../constructors/constructWithOptions").Styled<"web", "meta", import("react").DetailedHTMLProps<import("react").MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>, import("../types").BaseObject>;
     meter: import("../constructors/constructWithOptions").Styled<"web", "meter", import("react").DetailedHTMLProps<import("react").MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>, import("../types").BaseObject>;
     nav: import("../constructors/constructWithOptions").Styled<"web", "nav", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
-    noindex: import("../constructors/constructWithOptions").Styled<"web", "noindex", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
     noscript: import("../constructors/constructWithOptions").Styled<"web", "noscript", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("../types").BaseObject>;
-    object: import("../constructors/constructWithOptions").Styled<"web", "object", import("react").DetailedHTMLProps<import("react").ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, 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>;
@@ -88,7 +85,6 @@ export declare const resetStyled: (isServer?: boolean) => (<Target extends impor
     ruby: import("../constructors/constructWithOptions").Styled<"web", "ruby", 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>;
-    slot: import("../constructors/constructWithOptions").Styled<"web", "slot", import("react").DetailedHTMLProps<import("react").SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>, import("../types").BaseObject>;
     script: import("../constructors/constructWithOptions").Styled<"web", "script", import("react").DetailedHTMLProps<import("react").ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>, 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>;
@@ -101,7 +97,6 @@ export declare const resetStyled: (isServer?: boolean) => (<Target extends impor
     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>;
     table: import("../constructors/constructWithOptions").Styled<"web", "table", import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, import("../types").BaseObject>;
-    template: import("../constructors/constructWithOptions").Styled<"web", "template", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>, 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>;
     textarea: import("../constructors/constructWithOptions").Styled<"web", "textarea", import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, import("../types").BaseObject>;
@@ -109,50 +104,18 @@ export declare const resetStyled: (isServer?: boolean) => (<Target extends impor
     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>;
-    title: import("../constructors/constructWithOptions").Styled<"web", "title", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, import("../types").BaseObject>;
     tr: import("../constructors/constructWithOptions").Styled<"web", "tr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, import("../types").BaseObject>;
     track: import("../constructors/constructWithOptions").Styled<"web", "track", import("react").DetailedHTMLProps<import("react").TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>, 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>;
+    use: import("../constructors/constructWithOptions").Styled<"web", "use", import("react").SVGProps<SVGUseElement>, 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>;
-    webview: import("../constructors/constructWithOptions").Styled<"web", "webview", import("react").DetailedHTMLProps<import("react").WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>, import("../types").BaseObject>;
-    svg: import("../constructors/constructWithOptions").Styled<"web", "svg", import("react").SVGProps<SVGSVGElement>, import("../types").BaseObject>;
-    animate: import("../constructors/constructWithOptions").Styled<"web", "animate", import("react").SVGProps<SVGElement>, import("../types").BaseObject>;
-    animateMotion: import("../constructors/constructWithOptions").Styled<"web", "animateMotion", import("react").SVGProps<SVGElement>, import("../types").BaseObject>;
-    animateTransform: import("../constructors/constructWithOptions").Styled<"web", "animateTransform", import("react").SVGProps<SVGElement>, import("../types").BaseObject>;
     circle: import("../constructors/constructWithOptions").Styled<"web", "circle", import("react").SVGProps<SVGCircleElement>, 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>;
-    desc: import("../constructors/constructWithOptions").Styled<"web", "desc", import("react").SVGProps<SVGDescElement>, 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>;
@@ -160,8 +123,6 @@ export declare const resetStyled: (isServer?: boolean) => (<Target extends impor
     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>;
-    metadata: import("../constructors/constructWithOptions").Styled<"web", "metadata", import("react").SVGProps<SVGMetadataElement>, import("../types").BaseObject>;
-    mpath: import("../constructors/constructWithOptions").Styled<"web", "mpath", import("react").SVGProps<SVGElement>, 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>;
@@ -169,13 +130,9 @@ export declare const resetStyled: (isServer?: boolean) => (<Target extends impor
     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>;
-    switch: import("../constructors/constructWithOptions").Styled<"web", "switch", import("react").SVGProps<SVGSwitchElement>, import("../types").BaseObject>;
-    symbol: import("../constructors/constructWithOptions").Styled<"web", "symbol", import("react").SVGProps<SVGSymbolElement>, import("../types").BaseObject>;
+    svg: import("../constructors/constructWithOptions").Styled<"web", "svg", import("react").SVGProps<SVGSVGElement>, import("../types").BaseObject>;
     text: import("../constructors/constructWithOptions").Styled<"web", "text", import("react").SVGTextElementAttributes<SVGTextElement>, 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>;
-    view: import("../constructors/constructWithOptions").Styled<"web", "view", import("react").SVGProps<SVGViewElement>, import("../types").BaseObject>;
 };
 export declare const rehydrateTestStyles: () => void;
 export declare const stripComments: (str: string) => string;

package/native/dist/types.d.ts

@@ -3,10 +3,11 @@ import React from 'react';
 import ComponentStyle from './models/ComponentStyle';
 import { DefaultTheme } from './models/ThemeProvider';
 import createWarnTooManyClasses from './utils/createWarnTooManyClasses';
-export { CSS, DefaultTheme };
+import type { SupportedHTMLElements } from './utils/domElements';
+export { CSS, DefaultTheme, SupportedHTMLElements };
 interface ExoticComponentWithDisplayName<P extends object = {}> extends React.ExoticComponent<P> {
-    defaultProps?: Partial<P>;
-    displayName?: string;
+    defaultProps?: Partial<P> | undefined;
+    displayName?: string | undefined;
 }
 /**
  * Use this type to disambiguate between a styled-component instance
@@ -24,20 +25,33 @@ type FastOmit<T extends object, U extends string | number | symbol> = {
 };
 export type Runtime = 'web' | 'native';
 export type AnyComponent<P extends object = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
-export type KnownTarget = Exclude<keyof JSX.IntrinsicElements, 'symbol' | 'object'> | AnyComponent;
+export type KnownTarget = SupportedHTMLElements | AnyComponent;
 export type WebTarget = string | KnownTarget;
 export type NativeTarget = AnyComponent;
 export type StyledTarget<R extends Runtime> = R extends 'web' ? WebTarget : NativeTarget;
 export interface StyledOptions<R extends Runtime, Props extends object> {
-    attrs?: Attrs<Props>[];
-    componentId?: R extends 'web' ? string : never;
-    displayName?: string;
-    parentComponentId?: R extends 'web' ? string : never;
-    shouldForwardProp?: ShouldForwardProp<R>;
+    attrs?: Attrs<Props>[] | undefined;
+    componentId?: (R extends 'web' ? string : never) | undefined;
+    displayName?: string | undefined;
+    parentComponentId?: (R extends 'web' ? string : never) | undefined;
+    shouldForwardProp?: ShouldForwardProp<R> | undefined;
 }
 export type Dict<T = any> = {
     [key: string]: T;
 };
+/**
+ * This type is intended for when data attributes are composed via
+ * the `.attrs` API:
+ *
+ * ```tsx
+ * styled.div.attrs<DataAttributes>({ 'data-testid': 'foo' })``
+ * ```
+ *
+ * Would love to figure out how to support this natively without having to
+ * manually compose the type, but haven't figured out a way to do so yet that
+ * doesn't cause specificity loss (see `test/types.tsx` if you attempt to embed
+ * `DataAttributes` directly in the `Attrs<>` type.)
+ */
 export type DataAttributes = {
     [key: `data-${string}`]: any;
 };
@@ -52,9 +66,9 @@ export type ExecutionProps = {
      * </StyledButton>
      * ```
      */
-    as?: KnownTarget;
-    forwardedAs?: KnownTarget;
-    theme?: DefaultTheme;
+    as?: KnownTarget | undefined;
+    forwardedAs?: KnownTarget | undefined;
+    theme?: DefaultTheme | undefined;
 };
 /**
  * ExecutionProps but with `theme` required.
@@ -82,7 +96,7 @@ export interface Flattener<Props extends object> {
     (chunks: Interpolation<Props>[], executionContext: object | null | undefined, styleSheet: StyleSheet | null | undefined): Interpolation<Props>[];
 }
 export interface Stringifier {
-    (css: string, selector?: string, prefix?: string, componentId?: string): string[];
+    (css: string, selector?: string | undefined, prefix?: string | undefined, componentId?: string | undefined): string[];
     hash: string;
 }
 export interface ShouldForwardProp<R extends Runtime> {
@@ -91,7 +105,7 @@ export interface ShouldForwardProp<R extends Runtime> {
 export interface CommonStatics<R extends Runtime, Props extends object> {
     attrs: Attrs<Props>[];
     target: StyledTarget<R>;
-    shouldForwardProp?: ShouldForwardProp<R>;
+    shouldForwardProp?: ShouldForwardProp<R> | undefined;
 }
 export interface IStyledStatics<R extends Runtime, OuterProps extends object> extends CommonStatics<R, OuterProps> {
     componentStyle: R extends 'web' ? ComponentStyle : never;
@@ -99,12 +113,12 @@ export interface IStyledStatics<R extends Runtime, OuterProps extends object> ex
     inlineStyle: R extends 'native' ? InstanceType<IInlineStyleConstructor<OuterProps>> : never;
     target: StyledTarget<R>;
     styledComponentId: R extends 'web' ? string : never;
-    warnTooManyClasses?: R extends 'web' ? ReturnType<typeof createWarnTooManyClasses> : never;
+    warnTooManyClasses?: (R extends 'web' ? ReturnType<typeof createWarnTooManyClasses> : never) | undefined;
 }
 /**
  * Used by PolymorphicComponent to define prop override cascading order.
  */
-export type PolymorphicComponentProps<R extends Runtime, BaseProps extends object, AsTarget extends StyledTarget<R> | void, ForwardedAsTarget extends StyledTarget<R> | void, AsTargetProps extends object = AsTarget extends KnownTarget ? React.ComponentPropsWithRef<AsTarget> : {}, ForwardedAsTargetProps extends object = ForwardedAsTarget extends KnownTarget ? React.ComponentPropsWithoutRef<ForwardedAsTarget> : {}> = NoInfer<FastOmit<Substitute<BaseProps, Substitute<ForwardedAsTargetProps, AsTargetProps>>, keyof ExecutionProps>> & FastOmit<ExecutionProps, 'as' | 'forwardedAs'> & {
+export type PolymorphicComponentProps<R extends Runtime, BaseProps extends object, AsTarget extends StyledTarget<R> | void, ForwardedAsTarget extends StyledTarget<R> | void, AsTargetProps extends object = AsTarget extends KnownTarget ? React.ComponentPropsWithRef<AsTarget> : {}, ForwardedAsTargetProps extends object = ForwardedAsTarget extends KnownTarget ? React.ComponentPropsWithRef<ForwardedAsTarget> : {}> = NoInfer<FastOmit<Substitute<BaseProps, Substitute<ForwardedAsTargetProps, AsTargetProps>>, keyof ExecutionProps>> & FastOmit<ExecutionProps, 'as' | 'forwardedAs'> & {
     as?: AsTarget;
     forwardedAs?: ForwardedAsTarget;
 };
@@ -119,7 +133,7 @@ export interface PolymorphicComponent<R extends Runtime, BaseProps extends objec
     <AsTarget extends StyledTarget<R> | void = void, ForwardedAsTarget extends StyledTarget<R> | void = void>(props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget>): JSX.Element;
 }
 export interface IStyledComponent<R extends Runtime, Props extends object = BaseObject> extends PolymorphicComponent<R, Props>, IStyledStatics<R, Props>, StyledComponentBrand {
-    defaultProps?: ExecutionProps & Partial<Props>;
+    defaultProps?: (ExecutionProps & Partial<Props>) | undefined;
     toString: () => string;
 }
 export interface IStyledComponentFactory<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object, OuterStatics extends object = BaseObject> {
@@ -132,8 +146,16 @@ export interface IInlineStyle<Props extends object> {
     rules: RuleSet<Props>;
     generateStyleObject(executionContext: ExecutionContext & Props): object;
 }
-export type StyledObject<Props extends object> = CSS.Properties & {
-    [key: string]: string | number | StyleFunction<Props> | StyledObject<Props> | RuleSet<any> | undefined;
+export type CSSProperties = CSS.Properties<number | (string & {})>;
+export type CSSPseudos = {
+    [K in CSS.Pseudos]?: CSSObject;
+};
+export type CSSKeyframes = object & {
+    [key: string]: CSSObject;
+};
+export type CSSObject<Props extends object = BaseObject> = StyledObject<Props>;
+export type StyledObject<Props extends object = BaseObject> = CSSProperties & CSSPseudos & {
+    [key: string]: StyledObject<Props> | string | number | StyleFunction<Props> | StyledObject<Props> | RuleSet<any> | undefined;
 };
 /**
  * The `css` prop is not declared by default in the types as it would cause `css` to be present

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

@@ -1 +1 @@
-export declare const checkDynamicCreation: (displayName: string, componentId?: string) => void;
+export declare const checkDynamicCreation: (displayName: string, componentId?: string | undefined) => void;

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

@@ -1,4 +1,4 @@
 import { DefaultTheme, ExecutionProps } from '../types';
-export default function determineTheme(props: ExecutionProps, providedTheme?: DefaultTheme, defaultProps?: {
-    theme?: DefaultTheme;
+export default function determineTheme(props: ExecutionProps, providedTheme?: DefaultTheme | undefined, defaultProps?: {
+    theme?: DefaultTheme | undefined;
 }): DefaultTheme | undefined;

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

@@ -1,2 +1,4 @@
-declare const _default: Set<"object" | "g" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "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" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "svg" | "circle" | "clipPath" | "defs" | "ellipse" | "foreignObject" | "image" | "line" | "linearGradient" | "marker" | "mask" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "text" | "tspan" | "use">;
+declare const elements: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "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", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "u", "ul", "use", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "text", "tspan"];
+declare const _default: Set<"object" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "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" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "svg" | "circle" | "clipPath" | "defs" | "ellipse" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "text" | "tspan" | "use">;
 export default _default;
+export type SupportedHTMLElements = (typeof elements)[number];

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

@@ -1,4 +1,4 @@
 import StyleSheet from '../sheet';
 import { Dict, ExecutionContext, Interpolation, RuleSet, Stringifier } from '../types';
 export declare const objToCssArray: (obj: Dict<any>) => string[];
-export default function flatten<Props extends object>(chunk: Interpolation<object>, executionContext?: ExecutionContext & Props, styleSheet?: StyleSheet, stylisInstance?: Stringifier): RuleSet<Props>;
+export default function flatten<Props extends object>(chunk: Interpolation<object>, executionContext?: (ExecutionContext & Props) | undefined, styleSheet?: StyleSheet | undefined, stylisInstance?: Stringifier | undefined): RuleSet<Props>;

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

@@ -47,5 +47,5 @@ type ExcludeList = {
 type NonReactStatics<S extends OmniComponent, C extends ExcludeList = {}> = {
     [key in Exclude<keyof S, S extends React.MemoExoticComponent<any> ? keyof typeof MEMO_STATICS | keyof C : S extends React.ForwardRefExoticComponent<any> ? keyof typeof FORWARD_REF_STATICS | keyof C : keyof typeof REACT_STATICS | keyof typeof KNOWN_STATICS | keyof C>]: S[key];
 };
-export default function hoistNonReactStatics<T extends OmniComponent, S extends OmniComponent, C extends ExcludeList = {}>(targetComponent: T, sourceComponent: S, excludelist?: C): T & NonReactStatics<S, C>;
+export default function hoistNonReactStatics<T extends OmniComponent, S extends OmniComponent, C extends ExcludeList = {}>(targetComponent: T, sourceComponent: S, excludelist?: C | undefined): T & NonReactStatics<S, C>;
 export {};

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

@@ -1,5 +1,5 @@
 /**
  * Convenience function for joining strings to form className chains
  */
-export declare function joinStrings(a?: string, b?: string): string;
-export declare function joinStringArray(arr: string[], sep?: string): string;
+export declare function joinStrings(a?: string | undefined, b?: string | undefined): string;
+export declare function joinStringArray(arr: string[], sep?: string | undefined): string;

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

@@ -2,9 +2,9 @@ import * as stylis from 'stylis';
 import { Stringifier } from '../types';
 export type ICreateStylisInstance = {
     options?: {
-        namespace?: string;
-        prefix?: boolean;
-    };
-    plugins?: stylis.Middleware[];
+        namespace?: string | undefined;
+        prefix?: boolean | undefined;
+    } | undefined;
+    plugins?: stylis.Middleware[] | undefined;
 };
 export default function createStylisInstance({ options, plugins, }?: ICreateStylisInstance): Stringifier;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "6.0.6",
+  "version": "6.0.8",
   "description": "CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.",
   "types": "dist/index.d.ts",
   "main": "dist/styled-components.cjs.js",
@@ -23,6 +23,7 @@
     "test:integration": "jest -c jest.config.integration.js --runInBand --forceExit",
     "size": "bundlewatch",
     "prettier": "prettier src/** --write",
+    "prettier:check": "prettier src/** --check",
     "prepublishOnly": "cp ../../README.md . && yarn build"
   },
   "repository": {
@@ -112,7 +113,7 @@
     "jest-serializer-html": "^7.0.0",
     "jest-watch-typeahead": "^2.2.2",
     "js-beautify": "^1.14.7",
-    "prettier": "^2.8.4",
+    "prettier": "^3.0.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",