braid-design-system 32.1.0 → 32.2.0

package/dist/index.d.ts

@@ -1,3952 +1 @@
-import * as React from 'react';
-import React__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, KeyboardEvent, MouseEvent, FormEvent } from 'react';
-import { FontMetrics } from '@capsizecss/core';
-import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
-import { ConditionalValue, RequiredConditionalValue } from '@vanilla-extract/sprinkles';
-import { ClassValue } from 'clsx';
-import { usePopperTooltip } from 'react-popper-tooltip';
-
-declare const breakpointNames: readonly ["mobile", "tablet", "desktop", "wide"];
-declare const breakpoints: {
-    readonly mobile: 0;
-    readonly tablet: 740;
-    readonly desktop: 992;
-    readonly wide: 1200;
-};
-type Breakpoint = keyof typeof breakpoints;
-
-type TextBreakpoint = Exclude<Breakpoint, 'desktop' | 'wide'>;
-type FontSizeText = {
-    fontSize: number;
-    rows: number;
-};
-type TextDefinition = Record<TextBreakpoint, FontSizeText>;
-type FontWeight = 'regular' | 'medium' | 'strong';
-interface BraidTokens {
-    name: string;
-    displayName: string;
-    typography: {
-        fontFamily: string;
-        webFont: string | null;
-        fontMetrics: Pick<FontMetrics, 'capHeight' | 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm'>;
-        fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
-        heading: {
-            weight: {
-                weak: FontWeight;
-                regular: FontWeight;
-            };
-            level: {
-                '1': TextDefinition;
-                '2': TextDefinition;
-                '3': TextDefinition;
-                '4': TextDefinition;
-            };
-        };
-        text: {
-            xsmall: TextDefinition;
-            small: TextDefinition;
-            standard: TextDefinition;
-            large: TextDefinition;
-        };
-    };
-    contentWidth: {
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-    };
-    grid: number;
-    touchableSize: number;
-    space: {
-        gutter: number;
-        xxsmall: number;
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-        xlarge: number;
-        xxlarge: number;
-    };
-    transforms: {
-        touchable: string;
-    };
-    transitions: {
-        fast: string;
-        touchable: string;
-    };
-    border: {
-        radius: {
-            standard: string;
-            large: string;
-            xlarge: string;
-        };
-        width: {
-            standard: number;
-            large: number;
-        };
-        color: {
-            brandAccent: string;
-            brandAccentLight: string;
-            caution: string;
-            cautionLight: string;
-            critical: string;
-            criticalLight: string;
-            field: string;
-            focus: string;
-            formAccent: string;
-            formAccentLight: string;
-            info: string;
-            infoLight: string;
-            neutral: string;
-            neutralInverted: string;
-            neutralLight: string;
-            positive: string;
-            positiveLight: string;
-            promote: string;
-            promoteLight: string;
-        };
-    };
-    focusRingSize: number;
-    shadows: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-    color: {
-        foreground: {
-            brandAccentLight: string;
-            brandAccent: string;
-            cautionLight: string;
-            caution: string;
-            criticalLight: string;
-            critical: string;
-            formAccentLight: string;
-            formAccent: string;
-            infoLight: string;
-            info: string;
-            linkLight: string;
-            link: string;
-            linkHover: string;
-            linkVisited: string;
-            linkLightVisited: string;
-            neutral: string;
-            neutralInverted: string;
-            positiveLight: string;
-            positive: string;
-            promoteLight: string;
-            promote: string;
-            rating: string;
-            secondary: string;
-            secondaryInverted: string;
-        };
-        background: {
-            body: string;
-            bodyDark: string;
-            brand: string;
-            brandAccent: string;
-            brandAccentActive: string;
-            brandAccentHover: string;
-            brandAccentSoft: string;
-            brandAccentSoftActive: string;
-            brandAccentSoftHover: string;
-            caution: string;
-            cautionLight: string;
-            critical: string;
-            criticalActive: string;
-            criticalHover: string;
-            criticalLight: string;
-            criticalSoft: string;
-            criticalSoftActive: string;
-            criticalSoftHover: string;
-            formAccent: string;
-            formAccentActive: string;
-            formAccentHover: string;
-            formAccentSoft: string;
-            formAccentSoftActive: string;
-            formAccentSoftHover: string;
-            info: string;
-            infoLight: string;
-            neutral: string;
-            neutralActive: string;
-            neutralHover: string;
-            neutralLight: string;
-            neutralSoft: string;
-            neutralSoftActive: string;
-            neutralSoftHover: string;
-            positive: string;
-            positiveLight: string;
-            promote: string;
-            promoteLight: string;
-            surface: string;
-            surfaceDark: string;
-        };
-    };
-}
-
-declare const makeBraidTheme: (tokens: BraidTokens) => {
-    vanillaTheme: string;
-    name: string;
-    displayName: string;
-    background: {
-        lightMode: string;
-        darkMode: string;
-    };
-    webFonts: {
-        linkTag: string;
-    }[];
-    space: {
-        grid: number;
-        space: {
-            gutter: number;
-            xxsmall: number;
-            xsmall: number;
-            small: number;
-            medium: number;
-            large: number;
-            xlarge: number;
-            xxlarge: number;
-        };
-    };
-    color: {
-        foreground: {
-            brandAccentLight: string;
-            brandAccent: string;
-            cautionLight: string;
-            caution: string;
-            criticalLight: string;
-            critical: string;
-            formAccentLight: string;
-            formAccent: string;
-            infoLight: string;
-            info: string;
-            linkLight: string;
-            link: string;
-            linkHover: string;
-            linkVisited: string;
-            linkLightVisited: string;
-            neutral: string;
-            neutralInverted: string;
-            positiveLight: string;
-            positive: string;
-            promoteLight: string;
-            promote: string;
-            rating: string;
-            secondary: string;
-            secondaryInverted: string;
-        };
-        background: {
-            body: string;
-            bodyDark: string;
-            brand: string;
-            brandAccent: string;
-            brandAccentActive: string;
-            brandAccentHover: string;
-            brandAccentSoft: string;
-            brandAccentSoftActive: string;
-            brandAccentSoftHover: string;
-            caution: string;
-            cautionLight: string;
-            critical: string;
-            criticalActive: string;
-            criticalHover: string;
-            criticalLight: string;
-            criticalSoft: string;
-            criticalSoftActive: string;
-            criticalSoftHover: string;
-            formAccent: string;
-            formAccentActive: string;
-            formAccentHover: string;
-            formAccentSoft: string;
-            formAccentSoftActive: string;
-            formAccentSoftHover: string;
-            info: string;
-            infoLight: string;
-            neutral: string;
-            neutralActive: string;
-            neutralHover: string;
-            neutralLight: string;
-            neutralSoft: string;
-            neutralSoftActive: string;
-            neutralSoftHover: string;
-            positive: string;
-            positiveLight: string;
-            promote: string;
-            promoteLight: string;
-            surface: string;
-            surfaceDark: string;
-        };
-    };
-    backgroundLightness: {
-        body: "light" | "dark";
-        bodyDark: "light" | "dark";
-        brand: "light" | "dark";
-        brandAccent: "light" | "dark";
-        brandAccentActive: "light" | "dark";
-        brandAccentHover: "light" | "dark";
-        brandAccentSoft: "light" | "dark";
-        brandAccentSoftActive: "light" | "dark";
-        brandAccentSoftHover: "light" | "dark";
-        caution: "light" | "dark";
-        cautionLight: "light" | "dark";
-        critical: "light" | "dark";
-        criticalActive: "light" | "dark";
-        criticalHover: "light" | "dark";
-        criticalLight: "light" | "dark";
-        criticalSoft: "light" | "dark";
-        criticalSoftActive: "light" | "dark";
-        criticalSoftHover: "light" | "dark";
-        formAccent: "light" | "dark";
-        formAccentActive: "light" | "dark";
-        formAccentHover: "light" | "dark";
-        formAccentSoft: "light" | "dark";
-        formAccentSoftActive: "light" | "dark";
-        formAccentSoftHover: "light" | "dark";
-        info: "light" | "dark";
-        infoLight: "light" | "dark";
-        neutral: "light" | "dark";
-        neutralActive: "light" | "dark";
-        neutralHover: "light" | "dark";
-        neutralLight: "light" | "dark";
-        neutralSoft: "light" | "dark";
-        neutralSoftActive: "light" | "dark";
-        neutralSoftHover: "light" | "dark";
-        positive: "light" | "dark";
-        positiveLight: "light" | "dark";
-        promote: "light" | "dark";
-        promoteLight: "light" | "dark";
-        surface: "light" | "dark";
-        surfaceDark: "light" | "dark";
-    };
-};
-type BraidTheme = ReturnType<typeof makeBraidTheme>;
-
-interface LinkComponentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    href: string;
-}
-declare const makeLinkComponent: (render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>) => {
-    readonly __forwardRef__: React__default.ForwardRefExoticComponent<LinkComponentProps & React__default.RefAttributes<HTMLAnchorElement>>;
-};
-type LinkComponent$1 = ReturnType<typeof makeLinkComponent> | ComponentType<LinkComponentProps>;
-interface BraidProviderProps {
-    theme: BraidTheme;
-    styleBody?: boolean;
-    linkComponent?: LinkComponent$1;
-    children: ReactNode;
-}
-declare const BraidProvider: ({ theme, styleBody, linkComponent, children, }: BraidProviderProps) => JSX.Element;
-
-interface BraidPortalProps {
-    children: ReactNode;
-    container?: Element;
-}
-declare const BraidPortal: ({ children, container }: BraidPortalProps) => React__default.ReactPortal;
-
-interface ThemeNameConsumerProps {
-    children(name: string): ReactElement;
-}
-declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<any, string | React.JSXElementConstructor<any>>;
-
-declare const useThemeName: () => string;
-
-declare const useSpace: () => {
-    grid: number;
-    space: {
-        gutter: number;
-        xxsmall: number;
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-        xlarge: number;
-        xxlarge: number;
-    };
-};
-
-declare const useColor: () => {
-    foreground: {
-        brandAccentLight: string;
-        brandAccent: string;
-        cautionLight: string;
-        caution: string;
-        criticalLight: string;
-        critical: string;
-        formAccentLight: string;
-        formAccent: string;
-        infoLight: string;
-        info: string;
-        linkLight: string;
-        link: string;
-        linkHover: string;
-        linkVisited: string;
-        linkLightVisited: string;
-        neutral: string;
-        neutralInverted: string;
-        positiveLight: string;
-        positive: string;
-        promoteLight: string;
-        promote: string;
-        rating: string;
-        secondary: string;
-        secondaryInverted: string;
-    };
-    background: {
-        body: string;
-        bodyDark: string;
-        brand: string;
-        brandAccent: string;
-        brandAccentActive: string;
-        brandAccentHover: string;
-        brandAccentSoft: string;
-        brandAccentSoftActive: string;
-        brandAccentSoftHover: string;
-        caution: string;
-        cautionLight: string;
-        critical: string;
-        criticalActive: string;
-        criticalHover: string;
-        criticalLight: string;
-        criticalSoft: string;
-        criticalSoftActive: string;
-        criticalSoftHover: string;
-        formAccent: string;
-        formAccentActive: string;
-        formAccentHover: string;
-        formAccentSoft: string;
-        formAccentSoftActive: string;
-        formAccentSoftHover: string;
-        info: string;
-        infoLight: string;
-        neutral: string;
-        neutralActive: string;
-        neutralHover: string;
-        neutralLight: string;
-        neutralSoft: string;
-        neutralSoftActive: string;
-        neutralSoftHover: string;
-        positive: string;
-        positiveLight: string;
-        promote: string;
-        promoteLight: string;
-        surface: string;
-        surfaceDark: string;
-    };
-};
-
-type LegacyBreakpoint = 'mobile' | 'tablet' | 'desktop';
-/** @deprecated Use 'useResponsiveValue' instead: https://seek-oss.github.io/braid-design-system/components/useResponsiveValue */
-declare const useBreakpoint: () => LegacyBreakpoint | null;
-
-declare const colorAtomicProperties: {
-    conditions: {
-        defaultCondition: "lightMode";
-        conditionNames: ("lightMode" | "darkMode")[];
-    };
-    styles: {
-        readonly background: {
-            values: {
-                body: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                bodyDark: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                brand: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                brandAccent: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                brandAccentActive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                brandAccentHover: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                brandAccentSoft: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                brandAccentSoftActive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                brandAccentSoftHover: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                caution: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                cautionLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                critical: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                criticalActive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                criticalHover: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                criticalLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                criticalSoft: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                criticalSoftActive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                criticalSoftHover: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                formAccent: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                formAccentActive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                formAccentHover: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                formAccentSoft: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                formAccentSoftActive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                formAccentSoftHover: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                info: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                infoLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                neutral: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                neutralActive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                neutralHover: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                neutralLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                neutralSoft: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                neutralSoftActive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                neutralSoftHover: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                positive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                positiveLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                promote: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                promoteLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                surface: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                surfaceDark: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-            };
-        };
-        readonly boxShadow: {
-            values: {
-                medium: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                small: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderBrandAccentLarge: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderBrandAccentLightLarge: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderCaution: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderCautionLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderCritical: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderCriticalLarge: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderCriticalLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderCriticalLightLarge: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderField: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderFormAccent: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderFormAccentLarge: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderFormAccentLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderFormAccentLightLarge: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderInfo: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderInfoLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderNeutral: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderNeutralLarge: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderNeutralInverted: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderNeutralInvertedLarge: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderNeutralLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderPositive: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderPositiveLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderPromote: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                borderPromoteLight: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-                outlineFocus: {
-                    defaultClass: string;
-                    conditions: {
-                        lightMode: string;
-                        darkMode: string;
-                    };
-                };
-            };
-        };
-    };
-};
-declare const responsiveAtomicProperties: {
-    conditions: {
-        defaultCondition: "mobile";
-        conditionNames: ("mobile" | "tablet" | "desktop" | "wide")[];
-        responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-            length: 4;
-        };
-    };
-    styles: {
-        readonly display: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                flex: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                block: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                inline: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                inlineBlock: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly position: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                fixed: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                relative: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                absolute: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly borderRadius: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                standard: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                full: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly paddingTop: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                medium: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                gutter: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                small: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly paddingBottom: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                medium: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                gutter: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                small: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly paddingRight: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                medium: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                gutter: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                small: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly paddingLeft: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                medium: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                gutter: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                small: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly marginTop: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                medium: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                gutter: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                small: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly marginBottom: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                medium: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                gutter: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                small: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly marginRight: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                medium: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                gutter: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                small: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly marginLeft: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                medium: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                gutter: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xsmall: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                small: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                large: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                xxlarge: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                none: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly alignItems: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                center: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                flexStart: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                flexEnd: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly justifyContent: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                center: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                flexStart: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                flexEnd: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                spaceBetween: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly flexDirection: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                row: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                column: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                rowReverse: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                columnReverse: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly flexWrap: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                wrap: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                nowrap: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly flexShrink: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                0: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly flexGrow: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                0: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                1: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-        readonly textAlign: {
-            responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
-                length: 4;
-            };
-            values: {
-                center: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                left: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-                right: {
-                    defaultClass: string;
-                    conditions: {
-                        mobile: string;
-                        tablet: string;
-                        desktop: string;
-                        wide: string;
-                    };
-                };
-            };
-        };
-    };
-} & {
-    styles: {
-        padding: {
-            mappings: ("paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop")[];
-        };
-        paddingY: {
-            mappings: ("paddingBottom" | "paddingTop")[];
-        };
-        paddingX: {
-            mappings: ("paddingLeft" | "paddingRight")[];
-        };
-        margin: {
-            mappings: ("marginBottom" | "marginLeft" | "marginRight" | "marginTop")[];
-        };
-        marginY: {
-            mappings: ("marginBottom" | "marginTop")[];
-        };
-        marginX: {
-            mappings: ("marginLeft" | "marginRight")[];
-        };
-    };
-};
-declare const sprinkles: ((props: {
-    readonly overflow?: "hidden" | "scroll" | "visible" | "auto" | undefined;
-    readonly userSelect?: "none" | undefined;
-    readonly outline?: "none" | undefined;
-    readonly opacity?: 0 | undefined;
-    readonly zIndex?: 0 | 1 | 2 | "dropdownBackdrop" | "dropdown" | "sticky" | "modalBackdrop" | "modal" | "notification" | undefined;
-    readonly cursor?: "default" | "pointer" | undefined;
-    readonly pointerEvents?: "none" | undefined;
-    readonly top?: 0 | undefined;
-    readonly bottom?: 0 | undefined;
-    readonly left?: 0 | undefined;
-    readonly right?: 0 | undefined;
-    readonly height?: "touchable" | "full" | undefined;
-    readonly width?: "touchable" | "full" | undefined;
-    readonly minWidth?: 0 | undefined;
-    readonly maxWidth?: "medium" | "xsmall" | "small" | "large" | undefined;
-    readonly transition?: "fast" | "touchable" | undefined;
-    inset?: 0 | undefined;
-} & {
-    readonly display?: (("none" | "flex" | "block" | "inline" | "inlineBlock" | {
-        mobile?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-        tablet?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-        desktop?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-        wide?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "none" | "flex" | "block" | "inline" | "inlineBlock" | null>) | undefined;
-    readonly position?: (("fixed" | "relative" | "absolute" | {
-        mobile?: "fixed" | "relative" | "absolute" | undefined;
-        tablet?: "fixed" | "relative" | "absolute" | undefined;
-        desktop?: "fixed" | "relative" | "absolute" | undefined;
-        wide?: "fixed" | "relative" | "absolute" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "fixed" | "relative" | "absolute" | null>) | undefined;
-    readonly borderRadius?: (("large" | "xlarge" | "standard" | "none" | "full" | {
-        mobile?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-        tablet?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-        desktop?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-        wide?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "large" | "xlarge" | "standard" | "none" | "full" | null>) | undefined;
-    readonly paddingTop?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly paddingBottom?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly paddingRight?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly paddingLeft?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginTop?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginBottom?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginRight?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginLeft?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly alignItems?: (("center" | "flexStart" | "flexEnd" | {
-        mobile?: "center" | "flexStart" | "flexEnd" | undefined;
-        tablet?: "center" | "flexStart" | "flexEnd" | undefined;
-        desktop?: "center" | "flexStart" | "flexEnd" | undefined;
-        wide?: "center" | "flexStart" | "flexEnd" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "center" | "flexStart" | "flexEnd" | null>) | undefined;
-    readonly justifyContent?: (("center" | "flexStart" | "flexEnd" | "spaceBetween" | {
-        mobile?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-        tablet?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-        desktop?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-        wide?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "center" | "flexStart" | "flexEnd" | "spaceBetween" | null>) | undefined;
-    readonly flexDirection?: (("row" | "column" | "rowReverse" | "columnReverse" | {
-        mobile?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-        tablet?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-        desktop?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-        wide?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "row" | "column" | "rowReverse" | "columnReverse" | null>) | undefined;
-    readonly flexWrap?: (("wrap" | "nowrap" | {
-        mobile?: "wrap" | "nowrap" | undefined;
-        tablet?: "wrap" | "nowrap" | undefined;
-        desktop?: "wrap" | "nowrap" | undefined;
-        wide?: "wrap" | "nowrap" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "wrap" | "nowrap" | null>) | undefined;
-    readonly flexShrink?: ((0 | {
-        mobile?: 0 | undefined;
-        tablet?: 0 | undefined;
-        desktop?: 0 | undefined;
-        wide?: 0 | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, 0 | null>) | undefined;
-    readonly flexGrow?: ((0 | 1 | {
-        mobile?: 0 | 1 | undefined;
-        tablet?: 0 | 1 | undefined;
-        desktop?: 0 | 1 | undefined;
-        wide?: 0 | 1 | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, 0 | 1 | null>) | undefined;
-    readonly textAlign?: (("center" | "left" | "right" | {
-        mobile?: "center" | "left" | "right" | undefined;
-        tablet?: "center" | "left" | "right" | undefined;
-        desktop?: "center" | "left" | "right" | undefined;
-        wide?: "center" | "left" | "right" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "center" | "left" | "right" | null>) | undefined;
-    padding?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    paddingY?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    paddingX?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    margin?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    marginY?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    marginX?: (("medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 4 | 3, "medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-} & {
-    readonly transform?: {
-        active?: "touchable" | undefined;
-    } | undefined;
-} & {
-    readonly background?: ("body" | "bodyDark" | "brand" | "brandAccent" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "caution" | "cautionLight" | "critical" | "criticalActive" | "criticalHover" | "criticalLight" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccent" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "info" | "infoLight" | "neutral" | "neutralActive" | "neutralHover" | "neutralLight" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "positive" | "positiveLight" | "promote" | "promoteLight" | "surface" | "surfaceDark" | {
-        lightMode?: "body" | "bodyDark" | "brand" | "brandAccent" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "caution" | "cautionLight" | "critical" | "criticalActive" | "criticalHover" | "criticalLight" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccent" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "info" | "infoLight" | "neutral" | "neutralActive" | "neutralHover" | "neutralLight" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "positive" | "positiveLight" | "promote" | "promoteLight" | "surface" | "surfaceDark" | undefined;
-        darkMode?: "body" | "bodyDark" | "brand" | "brandAccent" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "caution" | "cautionLight" | "critical" | "criticalActive" | "criticalHover" | "criticalLight" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccent" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "info" | "infoLight" | "neutral" | "neutralActive" | "neutralHover" | "neutralLight" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "positive" | "positiveLight" | "promote" | "promoteLight" | "surface" | "surfaceDark" | undefined;
-    }) | undefined;
-    readonly boxShadow?: ("medium" | "small" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | {
-        lightMode?: "medium" | "small" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
-        darkMode?: "medium" | "small" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
-    }) | undefined;
-}) => string) & {
-    properties: Set<"background" | "borderRadius" | "transition" | "transform" | "alignItems" | "bottom" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "inset" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "opacity" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "textAlign" | "top" | "userSelect" | "width" | "zIndex" | "margin" | "outline" | "overflow" | "padding" | "paddingY" | "paddingX" | "marginY" | "marginX">;
-};
-type OptionalResponsiveValue<Value extends string | number> = ConditionalValue<typeof responsiveAtomicProperties, Value>;
-type RequiredResponsiveValue<Value extends string | number> = RequiredConditionalValue<typeof responsiveAtomicProperties, Value>;
-type RequiredResponsiveObject<Value> = Partial<Record<Breakpoint, Value>> & Record<(typeof breakpointNames)[0], Value>;
-type ColorModeValue<Value extends string | number> = ConditionalValue<typeof colorAtomicProperties, Value>;
-
-declare const useResponsiveValue: () => <Value>(value: RequiredResponsiveObject<Value>) => Value | null;
-
-interface ReactNodeArray extends Array<ReactNodeNoStrings> {
-}
-type ReactNodeNoStrings = ReactElement | ReactNodeArray | boolean | null | undefined;
-
-type DataAttributeMap = Record<string, string | number | boolean>;
-
-declare const vars: {
-    readonly space: {
-        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xxsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly touchableSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    readonly grid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    readonly borderRadius: {
-        standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly borderColor: {
-        brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        field: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        focus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly borderWidth: {
-        standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly focusRingSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    readonly contentWidth: {
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly foregroundColor: {
-        brandAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkLightVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        rating: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondaryInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly backgroundColor: {
-        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        bodyDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        surface: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        surfaceDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    readonly fontMetrics: {
-        capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        ascent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        descent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        lineGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        unitsPerEm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly textSize: {
-        xsmall: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        small: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        standard: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        large: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-    };
-    readonly textWeight: {
-        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly headingLevel: {
-        1: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        2: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        3: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        4: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-    };
-    readonly headingWeight: {
-        readonly weak: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        readonly regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly inlineFieldSize: {
-        readonly standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        readonly small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly transition: {
-        fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        touchable: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly transform: {
-        touchable: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly shadow: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-};
-
-type Sprinkles = Parameters<typeof sprinkles>[0];
-type Space = keyof typeof vars.space | 'none';
-type ResponsiveSpace = RequiredResponsiveValue<Space>;
-interface Atoms extends Sprinkles {
-    reset?: keyof JSX.IntrinsicElements;
-}
-
-declare const boxShadow: {
-    borderBrandAccentLarge: string;
-    borderBrandAccentLightLarge: string;
-    borderCaution: string;
-    borderCautionLight: string;
-    borderCritical: string;
-    borderCriticalLarge: string;
-    borderCriticalLight: string;
-    borderCriticalLightLarge: string;
-    borderField: string;
-    borderFormAccent: string;
-    borderFormAccentLarge: string;
-    borderFormAccentLight: string;
-    borderFormAccentLightLarge: string;
-    borderInfo: string;
-    borderInfoLight: string;
-    borderNeutral: string;
-    borderNeutralLarge: string;
-    borderNeutralInverted: string;
-    borderNeutralInvertedLarge: string;
-    borderNeutralLight: string;
-    borderPositive: string;
-    borderPositiveLight: string;
-    borderPromote: string;
-    borderPromoteLight: string;
-    outlineFocus: string;
-    small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-};
-type BoxShadow = keyof typeof boxShadow;
-type Background = keyof typeof vars.backgroundColor;
-
-type BoxBackgroundVariant = Background | 'customDark' | 'customLight';
-interface BoxBaseProps extends Omit<Atoms, 'reset' | 'background'> {
-    className?: ClassValue;
-    background?: ColorModeValue<BoxBackgroundVariant>;
-}
-interface BoxProps extends BoxBaseProps, Omit<AllHTMLAttributes<HTMLElement>, 'width' | 'height' | 'className' | 'data'> {
-    component?: ElementType;
-    data?: DataAttributeMap;
-}
-type SimpleBackground = Exclude<Background, 'bodyDark' | 'surfaceDark'>;
-interface PublicBoxProps extends BoxProps {
-    background?: SimpleBackground | 'customDark' | 'customLight';
-    boxShadow?: BoxShadow;
-}
-declare const PublicBox: React__default.ForwardRefExoticComponent<PublicBoxProps & React__default.RefAttributes<HTMLElement>>;
-
-declare const fontWeight: Record<"regular" | "medium" | "strong", string>;
-declare const textSizeUntrimmed: Record<"xsmall" | "small" | "large" | "standard", string>;
-declare const headingWeight: Record<"regular" | "weak", string>;
-declare const heading: Record<"1" | "2" | "3" | "4", string>;
-declare const tone$1: Record<"brandAccent" | "caution" | "critical" | "formAccent" | "info" | "neutral" | "positive" | "promote" | "link" | "secondary", string>;
-
-interface TextStyleProps {
-    weight?: keyof typeof fontWeight;
-    size?: keyof typeof textSizeUntrimmed;
-    tone?: keyof typeof tone$1;
-    baseline: boolean;
-}
-
-type AllOrNone<T> = T | {
-    [K in keyof T]?: never;
-};
-
-type OptionalTitle = AllOrNone<{
-    title: string;
-    titleId: string;
-}>;
-
-type IconSize = keyof typeof textSizeUntrimmed | 'fill';
-type UseIconProps = {
-    size?: IconSize;
-    tone?: keyof typeof tone$1;
-    alignY?: 'uppercase' | 'lowercase';
-    data?: DataAttributeMap;
-} & OptionalTitle;
-
-interface TypographyProps extends Pick<BoxProps, 'id' | 'component'> {
-    children?: ReactNode;
-    icon?: ReactElement<UseIconProps>;
-    align?: BoxProps['textAlign'];
-    truncate?: boolean;
-    data?: DataAttributeMap;
-}
-
-interface TextProps extends TypographyProps {
-    size?: TextStyleProps['size'];
-    tone?: TextStyleProps['tone'];
-    weight?: TextStyleProps['weight'];
-    baseline?: TextStyleProps['baseline'];
-}
-declare const Text: ({ size: sizeProp, tone: toneProp, weight: weightProp, baseline, ...typographyProps }: TextProps) => JSX.Element;
-
-declare const validTones$1: readonly ["neutral", "secondary"];
-interface AccordionContextValue {
-    size?: TextProps['size'];
-    tone?: (typeof validTones$1)[number];
-    weight?: TextProps['weight'];
-}
-
-declare const validSpaceValues: readonly ["medium", "large", "xlarge"];
-interface AccordionProps {
-    children: ReactNodeNoStrings;
-    dividers?: boolean;
-    size?: AccordionContextValue['size'];
-    tone?: AccordionContextValue['tone'];
-    weight?: AccordionContextValue['weight'];
-    space?: RequiredResponsiveValue<(typeof validSpaceValues)[number]>;
-    data?: DataAttributeMap;
-}
-declare const Accordion: ({ children, size, tone, weight, space: spaceProp, dividers, data, ...restProps }: AccordionProps) => JSX.Element;
-
-declare const validTones: readonly ["promote", "info", "neutral", "positive", "caution", "critical"];
-type Tone$2 = (typeof validTones)[number];
-type BadgeWeight = 'strong' | 'regular';
-interface BadgeProps {
-    tone?: Tone$2;
-    weight?: BadgeWeight;
-    bleedY?: boolean;
-    title?: string;
-    children: string;
-    id?: string;
-    data?: DataAttributeMap;
-    tabIndex?: BoxProps['tabIndex'];
-    'aria-describedby'?: string;
-}
-declare const Badge: React__default.ForwardRefExoticComponent<BadgeProps & React__default.RefAttributes<HTMLSpanElement>>;
-
-type DisclosureStateProps = AllOrNone<{
-    expanded?: boolean;
-    onToggle: (expanded: boolean) => void;
-}>;
-type UseDisclosureProps = {
-    id: string;
-} & DisclosureStateProps;
-
-type AccordionItemBaseProps = {
-    label: string;
-    children: ReactNode;
-    size?: TextProps['size'];
-    tone?: AccordionContextValue['tone'];
-    weight?: AccordionContextValue['weight'];
-    icon?: TextProps['icon'];
-    data?: DataAttributeMap;
-    badge?: ReactElement<BadgeProps>;
-};
-type AccordionItemProps = AccordionItemBaseProps & UseDisclosureProps;
-declare const AccordionItem: ({ id, label, children, badge, size: sizeProp, tone: toneProp, weight: weightProp, icon, data, ...restProps }: AccordionItemProps) => JSX.Element;
-
-interface ResponsiveRangeProps {
-    above?: Exclude<Breakpoint, 'wide'>;
-    below?: Exclude<Breakpoint, 'mobile'>;
-}
-
-type Align = 'left' | 'center' | 'right';
-type AlignY = 'top' | 'center' | 'bottom';
-
-interface CollapsibleAlignmentProps {
-    collapseBelow?: ResponsiveRangeProps['below'];
-    align?: OptionalResponsiveValue<Align>;
-    alignY?: OptionalResponsiveValue<AlignY>;
-    reverse?: boolean;
-}
-
-declare const validInlineComponents: readonly ["div", "span", "ol", "ul"];
-interface InlineProps extends CollapsibleAlignmentProps {
-    space: ResponsiveSpace;
-    component?: (typeof validInlineComponents)[number];
-    data?: DataAttributeMap;
-    children: ReactNodeNoStrings;
-}
-declare const Inline: ({ space, align, alignY, collapseBelow, reverse, component, data, children, ...restProps }: InlineProps) => JSX.Element;
-
-declare const buttonVariants: readonly ["solid", "ghost", "soft", "transparent"];
-type ButtonSize = 'standard' | 'small';
-type ButtonTone = 'brandAccent' | 'critical' | 'neutral';
-type ButtonVariant = (typeof buttonVariants)[number];
-interface ButtonStyleProps {
-    size?: ButtonSize;
-    tone?: ButtonTone;
-    variant?: ButtonVariant;
-    /** @deprecated Use `bleed` prop instead https://seek-oss.github.io/braid-design-system/components/Button#bleed */
-    bleedY?: boolean;
-    bleed?: boolean;
-    loading?: boolean;
-}
-type NativeButtonProps$1 = AllHTMLAttributes<HTMLButtonElement>;
-interface ButtonProps extends ButtonStyleProps {
-    id?: NativeButtonProps$1['id'];
-    onClick?: NativeButtonProps$1['onClick'];
-    type?: 'button' | 'submit' | 'reset';
-    icon?: ReactElement<UseIconProps>;
-    iconPosition?: 'leading' | 'trailing';
-    children?: ReactNode;
-    onKeyUp?: NativeButtonProps$1['onKeyUp'];
-    onKeyDown?: NativeButtonProps$1['onKeyDown'];
-    'aria-haspopup'?: NativeButtonProps$1['aria-haspopup'];
-    'aria-controls'?: NativeButtonProps$1['aria-controls'];
-    'aria-expanded'?: NativeButtonProps$1['aria-expanded'];
-    'aria-describedby'?: NativeButtonProps$1['aria-describedby'];
-    tabIndex?: NativeButtonProps$1['tabIndex'];
-    data?: DataAttributeMap;
-}
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-interface ActionsProps {
-    size?: ButtonProps['size'];
-    children: InlineProps['children'];
-    data?: InlineProps['data'];
-}
-declare const Actions: ({ size, data, children }: ActionsProps) => JSX.Element;
-
-type Tone$1 = 'promote' | 'info' | 'positive' | 'caution' | 'critical';
-type CloseProps = AllOrNone<{
-    onClose: () => void;
-    closeLabel: string;
-}>;
-type AlertProps = {
-    tone?: Tone$1;
-    children: ReactNode;
-    data?: DataAttributeMap;
-    id?: string;
-} & CloseProps;
-declare const Alert: ({ tone, children, id, closeLabel, data, onClose, ...restProps }: AlertProps) => JSX.Element;
-
-interface FieldLabelProps {
-    id?: string;
-    htmlFor: string | false;
-    label?: ReactNode;
-    disabled?: boolean;
-    secondaryLabel?: ReactNode;
-    tertiaryLabel?: ReactNode;
-    description?: ReactNode;
-    descriptionId?: string;
-    data?: DataAttributeMap;
-}
-declare const FieldLabel: ({ id, htmlFor, label, disabled, secondaryLabel, tertiaryLabel, description, descriptionId, data, }: FieldLabelProps) => JSX.Element | null;
-
-declare const tones$1: readonly ["neutral", "critical", "positive"];
-type FieldTone = (typeof tones$1)[number];
-interface FieldMessageProps {
-    id: string;
-    message: ReactNode;
-    reserveMessageSpace?: boolean;
-    tone?: FieldTone;
-    secondaryMessage?: ReactNode;
-    disabled?: boolean;
-    data?: DataAttributeMap;
-}
-declare const FieldMessage: ({ id, tone, message, secondaryMessage, reserveMessageSpace, disabled, data, ...restProps }: FieldMessageProps) => JSX.Element | null;
-
-type FormElementProps$1 = AllHTMLAttributes<HTMLFormElement>;
-type FieldLabelVariant$1 = {
-    'aria-labelledby': string;
-    secondaryLabel?: never;
-    tertiaryLabel?: never;
-} | {
-    'aria-label': string;
-    secondaryLabel?: never;
-    tertiaryLabel?: never;
-} | {
-    label: FieldLabelProps['label'];
-    secondaryLabel?: FieldLabelProps['secondaryLabel'];
-    tertiaryLabel?: FieldLabelProps['tertiaryLabel'];
-};
-type FieldBaseProps = {
-    id: NonNullable<FormElementProps$1['id']>;
-    value?: FormElementProps$1['value'];
-    labelId?: string;
-    name?: FormElementProps$1['name'];
-    disabled?: FormElementProps$1['disabled'];
-    autoComplete?: FormElementProps$1['autoComplete'];
-    description?: FieldLabelProps['description'];
-    message?: FieldMessageProps['message'];
-    secondaryMessage?: FieldMessageProps['secondaryMessage'];
-    reserveMessageSpace?: FieldMessageProps['reserveMessageSpace'];
-    tone?: FieldMessageProps['tone'];
-    'aria-describedby'?: FormElementProps$1['aria-describedby'];
-    data?: DataAttributeMap;
-    autoFocus?: boolean;
-    icon?: ReactNode;
-    prefix?: string;
-    required?: boolean;
-};
-
-interface AutosuggestTranslations {
-    assistiveDescription: string;
-    suggestionInstructions: string;
-    suggestionsAvailableAnnouncement: (suggestionCount: number) => string;
-    noSuggestionsAvailableAnnouncement: string;
-    suggestionAutoSelectedAnnouncement: (suggestion: string) => string;
-}
-
-type SuggestionMatch = Array<{
-    start: number;
-    end: number;
-}>;
-interface AutosuggestValue<Value = any> {
-    text: string;
-    description?: string;
-    value?: Value;
-}
-interface Suggestion<Value = any> extends AutosuggestValue<Value> {
-    label?: string;
-    highlights?: SuggestionMatch;
-    onClear?: (value: AutosuggestValue<Value>) => void;
-    clearLabel?: string;
-}
-interface GroupedSuggestions<Value> {
-    label: string;
-    suggestions: Array<Suggestion<Value>>;
-}
-type Suggestions<Value> = Array<Suggestion<Value> | GroupedSuggestions<Value>>;
-/** @deprecated Use `noSuggestionsMessage` prop instead */
-type LegacyMessageSuggestion = {
-    /** @deprecated Use `noSuggestionsMessage` prop instead */
-    message: string;
-};
-type AutosuggestBaseProps<Value> = Omit<FieldBaseProps, 'value' | 'autoComplete' | 'labelId' | 'prefix'> & {
-    value: AutosuggestValue<Value>;
-    suggestions: Suggestions<Value> | LegacyMessageSuggestion | ((value: AutosuggestValue<Value>) => Suggestions<Value> | LegacyMessageSuggestion);
-    noSuggestionsMessage?: string | {
-        title: string;
-        description: string;
-    };
-    onChange: (value: AutosuggestValue<Value>) => void;
-    clearLabel?: string;
-    automaticSelection?: boolean;
-    hideSuggestionsOnSelection?: boolean;
-    showMobileBackdrop?: boolean;
-    scrollToTopOnMobile?: boolean;
-    onBlur?: () => void;
-    onFocus?: () => void;
-    onClear?: () => void;
-    placeholder?: string;
-    type?: 'text' | 'search';
-    translations?: AutosuggestTranslations;
-};
-type AutosuggestLabelProps = FieldLabelVariant$1;
-type AutosuggestProps<Value> = AutosuggestBaseProps<Value> & AutosuggestLabelProps;
-declare const Autosuggest: <Value>(props: AutosuggestProps<Value> & RefAttributes<HTMLInputElement>) => ReactElement;
-
-type FilterableSuggestion<Value> = Omit<Suggestion<Value>, 'highlights'>;
-type FilterableGroupedSuggestions<Value> = Omit<GroupedSuggestions<Value>, 'suggestions'> & {
-    suggestions: Array<FilterableSuggestion<Value>>;
-};
-type InputValue<Value> = string | AutosuggestValue<Value>;
-type FilterableSuggestions<Value> = Array<FilterableSuggestion<Value> | FilterableGroupedSuggestions<Value>>;
-declare function filterSuggestions<Value>(suggestions: FilterableSuggestions<Value>): (inputValue: InputValue<Value>) => Suggestions<Value>;
-declare function filterSuggestions<Value>(suggestions: FilterableSuggestions<Value>, inputValue: InputValue<Value>): Suggestions<Value>;
-
-declare const validBleedComponents: readonly ["div", "span"];
-interface BleedProps {
-    children: BoxProps['children'];
-    space?: ResponsiveSpace;
-    horizontal?: ResponsiveSpace;
-    vertical?: ResponsiveSpace;
-    top?: ResponsiveSpace;
-    bottom?: ResponsiveSpace;
-    left?: ResponsiveSpace;
-    right?: ResponsiveSpace;
-    component?: (typeof validBleedComponents)[number];
-    data?: DataAttributeMap;
-}
-declare const Bleed: ({ space, horizontal, vertical, top, bottom, left, right, children, component, data, ...restProps }: BleedProps) => JSX.Element;
-
-interface BoxRendererProps extends BoxBaseProps {
-    component?: Atoms['reset'];
-    background?: SimpleBackground | 'customDark' | 'customLight';
-    boxShadow?: BoxShadow;
-    children: (className: string) => ReactElement | null;
-}
-declare const BoxRenderer: ({ children, component, className, background, boxShadow, ...props }: BoxRendererProps) => JSX.Element | null;
-
-declare const buttonIconVariants: Extract<ButtonStyleProps['variant'], 'soft' | 'transparent'>[];
-type NativeButtonProps = AllHTMLAttributes<HTMLButtonElement>;
-type ButtonIconProps = {
-    id: string;
-    icon: ReactElement<UseIconProps>;
-    label: string;
-    size?: 'standard' | 'large';
-    tone?: 'neutral' | 'secondary';
-    type?: 'button' | 'submit' | 'reset';
-    variant?: (typeof buttonIconVariants)[number];
-    onClick?: NativeButtonProps['onClick'];
-    onMouseDown?: NativeButtonProps['onMouseDown'];
-    onKeyUp?: NativeButtonProps['onKeyUp'];
-    onKeyDown?: NativeButtonProps['onKeyDown'];
-    'aria-haspopup'?: NativeButtonProps['aria-haspopup'];
-    'aria-expanded'?: NativeButtonProps['aria-expanded'];
-    tabIndex?: number;
-    data?: DataAttributeMap;
-    bleed?: boolean;
-};
-declare const ButtonIcon: React__default.ForwardRefExoticComponent<ButtonIconProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-interface ButtonLinkProps extends ButtonStyleProps, Omit<LinkComponentProps, 'className' | 'style'> {
-    children?: ReactNode;
-    data?: DataAttributeMap;
-    icon?: ButtonProps['icon'];
-    iconPosition?: 'leading' | 'trailing';
-}
-declare const ButtonLink: React__default.ForwardRefExoticComponent<ButtonLinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
-
-declare const validCardComponents: readonly ["div", "article", "aside", "details", "main", "section"];
-type SimpleCardRounding = {
-    rounded?: boolean;
-    roundedAbove?: never;
-};
-type ResponsiveCardRounding = {
-    rounded?: never;
-    roundedAbove?: ResponsiveRangeProps['above'];
-};
-type CardProps = {
-    children: ReactNode;
-    tone?: 'promote' | 'formAccent';
-    component?: (typeof validCardComponents)[number];
-    data?: DataAttributeMap;
-} & (SimpleCardRounding | ResponsiveCardRounding);
-declare const Card: ({ children, component, tone, data, ...restProps }: CardProps) => JSX.Element;
-
-declare const sizes$1: {
-    readonly standard: "standard";
-    readonly small: "small";
-};
-type Size$1 = keyof typeof sizes$1;
-
-declare const tones: readonly ["neutral", "critical"];
-type InlineFieldTone = (typeof tones)[number];
-type CheckboxChecked = NonNullable<InputElementProps$1['checked']> | 'mixed';
-type InputElementProps$1 = AllHTMLAttributes<HTMLInputElement>;
-type StyledInputProps = {
-    id: NonNullable<InputElementProps$1['id']>;
-    onChange: NonNullable<InputElementProps$1['onChange']>;
-    value?: InputElementProps$1['value'];
-    name?: InputElementProps$1['name'];
-    'aria-describedby'?: InputElementProps$1['aria-describedby'];
-    'aria-labelledby'?: InputElementProps$1['aria-labelledby'];
-    'aria-label'?: InputElementProps$1['aria-label'];
-    disabled?: InputElementProps$1['disabled'];
-    tone?: InlineFieldTone;
-    data?: DataAttributeMap;
-    required?: boolean;
-    size?: Size$1;
-};
-
-type InlineFieldBaseProps = {
-    label: NonNullable<FieldLabelProps['label']>;
-    message?: FieldMessageProps['message'];
-    reserveMessageSpace?: FieldMessageProps['reserveMessageSpace'];
-    children?: ReactNode;
-    description?: ReactNode;
-    badge?: ReactElement<BadgeProps>;
-};
-type InlineFieldProps = Omit<StyledInputProps, 'aria-label' | 'aria-labelledby'> & InlineFieldBaseProps;
-
-interface CheckboxProps extends Omit<InlineFieldProps, 'checked'> {
-    checked: CheckboxChecked | Array<boolean>;
-}
-declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
-
-type LabelStyle = {
-    'aria-labelledby': NonNullable<string>;
-} | {
-    'aria-label': NonNullable<string>;
-};
-type CheckboxStandaloneProps = StyledInputProps & LabelStyle & {
-    checked: CheckboxProps['checked'];
-};
-declare const CheckboxStandalone: React__default.ForwardRefExoticComponent<CheckboxStandaloneProps & React__default.RefAttributes<HTMLInputElement>>;
-
-declare const width$1: Record<"1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5", string>;
-
-interface ColumnProps {
-    children: ReactNode;
-    width?: keyof typeof width$1 | 'content';
-    data?: DataAttributeMap;
-}
-declare const Column: ({ children, data, width, ...restProps }: ColumnProps) => JSX.Element;
-
-declare const validColumnsComponents: readonly ["div", "span"];
-
-interface ColumnsProps extends CollapsibleAlignmentProps {
-    space: ResponsiveSpace;
-    children: Array<ReactElement<ColumnProps> | null> | ReactElement<ColumnProps> | null;
-    component?: (typeof validColumnsComponents)[number];
-    data?: DataAttributeMap;
-}
-declare const Columns: ({ children, collapseBelow, reverse, space, align, alignY, component, data, ...restProps }: ColumnsProps) => JSX.Element;
-
-interface ContentBlockProps {
-    children: ReactNode;
-    width?: BoxProps['maxWidth'];
-    data?: DataAttributeMap;
-}
-declare const ContentBlock: ({ width, data, children, ...restProps }: ContentBlockProps) => JSX.Element;
-
-interface ModalContentProps {
-    id: string;
-    title: string;
-    children: ReactNode;
-    onClose: () => void;
-    closeLabel?: string;
-    width: BoxProps['maxWidth'] | 'content';
-    description?: ReactNodeNoStrings;
-    illustration?: ReactNodeNoStrings;
-    position: 'center' | 'right' | 'left';
-    headingLevel: '2' | '3';
-    scrollLock?: boolean;
-    headingRef?: Ref<HTMLElement>;
-    modalRef?: Ref<HTMLElement>;
-    data?: DataAttributeMap;
-}
-
-interface ModalProps extends Omit<ModalContentProps, 'onClose' | 'scrollLock' | 'headingRef' | 'modalRef'> {
-    open: boolean;
-    onClose: (openState: false) => void;
-}
-
-declare const modalStyle$1: {
-    readonly position: "center";
-    readonly headingLevel: "3";
-};
-interface DialogProps extends Omit<ModalProps, keyof typeof modalStyle$1 | 'width'> {
-    width?: ModalProps['width'];
-}
-declare const Dialog: ({ width, ...restProps }: DialogProps) => JSX.Element;
-
-interface TextLinkStyles {
-    weight?: 'regular' | 'weak';
-    showVisited?: boolean;
-    hitArea?: 'standard' | 'large';
-    iconPosition?: 'leading' | 'trailing';
-}
-interface TextLinkProps extends TextLinkStyles, Omit<LinkComponentProps, 'className' | 'style'> {
-    data?: DataAttributeMap;
-    icon?: ReactElement<UseIconProps>;
-}
-declare const TextLink: React__default.ForwardRefExoticComponent<TextLinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
-
-type NativeSpanProps = AllHTMLAttributes<HTMLSpanElement>;
-interface TextLinkButtonProps extends Omit<TextLinkStyles, 'showVisited'> {
-    id?: NativeSpanProps['id'];
-    onClick?: NativeSpanProps['onClick'];
-    data?: DataAttributeMap;
-    children: ReactNode;
-    'aria-controls'?: NativeSpanProps['aria-controls'];
-    'aria-expanded'?: NativeSpanProps['aria-expanded'];
-    'aria-describedby'?: NativeSpanProps['aria-describedby'];
-    tabIndex?: NativeSpanProps['tabIndex'];
-    icon?: ReactElement<UseIconProps>;
-}
-declare const TextLinkButton: ({ weight, hitArea, id, onClick, data, children, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, tabIndex, icon, iconPosition, ...restProps }: TextLinkButtonProps) => JSX.Element;
-
-type DisclosureBaseProps = {
-    expandLabel: string;
-    collapseLabel?: string;
-    space?: ResponsiveSpace;
-    weight?: TextLinkButtonProps['weight'];
-    data?: DataAttributeMap;
-    children: ReactNode;
-};
-type DisclosureProps = DisclosureBaseProps & UseDisclosureProps;
-
-declare const Disclosure: ({ id, expandLabel, collapseLabel, space, children, data, weight, ...restProps }: DisclosureProps) => JSX.Element;
-
-interface DividerProps {
-    weight?: 'regular' | 'strong';
-}
-declare const Divider: ({ weight }: DividerProps) => JSX.Element;
-
-declare const validWidths: readonly ["small", "medium", "large"];
-declare const validPositions: readonly ["left", "right"];
-declare const modalStyle: {
-    readonly headingLevel: "2";
-    readonly illustration: undefined;
-};
-interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position'> {
-    width?: (typeof validWidths)[number];
-    position?: (typeof validPositions)[number];
-}
-declare const Drawer: ({ width, position, ...restProps }: DrawerProps) => JSX.Element;
-
-type ValidDropdownChildren = AllHTMLAttributes<HTMLOptionElement | HTMLOptGroupElement>;
-type SelectProps = AllHTMLAttributes<HTMLSelectElement>;
-type DropdownBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMessage' | 'prefix'> & {
-    children: ValidDropdownChildren[] | ValidDropdownChildren;
-    value: NonNullable<SelectProps['value']>;
-    onChange: NonNullable<SelectProps['onChange']>;
-    onBlur?: SelectProps['onBlur'];
-    onFocus?: SelectProps['onFocus'];
-    placeholder?: string;
-};
-type DropdownLabelProps = FieldLabelVariant$1;
-type DropdownProps = DropdownBaseProps & DropdownLabelProps;
-declare const Dropdown: React__default.ForwardRefExoticComponent<DropdownProps & React__default.RefAttributes<HTMLSelectElement>>;
-
-interface HeadingProps extends TypographyProps {
-    level: keyof typeof heading;
-    weight?: keyof typeof headingWeight;
-    children: ReactNode;
-}
-declare const Heading: ({ level, weight, component, ...typographyProps }: HeadingProps) => JSX.Element;
-
-interface HiddenProps extends ResponsiveRangeProps {
-    children: ReactNode;
-    component?: BoxProps['component'];
-    screen?: boolean;
-    print?: boolean;
-    inline?: boolean;
-    data?: DataAttributeMap;
-}
-declare const Hidden: ({ children, component, above, below, screen, print, inline: inlineProp, data, ...restProps }: HiddenProps) => JSX.Element;
-
-interface HiddenVisuallyProps {
-    id?: string;
-    children: BoxProps['children'];
-    data?: DataAttributeMap;
-}
-declare const HiddenVisually: ({ id, data, children, ...restProps }: HiddenVisuallyProps) => JSX.Element;
-
-interface IconRendererProps {
-    children: ({ className }: {
-        className: string;
-    }) => ReactElement | null;
-}
-declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-
-type LinkProps = Omit<LinkComponentProps, 'className'> & {
-    className?: ClassValue;
-    data?: DataAttributeMap;
-};
-declare const Link: React__default.ForwardRefExoticComponent<Omit<LinkComponentProps, "className"> & {
-    className?: ClassValue;
-    data?: DataAttributeMap | undefined;
-} & React__default.RefAttributes<HTMLAnchorElement>>;
-
-declare const validStackComponents: readonly ["div", "span", "ol", "ul"];
-interface StackProps {
-    component?: (typeof validStackComponents)[number];
-    children: ReactNodeNoStrings;
-    space: ResponsiveSpace;
-    align?: OptionalResponsiveValue<Align>;
-    dividers?: boolean | DividerProps['weight'];
-    data?: DataAttributeMap;
-}
-declare const Stack: ({ component, children, space, align, dividers, data, ...restProps }: StackProps) => JSX.Element;
-
-type ListTypeCharacter = {
-    type?: 'bullet' | 'number' | 'alpha' | 'roman';
-    icon?: never;
-};
-type ListTypeIcon = {
-    type: 'icon';
-    icon: ReactNode;
-};
-type ListProps = {
-    children: StackProps['children'];
-    size?: TextProps['size'];
-    space?: StackProps['space'];
-    tone?: TextProps['tone'];
-    start?: number;
-    data?: StackProps['data'];
-} & (ListTypeIcon | ListTypeCharacter);
-declare const List: ({ children, size: sizeProp, tone: toneProp, space, type, start, data, ...restProps }: ListProps) => JSX.Element;
-
-declare const size: Record<"xsmall" | "small" | "large" | "standard", string>;
-
-interface LoaderProps {
-    size?: keyof typeof size;
-    'aria-label'?: string;
-    delayVisibility?: boolean;
-    data?: DataAttributeMap;
-}
-declare const Loader: ({ size, "aria-label": ariaLabel, delayVisibility, data, ...restProps }: LoaderProps) => JSX.Element;
-
-declare const width: Record<"medium" | "small" | "large", string>;
-
-interface TriggerProps$1 {
-    'aria-haspopup': boolean;
-    'aria-expanded': boolean;
-    ref: Ref<HTMLButtonElement>;
-    onKeyUp: (event: KeyboardEvent<HTMLButtonElement>) => void;
-    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
-    onClick: (event: MouseEvent) => void;
-}
-interface TriggerState {
-    open: boolean;
-}
-interface CloseReasonExit {
-    reason: 'exit';
-}
-interface CloseReasonSelection {
-    reason: 'selection';
-    index: number;
-    id?: string;
-}
-type CloseReason = CloseReasonSelection | CloseReasonExit;
-interface MenuRendererProps {
-    trigger: (props: TriggerProps$1, state: TriggerState) => ReactNode;
-    align?: 'left' | 'right';
-    offsetSpace?: ResponsiveSpace;
-    width?: keyof typeof width | 'content';
-    placement?: 'top' | 'bottom';
-    onOpen?: () => void;
-    onClose?: (closeReason: CloseReason) => void;
-    data?: DataAttributeMap;
-    reserveIconSpace?: boolean;
-    children: ReactNode;
-}
-declare const MenuRenderer: ({ onOpen, onClose, trigger, width, align, offsetSpace, reserveIconSpace, placement, children, data, ...restProps }: MenuRendererProps) => JSX.Element;
-
-type MenuItemTone = 'critical' | undefined;
-interface UseMenuItemProps {
-    onClick?: () => void;
-    formElement?: boolean;
-    data?: DataAttributeMap;
-    displayName?: string;
-    tone?: MenuItemTone;
-    id?: string;
-}
-interface MenuItemChildrenProps {
-    children: ReactNode;
-    tone: MenuItemTone;
-    badge: ReactElement<BadgeProps> | undefined;
-    icon: ReactNode | undefined;
-    formElement?: boolean;
-}
-
-interface MenuItemProps extends Pick<UseMenuItemProps, 'tone' | 'onClick' | 'data' | 'id'> {
-    children: ReactNode;
-    badge?: MenuItemChildrenProps['badge'];
-    icon?: MenuItemChildrenProps['icon'];
-}
-declare const MenuItem: {
-    ({ children, onClick, data, tone, badge, icon, id, }: MenuItemProps): JSX.Element;
-    __isMenuItem__: boolean;
-};
-
-interface MenuItemCheckboxProps extends Pick<MenuItemProps, 'data' | 'badge' | 'id'> {
-    children: ReactNode;
-    onChange: (checked: boolean) => void;
-    checked: boolean;
-}
-declare const MenuItemCheckbox: {
-    ({ children, onChange, checked, data, badge, id, }: MenuItemCheckboxProps): JSX.Element;
-    __isMenuItem__: boolean;
-};
-
-declare const MenuItemDivider: {
-    (): JSX.Element;
-    __isMenuItem__: boolean;
-};
-
-interface MenuItemLinkProps extends MenuItemProps, Pick<LinkProps, 'href' | 'target' | 'rel'> {
-}
-declare const MenuItemLink: {
-    ({ href, target, rel, onClick, tone, data, children, badge, icon, id, }: MenuItemLinkProps): JSX.Element;
-    __isMenuItem__: boolean;
-};
-
-interface OverflowMenuProps extends Omit<MenuRendererProps, 'trigger' | 'align' | 'offsetSpace'> {
-    label: string;
-    id?: string;
-}
-declare const OverflowMenu: ({ label, children, id, ...menuProps }: OverflowMenuProps) => JSX.Element;
-
-type FormElementProps = AllHTMLAttributes<HTMLFormElement>;
-type FieldLabelVariant = {
-    'aria-labelledby': string;
-    secondaryLabel?: never;
-    tertiaryLabel?: never;
-} | {
-    'aria-label': string;
-    secondaryLabel?: never;
-    tertiaryLabel?: never;
-} | {
-    label: FieldLabelProps['label'];
-    secondaryLabel?: FieldLabelProps['secondaryLabel'];
-    tertiaryLabel?: FieldLabelProps['tertiaryLabel'];
-};
-type FieldGroupBaseProps = {
-    id: NonNullable<FormElementProps['id']>;
-    disabled?: FormElementProps['disabled'];
-    description?: FieldLabelProps['description'];
-    message?: FieldMessageProps['message'];
-    reserveMessageSpace?: FieldMessageProps['reserveMessageSpace'];
-    tone?: FieldMessageProps['tone'];
-    required?: boolean;
-    data?: DataAttributeMap;
-};
-
-interface MonthPickerValue {
-    month?: number;
-    year?: number;
-}
-type MonthNames = [
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string
-];
-type FocusHandler = () => void;
-type ChangeHandler$1 = (value: MonthPickerValue) => void;
-type MonthPickerBaseProps = Omit<FieldGroupBaseProps, 'value' | 'labelId' | 'aria-describedby' | 'name' | 'autoComplete' | 'secondaryMessage' | 'autoFocus' | 'icon' | 'prefix'> & {
-    value: MonthPickerValue;
-    onChange: ChangeHandler$1;
-    onBlur?: FocusHandler;
-    onFocus?: FocusHandler;
-    minYear?: number;
-    maxYear?: number;
-    ascendingYears?: boolean;
-    monthLabel?: string;
-    yearLabel?: string;
-    monthNames?: MonthNames;
-};
-type MonthPickerLabelProps = FieldLabelVariant;
-type MonthPickerProps = MonthPickerBaseProps & MonthPickerLabelProps;
-declare const MonthPicker: {
-    ({ id, value, onChange, onBlur, onFocus, tone, disabled, minYear, maxYear, ascendingYears, monthLabel, yearLabel, monthNames, ...restProps }: MonthPickerProps): JSX.Element;
-    displayName: string;
-};
-
-type Tone = 'promote' | 'info' | 'positive' | 'critical';
-type NoticeProps = {
-    tone?: Tone;
-    data?: DataAttributeMap;
-    children: ReactNode;
-};
-declare const Notice: ({ tone, data, children, ...restProps }: NoticeProps) => JSX.Element;
-
-interface PaginationProps {
-    page: number;
-    total: number;
-    linkProps: ({ page, type, }: {
-        page: number;
-        type: 'next' | 'previous' | 'pageNumber';
-    }) => LinkProps;
-    label: string;
-    pageLabel?: (page: number) => string;
-    nextLabel?: string;
-    previousLabel?: string;
-    pageLimit?: number;
-    data?: DataAttributeMap;
-}
-declare const Pagination: ({ page, total, linkProps, label, pageLabel, nextLabel, previousLabel, pageLimit, data, ...restProps }: PaginationProps) => JSX.Element;
-
-type InputProps$1 = AllHTMLAttributes<HTMLInputElement>;
-type PasswordFieldBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMessage' | 'icon' | 'prefix'> & {
-    value: NonNullable<InputProps$1['value']>;
-    onChange: NonNullable<InputProps$1['onChange']>;
-    onBlur?: InputProps$1['onBlur'];
-    onFocus?: InputProps$1['onFocus'];
-    placeholder?: InputProps$1['placeholder'];
-    onVisibilityToggle?: (visible: boolean) => void;
-    visibilityToggleLabel?: string;
-};
-type PasswordFieldLabelProps = FieldLabelVariant$1;
-type PasswordFieldProps = PasswordFieldBaseProps & PasswordFieldLabelProps;
-declare const PasswordField: React__default.ForwardRefExoticComponent<PasswordFieldProps & React__default.RefAttributes<HTMLInputElement>>;
-
-type InputElementProps = AllHTMLAttributes<HTMLInputElement>;
-interface RadioProps extends Omit<InlineFieldProps, 'message' | 'reserveMessageSpace' | 'required' | 'size'> {
-    checked: NonNullable<InputElementProps['checked']>;
-}
-/** @deprecated Individual `Radio` elements have been deprecated. Use [RadioGroup](https://seek-oss.github.io/braid-design-system/components/RadioGroup) instead. */
-declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
-
-interface RadioItemProps extends Omit<InlineFieldProps, 'name' | 'message' | 'reserveMessageSpace' | 'required' | 'onChange' | 'id' | 'tone' | 'size'> {
-    value: NonNullable<InlineFieldProps['value']>;
-}
-declare const RadioItem: React__default.ForwardRefExoticComponent<RadioItemProps & React__default.RefAttributes<HTMLInputElement>>;
-
-type RadioGroupBaseProps<Value = NonNullable<string | number>> = FieldGroupBaseProps & {
-    children: ReactElement<RadioItemProps>[];
-    value: Value;
-    onChange: (event: FormEvent<HTMLInputElement>) => void;
-    name?: string;
-    size?: InlineFieldProps['size'];
-};
-type RadioGroupLabelProps = FieldLabelVariant;
-type RadioGroupProps<Value = NonNullable<string | number>> = RadioGroupBaseProps<Value> & RadioGroupLabelProps;
-declare const RadioGroup: {
-    ({ children, id, value, name, onChange, disabled, tone, size, ...props }: RadioGroupProps): JSX.Element;
-    displayName: string;
-};
-
-interface RatingProps {
-    rating: number;
-    size?: TextProps['size'];
-    /** @deprecated Use `variant="starsOnly"` instead */
-    showTextRating?: boolean;
-    variant?: 'full' | 'starsOnly' | 'minimal';
-    'aria-label'?: string;
-    data?: TextProps['data'];
-}
-declare const Rating: ({ rating, size, showTextRating, variant: variantProp, "aria-label": ariaLabel, data, }: RatingProps) => JSX.Element;
-
-interface SecondaryProps {
-    children: ReactNode;
-    id?: string;
-    data?: DataAttributeMap;
-}
-declare const Secondary: ({ children, data, id, ...restProps }: SecondaryProps) => JSX.Element;
-
-interface StepProps {
-    children: string;
-    complete?: boolean;
-    id?: string | number;
-}
-declare const Step$1: {
-    ({ complete, id, children }: StepProps): JSX.Element;
-    __isStep__: boolean;
-};
-
-declare const tone: {
-    formAccent: string;
-    neutral: string;
-};
-
-type StepperMode = 'linear' | 'non-linear';
-type StepperTone = Exclude<keyof typeof tone, 'formAccent'>;
-
-type LinearProps = {
-    mode?: 'linear';
-    progress: number;
-    activeStep?: number;
-};
-type NonLinearProps = {
-    mode: 'non-linear';
-    activeStep: number;
-};
-type Step = ReactElement<StepProps, typeof Step$1>;
-type StepperProps = {
-    label: string;
-    children: Array<Step> | Step;
-    mode?: StepperMode;
-    tone?: StepperTone;
-    onStepClick?: (step: {
-        id?: string | number;
-        stepNumber: number;
-    }) => void;
-    data?: DataAttributeMap;
-    id?: string;
-    align?: 'left' | 'center';
-} & (LinearProps | NonLinearProps);
-declare const Stepper: ({ activeStep, label, mode, tone, children, data, align, id, onStepClick, ...restProps }: StepperProps) => JSX.Element;
-
-interface StrongProps {
-    children: ReactNode;
-    id?: string;
-    data?: DataAttributeMap;
-}
-declare const Strong: ({ children, data, id, ...restProps }: StrongProps) => JSX.Element;
-
-interface TabProps {
-    children: ReactNode;
-    item?: string;
-    badge?: ReactElement<BadgeProps>;
-    icon?: TextProps['icon'];
-    data?: DataAttributeMap;
-}
-declare const Tab: {
-    ({ children, data, badge, icon, item, ...restProps }: TabProps): JSX.Element;
-    __isTab__: boolean;
-};
-
-type TabsProviderProps = {
-    children: ReactNode;
-    id: string;
-    selectedItem?: string;
-    onChange?: (selectedIndex: number, selectedItem?: string) => void;
-};
-declare const TabsProvider: ({ children, onChange, id, selectedItem, }: TabsProviderProps) => JSX.Element;
-
-interface TabsProps {
-    children: ReactNodeNoStrings;
-    label: string;
-    align?: 'left' | 'center';
-    gutter?: ResponsiveSpace;
-    reserveHitArea?: boolean;
-    data?: DataAttributeMap;
-    divider?: 'full' | 'minimal' | 'none';
-}
-declare const Tabs: (props: TabsProps) => JSX.Element;
-
-interface TabPanelsProps {
-    renderInactivePanels?: boolean;
-    children: ReactNodeNoStrings;
-}
-declare const TabPanels: ({ renderInactivePanels, children, }: TabPanelsProps) => JSX.Element;
-
-interface TabPanelProps {
-    children: ReactNode;
-    item?: string;
-    data?: DataAttributeMap;
-}
-declare const TabPanel: {
-    ({ children, data, item, ...restProps }: TabPanelProps): JSX.Element;
-    displayName: string;
-    __isTabPanel__: boolean;
-};
-
-type TagProps = {
-    children: string;
-    data?: DataAttributeMap;
-    id?: string;
-    icon?: TextProps['icon'];
-} & AllOrNone<{
-    onClear: () => void;
-    clearLabel: string;
-}>;
-declare const Tag: ({ onClear, clearLabel, data, id, icon, children, ...restProps }: TagProps) => JSX.Element;
-
-type NativeTextareaProps = AllHTMLAttributes<HTMLTextAreaElement>;
-type TextareaBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMessage' | 'icon' | 'prefix'> & {
-    value: NonNullable<NativeTextareaProps['value']>;
-    onChange: NonNullable<NativeTextareaProps['onChange']>;
-    onBlur?: NativeTextareaProps['onBlur'];
-    onFocus?: NativeTextareaProps['onFocus'];
-    onPaste?: NativeTextareaProps['onPaste'];
-    placeholder?: NativeTextareaProps['placeholder'];
-    highlightRanges?: Array<{
-        start: number;
-        end?: number;
-    }>;
-    characterLimit?: number;
-    lines?: number;
-    lineLimit?: number;
-    grow?: boolean;
-};
-type TextareaLabelProps = FieldLabelVariant$1;
-type TextareaProps = TextareaBaseProps & TextareaLabelProps;
-declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
-
-interface TextDropdownOption<Value> {
-    text: string;
-    value: Value;
-}
-type TextDropdownValue<Value> = Value | TextDropdownOption<Value>;
-interface TextDropdownProps<Value> {
-    id: string;
-    value: Value;
-    onChange: (value: Value) => void;
-    onBlur?: () => void;
-    options: TextDropdownValue<Value>[];
-    label: string;
-    data?: DataAttributeMap;
-}
-declare function TextDropdown<Value>({ id, value, onChange, onBlur, options, label, data, ...restProps }: TextDropdownProps<Value>): JSX.Element;
-
-declare const validTypes: {
-    text: string;
-    password: string;
-    email: string;
-    search: string;
-    number: string;
-    tel: string;
-    url: string;
-};
-type InputProps = AllHTMLAttributes<HTMLInputElement>;
-type TextFieldBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMessage'> & {
-    value: NonNullable<InputProps['value']>;
-    type?: keyof typeof validTypes;
-    inputMode?: InputProps['inputMode'];
-    step?: InputProps['step'];
-    onChange: NonNullable<InputProps['onChange']>;
-    onBlur?: InputProps['onBlur'];
-    onFocus?: InputProps['onFocus'];
-    onClear?: () => void;
-    placeholder?: InputProps['placeholder'];
-    characterLimit?: number;
-    clearLabel?: string;
-};
-type TextFieldLabelProps = FieldLabelVariant$1;
-type TextFieldProps = TextFieldBaseProps & TextFieldLabelProps;
-declare const TextField: React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLInputElement>>;
-
-interface TilesProps {
-    children: ReactNodeNoStrings;
-    space: RequiredResponsiveValue<Space>;
-    columns: RequiredResponsiveValue<1 | 2 | 3 | 4 | 5 | 6>;
-    dividers?: boolean | DividerProps['weight'];
-    data?: DataAttributeMap;
-}
-declare const Tiles: ({ children, space, columns, dividers, data, ...restProps }: TilesProps) => JSX.Element;
-
-declare const sizes: {
-    readonly standard: "standard";
-    readonly small: "small";
-};
-type Size = keyof typeof sizes;
-
-type HTMLInputProps = AllHTMLAttributes<HTMLInputElement>;
-type ChangeHandler = (value: boolean) => void;
-interface ToggleProps {
-    id: NonNullable<HTMLInputProps['id']>;
-    label: ReactNode;
-    on: boolean;
-    onChange: ChangeHandler;
-    align?: 'left' | 'right' | 'justify';
-    size?: Size;
-    data?: DataAttributeMap;
-}
-declare const Toggle: React__default.ForwardRefExoticComponent<ToggleProps & React__default.RefAttributes<HTMLInputElement>>;
-
-interface ToastAction {
-    label: string;
-    onClick: () => void;
-}
-type Toast = {
-    key?: string;
-    message: string;
-    description?: string;
-    action?: ToastAction;
-    closeLabel?: string;
-    data?: DataAttributeMap;
-} & ({
-    tone: 'positive' | 'critical';
-} | {
-    tone: 'neutral';
-    icon?: ReactElement<UseIconProps>;
-});
-
-interface ToastProviderProps {
-    children: ReactNode;
-}
-declare const ToastProvider: ({ children }: ToastProviderProps) => JSX.Element;
-declare const useToast: () => (toast: Toast) => void;
-
-interface TriggerProps {
-    ref: ReturnType<typeof usePopperTooltip>['setTooltipRef'];
-    tabIndex: 0;
-    'aria-describedby': string;
-}
-declare const validPlacements: readonly ["top", "bottom"];
-type Placement = (typeof validPlacements)[number];
-interface TooltipRendererProps {
-    id: string;
-    tooltip: ReactNodeNoStrings;
-    placement?: Placement;
-    children: (renderProps: {
-        triggerProps: TriggerProps;
-    }) => ReactNode;
-}
-declare const TooltipRenderer: ({ id, tooltip, placement, children, }: TooltipRendererProps) => JSX.Element;
-
-type IconAddProps = UseIconProps;
-declare const IconAdd: (props: IconAddProps) => JSX.Element;
-
-type IconArrowProps = UseIconProps & {
-    direction?: 'up' | 'down' | 'left' | 'right';
-};
-declare const IconArrow: ({ direction, ...props }: IconArrowProps) => JSX.Element;
-
-type IconBookmarkProps = UseIconProps & {
-    active?: boolean;
-};
-declare const IconBookmark: ({ active, ...props }: IconBookmarkProps) => JSX.Element;
-
-type IconCautionProps = UseIconProps;
-declare const IconCaution: (props: IconCautionProps) => JSX.Element;
-
-type IconChevronProps = UseIconProps & {
-    direction?: 'up' | 'down' | 'left' | 'right';
-};
-declare const IconChevron: ({ direction, ...props }: IconChevronProps) => JSX.Element;
-
-type IconClearProps = UseIconProps;
-declare const IconClear: (props: IconClearProps) => JSX.Element;
-
-type IconCompanyProps = UseIconProps;
-declare const IconCompany: (props: IconCompanyProps) => JSX.Element;
-
-type IconComposeProps = UseIconProps;
-declare const IconCompose: (props: IconComposeProps) => JSX.Element;
-
-type IconCopyProps = UseIconProps;
-declare const IconCopy: (props: IconCopyProps) => JSX.Element;
-
-type IconCreditCardProps = UseIconProps;
-declare const IconCreditCard: (props: IconCreditCardProps) => JSX.Element;
-
-type IconCriticalProps = UseIconProps;
-declare const IconCritical: (props: IconCriticalProps) => JSX.Element;
-
-type IconDateProps = UseIconProps;
-declare const IconDate: (props: IconDateProps) => JSX.Element;
-
-type IconDeleteProps = UseIconProps;
-declare const IconDelete: (props: IconDeleteProps) => JSX.Element;
-
-type IconDesktopProps = UseIconProps;
-declare const IconDesktop: (props: IconDesktopProps) => JSX.Element;
-
-type IconDocumentProps = UseIconProps;
-declare const IconDocument: (props: IconDocumentProps) => JSX.Element;
-
-type IconDocumentBrokenProps = UseIconProps;
-declare const IconDocumentBroken: (props: IconDocumentBrokenProps) => JSX.Element;
-
-type IconDownloadProps = UseIconProps;
-declare const IconDownload: (props: IconDownloadProps) => JSX.Element;
-
-type IconEditProps = UseIconProps;
-declare const IconEdit: (props: IconEditProps) => JSX.Element;
-
-type IconEducationProps = UseIconProps;
-declare const IconEducation: (props: IconEducationProps) => JSX.Element;
-
-type IconFilterProps = UseIconProps;
-declare const IconFilter: (props: IconFilterProps) => JSX.Element;
-
-type IconFlagProps = UseIconProps;
-declare const IconFlag: (props: IconFlagProps) => JSX.Element;
-
-type IconGridProps = UseIconProps;
-declare const IconGrid: (props: IconGridProps) => JSX.Element;
-
-type IconHeartProps = UseIconProps & {
-    active?: boolean;
-};
-declare const IconHeart: ({ active, ...props }: IconHeartProps) => JSX.Element;
-
-type IconHelpProps = UseIconProps;
-declare const IconHelp: (props: IconHelpProps) => JSX.Element;
-
-type IconHistoryProps = UseIconProps;
-declare const IconHistory: (props: IconHistoryProps) => JSX.Element;
-
-type IconHomeProps = UseIconProps;
-declare const IconHome: (props: IconHomeProps) => JSX.Element;
-
-type IconImageProps = UseIconProps;
-declare const IconImage: (props: IconImageProps) => JSX.Element;
-
-type IconInfoProps = UseIconProps;
-declare const IconInfo: (props: IconInfoProps) => JSX.Element;
-
-type IconInvoiceProps = UseIconProps;
-declare const IconInvoice: (props: IconInvoiceProps) => JSX.Element;
-
-type IconLanguageProps = UseIconProps;
-declare const IconLanguage: (props: IconLanguageProps) => JSX.Element;
-
-type IconLinkProps = UseIconProps;
-declare const IconLink: (props: IconLinkProps) => JSX.Element;
-
-type IconLinkBrokenProps = UseIconProps;
-declare const IconLinkBroken: (props: IconLinkBrokenProps) => JSX.Element;
-
-type IconListProps = UseIconProps;
-declare const IconList: (props: IconListProps) => JSX.Element;
-
-type IconLocationProps = UseIconProps;
-declare const IconLocation: (props: IconLocationProps) => JSX.Element;
-
-type IconMailProps = UseIconProps;
-declare const IconMail: (props: IconMailProps) => JSX.Element;
-
-type IconMinusProps = UseIconProps;
-declare const IconMinus: (props: IconMinusProps) => JSX.Element;
-
-type IconMobileProps = UseIconProps;
-declare const IconMobile: (props: IconMobileProps) => JSX.Element;
-
-type IconMoneyProps = UseIconProps;
-declare const IconMoney: (props: IconMoneyProps) => JSX.Element;
-
-type IconNewWindowProps = UseIconProps;
-declare const IconNewWindow: (props: IconNewWindowProps) => JSX.Element;
-
-type IconNoteProps = UseIconProps;
-declare const IconNote: (props: IconNoteProps) => JSX.Element;
-
-type IconNotificationProps = UseIconProps;
-declare const IconNotification: (props: IconNotificationProps) => JSX.Element;
-
-type IconOverflowProps = UseIconProps;
-declare const IconOverflow: (props: IconOverflowProps) => JSX.Element;
-
-type IconPeopleProps = UseIconProps;
-declare const IconPeople: (props: IconPeopleProps) => JSX.Element;
-
-type IconPersonAddProps = UseIconProps;
-declare const IconPersonAdd: (props: IconPersonAddProps) => JSX.Element;
-
-type IconPersonVerifiedProps = UseIconProps;
-declare const IconPersonVerified: (props: IconPersonVerifiedProps) => JSX.Element;
-
-type IconPhoneProps = UseIconProps;
-declare const IconPhone: (props: IconPhoneProps) => JSX.Element;
-
-type IconPlatformAndroidProps = UseIconProps;
-declare const IconPlatformAndroid: (props: IconPlatformAndroidProps) => JSX.Element;
-
-type IconPlatformAppleProps = UseIconProps;
-declare const IconPlatformApple: (props: IconPlatformAppleProps) => JSX.Element;
-
-type IconPositiveProps = UseIconProps;
-declare const IconPositive: (props: IconPositiveProps) => JSX.Element;
-
-type IconPrintProps = UseIconProps;
-declare const IconPrint: (props: IconPrintProps) => JSX.Element;
-
-type IconProfileProps = UseIconProps;
-declare const IconProfile: (props: IconProfileProps) => JSX.Element;
-
-type IconPromoteProps = UseIconProps;
-declare const IconPromote: (props: IconPromoteProps) => JSX.Element;
-
-type IconRecommendedProps = UseIconProps;
-declare const IconRecommended: (props: IconRecommendedProps) => JSX.Element;
-
-type IconRefreshProps = UseIconProps;
-declare const IconRefresh: (props: IconRefreshProps) => JSX.Element;
-
-type IconResumeProps = UseIconProps;
-declare const IconResume: (props: IconResumeProps) => JSX.Element;
-
-type IconSearchProps = UseIconProps;
-declare const IconSearch: (props: IconSearchProps) => JSX.Element;
-
-type IconSecurityProps = UseIconProps;
-declare const IconSecurity: (props: IconSecurityProps) => JSX.Element;
-
-type IconSendProps = UseIconProps;
-declare const IconSend: (props: IconSendProps) => JSX.Element;
-
-type IconSentProps = UseIconProps;
-declare const IconSent: (props: IconSentProps) => JSX.Element;
-
-type IconSettingsProps = UseIconProps;
-declare const IconSettings: (props: IconSettingsProps) => JSX.Element;
-
-type IconShareProps = UseIconProps;
-declare const IconShare: (props: IconShareProps) => JSX.Element;
-
-type IconSocialFacebookProps = UseIconProps;
-declare const IconSocialFacebook: (props: IconSocialFacebookProps) => JSX.Element;
-
-type IconSocialGitHubProps = UseIconProps;
-declare const IconSocialGitHub: (props: IconSocialGitHubProps) => JSX.Element;
-
-type IconSocialInstagramProps = UseIconProps;
-declare const IconSocialInstagram: (props: IconSocialInstagramProps) => JSX.Element;
-
-type IconSocialLinkedInProps = UseIconProps;
-declare const IconSocialLinkedIn: (props: IconSocialLinkedInProps) => JSX.Element;
-
-type IconSocialMediumProps = UseIconProps;
-declare const IconSocialMedium: (props: IconSocialMediumProps) => JSX.Element;
-
-type IconSocialTwitterProps = UseIconProps;
-declare const IconSocialTwitter: (props: IconSocialTwitterProps) => JSX.Element;
-
-type IconSocialYouTubeProps = UseIconProps;
-declare const IconSocialYouTube: (props: IconSocialYouTubeProps) => JSX.Element;
-
-type IconStarProps = UseIconProps & {
-    active?: boolean;
-};
-declare const IconStar: ({ active, ...props }: IconStarProps) => JSX.Element;
-
-type IconStatisticsProps = UseIconProps;
-declare const IconStatistics: (props: IconStatisticsProps) => JSX.Element;
-
-type IconSubCategoryProps = UseIconProps;
-declare const IconSubCategory: (props: IconSubCategoryProps) => JSX.Element;
-
-type IconTagProps = UseIconProps;
-declare const IconTag: (props: IconTagProps) => JSX.Element;
-
-type IconThumbProps = UseIconProps & {
-    direction?: 'up' | 'down';
-};
-declare const IconThumb: ({ direction, ...props }: IconThumbProps) => JSX.Element;
-
-type IconTickProps = UseIconProps;
-declare const IconTick: (props: IconTickProps) => JSX.Element;
-
-type IconTimeProps = UseIconProps;
-declare const IconTime: (props: IconTimeProps) => JSX.Element;
-
-type IconTipProps = UseIconProps;
-declare const IconTip: (props: IconTipProps) => JSX.Element;
-
-type IconUploadProps = UseIconProps;
-declare const IconUpload: (props: IconUploadProps) => JSX.Element;
-
-type IconVideoProps = UseIconProps;
-declare const IconVideo: (props: IconVideoProps) => JSX.Element;
-
-type IconVisibilityProps = UseIconProps & {
-    hidden?: boolean;
-};
-declare const IconVisibility: ({ hidden, ...props }: IconVisibilityProps) => JSX.Element;
-
-type IconWorkExperienceProps = UseIconProps;
-declare const IconWorkExperience: (props: IconWorkExperienceProps) => JSX.Element;
-
-type IconZoomInProps = UseIconProps;
-declare const IconZoomIn: (props: IconZoomInProps) => JSX.Element;
-
-type IconZoomOutProps = UseIconProps;
-declare const IconZoomOut: (props: IconZoomOutProps) => JSX.Element;
-
-type LinkComponent = LinkComponent$1;
-
-export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, Bleed, PublicBox as Box, BoxRenderer, BraidPortal, BraidProvider, Button, ButtonIcon, ButtonLink, Card, Checkbox, CheckboxStandalone, Column, Columns, ContentBlock, Dialog, Disclosure, Divider, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, Hidden, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconFilter, IconFlag, IconGrid, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, IconRenderer, IconResume, IconSearch, IconSecurity, IconSend, IconSent, IconSettings, IconShare, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTwitter, IconSocialYouTube, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Stack, Step$1 as Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast };
+export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, Bleed, PublicBox as Box, BoxRenderer, BraidPortal, BraidProvider, Button, ButtonIcon, ButtonLink, Card, Checkbox, CheckboxStandalone, Column, Columns, ContentBlock, Dialog, Disclosure, Divider, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, Hidden, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconFilter, IconFlag, IconGrid, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, IconRenderer, IconResume, IconSearch, IconSecurity, IconSend, IconSent, IconSettings, IconShare, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTwitter, IconSocialYouTube, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from './reset.js';