@qasa/qds-ui 0.26.0 → 0.27.0

package/dist/index.d.mts

@@ -1,2245 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _emotion_react from '@emotion/react';
-import { EmotionCache, CSSObject } from '@emotion/react';
-import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, ReactElement, useLayoutEffect } from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
-import * as _emotion_styled from '@emotion/styled';
-import { LucideIcon } from 'lucide-react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import * as RadixSwitch from '@radix-ui/react-switch';
-import * as ToastPrimitive from '@radix-ui/react-toast';
-
-declare const theme: {
-    mediaQueries: {
-        readonly smUp: "@media(min-width: 480px)";
-        readonly mdUp: "@media(min-width: 768px)";
-        readonly lgUp: "@media(min-width: 1024px)";
-        readonly xlUp: "@media(min-width: 1280px)";
-        readonly '2xlUp': "@media(min-width: 1536px)";
-    };
-    spacing: {
-        '0x': string;
-        '1x': string;
-        '2x': string;
-        '3x': string;
-        '4x': string;
-        '5x': string;
-        '6x': string;
-        '8x': string;
-        '10x': string;
-        '12x': string;
-        '14x': string;
-        '16x': string;
-        '20x': string;
-        '24x': string;
-    };
-    breakpoints: {
-        readonly base: 0;
-        readonly sm: 480;
-        readonly md: 768;
-        readonly lg: 1024;
-        readonly xl: 1280;
-        readonly '2xl': 1536;
-    };
-    zIndices: {
-        hide: number;
-        auto: string;
-        base: number;
-        docked: number;
-        dropdown: number;
-        sticky: number;
-        banner: number;
-        overlay: number;
-        modal: number;
-        popover: number;
-        skipLink: number;
-        toast: number;
-        tooltip: number;
-    };
-    colors: {
-        core: {
-            black: string;
-            white: string;
-            gray90: string;
-            gray80: string;
-            gray70: string;
-            gray60: string;
-            gray50: string;
-            gray40: string;
-            gray30: string;
-            gray20: string;
-            gray10: string;
-            pink: string;
-            uiPink: string;
-            uiPinkDark: string;
-            uiPinkLight: string;
-            brown: string;
-            brownDark: string;
-            brownLight: string;
-            offWhite: string;
-            offWhiteDark: string;
-            offWhiteLight: string;
-            softPink: string;
-            warmYellow: string;
-            softYellow: string;
-            red90: string;
-            red80: string;
-            red70: string;
-            red60: string;
-            red50: string;
-            red40: string;
-            red30: string;
-            red20: string;
-            red10: string;
-            green90: string;
-            green80: string;
-            green70: string;
-            green60: string;
-            green50: string;
-            green40: string;
-            green30: string;
-            green20: string;
-            green10: string;
-            blue90: string;
-            blue80: string;
-            blue70: string;
-            blue60: string;
-            blue50: string;
-            blue40: string;
-            blue30: string;
-            blue20: string;
-            blue10: string;
-            yellow90: string;
-            yellow80: string;
-            yellow70: string;
-            yellow60: string;
-            yellow50: string;
-            yellow40: string;
-            yellow30: string;
-            yellow20: string;
-            yellow10: string;
-            blackAlpha5: string;
-            blackAlpha10: string;
-            blackAlpha20: string;
-        };
-        bg: {
-            default: string;
-            brandPrimary: string;
-            brandPrimaryHover: string;
-            brandPrimaryActive: string;
-            brandSecondary: string;
-            brandSecondaryHover: string;
-            brandSecondaryActive: string;
-            brandTertiary: string;
-            brandTertiaryHover: string;
-            brandTertiaryActive: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            inset: string;
-            backdrop: string;
-        };
-        text: {
-            strong: string;
-            default: string;
-            subtle: string;
-            disabled: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            onBrandPrimary: string;
-            onBrandSecondary: string;
-            onBrandTertiary: string;
-        };
-        icon: {
-            default: string;
-            strong: string;
-            subtle: string;
-            disabled: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            onBrandPrimary: string;
-            onBrandSecondary: string;
-            onBrandTertiary: string;
-        };
-        border: {
-            default: string;
-            defaultHover: string;
-            defaultSelected: string;
-            strong: string;
-            subtle: string;
-            negative: string;
-            warning: string;
-            positive: string;
-        };
-    };
-    sizes: {
-        112: string;
-        128: string;
-        144: string;
-        160: string;
-        176: string;
-        192: string;
-        224: string;
-        256: string;
-        288: string;
-        320: string;
-        384: string;
-        448: string;
-        512: string;
-        576: string;
-        672: string;
-        768: string;
-        896: string;
-        1024: string;
-        '0x': string;
-        '1x': string;
-        '2x': string;
-        '3x': string;
-        '4x': string;
-        '5x': string;
-        '6x': string;
-        '8x': string;
-        '10x': string;
-        '12x': string;
-        '14x': string;
-        '16x': string;
-        '20x': string;
-        '24x': string;
-    };
-    radii: {
-        none: string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        full: string;
-    };
-    shadows: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    typography: {
-        display: {
-            '3xl': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            '2xl': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            xl: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            lg: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            xs: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            '2xs': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-        };
-        title: {
-            lg: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            xs: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            '2xs': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            '3xs': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        body: {
-            xl: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            lg: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            xs: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        label: {
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        button: {
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        caption: {
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-    };
-};
-type Theme = typeof theme;
-
-type LegitimateAny = any;
-type PartialRecord<K extends string | number | symbol, T> = Partial<Record<K, T>>;
-type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
-type HTMLQdsProps<T extends ElementType> = ComponentPropsWithoutRef<T>;
-
-type DeepPartial<T> = {
-    [P in keyof T]?: DeepPartial<T[P]>;
-};
-interface TypographyOverride {
-    fontFamily?: string;
-    fontWeight?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-}
-type TypographyOverrides = PartialRecord<keyof Theme['typography'], TypographyOverride>;
-interface ThemeOverrides {
-    colors?: DeepPartial<Theme['colors']>;
-    typography?: TypographyOverrides;
-}
-declare const overrideTheme: (overrides: ThemeOverrides) => {
-    typography: {
-        display: {
-            '3xl': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            '2xl': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            xl: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            lg: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            xs: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-            '2xs': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                fontFeatureSettings: string;
-            };
-        };
-        title: {
-            lg: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            xs: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            '2xs': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            '3xs': {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        body: {
-            xl: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            lg: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            xs: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        label: {
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        button: {
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-        caption: {
-            md: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-            sm: {
-                fontFamily: string;
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-            };
-        };
-    };
-    colors: {
-        core: {
-            black: string;
-            white: string;
-            gray90: string;
-            gray80: string;
-            gray70: string;
-            gray60: string;
-            gray50: string;
-            gray40: string;
-            gray30: string;
-            gray20: string;
-            gray10: string;
-            pink: string;
-            uiPink: string;
-            uiPinkDark: string;
-            uiPinkLight: string;
-            brown: string;
-            brownDark: string;
-            brownLight: string;
-            offWhite: string;
-            offWhiteDark: string;
-            offWhiteLight: string;
-            softPink: string;
-            warmYellow: string;
-            softYellow: string;
-            red90: string;
-            red80: string;
-            red70: string;
-            red60: string;
-            red50: string;
-            red40: string;
-            red30: string;
-            red20: string;
-            red10: string;
-            green90: string;
-            green80: string;
-            green70: string;
-            green60: string;
-            green50: string;
-            green40: string;
-            green30: string;
-            green20: string;
-            green10: string;
-            blue90: string;
-            blue80: string;
-            blue70: string;
-            blue60: string;
-            blue50: string;
-            blue40: string;
-            blue30: string;
-            blue20: string;
-            blue10: string;
-            yellow90: string;
-            yellow80: string;
-            yellow70: string;
-            yellow60: string;
-            yellow50: string;
-            yellow40: string;
-            yellow30: string;
-            yellow20: string;
-            yellow10: string;
-            blackAlpha5: string;
-            blackAlpha10: string;
-            blackAlpha20: string;
-        };
-        bg: {
-            default: string;
-            brandPrimary: string;
-            brandPrimaryHover: string;
-            brandPrimaryActive: string;
-            brandSecondary: string;
-            brandSecondaryHover: string;
-            brandSecondaryActive: string;
-            brandTertiary: string;
-            brandTertiaryHover: string;
-            brandTertiaryActive: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            inset: string;
-            backdrop: string;
-        };
-        text: {
-            strong: string;
-            default: string;
-            subtle: string;
-            disabled: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            onBrandPrimary: string;
-            onBrandSecondary: string;
-            onBrandTertiary: string;
-        };
-        icon: {
-            default: string;
-            strong: string;
-            subtle: string;
-            disabled: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            onBrandPrimary: string;
-            onBrandSecondary: string;
-            onBrandTertiary: string;
-        };
-        border: {
-            default: string;
-            defaultHover: string;
-            defaultSelected: string;
-            strong: string;
-            subtle: string;
-            negative: string;
-            warning: string;
-            positive: string;
-        };
-    };
-    mediaQueries: {
-        readonly smUp: "@media(min-width: 480px)";
-        readonly mdUp: "@media(min-width: 768px)";
-        readonly lgUp: "@media(min-width: 1024px)";
-        readonly xlUp: "@media(min-width: 1280px)";
-        readonly '2xlUp': "@media(min-width: 1536px)";
-    };
-    spacing: {
-        '0x': string;
-        '1x': string;
-        '2x': string;
-        '3x': string;
-        '4x': string;
-        '5x': string;
-        '6x': string;
-        '8x': string;
-        '10x': string;
-        '12x': string;
-        '14x': string;
-        '16x': string;
-        '20x': string;
-        '24x': string;
-    };
-    breakpoints: {
-        readonly base: 0;
-        readonly sm: 480;
-        readonly md: 768;
-        readonly lg: 1024;
-        readonly xl: 1280;
-        readonly '2xl': 1536;
-    };
-    zIndices: {
-        hide: number;
-        auto: string;
-        base: number;
-        docked: number;
-        dropdown: number;
-        sticky: number;
-        banner: number;
-        overlay: number;
-        modal: number;
-        popover: number;
-        skipLink: number;
-        toast: number;
-        tooltip: number;
-    };
-    sizes: {
-        112: string;
-        128: string;
-        144: string;
-        160: string;
-        176: string;
-        192: string;
-        224: string;
-        256: string;
-        288: string;
-        320: string;
-        384: string;
-        448: string;
-        512: string;
-        576: string;
-        672: string;
-        768: string;
-        896: string;
-        1024: string;
-        '0x': string;
-        '1x': string;
-        '2x': string;
-        '3x': string;
-        '4x': string;
-        '5x': string;
-        '6x': string;
-        '8x': string;
-        '10x': string;
-        '12x': string;
-        '14x': string;
-        '16x': string;
-        '20x': string;
-        '24x': string;
-    };
-    radii: {
-        none: string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        full: string;
-    };
-    shadows: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-};
-
-declare const SUPPORTED_LANGUAGE_CODES: readonly ["en", "sv", "fi", "fr", "nb"];
-type LanguageCode = (typeof SUPPORTED_LANGUAGE_CODES)[number];
-
-interface QdsProviderProps {
-    children: ReactNode;
-    themeOverrides?: ThemeOverrides;
-    emotionCache?: EmotionCache;
-    locale: LanguageCode;
-}
-declare function QdsProvider({ children, themeOverrides, emotionCache, locale }: QdsProviderProps): react_jsx_runtime.JSX.Element;
-
-type BreakpointsConfig$1<T> = PartialRecord<keyof Theme['breakpoints'], T> & {
-    base: T;
-};
-type ResponsiveProp<T> = T | BreakpointsConfig$1<T>;
-
-declare const SIZE_MAP: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    '2xl': number;
-};
-type AvatarSize = keyof typeof SIZE_MAP;
-interface AvatarOptions {
-    /**
-     * Source url of the image to display. If not passed
-     * it will display a fallback icon.
-     */
-    src?: string;
-    /**
-     * Name of the user. Used to generate the initials
-     * if no image is provided, but also for accessibility.
-     */
-    name?: string;
-    /**
-     * Size of the avatar
-     * @default 'md'
-     */
-    size?: ResponsiveProp<AvatarSize>;
-}
-interface AvatarProps extends HTMLQdsProps<'span'>, AvatarOptions {
-}
-declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
-
-/**
- * This file is originally from `@radix-ui/react-polymorphic` before the package
- * was deprecated. The original source for this lived in the URL below.
- *
- * @see https://github.com/radix-ui/primitives/blob/17ffcb7aaa42cbd36b3c210ba86d7d73d218e5be/packages/react/polymorphic/src/polymorphic.ts
- */
-
-/**
- * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
- */
-type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
-/**
- * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
- */
-type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
-type ForwardRefExoticComponent<E, OwnProps> = react.ForwardRefExoticComponent<Merge<E extends react.ElementType ? react.ComponentPropsWithRef<E> : never, OwnProps & {
-    as?: E;
-}>>;
-interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
-    /**
-     * When `as` prop is passed, use this overload.
-     * Merges original own props (without DOM props) and the inferred props
-     * from `as` element with the own props taking precendence.
-     *
-     * We explicitly avoid `React.ElementType` and manually narrow the prop types
-     * so that events are typed when using JSX.IntrinsicElements.
-     */
-    <As = IntrinsicElementString>(props: As extends '' ? {
-        as: keyof react.JSX.IntrinsicElements;
-    } : As extends react.ComponentType<infer P> ? Merge<P, OwnProps & {
-        as: As;
-    }> : As extends keyof react.JSX.IntrinsicElements ? Merge<react.JSX.IntrinsicElements[As], OwnProps & {
-        as: As;
-    }> : never): react.ReactElement | null;
-}
-/**
- * Infers the props of a React component
- */
-type PropsOf<E> = E extends react.ComponentType<infer P> ? P : never;
-
-type IconSize = 16 | 20 | 24 | 32;
-type IconColor = keyof Theme['colors']['icon'] | 'currentColor';
-interface IconOptions {
-    /**
-     * The size of the icon.
-     *
-     * @default 24
-     */
-    size?: IconSize;
-    /**
-     * The color of the icon.
-     *
-     * @default 'default'
-     */
-    color?: IconColor;
-}
-type OmittedProps$9 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
-interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$9>, IconOptions {
-}
-
-interface CreateIconOptions {
-    /**
-     * The `svg`'s `viewBox` attribute
-     */
-    viewBox: string;
-    /**
-     * If the `svg` has a single path, simply copy the path's `d` attribute
-     */
-    d?: string;
-    /**
-     * The `svg` path or group element
-     *
-     * @example
-     * ```jsx
-     *  createIcon({
-     *    viewBox: '0 0 512 512',
-     *    path: [
-     *      <circle cx="50" cy="50" r="50" />,
-     *      <path d="M10 10" />,
-     *    ],
-     *    displayName: 'ExampleIcon',
-     * })
-     * ```
-     */
-    path?: React.ReactElement | React.ReactElement[];
-    /**
-     * The display name of the icon. Useful for debugging
-     * and internal use.
-     */
-    displayName?: string;
-}
-/**
- * Helper function to create an icon component.
- */
-declare const createIcon: (options: CreateIconOptions) => react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-
-declare const createLucideIcon: (Icon: LucideIcon) => react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-
-declare const AlertCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const AlertTriangleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ArrowDownIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ArrowLeftIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ArrowRightIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ArrowUpIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const BellIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const BellOffIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const BookmarkIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const CalendarIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const CameraIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const CheckCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const CheckIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ChevronDownIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ChevronLeftIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ChevronRightIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ChevronUpIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const GlobeIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HeartFilledIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HeartIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HelpCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HistoryIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HomeIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ImageIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const InfoIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ListIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ListFilterIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const LogOutIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MapIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MapPinIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MenuIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MessageCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MinusIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MoreHorizontalIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MoreVerticalIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const PenIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const PlusIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const SearchIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const SettingsIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ShareIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const SlidersIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const StarFilledIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const StarIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const TrashIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const UserIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const XCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const XIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-
-type NamedStyles = Record<string, CSSObject>;
-type StyleInterpolation<T> = (theme: Theme) => T;
-/**
- * Creates a collection of named style rules.
- */
-declare function createStyleVariants<T extends NamedStyles>(styles: StyleInterpolation<T>): (theme: Theme) => T;
-/**
- * Create a style object. Useful for creating styles that depend on the theme.
- */
-declare function createStyle<T extends CSSObject>(styles: StyleInterpolation<T>): (theme: Theme) => T;
-type VariantProps<T extends ReturnType<typeof createStyle | typeof createStyleVariants>> = keyof ReturnType<T>;
-/**
- * Converts css `px` unit to `rem`.
- * Assumes the root font size is 16px.
- */
-declare const pxToRem: (px: number) => string;
-
-declare const getFormFieldBaseStyles: (theme: Theme) => {
-    '&::placeholder': {
-        color: string;
-    };
-    '&:hover': {
-        borderColor: string;
-    };
-    '&:focus': {
-        outline: number;
-        borderColor: string;
-        boxShadow: `0 0 0 1px ${string}`;
-    };
-    '&[aria-invalid="true"]': {
-        borderColor: string;
-        '&:focus': {
-            boxShadow: `0 0 0 1px ${string}`;
-        };
-    };
-    '&[disabled], &:disabled, &[data-disabled]': {
-        opacity: number;
-        borderColor: string;
-    };
-    transitionProperty: "opacity, border-color, box-shadow";
-    transitionDuration: "120ms";
-    transitionTimingFunction: "ease";
-    fontFamily: string;
-    fontWeight: string;
-    fontSize: string;
-    lineHeight: string;
-    letterSpacing: string;
-    width: string;
-    minWidth: number;
-    appearance: "none";
-    paddingLeft: string;
-    paddingRight: string;
-    border: string;
-    borderRadius: string;
-    backgroundColor: string;
-    color: string;
-    WebkitTouchCallout: "none";
-    WebkitTapHighlightColor: "transparent";
-    '&::-webkit-date-and-time-value': {
-        textAlign: "left";
-    };
-    alignItems: "center";
-};
-
-declare const getSizeStyles$4: (theme: Theme) => {
-    xs: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-    sm: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-    md: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-    lg: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-    xl: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-        height: string;
-        paddingLeft: string;
-        paddingRight: string;
-    };
-};
-type ButtonSize = VariantProps<typeof getSizeStyles$4>;
-declare const getVariantStyles$2: (theme: Theme) => {
-    primary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    secondary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    tertiary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-};
-type ButtonVariant = VariantProps<typeof getVariantStyles$2>;
-
-interface ButtonOptions {
-    /**
-     * Sets the size of the button
-     * @default 'md'
-     */
-    size?: ResponsiveProp<ButtonSize>;
-    /**
-     * Sets the style variant of the button
-     * @default 'secondary'
-     */
-    variant?: ButtonVariant;
-    /**
-     * If `true` the button will fill its container
-     * @default false
-     */
-    isFullWidth?: boolean;
-    /**
-     * If `true` the button will show a spinner
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * If `true` the button will be disabled
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Icon to display before the button label
-     */
-    iconLeft?: ElementType<IconProps>;
-    /**
-     * Icon to display after the button label
-     */
-    iconRight?: ElementType<IconProps>;
-    /**
-     * The HTML `type` attribute
-     * @default 'button'
-     */
-    type?: 'button' | 'submit' | 'reset';
-}
-
-type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
-type ButtonProps = PropsOf<PolymorphicButton>;
-declare const Button: PolymorphicButton;
-
-type DisplaySize = keyof Theme['typography']['display'];
-type DisplayTextAlign = 'left' | 'center' | 'right';
-type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
-interface DisplayTextOptions {
-    /**
-     * Sets the visual size of the display text.
-     * To override the rendered tag, use the `as` prop.
-     *
-     * @default 'md'
-     */
-    size?: ResponsiveProp<DisplaySize>;
-    /**
-     * Sets the text alignment
-     *
-     * @default 'left'
-     */
-    textAlign?: DisplayTextAlign;
-    /**
-     * Sets the text wrapping
-     *
-     * See [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap)
-     *
-     * @default 'pretty'
-     */
-    textWrap?: DisplayTextWrap;
-}
-type DisplayTextComponent = ForwardRefComponent<'h2', DisplayTextOptions>;
-type DisplayTextProps = PropsOf<DisplayTextComponent>;
-declare const DisplayText: DisplayTextComponent;
-
-interface CheckboxOptions {
-    /**
-     * The label for the checkbox. Accepts a string, or a React component for rendering links within the label.
-     *
-     * @example
-     * ```jsx
-     * <Checkbox label="I agree to the terms and conditions" />
-     * ```
-     *
-     * @example
-     * ```jsx
-     * <Checkbox
-     *   label={
-     *    <>
-     *      I agree to <Link href="/terms">the terms and conditions</Link>
-     *    </>
-     *  }
-     * />
-     * ```
-     */
-    label: string | ReactElement<unknown>;
-    /**
-     * Text that provides additional guidance to the user
-     */
-    helperText?: string;
-    /**
-     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
-     */
-    isDefaultChecked?: boolean;
-    /**
-     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
-     */
-    defaultChecked?: boolean;
-    /**
-     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
-     */
-    isChecked?: boolean;
-    /**
-     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
-     */
-    checked?: boolean;
-    /**
-     * Event handler called when the checked state of the checkbox changes.
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * If `true` the checkbox will render in its invalid state.
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * The error message to display if `isInvalid` is `true`
-     */
-    errorMessage?: string;
-    /**
-     * If `true` it prevents the user from interacting with the checkbox.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the user must check the checkbox before the owning form can be submitted.
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string;
-    /**
-     * The value given as data when submitted with a `name`.
-     */
-    value?: string;
-}
-type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
-declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & react.RefAttributes<HTMLButtonElement>>;
-
-interface DividerOptions {
-    /**
-     * The orientation of the divider.
-     *
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-}
-interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
-}
-declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
-
-type PrimitiveContentProps = DropdownPrimitive.DropdownMenuContentProps;
-interface DropdownMenuContentOptions {
-    /**
-     * Event handler called when focus moves to the trigger after closing.
-     * It can be prevented by calling `event.preventDefault`.
-     */
-    onCloseAutofocus?: PrimitiveContentProps['onCloseAutoFocus'];
-    /**
-     * Event handler called when the escape key is down.
-     * It can be prevented by calling `event.preventDefault`.
-     */
-    onEscapeKeyDown?: PrimitiveContentProps['onEscapeKeyDown'];
-    /**
-     * Event handler called when a pointer event occurs outside the bounds of the component.
-     * It can be prevented by calling `event.preventDefault`.
-     */
-    onPointerDownOutside?: PrimitiveContentProps['onPointerDownOutside'];
-    /**
-     * Event handler called when focus moves outside the bounds of the component.
-     * It can be prevented by calling `event.preventDefault`.
-     */
-    onFocusOutside?: PrimitiveContentProps['onFocusOutside'];
-    /**
-     * Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component.
-     * It can be prevented by calling `event.preventDefault`.
-     */
-    onInteractOutside?: PrimitiveContentProps['onInteractOutside'];
-    /**
-     * The preferred side of the trigger to render against when open.
-     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
-     *
-     * @default "bottom"
-     */
-    side?: PrimitiveContentProps['side'];
-    /**
-     * The distance in pixels from the trigger.
-     *
-     * @default 8
-     */
-    sideOffset?: PrimitiveContentProps['sideOffset'];
-    /**
-     * The preferred alignment against the trigger. May change when collisions occur.
-     *
-     * @default "center"
-     */
-    align?: PrimitiveContentProps['align'];
-    /**
-     * The element used as the collision boundary.
-     * By default this is the viewport, though you can provide additional element(s) to be included in this check.
-     *
-     * @default []
-     */
-    collisionBoundary?: PrimitiveContentProps['collisionBoundary'];
-    /**
-     * Whether to hide the content when the trigger becomes fully occluded.
-     *
-     * @default false
-     */
-    hideWhenDetached?: PrimitiveContentProps['hideWhenDetached'];
-}
-interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
-}
-
-type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
-
-interface DropdownMenuItemOptions {
-    /**
-     * If `true`, the item will be disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * Event handler called when the user selects an item (via mouse or keyboard).
-     * Calling `event.preventDefault` in this handler will prevent the dropdown from closing when selecting that item.
-     */
-    onSelect?: (event: Event) => void;
-    /**
-     * Optional text used for typeahead purposes.
-     * By default the typeahead behavior will use the `.textContent` of the item.
-     * Use this when the content is complex, or you have non-textual content inside.
-     */
-    textValue?: string;
-    /**
-     * Optional icon to display on the left side of the item content.
-     */
-    icon?: ElementType<IconProps>;
-}
-interface DropdownMenuItemProps extends Omit<DropdownPrimitive.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
-}
-
-type DropdownTriggerComponent = ForwardRefComponent<'button'>;
-type DropdownMenuTriggerProps = PropsOf<DropdownTriggerComponent>;
-
-interface DropdownMenuRootProps {
-    children: ReactNode;
-    /**
-     * If `true` the dropdown menu will be open
-     */
-    isOpen?: boolean;
-    /**
-     * The open state of the submenu when it is initially rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: boolean;
-    /**
-     * Callback invoked open state changes
-     */
-    onOpenChange?: (isOpen: boolean) => void;
-}
-declare function DropdownMenuRoot(props: DropdownMenuRootProps): react_jsx_runtime.JSX.Element;
-declare const DropdownMenu: typeof DropdownMenuRoot & {
-    Trigger: ForwardRefComponent<"button", {}>;
-    Content: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
-    Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
-    Divider: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-};
-
-type HeadingSize = keyof Theme['typography']['title'];
-type HeadingColor = keyof Theme['colors']['text'];
-interface HeadingOptions {
-    /**
-     * Sets the visual size of the heading.
-     * To override the rendered tag, use the `as` prop.
-     *
-     * @default 'md'
-     */
-    size?: ResponsiveProp<HeadingSize>;
-    /**
-     * Sets the color of the heading
-     * @default 'default'
-     */
-    color?: HeadingColor;
-    /**
-     * Truncates the heading after a specific number of lines
-     */
-    numberOfLines?: number;
-    /**
-     * Alignment of the heading
-     * @default 'left'
-     */
-    textAlign?: 'left' | 'center' | 'right';
-}
-type HeadingComponent = ForwardRefComponent<'h2', HeadingOptions>;
-type HeadingProps = PropsOf<HeadingComponent>;
-declare const Heading: HeadingComponent;
-
-type HintBoxTitleProps = HTMLQdsProps<'span'>;
-type HintBoxProps = HTMLQdsProps<'aside'>;
-declare const HintBox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>> & {
-    Title: _emotion_styled.StyledComponent<{
-        theme?: _emotion_react.Theme;
-        as?: React.ElementType;
-    }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-};
-
-declare const getSizeStyles$3: (theme: Theme) => {
-    xs: {
-        width: string;
-        height: string;
-    };
-    sm: {
-        width: string;
-        height: string;
-    };
-    md: {
-        width: string;
-        height: string;
-    };
-};
-declare const getVariantStyles$1: (theme: Theme) => {
-    primary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    secondary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    tertiary: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    ghost: {
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-    white: {
-        background: string;
-        color: string;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-            };
-            ':active': {
-                background: string;
-            };
-        };
-    };
-};
-
-type IconButtonSize = VariantProps<typeof getSizeStyles$3>;
-type IconButtonVariant = VariantProps<typeof getVariantStyles$1>;
-interface IconButtonOptions {
-    icon: ElementType<IconProps>;
-    /**
-     * A visually hidden label read by screen readers.
-     *
-     */
-    label: string;
-    /**
-     * Defines the size of the button
-     */
-    size?: ResponsiveProp<IconButtonSize>;
-    /**
-     * Sets the style variant of the button
-     */
-    variant?: IconButtonVariant;
-    /**
-     * If `true` the button will be disabled
-     */
-    isDisabled?: boolean;
-}
-type IconButtonComponent = ForwardRefComponent<'button', IconButtonOptions>;
-type IconButtonProps = PropsOf<IconButtonComponent>;
-declare const IconButton: IconButtonComponent;
-
-interface InputBaseOptions {
-    /**
-     * If `true`, the input will be invalid
-     */
-    isInvalid?: boolean;
-    /**
-     * If `true`, the input will be disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the input will be required
-     */
-    isRequired?: boolean;
-}
-type OmittedProps$8 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required';
-interface InputBaseProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$8>, InputBaseOptions {
-}
-declare const InputBase: react.ForwardRefExoticComponent<InputBaseProps & react.RefAttributes<HTMLInputElement>>;
-
-interface TextFieldOptions extends InputBaseOptions {
-    /**
-     * The label for the input
-     */
-    label: string;
-    /**
-     * The error message to display if `isInvalid` is `true`
-     */
-    errorMessage?: string;
-    /**
-     * If `true`, the input will display an optional indicator.
-     * If the `isRequired` prop is also `true`, this prop will be ignored.
-     */
-    isOptional?: boolean;
-    /**
-     * Text that provides additional guidance to the user
-     */
-    helperText?: string;
-    /**
-     * Suffixed text to display after the input.
-     * This is useful for e.g. displaying units of measurement.
-     */
-    suffix?: string;
-}
-type OmittedProps$7 = 'children' | 'readOnly' | 'size';
-interface TextFieldProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$7>, TextFieldOptions {
-}
-declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
-
-declare const getSizeStyles$2: (theme: Theme) => {
-    sm: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    md: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-};
-type LabelSize = VariantProps<typeof getSizeStyles$2>;
-type LabelColor = keyof Theme['colors']['text'];
-interface LabelOptions {
-    /**
-     * Size of the label
-     */
-    size?: ResponsiveProp<LabelSize>;
-    /**
-     * Sets the color of the label
-     * @default 'default'
-     */
-    color?: LabelColor;
-}
-type LabelComponent = ForwardRefComponent<'label', LabelOptions>;
-type LabelProps = PropsOf<LabelComponent>;
-declare const Label: LabelComponent;
-
-interface LinkOptions {
-    /**
-     * The URL to link to.
-     */
-    href?: string;
-    /**
-     * If `true`, the link will open in new tab
-     */
-    isExternal?: boolean;
-}
-type LinkComponent = ForwardRefComponent<'a', LinkOptions>;
-type LinkProps = PropsOf<LinkComponent>;
-declare const Link: LinkComponent;
-
-declare const getSizeStyles$1: (theme: Theme) => {
-    sm: {
-        fontSize: string;
-    };
-    md: {
-        fontSize: string;
-    };
-};
-type LoadingDotsSize = VariantProps<typeof getSizeStyles$1>;
-interface LoadingDotsOptions {
-    size?: ResponsiveProp<LoadingDotsSize>;
-}
-interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
-}
-declare const LoadingDots: react.ForwardRefExoticComponent<LoadingDotsProps & react.RefAttributes<HTMLSpanElement>>;
-
-declare const getSizeStyles: (theme: Theme) => {
-    xs: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    sm: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    md: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    lg: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    xl: {
-        fontFamily: string;
-        fontWeight: string;
-        fontSize: string;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-};
-type ParagraphSize = VariantProps<typeof getSizeStyles>;
-type ParagraphColor = keyof Theme['colors']['text'];
-interface ParagraphOptions {
-    /**
-     * Sets the visual size of the text
-     * @default 'md'
-     */
-    size?: ResponsiveProp<ParagraphSize>;
-    /**
-     * Sets the color of the text
-     * @default 'normal'
-     */
-    color?: ParagraphColor;
-    /**
-     * Truncates the text after a specific number of lines
-     */
-    numberOfLines?: number;
-    /**
-     * Alignment of the paragraph
-     * @default 'left'
-     */
-    textAlign?: 'left' | 'center' | 'right';
-}
-type ParagraphComponent = ForwardRefComponent<'p', ParagraphOptions>;
-type ParagraphProps = PropsOf<ParagraphComponent>;
-declare const Paragraph: ParagraphComponent;
-
-interface SelectBaseOptions {
-    /**
-     * The placeholder for the select. We render an `<option/>` element that has
-     * empty value.
-     *
-     * ```jsx
-     * <option value="">{placeholder}</option>
-     * ```
-     */
-    placeholder?: string;
-    /**
-     * If `true`, the select will be invalid
-     */
-    isInvalid?: boolean;
-    /**
-     * If `true`, the select will be disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the select will be required
-     */
-    isRequired?: boolean;
-}
-type OmittedProps$6 = 'readOnly' | 'size' | 'multiple' | 'disabled' | 'required';
-interface SelectBaseProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$6>, SelectBaseOptions {
-}
-declare const SelectBase: react.ForwardRefExoticComponent<SelectBaseProps & react.RefAttributes<HTMLSelectElement>>;
-
-type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
-type MinRowsProp = number;
-interface TextareaBaseOptions {
-    /**
-     * If `true`, the textarea will be invalid
-     */
-    isInvalid?: boolean;
-    /**
-     * If `true`, the textarea will be disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the textarea will be required
-     */
-    isRequired?: boolean;
-    /**
-     * The resize behavior of the textarea
-     *
-     * @default 'vertical'
-     */
-    resize?: ResizeProp;
-    /**
-     * The minimum number of rows to display without requiring scrolling or resizing.
-     * To disabled resizing use the `resize` prop.
-     *
-     * @default 3
-     */
-    minRows?: MinRowsProp;
-}
-type OmittedProps$5 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required' | 'rows' | 'cols';
-interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$5>, TextareaBaseOptions {
-}
-declare const TextareaBase: react.ForwardRefExoticComponent<TextareaBaseProps & react.RefAttributes<HTMLTextAreaElement>>;
-
-interface RadioCardOptions {
-    /**
-     * The label for the radio card
-     */
-    label: string;
-    /**
-     * Text that provides additional guidance to the user
-     */
-    helperText?: string;
-    /**
-     * If `true` the user must check the radio item before the owning form can be submitted.
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * If `true` it prevents the user from interacting with the radio item.
-     * @default false
-     */
-    isDisabled?: boolean;
-}
-interface RadioCardProps extends Omit<RadioGroupPrimitive.RadioGroupItemProps, 'asChild' | keyof RadioCardOptions>, RadioCardOptions {
-}
-
-interface RadioButtonOptions {
-    /**
-     * The label for the radio button
-     */
-    label: string;
-    /**
-     * If `true` the user must check the radio item before the owning form can be submitted.
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * If `true` it prevents the user from interacting with the radio item.
-     * @default false
-     */
-    isDisabled?: boolean;
-}
-interface RadioButtonProps extends Omit<RadioGroupPrimitive.RadioGroupItemProps, 'asChild' | keyof RadioButtonOptions>, RadioButtonOptions {
-}
-
-type RadioGroupLabelProps = HTMLQdsProps<'span'>;
-
-interface RadioGroupOptions {
-    /**
-     * The value of the radio item that should be checked when initially rendered.
-     * Use when you do not need to control the state of the radio items.
-     */
-    defaultValue?: string;
-    /**
-     * The controlled value of the radio item to check.
-     * Should be used in conjunction with `onValueChange`.
-     */
-    value?: string;
-    /**
-     * Event handler called when the value changes.
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * The name of the group. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string;
-    /**
-     * If `true` all child radio items will be disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the user must check a radio item before the owning form can be submitted.
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * If `true` the radio group will be invalid.
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * The error message to display if `isInvalid` is `true`
-     */
-    errorMessage?: string;
-}
-interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, 'asChild' | keyof RadioGroupOptions>, RadioGroupOptions {
-}
-declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>> & {
-    Card: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLButtonElement>>;
-    Button: react.ForwardRefExoticComponent<RadioButtonProps & react.RefAttributes<HTMLButtonElement>>;
-    Label: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
-};
-
-interface SelectOptionOptions {
-    isDisabled?: boolean;
-}
-type OmittedProps$4 = 'disabled' | 'label';
-interface SelectOptionProps extends Omit<HTMLQdsProps<'option'>, OmittedProps$4>, SelectOptionOptions {
-}
-
-interface SelectOptions extends SelectBaseOptions {
-    /**
-     * The label for the select field
-     */
-    label: string;
-    /**
-     * The error message to display if `isInvalid` is `true`
-     */
-    errorMessage?: string;
-    /**
-     * Text that provides additional guidance to the user
-     */
-    helperText?: string;
-    /**
-     * If `true`, the select field will display an optional indicator.
-     * If the `isRequired` prop is also `true`, this prop will be ignored.
-     */
-    isOptional?: boolean;
-}
-type OmittedProps$3 = 'readOnly' | 'size';
-interface SelectProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$3>, SelectOptions {
-}
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>> & {
-    Option: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLOptionElement>>;
-};
-
-type Spacing = keyof Theme['spacing'];
-interface SpacerOptions {
-    axis?: 'x' | 'y';
-    size: ResponsiveProp<Spacing>;
-}
-interface SpacerProps extends HTMLQdsProps<'span'>, SpacerOptions {
-}
-declare const Spacer: react.ForwardRefExoticComponent<SpacerProps & react.RefAttributes<HTMLSpanElement>>;
-
-type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
-type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-
-type GapProp = keyof Theme['spacing'];
-interface StackOptions {
-    /**
-     * The direction of the stack.
-     * @default 'column'
-     */
-    direction?: ResponsiveProp<FlexDirection>;
-    /**
-     * The CSS `justify-content` property.
-     * Controls the alignment of items on the main axis.
-     */
-    justifyContent?: ResponsiveProp<JustifyContent>;
-    /**
-     * The CSS `align-items` property.
-     * Controls the alignment of items on the cross axis.
-     */
-    alignItems?: ResponsiveProp<AlignItems>;
-    /**
-     * The CSS `flex-wrap` property.
-     * Controls whether children can wrap onto multiple lines.
-     * @default 'nowrap'
-     */
-    wrap?: FlexWrap;
-    /**
-     * The gap between each child element.
-     */
-    gap?: ResponsiveProp<GapProp>;
-    /**
-     * A divider element to be rendered between each child element.
-     *
-     * _Note: For the divider to be rendered, the child elements can't be loose strings or numbers.
-     *  Wrap them in a `div` or other element._
-     */
-    divider?: ReactNode;
-}
-type StackComponent = ForwardRefComponent<'div', StackOptions>;
-type StackProps = PropsOf<StackComponent>;
-declare const Stack: StackComponent;
-
-interface SwitchOptions {
-    /**
-     * The label for the switch
-     */
-    label: string;
-    /**
-     * The text that appears below the label
-     * to provide additional guidance to the user
-     */
-    helperText?: string;
-    /**
-     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
-     */
-    isDefaultChecked?: boolean;
-    /**
-     * If `true`, the switch will be checked
-     */
-    isChecked?: boolean;
-    /**
-     * If `true`, the switch will be disabled and
-     * cannot be interacted with
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true`, indicates that the switch is required
-     */
-    isRequired?: boolean;
-    onCheckedChange?: (isChecked: boolean) => void;
-}
-interface SwitchProps extends Omit<RadixSwitch.SwitchProps, 'asChild' | keyof SwitchOptions>, SwitchOptions {
-}
-declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
-
-interface TextareaOptions extends TextareaBaseOptions {
-    /**
-     * The label for the textarea field
-     */
-    label: string;
-    /**
-     * The error message to display if `isInvalid` is `true`
-     */
-    errorMessage?: string;
-    /**
-     * Text that provides additional guidance to the user
-     */
-    helperText?: string;
-    /**
-     * If `true`, the input will display an optional indicator.
-     * If the `isRequired` prop is also `true`, this prop will be ignored.
-     */
-    isOptional?: boolean;
-}
-type OmittedProps$2 = 'children' | 'readOnly' | 'size';
-interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$2>, TextareaOptions {
-}
-declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
-
-declare const getVariantStyles: (theme: Theme) => {
-    neutral: {
-        background: string;
-        color: string;
-    };
-    error: {
-        background: string;
-        color: string;
-    };
-};
-type ToastVariant = VariantProps<typeof getVariantStyles>;
-
-type Id = number | string;
-interface ToastOptions$1 {
-    /**
-     * Unique identifier for the toast (can be used for removing it prematurely). If a toast with this
-     * identifier already exists it will be removed before the new toast is added.
-     * @default a random unique id will be set and returned
-     */
-    id?: Id;
-}
-declare const toast: ((text: string, options?: ToastOptions$1) => Id) & {
-    error: (text: string, options?: ToastOptions$1) => Id;
-    remove: (id: Id) => void;
-    removeAll: () => void;
-};
-
-interface ToastOptions {
-    text: string;
-    variant?: ToastVariant;
-}
-type OmittedProps$1 = 'children';
-interface ToastProps extends Omit<HTMLQdsProps<'div'>, OmittedProps$1>, ToastOptions {
-}
-declare function Toast(props: ToastProps & ToastPrimitive.ToastProps): react_jsx_runtime.JSX.Element;
-
-interface UseBreakpointOptions {
-    /**
-     * If `true` the initial value will be `base` instead of the current breakpoint.
-     * This is to support hydration when using server side rendering.
-     *
-     * @default false
-     */
-    ssr?: boolean;
-}
-/**
- * Hook for getting the current breakpoint.
- */
-declare function useBreakpoint(params?: UseBreakpointOptions): {
-    currentBreakpoint: "2xl" | "base" | "xl" | "lg" | "md" | "sm";
-};
-
-type Breakpoints = Theme['breakpoints'];
-type BreakpointsConfig<T> = PartialRecord<keyof Breakpoints, T> & {
-    base: T;
-};
-type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
-/**
- * Hook for getting a value based on the current breakpoint.
- *
- * @example
- * const width = useBreakpointValue({ base: '150px', md: '250px' })
- */
-declare function useBreakpointValue<T>(values: UseBreakpointValueProps<T>, options?: UseBreakpointOptions): T;
-
-type FormFieldElement = 'input' | 'select' | 'textarea';
-type PropGetter<T extends ElementType = LegitimateAny> = (props?: HTMLQdsProps<T>) => Record<string, unknown>;
-interface FormFieldOptions {
-    /**
-     * The label for the form field
-     */
-    label: string;
-    /**
-     * The error message to display if `isInvalid` is `true`
-     */
-    errorMessage?: string;
-    /**
-     * Text that provides additional guidance to the user
-     */
-    helperText?: string;
-    /**
-     * If `true`, the form field will be invalid
-     */
-    isInvalid?: boolean;
-    /**
-     * If `true`, the form field will be disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true` the form field will be required
-     */
-    isRequired?: boolean;
-}
-type OmittedProps = 'children' | 'readOnly' | 'size';
-type UseFormFieldProps<T extends FormFieldElement> = Omit<HTMLQdsProps<T>, OmittedProps> & FormFieldOptions;
-/**
- * Custom hook that returns props for a form field's label, input, helper text and error message.
- * Meant to be used in conjunction with the `Input`, `Select` or `Textarea` component.
- *
- * Used internally by `TextField`, `Select` and `Textarea`.
- */
-declare const useFormField: <T extends FormFieldElement>(props: UseFormFieldProps<T>) => {
-    getLabelProps: PropGetter<"label">;
-    /**
-     * Props to be spread on the input, select or textarea element.
-     * Function accepts an optional object of props to be merged with the returned props.
-     */
-    getFieldProps: PropGetter<T>;
-    getHelperTextProps: PropGetter<"div">;
-    getErrorMessageProps: PropGetter<"div">;
-};
-
-/**
- * Returns a stable ID that is unique to the component instance.
- */
-declare function useStableId(fixedId?: string | null): string;
-
-/**
- * On the server, React emits a warning when calling `useLayoutEffect`.
- * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
- * We use this safe version which suppresses the warning by replacing it with a noop on the server.
- *
- * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
- */
-declare const useSafeLayoutEffect: typeof useLayoutEffect;
-
-export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, type AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, type ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, type CreateIconOptions, DisplayText, type DisplayTextProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuContentProps, type DropdownMenuDividerProps, type DropdownMenuItemProps, type DropdownMenuRootProps, type DropdownMenuTriggerProps, type ForwardRefComponent, GlobeIcon, Heading, type HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, type HintBoxProps, type HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, type IconButtonProps, type IconProps, ImageIcon, InfoIcon, InputBase, type InputBaseOptions, type InputBaseProps, type IntrinsicElement, Label, type LabelProps, Link, type LinkProps, ListFilterIcon, ListIcon, LoadingDots, type LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, type OwnProps, Paragraph, type ParagraphProps, PenIcon, PlusIcon, type PropsOf, QdsProvider, type RadioButtonProps, type RadioCardProps, RadioGroup, type RadioGroupLabelProps, type RadioGroupProps, SearchIcon, Select, SelectBase, type SelectBaseOptions, type SelectOptionProps, type SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, type SpacerProps, Stack, type StackProps, StarFilledIcon, StarIcon, Switch, type SwitchProps, TextField, type TextFieldProps, Textarea, TextareaBase, type TextareaBaseOptions, type TextareaBaseProps, type TextareaProps, type Theme, type ThemeOverrides, Toast, TrashIcon, type UseBreakpointOptions, type UseBreakpointValueProps, type UseFormFieldProps, UserIcon, type VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useSafeLayoutEffect, useStableId };