@hyphen/hyphen-components 8.0.0 → 9.0.0-beta.0

package/dist/index.d.ts

@@ -1,16 +1,18 @@
 import * as React from 'react';
-import React__default, { ReactNode, Key, MouseEvent, KeyboardEvent, CSSProperties, FC, ButtonHTMLAttributes, RefObject, ChangeEvent, FocusEvent, HTMLProps, ForwardRefExoticComponent, InputHTMLAttributes, useEffect, AnchorHTMLAttributes } from 'react';
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
-import { BorderRadiusSize as BorderRadiusSize$1, BreakpointSize, SpacingSize, WidthSize, HeightSize, BackgroundColor, BorderColor, BorderSize, FontColor, FontFamily, FontSize, FontWeight, BoxShadowSize, TextTransform, TextWrap, ZIndexSize, IconName, HeadingSize, ColorName, BaseColor, LineHeightSize } from '@hyphen/hyphen-design-tokens/build/types';
-export { BackgroundColor, BaseColor, BorderColor, BorderSize, BoxShadowSize, BreakpointSize, ColorName, FontColor, FontFamily, FontSize, FontWeight, HeadingSize, HeightSize, IconName, LineHeightSize, SpacingSize, TextDecorationLine, TextDecorationStyle, TextTransform, TextWrap, WhiteSpace, WidthSize, WordBreak, ZIndexSize } from '@hyphen/hyphen-design-tokens/build/types';
+import React__default, { ReactNode, Key, MouseEvent, KeyboardEvent, ElementType, CSSProperties, ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ButtonHTMLAttributes, FC, RefObject, ChangeEvent, FocusEvent, ForwardRefExoticComponent, TextareaHTMLAttributes, InputHTMLAttributes, HTMLAttributes, useEffect, AnchorHTMLAttributes } from 'react';
 import * as CSS from 'csstype';
+import { BreakpointSize, SpacingSize, WidthSize, HeightSize, BorderRadiusSize as BorderRadiusSize$1, BackgroundColor, BorderColor, BorderSize, FontColor, FontFamily, FontSize, FontWeight, BoxShadowSize, TextTransform, TextWrap, ZIndexSize, IconName, HeadingSize, ColorName, BaseColor, LineHeightSize } from '@hyphen/hyphen-design-tokens/build/types';
+export { BackgroundColor, BaseColor, BorderColor, BorderSize, BoxShadowSize, BreakpointSize, ColorName, FontColor, FontFamily, FontSize, FontWeight, HeadingSize, HeightSize, IconName, LineHeightSize, SpacingSize, TextDecorationLine, TextDecorationStyle, TextTransform, TextWrap, WhiteSpace, WidthSize, WordBreak, ZIndexSize } from '@hyphen/hyphen-design-tokens/build/types';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { DayPickerProps } from '@daypicker/react';
 export { Matcher } from '@daypicker/react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { FieldAttributes, FormikTouched, FormikValues, FormikErrors } from 'formik';
-import { OnChangeValue, OptionsOrGroups, GroupBase } from 'react-select';
+import { OnChangeValue, GroupBase, OptionsOrGroups } from 'react-select';
+import { AsyncCreatableProps } from 'react-select/async-creatable';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import ReactModal from 'react-modal';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
@@ -21,9 +23,7 @@ type Breakpoint = {
     minWidth: number;
 };
 type DimensionSize = WidthSize | HeightSize;
-type UnknownPropertiesObjType = {
-    [key: string]: any;
-};
+type UnknownPropertiesObjType = Record<string, unknown>;
 interface FlexProperty {
     flexGrow?: number | string;
     flexShrink?: number | string;
@@ -54,9 +54,7 @@ declare type ResponsiveProp<T> = {
     [breakpoint in BreakpointSizeWithBase]?: T;
 };
 type Row = UnknownPropertiesObjType;
-type Cell = string | number | {
-    [key: string]: unknown;
-} | unknown[];
+type Cell = Row[string];
 declare type Column = {
     /**
      * Text alignment for column cells (including header alignment). Cells will default to left if not defined.
@@ -116,61 +114,8 @@ type EventWithColumnKey = (MouseEvent<HTMLTableHeaderCellElement> | KeyboardEven
 type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
 type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
 
-type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'default';
-
-interface AlertProps {
-    /**
-     * The alert's contents.
-     */
-    children?: ReactNode;
-    /**
-     * Custom class to apply to the alert.
-     */
-    className?: string;
-    /**
-     * Whether the alert as an icon that corresponds to its variant (Success, warning, etc.).
-     */
-    hasIcon?: boolean;
-    /**
-     * Renders a version of the alert with smaller padding.
-     */
-    isCompact?: boolean;
-    /**
-     * Whether the alert can be closed by the user. If `true` it will render
-     * the 'close' icon on the right hand side of the alert.
-     */
-    onClose?: (event: MouseEvent<HTMLOrSVGElement> | KeyboardEvent<HTMLSpanElement>) => void;
-    /**
-     * A render function that returns JSX if preferred over a static ReactNode or string.
-     */
-    render?: () => ReactNode;
-    /**
-     * The title for the alert.
-     */
-    title?: string;
-    /**
-     * The type/color of the alert to show.
-     */
-    variant?: AlertVariant;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-declare const Alert: React__default.NamedExoticComponent<AlertProps>;
-
-declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
-
-type KnownKeys<T> = keyof {
-    [K in keyof T as string extends K ? never : K]: K;
-};
-
 type HoverableBoxProperties = 'color' | 'borderColor' | 'shadow' | 'background';
-interface BoxProps {
-    /**
-     * The element type to be rendered.
-     */
-    as?: string;
+interface BoxOwnProps {
     /**
      * How to align the contents along the cross axis.
      */
@@ -251,11 +196,11 @@ interface BoxProps {
      * `* shadow`
      */
     focus?: {
-        background?: BoxProps['background'];
-        borderColor?: BoxProps['borderColor'];
-        borderWidth?: BoxProps['borderWidth'];
-        color?: BoxProps['color'];
-        shadow?: BoxProps['shadow'];
+        background?: BoxOwnProps['background'];
+        borderColor?: BoxOwnProps['borderColor'];
+        borderWidth?: BoxOwnProps['borderWidth'];
+        color?: BoxOwnProps['color'];
+        shadow?: BoxOwnProps['shadow'];
     };
     /**
      * The [font family token](/?path=/docs/foundation-design-tokens--docs#font-family) identifier for the Box's text
@@ -284,12 +229,12 @@ interface BoxProps {
      * `* shadow`
      */
     hover?: {
-        background?: BoxProps['background'];
-        borderColor?: BoxProps['borderColor'];
-        borderWidth?: BoxProps['borderWidth'];
-        color?: BoxProps['color'];
-        fontSize?: BoxProps['fontSize'];
-        shadow?: BoxProps['shadow'];
+        background?: BoxOwnProps['background'];
+        borderColor?: BoxOwnProps['borderColor'];
+        borderWidth?: BoxOwnProps['borderWidth'];
+        color?: BoxOwnProps['color'];
+        fontSize?: BoxOwnProps['fontSize'];
+        shadow?: BoxOwnProps['shadow'];
     };
     /**
      * Sets the gaps (gutters) between rows and columns.
@@ -397,17 +342,73 @@ interface BoxProps {
      * Can be responsive.
      */
     zIndex?: ZIndexSize | ResponsiveProp<ZIndexSize>;
+}
+type BoxElement = ElementType;
+type BoxProps<T extends BoxElement = 'div'> = BoxOwnProps & {
+    /**
+     * The element type to be rendered. Defaults to `div`.
+     *
+     * The element is no longer inferred from other props: passing `href` alone
+     * renders a `div` with an inert `href` attribute rather than an anchor, so
+     * links must set `as="a"` explicitly.
+     */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof BoxOwnProps | 'as'>;
+type BoxRef<T extends BoxElement> = ComponentPropsWithRef<T>['ref'];
+type BoxComponent = {
+    <T extends BoxElement>(props: BoxProps<T> & {
+        as: T;
+        ref?: BoxRef<T>;
+    }): ReactElement | null;
+    (props: BoxProps<'div'> & {
+        ref?: BoxRef<'div'>;
+    }): ReactElement | null;
+    displayName?: string;
+};
+declare const Box: BoxComponent;
+declare const boxPropsKeys: (keyof BoxOwnProps | "as")[];
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'default';
+
+interface AlertOwnProps {
+    /**
+     * The alert's contents.
+     */
+    children?: ReactNode;
+    /**
+     * Custom class to apply to the alert.
+     */
+    className?: string;
+    /**
+     * Whether the alert as an icon that corresponds to its variant (Success, warning, etc.).
+     */
+    hasIcon?: boolean;
+    /**
+     * Renders a version of the alert with smaller padding.
+     */
+    isCompact?: boolean;
+    /**
+     * Whether the alert can be closed by the user. If `true` it will render
+     * the 'close' icon on the right hand side of the alert.
+     */
+    onClose?: (event: MouseEvent<HTMLOrSVGElement> | KeyboardEvent<HTMLSpanElement>) => void;
+    /**
+     * A render function that returns JSX if preferred over a static ReactNode or string.
+     */
+    render?: () => ReactNode;
     /**
-     * Additional props to be spread to rendered element
+     * The title for the alert.
+     */
+    title?: string;
+    /**
+     * The type/color of the alert to show.
      */
-    [x: string]: any;
+    variant?: AlertVariant;
 }
-/**
- * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
- * elements.
- */
-declare const Box: FC<BoxProps>;
-declare const boxPropsKeys: (keyof Pick<BoxProps, KnownKeys<BoxProps>>)[];
+type AlertProps = AlertOwnProps & Omit<BoxProps<'div'>, keyof AlertOwnProps | 'as'>;
+declare const Alert: React__default.NamedExoticComponent<AlertProps>;
+
+declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
 
 type BadgeSize = 'sm' | 'md' | 'lg';
 type BadgeVariant = 'solid' | 'soft' | 'surface' | 'outline';
@@ -415,7 +416,7 @@ type BadgeHue = 'grey' | 'blue' | 'green' | 'yellow' | 'red' | 'purple' | 'orang
 type BadgeSemanticColor = 'danger' | 'success' | 'warning' | 'info';
 type BadgeColor = BadgeHue | BadgeSemanticColor;
 type BadgeRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
-interface BadgeProps extends Omit<BoxProps, 'color' | 'radius'> {
+interface BadgeOwnProps {
     /**
      * The color of the badge. Accepts a hue, or one of the semantic names
      * (`danger`, `success`, `warning`, `info`) which map onto `red`, `green`, `yellow` and `blue`.
@@ -434,7 +435,18 @@ interface BadgeProps extends Omit<BoxProps, 'color' | 'radius'> {
      */
     variant?: BadgeVariant;
 }
-declare const Badge: React__default.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+type BadgeProps<T extends BoxElement = 'div'> = BadgeOwnProps & Omit<BoxProps<T>, keyof BadgeOwnProps>;
+type BadgeComponent = {
+    <T extends BoxElement>(props: BadgeProps<T> & {
+        as: T;
+        ref?: BoxRef<T>;
+    }): ReactElement | null;
+    (props: BadgeProps<'div'> & {
+        ref?: BoxRef<'div'>;
+    }): ReactElement | null;
+    displayName?: string;
+};
+declare const Badge: BadgeComponent;
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'success' | 'link';
 type ButtonSize = 'sm' | 'md' | 'lg';
@@ -496,14 +508,10 @@ interface CardFooterProps extends BoxProps {
      * Contents of the Footer.
      */
     children?: ReactNode;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
 declare const CardFooter: FC<CardFooterProps>;
 
-interface CardHeaderProps extends BoxProps {
+interface CardHeaderOwnProps {
     /**
      * The title of the card
      */
@@ -513,9 +521,10 @@ interface CardHeaderProps extends BoxProps {
      */
     description?: ReactNode;
 }
+type CardHeaderProps = CardHeaderOwnProps & Omit<BoxProps<'div'>, keyof CardHeaderOwnProps | 'as'>;
 declare const CardHeader: FC<CardHeaderProps>;
 
-interface CardSectionProps extends BoxProps {
+interface CardSectionOwnProps {
     /**
      * Any valid background color token, or a `url()` for an image
      */
@@ -552,11 +561,8 @@ interface CardSectionProps extends BoxProps {
      * Title for the section.
      */
     title?: ReactNode;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
+type CardSectionProps = CardSectionOwnProps & Omit<BoxProps<'div'>, keyof CardSectionOwnProps | 'as'>;
 declare const CardSection: FC<CardSectionProps>;
 
 interface CardProps extends BoxProps {
@@ -564,8 +570,12 @@ interface CardProps extends BoxProps {
      * The Card's contents.
      */
     children?: ReactNode;
+    /**
+     * Whether the card uses its subdued background.
+     */
+    subdued?: boolean;
 }
-declare const CardBaseComponent: React__default.FC<CardProps>;
+declare const CardBaseComponent: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLDivElement>>;
 interface CardStatic {
     Header: typeof CardHeader;
     Section: typeof CardSection;
@@ -606,6 +616,10 @@ interface CheckboxProps extends Omit<BoxProps, 'radius' | 'background' | 'as' |
      * id of the element that labels the Checkbox
      */
     labelledby?: string;
+    /**
+     * The checkbox input's name attribute.
+     */
+    name?: string;
     /**
      * If the input should be disabled and not focusable.
      */
@@ -640,9 +654,9 @@ interface CheckboxProps extends Omit<BoxProps, 'radius' | 'background' | 'as' |
      */
     value?: string | number;
 }
-declare const Checkbox: React__default.FC<CheckboxProps>;
+declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLDivElement>>;
 
-interface CheckboxInputProps {
+interface CheckboxInputOwnProps {
     /**
      * The id attribute of the input.
      */
@@ -690,6 +704,10 @@ interface CheckboxInputProps {
      * The required and aria-required attributes on the input
      */
     isRequired?: boolean;
+    /**
+     * The name attribute of the checkbox input element.
+     */
+    name?: CheckboxProps['name'];
     /**
      * Callback function when input is blurred.
      */
@@ -707,29 +725,32 @@ interface CheckboxInputProps {
      */
     size?: CheckboxSize;
     /**
-     * Additional props to be spread to rendered element
+     * Value of the checkbox input element.
      */
-    [x: string]: any;
+    value?: CheckboxProps['value'];
 }
+type CheckboxInputProps = CheckboxInputOwnProps & Omit<BoxProps<'div'>, keyof CheckboxInputOwnProps | 'as'>;
 declare const CheckboxInput: React__default.FC<CheckboxInputProps>;
 
 declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
 declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
 
-interface DetailsSummaryProps extends BoxProps {
+interface DetailsSummaryOwnProps {
     isDetailsOpen: boolean;
     onToggle?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
 }
+type DetailsSummaryProps = DetailsSummaryOwnProps & Omit<BoxProps<'summary'>, keyof DetailsSummaryOwnProps | 'as'>;
 declare const DetailsSummary: React__default.FC<DetailsSummaryProps>;
 
-interface DetailsProps extends BoxProps {
+interface DetailsOwnProps {
     /**
      * Whether the details below the summary are opened. Directly corresponds to `open` property in <details> element.
      */
     isOpen: boolean;
 }
-declare const DetailsBaseComponent: React__default.FC<DetailsProps>;
+type DetailsProps = DetailsOwnProps & Omit<BoxProps<'details'>, keyof DetailsOwnProps | 'as' | 'open'>;
+declare const DetailsBaseComponent: React__default.ForwardRefExoticComponent<DetailsOwnProps & Omit<BoxProps<"details">, "as" | "open" | "isOpen"> & React__default.RefAttributes<HTMLDetailsElement>>;
 interface DetailsStatic {
     Summary: typeof DetailsSummary;
 }
@@ -830,13 +851,19 @@ interface DrawerProps {
      */
     width?: DimensionSize | CssDimensionValue;
 }
-declare const Drawer: React__default.FC<DrawerProps>;
-declare const DrawerHeader: React__default.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
-declare const DrawerTitle: React__default.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: React__default.ForwardRefExoticComponent<BoxOwnProps & {
+    as?: "div" | undefined;
+} & Omit<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof BoxOwnProps | "as"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const DrawerTitle: React__default.ForwardRefExoticComponent<BoxOwnProps & {
+    as?: "div" | undefined;
+} & Omit<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof BoxOwnProps | "as"> & React__default.RefAttributes<HTMLDivElement>>;
 declare const DrawerCloseButton: React__default.ForwardRefExoticComponent<BaseButtonProps & React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
     onClose?: () => void;
 } & React__default.RefAttributes<HTMLButtonElement>>;
-declare const DrawerContent: React__default.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: React__default.ForwardRefExoticComponent<BoxOwnProps & {
+    as?: "div" | undefined;
+} & Omit<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof BoxOwnProps | "as"> & React__default.RefAttributes<HTMLDivElement>>;
 
 declare const DropdownMenu: React__default.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React__default.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
@@ -896,7 +923,7 @@ interface FormControlProps extends BoxProps {
      */
     requiredIndicator?: ReactNode;
 }
-declare const FormControl: React__default.ForwardRefExoticComponent<Omit<FormControlProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const FormControl: React__default.ForwardRefExoticComponent<FormControlProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface FormikCheckboxInputProps extends Omit<CheckboxInputProps, 'onChange'> {
     field: FieldAttributes<HTMLInputElement>;
@@ -962,7 +989,7 @@ interface RadioInputProps {
     size: RadioSize;
 }
 
-interface RadioGroupProps {
+interface RadioGroupOwnProps {
     /**
      * Radio group name.
      */
@@ -1029,11 +1056,8 @@ interface RadioGroupProps {
      * The value of selected radio input.
      */
     value?: string;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
+type RadioGroupProps = RadioGroupOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof RadioGroupOwnProps>;
 declare const RadioGroup: FC<RadioGroupProps>;
 
 interface FormikRadioGroupProps extends Omit<RadioGroupProps, 'onChange'> {
@@ -1060,7 +1084,7 @@ type SimulatedEventPayloadType = {
     };
 };
 type TextInputSize = 'sm' | 'md' | 'lg' | ResponsiveProp<'sm' | 'md' | 'lg'>;
-interface SelectInputProps {
+interface SelectInputOwnProps {
     /**
      * The id attribute of the input.
      */
@@ -1077,10 +1101,6 @@ interface SelectInputProps {
      * The value(s) of select.
      */
     value: any | any[];
-    /**
-     * Options for dropdown list.
-     */
-    options: SelectInputOptions | AsyncOptions;
     /**
      * Autofocus select input on render.
      */
@@ -1102,10 +1122,6 @@ interface SelectInputProps {
      * Visually hide the label.
      */
     hideLabel?: boolean;
-    /**
-     * Load the input asynchronously.
-     */
-    isAsync?: boolean;
     /**
      * If the input value is clearable programmatically.
      */
@@ -1155,15 +1171,12 @@ interface SelectInputProps {
      * The size of the text input.
      */
     size?: TextInputSize;
-    /**
-     * Additional props to be spread. These will be applied specifically to
-     * the `react-select` component that powers the select. For full docs on
-     * react-select props, [Click Here](https://react-select.com/props)
-     */
-    [x: string]: any;
 }
+type ReactSelectAsyncProps = AsyncCreatableProps<SelectOption, boolean, SelectGroupOptions>;
+type ControlledReactSelectProps = 'aria-label' | 'aria-labelledby' | 'cacheOptions' | 'classNamePrefix' | 'components' | 'defaultOptions' | 'inputId' | 'loadOptions' | 'options' | 'styles';
+type SelectInputBaseProps = SelectInputOwnProps & Omit<ReactSelectAsyncProps, keyof SelectInputOwnProps | ControlledReactSelectProps>;
 type AsyncOptions = (inputValue: string) => Promise<OptionsOrGroups<SelectOption, SelectGroupOptions>>;
-type AsyncSelectInputProps = SelectInputProps & {
+type AsyncSelectInputProps = SelectInputBaseProps & {
     /**
      * Load the input asynchronously.
      */
@@ -1175,13 +1188,13 @@ type AsyncSelectInputProps = SelectInputProps & {
     /**
      * If cacheOptions is passed, then the loaded data will be cached.
      */
-    cacheOptions?: boolean;
+    cacheOptions?: ReactSelectAsyncProps['cacheOptions'];
     /**
      * The default set of options to show before the user starts searching.
      */
-    defaultOptions?: boolean;
+    defaultOptions?: ReactSelectAsyncProps['defaultOptions'];
 };
-type SyncSelectInputProps = SelectInputProps & {
+type SyncSelectInputProps = SelectInputBaseProps & {
     /**
      * Load the input synchronously.
      */
@@ -1190,11 +1203,13 @@ type SyncSelectInputProps = SelectInputProps & {
      * Options for dropdown list.
      */
     options: SelectInputOptions;
+    cacheOptions?: never;
+    defaultOptions?: never;
 };
-declare function SelectInput(props: AsyncSelectInputProps): JSX.Element;
-declare function SelectInput(props: SyncSelectInputProps): JSX.Element;
+type SelectInputProps = AsyncSelectInputProps | SyncSelectInputProps;
+declare function SelectInput(props: SelectInputProps): JSX.Element;
 
-interface FormikSelectInputProps extends Omit<SelectInputProps, 'onChange'> {
+interface FormikSelectInputOwnProps {
     field: FieldAttributes<HTMLSelectElement>;
     form: {
         touched: FormikTouched<FormikValues>;
@@ -1205,6 +1220,8 @@ interface FormikSelectInputProps extends Omit<SelectInputProps, 'onChange'> {
         label?: string;
     }>;
 }
+type FormikControlledSelectProps = keyof FormikSelectInputOwnProps | 'name' | 'onBlur' | 'value';
+type FormikSelectInputProps = FormikSelectInputOwnProps & (Omit<AsyncSelectInputProps, FormikControlledSelectProps> | Omit<SyncSelectInputProps, FormikControlledSelectProps>);
 declare const FormikSelectInput: React__default.FC<FormikSelectInputProps>;
 
 type SelectInputInsetSize = 'md' | 'lg';
@@ -1227,11 +1244,15 @@ interface SelectInputInsetProps {
     /**
      * Callback function to call on change event.
      */
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
     /**
      * Value of selected option. Should match the value key in the option object.
      */
     value: string | number | null;
+    /**
+     * The select's autocomplete behavior.
+     */
+    autoComplete?: boolean | string;
     /**
      * Automatically focus the input when the page is loaded.
      */
@@ -1252,7 +1273,7 @@ interface SelectInputInsetProps {
     /**
      * Props passed directly to the input element of the component
      */
-    inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+    inputProps?: Omit<BoxProps<'select'>, 'as'>;
     /**
      * The input's disabled attribute
      */
@@ -1268,7 +1289,7 @@ interface SelectInputInsetProps {
     /**
      * Callback function to call on blur event.
      */
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLSelectElement>) => void;
     /**
      * Callback function to call when input us cleared. When this is passed,
      * the input will display an icon on the right side, for triggering this callback.
@@ -1277,7 +1298,7 @@ interface SelectInputInsetProps {
     /**
      * Callback function to call on focus event.
      */
-    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLSelectElement>) => void;
     /**
      * The input placeholder attribute.
      */
@@ -1290,10 +1311,6 @@ interface SelectInputInsetProps {
      * The size of the text input.
      */
     size?: SelectInputInsetSize | ResponsiveProp<SelectInputInsetSize>;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
 declare const SelectInputInset: ForwardRefExoticComponent<SelectInputInsetProps>;
 
@@ -1320,11 +1337,15 @@ interface TextareaInputInsetProps {
     /**
      * Callback function to call on change event.
      */
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
     /**
      * The text value of the input. Required since our Input is a controlled component.
      */
-    value: InputHTMLAttributes<HTMLInputElement>['value'];
+    value: TextareaHTMLAttributes<HTMLTextAreaElement>['value'];
+    /**
+     * The textarea's autocomplete behavior.
+     */
+    autoComplete?: boolean | string;
     /**
      * Automatically focus the input when the page is loaded.
      */
@@ -1345,7 +1366,7 @@ interface TextareaInputInsetProps {
     /**
      * Props passed directly to the input element of the component
      */
-    inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+    inputProps?: Omit<BoxProps<'textarea'>, 'as'>;
     /**
      * The input's disabled attribute
      */
@@ -1366,11 +1387,11 @@ interface TextareaInputInsetProps {
     /**
      * Callback function to call on blur event.
      */
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
     /**
      * Callback function to call on focus event.
      */
-    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
     /**
      * The input placeholder attribute.
      */
@@ -1399,14 +1420,6 @@ interface TextareaInputInsetProps {
      * An input helper rendered after the input field value
      */
     suffix?: ReactNode;
-    /**
-     * The input 'type' value. Defaults to type 'text'.
-     */
-    type?: InputHTMLAttributes<HTMLInputElement>['type'];
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
 declare const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetProps>;
 
@@ -1438,6 +1451,10 @@ interface TextInputInsetProps {
      * The text value of the input. Required since our Input is a controlled component.
      */
     value: InputHTMLAttributes<HTMLInputElement>['value'];
+    /**
+     * The input's autocomplete behavior.
+     */
+    autoComplete?: boolean | string;
     /**
      * Automatically focus the input when the page is loaded.
      */
@@ -1458,7 +1475,7 @@ interface TextInputInsetProps {
     /**
      * Props passed directly to the input element of the component
      */
-    inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+    inputProps?: Omit<BoxProps<'input'>, 'as'>;
     /**
      * The input's disabled attribute
      */
@@ -1513,10 +1530,6 @@ interface TextInputInsetProps {
      * The input 'type' value. Defaults to type 'text'.
      */
     type?: InputHTMLAttributes<HTMLInputElement>['type'];
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
 declare const TextInputInset: ForwardRefExoticComponent<TextInputInsetProps>;
 
@@ -1536,7 +1549,7 @@ interface SelectInputNativeOption {
     label: string | number;
     disabled?: boolean;
 }
-interface SelectInputNativeProps extends BoxProps, FormControlProps {
+interface SelectInputNativeOwnProps {
     /**
      * List of options for the select input.
      */
@@ -1548,11 +1561,19 @@ interface SelectInputNativeProps extends BoxProps, FormControlProps {
     /**
      * Value of selected option. Should match the value key in the option object.
      */
-    value: string | number | null;
+    value: React__default.ComponentPropsWithoutRef<'select'>['value'] | null;
+    /**
+     * Props passed directly to the select element of the component.
+     */
+    inputProps?: Omit<BoxProps<'select'>, 'aria-label' | 'aria-labelledby' | 'aria-required' | 'as' | 'autoFocus' | 'children' | 'color' | 'defaultValue' | 'disabled' | 'id' | 'name' | 'onChange' | 'required' | 'size' | 'value'>;
     /**
      * The input's 'name' attribute.
      */
     name?: string;
+    /**
+     * Placeholder option displayed before a value is selected.
+     */
+    placeholder?: string;
     /**
      * Visual indicator that the field is required, that gets appended to the label
      */
@@ -1565,14 +1586,13 @@ interface SelectInputNativeProps extends BoxProps, FormControlProps {
      * Whether the input is autofocused on initial render.
      */
     autoFocus?: HTMLSelectElement['autofocus'];
-    /**
-     * Additional props to be spread.
-     */
-    [x: string]: any;
 }
+type SelectInputNativeFormControlProps = Pick<FormControlProps, 'error' | 'helpText' | 'hideLabel' | 'id' | 'isDisabled' | 'isRequired' | 'label'>;
+type SelectInputNativeElementProps = Omit<React__default.ComponentPropsWithoutRef<'select'>, keyof SelectInputNativeOwnProps | keyof SelectInputNativeFormControlProps | keyof BoxOwnProps | 'aria-label' | 'aria-labelledby' | 'aria-required' | 'children' | 'dangerouslySetInnerHTML' | 'defaultValue' | 'size'>;
+type SelectInputNativeProps = SelectInputNativeOwnProps & SelectInputNativeFormControlProps & Omit<BoxOwnProps, 'children'> & SelectInputNativeElementProps;
 declare const SelectInputNative: React__default.FC<SelectInputNativeProps>;
 
-interface FormikSelectInputNativeProps extends Omit<SelectInputNativeProps, 'onChange'> {
+interface FormikSelectInputNativeProps extends Omit<SelectInputNativeProps, 'form' | 'onChange'> {
     field: FieldAttributes<HTMLSelectElement>;
     form: {
         touched: FormikTouched<FormikValues>;
@@ -1583,7 +1603,7 @@ interface FormikSelectInputNativeProps extends Omit<SelectInputNativeProps, 'onC
 declare const FormikSelectInputNative: React__default.FC<FormikSelectInputNativeProps>;
 
 type TextInputSizeType = 'sm' | 'md' | 'lg';
-interface TextInputProps {
+interface TextInputOwnProps {
     /**
      * The input's id attribute. Used to programmatically tie the input with its label.
      */
@@ -1600,6 +1620,10 @@ interface TextInputProps {
      * The text value of the input. Required since our Input is a controlled component.
      */
     value: InputHTMLAttributes<HTMLInputElement>['value'];
+    /**
+     * The input's autocomplete behavior.
+     */
+    autoComplete?: boolean | string;
     /**
      * Automatically focus the input when the page is loaded.
      */
@@ -1624,7 +1648,7 @@ interface TextInputProps {
     /**
      * Props passed directly to the input element of the component
      */
-    inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+    inputProps?: Omit<BoxProps<'input'>, 'as'>;
     /**
      * The input's disabled attribute
      */
@@ -1679,11 +1703,8 @@ interface TextInputProps {
      * The input 'type' value. Defaults to type 'text'.
      */
     type?: InputHTMLAttributes<HTMLInputElement>['type'];
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
+type TextInputProps = TextInputOwnProps & Omit<FormControlProps, keyof TextInputOwnProps>;
 declare const TextInput: ForwardRefExoticComponent<TextInputProps>;
 
 interface FormikTextInputProps extends Omit<TextInputProps, 'onChange'> {
@@ -1697,7 +1718,7 @@ interface FormikTextInputProps extends Omit<TextInputProps, 'onChange'> {
 declare const FormikTextInput: React__default.FC<FormikTextInputProps>;
 
 type TextareaInputSize = 'sm' | 'md' | 'lg';
-interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
+interface TextareaInputOwnProps {
     /**
      * The input's id attribute. Used to programmatically tie the input with its label.
      */
@@ -1784,11 +1805,8 @@ interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
      * The size of the text input.
      */
     size?: TextareaInputSize | ResponsiveProp<TextareaInputSize>;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
+type TextareaInputProps = TextareaInputOwnProps & Omit<BoxProps<'div'>, keyof TextareaInputOwnProps | 'as' | 'width'>;
 declare const TextareaInput: FC<TextareaInputProps>;
 
 interface FormikTextareaInputProps extends Omit<TextareaInputProps, 'onChange'> {
@@ -1839,7 +1857,7 @@ interface TimePickerProps extends Omit<SelectInputNativeProps, 'options'> {
 }
 declare const TimePicker: FC<TimePickerProps>;
 
-interface FormikTimePickerProps extends Omit<TimePickerProps, 'onChange'> {
+interface FormikTimePickerProps extends Omit<TimePickerProps, 'form' | 'onChange'> {
     field: FieldAttributes<HTMLSelectElement>;
     form: {
         touched: FormikTouched<FormikValues>;
@@ -1911,7 +1929,7 @@ interface FormikToggleGroupMultiProps {
 }
 declare const FormikToggleGroupMulti: ({ name, options, helpText, label, children, variant, gap, ...props }: FormikToggleGroupMultiProps) => React__default.JSX.Element;
 
-interface FormLabelProps extends BoxProps {
+interface FormLabelOwnProps {
     /**
      * Content to be rendered inside the label.
      */
@@ -1945,15 +1963,16 @@ interface FormLabelProps extends BoxProps {
      */
     requiredIndicator?: ReactNode;
     /**
-     * Additional props to be spread to rendered element
+     * The label size.
      */
-    [x: string]: any;
+    size?: 'sm' | 'md' | 'lg';
 }
+type FormLabelProps = FormLabelOwnProps & Omit<BoxProps<'label'>, keyof FormLabelOwnProps | 'as' | 'htmlFor'>;
 declare const FormLabel: FC<FormLabelProps>;
 
 type HEADING_LEVELS_TYPE = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-interface HeadingProps {
+interface HeadingOwnProps {
     /**
      * The DOM tag or react component to use for the element.
      * Select the appropriate semantic element (h1-h6).
@@ -1979,14 +1998,11 @@ interface HeadingProps {
      * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/size/font.json).
      */
     size?: HeadingSize | ResponsiveProp<HeadingSize>;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
+type HeadingProps = HeadingOwnProps & Omit<HTMLAttributes<HTMLHeadingElement>, keyof HeadingOwnProps>;
 declare const Heading: FC<HeadingProps>;
 
-interface IconProps {
+interface IconOwnProps {
     className?: string;
     /**
      * A color token identifier to use for the text color.
@@ -2000,12 +2016,9 @@ interface IconProps {
      * Name of the icon
      */
     name: IconName;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
 }
-declare const Icon: FC<IconProps>;
+type IconProps = IconOwnProps & Omit<ComponentPropsWithoutRef<'svg'>, keyof IconOwnProps>;
+declare const Icon: React__default.ForwardRefExoticComponent<IconOwnProps & Omit<Omit<React__default.SVGProps<SVGSVGElement>, "ref">, keyof IconOwnProps> & React__default.RefAttributes<SVGSVGElement>>;
 
 type ModalFooterProps = Omit<BoxProps, 'as' | 'radius'>;
 declare const ModalFooter: FC<ModalFooterProps>;
@@ -2033,7 +2046,7 @@ declare const ModalHeader: FC<ModalHeaderProps>;
 type ModalBodyProps = BoxProps;
 declare const ModalBody: FC<ModalBodyProps>;
 
-interface ModalProps {
+interface ModalOwnProps {
     /**
      * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
      */
@@ -2099,12 +2112,9 @@ interface ModalProps {
      * Inline styles for the modal container
      */
     style?: React__default.CSSProperties;
-    /**
-     * Allows spread props
-     */
-    [x: string]: any;
 }
-declare const ModalBaseComponent: React__default.FC<ModalProps>;
+type ModalProps = ModalOwnProps & Omit<ReactModal.Props, keyof ModalOwnProps | 'ariaHideApp' | 'onRequestClose' | 'overlayClassName' | 'parentSelector'>;
+declare const ModalBaseComponent: React__default.ForwardRefExoticComponent<ModalOwnProps & Omit<ReactModal.Props, "overlayClassName" | "onRequestClose" | "ariaHideApp" | "parentSelector" | keyof ModalOwnProps> & React__default.RefAttributes<HTMLDivElement>>;
 interface ModalStatic {
     Body: typeof ModalBody;
     Header: typeof ModalHeader;
@@ -2802,4 +2812,4 @@ declare const Z_INDEX_OPTIONS: ZIndexSize[];
 declare const Z_INDEX_VALUES: any;
 declare const BOX_SHADOW_OPTIONS: BoxShadowSize[];
 
-export { Alert, type AlertProps, AspectRatio, BACKGROUND_COLOR_OPTIONS, BASE_COLOR_NAMES, BASE_COLOR_OPTIONS, BORDER_COLOR_OPTIONS, BORDER_RADIUS_OPTIONS, BORDER_SIZE_OPTIONS, BOX_SHADOW_OPTIONS, BREAKPOINTS, BREAKPOINT_OPTIONS, Badge, type BadgeColor, type BadgeHue, type BadgeProps, type BadgeRadius, type BadgeSemanticColor, type BadgeSize, type BadgeVariant, type BaseButtonProps, type BaseSpacing, type BorderRadiusSize, Box, type BoxProps, type Breakpoint, type BreakpointSizeWithBase, type BreakpointState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, CardBaseComponent, type CardProps, type CardStatic, type CardWithStaticComponents, type Cell, Checkbox, CheckboxInput, type CheckboxInputProps, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CssAlignContentValue, type CssAlignItemsValue, type CssDimensionAbbreviation, type CssDimensionUnit, type CssDimensionValue, type CssDisplayValue, type CssFlexDirectionValue, type CssFlexValue, type CssJustifyContentValue, type CssOverflowValue, type CssSpacingAbbreviation, type CssTextAlignValue, type CssWhiteSpaceValue, type CssWordBreakValue, Details, DetailsBaseComponent, type DetailsProps, type DetailsStatic, DetailsSummary, type DetailsSummaryProps, type DetailsWithStaticComponents, type DimensionSize, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, type DrawerPlacementType, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EventWithColumnKey, type ExtendedToastOptions, FONT_COLOR_OPTIONS, FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, FONT_WEIGHT_OPTIONS, type FilterFunction, type FlexProperty, FormControl, type FormControlProps, FormLabel, type FormLabelProps, FormikCheckboxInput, type FormikCheckboxInputProps, FormikRadioGroup, type FormikRadioGroupProps, FormikSelectInput, FormikSelectInputInset, type FormikSelectInputInsetProps, FormikSelectInputNative, type FormikSelectInputNativeProps, type FormikSelectInputProps, FormikSwitch, type FormikSwitchProps, FormikTextInput, FormikTextInputInset, type FormikTextInputInsetProps, type FormikTextInputProps, FormikTextareaInput, FormikTextareaInputInset, type FormikTextareaInputInsetProps, type FormikTextareaInputProps, FormikTimePicker, type FormikTimePickerProps, FormikToggleGroup, FormikToggleGroupMulti, type FormikToggleGroupMultiProps, type FormikToggleGroupProps, HEADING_SIZE_OPTIONS, HEIGHT_OPTIONS, Heading, type HeadingProps, type HookWindowSize, type HoverableBoxProperties, ICON_NAMES, Icon, type IconProps, type InputRangeProps, LINE_HEIGHT_OPTIONS, Modal, ModalBaseComponent, type ModalProps, type ModalStatic, type ModalWithStaticComponents, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, type RadioGroupProps, RangeInput, ResponsiveContext, type ResponsiveContextShape, type ResponsiveProp, ResponsiveProvider, type ResponsiveProviderProps, type Row, SPACING_OPTIONS, SelectInput, SelectInputInset, type SelectInputInsetProps, type SelectInputInsetSize, SelectInputNative, type SelectInputNativeOption, type SelectInputNativeProps, type SelectInputNativeSize, type SelectInputOptions, type SelectInputProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, type SimulatedEventPayloadType, Spinner, type SpinnerProps, type StylesAndClasses, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, TextInput, TextInputInset, type TextInputInsetProps, type TextInputInsetSize, type TextInputProps, type TextInputSize, type TextInputSizeType, TextareaInput, TextareaInputInset, type TextareaInputInsetProps, type TextareaInputInsetSize, type TextareaInputProps, type TextareaInputSize, type Theme, ThemeProvider, ThemeProviderContext, TimePicker, type TimePickerProps, type Toast, ToastContainer, type ToastContainerProps, type ToastOptions, type ToastPosition, type ToastType, Toggle, ToggleGroup, ToggleGroupItem, type ToggleVariant$1 as ToggleVariant, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, type UnknownPropertiesObjType, type UseOpenCloseProps, type UseOpenCloseState, type ValueFunction, type ValueOrFunction, WIDTH_OPTIONS, Z_INDEX_OPTIONS, Z_INDEX_VALUES, boxPropsKeys, createRectRef, cssShorthandToClasses, doesStringIncludeCssUnit, filter, generateBaseClasses, generateResponsiveClasses, getAutoCompleteValue, getColumnKeys, getDimensionClasses, getDimensionCss, getDimensionStyles, getElementType, getFlexClasses, getFlexCss, getFlexStyles, handleReactRouterClick, isFunction, isModifiedEvent, isValidSpacingValue, mergeRefs, parsePropertyValue, prefersReducedMotion, resolveValue, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };
+export { Alert, type AlertProps, AspectRatio, type AsyncSelectInputProps, BACKGROUND_COLOR_OPTIONS, BASE_COLOR_NAMES, BASE_COLOR_OPTIONS, BORDER_COLOR_OPTIONS, BORDER_RADIUS_OPTIONS, BORDER_SIZE_OPTIONS, BOX_SHADOW_OPTIONS, BREAKPOINTS, BREAKPOINT_OPTIONS, Badge, type BadgeColor, type BadgeHue, type BadgeProps, type BadgeRadius, type BadgeSemanticColor, type BadgeSize, type BadgeVariant, type BaseButtonProps, type BaseSpacing, type BorderRadiusSize, Box, type BoxElement, type BoxOwnProps, type BoxProps, type BoxRef, type Breakpoint, type BreakpointSizeWithBase, type BreakpointState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, CardBaseComponent, type CardProps, type CardStatic, type CardWithStaticComponents, type Cell, Checkbox, CheckboxInput, type CheckboxInputProps, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CssAlignContentValue, type CssAlignItemsValue, type CssDimensionAbbreviation, type CssDimensionUnit, type CssDimensionValue, type CssDisplayValue, type CssFlexDirectionValue, type CssFlexValue, type CssJustifyContentValue, type CssOverflowValue, type CssSpacingAbbreviation, type CssTextAlignValue, type CssWhiteSpaceValue, type CssWordBreakValue, Details, DetailsBaseComponent, type DetailsProps, type DetailsStatic, DetailsSummary, type DetailsSummaryProps, type DetailsWithStaticComponents, type DimensionSize, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, type DrawerPlacementType, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EventWithColumnKey, type ExtendedToastOptions, FONT_COLOR_OPTIONS, FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, FONT_WEIGHT_OPTIONS, type FilterFunction, type FlexProperty, FormControl, type FormControlProps, FormLabel, type FormLabelProps, FormikCheckboxInput, type FormikCheckboxInputProps, FormikRadioGroup, type FormikRadioGroupProps, FormikSelectInput, FormikSelectInputInset, type FormikSelectInputInsetProps, FormikSelectInputNative, type FormikSelectInputNativeProps, type FormikSelectInputProps, FormikSwitch, type FormikSwitchProps, FormikTextInput, FormikTextInputInset, type FormikTextInputInsetProps, type FormikTextInputProps, FormikTextareaInput, FormikTextareaInputInset, type FormikTextareaInputInsetProps, type FormikTextareaInputProps, FormikTimePicker, type FormikTimePickerProps, FormikToggleGroup, FormikToggleGroupMulti, type FormikToggleGroupMultiProps, type FormikToggleGroupProps, HEADING_SIZE_OPTIONS, HEIGHT_OPTIONS, Heading, type HeadingProps, type HookWindowSize, type HoverableBoxProperties, ICON_NAMES, Icon, type IconProps, type InputRangeProps, LINE_HEIGHT_OPTIONS, Modal, ModalBaseComponent, type ModalProps, type ModalStatic, type ModalWithStaticComponents, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, type RadioGroupProps, RangeInput, ResponsiveContext, type ResponsiveContextShape, type ResponsiveProp, ResponsiveProvider, type ResponsiveProviderProps, type Row, SPACING_OPTIONS, SelectInput, SelectInputInset, type SelectInputInsetProps, type SelectInputInsetSize, SelectInputNative, type SelectInputNativeOption, type SelectInputNativeProps, type SelectInputNativeSize, type SelectInputOptions, type SelectInputProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, type SimulatedEventPayloadType, Spinner, type SpinnerProps, type StylesAndClasses, Switch, type SwitchProps, type SwitchSize, type SyncSelectInputProps, Table, type TableProps, TextInput, TextInputInset, type TextInputInsetProps, type TextInputInsetSize, type TextInputProps, type TextInputSize, type TextInputSizeType, TextareaInput, TextareaInputInset, type TextareaInputInsetProps, type TextareaInputInsetSize, type TextareaInputProps, type TextareaInputSize, type Theme, ThemeProvider, ThemeProviderContext, TimePicker, type TimePickerProps, type Toast, ToastContainer, type ToastContainerProps, type ToastOptions, type ToastPosition, type ToastType, Toggle, ToggleGroup, ToggleGroupItem, type ToggleVariant$1 as ToggleVariant, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, type UnknownPropertiesObjType, type UseOpenCloseProps, type UseOpenCloseState, type ValueFunction, type ValueOrFunction, WIDTH_OPTIONS, Z_INDEX_OPTIONS, Z_INDEX_VALUES, boxPropsKeys, createRectRef, cssShorthandToClasses, doesStringIncludeCssUnit, filter, generateBaseClasses, generateResponsiveClasses, getAutoCompleteValue, getColumnKeys, getDimensionClasses, getDimensionCss, getDimensionStyles, getElementType, getFlexClasses, getFlexCss, getFlexStyles, handleReactRouterClick, isFunction, isModifiedEvent, isValidSpacingValue, mergeRefs, parsePropertyValue, prefersReducedMotion, resolveValue, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };