@helpwave/hightide 0.6.2 → 0.6.3

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default, { HTMLAttributes, SVGProps, CSSProperties, ReactNode, PropsWithChildren, RefObject, Dispatch, SetStateAction, ButtonHTMLAttributes, InputHTMLAttributes, ComponentProps, TextareaHTMLAttributes, LabelHTMLAttributes } from 'react';
+import * as react from 'react';
+import react__default, { HTMLAttributes, SVGProps, CSSProperties, ReactNode, PropsWithChildren, RefObject, Dispatch, SetStateAction, ButtonHTMLAttributes, InputHTMLAttributes, ComponentProps, TextareaHTMLAttributes, LabelHTMLAttributes } from 'react';
 import Link from 'next/link';
 import { Column, RowData, FilterFn, ColumnDef, Table as Table$1, InitialTableState, Row, TableState, TableOptions, RowSelectionState, SortDirection } from '@tanstack/react-table';
 import { Translation, TranslationEntries, PartialTranslationExtension } from '@helpwave/internationalization';
@@ -177,7 +177,7 @@ type FormFieldLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & O
     description?: ReactNode;
     descriptionProps?: Omit<HTMLAttributes<HTMLParagraphElement>, 'children' | 'id'>;
 };
-declare const FormFieldLayout: React$1.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & Omit<Partial<FormFieldInteractionStates>, "invalid"> & {
+declare const FormFieldLayout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & Omit<Partial<FormFieldInteractionStates>, "invalid"> & {
     children: (bag: FormFieldLayoutBag) => ReactNode;
     ids?: Partial<FormFieldLayoutIds>;
     label?: ReactNode;
@@ -186,32 +186,44 @@ declare const FormFieldLayout: React$1.ForwardRefExoticComponent<Omit<HTMLAttrib
     invalidDescriptionProps?: Omit<HTMLAttributes<HTMLDivElement>, "children" | "id">;
     description?: ReactNode;
     descriptionProps?: Omit<HTMLAttributes<HTMLParagraphElement>, "children" | "id">;
-} & React$1.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type FormValidationBehaviour = 'always' | 'touched' | 'submit';
 type FormValue = Record<string, any>;
 type FormEvent<T extends FormValue> = {
-    type: 'submit';
+    type: 'onSubmit';
     key: 'ALL';
+    hasErrors: boolean;
     values: T;
+    errors: Partial<Record<keyof T, ReactNode>>;
 } | {
-    type: 'submitError';
+    type: 'reset';
     key: 'ALL';
     values: T;
     errors: Partial<Record<keyof T, ReactNode>>;
 } | {
-    type: 'reset';
+    type: 'onTouched';
+    key: keyof T;
+    value: T[keyof T];
+    values: T;
+} | {
+    type: 'onUpdate';
     key: 'ALL';
+    updatedKeys: (keyof T)[];
+    update: Partial<T>;
     values: T;
+    hasErrors: boolean;
     errors: Partial<Record<keyof T, ReactNode>>;
 } | {
     type: 'onChange';
     key: keyof T;
     value: T[keyof T];
+    values: T;
 } | {
     type: 'onError';
     key: keyof T;
     value: T[keyof T];
+    values: T;
     error: ReactNode;
 };
 type FormEventListener<T extends FormValue> = (event: FormEvent<T>) => void;
@@ -219,6 +231,7 @@ type FormValidator<T extends FormValue> = (value: T[keyof T]) => ReactNode;
 type FormStoreProps<T extends FormValue> = {
     initialValues: T;
     hasTriedSubmitting?: boolean;
+    submittingTouchesAll?: boolean;
     validators?: Partial<{
         [K in keyof T]: (v: T[K]) => ReactNode;
     }>;
@@ -233,11 +246,12 @@ declare class FormStore<T extends FormValue> {
     private errors;
     private touched;
     private listeners;
-    constructor({ initialValues, hasTriedSubmitting, validators, validationBehaviour, }: FormStoreProps<T>);
+    private submittingTouchesAll;
+    constructor({ initialValues, hasTriedSubmitting, submittingTouchesAll, validators, validationBehaviour, }: FormStoreProps<T>);
     getValue<K extends keyof T>(key: K): T[K];
     getAllValues(): T;
-    setValue<K extends keyof T>(key: K, value: T[K]): void;
-    setValues(values: Partial<T>): void;
+    setValue<K extends keyof T>(key: K, value: T[K], triggerUpdate?: boolean): void;
+    setValues(values: Partial<T>, triggerUpdate?: boolean): void;
     getTouched(key: keyof T): boolean;
     setTouched(key: keyof T, isTouched?: boolean): void;
     getHasError(): boolean;
@@ -254,30 +268,38 @@ declare class FormStore<T extends FormValue> {
     reset(): void;
 }
 
-type FormFieldFocusableElementProps = FormFieldAriaAttributes & {
-    id: string;
-    ref: (element: HTMLElement | null) => void;
-};
-type FormFieldBag<T extends FormValue, K extends keyof T> = {
-    dataProps: FormFieldDataHandling<T[K]>;
-    focusableElementProps: FormFieldFocusableElementProps;
-    interactionStates: FormFieldInteractionStates;
-};
-interface FormFieldProps<T extends FormValue, K extends keyof T> extends Omit<FormFieldLayoutProps, 'invalidDescription' | 'children'> {
-    children: (bag: FormFieldBag<T, K>) => ReactNode;
-    name: K;
-}
-type FormFieldDataHandling<T> = {
-    value: T;
-    onValueChange: (value: T) => void;
-    onEditComplete: (value: T) => void;
-};
-declare const FormField: <T extends FormValue, K extends keyof T>({ children, name, ...props }: FormFieldProps<T, K>) => react_jsx_runtime.JSX.Element;
-
 type UseCreateFormProps<T extends FormValue> = FormStoreProps<T> & {
     onFormSubmit: (values: T) => void;
     onFormError?: (values: T, errors: Partial<Record<keyof T, ReactNode>>) => void;
+    /**
+     * Called when the form values change.
+     *
+     * E.g. a key press for an input field.
+     *
+     * For most purposes use {@link onUpdate} instead.
+     * @param values The new values of the form.
+     */
     onValueChange?: (values: T) => void;
+    /**
+     * Called when the form values change and the corresponding inputs determined that the user
+     * finished editing these fields and the client should make an update against the server.
+     *
+     * E.g. a user finished editing an input field by pressing enter or blurring the field.
+     *
+     * @param updatedKeys The keys that were updated.
+     * @param update The update that was made.
+     */
+    onValidUpdate?: (updatedKeys: (keyof T)[], update: Partial<T>) => void;
+    /**
+     * Called when the form values change and the corresponding inputs determined that the user
+     * finished editing these fields and the client should make an update against the server.
+     *
+     * E.g. a user finished editing an input field by pressing enter or blurring the field.
+     *
+     * @param updatedKeys The keys that were updated.
+     * @param update The update that was made.
+     */
+    onUpdate?: (updatedKeys: (keyof T)[], update: Partial<T>) => void;
     scrollToElements?: boolean;
     scrollOptions?: ScrollIntoViewOptions;
 };
@@ -287,7 +309,6 @@ type UseCreateFormResult<T extends FormValue> = {
     submit: () => void;
     update: (updater: Partial<T> | ((current: T) => Partial<T>)) => void;
     validateAll: () => void;
-    getDataProps: <K extends keyof T>(key: K) => FormFieldDataHandling<T[K]>;
     getError: (key: keyof T) => ReactNode;
     getErrors: () => Partial<Record<keyof T, ReactNode>>;
     getIsValid: () => boolean;
@@ -295,28 +316,56 @@ type UseCreateFormResult<T extends FormValue> = {
     getValue: <K extends keyof T>(key: K) => T[K];
     registerRef: (key: keyof T) => (el: HTMLElement | null) => void;
 };
-declare function useCreateForm<T extends FormValue>({ onFormSubmit, onFormError, onValueChange, initialValues, hasTriedSubmitting, validators, validationBehaviour, scrollToElements, scrollOptions, }: UseCreateFormProps<T>): UseCreateFormResult<T>;
+declare function useCreateForm<T extends FormValue>({ onFormSubmit, onFormError, onValueChange, onUpdate, onValidUpdate, initialValues, hasTriedSubmitting, validators, validationBehaviour, scrollToElements, scrollOptions, }: UseCreateFormProps<T>): UseCreateFormResult<T>;
+
+type FormFieldFocusableElementProps = FormFieldAriaAttributes & {
+    id: string;
+    ref: (element: HTMLElement | null) => void;
+};
+type FormFieldBag<T extends FormValue, K extends keyof T> = {
+    dataProps: FormFieldDataHandling<T[K]>;
+    focusableElementProps: FormFieldFocusableElementProps;
+    interactionStates: FormFieldInteractionStates;
+    other: {
+        updateValue: (value: T[K]) => void;
+    };
+};
+interface FormFieldProps<T extends FormValue, K extends keyof T> extends Omit<FormFieldLayoutProps, 'invalidDescription' | 'children'> {
+    children: (bag: FormFieldBag<T, K>) => ReactNode;
+    name: K;
+    triggerUpdateOnEditComplete?: boolean;
+}
+type FormFieldDataHandling<T> = {
+    value: T;
+    onValueChange: (value: T) => void;
+    onEditComplete: (value: T) => void;
+};
+declare const FormField: <T extends FormValue, K extends keyof T>({ children, name, triggerUpdateOnEditComplete, ...props }: FormFieldProps<T, K>) => react_jsx_runtime.JSX.Element;
 
 type FormContextType<T extends FormValue> = UseCreateFormResult<T>;
-declare const FormContext: React$1.Context<FormContextType<any>>;
+declare const FormContext: react.Context<FormContextType<any>>;
 type FormProviderProps<T extends FormValue> = PropsWithChildren & {
     state: FormContextType<T>;
 };
 declare const FormProvider: <T extends FormValue>({ children, state }: FormProviderProps<T>) => react_jsx_runtime.JSX.Element;
 declare function useForm<T extends FormValue>(): FormContextType<T>;
+type UseFormFieldOptions = {
+    triggerUpdate?: boolean;
+};
 type FormFieldResult<T> = {
+    store: FormStore<T>;
     value: T;
     error: ReactNode;
     dataProps: FormFieldDataHandling<T>;
     registerRef: (el: HTMLElement | null) => void;
 };
-declare function useFormField<T extends FormValue, K extends keyof T>(key: K): FormFieldResult<T[K]> | null;
+declare function useFormField<T extends FormValue, K extends keyof T>(key: K, { triggerUpdate }: UseFormFieldOptions): FormFieldResult<T[K]> | null;
 
 interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {
     isSelected: boolean;
     index: number;
 }
-declare const CarouselSlide: React__default.ForwardRefExoticComponent<CarouselSlideProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const CarouselSlide: react__default.ForwardRefExoticComponent<CarouselSlideProps & react__default.RefAttributes<HTMLDivElement>>;
 type CarouselProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     children: ReactNode[];
     animationTime?: number;
@@ -361,7 +410,7 @@ type DrawerProps = HTMLAttributes<HTMLDivElement> & {
     backgroundClassName?: string;
     onClose: () => void;
 };
-declare const Drawer: ({ children, isOpen, alignment, titleElement, description, containerClassName, backgroundClassName, onClose, ...props }: DrawerProps) => React$1.ReactPortal;
+declare const Drawer: ({ children, isOpen, alignment, titleElement, description, containerClassName, backgroundClassName, onClose, ...props }: DrawerProps) => react.ReactPortal;
 
 type ExpandableRootProps = HTMLAttributes<HTMLDivElement> & {
     isExpanded?: boolean;
@@ -369,29 +418,27 @@ type ExpandableRootProps = HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean;
     allowContainerToggle?: boolean;
 };
-declare const ExpandableRoot: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const ExpandableRoot: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     isExpanded?: boolean;
     onExpandedChange?: (isExpanded: boolean) => void;
     disabled?: boolean;
     allowContainerToggle?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLDivElement>>;
 type ExpandableHeaderProps = HTMLAttributes<HTMLDivElement> & {
     isUsingDefaultIcon?: boolean;
 };
-declare const ExpandableHeader: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const ExpandableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     isUsingDefaultIcon?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLDivElement>>;
 type ExpandableContentProps = HTMLAttributes<HTMLDivElement> & {
     forceMount?: boolean;
 };
-declare const ExpandableContent: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const ExpandableContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     forceMount?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
-type IconBuilder = (expanded: boolean) => ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
 type ExpandableProps = PropsWithChildren<{
     id?: string;
     label: ReactNode;
-    icon?: IconBuilder;
     isExpanded?: boolean;
     onChange?: (isExpanded: boolean) => void;
     clickOnlyOnHeader?: boolean;
@@ -401,10 +448,9 @@ type ExpandableProps = PropsWithChildren<{
     contentClassName?: string;
     contentExpandedClassName?: string;
 }>;
-declare const Expandable: React$1.ForwardRefExoticComponent<{
+declare const Expandable: react.ForwardRefExoticComponent<{
     id?: string;
     label: ReactNode;
-    icon?: IconBuilder;
     isExpanded?: boolean;
     onChange?: (isExpanded: boolean) => void;
     clickOnlyOnHeader?: boolean;
@@ -415,11 +461,10 @@ declare const Expandable: React$1.ForwardRefExoticComponent<{
     contentExpandedClassName?: string;
 } & {
     children?: ReactNode | undefined;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const ExpandableUncontrolled: React$1.ForwardRefExoticComponent<{
+} & react.RefAttributes<HTMLDivElement>>;
+declare const ExpandableUncontrolled: react.ForwardRefExoticComponent<{
     id?: string;
     label: ReactNode;
-    icon?: IconBuilder;
     isExpanded?: boolean;
     onChange?: (isExpanded: boolean) => void;
     clickOnlyOnHeader?: boolean;
@@ -430,7 +475,7 @@ declare const ExpandableUncontrolled: React$1.ForwardRefExoticComponent<{
     contentExpandedClassName?: string;
 } & {
     children?: ReactNode | undefined;
-} & React$1.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type FAQItem = Pick<ExpandableProps, 'isExpanded' | 'className'> & {
     title: string;
@@ -475,7 +520,7 @@ type FloatingContainerProps = HTMLAttributes<HTMLDivElement> & UseFloatingElemen
  * Notes:
  * - to hide it use the hidden attribute as other means break the functionality
  */
-declare const FloatingContainer: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const FloatingContainer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     verticalAlignment?: FloatingElementAlignment;
     horizontalAlignment?: FloatingElementAlignment;
     screenPadding?: number;
@@ -491,7 +536,7 @@ declare const FloatingContainer: React$1.ForwardRefExoticComponent<HTMLAttribute
      * Use sparingly
      */
     backgroundOverlay?: ReactNode;
-} & React$1.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLDivElement>>;
 
 interface InfiniteScrollProps {
     itemCount: number;
@@ -516,10 +561,10 @@ type ListBoxItemProps = HTMLAttributes<HTMLLIElement> & {
     value: string;
     disabled?: boolean;
 };
-declare const ListBoxItem: React__default.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+declare const ListBoxItem: react__default.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
     value: string;
     disabled?: boolean;
-} & React__default.RefAttributes<HTMLLIElement>>;
+} & react__default.RefAttributes<HTMLLIElement>>;
 type ListBoxOrientation = 'vertical' | 'horizontal';
 type ListBoxPrimitiveProps = HTMLAttributes<HTMLUListElement> & {
     value?: string[];
@@ -529,14 +574,14 @@ type ListBoxPrimitiveProps = HTMLAttributes<HTMLUListElement> & {
     isMultiple?: boolean;
     orientation?: ListBoxOrientation;
 };
-declare const ListBoxPrimitive: React__default.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+declare const ListBoxPrimitive: react__default.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     value?: string[];
     onItemClicked?: (value: string) => void;
     onSelectionChanged?: (value: string[]) => void;
     isSelection?: boolean;
     isMultiple?: boolean;
     orientation?: ListBoxOrientation;
-} & React__default.RefAttributes<HTMLUListElement>>;
+} & react__default.RefAttributes<HTMLUListElement>>;
 type ListBoxMultipleProps = Omit<ListBoxPrimitiveProps, 'isMultiple'>;
 declare const ListBoxMultiple: ({ ...props }: ListBoxMultipleProps) => react_jsx_runtime.JSX.Element;
 type ListBoxMultipleUncontrolledProps = ListBoxMultipleProps;
@@ -545,10 +590,10 @@ type ListBoxProps = Omit<ListBoxPrimitiveProps, 'isMultiple' | 'value' | 'onSele
     value?: string;
     onSelectionChanged?: (value: string) => void;
 };
-declare const ListBox: React__default.ForwardRefExoticComponent<Omit<ListBoxPrimitiveProps, "value" | "onSelectionChanged" | "isMultiple"> & {
+declare const ListBox: react__default.ForwardRefExoticComponent<Omit<ListBoxPrimitiveProps, "value" | "onSelectionChanged" | "isMultiple"> & {
     value?: string;
     onSelectionChanged?: (value: string) => void;
-} & React__default.RefAttributes<HTMLUListElement>>;
+} & react__default.RefAttributes<HTMLUListElement>>;
 type ListBoxUncontrolledProps = ListBoxProps;
 declare const ListBoxUncontrolled: ({ value: initialValue, onSelectionChanged, ...props }: ListBoxUncontrolledProps) => react_jsx_runtime.JSX.Element;
 
@@ -678,7 +723,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 /**
  * A button with a solid background and different sizes
  */
-declare const Button: React$1.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
      * @default 'medium'
      */
@@ -690,7 +735,7 @@ declare const Button: React$1.ForwardRefExoticComponent<ButtonHTMLAttributes<HTM
      */
     coloringStyle?: ButtonColoringStyle;
     allowClickEventPropagation?: boolean;
-} & React$1.RefAttributes<HTMLButtonElement>>;
+} & react.RefAttributes<HTMLButtonElement>>;
 
 type DialogPosition = 'top' | 'center' | 'none';
 type DialogProps = HTMLAttributes<HTMLDivElement> & {
@@ -713,7 +758,7 @@ type DialogProps = HTMLAttributes<HTMLDivElement> & {
 /**
  * A generic dialog window which is managed by its parent
  */
-declare const Dialog: ({ children, isOpen, titleElement, description, isModal, onClose, backgroundClassName, position, containerClassName, ...props }: PropsWithChildren<DialogProps>) => React$1.ReactPortal;
+declare const Dialog: ({ children, isOpen, titleElement, description, isModal, onClose, backgroundClassName, position, containerClassName, ...props }: PropsWithChildren<DialogProps>) => react.ReactPortal;
 
 type ConfirmDialogType = 'positive' | 'negative' | 'neutral' | 'primary';
 type ButtonOverwriteType = {
@@ -774,17 +819,17 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> & Partial
  *
  * Its state is managed must be managed by the parent
  */
-declare const Input: React__default.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value"> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
+declare const Input: react__default.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value"> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
     editCompleteOptions?: EditCompleteOptions;
-} & React__default.RefAttributes<HTMLInputElement>>;
+} & react__default.RefAttributes<HTMLInputElement>>;
 /**
  * A Component for inputting text or other information
  *
  * Its state is managed by the component itself
  */
-declare const InputUncontrolled: React__default.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value"> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
+declare const InputUncontrolled: react__default.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value"> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
     editCompleteOptions?: EditCompleteOptions;
-} & React__default.RefAttributes<HTMLInputElement>>;
+} & react__default.RefAttributes<HTMLInputElement>>;
 
 type InputModalProps = ConfirmDialogProps & {
     inputs: InputProps[];
@@ -1107,116 +1152,6 @@ type ScrollPickerProps<T> = {
  */
 declare const ScrollPicker: <T>({ options, mapping, selected, onChange, disabled, }: ScrollPickerProps<T>) => react_jsx_runtime.JSX.Element;
 
-type SelectIconAppearance = 'left' | 'right' | 'none';
-type SelectRootProps = PropsWithChildren & {
-    id?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    values?: string[];
-    onValuesChange?: (value: string[]) => void;
-    isOpen?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    isMultiSelect?: boolean;
-    iconAppearance?: SelectIconAppearance;
-};
-declare const SelectRoot: ({ children, id, value, onValueChange, values, onValuesChange, isOpen, disabled, invalid, isMultiSelect, iconAppearance, }: SelectRootProps) => react_jsx_runtime.JSX.Element;
-type SelectOptionProps = Omit<HTMLAttributes<HTMLLIElement>, 'children'> & {
-    value: string;
-    disabled?: boolean;
-    iconAppearance?: SelectIconAppearance;
-    children?: ReactNode;
-};
-declare const SelectOption: React__default.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLLIElement>, "children"> & {
-    value: string;
-    disabled?: boolean;
-    iconAppearance?: SelectIconAppearance;
-    children?: ReactNode;
-} & React__default.RefAttributes<HTMLLIElement>>;
-type SelectButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    placeholder?: ReactNode;
-    selectedDisplay?: (value: string[]) => ReactNode;
-};
-declare const SelectButton: React__default.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
-    placeholder?: ReactNode;
-    selectedDisplay?: (value: string[]) => ReactNode;
-} & React__default.RefAttributes<HTMLButtonElement>>;
-type SelectChipDisplayProps = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean;
-    placeholder?: ReactNode;
-};
-declare const SelectChipDisplay: React__default.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean;
-    placeholder?: ReactNode;
-} & React__default.RefAttributes<HTMLDivElement>>;
-type Orientation = 'vertical' | 'horizontal';
-type SelectContentProps = HTMLAttributes<HTMLUListElement> & {
-    alignment?: Pick<UseFloatingElementOptions, 'gap' | 'horizontalAlignment' | 'verticalAlignment'>;
-    orientation?: Orientation;
-    containerClassName?: string;
-};
-declare const SelectContent: React__default.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
-    alignment?: Pick<UseFloatingElementOptions, "gap" | "horizontalAlignment" | "verticalAlignment">;
-    orientation?: Orientation;
-    containerClassName?: string;
-} & React__default.RefAttributes<HTMLUListElement>>;
-type SelectProps = Omit<SelectRootProps, 'isMultiSelect' | 'values' | 'onValuesChange'> & {
-    contentPanelProps?: SelectContentProps;
-    buttonProps?: Omit<SelectButtonProps, 'selectedDisplay'> & {
-        selectedDisplay?: (value: string) => ReactNode;
-    };
-};
-declare const Select: React__default.ForwardRefExoticComponent<Omit<SelectRootProps, "values" | "onValuesChange" | "isMultiSelect"> & {
-    contentPanelProps?: SelectContentProps;
-    buttonProps?: Omit<SelectButtonProps, "selectedDisplay"> & {
-        selectedDisplay?: (value: string) => ReactNode;
-    };
-} & React__default.RefAttributes<HTMLButtonElement>>;
-type SelectUncontrolledProps = SelectProps;
-declare const SelectUncontrolled: React__default.ForwardRefExoticComponent<Omit<SelectRootProps, "values" | "onValuesChange" | "isMultiSelect"> & {
-    contentPanelProps?: SelectContentProps;
-    buttonProps?: Omit<SelectButtonProps, "selectedDisplay"> & {
-        selectedDisplay?: (value: string) => ReactNode;
-    };
-} & React__default.RefAttributes<HTMLButtonElement>>;
-type MultiSelectProps = Omit<SelectRootProps, 'isMultiSelect' | 'value' | 'values' | 'onValueChange' | 'onValuesChange'> & {
-    value?: string[];
-    onValueChange?: (value: string[]) => void;
-    contentPanelProps?: SelectContentProps;
-    buttonProps?: SelectButtonProps;
-};
-declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<SelectRootProps, "values" | "value" | "onValueChange" | "onValuesChange" | "isMultiSelect"> & {
-    value?: string[];
-    onValueChange?: (value: string[]) => void;
-    contentPanelProps?: SelectContentProps;
-    buttonProps?: SelectButtonProps;
-} & React__default.RefAttributes<HTMLButtonElement>>;
-declare const MultiSelectUncontrolled: React__default.ForwardRefExoticComponent<Omit<SelectRootProps, "values" | "value" | "onValueChange" | "onValuesChange" | "isMultiSelect"> & {
-    value?: string[];
-    onValueChange?: (value: string[]) => void;
-    contentPanelProps?: SelectContentProps;
-    buttonProps?: SelectButtonProps;
-} & React__default.RefAttributes<HTMLButtonElement>>;
-type MultiSelectChipDisplayProps = Omit<SelectRootProps, 'isMultiSelect' | 'value' | 'values' | 'onValueChange' | 'onValuesChange'> & {
-    value?: string[];
-    onValueChange?: (value: string[]) => void;
-    contentPanelProps?: SelectContentProps;
-    chipDisplayProps?: SelectChipDisplayProps;
-};
-declare const MultiSelectChipDisplay: React__default.ForwardRefExoticComponent<Omit<SelectRootProps, "values" | "value" | "onValueChange" | "onValuesChange" | "isMultiSelect"> & {
-    value?: string[];
-    onValueChange?: (value: string[]) => void;
-    contentPanelProps?: SelectContentProps;
-    chipDisplayProps?: SelectChipDisplayProps;
-} & React__default.RefAttributes<HTMLDivElement>>;
-type MultiSelectChipDisplayUncontrolledProps = MultiSelectChipDisplayProps;
-declare const MultiSelectChipDisplayUncontrolled: React__default.ForwardRefExoticComponent<Omit<SelectRootProps, "values" | "value" | "onValueChange" | "onValuesChange" | "isMultiSelect"> & {
-    value?: string[];
-    onValueChange?: (value: string[]) => void;
-    contentPanelProps?: SelectContentProps;
-    chipDisplayProps?: SelectChipDisplayProps;
-} & React__default.RefAttributes<HTMLDivElement>>;
-
 type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
     saveDelayOptions?: UseDelayOptions;
 };
@@ -1225,9 +1160,9 @@ type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>
  *
  * The State is managed by the parent
  */
-declare const Textarea: React$1.ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
+declare const Textarea: react.ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
     saveDelayOptions?: UseDelayOptions;
-} & React$1.RefAttributes<HTMLTextAreaElement>>;
+} & react.RefAttributes<HTMLTextAreaElement>>;
 /**
  * A Textarea component that is not controlled by its parent
  */
@@ -1250,7 +1185,7 @@ type ThemeContextType = {
     resolvedTheme: ResolvedTheme;
     setTheme: Dispatch<SetStateAction<ThemeType>>;
 };
-declare const ThemeContext: React$1.Context<ThemeContextType>;
+declare const ThemeContext: react.Context<ThemeContextType>;
 type ThemeProviderProps = PropsWithChildren & Partial<ThemeConfig> & {
     /**
      * Only set this if you want to control the theme yourself
@@ -1493,7 +1428,7 @@ type ConfigType = {
     config: HightideConfig;
     setConfig: (configOverwrite: DeepPartial<HightideConfig>) => void;
 };
-declare const HightideConfigContext: React$1.Context<ConfigType>;
+declare const HightideConfigContext: react.Context<ConfigType>;
 type HightideConfigProviderProps = PropsWithChildren & DeepPartial<HightideConfig>;
 declare const HightideConfigProvider: ({ children, ...initialOverwrite }: HightideConfigProviderProps) => react_jsx_runtime.JSX.Element;
 declare const useHightideConfig: () => ConfigType;
@@ -1675,9 +1610,9 @@ type InsideLabelInputProps = Omit<InputProps, 'aria-label' | 'aria-labelledby' |
  *
  * The State is managed by the parent
  */
-declare const InsideLabelInput: React$1.ForwardRefExoticComponent<Omit<InputProps, "aria-label" | "aria-labelledby" | "placeholder"> & {
+declare const InsideLabelInput: react.ForwardRefExoticComponent<Omit<InputProps, "aria-label" | "aria-labelledby" | "placeholder"> & {
     label: ReactNode;
-} & React$1.RefAttributes<HTMLInputElement>>;
+} & react.RefAttributes<HTMLInputElement>>;
 declare const InsideLabelInputUncontrolled: ({ value: initialValue, ...props }: InsideLabelInputProps) => react_jsx_runtime.JSX.Element;
 
 type SearchBarProps = Omit<InputProps, 'onValueChange' | 'onEditComplete'> & {
@@ -1698,12 +1633,12 @@ type ToggleableInputProps = InputProps & {
  *
  * The State is managed by the parent
  */
-declare const ToggleableInput: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "value"> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
+declare const ToggleableInput: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "value"> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
     editCompleteOptions?: EditCompleteOptions;
 } & {
     initialState?: "editing" | "display";
     editCompleteOptions?: Omit<EditCompleteOptions, "allowEnterComplete">;
-} & React$1.RefAttributes<HTMLInputElement>>;
+} & react.RefAttributes<HTMLInputElement>>;
 declare const ToggleableInputUncontrolled: ({ value: initialValue, onValueChange, ...restProps }: ToggleableInputProps) => react_jsx_runtime.JSX.Element;
 
 type PropertyField<T> = {
@@ -1779,6 +1714,213 @@ type TextPropertyProps = PropertyField<string>;
  */
 declare const TextProperty: ({ value, readOnly, onRemove, onValueChange, onEditComplete, ...baseProps }: TextPropertyProps) => react_jsx_runtime.JSX.Element;
 
+type RegisteredOption = {
+    value: string;
+    label: ReactNode;
+    disabled: boolean;
+    ref: React.RefObject<HTMLLIElement>;
+};
+type HighlightStartPositionBehavior = 'first' | 'last';
+type SelectIconAppearance = 'left' | 'right' | 'none';
+type InternalSelectContextState = {
+    isOpen: boolean;
+    options: RegisteredOption[];
+    highlightedValue?: string;
+};
+type SelectContextIds = {
+    trigger: string;
+    content: string;
+};
+type SelectContextState = InternalSelectContextState & FormFieldInteractionStates & {
+    value: string[];
+    selectedOptions: RegisteredOption[];
+};
+type SelectConfiguration = {
+    isMultiSelect: boolean;
+    iconAppearance: SelectIconAppearance;
+};
+type ToggleOpenOptions = {
+    highlightStartPositionBehavior?: HighlightStartPositionBehavior;
+};
+type SelectContextType = {
+    ids: SelectContextIds;
+    setIds: Dispatch<SetStateAction<SelectContextIds>>;
+    state: SelectContextState;
+    config: SelectConfiguration;
+    item: {
+        register: (item: RegisteredOption) => void;
+        unregister: (value: string) => void;
+        toggleSelection: (value: string, isSelected?: boolean) => void;
+        highlightItem: (value: string) => void;
+        moveHighlightedIndex: (delta: number) => void;
+    };
+    trigger: {
+        ref: React.RefObject<HTMLElement>;
+        register: (element: React.RefObject<HTMLElement>) => void;
+        unregister: () => void;
+        toggleOpen: (isOpen?: boolean, options?: ToggleOpenOptions) => void;
+    };
+};
+declare const SelectContext: react.Context<SelectContextType>;
+declare function useSelectContext(): SelectContextType;
+type SharedSelectRootProps = Partial<FormFieldInteractionStates> & PropsWithChildren & {
+    id?: string;
+    initialIsOpen?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    onClose?: () => void;
+};
+type SelectRootProps = SharedSelectRootProps & Partial<FormFieldDataHandling<string>>;
+declare const SelectRoot: ({ value, onValueChange, onEditComplete, ...props }: SelectRootProps) => react_jsx_runtime.JSX.Element;
+type MultiSelectRootProps = SharedSelectRootProps & Partial<FormFieldDataHandling<string[]>>;
+declare const MultiSelectRoot: ({ value, onValueChange, onEditComplete, ...props }: MultiSelectRootProps) => react_jsx_runtime.JSX.Element;
+
+type SelectOptionProps = Omit<HTMLAttributes<HTMLLIElement>, 'children'> & {
+    value: string;
+    disabled?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    children?: ReactNode;
+};
+declare const SelectOption: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLLIElement>, "children"> & {
+    value: string;
+    disabled?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLLIElement>>;
+type SelectButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    placeholder?: ReactNode;
+    selectedDisplay?: (value: string[]) => ReactNode;
+};
+declare const SelectButton: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    placeholder?: ReactNode;
+    selectedDisplay?: (value: string[]) => ReactNode;
+} & react.RefAttributes<HTMLButtonElement>>;
+type Orientation = 'vertical' | 'horizontal';
+type SelectContentProps = HTMLAttributes<HTMLUListElement> & {
+    alignment?: Pick<UseFloatingElementOptions, 'gap' | 'horizontalAlignment' | 'verticalAlignment'>;
+    orientation?: Orientation;
+    containerClassName?: string;
+};
+declare const SelectContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    alignment?: Pick<UseFloatingElementOptions, "gap" | "horizontalAlignment" | "verticalAlignment">;
+    orientation?: Orientation;
+    containerClassName?: string;
+} & react.RefAttributes<HTMLUListElement>>;
+type MultiSelectOptionProps = SelectOptionProps;
+declare const MultiSelectOption: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLLIElement>, "children"> & {
+    value: string;
+    disabled?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLLIElement>>;
+type MultiSelectContentProps = SelectContentProps;
+declare const MultiSelectContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    alignment?: Pick<UseFloatingElementOptions, "gap" | "horizontalAlignment" | "verticalAlignment">;
+    orientation?: Orientation;
+    containerClassName?: string;
+} & react.RefAttributes<HTMLUListElement>>;
+type MultiSelectButtonProps = SelectButtonProps;
+declare const MultiSelectButton: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    placeholder?: ReactNode;
+    selectedDisplay?: (value: string[]) => ReactNode;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type MultiSelectProps = MultiSelectRootProps & {
+    contentPanelProps?: MultiSelectContentProps;
+    buttonProps?: MultiSelectButtonProps;
+};
+declare const MultiSelect: react.ForwardRefExoticComponent<Partial<FormFieldInteractionStates> & {
+    children?: react.ReactNode | undefined;
+} & {
+    id?: string;
+    initialIsOpen?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    onClose?: () => void;
+} & Partial<FormFieldDataHandling<string[]>> & {
+    contentPanelProps?: MultiSelectContentProps;
+    buttonProps?: MultiSelectButtonProps;
+} & react.RefAttributes<HTMLButtonElement>>;
+declare const MultiSelectUncontrolled: react.ForwardRefExoticComponent<Partial<FormFieldInteractionStates> & {
+    children?: react.ReactNode | undefined;
+} & {
+    id?: string;
+    initialIsOpen?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    onClose?: () => void;
+} & Partial<FormFieldDataHandling<string[]>> & {
+    contentPanelProps?: MultiSelectContentProps;
+    buttonProps?: MultiSelectButtonProps;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type MultiSelectChipDisplayButtonProps = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean;
+    placeholder?: ReactNode;
+};
+declare const MultiSelectChipDisplayButton: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean;
+    placeholder?: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+type MultiSelectChipDisplayProps = MultiSelectRootProps & {
+    contentPanelProps?: MultiSelectContentProps;
+    chipDisplayProps?: MultiSelectChipDisplayButtonProps;
+};
+declare const MultiSelectChipDisplay: react.ForwardRefExoticComponent<Partial<FormFieldInteractionStates> & {
+    children?: ReactNode | undefined;
+} & {
+    id?: string;
+    initialIsOpen?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    onClose?: () => void;
+} & Partial<FormFieldDataHandling<string[]>> & {
+    contentPanelProps?: MultiSelectContentProps;
+    chipDisplayProps?: MultiSelectChipDisplayButtonProps;
+} & react.RefAttributes<HTMLDivElement>>;
+type MultiSelectChipDisplayUncontrolledProps = MultiSelectChipDisplayProps;
+declare const MultiSelectChipDisplayUncontrolled: react.ForwardRefExoticComponent<Partial<FormFieldInteractionStates> & {
+    children?: ReactNode | undefined;
+} & {
+    id?: string;
+    initialIsOpen?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    onClose?: () => void;
+} & Partial<FormFieldDataHandling<string[]>> & {
+    contentPanelProps?: MultiSelectContentProps;
+    chipDisplayProps?: MultiSelectChipDisplayButtonProps;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type SelectProps = SelectRootProps & {
+    contentPanelProps?: SelectContentProps;
+    buttonProps?: Omit<SelectButtonProps, 'selectedDisplay'> & {
+        selectedDisplay?: (value: string) => ReactNode;
+    };
+};
+declare const Select: react.ForwardRefExoticComponent<Partial<FormFieldInteractionStates> & {
+    children?: ReactNode | undefined;
+} & {
+    id?: string;
+    initialIsOpen?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    onClose?: () => void;
+} & Partial<FormFieldDataHandling<string>> & {
+    contentPanelProps?: SelectContentProps;
+    buttonProps?: Omit<SelectButtonProps, "selectedDisplay"> & {
+        selectedDisplay?: (value: string) => ReactNode;
+    };
+} & react.RefAttributes<HTMLButtonElement>>;
+type SelectUncontrolledProps = SelectProps;
+declare const SelectUncontrolled: react.ForwardRefExoticComponent<Partial<FormFieldInteractionStates> & {
+    children?: ReactNode | undefined;
+} & {
+    id?: string;
+    initialIsOpen?: boolean;
+    iconAppearance?: SelectIconAppearance;
+    onClose?: () => void;
+} & Partial<FormFieldDataHandling<string>> & {
+    contentPanelProps?: SelectContentProps;
+    buttonProps?: Omit<SelectButtonProps, "selectedDisplay"> & {
+        selectedDisplay?: (value: string) => ReactNode;
+    };
+} & react.RefAttributes<HTMLButtonElement>>;
+
 type FocusTrapProps = HTMLAttributes<HTMLDivElement> & {
     active?: boolean;
     initialFocus?: RefObject<HTMLElement | null>;
@@ -1792,7 +1934,7 @@ type FocusTrapProps = HTMLAttributes<HTMLDivElement> & {
 /**
  * A wrapper for the useFocusTrap hook that directly renders it to a div
  */
-declare const FocusTrap: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const FocusTrap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     active?: boolean;
     initialFocus?: RefObject<HTMLElement | null>;
     /**
@@ -1801,7 +1943,7 @@ declare const FocusTrap: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDi
      * Focuses the container instead
      */
     focusFirst?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type TransitionBag = {
     isOpen: boolean;
@@ -1823,13 +1965,13 @@ type TransitionWrapperProps = PropsWithBagFunctionOrChildren<TransitionBag> & {
 /**
  * Only use when you have a transition happening
  */
-declare function Transition({ children, show, includeAnimation, }: TransitionWrapperProps): string | number | bigint | boolean | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | React$1.ReactPortal | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode>>;
+declare function Transition({ children, show, includeAnimation, }: TransitionWrapperProps): string | number | bigint | boolean | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | react.ReactPortal | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode>>;
 
 type LocaleContextValue = {
     locale: HightideTranslationLocales;
     setLocale: Dispatch<SetStateAction<HightideTranslationLocales>>;
 };
-declare const LocaleContext: React$1.Context<LocaleContextValue>;
+declare const LocaleContext: react.Context<LocaleContextValue>;
 type LocaleWithSystem = HightideTranslationLocales | 'system';
 type LocaleProviderProps = PropsWithChildren & Partial<LocalizationConfig> & {
     locale?: LocaleWithSystem;
@@ -1955,9 +2097,9 @@ type UseOverlayRegistryResult = {
 };
 declare const useOverlayRegistry: (props?: UseOverlayRegistryProps) => UseOverlayRegistryResult;
 
-declare const useOverwritableState: <T>(overwriteValue?: T, onChange?: (value: T) => void) => [T, React__default.Dispatch<React__default.SetStateAction<T>>];
+declare const useOverwritableState: <T>(overwriteValue?: T, onChange?: (value: T) => void) => [T, react__default.Dispatch<react__default.SetStateAction<T>>];
 
-declare const useRerender: () => React$1.ActionDispatch<[]>;
+declare const useRerender: () => react.ActionDispatch<[]>;
 
 /**
  * A hook that wraps the event listener attachment
@@ -1985,7 +2127,7 @@ declare const useSearch: <T>({ list, initialSearch, searchMapping, additionalSea
     allItems: T[];
     updateSearch: (newSearch?: string) => void;
     search: string;
-    setSearch: React$1.Dispatch<React$1.SetStateAction<string>>;
+    setSearch: react.Dispatch<react.SetStateAction<string>>;
 };
 
 type TransitionState = 'opened' | 'closed' | 'opening' | 'closing';
@@ -2145,27 +2287,27 @@ type InteractionStateDataAttributes = {
 };
 declare function interactionStatesData(interactionStates: Partial<FormFieldInteractionStates>): Partial<InteractionStateDataAttributes>;
 type MouseEventExtenderProps<T> = {
-    fromProps?: React__default.MouseEventHandler<T>;
-    extensions: SingleOrArray<React__default.MouseEventHandler<T>>;
+    fromProps?: react__default.MouseEventHandler<T>;
+    extensions: SingleOrArray<react__default.MouseEventHandler<T>>;
 };
-declare function mouseEventExtender<T>({ fromProps, extensions }: MouseEventExtenderProps<T>): React__default.MouseEventHandler<T>;
+declare function mouseEventExtender<T>({ fromProps, extensions }: MouseEventExtenderProps<T>): react__default.MouseEventHandler<T>;
 type KeyoardEventExtenderProps<T> = {
-    fromProps: React__default.KeyboardEventHandler<T>;
-    extensions: SingleOrArray<React__default.KeyboardEventHandler<T>>;
+    fromProps: react__default.KeyboardEventHandler<T>;
+    extensions: SingleOrArray<react__default.KeyboardEventHandler<T>>;
 };
-declare function keyboardEventExtender<T>({ fromProps, extensions, }: KeyoardEventExtenderProps<T>): React__default.KeyboardEventHandler<T>;
+declare function keyboardEventExtender<T>({ fromProps, extensions, }: KeyoardEventExtenderProps<T>): react__default.KeyboardEventHandler<T>;
 declare function click<T>(onClick: () => void): {
     onClick: () => void;
-    onKeyDown: React__default.KeyboardEventHandler<T>;
+    onKeyDown: react__default.KeyboardEventHandler<T>;
 };
-declare function close<T>(onClose: () => void): React__default.KeyboardEventHandler<T>;
+declare function close<T>(onClose: () => void): react__default.KeyboardEventHandler<T>;
 type NavigateType<T> = {
-    left?: (event: React__default.KeyboardEvent<T>) => void;
-    right?: (event: React__default.KeyboardEvent<T>) => void;
-    up?: (event: React__default.KeyboardEvent<T>) => void;
-    down?: (event: React__default.KeyboardEvent<T>) => void;
+    left?: (event: react__default.KeyboardEvent<T>) => void;
+    right?: (event: react__default.KeyboardEvent<T>) => void;
+    up?: (event: react__default.KeyboardEvent<T>) => void;
+    down?: (event: react__default.KeyboardEvent<T>) => void;
 };
-declare function navigate<T>({ left, right, up, down, }: NavigateType<T>): React__default.KeyboardEventHandler<T>;
+declare function navigate<T>({ left, right, up, down, }: NavigateType<T>): react__default.KeyboardEventHandler<T>;
 type InteractionStateARIAAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'aria-disabled' | 'aria-invalid' | 'aria-readonly' | 'aria-required'>;
 declare function interactionStatesAria(interactionStates: Partial<FormFieldInteractionStates>, props?: Partial<InteractionStateARIAAttributes>): Partial<InteractionStateARIAAttributes>;
 declare const PropsUtil: {
@@ -2254,4 +2396,4 @@ declare class SessionStorageService extends StorageService {
 
 declare const writeToClipboard: (text: string) => Promise<void>;
 
-export { ASTNodeInterpreter, type ASTNodeInterpreterProps, AnimatedRing, type AnimatedRingProps, ArrayUtil, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BagFunction, type BagFunctionOrNode, type BagFunctionOrValue, BagFunctionUtil, BreadCrumbGroup, BreadCrumbLink, type BreadCrumbLinkProps, type BreadCrumbProps, BreadCrumbs, Button, type ButtonColor, type ButtonProps, ButtonUtil, Carousel, type CarouselProps, CarouselSlide, type CarouselSlideProps, Checkbox, CheckboxProperty, type CheckboxPropertyProps, type CheckboxProps, CheckboxUncontrolled, type CheckboxUncontrolledProps, Chip, type ChipColor, ChipList, type ChipListProps, type ChipProps, ChipUtil, Circle, type CircleProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogType, CopyToClipboardWrapper, type CopyToClipboardWrapperProps, type Crumb, DatePicker, type DatePickerProps, DatePickerUncontrolled, DateProperty, type DatePropertyProps, DateTimeInput, type DateTimeInputProps, DateTimeInputUncontrolled, DateTimePicker, type DateTimePickerMode, type DateTimePickerProps, DateTimePickerUncontrolled, DateUtils, DayPicker, type DayPickerProps, DayPickerUncontrolled, type DeepPartial, Dialog, type DialogPosition, type DialogProps, type Direction, DiscardChangesDialog, DividerInserter, type DividerInserterProps, Drawer, type DrawerAligment, type DrawerProps, Duration, type DurationJSON, type EaseFunction, EaseFunctions, type EditCompleteOptions, type EditCompleteOptionsResolved, ErrorComponent, type ErrorComponentProps, type Exact, Expandable, ExpandableContent, type ExpandableContentProps, ExpandableHeader, type ExpandableHeaderProps, type ExpandableProps, ExpandableRoot, type ExpandableRootProps, ExpandableUncontrolled, ExpansionIcon, type ExpansionIconProps, type FAQItem, FAQSection, type FAQSectionProps, FillerCell, type FillerCellProps, FloatingContainer, type FloatingContainerProps, type FloatingElementAlignment, FocusTrap, type FocusTrapProps, FormContext, type FormContextType, type FormEvent, type FormEventListener, FormField, type FormFieldAriaAttributes, type FormFieldBag, type FormFieldDataHandling, type FormFieldFocusableElementProps, type FormFieldInteractionStates, FormFieldLayout, type FormFieldLayoutBag, type FormFieldLayoutIds, type FormFieldLayoutProps, type FormFieldProps, type FormFieldResult, FormProvider, type FormProviderProps, FormStore, type FormStoreProps, type FormValidationBehaviour, type FormValidator, type FormValue, HelpwaveBadge, type HelpwaveBadgeProps, HelpwaveLogo, type HelpwaveProps, type HightideConfig, HightideConfigContext, HightideConfigProvider, type HightideConfigProviderProps, HightideProvider, type HightideTranslationEntries, type HightideTranslationLocales, InfiniteScroll, type InfiniteScrollProps, Input, InputDialog, type InputModalProps, type InputProps, InputUncontrolled, InsideLabelInput, InsideLabelInputUncontrolled, LanguageDialog, ListBox, ListBoxItem, type ListBoxItemProps, ListBoxMultiple, type ListBoxMultipleProps, ListBoxMultipleUncontrolled, type ListBoxMultipleUncontrolledProps, ListBoxPrimitive, type ListBoxPrimitiveProps, type ListBoxProps, ListBoxUncontrolled, type ListBoxUncontrolledProps, LoadingAndErrorComponent, type LoadingAndErrorComponentProps, LoadingAnimation, type LoadingAnimationProps, type LoadingComponentProps, LoadingContainer, LocalStorageService, LocaleContext, type LocaleContextValue, LocaleProvider, type LocaleProviderProps, type LocalizationConfig, LocalizationUtil, LoopingArrayCalculator, MarkdownInterpreter, type MarkdownInterpreterProps, Menu, type MenuBag, MenuItem, type MenuItemProps, type MenuProps, type Month, MultiSearchWithMapping, MultiSelect, MultiSelectChipDisplay, type MultiSelectChipDisplayProps, MultiSelectChipDisplayUncontrolled, type MultiSelectChipDisplayUncontrolledProps, MultiSelectProperty, type MultiSelectPropertyProps, type MultiSelectProps, MultiSelectUncontrolled, MultiSubjectSearchWithMapping, Navigation, NavigationItemList, type NavigationItemListProps, type NavigationItemType, type NavigationProps, NumberProperty, type NumberPropertyProps, type OverlayItem, Pagination, type PaginationProps, type PopoverHorizontalAlignment, type PopoverVerticalAlignment, ProgressIndicator, type ProgressIndicatorProps, PromiseUtils, PropertyBase, type PropertyBaseProps, type PropertyField, PropsUtil, type PropsWithBagFunction, type PropsWithBagFunctionOrChildren, RadialRings, type RadialRingsProps, type RangeOptions, type ResolvedTheme, Ring, type RingProps, RingWave, type RingWaveProps, ScrollPicker, type ScrollPickerProps, SearchBar, type SearchBarProps, Select, SelectButton, SelectChipDisplay, SelectContent, type SelectContentProps, SelectOption, type SelectOptionProps, type SelectProps, SelectRoot, type SelectRootProps, SelectUncontrolled, type SelectUncontrolledProps, SessionStorageService, SimpleSearch, SimpleSearchWithMapping, type SingleOrArray, SingleSelectProperty, type SingleSelectPropertyProps, StepperBar, type StepperBarProps, StepperBarUncontrolled, type StepperState, type SuperSet, type TabContextType, type TabInfo, TabList, TabPanel, TabSwitcher, type TabSwitcherProps, TabView, Table, TableCell, type TableCellProps, TableFilterButton, type TableFilterButtonProps, type TableFilterType, TableFilters, type TableProps, TableSortButton, type TableSortButtonProps, TableUncontrolled, type TableUncontrolledProps, TableWithSelection, type TableWithSelectionProps, TagIcon, type TagProps, TextImage, type TextImageProps, TextProperty, type TextPropertyProps, Textarea, type TextareaProps, TextareaUncontrolled, TextareaWithHeadline, type TextareaWithHeadlineProps, type ThemeConfig, ThemeContext, ThemeDialog, ThemeProvider, type ThemeProviderProps, type ThemeType, ThemeUtil, TimeDisplay, TimePicker, type TimePickerMinuteIncrement, type TimePickerProps, TimePickerUncontrolled, ToggleableInput, ToggleableInputUncontrolled, Tooltip, type TooltipConfig, type TooltipProps, Transition, type TransitionState, type TransitionWrapperProps, type UseCreateFormProps, type UseCreateFormResult, type UseDelayOptions, type UseDelayOptionsResolved, type UseFloatingElementOptions, type UseFloatingElementProps, type UseFocusTrapProps, type UseOverlayRegistryProps, type UseOverlayRegistryResult, type UseSearchProps, UseValidators, type ValidatorError, type ValidatorResult, VerticalDivider, type VerticalDividerProps, Visibility, type VisibilityProps, type WeekDay, YearMonthPicker, type YearMonthPickerProps, YearMonthPickerUncontrolled, addDuration, builder, changeDuration, clamp, closestMatch, createLoopingList, createLoopingListWithIndex, equalSizeGroups, formatDate, formatDateTime, getBetweenDuration, getNeighbours, getWeeksForCalenderMonth, hightideTranslation, hightideTranslationLocales, isInTimeSpan, match, noop, range, resolveSetState, subtractDuration, useCreateForm, useDelay, useFloatingElement, useFocusGuards, useFocusManagement, useFocusOnceVisible, useFocusTrap, useForm, useFormField, useHightideConfig, useHightideTranslation, useHoverState, useICUTranslation, useIsMounted, useLanguage, useLocalStorage, useLocale, useLogOnce, useOutsideClick, useOverlayRegistry, useOverwritableState, usePopoverPosition, useRerender, useResizeCallbackWrapper, useSearch, useTabContext, useTheme, useTransitionState, useTranslatedValidators, validateEmail, writeToClipboard };
+export { ASTNodeInterpreter, type ASTNodeInterpreterProps, AnimatedRing, type AnimatedRingProps, ArrayUtil, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BagFunction, type BagFunctionOrNode, type BagFunctionOrValue, BagFunctionUtil, BreadCrumbGroup, BreadCrumbLink, type BreadCrumbLinkProps, type BreadCrumbProps, BreadCrumbs, Button, type ButtonColor, type ButtonProps, ButtonUtil, Carousel, type CarouselProps, CarouselSlide, type CarouselSlideProps, Checkbox, CheckboxProperty, type CheckboxPropertyProps, type CheckboxProps, CheckboxUncontrolled, type CheckboxUncontrolledProps, Chip, type ChipColor, ChipList, type ChipListProps, type ChipProps, ChipUtil, Circle, type CircleProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogType, CopyToClipboardWrapper, type CopyToClipboardWrapperProps, type Crumb, DatePicker, type DatePickerProps, DatePickerUncontrolled, DateProperty, type DatePropertyProps, DateTimeInput, type DateTimeInputProps, DateTimeInputUncontrolled, DateTimePicker, type DateTimePickerMode, type DateTimePickerProps, DateTimePickerUncontrolled, DateUtils, DayPicker, type DayPickerProps, DayPickerUncontrolled, type DeepPartial, Dialog, type DialogPosition, type DialogProps, type Direction, DiscardChangesDialog, DividerInserter, type DividerInserterProps, Drawer, type DrawerAligment, type DrawerProps, Duration, type DurationJSON, type EaseFunction, EaseFunctions, type EditCompleteOptions, type EditCompleteOptionsResolved, ErrorComponent, type ErrorComponentProps, type Exact, Expandable, ExpandableContent, type ExpandableContentProps, ExpandableHeader, type ExpandableHeaderProps, type ExpandableProps, ExpandableRoot, type ExpandableRootProps, ExpandableUncontrolled, ExpansionIcon, type ExpansionIconProps, type FAQItem, FAQSection, type FAQSectionProps, FillerCell, type FillerCellProps, FloatingContainer, type FloatingContainerProps, type FloatingElementAlignment, FocusTrap, type FocusTrapProps, FormContext, type FormContextType, type FormEvent, type FormEventListener, FormField, type FormFieldAriaAttributes, type FormFieldBag, type FormFieldDataHandling, type FormFieldFocusableElementProps, type FormFieldInteractionStates, FormFieldLayout, type FormFieldLayoutBag, type FormFieldLayoutIds, type FormFieldLayoutProps, type FormFieldProps, type FormFieldResult, FormProvider, type FormProviderProps, FormStore, type FormStoreProps, type FormValidationBehaviour, type FormValidator, type FormValue, HelpwaveBadge, type HelpwaveBadgeProps, HelpwaveLogo, type HelpwaveProps, type HighlightStartPositionBehavior, type HightideConfig, HightideConfigContext, HightideConfigProvider, type HightideConfigProviderProps, HightideProvider, type HightideTranslationEntries, type HightideTranslationLocales, InfiniteScroll, type InfiniteScrollProps, Input, InputDialog, type InputModalProps, type InputProps, InputUncontrolled, InsideLabelInput, InsideLabelInputUncontrolled, LanguageDialog, ListBox, ListBoxItem, type ListBoxItemProps, ListBoxMultiple, type ListBoxMultipleProps, ListBoxMultipleUncontrolled, type ListBoxMultipleUncontrolledProps, ListBoxPrimitive, type ListBoxPrimitiveProps, type ListBoxProps, ListBoxUncontrolled, type ListBoxUncontrolledProps, LoadingAndErrorComponent, type LoadingAndErrorComponentProps, LoadingAnimation, type LoadingAnimationProps, type LoadingComponentProps, LoadingContainer, LocalStorageService, LocaleContext, type LocaleContextValue, LocaleProvider, type LocaleProviderProps, type LocalizationConfig, LocalizationUtil, LoopingArrayCalculator, MarkdownInterpreter, type MarkdownInterpreterProps, Menu, type MenuBag, MenuItem, type MenuItemProps, type MenuProps, type Month, MultiSearchWithMapping, MultiSelect, MultiSelectButton, type MultiSelectButtonProps, MultiSelectChipDisplay, MultiSelectChipDisplayButton, type MultiSelectChipDisplayProps, MultiSelectChipDisplayUncontrolled, type MultiSelectChipDisplayUncontrolledProps, MultiSelectContent, type MultiSelectContentProps, MultiSelectOption, type MultiSelectOptionProps, MultiSelectProperty, type MultiSelectPropertyProps, type MultiSelectProps, MultiSelectRoot, type MultiSelectRootProps, MultiSelectUncontrolled, MultiSubjectSearchWithMapping, Navigation, NavigationItemList, type NavigationItemListProps, type NavigationItemType, type NavigationProps, NumberProperty, type NumberPropertyProps, type OverlayItem, Pagination, type PaginationProps, type PopoverHorizontalAlignment, type PopoverVerticalAlignment, ProgressIndicator, type ProgressIndicatorProps, PromiseUtils, PropertyBase, type PropertyBaseProps, type PropertyField, PropsUtil, type PropsWithBagFunction, type PropsWithBagFunctionOrChildren, RadialRings, type RadialRingsProps, type RangeOptions, type ResolvedTheme, Ring, type RingProps, RingWave, type RingWaveProps, ScrollPicker, type ScrollPickerProps, SearchBar, type SearchBarProps, Select, SelectButton, type SelectButtonProps, SelectContent, type SelectContentProps, SelectContext, type SelectIconAppearance, SelectOption, type SelectOptionProps, type SelectProps, SelectRoot, type SelectRootProps, SelectUncontrolled, type SelectUncontrolledProps, SessionStorageService, type SharedSelectRootProps, SimpleSearch, SimpleSearchWithMapping, type SingleOrArray, SingleSelectProperty, type SingleSelectPropertyProps, StepperBar, type StepperBarProps, StepperBarUncontrolled, type StepperState, type SuperSet, type TabContextType, type TabInfo, TabList, TabPanel, TabSwitcher, type TabSwitcherProps, TabView, Table, TableCell, type TableCellProps, TableFilterButton, type TableFilterButtonProps, type TableFilterType, TableFilters, type TableProps, TableSortButton, type TableSortButtonProps, TableUncontrolled, type TableUncontrolledProps, TableWithSelection, type TableWithSelectionProps, TagIcon, type TagProps, TextImage, type TextImageProps, TextProperty, type TextPropertyProps, Textarea, type TextareaProps, TextareaUncontrolled, TextareaWithHeadline, type TextareaWithHeadlineProps, type ThemeConfig, ThemeContext, ThemeDialog, ThemeProvider, type ThemeProviderProps, type ThemeType, ThemeUtil, TimeDisplay, TimePicker, type TimePickerMinuteIncrement, type TimePickerProps, TimePickerUncontrolled, ToggleableInput, ToggleableInputUncontrolled, Tooltip, type TooltipConfig, type TooltipProps, Transition, type TransitionState, type TransitionWrapperProps, type UseCreateFormProps, type UseCreateFormResult, type UseDelayOptions, type UseDelayOptionsResolved, type UseFloatingElementOptions, type UseFloatingElementProps, type UseFocusTrapProps, type UseFormFieldOptions, type UseOverlayRegistryProps, type UseOverlayRegistryResult, type UseSearchProps, UseValidators, type ValidatorError, type ValidatorResult, VerticalDivider, type VerticalDividerProps, Visibility, type VisibilityProps, type WeekDay, YearMonthPicker, type YearMonthPickerProps, YearMonthPickerUncontrolled, addDuration, builder, changeDuration, clamp, closestMatch, createLoopingList, createLoopingListWithIndex, equalSizeGroups, formatDate, formatDateTime, getBetweenDuration, getNeighbours, getWeeksForCalenderMonth, hightideTranslation, hightideTranslationLocales, isInTimeSpan, match, noop, range, resolveSetState, subtractDuration, useCreateForm, useDelay, useFloatingElement, useFocusGuards, useFocusManagement, useFocusOnceVisible, useFocusTrap, useForm, useFormField, useHightideConfig, useHightideTranslation, useHoverState, useICUTranslation, useIsMounted, useLanguage, useLocalStorage, useLocale, useLogOnce, useOutsideClick, useOverlayRegistry, useOverwritableState, usePopoverPosition, useRerender, useResizeCallbackWrapper, useSearch, useSelectContext, useTabContext, useTheme, useTransitionState, useTranslatedValidators, validateEmail, writeToClipboard };