@qasa/qds-ui 1.0.1 → 1.0.3

package/dist/index.d.ts

@@ -1,35 +1,42 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ReactNode, ElementType, ComponentPropsWithoutRef, SVGAttributes, ReactElement, useLayoutEffect } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-import { Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Toast as Toast$1 } from 'radix-ui';
-import { LucideIcon } from 'lucide-react';
+'use client';
 
-type LanguageCode = 'en' | 'sv' | 'fi' | 'fr' | 'nb';
-
-interface QdsProviderProps {
-    children: ReactNode;
-    locale: LanguageCode;
-}
-declare function QdsProvider({ children, locale }: QdsProviderProps): react_jsx_runtime.JSX.Element;
+import * as React$1 from "react";
+import { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode, SVGAttributes, useLayoutEffect } from "react";
+import { Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Toast as Toast$1 } from "radix-ui";
+import { LucideIcon } from "lucide-react";
+import { VariantProps } from "class-variance-authority";
 
+//#region src/i18n/locales.d.ts
+type LanguageCode = 'en' | 'sv' | 'fi' | 'fr' | 'nb';
+//#endregion
+//#region src/qds-provider.d.ts
+type QdsProviderProps = {
+  children: ReactNode;
+  locale: LanguageCode;
+};
+declare function QdsProvider({
+  children,
+  locale
+}: QdsProviderProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/types.d.ts
 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>;
-
+//#endregion
+//#region src/utils/responsive-classes.d.ts
 declare const BREAKPOINTS: {
-    readonly base: "";
-    readonly sm: "sm:";
-    readonly md: "md:";
-    readonly lg: "lg:";
-    readonly xl: "xl:";
-    readonly '2xl': "2xl:";
+  readonly base: "";
+  readonly sm: "sm:";
+  readonly md: "md:";
+  readonly lg: "lg:";
+  readonly xl: "xl:";
+  readonly '2xl': "2xl:";
 };
 type BreakpointKey = keyof typeof BREAKPOINTS;
 type BreakpointsConfig$1<T> = PartialRecord<Exclude<BreakpointKey, 'base'>, T> & {
-    base: T;
+  base: T;
 };
 type ResponsiveProp<T> = T | BreakpointsConfig$1<T>;
 /**
@@ -42,10 +49,10 @@ type ResponsiveProp<T> = T | BreakpointsConfig$1<T>;
  * call and emits `@source inline(...)` directives so Tailwind compiles the
  * breakpoint-prefixed variants.
  */
-interface ResponsiveClassMap<T extends string> {
-    readonly classes: Record<T, string>;
-    readonly default: T;
-}
+type ResponsiveClassMap<T extends string> = {
+  readonly classes: Record<T, string>;
+  readonly default: T;
+};
 /**
  * Derives the size literal union from a class map.
  *
@@ -54,42 +61,36 @@ interface ResponsiveClassMap<T extends string> {
  * type ButtonSize = ResponsiveSize<typeof SIZE_CLASSES>
  */
 type ResponsiveSize<M> = M extends ResponsiveClassMap<infer T> ? T : never;
-
-declare const SIZE_CLASSES$7: ResponsiveClassMap<"sm" | "md" | "lg" | "xl" | "2xl" | "xs">;
+//#endregion
+//#region src/components/avatar/avatar.d.ts
+declare const SIZE_CLASSES$7: ResponsiveClassMap<"2xl" | "sm" | "md" | "lg" | "xl" | "xs">;
 type AvatarSize = ResponsiveSize<typeof SIZE_CLASSES$7>;
-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>;
-    /**
-     * A custom alt text for the image. If not passed it
-     * defaults to the `name` prop.
-     */
-    imageAlt?: string;
-}
-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
- */
-
+type 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>;
+  /**
+   * A custom alt text for the image. If not passed it
+   * defaults to the `name` prop.
+   */
+  imageAlt?: string;
+};
+type AvatarProps = {} & HTMLQdsProps<'span'> & AvatarOptions;
+declare const Avatar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & AvatarOptions & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+//#region src/utils/polymorphic.d.ts
 /**
  * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
  */
@@ -98,239 +99,398 @@ 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;
+type ForwardRefExoticComponent<E, OwnProps> = React$1.ForwardRefExoticComponent<Merge<E extends React$1.ElementType ? React$1.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;
-}
+type ForwardRefComponent<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$1.JSX.IntrinsicElements;
+  } : As extends React$1.ComponentType<infer P> ? Merge<P, OwnProps & {
+    as: As;
+  }> : As extends keyof React$1.JSX.IntrinsicElements ? Merge<React$1.JSX.IntrinsicElements[As], OwnProps & {
+    as: As;
+  }> : never): React$1.ReactElement | null;
+} & ForwardRefExoticComponent<IntrinsicElementString, OwnProps>;
 /**
  * Infers the props of a React component
  */
-type PropsOf<E> = E extends react.ComponentType<infer P> ? P : never;
-
+type PropsOf<E> = E extends React$1.ComponentType<infer P> ? P : never;
+//#endregion
+//#region src/components/icon/create-icon.d.ts
+/**
+ * This function is heavily inspired by the `createIcon` function from
+ * Chakra UI (https://chakra-ui.com/).
+ */
+type 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) => import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+//#endregion
+//#region src/components/icon/create-lucide-icon.d.ts
+declare const createLucideIcon: (Icon: LucideIcon) => import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+//#endregion
+//#region src/components/icon/icons.d.ts
+declare const AlertCircleIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const AlertTriangleIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ArrowLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ArrowRightIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ArrowUpIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const BellIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const BellOffIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const BookmarkFilledIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const BookmarkIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const CalendarIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const CameraIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const CheckCircleIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const CheckIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ChevronDownIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ChevronUpIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const GlobeIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const HeartFilledIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const HeartIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const HelpCircleIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const HistoryIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const HomeIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ImageIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const InfoIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ListIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ListFilterIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const LogOutIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const MapIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const MapPinIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const MenuIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const MessageCircleIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const MinusIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const MoreHorizontalIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const MoreVerticalIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const PenIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const PlusIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const SearchIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const SettingsIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const ShareIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const SlidersIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const StarFilledIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const StarIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const TrashIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const UserIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const XCircleIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+declare const XIcon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGAttributes<SVGElement>, "height" | "width" | "color" | "onClick" | "fontSize"> & {
+  size?: 16 | 12 | 20 | 24 | 32;
+  color?: "strong" | "disabled" | "default" | "subtle" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & import("react").RefAttributes<SVGSVGElement>>;
+//#endregion
+//#region src/components/icon/icon-shared.d.ts
 declare const ICON_COLOR_CLASSES: {
-    readonly default: "text-[color:var(--stroke-default)]";
-    readonly strong: "text-[color:var(--stroke-strong)]";
-    readonly subtle: "text-[color:var(--stroke-subtle)]";
-    readonly disabled: "text-[color:var(--stroke-disabled)]";
-    readonly negative: "text-[color:var(--stroke-negative)]";
-    readonly warning: "text-[color:var(--stroke-warning)]";
-    readonly positive: "text-[color:var(--stroke-positive)]";
-    readonly onBrandPrimary: "text-[color:var(--stroke-onBrandPrimary)]";
-    readonly onBrandSecondary: "text-[color:var(--stroke-onBrandSecondary)]";
-    readonly onBrandTertiary: "text-[color:var(--stroke-onBrandTertiary)]";
+  readonly default: "text-[color:var(--stroke-default)]";
+  readonly strong: "text-[color:var(--stroke-strong)]";
+  readonly subtle: "text-[color:var(--stroke-subtle)]";
+  readonly disabled: "text-[color:var(--stroke-disabled)]";
+  readonly negative: "text-[color:var(--stroke-negative)]";
+  readonly warning: "text-[color:var(--stroke-warning)]";
+  readonly positive: "text-[color:var(--stroke-positive)]";
+  readonly onBrandPrimary: "text-[color:var(--stroke-onBrandPrimary)]";
+  readonly onBrandSecondary: "text-[color:var(--stroke-onBrandSecondary)]";
+  readonly onBrandTertiary: "text-[color:var(--stroke-onBrandTertiary)]";
 };
 type IconSize = 12 | 16 | 20 | 24 | 32;
 type IconColor = keyof typeof ICON_COLOR_CLASSES | 'currentColor';
-interface IconOptions {
-    /**
-     * The size of the icon.
-     *
-     * @default 24
-     */
-    size?: IconSize;
-    /**
-     * The color of the icon.
-     *
-     * @default 'default'
-     */
-    color?: IconColor;
-}
+type 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 BookmarkFilledIcon: 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 IconProps = {} & Omit<SVGAttributes<SVGElement>, OmittedProps$9> & IconOptions;
+//#endregion
+//#region src/components/button/button.d.ts
 declare const SIZE_CLASSES$6: ResponsiveClassMap<"sm" | "md" | "lg" | "xl" | "xs">;
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "danger" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  variant?: "primary" | "secondary" | "tertiary" | "danger" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonSize = ResponsiveSize<typeof SIZE_CLASSES$6>;
 type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
-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 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;
-
-declare const SIZE_CLASSES$5: ResponsiveClassMap<"sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "2xs">;
+//#endregion
+//#region src/components/display-text/display-text.d.ts
+declare const SIZE_CLASSES$5: ResponsiveClassMap<"2xl" | "sm" | "md" | "lg" | "xl" | "xs" | "3xl" | "2xs">;
 declare const TEXT_ALIGN_CLASSES$2: {
-    readonly left: "text-left";
-    readonly center: "text-center";
-    readonly right: "text-right";
+  readonly left: "text-left";
+  readonly center: "text-center";
+  readonly right: "text-right";
 };
 declare const TEXT_WRAP_CLASSES: {
-    readonly pretty: "text-pretty";
-    readonly balance: "text-balance";
-    readonly wrap: "text-wrap";
-    readonly nowrap: "text-nowrap";
-    readonly stable: "[text-wrap:stable]";
+  readonly pretty: "text-pretty";
+  readonly balance: "text-balance";
+  readonly wrap: "text-wrap";
+  readonly nowrap: "text-nowrap";
+  readonly stable: "[text-wrap:stable]";
 };
 type DisplaySize = ResponsiveSize<typeof SIZE_CLASSES$5>;
 type DisplayTextAlign = keyof typeof TEXT_ALIGN_CLASSES$2;
 type DisplayTextWrap = keyof typeof TEXT_WRAP_CLASSES;
-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 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>;
 /**
  * @deprecated
@@ -340,255 +500,297 @@ type DisplayTextProps = PropsOf<DisplayTextComponent>;
  * @deprecated Use Tailwind CSS instead.
  */
 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;
-}
+//#endregion
+//#region src/components/checkbox/checkbox.d.ts
+type 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<Checkbox$1.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
-declare const Checkbox: react.ForwardRefExoticComponent<Omit<Checkbox$1.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<HTMLSpanElement>>;
-
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Checkbox$1.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/divider/divider.d.ts
+type DividerOptions = {
+  /**
+   * The orientation of the divider.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+};
+type DividerProps = {} & HTMLQdsProps<'span'> & DividerOptions;
+declare const Divider: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & DividerOptions & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-content.d.ts
 type PrimitiveContentProps = DropdownMenu$1.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 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'];
+};
+type DropdownMenuContentProps = {} & HTMLQdsProps<'div'> & DropdownMenuContentOptions;
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-divider.d.ts
 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<DropdownMenu$1.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
-}
-
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item.d.ts
+type 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>;
+};
+type DropdownMenuItemProps = {} & Omit<DropdownMenu$1.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions> & DropdownMenuItemOptions;
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-trigger.d.ts
 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;
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu.d.ts
+type 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): import("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>>;
+  Trigger: (<As = "button">(props: As extends "" ? {
+    as: keyof React.JSX.IntrinsicElements;
+  } : As extends import("react").ComponentType<infer P> ? Merge<P, {
+    as: As;
+  }> : As extends keyof import("react").JSX.IntrinsicElements ? Merge<import("react").JSX.IntrinsicElements[As], {
+    as: As;
+  }> : never) => React.ReactElement | null) & import("react").ForwardRefExoticComponent<Merge<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    as?: "button" | undefined;
+  }>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    onCloseAutofocus?: ((event: Event) => void) | undefined;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+    onPointerDownOutside?: ((event: CustomEvent<{
+      originalEvent: PointerEvent;
+    }>) => void) | undefined;
+    onFocusOutside?: ((event: CustomEvent<{
+      originalEvent: FocusEvent;
+    }>) => void) | undefined;
+    onInteractOutside?: ((event: CustomEvent<{
+      originalEvent: PointerEvent;
+    }> | CustomEvent<{
+      originalEvent: FocusEvent;
+    }>) => void) | undefined;
+    side?: "top" | "right" | "bottom" | "left" | undefined;
+    sideOffset?: number | undefined;
+    align?: "center" | "end" | "start" | undefined;
+    collisionBoundary?: (Element | null) | (Element | null)[] | undefined;
+    hideWhenDetached?: boolean | undefined;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuItemProps, "asChild" | keyof {
+    isDisabled?: boolean;
+    onSelect?: (event: Event) => void;
+    textValue?: string;
+    icon?: import("react").ElementType<IconProps>;
+  }> & {
+    isDisabled?: boolean;
+    onSelect?: (event: Event) => void;
+    textValue?: string;
+    icon?: import("react").ElementType<IconProps>;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+  Divider: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
-
+//#endregion
+//#region src/components/heading/heading.d.ts
 declare const SIZE_CLASSES$4: ResponsiveClassMap<"sm" | "md" | "lg" | "xs" | "2xs" | "3xs">;
 declare const COLOR_CLASSES$2: {
-    readonly default: "text-default";
-    readonly strong: "text-strong";
-    readonly subtle: "text-subtle";
-    readonly disabled: "text-disabled";
-    readonly negative: "text-negative";
-    readonly warning: "text-warning";
-    readonly positive: "text-positive";
-    readonly onBrandPrimary: "text-onBrandPrimary";
-    readonly onBrandSecondary: "text-onBrandSecondary";
-    readonly onBrandTertiary: "text-onBrandTertiary";
+  readonly default: "text-default";
+  readonly strong: "text-strong";
+  readonly subtle: "text-subtle";
+  readonly disabled: "text-disabled";
+  readonly negative: "text-negative";
+  readonly warning: "text-warning";
+  readonly positive: "text-positive";
+  readonly onBrandPrimary: "text-onBrandPrimary";
+  readonly onBrandSecondary: "text-onBrandSecondary";
+  readonly onBrandTertiary: "text-onBrandTertiary";
 };
 declare const TEXT_ALIGN_CLASSES$1: {
-    readonly left: "text-left";
-    readonly center: "text-center";
-    readonly right: "text-right";
+  readonly left: "text-left";
+  readonly center: "text-center";
+  readonly right: "text-right";
 };
 type HeadingSize = ResponsiveSize<typeof SIZE_CLASSES$4>;
 type HeadingColor = keyof typeof COLOR_CLASSES$2;
 type HeadingTextAlign = keyof typeof TEXT_ALIGN_CLASSES$1;
-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?: HeadingTextAlign;
-}
+type 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?: HeadingTextAlign;
+};
 type HeadingComponent = ForwardRefComponent<'h2', HeadingOptions>;
 /**
  * @deprecated
@@ -598,185 +800,213 @@ type HeadingProps = PropsOf<HeadingComponent>;
  * @deprecated Use Tailwind CSS instead.
  */
 declare const Heading: HeadingComponent;
-
+//#endregion
+//#region src/components/hint-box/hint-box.d.ts
 type HintBoxTitleProps = HTMLQdsProps<'p'>;
 type HintBoxProps = HTMLQdsProps<'aside'>;
-declare const HintBox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>> & {
-    Title: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+declare const HintBox: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+  Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 };
-
+//#endregion
+//#region src/components/icon-button/icon-button.d.ts
 declare const SIZE_CLASSES$3: ResponsiveClassMap<"sm" | "md" | "xs">;
 declare const iconButtonVariants: (props?: ({
-    variant?: "white" | "primary" | "secondary" | "tertiary" | "danger" | "ghost" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  variant?: "primary" | "secondary" | "tertiary" | "danger" | "ghost" | "white" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type IconButtonSize = ResponsiveSize<typeof SIZE_CLASSES$3>;
 type IconButtonVariant = NonNullable<VariantProps<typeof iconButtonVariants>['variant']>;
-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 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;
-}
+//#endregion
+//#region src/components/primitives/input-base/input-base.d.ts
+type 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 InputBaseProps = {} & Omit<HTMLQdsProps<'input'>, OmittedProps$8> & InputBaseOptions;
+declare const InputBase: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, OmittedProps$8> & InputBaseOptions & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/text-field/text-field.d.ts
+type TextFieldOptions = {
+  /**
+   * 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;
+} & InputBaseOptions;
 type OmittedProps$7 = 'children' | 'readOnly' | 'size';
-interface TextFieldProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$7>, TextFieldOptions {
-}
-declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
-
+type TextFieldProps = {} & Omit<HTMLQdsProps<'input'>, OmittedProps$7> & TextFieldOptions;
+declare const TextField: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, OmittedProps$7> & {
+  /**
+   * 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;
+} & InputBaseOptions & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/label/label.d.ts
 declare const SIZE_CLASSES$2: ResponsiveClassMap<"sm" | "md">;
 declare const COLOR_CLASSES$1: {
-    readonly strong: "text-strong";
-    readonly default: "text-default";
-    readonly subtle: "text-subtle";
-    readonly disabled: "text-disabled";
-    readonly negative: "text-negative";
-    readonly warning: "text-warning";
-    readonly positive: "text-positive";
-    readonly onBrandPrimary: "text-onBrandPrimary";
-    readonly onBrandSecondary: "text-onBrandSecondary";
-    readonly onBrandTertiary: "text-onBrandTertiary";
+  readonly strong: "text-strong";
+  readonly default: "text-default";
+  readonly subtle: "text-subtle";
+  readonly disabled: "text-disabled";
+  readonly negative: "text-negative";
+  readonly warning: "text-warning";
+  readonly positive: "text-positive";
+  readonly onBrandPrimary: "text-onBrandPrimary";
+  readonly onBrandSecondary: "text-onBrandSecondary";
+  readonly onBrandTertiary: "text-onBrandTertiary";
 };
 type LabelSize = ResponsiveSize<typeof SIZE_CLASSES$2>;
 type LabelColor = keyof typeof COLOR_CLASSES$1;
-interface LabelOptions {
-    /**
-     * Size of the label
-     */
-    size?: ResponsiveProp<LabelSize>;
-    /**
-     * Sets the color of the label
-     * @default 'default'
-     */
-    color?: LabelColor;
-}
+type 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;
-}
+//#endregion
+//#region src/components/link/link.d.ts
+type 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;
-
+//#endregion
+//#region src/components/loading-dots/loading-dots.d.ts
 declare const SIZE_CLASSES$1: ResponsiveClassMap<"sm" | "md">;
 type LoadingDotsSize = ResponsiveSize<typeof SIZE_CLASSES$1>;
-interface LoadingDotsOptions {
-    size?: ResponsiveProp<LoadingDotsSize>;
-}
-interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
-}
-declare const LoadingDots: react.ForwardRefExoticComponent<LoadingDotsProps & react.RefAttributes<HTMLSpanElement>>;
-
+type LoadingDotsOptions = {
+  size?: ResponsiveProp<LoadingDotsSize>;
+};
+type LoadingDotsProps = {} & HTMLQdsProps<'span'> & LoadingDotsOptions;
+declare const LoadingDots: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & LoadingDotsOptions & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+//#region src/components/paragraph/paragraph.d.ts
 declare const SIZE_CLASSES: ResponsiveClassMap<"sm" | "md" | "lg" | "xl" | "xs">;
 declare const COLOR_CLASSES: {
-    readonly default: "text-default";
-    readonly strong: "text-strong";
-    readonly subtle: "text-subtle";
-    readonly disabled: "text-disabled";
-    readonly negative: "text-negative";
-    readonly warning: "text-warning";
-    readonly positive: "text-positive";
-    readonly onBrandPrimary: "text-onBrandPrimary";
-    readonly onBrandSecondary: "text-onBrandSecondary";
-    readonly onBrandTertiary: "text-onBrandTertiary";
+  readonly default: "text-default";
+  readonly strong: "text-strong";
+  readonly subtle: "text-subtle";
+  readonly disabled: "text-disabled";
+  readonly negative: "text-negative";
+  readonly warning: "text-warning";
+  readonly positive: "text-positive";
+  readonly onBrandPrimary: "text-onBrandPrimary";
+  readonly onBrandSecondary: "text-onBrandSecondary";
+  readonly onBrandTertiary: "text-onBrandTertiary";
 };
 declare const TEXT_ALIGN_CLASSES: {
-    readonly left: "text-left";
-    readonly center: "text-center";
-    readonly right: "text-right";
+  readonly left: "text-left";
+  readonly center: "text-center";
+  readonly right: "text-right";
 };
 type ParagraphSize = ResponsiveSize<typeof SIZE_CLASSES>;
 type ParagraphColor = keyof typeof COLOR_CLASSES;
 type ParagraphTextAlign = keyof typeof TEXT_ALIGN_CLASSES;
-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?: ParagraphTextAlign;
-}
+type 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?: ParagraphTextAlign;
+};
 type ParagraphComponent = ForwardRefComponent<'p', ParagraphOptions>;
 /**
  * @deprecated
@@ -786,257 +1016,296 @@ type ParagraphProps = PropsOf<ParagraphComponent>;
  * @deprecated Use Tailwind CSS instead.
  */
 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;
-}
+//#endregion
+//#region src/components/primitives/select-base/select-base.d.ts
+type 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>>;
-
+declare const SelectBase: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, OmittedProps$6> & SelectBaseOptions & import("react").RefAttributes<HTMLSelectElement>>;
+//#endregion
+//#region src/components/primitives/textarea-base/textarea-base.d.ts
 type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
-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?: number;
-}
+type 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?: number;
+};
 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
-     */
+type TextareaBaseProps = {} & Omit<HTMLQdsProps<'textarea'>, OmittedProps$5> & TextareaBaseOptions;
+declare const TextareaBase: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, OmittedProps$5> & TextareaBaseOptions & import("react").RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+//#region src/components/radio-group/radio-card/radio-card.d.ts
+type 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;
+};
+type RadioCardProps = {} & Omit<RadioGroup$1.RadioGroupItemProps, 'asChild' | keyof RadioCardOptions> & RadioCardOptions;
+//#endregion
+//#region src/components/radio-group/radio-button/radio-button.d.ts
+type 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;
+};
+type RadioButtonProps = {} & Omit<RadioGroup$1.RadioGroupItemProps, 'asChild' | keyof RadioButtonOptions> & RadioButtonOptions;
+//#endregion
+//#region src/components/radio-group/radio-group-label.d.ts
+type RadioGroupLabelProps = HTMLQdsProps<'span'>;
+//#endregion
+//#region src/components/radio-group/radio-group.d.ts
+type 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;
+};
+type RadioGroupProps = {} & Omit<RadioGroup$1.RadioGroupProps, 'asChild' | keyof RadioGroupOptions> & RadioGroupOptions;
+declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroup$1.RadioGroupProps, "asChild" | keyof RadioGroupOptions> & RadioGroupOptions & import("react").RefAttributes<HTMLDivElement>> & {
+  Card: import("react").ForwardRefExoticComponent<Omit<RadioGroup$1.RadioGroupItemProps, "asChild" | keyof {
     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<RadioGroup$1.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
-     */
+    helperText?: string;
     isRequired?: boolean;
-    /**
-     * If `true` it prevents the user from interacting with the radio item.
-     * @default false
-     */
     isDisabled?: boolean;
-}
-interface RadioButtonProps extends Omit<RadioGroup$1.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
-     */
+  } & import("react").RefAttributes<HTMLButtonElement>>;
+  Button: import("react").ForwardRefExoticComponent<Omit<RadioGroup$1.RadioGroupItemProps, "asChild" | keyof {
+    label: string;
+    isRequired?: boolean;
     isDisabled?: boolean;
-    /**
-     * If `true` the user must check a radio item before the owning form can be submitted.
-     * @default false
-     */
+  }> & {
+    label: string;
     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<RadioGroup$1.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;
-}
+  } & import("react").RefAttributes<HTMLButtonElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+//#region src/components/select/select-option.d.ts
+type 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 SelectOptionProps = {} & Omit<HTMLQdsProps<'option'>, OmittedProps$4> & SelectOptionOptions;
+//#endregion
+//#region src/components/select/select.d.ts
+type SelectOptions = {
+  /**
+   * 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;
+} & SelectBaseOptions;
 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 SelectProps = {} & Omit<HTMLQdsProps<'select'>, OmittedProps$3> & SelectOptions;
+declare const Select: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, OmittedProps$3> & {
+  /**
+   * 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;
+} & SelectBaseOptions & import("react").RefAttributes<HTMLSelectElement>> & {
+  Option: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "ref">, "label" | "disabled"> & {
+    isDisabled?: boolean;
+  } & import("react").RefAttributes<HTMLOptionElement>>;
 };
-
+//#endregion
+//#region src/components/spacer/spacer.d.ts
 declare const X_SIZE_CLASSES: ResponsiveClassMap<"0x" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "8x" | "10x" | "12x" | "14x" | "16x" | "20x" | "24x">;
 declare const Y_SIZE_CLASSES: ResponsiveClassMap<"0x" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "8x" | "10x" | "12x" | "14x" | "16x" | "20x" | "24x">;
 type Spacing = ResponsiveSize<typeof X_SIZE_CLASSES> & ResponsiveSize<typeof Y_SIZE_CLASSES>;
-interface SpacerOptions {
-    axis?: 'x' | 'y';
-    size: ResponsiveProp<Spacing>;
-}
+type SpacerOptions = {
+  axis?: 'x' | 'y';
+  size: ResponsiveProp<Spacing>;
+};
 /**
  * @deprecated
  */
-interface SpacerProps extends HTMLQdsProps<'span'>, SpacerOptions {
-}
+type SpacerProps = {} & HTMLQdsProps<'span'> & SpacerOptions;
 /**
  * @deprecated Use Tailwind CSS instead.
  */
-declare const Spacer: react.ForwardRefExoticComponent<SpacerProps & react.RefAttributes<HTMLSpanElement>>;
-
-declare const DIRECTION_CLASSES: ResponsiveClassMap<"row" | "column" | "column-reverse" | "row-reverse">;
-declare const JUSTIFY_CONTENT_CLASSES: ResponsiveClassMap<"center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start">;
-declare const ALIGN_ITEMS_CLASSES: ResponsiveClassMap<"center" | "baseline" | "stretch" | "flex-end" | "flex-start">;
+declare const Spacer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SpacerOptions & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+//#region src/components/stack/stack.d.ts
+declare const DIRECTION_CLASSES: ResponsiveClassMap<"row" | "row-reverse" | "column" | "column-reverse">;
+declare const JUSTIFY_CONTENT_CLASSES: ResponsiveClassMap<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly">;
+declare const ALIGN_ITEMS_CLASSES: ResponsiveClassMap<"center" | "baseline" | "flex-start" | "flex-end" | "stretch">;
 declare const GAP_CLASSES: ResponsiveClassMap<"0x" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "8x" | "10x" | "12x" | "14x" | "16x" | "20x" | "24x">;
 declare const WRAP_CLASSES: {
-    readonly wrap: "flex-wrap";
-    readonly nowrap: "flex-nowrap";
-    readonly 'wrap-reverse': "flex-wrap-reverse";
+  readonly wrap: "flex-wrap";
+  readonly nowrap: "flex-nowrap";
+  readonly 'wrap-reverse': "flex-wrap-reverse";
 };
 type FlexDirection = ResponsiveSize<typeof DIRECTION_CLASSES>;
 type JustifyContent = ResponsiveSize<typeof JUSTIFY_CONTENT_CLASSES>;
 type AlignItems = ResponsiveSize<typeof ALIGN_ITEMS_CLASSES>;
 type GapProp = ResponsiveSize<typeof GAP_CLASSES>;
 type FlexWrap = keyof typeof WRAP_CLASSES;
-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 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>;
 /**
  * @deprecated
@@ -1046,541 +1315,563 @@ type StackProps = PropsOf<StackComponent>;
  * @deprecated Use Tailwind CSS instead.
  */
 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<Switch$1.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;
-}
+//#endregion
+//#region src/components/switch/switch.d.ts
+type 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;
+};
+type SwitchProps = {} & Omit<Switch$1.SwitchProps, 'asChild' | keyof SwitchOptions> & SwitchOptions;
+declare const Switch: import("react").ForwardRefExoticComponent<Omit<Switch$1.SwitchProps, "asChild" | keyof SwitchOptions> & SwitchOptions & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/textarea/textarea.d.ts
+type TextareaOptions = {
+  /**
+   * 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;
+} & TextareaBaseOptions;
 type OmittedProps$2 = 'children' | 'readOnly' | 'size';
-interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$2>, TextareaOptions {
-}
-declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
-
+type TextareaProps = {} & Omit<HTMLQdsProps<'textarea'>, OmittedProps$2> & TextareaOptions;
+declare const Textarea: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, OmittedProps$2> & {
+  /**
+   * 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;
+} & TextareaBaseOptions & import("react").RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+//#region src/components/toast/toast.d.ts
 declare const VARIANT_CLASSES: {
-    readonly neutral: "bg-black text-white";
-    readonly error: "bg-negative text-white";
+  readonly neutral: "bg-black text-white";
+  readonly error: "bg-negative text-white";
 };
 type ToastVariant = keyof typeof VARIANT_CLASSES;
-interface ToastOptions$1 {
-    text: string;
-    variant?: ToastVariant;
-}
+type ToastOptions$1 = {
+  text: string;
+  variant?: ToastVariant;
+};
 type OmittedProps$1 = 'children';
-interface ToastProps extends Omit<HTMLQdsProps<'div'>, OmittedProps$1>, ToastOptions$1 {
-}
+type ToastProps = {} & Omit<HTMLQdsProps<'div'>, OmittedProps$1> & ToastOptions$1;
 /**
  * We style a separate div as a child for Radix Toast.Root in order to meet the QDS accessibility requirements & animate it
  * Radix uses <ol> and <li> elements for Toast elements in combination with role="status", which is not allowed according to a11y standards
  * @see https://github.com/radix-ui/primitives/issues/1750
  */
-declare function Toast(props: ToastProps & Toast$1.ToastProps): react_jsx_runtime.JSX.Element;
-
+declare function Toast(props: ToastProps & Toast$1.ToastProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/components/toast/toast-store.d.ts
 type Id = number | string;
-interface ToastOptions {
-    /**
-     * 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;
-}
+type ToastOptions = {
+  /**
+   * 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) => Id) & {
-    error: (text: string, options?: ToastOptions) => Id;
-    remove: (id: Id) => void;
-    removeAll: () => void;
+  error: (text: string, options?: ToastOptions) => Id;
+  remove: (id: Id) => void;
+  removeAll: () => void;
 };
-
+//#endregion
+//#region src/styles/css-utils.d.ts
 /**
  * @deprecated Use Tailwind spacing utilities instead, eg. `p-4` for 16px padding.
  * If you need a raw value, reference the CSS variable directly: `var(--spacing-4)`.
  */
 declare const pxToRem: (px: number) => string;
-
+//#endregion
+//#region src/theme/theme.d.ts
 /**
  * @deprecated The `theme` object is deprecated and will be removed in a future version.
  * Use Tailwind CSS instead.
  */
 declare const theme: {
-    /**
-     * @deprecated Using QDS with `@emotion` is deprecated and will be removed in a future version.
-     * Use Tailwind CSS instead.
-     */
-    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)";
+  /**
+   * @deprecated Using QDS with `@emotion` is deprecated and will be removed in a future version.
+   * Use Tailwind CSS instead.
+   */
+  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;
     };
-    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;
+    icon: {
+      default: string;
+      strong: string;
+      subtle: string;
+      disabled: string;
+      negative: string;
+      warning: string;
+      positive: string;
+      onBrandPrimary: string;
+      onBrandSecondary: string;
+      onBrandTertiary: string;
     };
-    breakpoints: {
-        readonly base: 0;
-        readonly sm: 480;
-        readonly md: 768;
-        readonly lg: 1024;
-        readonly xl: 1280;
-        readonly '2xl': 1536;
+    border: {
+      default: string;
+      defaultHover: string;
+      defaultSelected: string;
+      strong: string;
+      subtle: string;
+      negative: string;
+      warning: string;
+      positive: string;
     };
-    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;
+  };
+  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;
+      };
     };
-    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;
-        };
+    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;
+      };
     };
-    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;
+    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;
+      };
     };
-    radii: {
-        none: string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        full: string;
+    label: {
+      md: {
+        fontFamily: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+      };
+      sm: {
+        fontFamily: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+      };
     };
-    shadows: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+    button: {
+      md: {
+        fontFamily: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+      };
+      sm: {
+        fontFamily: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: 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;
-            };
-        };
+    caption: {
+      md: {
+        fontFamily: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+      };
+      sm: {
+        fontFamily: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+      };
     };
+  };
 };
 /**
  * @deprecated The `Theme` type is deprecated and will be removed in a future version.
  */
 type Theme = typeof theme;
-
-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;
-}
+//#endregion
+//#region src/hooks/use-breakpoint.d.ts
+type 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.
  *
@@ -1590,12 +1881,13 @@ interface UseBreakpointOptions {
  * `usehooks-ts`.
  */
 declare function useBreakpoint(params?: UseBreakpointOptions): {
-    currentBreakpoint: "base" | "sm" | "md" | "lg" | "xl" | "2xl";
+  currentBreakpoint: "2xl" | "base" | "sm" | "md" | "lg" | "xl";
 };
-
+//#endregion
+//#region src/hooks/use-breakpoint-value.d.ts
 type Breakpoints = Theme['breakpoints'];
 type BreakpointsConfig<T> = PartialRecord<keyof Breakpoints, T> & {
-    base: T;
+  base: T;
 };
 type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
 /**
@@ -1610,35 +1902,36 @@ type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
  * const width = useBreakpointValue({ base: '150px', md: '250px' })
  */
 declare function useBreakpointValue<T>(values: UseBreakpointValueProps<T>, options?: UseBreakpointOptions): T;
-
+//#endregion
+//#region src/hooks/use-form-field.d.ts
 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 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;
 /**
@@ -1648,21 +1941,23 @@ type UseFormFieldProps<T extends FormFieldElement> = Omit<HTMLQdsProps<T>, Omitt
  * 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">;
+  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">;
 };
-
+//#endregion
+//#region src/hooks/use-stable-id.d.ts
 /**
  * Returns a stable ID that is unique to the component instance.
  */
 declare function useStableId(fixedId?: string | null): string;
-
+//#endregion
+//#region src/hooks/use-safe-layout-effect.d.ts
 /**
  * On the server, React emits a warning when calling `useLayoutEffect`.
  * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
@@ -1671,5 +1966,6 @@ declare function useStableId(fixedId?: string | null): string;
  * 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, BookmarkFilledIcon, 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, Toast, TrashIcon, type UseBreakpointOptions, type UseBreakpointValueProps, type UseFormFieldProps, UserIcon, XCircleIcon, XIcon, createIcon, createLucideIcon, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useSafeLayoutEffect, useStableId };
+//#endregion
+export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkFilledIcon, BookmarkIcon, Button, type ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, DisplayText, DisplayTextProps, Divider, DividerProps, DropdownMenu, type DropdownMenuContentProps, type DropdownMenuDividerProps, type DropdownMenuItemProps, type DropdownMenuRootProps, type DropdownMenuTriggerProps, type ForwardRefComponent, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, type IconProps, ImageIcon, InfoIcon, InputBase, InputBaseOptions, InputBaseProps, type IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, type OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, type PropsOf, QdsProvider, type RadioButtonProps, type RadioCardProps, RadioGroup, type RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, type SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, Switch, SwitchProps, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, Toast, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UserIcon, XCircleIcon, XIcon, createIcon, createLucideIcon, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useSafeLayoutEffect, useStableId };
+//# sourceMappingURL=index.d.ts.map