@qasa/qds-ui 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -8,10 +8,10 @@ import { LucideIcon } from 'lucide-react';
 
 type LanguageCode = 'en' | 'sv' | 'fi' | 'fr' | 'nb';
 
-interface QdsProviderProps {
+type QdsProviderProps = {
     children: ReactNode;
     locale: LanguageCode;
-}
+};
 declare function QdsProvider({ children, locale }: QdsProviderProps): react_jsx_runtime.JSX.Element;
 
 type LegitimateAny = any;
@@ -42,10 +42,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> {
+type ResponsiveClassMap<T extends string> = {
     readonly classes: Record<T, string>;
     readonly default: T;
-}
+};
 /**
  * Derives the size literal union from a class map.
  *
@@ -57,7 +57,7 @@ type ResponsiveSize<M> = M extends ResponsiveClassMap<infer T> ? T : never;
 
 declare const SIZE_CLASSES$7: ResponsiveClassMap<"sm" | "md" | "lg" | "xl" | "2xl" | "xs">;
 type AvatarSize = ResponsiveSize<typeof SIZE_CLASSES$7>;
-interface AvatarOptions {
+type AvatarOptions = {
     /**
      * Source url of the image to display. If not passed
      * it will display a fallback icon.
@@ -78,10 +78,9 @@ interface AvatarOptions {
      * defaults to the `name` prop.
      */
     imageAlt?: string;
-}
-interface AvatarProps extends HTMLQdsProps<'span'>, AvatarOptions {
-}
-declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+};
+type AvatarProps = {} & HTMLQdsProps<'span'> & AvatarOptions;
+declare const Avatar: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & AvatarOptions & react.RefAttributes<HTMLSpanElement>>;
 
 /**
  * This file is originally from `@radix-ui/react-polymorphic` before the package
@@ -101,7 +100,7 @@ type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : nev
 type ForwardRefExoticComponent<E, OwnProps> = react.ForwardRefExoticComponent<Merge<E extends react.ElementType ? react.ComponentPropsWithRef<E> : never, OwnProps & {
     as?: E;
 }>>;
-interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+type ForwardRefComponent<IntrinsicElementString, OwnProps = {}> = {
     /**
      * When `as` prop is passed, use this overload.
      * Merges original own props (without DOM props) and the inferred props
@@ -117,45 +116,17 @@ interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends For
     }> : As extends keyof react.JSX.IntrinsicElements ? Merge<react.JSX.IntrinsicElements[As], OwnProps & {
         as: As;
     }> : never): react.ReactElement | null;
-}
+} & ForwardRefExoticComponent<IntrinsicElementString, OwnProps>;
 /**
  * Infers the props of a React component
  */
 type PropsOf<E> = E extends react.ComponentType<infer P> ? P : never;
 
-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)]";
-};
-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 OmittedProps$9 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
-interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$9>, IconOptions {
-}
-
-interface CreateIconOptions {
+/**
+ * This function is heavily inspired by the `createIcon` function from
+ * Chakra UI (https://chakra-ui.com/).
+ */
+type CreateIconOptions = {
     /**
      * The `svg`'s `viewBox` attribute
      */
@@ -185,62 +156,243 @@ interface CreateIconOptions {
      * 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 createIcon: (options: CreateIconOptions) => react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+
+declare const createLucideIcon: (Icon: LucideIcon) => react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
 
-declare const createLucideIcon: (Icon: LucideIcon) => react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const AlertCircleIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const AlertTriangleIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ArrowDownIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ArrowLeftIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ArrowRightIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ArrowUpIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const BellIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const BellOffIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const BookmarkFilledIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const BookmarkIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const CalendarIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const CameraIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const CheckCircleIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const CheckIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ChevronDownIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ChevronLeftIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ChevronRightIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ChevronUpIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const GlobeIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const HeartFilledIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const HeartIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const HelpCircleIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const HistoryIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const HomeIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ImageIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const InfoIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ListIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ListFilterIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const LogOutIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const MapIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const MapPinIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const MenuIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const MessageCircleIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const MinusIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const MoreHorizontalIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const MoreVerticalIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const PenIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const PlusIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const SearchIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const SettingsIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const ShareIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const SlidersIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const StarFilledIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const StarIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const TrashIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const UserIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const XCircleIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & react.RefAttributes<SVGSVGElement>>;
+declare const XIcon: react.ForwardRefExoticComponent<Omit<react.SVGAttributes<SVGElement>, "color" | "onClick" | "width" | "height" | "fontSize"> & {
+    size?: 12 | 16 | 20 | 24 | 32;
+    color?: "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary" | "currentColor";
+} & 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>>;
+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)]";
+};
+type IconSize = 12 | 16 | 20 | 24 | 32;
+type IconColor = keyof typeof ICON_COLOR_CLASSES | 'currentColor';
+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';
+type IconProps = {} & Omit<SVGAttributes<SVGElement>, OmittedProps$9> & IconOptions;
 
 declare const SIZE_CLASSES$6: ResponsiveClassMap<"sm" | "md" | "lg" | "xl" | "xs">;
 declare const buttonVariants: (props?: ({
@@ -248,7 +400,7 @@ declare const buttonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonSize = ResponsiveSize<typeof SIZE_CLASSES$6>;
 type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
-interface ButtonOptions {
+type ButtonOptions = {
     /**
      * Sets the size of the button
      * @default 'md'
@@ -287,7 +439,7 @@ interface ButtonOptions {
      * @default 'button'
      */
     type?: 'button' | 'submit' | 'reset';
-}
+};
 type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
 type ButtonProps = PropsOf<PolymorphicButton>;
 declare const Button: PolymorphicButton;
@@ -308,7 +460,7 @@ declare const TEXT_WRAP_CLASSES: {
 type DisplaySize = ResponsiveSize<typeof SIZE_CLASSES$5>;
 type DisplayTextAlign = keyof typeof TEXT_ALIGN_CLASSES$2;
 type DisplayTextWrap = keyof typeof TEXT_WRAP_CLASSES;
-interface DisplayTextOptions {
+type DisplayTextOptions = {
     /**
      * Sets the visual size of the display text.
      * To override the rendered tag, use the `as` prop.
@@ -330,7 +482,7 @@ interface DisplayTextOptions {
      * @default 'pretty'
      */
     textWrap?: DisplayTextWrap;
-}
+};
 type DisplayTextComponent = ForwardRefComponent<'h2', DisplayTextOptions>;
 /**
  * @deprecated
@@ -341,7 +493,7 @@ type DisplayTextProps = PropsOf<DisplayTextComponent>;
  */
 declare const DisplayText: DisplayTextComponent;
 
-interface CheckboxOptions {
+type CheckboxOptions = {
     /**
      * The label for the checkbox. Accepts a string, or a React component for rendering links within the label.
      *
@@ -413,24 +565,23 @@ interface CheckboxOptions {
      * 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 {
+type 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>>;
+};
+type DividerProps = {} & HTMLQdsProps<'span'> & DividerOptions;
+declare const Divider: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & DividerOptions & react.RefAttributes<HTMLSpanElement>>;
 
 type PrimitiveContentProps = DropdownMenu$1.DropdownMenuContentProps;
-interface DropdownMenuContentOptions {
+type DropdownMenuContentOptions = {
     /**
      * Event handler called when focus moves to the trigger after closing.
      * It can be prevented by calling `event.preventDefault`.
@@ -488,13 +639,12 @@ interface DropdownMenuContentOptions {
      * @default false
      */
     hideWhenDetached?: PrimitiveContentProps['hideWhenDetached'];
-}
-interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
-}
+};
+type DropdownMenuContentProps = {} & HTMLQdsProps<'div'> & DropdownMenuContentOptions;
 
 type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
 
-interface DropdownMenuItemOptions {
+type DropdownMenuItemOptions = {
     /**
      * If `true`, the item will be disabled
      */
@@ -514,14 +664,13 @@ interface DropdownMenuItemOptions {
      * 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 {
-}
+};
+type DropdownMenuItemProps = {} & Omit<DropdownMenu$1.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions> & DropdownMenuItemOptions;
 
 type DropdownTriggerComponent = ForwardRefComponent<'button'>;
 type DropdownMenuTriggerProps = PropsOf<DropdownTriggerComponent>;
 
-interface DropdownMenuRootProps {
+type DropdownMenuRootProps = {
     children: ReactNode;
     /**
      * If `true` the dropdown menu will be open
@@ -536,12 +685,49 @@ interface DropdownMenuRootProps {
      * Callback invoked open state changes
      */
     onOpenChange?: (isOpen: boolean) => void;
-}
+};
 declare function DropdownMenuRoot(props: DropdownMenuRootProps): react_jsx_runtime.JSX.Element;
 declare const DropdownMenu: typeof DropdownMenuRoot & {
-    Trigger: ForwardRefComponent<"button", {}>;
-    Content: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
-    Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+    Trigger: (<As = "button">(props: As extends "" ? {
+        as: keyof React.JSX.IntrinsicElements;
+    } : As extends react.ComponentType<infer P> ? Merge<P, {
+        as: As;
+    }> : As extends keyof react.JSX.IntrinsicElements ? Merge<react.JSX.IntrinsicElements[As], {
+        as: As;
+    }> : never) => React.ReactElement | null) & react.ForwardRefExoticComponent<Merge<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+        as?: "button" | undefined;
+    }>>;
+    Content: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<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?: "bottom" | "left" | "right" | "top" | undefined;
+        sideOffset?: number | undefined;
+        align?: "center" | "end" | "start" | undefined;
+        collisionBoundary?: (Element | null) | (Element | null)[] | undefined;
+        hideWhenDetached?: boolean | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuItemProps, "asChild" | keyof {
+        isDisabled?: boolean;
+        onSelect?: (event: Event) => void;
+        textValue?: string;
+        icon?: react.ElementType<IconProps>;
+    }> & {
+        isDisabled?: boolean;
+        onSelect?: (event: Event) => void;
+        textValue?: string;
+        icon?: react.ElementType<IconProps>;
+    } & react.RefAttributes<HTMLDivElement>>;
     Divider: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 };
 
@@ -566,7 +752,7 @@ declare const TEXT_ALIGN_CLASSES$1: {
 type HeadingSize = ResponsiveSize<typeof SIZE_CLASSES$4>;
 type HeadingColor = keyof typeof COLOR_CLASSES$2;
 type HeadingTextAlign = keyof typeof TEXT_ALIGN_CLASSES$1;
-interface HeadingOptions {
+type HeadingOptions = {
     /**
      * Sets the visual size of the heading.
      * To override the rendered tag, use the `as` prop.
@@ -588,7 +774,7 @@ interface HeadingOptions {
      * @default 'left'
      */
     textAlign?: HeadingTextAlign;
-}
+};
 type HeadingComponent = ForwardRefComponent<'h2', HeadingOptions>;
 /**
  * @deprecated
@@ -611,7 +797,7 @@ declare const iconButtonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type IconButtonSize = ResponsiveSize<typeof SIZE_CLASSES$3>;
 type IconButtonVariant = NonNullable<VariantProps<typeof iconButtonVariants>['variant']>;
-interface IconButtonOptions {
+type IconButtonOptions = {
     icon: ElementType<IconProps>;
     /**
      * A visually hidden label read by screen readers.
@@ -629,12 +815,12 @@ interface IconButtonOptions {
      * If `true` the button will be disabled
      */
     isDisabled?: boolean;
-}
+};
 type IconButtonComponent = ForwardRefComponent<'button', IconButtonOptions>;
 type IconButtonProps = PropsOf<IconButtonComponent>;
 declare const IconButton: IconButtonComponent;
 
-interface InputBaseOptions {
+type InputBaseOptions = {
     /**
      * If `true`, the input will be invalid
      */
@@ -647,13 +833,12 @@ interface InputBaseOptions {
      * 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>>;
+type InputBaseProps = {} & Omit<HTMLQdsProps<'input'>, OmittedProps$8> & InputBaseOptions;
+declare const InputBase: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, OmittedProps$8> & InputBaseOptions & react.RefAttributes<HTMLInputElement>>;
 
-interface TextFieldOptions extends InputBaseOptions {
+type TextFieldOptions = {
     /**
      * The label for the input
      */
@@ -676,11 +861,33 @@ interface TextFieldOptions extends InputBaseOptions {
      * 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: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<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 & react.RefAttributes<HTMLInputElement>>;
 
 declare const SIZE_CLASSES$2: ResponsiveClassMap<"sm" | "md">;
 declare const COLOR_CLASSES$1: {
@@ -697,7 +904,7 @@ declare const COLOR_CLASSES$1: {
 };
 type LabelSize = ResponsiveSize<typeof SIZE_CLASSES$2>;
 type LabelColor = keyof typeof COLOR_CLASSES$1;
-interface LabelOptions {
+type LabelOptions = {
     /**
      * Size of the label
      */
@@ -707,12 +914,12 @@ interface LabelOptions {
      * @default 'default'
      */
     color?: LabelColor;
-}
+};
 type LabelComponent = ForwardRefComponent<'label', LabelOptions>;
 type LabelProps = PropsOf<LabelComponent>;
 declare const Label: LabelComponent;
 
-interface LinkOptions {
+type LinkOptions = {
     /**
      * The URL to link to.
      */
@@ -721,19 +928,18 @@ interface LinkOptions {
      * If `true`, the link will open in new tab
      */
     isExternal?: boolean;
-}
+};
 type LinkComponent = ForwardRefComponent<'a', LinkOptions>;
 type LinkProps = PropsOf<LinkComponent>;
 declare const Link: LinkComponent;
 
 declare const SIZE_CLASSES$1: ResponsiveClassMap<"sm" | "md">;
 type LoadingDotsSize = ResponsiveSize<typeof SIZE_CLASSES$1>;
-interface LoadingDotsOptions {
+type LoadingDotsOptions = {
     size?: ResponsiveProp<LoadingDotsSize>;
-}
-interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
-}
-declare const LoadingDots: react.ForwardRefExoticComponent<LoadingDotsProps & react.RefAttributes<HTMLSpanElement>>;
+};
+type LoadingDotsProps = {} & HTMLQdsProps<'span'> & LoadingDotsOptions;
+declare const LoadingDots: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & LoadingDotsOptions & react.RefAttributes<HTMLSpanElement>>;
 
 declare const SIZE_CLASSES: ResponsiveClassMap<"sm" | "md" | "lg" | "xl" | "xs">;
 declare const COLOR_CLASSES: {
@@ -756,7 +962,7 @@ declare const TEXT_ALIGN_CLASSES: {
 type ParagraphSize = ResponsiveSize<typeof SIZE_CLASSES>;
 type ParagraphColor = keyof typeof COLOR_CLASSES;
 type ParagraphTextAlign = keyof typeof TEXT_ALIGN_CLASSES;
-interface ParagraphOptions {
+type ParagraphOptions = {
     /**
      * Sets the visual size of the text
      * @default 'md'
@@ -776,7 +982,7 @@ interface ParagraphOptions {
      * @default 'left'
      */
     textAlign?: ParagraphTextAlign;
-}
+};
 type ParagraphComponent = ForwardRefComponent<'p', ParagraphOptions>;
 /**
  * @deprecated
@@ -787,7 +993,7 @@ type ParagraphProps = PropsOf<ParagraphComponent>;
  */
 declare const Paragraph: ParagraphComponent;
 
-interface SelectBaseOptions {
+type SelectBaseOptions = {
     /**
      * The placeholder for the select. We render an `<option/>` element that has
      * empty value.
@@ -809,14 +1015,12 @@ interface SelectBaseOptions {
      * 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: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, OmittedProps$6> & SelectBaseOptions & react.RefAttributes<HTMLSelectElement>>;
 
 type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
-interface TextareaBaseOptions {
+type TextareaBaseOptions = {
     /**
      * If `true`, the textarea will be invalid
      */
@@ -842,13 +1046,12 @@ interface TextareaBaseOptions {
      * @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>>;
+type TextareaBaseProps = {} & Omit<HTMLQdsProps<'textarea'>, OmittedProps$5> & TextareaBaseOptions;
+declare const TextareaBase: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, OmittedProps$5> & TextareaBaseOptions & react.RefAttributes<HTMLTextAreaElement>>;
 
-interface RadioCardOptions {
+type RadioCardOptions = {
     /**
      * The label for the radio card
      */
@@ -867,11 +1070,10 @@ interface RadioCardOptions {
      * @default false
      */
     isDisabled?: boolean;
-}
-interface RadioCardProps extends Omit<RadioGroup$1.RadioGroupItemProps, 'asChild' | keyof RadioCardOptions>, RadioCardOptions {
-}
+};
+type RadioCardProps = {} & Omit<RadioGroup$1.RadioGroupItemProps, 'asChild' | keyof RadioCardOptions> & RadioCardOptions;
 
-interface RadioButtonOptions {
+type RadioButtonOptions = {
     /**
      * The label for the radio button
      */
@@ -886,13 +1088,12 @@ interface RadioButtonOptions {
      * @default false
      */
     isDisabled?: boolean;
-}
-interface RadioButtonProps extends Omit<RadioGroup$1.RadioGroupItemProps, 'asChild' | keyof RadioButtonOptions>, RadioButtonOptions {
-}
+};
+type RadioButtonProps = {} & Omit<RadioGroup$1.RadioGroupItemProps, 'asChild' | keyof RadioButtonOptions> & RadioButtonOptions;
 
 type RadioGroupLabelProps = HTMLQdsProps<'span'>;
 
-interface RadioGroupOptions {
+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.
@@ -930,23 +1131,39 @@ interface RadioGroupOptions {
      * 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>>;
+};
+type RadioGroupProps = {} & Omit<RadioGroup$1.RadioGroupProps, 'asChild' | keyof RadioGroupOptions> & RadioGroupOptions;
+declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroup$1.RadioGroupProps, "asChild" | keyof RadioGroupOptions> & RadioGroupOptions & react.RefAttributes<HTMLDivElement>> & {
+    Card: react.ForwardRefExoticComponent<Omit<RadioGroup$1.RadioGroupItemProps, "asChild" | keyof {
+        label: string;
+        helperText?: string;
+        isRequired?: boolean;
+        isDisabled?: boolean;
+    }> & {
+        label: string;
+        helperText?: string;
+        isRequired?: boolean;
+        isDisabled?: boolean;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    Button: react.ForwardRefExoticComponent<Omit<RadioGroup$1.RadioGroupItemProps, "asChild" | keyof {
+        label: string;
+        isRequired?: boolean;
+        isDisabled?: boolean;
+    }> & {
+        label: string;
+        isRequired?: boolean;
+        isDisabled?: boolean;
+    } & react.RefAttributes<HTMLButtonElement>>;
     Label: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
 };
 
-interface SelectOptionOptions {
+type SelectOptionOptions = {
     isDisabled?: boolean;
-}
+};
 type OmittedProps$4 = 'disabled' | 'label';
-interface SelectOptionProps extends Omit<HTMLQdsProps<'option'>, OmittedProps$4>, SelectOptionOptions {
-}
+type SelectOptionProps = {} & Omit<HTMLQdsProps<'option'>, OmittedProps$4> & SelectOptionOptions;
 
-interface SelectOptions extends SelectBaseOptions {
+type SelectOptions = {
     /**
      * The label for the select field
      */
@@ -964,30 +1181,48 @@ interface SelectOptions extends SelectBaseOptions {
      * 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: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<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 & react.RefAttributes<HTMLSelectElement>> & {
+    Option: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "ref">, "label" | "disabled"> & {
+        isDisabled?: boolean;
+    } & react.RefAttributes<HTMLOptionElement>>;
 };
 
 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 {
+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 Spacer: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SpacerOptions & 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">;
@@ -1003,7 +1238,7 @@ 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 {
+type StackOptions = {
     /**
      * The direction of the stack.
      * @default 'column'
@@ -1036,7 +1271,7 @@ interface StackOptions {
      *  Wrap them in a `div` or other element._
      */
     divider?: ReactNode;
-}
+};
 type StackComponent = ForwardRefComponent<'div', StackOptions>;
 /**
  * @deprecated
@@ -1047,7 +1282,7 @@ type StackProps = PropsOf<StackComponent>;
  */
 declare const Stack: StackComponent;
 
-interface SwitchOptions {
+type SwitchOptions = {
     /**
      * The label for the switch
      */
@@ -1075,12 +1310,11 @@ interface SwitchOptions {
      */
     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>>;
+};
+type SwitchProps = {} & Omit<Switch$1.SwitchProps, 'asChild' | keyof SwitchOptions> & SwitchOptions;
+declare const Switch: react.ForwardRefExoticComponent<Omit<Switch$1.SwitchProps, "asChild" | keyof SwitchOptions> & SwitchOptions & react.RefAttributes<HTMLButtonElement>>;
 
-interface TextareaOptions extends TextareaBaseOptions {
+type TextareaOptions = {
     /**
      * The label for the textarea field
      */
@@ -1098,24 +1332,40 @@ interface TextareaOptions extends TextareaBaseOptions {
      * 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: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<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 & react.RefAttributes<HTMLTextAreaElement>>;
 
 declare const VARIANT_CLASSES: {
     readonly neutral: "bg-black text-white";
     readonly error: "bg-negative text-white";
 };
 type ToastVariant = keyof typeof VARIANT_CLASSES;
-interface ToastOptions$1 {
+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
@@ -1124,14 +1374,14 @@ interface ToastProps extends Omit<HTMLQdsProps<'div'>, OmittedProps$1>, ToastOpt
 declare function Toast(props: ToastProps & Toast$1.ToastProps): react_jsx_runtime.JSX.Element;
 
 type Id = number | string;
-interface ToastOptions {
+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;
@@ -1572,7 +1822,7 @@ declare const theme: {
  */
 type Theme = typeof theme;
 
-interface UseBreakpointOptions {
+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.
@@ -1580,7 +1830,7 @@ interface UseBreakpointOptions {
      * @default false
      */
     ssr?: boolean;
-}
+};
 /**
  * Hook for getting the current breakpoint.
  *
@@ -1613,7 +1863,7 @@ declare function useBreakpointValue<T>(values: UseBreakpointValueProps<T>, optio
 
 type FormFieldElement = 'input' | 'select' | 'textarea';
 type PropGetter<T extends ElementType = LegitimateAny> = (props?: HTMLQdsProps<T>) => Record<string, unknown>;
-interface FormFieldOptions {
+type FormFieldOptions = {
     /**
      * The label for the form field
      */
@@ -1638,7 +1888,7 @@ interface FormFieldOptions {
      * 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;
 /**