styled-components 6.0.0-rc.2-4007 → 6.0.0-rc.3

package/dist/constructors/constructWithOptions.d.ts

@@ -1,40 +1,44 @@
 import React from 'react';
-import { Attrs, DataAttributes, ExecutionContext, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, NoInfer, Runtime, StyledOptions, StyledTarget, Styles, SubsetOnly } from '../types';
-/**
- * for types a and b, if b shares a field with a, mark a's field as optional
- */
-type OptionalIntersection<A, B> = {
-    [K in Extract<keyof A, keyof B>]?: A[K];
+import { Interpolation, IStyledComponent, IStyledComponentFactory, NoInfer, Runtime, StyledComponentInnerComponent, StyledComponentProps, StyledOptions, StyledTarget, Styles, SubsetOnly, ThemedProps } from '../types';
+type StyledComponentPropsWithRef<R extends Runtime, Target extends StyledTarget<R>> = Target extends keyof JSX.IntrinsicElements | React.ComponentType<any> ? Target extends {
+    readonly _sc: symbol;
+} ? React.ComponentPropsWithRef<StyledComponentInnerComponent<R, Target>> : React.ComponentPropsWithRef<Target> : {};
+type AttrPropValues<R extends Runtime, Target extends StyledTarget<R>, Props extends object> = Partial<StyledComponentPropsWithRef<R, Target> & Props> & {
+    [key: string]: any;
 };
-type AttrsResult<T extends Attrs> = T extends (...args: any) => infer P ? P : T;
-type ExtractAttrsTarget<R extends Runtime, P extends ExecutionProps, DefaultTarget extends StyledTarget<R>> = P['as'] extends KnownTarget ? P['as'] : DefaultTarget;
-/**
- * If attrs type is a function (no type provided, inferring from usage), extract the return value
- * and merge it with the existing type to hole-punch any required fields that are satisfied as
- * a result of running attrs. Otherwise if we have a definite type then union the base props
- * with the passed attr type to capture any intended overrides.
- */
-type PropsSatisfiedByAttrs<T extends Attrs, Props extends object, Result extends ExecutionProps = AttrsResult<T>> = Omit<Props, keyof Result> & OptionalIntersection<Props, Result> & Partial<Omit<Result, keyof Props | 'as'>>;
-/**
- * Rejects an attr factory function argument (T) if it returns any properties not defined in Props.
- */
-type StrictAttrFactory<T, Props> = T extends ((props: ExecutionContext & Props) => infer TResult) ? TResult extends SubsetOnly<TResult, (Partial<Props> & ExecutionProps & DataAttributes & React.AriaAttributes)> ? (props: ExecutionContext & Props) => TResult : never : never;
-export interface Styled<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = object, OuterStatics extends object = object, RuntimeInjectedProps extends ExecutionProps = object> {
-    <Props extends object = object, Statics extends object = object>(initialStyles: Styles<OuterProps & RuntimeInjectedProps & NoInfer<Props>>, ...interpolations: Interpolation<OuterProps & RuntimeInjectedProps & NoInfer<Props>>[]): // @ts-expect-error KnownTarget is a subset of StyledTarget<R>
-    IStyledComponent<R, ExtractAttrsTarget<R, RuntimeInjectedProps, Target>, OuterProps & Props> & OuterStatics & Statics;
-    /**
-     * This is a chainable method that attaches some props to a styled component.
-     * @param props An object containing prop values that will be merged into the rest of the component's props
-     * @argument Props Additional props being injected in `props`
-     */
-    attrs<Props extends object = object, PropValues extends Partial<OuterProps> & ExecutionProps & DataAttributes & React.AriaAttributes & NoInfer<Props> = Partial<OuterProps> & ExecutionProps & DataAttributes & React.AriaAttributes & NoInfer<Props>>(props: PropValues & SubsetOnly<PropValues, Partial<OuterProps> & ExecutionProps & DataAttributes & React.AriaAttributes & NoInfer<Props>>): Styled<R, Target, PropsSatisfiedByAttrs<PropValues, OuterProps>, OuterStatics, Omit<RuntimeInjectedProps, keyof PropValues> & PropValues>;
-    /**
-     * This is a chainable method that attaches some props to a styled component.
-     * @param propFactory A function that receives the props that are passed into the component and computes a value, that is then going to be merged into the existing component props.
-     * @argument Props Additional props being returned by `propFactory`
-     */
-    attrs<Props extends object = object, Factory extends ((...args: any[]) => any) = (...args: any[]) => any, TTarget extends StyledTarget<R> = ExtractAttrsTarget<R, AttrsResult<Factory>, Target>>(propFactory: Factory & StrictAttrFactory<Factory, OuterProps & NoInfer<Props>>): Styled<R, TTarget, PropsSatisfiedByAttrs<Factory, OuterProps>, OuterStatics, Omit<RuntimeInjectedProps, keyof AttrsResult<Factory>> & AttrsResult<Factory>>;
-    withConfig: (config: StyledOptions<R, OuterProps>) => Styled<R, Target, OuterProps, OuterStatics>;
+type AttrFactoryProps<R extends Runtime, Target extends StyledTarget<R>, Props extends object> = ThemedProps<StyledComponentPropsWithRef<R, Target> & Props>;
+type FactoryAsC<R extends Runtime, Target extends StyledTarget<R>, Factory extends (...args: any[]) => any> = ReturnType<Factory> extends {
+    as: infer AsC;
+} ? AsC extends StyledTarget<R> ? AsC : Target : Target;
+type AttrValueType<T> = T extends (() => any) | ((...args: any[]) => any) ? never : {};
+type StrictAttrFactory<Factory extends (...args: any[]) => any, R extends Runtime, Target extends StyledTarget<R>, Props extends object> = Factory extends (...args: any[]) => infer TResult ? TResult extends object & SubsetOnly<TResult, AttrPropValues<R, Target, Props>> ? (props: AttrFactoryProps<R, Target, Props>) => AttrPropValues<R, Target, Props> : never : never;
+export interface Styled<R extends Runtime, Target extends StyledTarget<R>, OtherProps extends object, AttrProps extends keyof any = never, OtherStatics extends object = {}> {
+    <MoreOtherProps extends object = {}, MoreStatics extends object = {}>(initialStyles: Styles<ThemedProps<StyledComponentPropsWithRef<R, Target> & OtherProps & NoInfer<MoreOtherProps>>>, ...interpolations: Interpolation<ThemedProps<StyledComponentPropsWithRef<R, Target> & OtherProps & NoInfer<MoreOtherProps>>>[]): IStyledComponent<R, Target, OtherProps & NoInfer<MoreOtherProps>, AttrProps> & OtherStatics & MoreStatics;
+    attrs<AsC extends StyledTarget<R> = Target, NewA extends AttrPropValues<R, Target, OtherProps> & {
+        as?: AsC;
+    } = AttrPropValues<R, Target, OtherProps> & {
+        as?: AsC;
+    }>(attrs: NewA & AttrValueType<NewA> & {
+        as?: AsC;
+    }): Styled<R, AsC, OtherProps & Omit<NewA, 'as'>, AttrProps | keyof NewA>;
+    attrs<NewProps extends object = never, AsC extends StyledTarget<R> = Target, NewA extends AttrPropValues<R, Target, OtherProps & NewProps> & {
+        as?: AsC;
+    } = AttrPropValues<R, Target, OtherProps & NewProps> & {
+        as?: AsC;
+    }>(attrs: NewA & AttrValueType<NewA> & {
+        as?: AsC;
+    }): Styled<R, AsC, OtherProps & Omit<NewProps, 'as'>, AttrProps | keyof NewA>;
+    attrs<AsC extends StyledTarget<R>, Factory extends (props: AttrFactoryProps<R, Target, OtherProps>) => AttrPropValues<R, Target, OtherProps & {
+        as?: AsC;
+    }>>(attrFactory: Factory & StrictAttrFactory<Factory, R, Target, OtherProps & {
+        as?: AsC;
+    }>): Styled<R, FactoryAsC<R, Target, Factory>, OtherProps & Omit<ReturnType<Factory>, 'as' | keyof StyledComponentPropsWithRef<R, Target>>, AttrProps | keyof ReturnType<Factory>>;
+    attrs<NewProps extends object = {}, AsC extends StyledTarget<R> = Target, Factory extends (props: AttrFactoryProps<R, Target, OtherProps & NoInfer<NewProps>>) => AttrPropValues<R, Target, OtherProps & NoInfer<NewProps> & {
+        as?: AsC;
+    }> = (props: AttrFactoryProps<R, Target, OtherProps & NoInfer<NewProps>>) => AttrPropValues<R, Target, OtherProps & NoInfer<NewProps> & {
+        as?: AsC;
+    }>>(attrFactory: Factory & StrictAttrFactory<Factory, R, Target, OtherProps & NoInfer<NewProps>>): Styled<R, FactoryAsC<R, Target, Factory>, OtherProps & Omit<NewProps, 'as'>, AttrProps | keyof ReturnType<Factory>>;
+    withConfig: <Props extends OtherProps = OtherProps>(config: StyledOptions<R, StyledComponentPropsWithRef<R, Target> & Props>) => Styled<R, Target, Props, AttrProps>;
 }
-export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.ComponentPropsWithRef<Target> : object, OuterStatics extends object = object>(componentConstructor: IStyledComponentFactory<R, Target, OuterProps, OuterStatics>, tag: Target, options?: StyledOptions<R, OuterProps>): Styled<R, Target, OuterProps, OuterStatics>;
+export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OtherProps extends object = {}, OtherStatics extends object = {}>(componentConstructor: IStyledComponentFactory<R, Target, OtherProps, never, OtherStatics>, tag: Target, options?: StyledOptions<R, StyledComponentProps<R, Target, OtherProps, never>>): Styled<R, Target, OtherProps, never, OtherStatics>;
 export {};

package/dist/constructors/styled.d.ts

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

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import styled from './constructors/styled';
 export * from './base';
-export { CSSProp, DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, PolymorphicComponent, PolymorphicComponentProps, RuleSet, Runtime, StyledObject, StyledOptions, WebTarget, } from './types';
+export { CSSProp, DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, RuleSet, Runtime, StyledObject, StyledOptions, WebTarget, } from './types';
 export { styled, styled as default };

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 extends object, Statics extends object = object>(target: Target, options: StyledOptions<'web', OuterProps>, rules: RuleSet<OuterProps>): ReturnType<IStyledComponentFactory<'web', Target, OuterProps, Statics>>;
+declare function createStyledComponent<Target extends WebTarget, OtherProps extends object, Statics extends object = object>(target: Target, options: StyledOptions<'web', OtherProps>, rules: RuleSet<OtherProps>): ReturnType<IStyledComponentFactory<'web', Target, OtherProps, never, Statics>>;
 export default createStyledComponent;

package/dist/models/StyledNativeComponent.d.ts

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

package/dist/native/index.d.ts

@@ -1,36 +1,37 @@
-import React from 'react';
 import { Styled } from '../constructors/constructWithOptions';
 import css from '../constructors/css';
 import withTheme from '../hoc/withTheme';
 import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from '../models/ThemeProvider';
-import { NativeTarget } from '../types';
+import { AnyStyledComponent, NativeTarget, StyledComponentInnerAttrs, StyledComponentInnerComponent, StyledComponentInnerOtherProps } from '../types';
 import isStyledComponent from '../utils/isStyledComponent';
-declare const styled: (<Target extends NativeTarget>(tag: Target) => Styled<"native", Target, Target extends import("../types").KnownTarget ? React.ComponentPropsWithRef<Target> : object, object, object>) & {
-    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, import("react-native").ActivityIndicatorProps, object, object>;
-    Button: Styled<"native", typeof import("react-native").Button, import("react-native").ButtonProps, object, object>;
-    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, import("react-native").DatePickerIOSProps, object, object>;
-    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, import("react-native").DrawerLayoutAndroidProps, object, object>;
-    FlatList: Styled<"native", typeof import("react-native").FlatList, import("react-native").FlatListProps<unknown>, object, object>;
-    Image: Styled<"native", typeof import("react-native").Image, import("react-native").ImageProps, object, object>;
-    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, import("react-native").ImageBackgroundProps, object, object>;
-    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, import("react-native").KeyboardAvoidingViewProps, object, object>;
-    Modal: Styled<"native", typeof import("react-native").Modal, import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps, object, object>;
-    Pressable: Styled<"native", import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>, object, object>;
-    ProgressBarAndroid: Styled<"native", typeof import("react-native").ProgressBarAndroid, import("react-native").ProgressBarAndroidProps, object, object>;
-    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, import("react-native").ProgressViewIOSProps, object, object>;
-    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, import("react-native").RefreshControlProps, object, object>;
-    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, import("react-native").ViewProps, object, object>;
-    ScrollView: Styled<"native", typeof import("react-native").ScrollView, import("react-native").ScrollViewProps, object, object>;
-    SectionList: Styled<"native", typeof import("react-native").SectionList, import("react-native").SectionListProps<unknown, unknown>, object, object>;
-    Slider: Styled<"native", typeof import("react-native").Slider, import("react-native").SliderProps, object, object>;
-    Switch: Styled<"native", typeof import("react-native").Switch, import("react-native").SwitchProps, object, object>;
-    Text: Styled<"native", typeof import("react-native").Text, import("react-native").TextProps, object, object>;
-    TextInput: Styled<"native", typeof import("react-native").TextInput, import("react-native").TextInputProps, object, object>;
-    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, import("react-native").TouchableHighlightProps, object, object>;
-    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, import("react-native").TouchableOpacityProps, object, object>;
-    View: Styled<"native", typeof import("react-native").View, import("react-native").ViewProps, object, object>;
-    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, import("react-native").VirtualizedListProps<unknown>, object, object>;
+declare function createStyle<Target extends AnyStyledComponent<'native'>>(tag: Target): Styled<'native', StyledComponentInnerComponent<'native', Target>, StyledComponentInnerOtherProps<'native', Target>, StyledComponentInnerAttrs<'native', Target>>;
+declare function createStyle<Target extends NativeTarget>(tag: Target): Styled<'native', Target, {}>;
+declare const styled: typeof createStyle & {
+    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, {}, never, {}>;
+    Button: Styled<"native", typeof import("react-native").Button, {}, never, {}>;
+    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, {}, never, {}>;
+    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, {}, never, {}>;
+    FlatList: Styled<"native", typeof import("react-native").FlatList, {}, never, {}>;
+    Image: Styled<"native", typeof import("react-native").Image, {}, never, {}>;
+    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, {}, never, {}>;
+    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, {}, never, {}>;
+    Modal: Styled<"native", typeof import("react-native").Modal, {}, never, {}>;
+    Pressable: Styled<"native", import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, {}, never, {}>;
+    ProgressBarAndroid: Styled<"native", typeof import("react-native").ProgressBarAndroid, {}, never, {}>;
+    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, {}, never, {}>;
+    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, {}, never, {}>;
+    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, {}, never, {}>;
+    ScrollView: Styled<"native", typeof import("react-native").ScrollView, {}, never, {}>;
+    SectionList: Styled<"native", typeof import("react-native").SectionList, {}, never, {}>;
+    Slider: Styled<"native", typeof import("react-native").Slider, {}, never, {}>;
+    Switch: Styled<"native", typeof import("react-native").Switch, {}, never, {}>;
+    Text: Styled<"native", typeof import("react-native").Text, {}, never, {}>;
+    TextInput: Styled<"native", typeof import("react-native").TextInput, {}, never, {}>;
+    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, {}, never, {}>;
+    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, {}, never, {}>;
+    View: Styled<"native", typeof import("react-native").View, {}, never, {}>;
+    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, {}, never, {}>;
 };
-export { DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, NativeTarget, PolymorphicComponent, PolymorphicComponentProps, Runtime, StyledObject, StyledOptions, } from '../types';
+export { DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, NativeTarget, Runtime, StyledObject, StyledOptions, } from '../types';
 export { css, isStyledComponent, ThemeProvider, ThemeConsumer, ThemeContext, withTheme, useTheme };
 export { styled, styled as default };

package/dist/styled-components.browser.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react"),n=require("shallowequal"),r=require("stylis"),o=require("@emotion/unitless");function s(e){return e&&e.__esModule?e:{default:e}}var i=/*#__PURE__*/s(t),a=/*#__PURE__*/s(n),c=/*#__PURE__*/s(o),l="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",u="6.0.0-rc.2-4007",p="undefined"!=typeof window&&"HTMLElement"in window,d=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),h={},f=/invalid hook call/i,y=new Set,m=function(n,r){if("production"!==process.env.NODE_ENV){var o=r?' with the id of "'.concat(r,'"'):"",s="The component ".concat(n).concat(o," has been created dynamically.\n")+"You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",i=console.error;try{var a=!0;console.error=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];f.test(t)?(a=!1,y.delete(s)):i.apply(void 0,e.__spreadArray([t],n,!1))},t.useRef(),a&&!y.has(s)&&(console.warn(s),y.add(s))}catch(e){f.test(e.message)&&y.delete(s)}finally{console.error=i}}},v=Object.freeze([]),g=Object.freeze({});function S(e,t,n){return void 0===n&&(n=g),e.theme!==n.theme&&e.theme||t||n.theme}var _=new Set(["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","head","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","title","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"]),w=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,b=/(^-|-$)/g;function E(e){return e.replace(w,"-").replace(b,"")}var N=/(a)(d)/gi,P=function(e){return String.fromCharCode(e+(e>25?39:97))};function C(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=P(t%52)+n;return(P(t%52)+n).replace(N,"$1-$2")}var A,I=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},O=function(e){return I(5381,e)};function x(e){return C(O(e)>>>0)}function T(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function R(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var D="function"==typeof Symbol&&Symbol.for,j=D?Symbol.for("react.memo"):60115,k=D?Symbol.for("react.forward_ref"):60112,V={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},M={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},F={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},B=((A={})[k]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},A[j]=F,A);function $(e){return("type"in(t=e)&&t.type.$$typeof)===j?F:"$$typeof"in e?B[e.$$typeof]:V;var t}var z=Object.defineProperty,L=Object.getOwnPropertyNames,G=Object.getOwnPropertySymbols,q=Object.getOwnPropertyDescriptor,Y=Object.getPrototypeOf,W=Object.prototype;function H(e,t,n){if("string"!=typeof t){if(W){var r=Y(t);r&&r!==W&&H(e,r,n)}var o=L(t);G&&(o=o.concat(G(t)));for(var s=$(e),i=$(t),a=0;a<o.length;++a){var c=o[a];if(!(c in M||n&&n[c]||i&&c in i||s&&c in s)){var l=q(t,c);try{z(e,c,l)}catch(e){}}}}return e}function U(e){return"function"==typeof e}function J(e){return"object"==typeof e&&"styledComponentId"in e}function X(e,t){return e&&t?"".concat(e," ").concat(t):e||t||""}function Z(e,t){if(0===e.length)return"";for(var n=e[0],r=1;r<e.length;r++)n+=t?t+e[r]:e[r];return n}function K(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function Q(e,t,n){if(void 0===n&&(n=!1),!n&&!K(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var r=0;r<t.length;r++)e[r]=Q(e[r],t[r]);else if(K(t))for(var r in t)e[r]=Q(e[r],t[r]);return e}var ee="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function te(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],r=[],o=1,s=e.length;o<s;o+=1)r.push(e[o]);return r.forEach(function(e){n=n.replace(/%[a-z]/,e)}),n}function ne(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];return"production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(te.apply(void 0,e.__spreadArray([ee[t]],n,!1)).trim())}var re=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}return e.prototype.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)if((o<<=1)<0)throw ne(16,"".concat(e));this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0}for(var i=this.indexOfGroup(e+1),a=(s=0,t.length);s<a;s++)this.tag.insertRule(i,t[s])&&(this.groupSizes[e]++,i++)},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n)}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+="".concat(this.tag.getRule(s)).concat("/*!sc*/\n");return t},e}(),oe=new Map,se=new Map,ie=1,ae=function(e){if(oe.has(e))return oe.get(e);for(;se.has(ie);)ie++;var t=ie++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>1073741824))throw ne(16,"".concat(t));return oe.set(e,t),se.set(t,e),t},ce=function(e,t){oe.set(e,t),se.set(t,e)},le="style[".concat(l,"][").concat("data-styled-version",'="').concat(u,'"]'),ue=new RegExp("^".concat(l,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),pe=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r)},de=function(e,t){for(var n,r=(null!==(n=t.textContent)&&void 0!==n?n:"").split("/*!sc*/\n"),o=[],s=0,i=r.length;s<i;s++){var a=r[s].trim();if(a){var c=a.match(ue);if(c){var l=0|parseInt(c[1],10),u=c[2];0!==l&&(ce(u,l),pe(e,u,c[3]),e.getTag().insertRules(l,o)),o.length=0}else o.push(a)}}};function he(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var fe=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(l))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(l,"active"),r.setAttribute("data-styled-version",u);var i=he();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},ye=function(){function e(e){this.element=fe(e),this.element.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}throw ne(17)}(this.element),this.length=0}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""},e}(),me=function(){function e(e){this.element=fe(e),this.nodes=this.element.childNodes,this.length=0}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,!0}return!1},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),ve=function(){function e(e){this.rules=[],this.length=0}return e.prototype.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),ge=p,Se={isServer:!p,useCSSOMInjection:!d},_e=function(){function t(t,n,r){void 0===t&&(t=g),void 0===n&&(n={}),this.options=e.__assign(e.__assign({},Se),t),this.gs=n,this.names=new Map(r),this.server=!!t.isServer,!this.server&&p&&ge&&(ge=!1,function(e){for(var t=document.querySelectorAll(le),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(l)&&(de(e,o),o.parentNode&&o.parentNode.removeChild(o))}}(this))}return t.registerId=function(e){return ae(e)},t.prototype.reconstructWithOptions=function(n,r){return void 0===r&&(r=!0),new t(e.__assign(e.__assign({},this.options),n),this.gs,r&&this.names||void 0)},t.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target;return e.isServer?new ve(n):t?new ye(n):new me(n)}(this.options),new re(e)));var e},t.prototype.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.prototype.registerName=function(e,t){if(ae(e),this.names.has(e))this.names.get(e).add(t);else{var n=new Set;n.add(t),this.names.set(e,n)}},t.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(ae(e),n)},t.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},t.prototype.clearRules=function(e){this.getTag().clearGroup(ae(e)),this.clearNames(e)},t.prototype.clearTag=function(){this.tag=void 0},t.prototype.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=function(n){var o=function(e){return se.get(e)}(n);if(void 0===o)return"continue";var s=e.names.get(o),i=t.getGroup(n);if(void 0===s||0===i.length)return"continue";var a="".concat(l,".g").concat(n,'[id="').concat(o,'"]'),c="";void 0!==s&&s.forEach(function(e){e.length>0&&(c+="".concat(e,","))}),r+="".concat(i).concat(a,'{content:"').concat(c,'"}').concat("/*!sc*/\n")},s=0;s<n;s++)o(s);return r}(this)},t}(),we=/&/g,be=/^\s*\/\/.*$/gm,Ee=/[^}]+\}+(?!\})/g;function Ne(e,t){return e.map(function(e){return"rule"===e.type&&(e.value="".concat(t," ").concat(e.value),e.value=e.value.replaceAll(",",",".concat(t," ")),e.props=e.props.map(function(e){return"".concat(t," ").concat(e)})),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ne(e.children,t)),e})}function Pe(e){var t,n,o,s=void 0===e?g:e,i=s.options,a=void 0===i?g:i,c=s.plugins,l=void 0===c?v:c,u=function(e,r,o){return o===n||o.startsWith(n)&&o.endsWith(n)&&o.replaceAll(n,"").length>0?".".concat(t):e},p=l.slice();a.prefix&&p.unshift(r.prefixer),p.push(function(e){e.type===r.RULESET&&e.value.includes("&")&&(e.props[0]=e.props[0].replace(we,n).replace(o,u))},r.stringify);var d=function(e,s,i,c){void 0===s&&(s=""),void 0===i&&(i=""),void 0===c&&(c="&"),t=c,n=s,o=new RegExp("\\".concat(n,"\\b"),"g");var l=e.replace(be,""),u=r.compile(i||s?"".concat(i," ").concat(s," { ").concat(l," }"):l);return a.namespace&&(u=Ne(u,a.namespace)),function(e,t){for(var n=[],r=0,o=void 0;r<e.length;r+=1)(o=t(e[r],r,e,t))&&n.push.apply(n,o.match(Ee));return n}(u,r.middleware(p))};return d.hash=l.length?l.reduce(function(e,t){return t.name||ne(15),I(e,t.name)},5381).toString():"",d}var Ce=new _e,Ae=Pe(),Ie=i.default.createContext({shouldForwardProp:void 0,styleSheet:Ce,stylis:Ae}),Oe=Ie.Consumer,xe=i.default.createContext(void 0);function Te(){return t.useContext(Ie)}function Re(e){var n=t.useState(e.stylisPlugins),r=n[0],o=n[1],s=Te().styleSheet,c=t.useMemo(function(){var t=s;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t},[e.disableCSSOMInjection,e.sheet,e.target,s]),l=t.useMemo(function(){return Pe({options:{namespace:e.namespace,prefix:e.enableVendorPrefixes},plugins:r})},[e.enableVendorPrefixes,e.namespace,r]);return t.useEffect(function(){a.default(r,e.stylisPlugins)||o(e.stylisPlugins)},[e.stylisPlugins]),i.default.createElement(Ie.Provider,{value:{shouldForwardProp:e.shouldForwardProp,styleSheet:c,stylis:l}},i.default.createElement(xe.Provider,{value:l},e.children))}var De=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=Ae);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"))},this.toString=function(){throw ne(12,String(n.name))},this.name=e,this.id="sc-keyframes-".concat(e),this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=Ae),this.name+e.hash},e}(),je=function(e){return e>="A"&&e<="Z"};function ke(e){for(var t="",n=0;n<e.length;n++){var r=e[n];if(1===n&&"-"===r&&"-"===e[0])return e;je(r)?t+="-"+r.toLowerCase():t+=r}return t.startsWith("ms-")?"-"+t:t}var Ve=function(e){return null==e||!1===e||""===e},Me=function(t){var n,r,o=[];for(var s in t){var i=t[s];t.hasOwnProperty(s)&&!Ve(i)&&(Array.isArray(i)&&i.isCss||U(i)?o.push("".concat(ke(s),":"),i,";"):K(i)?o.push.apply(o,e.__spreadArray(e.__spreadArray(["".concat(s," {")],Me(i),!1),["}"],!1)):o.push("".concat(ke(s),": ").concat((n=s,null==(r=i)||"boolean"==typeof r||""===r?"":"number"!=typeof r||0===r||n in c.default||n.startsWith("--")?String(r).trim():"".concat(r,"px")),";")))}return o};function Fe(e,t,n,r){if(Ve(e))return[];if(J(e))return[".".concat(e.styledComponentId)];if(U(e)){if(!U(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return[e];var o=e(t);return"production"===process.env.NODE_ENV||"object"!=typeof o||Array.isArray(o)||o instanceof De||K(o)||null===o||console.error("".concat(T(e)," is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")),Fe(o,t,n,r)}var s;return e instanceof De?n?(e.inject(n,r),[e.getName(r)]):[e]:K(e)?Me(e):Array.isArray(e)?e.flatMap(function(e){return Fe(e,t,n,r)}):[e.toString()]}function Be(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(U(n)&&!J(n))return!1}return!0}var $e=O(u),ze=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Be(e),this.componentId=t,this.baseHash=I($e,t),this.baseStyle=n,_e.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))r=X(r,this.staticRulesId);else{var o=Z(Fe(this.rules,e,t,n)),s=C(I(this.baseHash,o)>>>0);if(!t.hasNameForId(this.componentId,s)){var i=n(o,".".concat(s),void 0,this.componentId);t.insertRules(this.componentId,s,i)}r=X(r,s),this.staticRulesId=s}else{for(var a=I(this.baseHash,n.hash),c="",l=0;l<this.rules.length;l++){var u=this.rules[l];if("string"==typeof u)c+=u,"production"!==process.env.NODE_ENV&&(a=I(a,u));else if(u){var p=Z(Fe(u,e,t,n));a=I(a,p),c+=p}}if(c){var d=C(a>>>0);t.hasNameForId(this.componentId,d)||t.insertRules(this.componentId,d,n(c,".".concat(d),void 0,this.componentId)),r=X(r,d)}}return r},e}(),Le=i.default.createContext(void 0),Ge=Le.Consumer;function qe(){return t.useContext(Le)}var Ye={};function We(n,r,o){var s=J(n),a=n,c=!R(n),l=r.attrs,p=void 0===l?v:l,d=r.componentId,h=void 0===d?function(e,t){var n="string"!=typeof e?"sc":E(e);Ye[n]=(Ye[n]||0)+1;var r="".concat(n,"-").concat(x(u+n+Ye[n]));return t?"".concat(t,"-").concat(r):r}(r.displayName,r.parentComponentId):d,f=r.displayName,y=void 0===f?function(e){return R(e)?"styled.".concat(e):"Styled(".concat(T(e),")")}(n):f,w=r.displayName&&r.componentId?"".concat(E(r.displayName),"-").concat(r.componentId):r.componentId||h,b=s&&a.attrs?a.attrs.concat(p).filter(Boolean):p,N=r.shouldForwardProp;if(s&&a.shouldForwardProp){var P=a.shouldForwardProp;if(r.shouldForwardProp){var C=r.shouldForwardProp;N=function(e,t){return P(e,t)&&C(e,t)}}else N=P}var A=new ze(o,w,s?a.componentStyle:void 0),I=A.isStatic&&0===p.length;function O(n,r){return function(n,r,o,s){var i=n.attrs,a=n.componentStyle,c=n.defaultProps,l=n.foldedComponentIds,u=n.styledComponentId,p=n.target,d=qe(),h=Te(),f=n.shouldForwardProp||h.shouldForwardProp;"production"!==process.env.NODE_ENV&&t.useDebugValue(u);var y=function(t,n,r){for(var o,s=e.__assign(e.__assign({},n),{className:void 0,theme:r}),i=0;i<t.length;i+=1){var a=U(o=t[i])?o(s):o;for(var c in a)s[c]="className"===c?X(s[c],a[c]):"style"===c?e.__assign(e.__assign({},s[c]),a[c]):a[c]}return n.className&&(s.className=X(s.className,n.className)),s}(i,r,S(r,d,c)||g),m=y.as||p,v={};for(var w in y)void 0===y[w]||"$"===w[0]||"as"===w||"theme"===w||("forwardedAs"===w?v.as=y.forwardedAs:f&&!f(w,m)||(v[w]=y[w]));var b=function(e,n,r){var o=Te(),s=e.generateAndInjectStyles(n?g:r,o.styleSheet,o.stylis);return"production"!==process.env.NODE_ENV&&t.useDebugValue(s),s}(a,s,y);"production"!==process.env.NODE_ENV&&!s&&n.warnTooManyClasses&&n.warnTooManyClasses(b);var E=X(l,u);return b&&(E+=" "+b),y.className&&(E+=" "+y.className),v[R(m)&&!_.has(m)?"class":"className"]=E,v.ref=o,t.createElement(m,v)}(D,n,r,I)}O.displayName=y;var D=i.default.forwardRef(O);return D.attrs=b,D.componentStyle=A,D.displayName=y,D.shouldForwardProp=N,D.foldedComponentIds=s?X(a.foldedComponentIds,a.styledComponentId):"",D.styledComponentId=w,D.target=s?a.target:n,Object.defineProperty(D,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=s?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var r=0,o=t;r<o.length;r++)Q(e,o[r],!0);return e}({},a.defaultProps,e):e}}),"production"!==process.env.NODE_ENV&&(m(y,w),D.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(s,".\n")+"Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={}}}}(y,w)),Object.defineProperty(D,"toString",{value:function(){return".".concat(D.styledComponentId)}}),c&&H(D,n,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0}),D}function He(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n}var Ue=function(e){return Object.assign(e,{isCss:!0})};function Je(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];if(U(t)||K(t)){var o=t;return Ue(Fe(He(v,e.__spreadArray([o],n,!0))))}var s=t;return 0===n.length&&1===s.length&&"string"==typeof s[0]?Fe(s):Ue(Fe(He(s,n)))}function Xe(t,n,r){if(void 0===r&&(r=g),!n)throw ne(1,n);var o=function(o){for(var s=[],i=1;i<arguments.length;i++)s[i-1]=arguments[i];return t(n,r,Je.apply(void 0,e.__spreadArray([o],s,!1)))};return o.attrs=function(o){return Xe(t,n,e.__assign(e.__assign({},r),{attrs:Array.prototype.concat(r.attrs,o).filter(Boolean)}))},o.withConfig=function(o){return Xe(t,n,e.__assign(e.__assign({},r),o))},o}var Ze=function(e){return Xe(We,e)},Ke=Ze;_.forEach(function(e){Ke[e]=Ze(e)});var Qe=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=Be(e),_e.registerId(this.componentId+1)}return e.prototype.createStyles=function(e,t,n,r){var o=r(Z(Fe(this.rules,t,n,r)),""),s=this.componentId+e;n.insertRules(s,s,o)},e.prototype.removeStyles=function(e,t){t.clearRules(this.componentId+e)},e.prototype.renderStyles=function(e,t,n,r){e>2&&_e.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r)},e}(),et=function(){function t(){var t=this;this._emitSheetCSS=function(){var e=t.instance.toString(),n=he(),r=Z([n&&'nonce="'.concat(n,'"'),"".concat(l,'="true"'),"".concat("data-styled-version",'="').concat(u,'"')].filter(Boolean)," ");return"<style ".concat(r,">").concat(e,"</style>")},this.getStyleTags=function(){if(t.sealed)throw ne(2);return t._emitSheetCSS()},this.getStyleElement=function(){var n;if(t.sealed)throw ne(2);var r=((n={})[l]="",n["data-styled-version"]=u,n.dangerouslySetInnerHTML={__html:t.instance.toString()},n),o=he();return o&&(r.nonce=o),[i.default.createElement("style",e.__assign({},r,{key:"sc-0-0"}))]},this.seal=function(){t.sealed=!0},this.instance=new _e({isServer:!0}),this.sealed=!1}return t.prototype.collectStyles=function(e){if(this.sealed)throw ne(2);return i.default.createElement(Re,{sheet:this.instance},e)},t.prototype.interleaveWithNodeStream=function(e){throw ne(3)},t}(),tt={StyleSheet:_e,mainSheet:Ce};"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");var nt="__sc-".concat(l,"__");"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window[nt]||(window[nt]=0),1===window[nt]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window[nt]+=1),exports.ServerStyleSheet=et,exports.StyleSheetConsumer=Oe,exports.StyleSheetContext=Ie,exports.StyleSheetManager=Re,exports.ThemeConsumer=Ge,exports.ThemeContext=Le,exports.ThemeProvider=function(n){var r=qe(),o=t.useMemo(function(){return function(t,n){if(!t)throw ne(14);if(U(t)){var r=t(n);if("production"!==process.env.NODE_ENV&&(null===r||Array.isArray(r)||"object"!=typeof r))throw ne(7);return r}if(Array.isArray(t)||"object"!=typeof t)throw ne(8);return n?e.__assign(e.__assign({},n),t):t}(n.theme,r)},[n.theme,r]);return n.children?i.default.createElement(Le.Provider,{value:o},n.children):null},exports.__PRIVATE__=tt,exports.createGlobalStyle=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];var o=Je.apply(void 0,e.__spreadArray([t],n,!1)),s="sc-global-".concat(x(JSON.stringify(o))),a=new Qe(o,s);"production"!==process.env.NODE_ENV&&m(s);var c=function(e){var t=Te(),n=qe(),r=i.default.useRef(t.styleSheet.allocateGSInstance(s)).current;return"production"!==process.env.NODE_ENV&&i.default.Children.count(e.children)&&console.warn("The global style component ".concat(s," was given child JSX. createGlobalStyle does not render children.")),"production"!==process.env.NODE_ENV&&o.some(function(e){return"string"==typeof e&&-1!==e.indexOf("@import")})&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),t.styleSheet.server&&l(r,e,t.styleSheet,n,t.stylis),(i.default.useInsertionEffect||i.default.useLayoutEffect)(function(){if(!t.styleSheet.server)return l(r,e,t.styleSheet,n,t.stylis),function(){return a.removeStyles(r,t.styleSheet)}},[r,e,t.styleSheet,n,t.stylis]),null};function l(t,n,r,o,s){if(a.isStatic)a.renderStyles(t,h,r,s);else{var i=e.__assign(e.__assign({},n),{theme:S(n,o,c.defaultProps)});a.renderStyles(t,i,r,s)}}return i.default.memo(c)},exports.css=Je,exports.default=Ke,exports.isStyledComponent=J,exports.keyframes=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");var o=Z(Je.apply(void 0,e.__spreadArray([t],n,!1))),s=x(o);return new De(s,o)},exports.styled=Ke,exports.useTheme=qe,exports.version=u,exports.withTheme=function(t){var n=i.default.forwardRef(function(n,r){var o=S(n,qe(),t.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===o&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'.concat(T(t),'"')),i.default.createElement(t,e.__assign({},n,{theme:o,ref:r}))});return n.displayName="WithTheme(".concat(T(t),")"),H(n,t)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react"),n=require("shallowequal"),r=require("stylis"),o=require("@emotion/unitless");function s(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var a=/*#__PURE__*/s(t),c=/*#__PURE__*/s(n),l=/*#__PURE__*/i(r),u=/*#__PURE__*/s(o),p="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",d="undefined"!=typeof window&&"HTMLElement"in window,h=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),f={},y=/invalid hook call/i,m=new Set,v=function(n,r){if("production"!==process.env.NODE_ENV){var o=r?' with the id of "'.concat(r,'"'):"",s="The component ".concat(n).concat(o," has been created dynamically.\n")+"You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",i=console.error;try{var a=!0;console.error=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];y.test(t)?(a=!1,m.delete(s)):i.apply(void 0,e.__spreadArray([t],n,!1))},t.useRef(),a&&!m.has(s)&&(console.warn(s),m.add(s))}catch(e){y.test(e.message)&&m.delete(s)}finally{console.error=i}}},g=Object.freeze([]),S=Object.freeze({});function _(e,t,n){return void 0===n&&(n=S),e.theme!==n.theme&&e.theme||t||n.theme}var w=new Set(["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","head","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","title","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"]),b=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,E=/(^-|-$)/g;function N(e){return e.replace(b,"-").replace(E,"")}var P=/(a)(d)/gi,C=function(e){return String.fromCharCode(e+(e>25?39:97))};function A(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=C(t%52)+n;return(C(t%52)+n).replace(P,"$1-$2")}var I,O=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},x=function(e){return O(5381,e)};function T(e){return A(x(e)>>>0)}function D(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function R(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var j="function"==typeof Symbol&&Symbol.for,k=j?Symbol.for("react.memo"):60115,V=j?Symbol.for("react.forward_ref"):60112,M={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},z={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},F={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},B=((I={})[V]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},I[k]=F,I);function $(e){return("type"in(t=e)&&t.type.$$typeof)===k?F:"$$typeof"in e?B[e.$$typeof]:M;var t}var L=Object.defineProperty,G=Object.getOwnPropertyNames,q=Object.getOwnPropertySymbols,Y=Object.getOwnPropertyDescriptor,W=Object.getPrototypeOf,H=Object.prototype;function U(e,t,n){if("string"!=typeof t){if(H){var r=W(t);r&&r!==H&&U(e,r,n)}var o=G(t);q&&(o=o.concat(q(t)));for(var s=$(e),i=$(t),a=0;a<o.length;++a){var c=o[a];if(!(c in z||n&&n[c]||i&&c in i||s&&c in s)){var l=Y(t,c);try{L(e,c,l)}catch(e){}}}}return e}function J(e){return"function"==typeof e}function X(e){return"object"==typeof e&&"styledComponentId"in e}function Z(e,t){return e&&t?"".concat(e," ").concat(t):e||t||""}function K(e,t){if(0===e.length)return"";for(var n=e[0],r=1;r<e.length;r++)n+=t?t+e[r]:e[r];return n}function Q(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function ee(e,t,n){if(void 0===n&&(n=!1),!n&&!Q(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var r=0;r<t.length;r++)e[r]=ee(e[r],t[r]);else if(Q(t))for(var r in t)e[r]=ee(e[r],t[r]);return e}var te="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function ne(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],r=[],o=1,s=e.length;o<s;o+=1)r.push(e[o]);return r.forEach(function(e){n=n.replace(/%[a-z]/,e)}),n}function re(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];return"production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(ne.apply(void 0,e.__spreadArray([te[t]],n,!1)).trim())}var oe=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}return e.prototype.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)if((o<<=1)<0)throw re(16,"".concat(e));this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0}for(var i=this.indexOfGroup(e+1),a=(s=0,t.length);s<a;s++)this.tag.insertRule(i,t[s])&&(this.groupSizes[e]++,i++)},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n)}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+="".concat(this.tag.getRule(s)).concat("/*!sc*/\n");return t},e}(),se=new Map,ie=new Map,ae=1,ce=function(e){if(se.has(e))return se.get(e);for(;ie.has(ae);)ae++;var t=ae++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>1073741824))throw re(16,"".concat(t));return se.set(e,t),ie.set(t,e),t},le=function(e,t){se.set(e,t),ie.set(t,e)},ue="style[".concat(p,"][").concat("data-styled-version",'="').concat("6.0.0-rc.3",'"]'),pe=new RegExp("^".concat(p,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),de=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r)},he=function(e,t){for(var n,r=(null!==(n=t.textContent)&&void 0!==n?n:"").split("/*!sc*/\n"),o=[],s=0,i=r.length;s<i;s++){var a=r[s].trim();if(a){var c=a.match(pe);if(c){var l=0|parseInt(c[1],10),u=c[2];0!==l&&(le(u,l),de(e,u,c[3]),e.getTag().insertRules(l,o)),o.length=0}else o.push(a)}}};function fe(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var ye=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(p))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(p,"active"),r.setAttribute("data-styled-version","6.0.0-rc.3");var i=fe();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},me=function(){function e(e){this.element=ye(e),this.element.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}throw re(17)}(this.element),this.length=0}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""},e}(),ve=function(){function e(e){this.element=ye(e),this.nodes=this.element.childNodes,this.length=0}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,!0}return!1},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),ge=function(){function e(e){this.rules=[],this.length=0}return e.prototype.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),Se=d,_e={isServer:!d,useCSSOMInjection:!h},we=function(){function t(t,n,r){void 0===t&&(t=S),void 0===n&&(n={}),this.options=e.__assign(e.__assign({},_e),t),this.gs=n,this.names=new Map(r),this.server=!!t.isServer,!this.server&&d&&Se&&(Se=!1,function(e){for(var t=document.querySelectorAll(ue),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(p)&&(he(e,o),o.parentNode&&o.parentNode.removeChild(o))}}(this))}return t.registerId=function(e){return ce(e)},t.prototype.reconstructWithOptions=function(n,r){return void 0===r&&(r=!0),new t(e.__assign(e.__assign({},this.options),n),this.gs,r&&this.names||void 0)},t.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target;return e.isServer?new ge(n):t?new me(n):new ve(n)}(this.options),new oe(e)));var e},t.prototype.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.prototype.registerName=function(e,t){if(ce(e),this.names.has(e))this.names.get(e).add(t);else{var n=new Set;n.add(t),this.names.set(e,n)}},t.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(ce(e),n)},t.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},t.prototype.clearRules=function(e){this.getTag().clearGroup(ce(e)),this.clearNames(e)},t.prototype.clearTag=function(){this.tag=void 0},t.prototype.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=function(n){var o=function(e){return ie.get(e)}(n);if(void 0===o)return"continue";var s=e.names.get(o),i=t.getGroup(n);if(void 0===s||0===i.length)return"continue";var a="".concat(p,".g").concat(n,'[id="').concat(o,'"]'),c="";void 0!==s&&s.forEach(function(e){e.length>0&&(c+="".concat(e,","))}),r+="".concat(i).concat(a,'{content:"').concat(c,'"}').concat("/*!sc*/\n")},s=0;s<n;s++)o(s);return r}(this)},t}(),be=/&/g,Ee=/^\s*\/\/.*$/gm;function Ne(e,t){return e.map(function(e){return"rule"===e.type&&(e.value="".concat(t," ").concat(e.value),e.value=e.value.replaceAll(",",",".concat(t," ")),e.props=e.props.map(function(e){return"".concat(t," ").concat(e)})),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ne(e.children,t)),e})}function Pe(e){var t,n,r,o=void 0===e?S:e,s=o.options,i=void 0===s?S:s,a=o.plugins,c=void 0===a?g:a,u=function(e,r,o){return o===n||o.startsWith(n)&&o.endsWith(n)&&o.replaceAll(n,"").length>0?".".concat(t):e},p=c.slice();p.push(function(e){e.type===l.RULESET&&e.value.includes("&")&&(e.props[0]=e.props[0].replace(be,n).replace(r,u))}),i.prefix&&p.push(l.prefixer),p.push(l.stringify);var d=function(e,o,s,a){void 0===o&&(o=""),void 0===s&&(s=""),void 0===a&&(a="&"),t=a,n=o,r=new RegExp("\\".concat(n,"\\b"),"g");var c=e.replace(Ee,""),u=l.compile(s||o?"".concat(s," ").concat(o," { ").concat(c," }"):c);i.namespace&&(u=Ne(u,i.namespace));var d=[];return l.serialize(u,l.middleware(p.concat(l.rulesheet(function(e){return d.push(e)})))),d};return d.hash=c.length?c.reduce(function(e,t){return t.name||re(15),O(e,t.name)},5381).toString():"",d}var Ce=new we,Ae=Pe(),Ie=a.default.createContext({shouldForwardProp:void 0,styleSheet:Ce,stylis:Ae}),Oe=Ie.Consumer,xe=a.default.createContext(void 0);function Te(){return t.useContext(Ie)}function De(e){var n=t.useState(e.stylisPlugins),r=n[0],o=n[1],s=Te().styleSheet,i=t.useMemo(function(){var t=s;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t},[e.disableCSSOMInjection,e.sheet,e.target,s]),l=t.useMemo(function(){return Pe({options:{namespace:e.namespace,prefix:e.enableVendorPrefixes},plugins:r})},[e.enableVendorPrefixes,e.namespace,r]);return t.useEffect(function(){c.default(r,e.stylisPlugins)||o(e.stylisPlugins)},[e.stylisPlugins]),a.default.createElement(Ie.Provider,{value:{shouldForwardProp:e.shouldForwardProp,styleSheet:i,stylis:l}},a.default.createElement(xe.Provider,{value:l},e.children))}var Re=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=Ae);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"))},this.toString=function(){throw re(12,String(n.name))},this.name=e,this.id="sc-keyframes-".concat(e),this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=Ae),this.name+e.hash},e}(),je=function(e){return e>="A"&&e<="Z"};function ke(e){for(var t="",n=0;n<e.length;n++){var r=e[n];if(1===n&&"-"===r&&"-"===e[0])return e;je(r)?t+="-"+r.toLowerCase():t+=r}return t.startsWith("ms-")?"-"+t:t}var Ve=function(e){return null==e||!1===e||""===e},Me=function(t){var n,r,o=[];for(var s in t){var i=t[s];t.hasOwnProperty(s)&&!Ve(i)&&(Array.isArray(i)&&i.isCss||J(i)?o.push("".concat(ke(s),":"),i,";"):Q(i)?o.push.apply(o,e.__spreadArray(e.__spreadArray(["".concat(s," {")],Me(i),!1),["}"],!1)):o.push("".concat(ke(s),": ").concat((n=s,null==(r=i)||"boolean"==typeof r||""===r?"":"number"!=typeof r||0===r||n in u.default||n.startsWith("--")?String(r).trim():"".concat(r,"px")),";")))}return o};function ze(e,t,n,r){if(Ve(e))return[];if(X(e))return[".".concat(e.styledComponentId)];if(J(e)){if(!J(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return[e];var o=e(t);return"production"===process.env.NODE_ENV||"object"!=typeof o||Array.isArray(o)||o instanceof Re||Q(o)||null===o||console.error("".concat(D(e)," is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")),ze(o,t,n,r)}var s;return e instanceof Re?n?(e.inject(n,r),[e.getName(r)]):[e]:Q(e)?Me(e):Array.isArray(e)?e.flatMap(function(e){return ze(e,t,n,r)}):[e.toString()]}function Fe(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(J(n)&&!X(n))return!1}return!0}var Be=x("6.0.0-rc.3"),$e=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Fe(e),this.componentId=t,this.baseHash=O(Be,t),this.baseStyle=n,we.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))r=Z(r,this.staticRulesId);else{var o=K(ze(this.rules,e,t,n)),s=A(O(this.baseHash,o)>>>0);if(!t.hasNameForId(this.componentId,s)){var i=n(o,".".concat(s),void 0,this.componentId);t.insertRules(this.componentId,s,i)}r=Z(r,s),this.staticRulesId=s}else{for(var a=O(this.baseHash,n.hash),c="",l=0;l<this.rules.length;l++){var u=this.rules[l];if("string"==typeof u)c+=u,"production"!==process.env.NODE_ENV&&(a=O(a,u));else if(u){var p=K(ze(u,e,t,n));a=O(a,p),c+=p}}if(c){var d=A(a>>>0);t.hasNameForId(this.componentId,d)||t.insertRules(this.componentId,d,n(c,".".concat(d),void 0,this.componentId)),r=Z(r,d)}}return r},e}(),Le=a.default.createContext(void 0),Ge=Le.Consumer;function qe(){return t.useContext(Le)}var Ye={};function We(n,r,o){var s,i=X(n),c=n,l=!R(n),u=r.componentId,p=void 0===u?function(e,t){var n="string"!=typeof e?"sc":N(e);Ye[n]=(Ye[n]||0)+1;var r="".concat(n,"-").concat(T("6.0.0-rc.3"+n+Ye[n]));return t?"".concat(t,"-").concat(r):r}(r.displayName,r.parentComponentId):u,d=r.displayName,h=void 0===d?function(e){return R(e)?"styled.".concat(e):"Styled(".concat(D(e),")")}(n):d,f=null!==(s=r.attrs)&&void 0!==s?s:[],y=r.displayName&&r.componentId?"".concat(N(r.displayName),"-").concat(r.componentId):r.componentId||p,m=i&&c.attrs?c.attrs.concat(f).filter(Boolean):f,g=r.shouldForwardProp;if(i&&c.shouldForwardProp){var b=c.shouldForwardProp;if(r.shouldForwardProp){var E=r.shouldForwardProp;g=function(e,t){return b(e,t)&&E(e,t)}}else g=b}var P=new $e(o,y,i?c.componentStyle:void 0),C=P.isStatic&&0===f.length;function A(n,r){return function(n,r,o,s){var i=n.attrs,a=n.componentStyle,c=n.defaultProps,l=n.foldedComponentIds,u=n.styledComponentId,p=n.target,d=qe(),h=Te(),f=n.shouldForwardProp||h.shouldForwardProp;"production"!==process.env.NODE_ENV&&t.useDebugValue(u);var y=function(t,n,r){for(var o,s=e.__assign(e.__assign({},n),{className:void 0,theme:r}),i=0;i<t.length;i+=1){var a=J(o=t[i])?o(s):o;for(var c in a)s[c]="className"===c?Z(s[c],a[c]):"style"===c?e.__assign(e.__assign({},s[c]),a[c]):a[c]}return n.className&&(s.className=Z(s.className,n.className)),s}(i,r,_(r,d,c)||S),m=y.as||p,v={};for(var g in y)void 0===y[g]||"$"===g[0]||"as"===g||"theme"===g||("forwardedAs"===g?v.as=y.forwardedAs:f&&!f(g,m)||(v[g]=y[g]));var b=function(e,n,r){var o=Te(),s=e.generateAndInjectStyles(n?S:r,o.styleSheet,o.stylis);return"production"!==process.env.NODE_ENV&&t.useDebugValue(s),s}(a,s,y);"production"!==process.env.NODE_ENV&&!s&&n.warnTooManyClasses&&n.warnTooManyClasses(b);var E=Z(l,u);return b&&(E+=" "+b),y.className&&(E+=" "+y.className),v[R(m)&&!w.has(m)?"class":"className"]=E,v.ref=o,t.createElement(m,v)}(I,n,r,C)}A.displayName=h;var I=a.default.forwardRef(A);return I.attrs=m,I.componentStyle=P,I.displayName=h,I.shouldForwardProp=g,I.foldedComponentIds=i?Z(c.foldedComponentIds,c.styledComponentId):"",I.styledComponentId=y,I.target=i?c.target:n,Object.defineProperty(I,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=i?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var r=0,o=t;r<o.length;r++)ee(e,o[r],!0);return e}({},c.defaultProps,e):e}}),"production"!==process.env.NODE_ENV&&(v(h,y),I.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(s,".\n")+"Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={}}}}(h,y)),Object.defineProperty(I,"toString",{value:function(){return".".concat(I.styledComponentId)}}),l&&U(I,n,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0}),I}function He(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n}var Ue=function(e){return Object.assign(e,{isCss:!0})};function Je(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];if(J(t)||Q(t)){var o=t;return Ue(ze(He(g,e.__spreadArray([o],n,!0))))}var s=t;return 0===n.length&&1===s.length&&"string"==typeof s[0]?ze(s):Ue(ze(He(s,n)))}function Xe(t,n,r){if(void 0===r&&(r=S),!n)throw re(1,n);var o=function(o){for(var s=[],i=1;i<arguments.length;i++)s[i-1]=arguments[i];return t(n,r,Je.apply(void 0,e.__spreadArray([o],s,!1)))};return o.attrs=function(o){return Xe(t,n,e.__assign(e.__assign({},r),{attrs:Array.prototype.concat(r.attrs,o).filter(Boolean)}))},o.withConfig=function(o){return Xe(t,n,e.__assign(e.__assign({},r),o))},o}function Ze(e){return Xe(We,e)}var Ke=Ze;w.forEach(function(e){Ke[e]=Ze(e)});var Qe=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=Fe(e),we.registerId(this.componentId+1)}return e.prototype.createStyles=function(e,t,n,r){var o=r(K(ze(this.rules,t,n,r)),""),s=this.componentId+e;n.insertRules(s,s,o)},e.prototype.removeStyles=function(e,t){t.clearRules(this.componentId+e)},e.prototype.renderStyles=function(e,t,n,r){e>2&&we.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r)},e}(),et=function(){function t(){var t=this;this._emitSheetCSS=function(){var e=t.instance.toString(),n=fe(),r=K([n&&'nonce="'.concat(n,'"'),"".concat(p,'="true"'),"".concat("data-styled-version",'="').concat("6.0.0-rc.3",'"')].filter(Boolean)," ");return"<style ".concat(r,">").concat(e,"</style>")},this.getStyleTags=function(){if(t.sealed)throw re(2);return t._emitSheetCSS()},this.getStyleElement=function(){var n;if(t.sealed)throw re(2);var r=((n={})[p]="",n["data-styled-version"]="6.0.0-rc.3",n.dangerouslySetInnerHTML={__html:t.instance.toString()},n),o=fe();return o&&(r.nonce=o),[a.default.createElement("style",e.__assign({},r,{key:"sc-0-0"}))]},this.seal=function(){t.sealed=!0},this.instance=new we({isServer:!0}),this.sealed=!1}return t.prototype.collectStyles=function(e){if(this.sealed)throw re(2);return a.default.createElement(De,{sheet:this.instance},e)},t.prototype.interleaveWithNodeStream=function(e){throw re(3)},t}(),tt={StyleSheet:we,mainSheet:Ce};"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");var nt="__sc-".concat(p,"__");"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window[nt]||(window[nt]=0),1===window[nt]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window[nt]+=1),exports.ServerStyleSheet=et,exports.StyleSheetConsumer=Oe,exports.StyleSheetContext=Ie,exports.StyleSheetManager=De,exports.ThemeConsumer=Ge,exports.ThemeContext=Le,exports.ThemeProvider=function(n){var r=qe(),o=t.useMemo(function(){return function(t,n){if(!t)throw re(14);if(J(t)){var r=t(n);if("production"!==process.env.NODE_ENV&&(null===r||Array.isArray(r)||"object"!=typeof r))throw re(7);return r}if(Array.isArray(t)||"object"!=typeof t)throw re(8);return n?e.__assign(e.__assign({},n),t):t}(n.theme,r)},[n.theme,r]);return n.children?a.default.createElement(Le.Provider,{value:o},n.children):null},exports.__PRIVATE__=tt,exports.createGlobalStyle=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];var o=Je.apply(void 0,e.__spreadArray([t],n,!1)),s="sc-global-".concat(T(JSON.stringify(o))),i=new Qe(o,s);"production"!==process.env.NODE_ENV&&v(s);var c=function(e){var t=Te(),n=qe(),r=a.default.useRef(t.styleSheet.allocateGSInstance(s)).current;return"production"!==process.env.NODE_ENV&&a.default.Children.count(e.children)&&console.warn("The global style component ".concat(s," was given child JSX. createGlobalStyle does not render children.")),"production"!==process.env.NODE_ENV&&o.some(function(e){return"string"==typeof e&&-1!==e.indexOf("@import")})&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),t.styleSheet.server&&l(r,e,t.styleSheet,n,t.stylis),(a.default.useInsertionEffect||a.default.useLayoutEffect)(function(){if(!t.styleSheet.server)return l(r,e,t.styleSheet,n,t.stylis),function(){return i.removeStyles(r,t.styleSheet)}},[r,e,t.styleSheet,n,t.stylis]),null};function l(t,n,r,o,s){if(i.isStatic)i.renderStyles(t,f,r,s);else{var a=e.__assign(e.__assign({},n),{theme:_(n,o,c.defaultProps)});i.renderStyles(t,a,r,s)}}return a.default.memo(c)},exports.css=Je,exports.default=Ke,exports.isStyledComponent=X,exports.keyframes=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");var o=K(Je.apply(void 0,e.__spreadArray([t],n,!1))),s=T(o);return new Re(s,o)},exports.styled=Ke,exports.useTheme=qe,exports.version="6.0.0-rc.3",exports.withTheme=function(t){var n=a.default.forwardRef(function(n,r){var o=_(n,qe(),t.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===o&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'.concat(D(t),'"')),a.default.createElement(t,e.__assign({},n,{theme:o,ref:r}))});return n.displayName="WithTheme(".concat(D(t),")"),U(n,t)};
 //# sourceMappingURL=styled-components.browser.cjs.js.map