styled-components 6.0.0-alpha.7 → 6.0.0-beta.2

package/README.md

@@ -26,7 +26,7 @@ The `main` branch is under development of the upcoming v6 major version of style
 
 ---
 
-Utilising [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
+Utilizing [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` allow you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
 
 ```jsx
 const Button = styled.button`
@@ -130,7 +130,7 @@ If you wish to provide configuration options to the babel plugin similar to how
 
 ## Built with `styled-components`
 
-A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There’s also a whole lot of interesting apps and sites that people have built using styled-components.
+A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There are also a whole lot of interesting apps and sites that people have built using styled-components.
 
 Make sure to head over to [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) to see them all! And please contribute and add your own work to the list so others can find it.
 

package/dist/constructors/constructWithOptions.d.ts

@@ -1,32 +1,27 @@
 /// <reference types="react" />
-import { Attrs, ExecutionContext, Interpolation, IStyledComponent, IStyledComponentFactory, IStyledNativeComponent, IStyledNativeComponentFactory, KnownTarget, NativeTarget, StyledNativeOptions, StyledOptions, StyledTarget, Styles, WebTarget } from '../types';
-export interface NativeStyled<Target extends NativeTarget, DerivedProps = Target extends KnownTarget ? React.ComponentProps<Target> : unknown, OuterProps = unknown, OuterStatics = unknown> {
-    <Props = unknown, Statics = unknown>(initialStyles: Styles<DerivedProps & OuterProps & Props>, ...interpolations: Exclude<Interpolation<ExecutionContext & DerivedProps & OuterProps & Props>, IStyledComponent<any>>[]): IStyledNativeComponent<Target, DerivedProps & OuterProps & Props> & OuterStatics & Statics;
-    attrs(attrs: Attrs<ExecutionContext & DerivedProps & OuterProps>): NativeStyled<Target, DerivedProps, OuterProps, OuterStatics>;
-    withConfig(config: StyledNativeOptions<DerivedProps & OuterProps>): NativeStyled<Target, DerivedProps, OuterProps, OuterStatics>;
+import { Attrs, ExecutionContext, ExtensibleObject, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, Runtime, StyledOptions, StyledTarget, Styles } from '../types';
+export interface Styled<R extends Runtime, Target extends StyledTarget<R>, DerivedProps = Target extends KnownTarget ? React.ComponentProps<Target> : unknown, OuterProps = unknown, OuterStatics = unknown> {
+    <Props = unknown, Statics = unknown>(initialStyles: Styles<DerivedProps & OuterProps & Props>, ...interpolations: Interpolation<ExecutionContext & DerivedProps & OuterProps & Props>[]): IStyledComponent<R, Target, DerivedProps & OuterProps & Props> & OuterStatics & Statics;
+    attrs(attrs: Attrs<ExtensibleObject & DerivedProps & OuterProps>): Styled<R, Target, DerivedProps, OuterProps, OuterStatics>;
+    withConfig(config: StyledOptions<R, DerivedProps & OuterProps>): Styled<R, Target, DerivedProps, OuterProps, OuterStatics>;
 }
-export interface WebStyled<Target extends WebTarget, DerivedProps = Target extends KnownTarget ? React.ComponentProps<Target> : unknown, OuterProps = unknown, OuterStatics = unknown> {
-    <Props = unknown, Statics = unknown>(initialStyles: Styles<DerivedProps & OuterProps & Props>, ...interpolations: Interpolation<ExecutionContext & DerivedProps & OuterProps & Props>[]): IStyledComponent<Target, DerivedProps & OuterProps & Props> & OuterStatics & Statics;
-    attrs(attrs: Attrs<ExecutionContext & DerivedProps & OuterProps>): WebStyled<Target, DerivedProps, OuterProps, OuterStatics>;
-    withConfig(config: StyledOptions<DerivedProps & OuterProps>): WebStyled<Target, DerivedProps, OuterProps, OuterStatics>;
-}
-export default function constructWithOptions<Environment extends 'web' | 'native', Target extends StyledTarget, DerivedProps = Target extends KnownTarget ? React.ComponentProps<Target> : unknown, OuterProps = unknown, // used for styled<{}>().attrs() so attrs() gets the generic prop context
-OuterStatics = unknown>(componentConstructor: Environment extends 'web' ? IStyledComponentFactory<any, any, any> : IStyledNativeComponentFactory<any, any, any>, tag: Target, options?: Environment extends 'web' ? StyledOptions<DerivedProps & OuterProps> : StyledNativeOptions<DerivedProps & OuterProps>): {
-    <Props = unknown, Statics = unknown>(initialStyles: Styles<DerivedProps & OuterProps & Props>, ...interpolations: Interpolation<ExecutionContext & DerivedProps & OuterProps & Props>[]): ReturnType<Environment extends "web" ? IStyledComponentFactory<Target, DerivedProps & OuterProps & Props, OuterStatics & Statics> : IStyledNativeComponentFactory<Target, DerivedProps & OuterProps & Props, OuterStatics & Statics>>;
-    attrs(attrs: Attrs<ExecutionContext & DerivedProps & OuterProps>): {
-        <Props_1 = unknown, Statics_1 = unknown>(initialStyles: Styles<DerivedProps & OuterProps & OuterStatics & Props_1>, ...interpolations: Interpolation<ExecutionContext & DerivedProps & OuterProps & OuterStatics & Props_1>[]): ReturnType<Environment extends "web" ? IStyledComponentFactory<Target, DerivedProps & OuterProps & OuterStatics & Props_1, Statics_1> : IStyledNativeComponentFactory<Target, DerivedProps & OuterProps & OuterStatics & Props_1, Statics_1>>;
-        attrs(attrs: Attrs<ExecutionContext & DerivedProps & OuterProps & OuterStatics>): {
-            <Props_2 = unknown, Statics_2 = unknown>(initialStyles: Styles<DerivedProps & OuterProps & OuterStatics & Props_2>, ...interpolations: Interpolation<ExecutionContext & DerivedProps & OuterProps & OuterStatics & Props_2>[]): ReturnType<Environment extends "web" ? IStyledComponentFactory<Target, DerivedProps & OuterProps & OuterStatics & Props_2, Statics_2> : IStyledNativeComponentFactory<Target, DerivedProps & OuterProps & OuterStatics & Props_2, Statics_2>>;
-            attrs(attrs: Attrs<ExecutionContext & DerivedProps & OuterProps & OuterStatics>): any;
+export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, DerivedProps = Target extends KnownTarget ? React.ComponentProps<Target> : unknown, OuterProps = unknown, // used for styled<{}>().attrs() so attrs() gets the generic prop context
+OuterStatics = unknown>(componentConstructor: IStyledComponentFactory<R, any, any, any>, tag: Target, options?: StyledOptions<R, DerivedProps & OuterProps>): {
+    <Props = unknown, Statics = unknown>(initialStyles: Styles<DerivedProps & OuterProps & Props>, ...interpolations: Interpolation<ExecutionContext & DerivedProps & OuterProps & Props>[]): IStyledComponent<R, Target, DerivedProps & OuterProps & Props> & OuterStatics & Statics;
+    attrs(attrs: Attrs<ExtensibleObject & DerivedProps & OuterProps>): {
+        <Props_1 = unknown, Statics_1 = unknown>(initialStyles: Styles<DerivedProps & OuterProps & OuterStatics & Props_1>, ...interpolations: Interpolation<ExecutionContext & DerivedProps & OuterProps & OuterStatics & Props_1>[]): IStyledComponent<R, Target, DerivedProps & OuterProps & OuterStatics & Props_1> & Statics_1;
+        attrs(attrs: Attrs<ExtensibleObject & DerivedProps & OuterProps & OuterStatics>): {
+            <Props_2 = unknown, Statics_2 = unknown>(initialStyles: Styles<DerivedProps & OuterProps & OuterStatics & Props_2>, ...interpolations: Interpolation<ExecutionContext & DerivedProps & OuterProps & OuterStatics & Props_2>[]): IStyledComponent<R, Target, DerivedProps & OuterProps & OuterStatics & Props_2> & Statics_2;
+            attrs(attrs: Attrs<ExtensibleObject & DerivedProps & OuterProps & OuterStatics>): any;
             /**
              * If config methods are called, wrap up a new template function and merge options */
-            withConfig(config: Environment extends "web" ? StyledOptions<DerivedProps & OuterProps & OuterStatics> : StyledNativeOptions<DerivedProps & OuterProps & OuterStatics>): any;
+            withConfig(config: StyledOptions<R, DerivedProps & OuterProps & OuterStatics>): any;
         };
         /**
          * If config methods are called, wrap up a new template function and merge options */
-        withConfig(config: Environment extends "web" ? StyledOptions<DerivedProps & OuterProps & OuterStatics> : StyledNativeOptions<DerivedProps & OuterProps & OuterStatics>): any;
+        withConfig(config: StyledOptions<R, DerivedProps & OuterProps & OuterStatics>): any;
     };
     /**
      * If config methods are called, wrap up a new template function and merge options */
-    withConfig(config: Environment extends 'web' ? StyledOptions<DerivedProps & OuterProps> : StyledNativeOptions<DerivedProps & OuterProps>): any;
+    withConfig(config: StyledOptions<R, DerivedProps & OuterProps>): any;
 };

package/dist/constructors/css.d.ts

@@ -1,4 +1,4 @@
 import { Interpolation, StyledObject, StyleFunction, Styles } from '../types';
-export default function css<Props>(styles: Styles<Props>, ...interpolations: Interpolation<Props>[]): string | number | import("../types").Keyframes | TemplateStringsArray | import("../types").IStyledComponent<any, any> | StyledObject<Props> | StyleFunction<Props> | (Interpolation<Props>[] & {
+export default function css<Props>(styles: Styles<Props>, ...interpolations: Interpolation<Props>[]): string | number | import("../types").Keyframes | TemplateStringsArray | import("../types").IStyledComponent<"web", any, any> | StyledObject<Props> | StyleFunction<Props> | (Interpolation<Props>[] & {
     isCss?: boolean | undefined;
-});
+}) | null | undefined;

package/dist/constructors/styled.d.ts

@@ -1,185 +1,185 @@
 /// <reference types="react" />
 import { WebTarget } from '../types';
-import { WebStyled } from './constructWithOptions';
+import { Styled } from './constructWithOptions';
 declare const styled: (<Target extends WebTarget>(tag: Target) => {
-    <Props = unknown, Statics = unknown>(initialStyles: import("../types").Styles<(Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown) & Props>, ...interpolations: import("../types").Interpolation<import("../types").ExecutionContext & (Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown) & Props>[]): import("../types").IStyledComponent<Target, (Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown) & Props> & Statics;
-    attrs(attrs: import("../types").Attrs<import("../types").ExecutionContext & (Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown)>): any;
-    withConfig(config: import("../types").StyledOptions<Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown>): any;
+    <Props = unknown, Statics = unknown>(initialStyles: import("../types").Styles<(Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown) & Props>, ...interpolations: import("../types").Interpolation<import("../types").ExecutionContext & (Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown) & Props>[]): import("../types").IStyledComponent<"web", Target, (Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown) & Props> & Statics;
+    attrs(attrs: import("../types").Attrs<import("../types").ExtensibleObject & (Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown)>): any;
+    withConfig(config: import("../types").StyledOptions<"web", Target extends import("../types").KnownTarget ? import("react").ComponentProps<Target> : unknown>): any;
 }) & {
-    a: WebStyled<"a", import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, unknown, unknown>;
-    abbr: WebStyled<"abbr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    address: WebStyled<"address", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    area: WebStyled<"area", import("react").DetailedHTMLProps<import("react").AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>, unknown, unknown>;
-    article: WebStyled<"article", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    aside: WebStyled<"aside", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    audio: WebStyled<"audio", import("react").DetailedHTMLProps<import("react").AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, unknown, unknown>;
-    b: WebStyled<"b", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    base: WebStyled<"base", import("react").DetailedHTMLProps<import("react").BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>, unknown, unknown>;
-    bdi: WebStyled<"bdi", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    bdo: WebStyled<"bdo", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    big: WebStyled<"big", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    blockquote: WebStyled<"blockquote", import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    body: WebStyled<"body", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>, unknown, unknown>;
-    br: WebStyled<"br", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBRElement>, HTMLBRElement>, unknown, unknown>;
-    button: WebStyled<"button", import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, unknown, unknown>;
-    canvas: WebStyled<"canvas", import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, unknown, unknown>;
-    caption: WebStyled<"caption", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    cite: WebStyled<"cite", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    code: WebStyled<"code", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    col: WebStyled<"col", import("react").DetailedHTMLProps<import("react").ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, unknown, unknown>;
-    colgroup: WebStyled<"colgroup", import("react").DetailedHTMLProps<import("react").ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, unknown, unknown>;
-    data: WebStyled<"data", import("react").DetailedHTMLProps<import("react").DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>, unknown, unknown>;
-    datalist: WebStyled<"datalist", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>, unknown, unknown>;
-    dd: WebStyled<"dd", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    del: WebStyled<"del", import("react").DetailedHTMLProps<import("react").DelHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    details: WebStyled<"details", import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    dfn: WebStyled<"dfn", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    dialog: WebStyled<"dialog", import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, unknown, unknown>;
-    div: WebStyled<"div", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, unknown, unknown>;
-    dl: WebStyled<"dl", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, unknown, unknown>;
-    dt: WebStyled<"dt", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    em: WebStyled<"em", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    embed: WebStyled<"embed", import("react").DetailedHTMLProps<import("react").EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>, unknown, unknown>;
-    fieldset: WebStyled<"fieldset", import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, unknown, unknown>;
-    figcaption: WebStyled<"figcaption", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    figure: WebStyled<"figure", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    footer: WebStyled<"footer", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    form: WebStyled<"form", import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, unknown, unknown>;
-    h1: WebStyled<"h1", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
-    h2: WebStyled<"h2", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
-    h3: WebStyled<"h3", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
-    h4: WebStyled<"h4", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
-    h5: WebStyled<"h5", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
-    h6: WebStyled<"h6", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
-    head: WebStyled<"head", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>, unknown, unknown>;
-    header: WebStyled<"header", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    hgroup: WebStyled<"hgroup", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    hr: WebStyled<"hr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, unknown, unknown>;
-    html: WebStyled<"html", import("react").DetailedHTMLProps<import("react").HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>, unknown, unknown>;
-    i: WebStyled<"i", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    iframe: WebStyled<"iframe", import("react").DetailedHTMLProps<import("react").IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, unknown, unknown>;
-    img: WebStyled<"img", import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, unknown, unknown>;
-    input: WebStyled<"input", import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, unknown, unknown>;
-    ins: WebStyled<"ins", import("react").DetailedHTMLProps<import("react").InsHTMLAttributes<HTMLModElement>, HTMLModElement>, unknown, unknown>;
-    kbd: WebStyled<"kbd", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    keygen: WebStyled<"keygen", import("react").DetailedHTMLProps<import("react").KeygenHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    label: WebStyled<"label", import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, unknown, unknown>;
-    legend: WebStyled<"legend", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, unknown, unknown>;
-    li: WebStyled<"li", import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, unknown, unknown>;
-    link: WebStyled<"link", import("react").DetailedHTMLProps<import("react").LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>, unknown, unknown>;
-    main: WebStyled<"main", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    map: WebStyled<"map", import("react").DetailedHTMLProps<import("react").MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>, unknown, unknown>;
-    mark: WebStyled<"mark", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    menu: WebStyled<"menu", import("react").DetailedHTMLProps<import("react").MenuHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    menuitem: WebStyled<"menuitem", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    meta: WebStyled<"meta", import("react").DetailedHTMLProps<import("react").MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>, unknown, unknown>;
-    meter: WebStyled<"meter", import("react").DetailedHTMLProps<import("react").MeterHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    nav: WebStyled<"nav", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    noindex: WebStyled<"noindex", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    noscript: WebStyled<"noscript", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    object: WebStyled<"object", import("react").DetailedHTMLProps<import("react").ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, unknown, unknown>;
-    ol: WebStyled<"ol", import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, unknown, unknown>;
-    optgroup: WebStyled<"optgroup", import("react").DetailedHTMLProps<import("react").OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>, unknown, unknown>;
-    option: WebStyled<"option", import("react").DetailedHTMLProps<import("react").OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, unknown, unknown>;
-    output: WebStyled<"output", import("react").DetailedHTMLProps<import("react").OutputHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    p: WebStyled<"p", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, unknown, unknown>;
-    param: WebStyled<"param", import("react").DetailedHTMLProps<import("react").ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>, unknown, unknown>;
-    picture: WebStyled<"picture", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    pre: WebStyled<"pre", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLPreElement>, HTMLPreElement>, unknown, unknown>;
-    progress: WebStyled<"progress", import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>, unknown, unknown>;
-    q: WebStyled<"q", import("react").DetailedHTMLProps<import("react").QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, unknown, unknown>;
-    rp: WebStyled<"rp", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    rt: WebStyled<"rt", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    ruby: WebStyled<"ruby", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    s: WebStyled<"s", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    samp: WebStyled<"samp", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    slot: WebStyled<"slot", import("react").DetailedHTMLProps<import("react").SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>, unknown, unknown>;
-    script: WebStyled<"script", import("react").DetailedHTMLProps<import("react").ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>, unknown, unknown>;
-    section: WebStyled<"section", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    select: WebStyled<"select", import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, unknown, unknown>;
-    small: WebStyled<"small", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    source: WebStyled<"source", import("react").DetailedHTMLProps<import("react").SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>, unknown, unknown>;
-    span: WebStyled<"span", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, unknown, unknown>;
-    strong: WebStyled<"strong", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    style: WebStyled<"style", import("react").DetailedHTMLProps<import("react").StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>, unknown, unknown>;
-    sub: WebStyled<"sub", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    summary: WebStyled<"summary", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    sup: WebStyled<"sup", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    table: WebStyled<"table", import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, unknown, unknown>;
-    template: WebStyled<"template", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>, unknown, unknown>;
-    tbody: WebStyled<"tbody", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, unknown, unknown>;
-    td: WebStyled<"td", import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, unknown, unknown>;
-    textarea: WebStyled<"textarea", import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, unknown, unknown>;
-    tfoot: WebStyled<"tfoot", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, unknown, unknown>;
-    th: WebStyled<"th", import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, unknown, unknown>;
-    thead: WebStyled<"thead", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, unknown, unknown>;
-    time: WebStyled<"time", import("react").DetailedHTMLProps<import("react").TimeHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    title: WebStyled<"title", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, unknown, unknown>;
-    tr: WebStyled<"tr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, unknown, unknown>;
-    track: WebStyled<"track", import("react").DetailedHTMLProps<import("react").TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>, unknown, unknown>;
-    u: WebStyled<"u", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    ul: WebStyled<"ul", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, unknown, unknown>;
-    var: WebStyled<"var", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    video: WebStyled<"video", import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, unknown, unknown>;
-    wbr: WebStyled<"wbr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
-    webview: WebStyled<"webview", import("react").DetailedHTMLProps<import("react").WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>, unknown, unknown>;
-    svg: WebStyled<"svg", import("react").SVGProps<SVGSVGElement>, unknown, unknown>;
-    animate: WebStyled<"animate", import("react").SVGProps<SVGElement>, unknown, unknown>;
-    animateMotion: WebStyled<"animateMotion", import("react").SVGProps<SVGElement>, unknown, unknown>;
-    animateTransform: WebStyled<"animateTransform", import("react").SVGProps<SVGElement>, unknown, unknown>;
-    circle: WebStyled<"circle", import("react").SVGProps<SVGCircleElement>, unknown, unknown>;
-    clipPath: WebStyled<"clipPath", import("react").SVGProps<SVGClipPathElement>, unknown, unknown>;
-    defs: WebStyled<"defs", import("react").SVGProps<SVGDefsElement>, unknown, unknown>;
-    desc: WebStyled<"desc", import("react").SVGProps<SVGDescElement>, unknown, unknown>;
-    ellipse: WebStyled<"ellipse", import("react").SVGProps<SVGEllipseElement>, unknown, unknown>;
-    feBlend: WebStyled<"feBlend", import("react").SVGProps<SVGFEBlendElement>, unknown, unknown>;
-    feColorMatrix: WebStyled<"feColorMatrix", import("react").SVGProps<SVGFEColorMatrixElement>, unknown, unknown>;
-    feComponentTransfer: WebStyled<"feComponentTransfer", import("react").SVGProps<SVGFEComponentTransferElement>, unknown, unknown>;
-    feComposite: WebStyled<"feComposite", import("react").SVGProps<SVGFECompositeElement>, unknown, unknown>;
-    feConvolveMatrix: WebStyled<"feConvolveMatrix", import("react").SVGProps<SVGFEConvolveMatrixElement>, unknown, unknown>;
-    feDiffuseLighting: WebStyled<"feDiffuseLighting", import("react").SVGProps<SVGFEDiffuseLightingElement>, unknown, unknown>;
-    feDisplacementMap: WebStyled<"feDisplacementMap", import("react").SVGProps<SVGFEDisplacementMapElement>, unknown, unknown>;
-    feDistantLight: WebStyled<"feDistantLight", import("react").SVGProps<SVGFEDistantLightElement>, unknown, unknown>;
-    feDropShadow: WebStyled<"feDropShadow", import("react").SVGProps<SVGFEDropShadowElement>, unknown, unknown>;
-    feFlood: WebStyled<"feFlood", import("react").SVGProps<SVGFEFloodElement>, unknown, unknown>;
-    feFuncA: WebStyled<"feFuncA", import("react").SVGProps<SVGFEFuncAElement>, unknown, unknown>;
-    feFuncB: WebStyled<"feFuncB", import("react").SVGProps<SVGFEFuncBElement>, unknown, unknown>;
-    feFuncG: WebStyled<"feFuncG", import("react").SVGProps<SVGFEFuncGElement>, unknown, unknown>;
-    feFuncR: WebStyled<"feFuncR", import("react").SVGProps<SVGFEFuncRElement>, unknown, unknown>;
-    feGaussianBlur: WebStyled<"feGaussianBlur", import("react").SVGProps<SVGFEGaussianBlurElement>, unknown, unknown>;
-    feImage: WebStyled<"feImage", import("react").SVGProps<SVGFEImageElement>, unknown, unknown>;
-    feMerge: WebStyled<"feMerge", import("react").SVGProps<SVGFEMergeElement>, unknown, unknown>;
-    feMergeNode: WebStyled<"feMergeNode", import("react").SVGProps<SVGFEMergeNodeElement>, unknown, unknown>;
-    feMorphology: WebStyled<"feMorphology", import("react").SVGProps<SVGFEMorphologyElement>, unknown, unknown>;
-    feOffset: WebStyled<"feOffset", import("react").SVGProps<SVGFEOffsetElement>, unknown, unknown>;
-    fePointLight: WebStyled<"fePointLight", import("react").SVGProps<SVGFEPointLightElement>, unknown, unknown>;
-    feSpecularLighting: WebStyled<"feSpecularLighting", import("react").SVGProps<SVGFESpecularLightingElement>, unknown, unknown>;
-    feSpotLight: WebStyled<"feSpotLight", import("react").SVGProps<SVGFESpotLightElement>, unknown, unknown>;
-    feTile: WebStyled<"feTile", import("react").SVGProps<SVGFETileElement>, unknown, unknown>;
-    feTurbulence: WebStyled<"feTurbulence", import("react").SVGProps<SVGFETurbulenceElement>, unknown, unknown>;
-    filter: WebStyled<"filter", import("react").SVGProps<SVGFilterElement>, unknown, unknown>;
-    foreignObject: WebStyled<"foreignObject", import("react").SVGProps<SVGForeignObjectElement>, unknown, unknown>;
-    g: WebStyled<"g", import("react").SVGProps<SVGGElement>, unknown, unknown>;
-    image: WebStyled<"image", import("react").SVGProps<SVGImageElement>, unknown, unknown>;
-    line: WebStyled<"line", import("react").SVGProps<SVGLineElement>, unknown, unknown>;
-    linearGradient: WebStyled<"linearGradient", import("react").SVGProps<SVGLinearGradientElement>, unknown, unknown>;
-    marker: WebStyled<"marker", import("react").SVGProps<SVGMarkerElement>, unknown, unknown>;
-    mask: WebStyled<"mask", import("react").SVGProps<SVGMaskElement>, unknown, unknown>;
-    metadata: WebStyled<"metadata", import("react").SVGProps<SVGMetadataElement>, unknown, unknown>;
-    mpath: WebStyled<"mpath", import("react").SVGProps<SVGElement>, unknown, unknown>;
-    path: WebStyled<"path", import("react").SVGProps<SVGPathElement>, unknown, unknown>;
-    pattern: WebStyled<"pattern", import("react").SVGProps<SVGPatternElement>, unknown, unknown>;
-    polygon: WebStyled<"polygon", import("react").SVGProps<SVGPolygonElement>, unknown, unknown>;
-    polyline: WebStyled<"polyline", import("react").SVGProps<SVGPolylineElement>, unknown, unknown>;
-    radialGradient: WebStyled<"radialGradient", import("react").SVGProps<SVGRadialGradientElement>, unknown, unknown>;
-    rect: WebStyled<"rect", import("react").SVGProps<SVGRectElement>, unknown, unknown>;
-    stop: WebStyled<"stop", import("react").SVGProps<SVGStopElement>, unknown, unknown>;
-    switch: WebStyled<"switch", import("react").SVGProps<SVGSwitchElement>, unknown, unknown>;
-    symbol: WebStyled<"symbol", import("react").SVGProps<SVGSymbolElement>, unknown, unknown>;
-    text: WebStyled<"text", import("react").SVGProps<SVGTextElement>, unknown, unknown>;
-    textPath: WebStyled<"textPath", import("react").SVGProps<SVGTextPathElement>, unknown, unknown>;
-    tspan: WebStyled<"tspan", import("react").SVGProps<SVGTSpanElement>, unknown, unknown>;
-    use: WebStyled<"use", import("react").SVGProps<SVGUseElement>, unknown, unknown>;
-    view: WebStyled<"view", import("react").SVGProps<SVGViewElement>, unknown, unknown>;
+    a: Styled<"web", "a", import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, unknown, unknown>;
+    abbr: Styled<"web", "abbr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    address: Styled<"web", "address", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    area: Styled<"web", "area", import("react").DetailedHTMLProps<import("react").AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>, unknown, unknown>;
+    article: Styled<"web", "article", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    aside: Styled<"web", "aside", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    audio: Styled<"web", "audio", import("react").DetailedHTMLProps<import("react").AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, unknown, unknown>;
+    b: Styled<"web", "b", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    base: Styled<"web", "base", import("react").DetailedHTMLProps<import("react").BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>, unknown, unknown>;
+    bdi: Styled<"web", "bdi", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    bdo: Styled<"web", "bdo", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    big: Styled<"web", "big", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    blockquote: Styled<"web", "blockquote", import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    body: Styled<"web", "body", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>, unknown, unknown>;
+    br: Styled<"web", "br", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBRElement>, HTMLBRElement>, unknown, unknown>;
+    button: Styled<"web", "button", import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, unknown, unknown>;
+    canvas: Styled<"web", "canvas", import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, unknown, unknown>;
+    caption: Styled<"web", "caption", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    cite: Styled<"web", "cite", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    code: Styled<"web", "code", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    col: Styled<"web", "col", import("react").DetailedHTMLProps<import("react").ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, unknown, unknown>;
+    colgroup: Styled<"web", "colgroup", import("react").DetailedHTMLProps<import("react").ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, unknown, unknown>;
+    data: Styled<"web", "data", import("react").DetailedHTMLProps<import("react").DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>, unknown, unknown>;
+    datalist: Styled<"web", "datalist", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>, unknown, unknown>;
+    dd: Styled<"web", "dd", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    del: Styled<"web", "del", import("react").DetailedHTMLProps<import("react").DelHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    details: Styled<"web", "details", import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    dfn: Styled<"web", "dfn", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    dialog: Styled<"web", "dialog", import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, unknown, unknown>;
+    div: Styled<"web", "div", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, unknown, unknown>;
+    dl: Styled<"web", "dl", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, unknown, unknown>;
+    dt: Styled<"web", "dt", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    em: Styled<"web", "em", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    embed: Styled<"web", "embed", import("react").DetailedHTMLProps<import("react").EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>, unknown, unknown>;
+    fieldset: Styled<"web", "fieldset", import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, unknown, unknown>;
+    figcaption: Styled<"web", "figcaption", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    figure: Styled<"web", "figure", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    footer: Styled<"web", "footer", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    form: Styled<"web", "form", import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, unknown, unknown>;
+    h1: Styled<"web", "h1", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
+    h2: Styled<"web", "h2", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
+    h3: Styled<"web", "h3", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
+    h4: Styled<"web", "h4", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
+    h5: Styled<"web", "h5", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
+    h6: Styled<"web", "h6", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, unknown, unknown>;
+    head: Styled<"web", "head", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>, unknown, unknown>;
+    header: Styled<"web", "header", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    hgroup: Styled<"web", "hgroup", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    hr: Styled<"web", "hr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, unknown, unknown>;
+    html: Styled<"web", "html", import("react").DetailedHTMLProps<import("react").HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>, unknown, unknown>;
+    i: Styled<"web", "i", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    iframe: Styled<"web", "iframe", import("react").DetailedHTMLProps<import("react").IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, unknown, unknown>;
+    img: Styled<"web", "img", import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, unknown, unknown>;
+    input: Styled<"web", "input", import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, unknown, unknown>;
+    ins: Styled<"web", "ins", import("react").DetailedHTMLProps<import("react").InsHTMLAttributes<HTMLModElement>, HTMLModElement>, unknown, unknown>;
+    kbd: Styled<"web", "kbd", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    keygen: Styled<"web", "keygen", import("react").DetailedHTMLProps<import("react").KeygenHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    label: Styled<"web", "label", import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, unknown, unknown>;
+    legend: Styled<"web", "legend", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, unknown, unknown>;
+    li: Styled<"web", "li", import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, unknown, unknown>;
+    link: Styled<"web", "link", import("react").DetailedHTMLProps<import("react").LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>, unknown, unknown>;
+    main: Styled<"web", "main", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    map: Styled<"web", "map", import("react").DetailedHTMLProps<import("react").MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>, unknown, unknown>;
+    mark: Styled<"web", "mark", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    menu: Styled<"web", "menu", import("react").DetailedHTMLProps<import("react").MenuHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    menuitem: Styled<"web", "menuitem", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    meta: Styled<"web", "meta", import("react").DetailedHTMLProps<import("react").MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>, unknown, unknown>;
+    meter: Styled<"web", "meter", import("react").DetailedHTMLProps<import("react").MeterHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    nav: Styled<"web", "nav", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    noindex: Styled<"web", "noindex", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    noscript: Styled<"web", "noscript", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    object: Styled<"web", "object", import("react").DetailedHTMLProps<import("react").ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, unknown, unknown>;
+    ol: Styled<"web", "ol", import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, unknown, unknown>;
+    optgroup: Styled<"web", "optgroup", import("react").DetailedHTMLProps<import("react").OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>, unknown, unknown>;
+    option: Styled<"web", "option", import("react").DetailedHTMLProps<import("react").OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, unknown, unknown>;
+    output: Styled<"web", "output", import("react").DetailedHTMLProps<import("react").OutputHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    p: Styled<"web", "p", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, unknown, unknown>;
+    param: Styled<"web", "param", import("react").DetailedHTMLProps<import("react").ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>, unknown, unknown>;
+    picture: Styled<"web", "picture", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    pre: Styled<"web", "pre", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLPreElement>, HTMLPreElement>, unknown, unknown>;
+    progress: Styled<"web", "progress", import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>, unknown, unknown>;
+    q: Styled<"web", "q", import("react").DetailedHTMLProps<import("react").QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, unknown, unknown>;
+    rp: Styled<"web", "rp", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    rt: Styled<"web", "rt", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    ruby: Styled<"web", "ruby", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    s: Styled<"web", "s", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    samp: Styled<"web", "samp", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    slot: Styled<"web", "slot", import("react").DetailedHTMLProps<import("react").SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>, unknown, unknown>;
+    script: Styled<"web", "script", import("react").DetailedHTMLProps<import("react").ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>, unknown, unknown>;
+    section: Styled<"web", "section", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    select: Styled<"web", "select", import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, unknown, unknown>;
+    small: Styled<"web", "small", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    source: Styled<"web", "source", import("react").DetailedHTMLProps<import("react").SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>, unknown, unknown>;
+    span: Styled<"web", "span", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, unknown, unknown>;
+    strong: Styled<"web", "strong", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    style: Styled<"web", "style", import("react").DetailedHTMLProps<import("react").StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>, unknown, unknown>;
+    sub: Styled<"web", "sub", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    summary: Styled<"web", "summary", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    sup: Styled<"web", "sup", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    table: Styled<"web", "table", import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, unknown, unknown>;
+    template: Styled<"web", "template", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>, unknown, unknown>;
+    tbody: Styled<"web", "tbody", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, unknown, unknown>;
+    td: Styled<"web", "td", import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, unknown, unknown>;
+    textarea: Styled<"web", "textarea", import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, unknown, unknown>;
+    tfoot: Styled<"web", "tfoot", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, unknown, unknown>;
+    th: Styled<"web", "th", import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, unknown, unknown>;
+    thead: Styled<"web", "thead", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, unknown, unknown>;
+    time: Styled<"web", "time", import("react").DetailedHTMLProps<import("react").TimeHTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    title: Styled<"web", "title", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, unknown, unknown>;
+    tr: Styled<"web", "tr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, unknown, unknown>;
+    track: Styled<"web", "track", import("react").DetailedHTMLProps<import("react").TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>, unknown, unknown>;
+    u: Styled<"web", "u", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    ul: Styled<"web", "ul", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, unknown, unknown>;
+    var: Styled<"web", "var", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    video: Styled<"web", "video", import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, unknown, unknown>;
+    wbr: Styled<"web", "wbr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, unknown, unknown>;
+    webview: Styled<"web", "webview", import("react").DetailedHTMLProps<import("react").WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>, unknown, unknown>;
+    svg: Styled<"web", "svg", import("react").SVGProps<SVGSVGElement>, unknown, unknown>;
+    animate: Styled<"web", "animate", import("react").SVGProps<SVGElement>, unknown, unknown>;
+    animateMotion: Styled<"web", "animateMotion", import("react").SVGProps<SVGElement>, unknown, unknown>;
+    animateTransform: Styled<"web", "animateTransform", import("react").SVGProps<SVGElement>, unknown, unknown>;
+    circle: Styled<"web", "circle", import("react").SVGProps<SVGCircleElement>, unknown, unknown>;
+    clipPath: Styled<"web", "clipPath", import("react").SVGProps<SVGClipPathElement>, unknown, unknown>;
+    defs: Styled<"web", "defs", import("react").SVGProps<SVGDefsElement>, unknown, unknown>;
+    desc: Styled<"web", "desc", import("react").SVGProps<SVGDescElement>, unknown, unknown>;
+    ellipse: Styled<"web", "ellipse", import("react").SVGProps<SVGEllipseElement>, unknown, unknown>;
+    feBlend: Styled<"web", "feBlend", import("react").SVGProps<SVGFEBlendElement>, unknown, unknown>;
+    feColorMatrix: Styled<"web", "feColorMatrix", import("react").SVGProps<SVGFEColorMatrixElement>, unknown, unknown>;
+    feComponentTransfer: Styled<"web", "feComponentTransfer", import("react").SVGProps<SVGFEComponentTransferElement>, unknown, unknown>;
+    feComposite: Styled<"web", "feComposite", import("react").SVGProps<SVGFECompositeElement>, unknown, unknown>;
+    feConvolveMatrix: Styled<"web", "feConvolveMatrix", import("react").SVGProps<SVGFEConvolveMatrixElement>, unknown, unknown>;
+    feDiffuseLighting: Styled<"web", "feDiffuseLighting", import("react").SVGProps<SVGFEDiffuseLightingElement>, unknown, unknown>;
+    feDisplacementMap: Styled<"web", "feDisplacementMap", import("react").SVGProps<SVGFEDisplacementMapElement>, unknown, unknown>;
+    feDistantLight: Styled<"web", "feDistantLight", import("react").SVGProps<SVGFEDistantLightElement>, unknown, unknown>;
+    feDropShadow: Styled<"web", "feDropShadow", import("react").SVGProps<SVGFEDropShadowElement>, unknown, unknown>;
+    feFlood: Styled<"web", "feFlood", import("react").SVGProps<SVGFEFloodElement>, unknown, unknown>;
+    feFuncA: Styled<"web", "feFuncA", import("react").SVGProps<SVGFEFuncAElement>, unknown, unknown>;
+    feFuncB: Styled<"web", "feFuncB", import("react").SVGProps<SVGFEFuncBElement>, unknown, unknown>;
+    feFuncG: Styled<"web", "feFuncG", import("react").SVGProps<SVGFEFuncGElement>, unknown, unknown>;
+    feFuncR: Styled<"web", "feFuncR", import("react").SVGProps<SVGFEFuncRElement>, unknown, unknown>;
+    feGaussianBlur: Styled<"web", "feGaussianBlur", import("react").SVGProps<SVGFEGaussianBlurElement>, unknown, unknown>;
+    feImage: Styled<"web", "feImage", import("react").SVGProps<SVGFEImageElement>, unknown, unknown>;
+    feMerge: Styled<"web", "feMerge", import("react").SVGProps<SVGFEMergeElement>, unknown, unknown>;
+    feMergeNode: Styled<"web", "feMergeNode", import("react").SVGProps<SVGFEMergeNodeElement>, unknown, unknown>;
+    feMorphology: Styled<"web", "feMorphology", import("react").SVGProps<SVGFEMorphologyElement>, unknown, unknown>;
+    feOffset: Styled<"web", "feOffset", import("react").SVGProps<SVGFEOffsetElement>, unknown, unknown>;
+    fePointLight: Styled<"web", "fePointLight", import("react").SVGProps<SVGFEPointLightElement>, unknown, unknown>;
+    feSpecularLighting: Styled<"web", "feSpecularLighting", import("react").SVGProps<SVGFESpecularLightingElement>, unknown, unknown>;
+    feSpotLight: Styled<"web", "feSpotLight", import("react").SVGProps<SVGFESpotLightElement>, unknown, unknown>;
+    feTile: Styled<"web", "feTile", import("react").SVGProps<SVGFETileElement>, unknown, unknown>;
+    feTurbulence: Styled<"web", "feTurbulence", import("react").SVGProps<SVGFETurbulenceElement>, unknown, unknown>;
+    filter: Styled<"web", "filter", import("react").SVGProps<SVGFilterElement>, unknown, unknown>;
+    foreignObject: Styled<"web", "foreignObject", import("react").SVGProps<SVGForeignObjectElement>, unknown, unknown>;
+    g: Styled<"web", "g", import("react").SVGProps<SVGGElement>, unknown, unknown>;
+    image: Styled<"web", "image", import("react").SVGProps<SVGImageElement>, unknown, unknown>;
+    line: Styled<"web", "line", import("react").SVGProps<SVGLineElement>, unknown, unknown>;
+    linearGradient: Styled<"web", "linearGradient", import("react").SVGProps<SVGLinearGradientElement>, unknown, unknown>;
+    marker: Styled<"web", "marker", import("react").SVGProps<SVGMarkerElement>, unknown, unknown>;
+    mask: Styled<"web", "mask", import("react").SVGProps<SVGMaskElement>, unknown, unknown>;
+    metadata: Styled<"web", "metadata", import("react").SVGProps<SVGMetadataElement>, unknown, unknown>;
+    mpath: Styled<"web", "mpath", import("react").SVGProps<SVGElement>, unknown, unknown>;
+    path: Styled<"web", "path", import("react").SVGProps<SVGPathElement>, unknown, unknown>;
+    pattern: Styled<"web", "pattern", import("react").SVGProps<SVGPatternElement>, unknown, unknown>;
+    polygon: Styled<"web", "polygon", import("react").SVGProps<SVGPolygonElement>, unknown, unknown>;
+    polyline: Styled<"web", "polyline", import("react").SVGProps<SVGPolylineElement>, unknown, unknown>;
+    radialGradient: Styled<"web", "radialGradient", import("react").SVGProps<SVGRadialGradientElement>, unknown, unknown>;
+    rect: Styled<"web", "rect", import("react").SVGProps<SVGRectElement>, unknown, unknown>;
+    stop: Styled<"web", "stop", import("react").SVGProps<SVGStopElement>, unknown, unknown>;
+    switch: Styled<"web", "switch", import("react").SVGProps<SVGSwitchElement>, unknown, unknown>;
+    symbol: Styled<"web", "symbol", import("react").SVGProps<SVGSymbolElement>, unknown, unknown>;
+    text: Styled<"web", "text", import("react").SVGProps<SVGTextElement>, unknown, unknown>;
+    textPath: Styled<"web", "textPath", import("react").SVGProps<SVGTextPathElement>, unknown, unknown>;
+    tspan: Styled<"web", "tspan", import("react").SVGProps<SVGTSpanElement>, unknown, unknown>;
+    use: Styled<"web", "use", import("react").SVGProps<SVGUseElement>, unknown, unknown>;
+    view: Styled<"web", "view", import("react").SVGProps<SVGViewElement>, unknown, unknown>;
 };
 export default styled;

package/dist/models/ComponentStyle.d.ts

@@ -8,6 +8,7 @@ export default class ComponentStyle {
     baseStyle: ComponentStyle | null | undefined;
     componentId: string;
     isStatic: boolean;
+    names: string[];
     rules: RuleSet<any>;
     staticRulesId: string;
     constructor(rules: RuleSet<any>, componentId: string, baseStyle?: ComponentStyle);

package/dist/models/StyledComponent.d.ts

@@ -1,3 +1,3 @@
 import type { IStyledComponentFactory, RuleSet, StyledOptions, WebTarget } from '../types';
-declare function createStyledComponent<Target extends WebTarget, OuterProps = unknown, Statics = unknown>(target: Target, options: StyledOptions<OuterProps>, rules: RuleSet<OuterProps>): ReturnType<IStyledComponentFactory<Target, OuterProps, Statics>>;
+declare function createStyledComponent<Target extends WebTarget, OuterProps = unknown, Statics = unknown>(target: Target, options: StyledOptions<'web', OuterProps>, rules: RuleSet<OuterProps>): ReturnType<IStyledComponentFactory<'web', Target, OuterProps, Statics>>;
 export default createStyledComponent;

package/dist/models/StyledNativeComponent.d.ts

@@ -1,3 +1,3 @@
-import type { ExtensibleObject, IInlineStyleConstructor, IStyledNativeComponent, IStyledNativeComponentFactory, NativeTarget, RuleSet, StyledNativeOptions } from '../types';
-declare const _default: (InlineStyle: IInlineStyleConstructor<any>) => <Target extends NativeTarget, OuterProps extends ExtensibleObject, Statics = unknown>(target: Target, options: StyledNativeOptions<OuterProps>, rules: RuleSet<OuterProps>) => IStyledNativeComponent<Target, OuterProps> & Statics;
+import type { ExtensibleObject, IInlineStyleConstructor, IStyledComponent, IStyledComponentFactory, NativeTarget, RuleSet, StyledOptions } from '../types';
+declare const _default: (InlineStyle: IInlineStyleConstructor<any>) => <Target extends NativeTarget, OuterProps extends ExtensibleObject, Statics = unknown>(target: Target, options: StyledOptions<"native", OuterProps>, rules: RuleSet<OuterProps>) => IStyledComponent<"native", Target, OuterProps> & Statics;
 export default _default;