@qasa/qds-ui 0.10.0-next.8 → 0.10.0

package/dist/index.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, useLayoutEffect } from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, ReactElement, useLayoutEffect } from 'react';
 import { Options } from '@emotion/cache';
 import * as _emotion_react from '@emotion/react';
 import { CSSObject } from '@emotion/react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
 import * as _emotion_styled from '@emotion/styled';
 import { LucideIcon } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as RadixSwitch from '@radix-ui/react-switch';
 
 declare const theme: {
     mediaQueries: {
@@ -209,6 +212,7 @@ declare const theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -408,21 +412,21 @@ declare const theme: {
         };
     };
 };
-declare type Theme = typeof theme;
+type Theme = typeof theme;
 
-declare type LegitimateAny = any;
-declare type PartialRecord<K extends string | number | symbol, T> = Partial<Record<K, T>>;
-declare type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
-declare type HTMLQdsProps<T extends ElementType> = ComponentPropsWithoutRef<T>;
+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>;
 
-declare type DeepPartial<T> = {
+type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
 interface TypographyOverride {
     fontFamily?: string;
     fontWeight?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
 }
-declare type TypographyOverrides = PartialRecord<keyof Theme['typography'], TypographyOverride>;
+type TypographyOverrides = PartialRecord<keyof Theme['typography'], TypographyOverride>;
 interface ThemeOverrides {
     colors?: DeepPartial<Theme['colors']>;
     typography?: TypographyOverrides;
@@ -816,6 +820,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -828,7 +833,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
 };
 
 declare const SUPPORTED_LANGUAGE_CODES: readonly ["en", "sv", "fi", "fr"];
-declare type LanguageCode = typeof SUPPORTED_LANGUAGE_CODES[number];
+type LanguageCode = (typeof SUPPORTED_LANGUAGE_CODES)[number];
 
 interface QdsProviderProps {
     children: ReactNode;
@@ -836,7 +841,13 @@ interface QdsProviderProps {
     cacheOptions?: Partial<Options>;
     locale: LanguageCode;
 }
-declare function QdsProvider({ children, themeOverrides, cacheOptions, locale }: QdsProviderProps): JSX.Element;
+declare function QdsProvider({ children, themeOverrides, cacheOptions, locale }: QdsProviderProps): react_jsx_runtime.JSX.Element;
+
+type Breakpoints$1 = Theme['breakpoints'];
+type BreakpointsConfig$1<T> = PartialRecord<keyof Breakpoints$1, T> & {
+    base: T;
+};
+type ResponsiveProp<T> = T | BreakpointsConfig$1<T>;
 
 declare const SIZE_MAP: {
     xs: number;
@@ -846,7 +857,7 @@ declare const SIZE_MAP: {
     xl: number;
     '2xl': number;
 };
-declare type AvatarSize = keyof typeof SIZE_MAP;
+type AvatarSize = keyof typeof SIZE_MAP;
 interface AvatarOptions {
     /**
      * Source url of the image to display. If not passed
@@ -861,7 +872,7 @@ interface AvatarOptions {
      * Size of the avatar
      * @default 'md'
      */
-    size?: AvatarSize;
+    size?: ResponsiveProp<AvatarSize>;
 }
 interface AvatarProps extends HTMLQdsProps<'span'>, AvatarOptions {
 }
@@ -877,12 +888,12 @@ declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAtt
 /**
  * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
  */
-declare type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
+type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
 /**
  * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
  */
-declare type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
-declare type ForwardRefExoticComponent<E, OwnProps> = react.ForwardRefExoticComponent<Merge<E extends react.ElementType ? react.ComponentPropsWithRef<E> : never, OwnProps & {
+type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
+type ForwardRefExoticComponent<E, OwnProps> = react.ForwardRefExoticComponent<Merge<E extends react.ElementType ? react.ComponentPropsWithRef<E> : never, OwnProps & {
     as?: E;
 }>>;
 interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
@@ -905,10 +916,10 @@ interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends For
 /**
  * Infers the props of a React component
  */
-declare type PropsOf<E> = E extends react.ComponentType<infer P> ? P : never;
+type PropsOf<E> = E extends react.ComponentType<infer P> ? P : never;
 
-declare type IconSize = 16 | 20 | 24 | 32;
-declare type IconColor = keyof Theme['colors']['icon'] | 'currentColor';
+type IconSize = 16 | 20 | 24 | 32;
+type IconColor = keyof Theme['colors']['icon'] | 'currentColor';
 interface IconOptions {
     /**
      * The size of the icon.
@@ -923,7 +934,7 @@ interface IconOptions {
      */
     color?: IconColor;
 }
-declare type OmittedProps$8 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
+type OmittedProps$8 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
 interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$8>, IconOptions {
 }
 
@@ -1015,10 +1026,10 @@ declare const XIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttrib
 /**
  * Adds some global opinionated styles.
  */
-declare function GlobalStyles(): JSX.Element;
+declare function GlobalStyles(): react_jsx_runtime.JSX.Element;
 
-declare type NamedStyles = Record<string, CSSObject>;
-declare type StyleInterpolation<T> = (theme: Theme) => T;
+type NamedStyles = Record<string, CSSObject>;
+type StyleInterpolation<T> = (theme: Theme) => T;
 /**
  * Creates a collection of named style rules.
  */
@@ -1027,7 +1038,7 @@ declare function createStyleVariants<T extends NamedStyles>(styles: StyleInterpo
  * Create a style object. Useful for creating styles that depend on the theme.
  */
 declare function createStyle<T extends CSSObject>(styles: StyleInterpolation<T>): (theme: Theme) => T;
-declare type VariantProps<T extends ReturnType<typeof createStyle | typeof createStyleVariants>> = keyof ReturnType<T>;
+type VariantProps<T extends ReturnType<typeof createStyle | typeof createStyleVariants>> = keyof ReturnType<T>;
 /**
  * Converts css `px` unit to `rem`.
  * Assumes the root font size is 16px.
@@ -1234,6 +1245,7 @@ declare const getFormFieldBaseStyles: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -1679,6 +1691,7 @@ declare const getSizeStyles$4: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -1929,7 +1942,7 @@ declare const getSizeStyles$4: (theme: {
         paddingRight: string;
     };
 };
-declare type ButtonSize = VariantProps<typeof getSizeStyles$4>;
+type ButtonSize = VariantProps<typeof getSizeStyles$4>;
 declare const getVariantStyles$1: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -2130,6 +2143,7 @@ declare const getVariantStyles$1: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -2372,14 +2386,14 @@ declare const getVariantStyles$1: (theme: {
         };
     };
 };
-declare type ButtonVariant = VariantProps<typeof getVariantStyles$1>;
+type ButtonVariant = VariantProps<typeof getVariantStyles$1>;
 
 interface ButtonOptions {
     /**
      * Sets the size of the button
      * @default 'md'
      */
-    size?: ButtonSize;
+    size?: ResponsiveProp<ButtonSize>;
     /**
      * Sets the style variant of the button
      * @default 'secondary'
@@ -2415,10 +2429,113 @@ interface ButtonOptions {
     type?: 'button' | 'submit' | 'reset';
 }
 
-declare type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
-declare type ButtonProps = PropsOf<PolymorphicButton>;
+type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
+type ButtonProps = PropsOf<PolymorphicButton>;
 declare const Button: PolymorphicButton;
 
+type DisplaySize = keyof Theme['typography']['display'];
+type DisplayTextAlign = 'left' | 'center' | 'right';
+type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
+interface DisplayTextOptions {
+    /**
+     * Sets the visual size of the display text.
+     * To override the rendered tag, use the `as` prop.
+     *
+     * @default 'md'
+     */
+    size?: ResponsiveProp<DisplaySize>;
+    /**
+     * Sets the text alignment
+     * @default 'left'
+     */
+    textAlign?: DisplayTextAlign;
+    /**
+     * Sets the text wrapping
+     * @default 'pretty'
+     * Read more on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap)
+     */
+    textWrap?: DisplayTextWrap;
+}
+type DisplayTextComponent = ForwardRefComponent<'h2', DisplayTextOptions>;
+type DisplayTextProps = PropsOf<DisplayTextComponent>;
+declare const DisplayText: DisplayTextComponent;
+
+interface CheckboxOptions {
+    /**
+     * The label for the checkbox. Accepts a string, or a React component for rendering links within the label.
+     *
+     * @example
+     * ```jsx
+     * <Checkbox label="I agree to the terms and conditions" />
+     * ```
+     *
+     * @example
+     * ```jsx
+     * <Checkbox
+     *   label={
+     *    <>
+     *      I agree to <Link href="/terms">the terms and conditions</Link>
+     *    </>
+     *  }
+     * />
+     * ```
+     */
+    label: string | ReactElement<unknown>;
+    /**
+     * Text that provides additional guidance to the user
+     */
+    helperText?: string;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
+     */
+    isChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
+     */
+    checked?: boolean;
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * If `true` the checkbox will render in its invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * The error message to display if `isInvalid` is `true`
+     */
+    errorMessage?: string;
+    /**
+     * If `true` it prevents the user from interacting with the checkbox.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true` the user must check the checkbox before the owning form can be submitted.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * The value given as data when submitted with a `name`.
+     */
+    value?: string;
+}
+type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & react.RefAttributes<HTMLButtonElement>>;
+
 interface DividerOptions {
     /**
      * The orientation of the divider.
@@ -2431,7 +2548,7 @@ interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
-declare type PrimitiveContentProps = DropdownPrimitive.MenuContentProps;
+type PrimitiveContentProps = DropdownPrimitive.MenuContentProps;
 interface DropdownMenuContentOptions {
     /**
      * Event handler called when focus moves to the trigger after closing.
@@ -2494,7 +2611,7 @@ interface DropdownMenuContentOptions {
 interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
 }
 
-declare type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
+type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
 
 interface DropdownMenuItemOptions {
     /**
@@ -2520,8 +2637,8 @@ interface DropdownMenuItemOptions {
 interface DropdownMenuItemProps extends Omit<DropdownPrimitive.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
 }
 
-declare type DropdownTriggerComponent = ForwardRefComponent<'button'>;
-declare type DropdownMenuTriggerProps = PropsOf<DropdownTriggerComponent>;
+type DropdownTriggerComponent = ForwardRefComponent<'button'>;
+type DropdownMenuTriggerProps = PropsOf<DropdownTriggerComponent>;
 
 interface DropdownMenuRootProps {
     children: ReactNode;
@@ -2539,16 +2656,16 @@ interface DropdownMenuRootProps {
      */
     onOpenChange?: (isOpen: boolean) => void;
 }
-declare function DropdownMenuRoot(props: DropdownMenuRootProps): JSX.Element;
+declare function DropdownMenuRoot(props: DropdownMenuRootProps): react_jsx_runtime.JSX.Element;
 declare const DropdownMenu: typeof DropdownMenuRoot & {
     Trigger: ForwardRefComponent<"button", {}>;
     Content: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
     Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
-    Divider: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
+    Divider: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 };
 
-declare type HeadingSize = keyof Theme['typography']['title'];
-declare type HeadingColor = keyof Theme['colors']['text'];
+type HeadingSize = keyof Theme['typography']['title'];
+type HeadingColor = keyof Theme['colors']['text'];
 interface HeadingOptions {
     /**
      * Sets the visual size of the heading.
@@ -2556,7 +2673,7 @@ interface HeadingOptions {
      *
      * @default 'md'
      */
-    size?: HeadingSize;
+    size?: ResponsiveProp<HeadingSize>;
     /**
      * Sets the color of the heading
      * @default 'default'
@@ -2572,16 +2689,16 @@ interface HeadingOptions {
      */
     textAlign?: 'left' | 'center' | 'right';
 }
-declare type HeadingComponent = ForwardRefComponent<'h2', HeadingOptions>;
-declare type HeadingProps = PropsOf<HeadingComponent>;
+type HeadingComponent = ForwardRefComponent<'h2', HeadingOptions>;
+type HeadingProps = PropsOf<HeadingComponent>;
 declare const Heading: HeadingComponent;
 
-declare type HintBoxTitleProps = HTMLQdsProps<'span'>;
-declare type HintBoxProps = HTMLQdsProps<'aside'>;
-declare const HintBox: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof react.HTMLAttributes<HTMLElement>> & react.RefAttributes<HTMLElement>> & {
+type HintBoxTitleProps = HTMLQdsProps<'span'>;
+type HintBoxProps = HTMLQdsProps<'aside'>;
+declare const HintBox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>> & {
     Title: _emotion_styled.StyledComponent<{
         theme?: _emotion_react.Theme | undefined;
-        as?: react.ElementType<any> | undefined;
+        as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
     }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 };
 
@@ -2785,6 +2902,7 @@ declare const getSizeStyles$3: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -3197,6 +3315,7 @@ declare const getVariantStyles: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -3454,8 +3573,8 @@ declare const getVariantStyles: (theme: {
     };
 };
 
-declare type IconButtonSize = VariantProps<typeof getSizeStyles$3>;
-declare type IconButtonVariant = VariantProps<typeof getVariantStyles>;
+type IconButtonSize = VariantProps<typeof getSizeStyles$3>;
+type IconButtonVariant = VariantProps<typeof getVariantStyles>;
 interface IconButtonOptions {
     icon: ElementType<IconProps>;
     /**
@@ -3466,7 +3585,7 @@ interface IconButtonOptions {
     /**
      * Defines the size of the button
      */
-    size?: IconButtonSize;
+    size?: ResponsiveProp<IconButtonSize>;
     /**
      * Sets the style variant of the button
      */
@@ -3476,8 +3595,8 @@ interface IconButtonOptions {
      */
     isDisabled?: boolean;
 }
-declare type IconButtonComponent = ForwardRefComponent<'button', IconButtonOptions>;
-declare type IconButtonProps = PropsOf<IconButtonComponent>;
+type IconButtonComponent = ForwardRefComponent<'button', IconButtonOptions>;
+type IconButtonProps = PropsOf<IconButtonComponent>;
 declare const IconButton: IconButtonComponent;
 
 interface InputBaseOptions {
@@ -3494,7 +3613,7 @@ interface InputBaseOptions {
      */
     isRequired?: boolean;
 }
-declare type OmittedProps$7 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required';
+type OmittedProps$7 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required';
 interface InputBaseProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$7>, InputBaseOptions {
 }
 declare const InputBase: react.ForwardRefExoticComponent<InputBaseProps & react.RefAttributes<HTMLInputElement>>;
@@ -3523,7 +3642,7 @@ interface TextFieldOptions extends InputBaseOptions {
      */
     suffix?: string;
 }
-declare type OmittedProps$6 = 'children' | 'readOnly' | 'size';
+type OmittedProps$6 = 'children' | 'readOnly' | 'size';
 interface TextFieldProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$6>, TextFieldOptions {
 }
 declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
@@ -3622,9 +3741,6 @@ declare const getSizeStyles$2: (theme: {
             blue60: string;
             blue50: string;
             blue40: string;
-            /**
-             * Size of the label
-             */
             blue30: string;
             blue20: string;
             blue10: string;
@@ -3731,6 +3847,7 @@ declare const getSizeStyles$2: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -3769,7 +3886,10 @@ declare const getSizeStyles$2: (theme: {
             lg: {
                 fontFamily: string;
                 fontWeight: string;
-                fontSize: string;
+                fontSize: string; /**
+                 * Sets the color of the label
+                 * @default 'default'
+                 */
                 lineHeight: string;
                 letterSpacing: string;
                 fontFeatureSettings: string;
@@ -3945,21 +4065,21 @@ declare const getSizeStyles$2: (theme: {
         letterSpacing: string;
     };
 };
-declare type LabelSize = VariantProps<typeof getSizeStyles$2>;
-declare type LabelColor = keyof Theme['colors']['text'];
+type LabelSize = VariantProps<typeof getSizeStyles$2>;
+type LabelColor = keyof Theme['colors']['text'];
 interface LabelOptions {
     /**
      * Size of the label
      */
-    size?: LabelSize;
+    size?: ResponsiveProp<LabelSize>;
     /**
      * Sets the color of the label
      * @default 'default'
      */
     color?: LabelColor;
 }
-declare type LabelComponent = ForwardRefComponent<'label', LabelOptions>;
-declare type LabelProps = PropsOf<LabelComponent>;
+type LabelComponent = ForwardRefComponent<'label', LabelOptions>;
+type LabelProps = PropsOf<LabelComponent>;
 declare const Label: LabelComponent;
 
 interface LinkOptions {
@@ -3972,8 +4092,8 @@ interface LinkOptions {
      */
     isExternal?: boolean;
 }
-declare type LinkComponent = ForwardRefComponent<'a', LinkOptions>;
-declare type LinkProps = PropsOf<LinkComponent>;
+type LinkComponent = ForwardRefComponent<'a', LinkOptions>;
+type LinkProps = PropsOf<LinkComponent>;
 declare const Link: LinkComponent;
 
 declare const getSizeStyles$1: (theme: {
@@ -4176,6 +4296,7 @@ declare const getSizeStyles$1: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -4382,9 +4503,9 @@ declare const getSizeStyles$1: (theme: {
         fontSize: string;
     };
 };
-declare type LoadingDotsSize = VariantProps<typeof getSizeStyles$1>;
+type LoadingDotsSize = VariantProps<typeof getSizeStyles$1>;
 interface LoadingDotsOptions {
-    size?: LoadingDotsSize;
+    size?: ResponsiveProp<LoadingDotsSize>;
 }
 interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
 }
@@ -4590,6 +4711,7 @@ declare const getSizeStyles: (theme: {
         md: string;
         lg: string;
         xl: string;
+        '2xl': string;
         full: string;
     };
     shadows: {
@@ -4636,7 +4758,10 @@ declare const getSizeStyles: (theme: {
             md: {
                 fontFamily: string;
                 fontWeight: string;
-                fontSize: string;
+                fontSize: string; /**
+                 * Sets the visual size of the text
+                 * @default 'md'
+                 */
                 lineHeight: string;
                 letterSpacing: string;
                 fontFeatureSettings: string;
@@ -4825,14 +4950,14 @@ declare const getSizeStyles: (theme: {
         letterSpacing: string;
     };
 };
-declare type ParagraphSize = VariantProps<typeof getSizeStyles>;
-declare type ParagraphColor = keyof Theme['colors']['text'];
+type ParagraphSize = VariantProps<typeof getSizeStyles>;
+type ParagraphColor = keyof Theme['colors']['text'];
 interface ParagraphOptions {
     /**
      * Sets the visual size of the text
      * @default 'md'
      */
-    size?: ParagraphSize;
+    size?: ResponsiveProp<ParagraphSize>;
     /**
      * Sets the color of the text
      * @default 'normal'
@@ -4848,8 +4973,8 @@ interface ParagraphOptions {
      */
     textAlign?: 'left' | 'center' | 'right';
 }
-declare type ParagraphComponent = ForwardRefComponent<'p', ParagraphOptions>;
-declare type ParagraphProps = PropsOf<ParagraphComponent>;
+type ParagraphComponent = ForwardRefComponent<'p', ParagraphOptions>;
+type ParagraphProps = PropsOf<ParagraphComponent>;
 declare const Paragraph: ParagraphComponent;
 
 interface SelectBaseOptions {
@@ -4875,13 +5000,13 @@ interface SelectBaseOptions {
      */
     isRequired?: boolean;
 }
-declare type OmittedProps$5 = 'readOnly' | 'size' | 'multiple' | 'disabled' | 'required';
+type OmittedProps$5 = 'readOnly' | 'size' | 'multiple' | 'disabled' | 'required';
 interface SelectBaseProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$5>, SelectBaseOptions {
 }
 declare const SelectBase: react.ForwardRefExoticComponent<SelectBaseProps & react.RefAttributes<HTMLSelectElement>>;
 
-declare type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
-declare type MinRowsProp = number;
+type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
+type MinRowsProp = number;
 interface TextareaBaseOptions {
     /**
      * If `true`, the textarea will be invalid
@@ -4909,7 +5034,7 @@ interface TextareaBaseOptions {
      */
     minRows?: MinRowsProp;
 }
-declare type OmittedProps$4 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required' | 'rows' | 'cols';
+type OmittedProps$4 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required' | 'rows' | 'cols';
 interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$4>, TextareaBaseOptions {
 }
 declare const TextareaBase: react.ForwardRefExoticComponent<TextareaBaseProps & react.RefAttributes<HTMLTextAreaElement>>;
@@ -4937,7 +5062,7 @@ interface RadioCardOptions {
 interface RadioCardProps extends Omit<RadioGroupPrimitive.RadioGroupItemProps, 'asChild' | keyof RadioCardOptions>, RadioCardOptions {
 }
 
-declare type RadioGroupLabelProps = HTMLQdsProps<'span'>;
+type RadioGroupLabelProps = HTMLQdsProps<'span'>;
 
 interface RadioGroupOptions {
     /**
@@ -4982,13 +5107,13 @@ interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, 'asC
 }
 declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>> & {
     Card: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLButtonElement>>;
-    Label: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof react.HTMLAttributes<HTMLSpanElement>> & react.RefAttributes<HTMLSpanElement>>;
+    Label: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
 };
 
 interface SelectOptionOptions {
     isDisabled?: boolean;
 }
-declare type OmittedProps$3 = 'disabled' | 'label';
+type OmittedProps$3 = 'disabled' | 'label';
 interface SelectOptionProps extends Omit<HTMLQdsProps<'option'>, OmittedProps$3>, SelectOptionOptions {
 }
 
@@ -5006,7 +5131,7 @@ interface SelectOptions extends SelectBaseOptions {
      */
     helperText?: string;
 }
-declare type OmittedProps$2 = 'readOnly' | 'size';
+type OmittedProps$2 = 'readOnly' | 'size';
 interface SelectProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$2>, SelectOptions {
 }
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>> & {
@@ -5015,24 +5140,24 @@ declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAtt
 
 interface SpacerOptions {
     axis?: 'x' | 'y';
-    size: keyof Theme['spacing'];
+    size: ResponsiveProp<keyof Theme['spacing']>;
 }
 interface SpacerProps extends HTMLQdsProps<'span'>, SpacerOptions {
 }
 declare const Spacer: react.ForwardRefExoticComponent<SpacerProps & react.RefAttributes<HTMLSpanElement>>;
 
-declare type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-declare type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
-declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
-declare type GapProp = keyof Theme['spacing'];
+type GapProp = keyof Theme['spacing'];
 interface StackOptions {
     /**
      * The direction of the stack.
      * @default 'column'
      */
-    direction?: FlexDirection;
+    direction?: ResponsiveProp<FlexDirection>;
     /**
      * The CSS `justify-content` property.
      * Controls the alignment of items on the main axis.
@@ -5052,7 +5177,7 @@ interface StackOptions {
     /**
      * The gap between each child element.
      */
-    gap?: GapProp;
+    gap?: ResponsiveProp<GapProp>;
     /**
      * A divider element to be rendered between each child element.
      *
@@ -5061,10 +5186,43 @@ interface StackOptions {
      */
     divider?: ReactNode;
 }
-declare type StackComponent = ForwardRefComponent<'div', StackOptions>;
-declare type StackProps = PropsOf<StackComponent>;
+type StackComponent = ForwardRefComponent<'div', StackOptions>;
+type StackProps = PropsOf<StackComponent>;
 declare const Stack: StackComponent;
 
+interface SwitchOptions {
+    /**
+     * The label for the switch
+     */
+    label: string;
+    /**
+     * The text that appears below the label
+     * to provide additional guidance to the user
+     */
+    helperText?: string;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * If `true`, the switch will be checked
+     */
+    isChecked?: boolean;
+    /**
+     * If `true`, the switch will be disabled and
+     * cannot be interacted with
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, indicates that the switch is required
+     */
+    isRequired?: boolean;
+    onCheckedChange?: (isChecked: boolean) => void;
+}
+interface SwitchProps extends Omit<RadixSwitch.SwitchProps, 'asChild' | keyof SwitchOptions>, SwitchOptions {
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
 interface TextareaOptions extends TextareaBaseOptions {
     /**
      * The label for the textarea field
@@ -5079,12 +5237,12 @@ interface TextareaOptions extends TextareaBaseOptions {
      */
     helperText?: string;
 }
-declare type OmittedProps$1 = 'children' | 'readOnly' | 'size';
+type OmittedProps$1 = 'children' | 'readOnly' | 'size';
 interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$1>, TextareaOptions {
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
-declare type Id = number | string;
+type Id = number | string;
 interface ToastOptions {
     /**
      * Unique identifier for the toast (can be used for removing it prematurely). If a toast with this
@@ -5115,11 +5273,11 @@ declare function useBreakpoint(params?: UseBreakpointOptions): {
     currentBreakpoint: "2xl" | "base" | "xl" | "lg" | "md" | "sm";
 };
 
-declare type Breakpoints = Theme['breakpoints'];
-declare type BreakpointsConfig<T> = PartialRecord<keyof Breakpoints, T> & {
+type Breakpoints = Theme['breakpoints'];
+type BreakpointsConfig<T> = PartialRecord<keyof Breakpoints, T> & {
     base: T;
 };
-declare type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
+type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
 /**
  * Hook for getting a value based on the current breakpoint.
  *
@@ -5128,7 +5286,7 @@ declare type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
  */
 declare function useBreakpointValue<T>(values: UseBreakpointValueProps<T>, options?: UseBreakpointOptions): T;
 
-declare type LoadingStatus = 'loading' | 'loaded' | 'error' | 'pending';
+type LoadingStatus = 'loading' | 'loaded' | 'error' | 'pending';
 interface UseImageProps {
     src?: string;
     loading?: HTMLQdsProps<'img'>['loading'];
@@ -5137,8 +5295,8 @@ declare const useImage: ({ src, loading }: UseImageProps) => {
     loadingStatus: LoadingStatus;
 };
 
-declare type FormFieldElement = 'input' | 'select' | 'textarea';
-declare type PropGetter<T extends ElementType = LegitimateAny> = (props?: HTMLQdsProps<T>) => Record<string, unknown>;
+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
@@ -5165,8 +5323,8 @@ interface FormFieldOptions {
      */
     isRequired?: boolean;
 }
-declare type OmittedProps = 'children' | 'readOnly' | 'size';
-declare type UseFormFieldProps<T extends FormFieldElement> = Omit<HTMLQdsProps<T>, OmittedProps> & FormFieldOptions;
+type OmittedProps = 'children' | 'readOnly' | 'size';
+type UseFormFieldProps<T extends FormFieldElement> = Omit<HTMLQdsProps<T>, OmittedProps> & FormFieldOptions;
 /**
  * Custom hook that returns props for a form field's label, input, helper text and error message.
  * Meant to be used in conjunction with the `Input`, `Select` or `Textarea` component.
@@ -5198,4 +5356,4 @@ declare function useStableId(fixedId?: string | null): string;
  */
 declare const useSafeLayoutEffect: typeof useLayoutEffect;
 
-export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, DropdownMenu, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuItemProps, DropdownMenuRootProps, DropdownMenuTriggerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, ImageIcon, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };
+export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, DisplayText, DisplayTextProps, Divider, DividerProps, DropdownMenu, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuItemProps, DropdownMenuRootProps, DropdownMenuTriggerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, ImageIcon, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, Switch, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };