@kroo-web/design-system 1.1.106 → 1.1.107

package/dist/types.d.ts

@@ -1,201 +1,190 @@
-import React$1, { PropsWithChildren, ForwardedRef, ReactNode, DetailedHTMLProps, InputHTMLAttributes, ElementType, ButtonHTMLAttributes, ChangeEvent, OptionHTMLAttributes } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import React$1, { PropsWithChildren, ReactNode, HTMLProps, ElementType, ButtonHTMLAttributes, OptionHTMLAttributes, DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { MaterialSymbolProps } from 'react-material-symbols';
+import { FieldValues, Path, ControllerRenderProps, UseFormReturn, FieldError } from 'react-hook-form';
 import * as zustand from 'zustand';
 import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 
-type TAccordionRootProps = React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
-    grouping?: 'attached' | 'detached';
+type TAccordionRootProps = {
     children: React$1.ReactNode;
-};
-type TAccordionTriggerProps<C extends React$1.ElementType = 'p'> = React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    grouping?: 'attached' | 'detached';
+} & React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+type TAccordionTriggerProps<C extends React$1.ElementType = 'p'> = {
     as?: C;
-    size?: 'regular' | 'large';
     controls?: React$1.ReactNode;
-};
+    size?: 'large' | 'regular';
+} & React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;
 declare const Accordion: {
-    Root: (props: TAccordionRootProps) => React$1.JSX.Element;
+    Content: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
     Item: (props: React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>) => React$1.JSX.Element;
-    Trigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+    Root: (props: TAccordionRootProps) => React$1.JSX.Element;
+    Trigger: React$1.ForwardRefExoticComponent<{
         as?: "p" | undefined;
-        size?: "regular" | "large";
         controls?: React$1.ReactNode;
-    } & React$1.RefAttributes<HTMLButtonElement>>;
-    Content: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+        size?: "large" | "regular";
+    } & Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 };
 
 type Merge<T, U> = Omit<T, keyof U> & U;
-type PropsWithAs<P, T extends React.ElementType> = P & {
+type PropsWithAs<P, T extends React.ElementType> = {
     as?: T;
-};
+} & P;
 type PolymorphicPropsWithoutRef<P, T extends React.ElementType> = Merge<T extends keyof JSX.IntrinsicElements ? React.PropsWithoutRef<JSX.IntrinsicElements[T]> : React.ComponentPropsWithoutRef<T>, PropsWithAs<P, T>>;
 
 declare const defaultElement$1 = "button";
 type TButtonVisualTypes = {
+    variant?: 'danger' | 'ghost' | 'primary' | 'secondary' | 'tertiary';
     visualType?: 'button';
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';
 } | {
+    variant?: 'danger' | 'ghost' | 'standard';
     visualType?: 'action';
-    variant?: 'standard' | 'ghost' | 'danger';
 } | {
+    variant?: 'outline' | 'primary' | 'secondary';
     visualType?: 'nav';
-    variant?: 'primary' | 'outline' | 'secondary';
 } | {
-    visualType?: 'text';
     variant?: 'primary' | 'secondary';
+    visualType?: 'text';
 };
 type TButtonOwnProps = {
     as?: 'button' | 'span';
     className?: string;
     onlyIcon?: boolean;
-} & React$1.ButtonHTMLAttributes<HTMLButtonElement> & PropsWithChildren & TButtonVisualTypes;
+} & PropsWithChildren & React$1.ButtonHTMLAttributes<HTMLButtonElement> & TButtonVisualTypes;
 type TButtonProps<T extends React$1.ElementType = typeof defaultElement$1> = PolymorphicPropsWithoutRef<TButtonOwnProps, T>;
-declare function Button<T extends React$1.ElementType = typeof defaultElement$1>({ as, children, variant, className, visualType, onlyIcon, ...rest }: TButtonProps<T>): React$1.JSX.Element;
+declare function Button<T extends React$1.ElementType = typeof defaultElement$1>({ as, children, className, onlyIcon, variant, visualType, ...rest }: TButtonProps<T>): React$1.JSX.Element;
 
 type TIconProps = {
-    size?: 'regular' | 'large' | 'xlarge';
-    weight?: 'light' | 'normal' | 'medium';
+    size?: 'large' | 'regular' | 'xlarge';
+    weight?: 'light' | 'medium' | 'normal';
 } & Omit<MaterialSymbolProps, 'size' | 'weight'>;
 declare const Icon: ({ size, weight, ...rest }: TIconProps) => React$1.JSX.Element;
 
-type TLegacyMarketingText = 'marketing-text-light' | 'marketing-text-regular' | 'marketing-text-semi-bold' | 'marketing-quote-light' | 'marketing-quote-regular' | 'marketing-quote-semi-bold' | 'marketing-small-light' | 'marketing-small-regular' | 'marketing-small-semi-bold' | 'marketing-medium-light' | 'marketing-medium-regular' | 'marketing-medium-semi-bold' | 'marketing-large-light' | 'marketing-large-regular' | 'marketing-large-semi-bold' | 'marketing-tag-light' | 'marketing-tag-regular' | 'marketing-tag-semi-bold';
+type TLegacyMarketingText = 'marketing-large-light' | 'marketing-large-regular' | 'marketing-large-semi-bold' | 'marketing-medium-light' | 'marketing-medium-regular' | 'marketing-medium-semi-bold' | 'marketing-quote-light' | 'marketing-quote-regular' | 'marketing-quote-semi-bold' | 'marketing-small-light' | 'marketing-small-regular' | 'marketing-small-semi-bold' | 'marketing-tag-light' | 'marketing-tag-regular' | 'marketing-tag-semi-bold' | 'marketing-text-light' | 'marketing-text-regular' | 'marketing-text-semi-bold';
 type TLegacyMarketingHeading = 'marketing-heading-1' | 'marketing-heading-2' | 'marketing-heading-3' | 'marketing-heading-4' | 'marketing-heading-5' | 'marketing-heading-6' | 'marketing-heading-7';
 type TLegacyMarketingFooter = 'footer-regular' | 'footer-semi-bold';
-type TTypography = 'form-label' | 'form-helper' | 'form-button' | 'form-input-normal' | 'form-input-semi-bold' | 'content-regular-light' | 'content-regular' | 'content-regular-semi-bold' | 'content-large-light' | 'content-large' | 'content-large-semi-bold' | 'content-title-light' | 'content-title' | 'content-title-semi-bold' | 'tag';
-type TTypographyVariants = TTypography | TLegacyMarketingText | TLegacyMarketingHeading | TLegacyMarketingFooter;
+type TTypography = 'content-large' | 'content-large-light' | 'content-large-semi-bold' | 'content-regular' | 'content-regular-light' | 'content-regular-semi-bold' | 'content-title' | 'content-title-light' | 'content-title-semi-bold' | 'form-button' | 'form-helper' | 'form-input-normal' | 'form-input-semi-bold' | 'form-label' | 'tag';
+type TTypographyVariants = TLegacyMarketingFooter | TLegacyMarketingHeading | TLegacyMarketingText | TTypography;
 type TTypographyProps<C extends React$1.ElementType = 'p'> = {
     as?: C;
-    variant?: TTypographyVariants;
     children?: React$1.ReactNode;
     className?: string;
+    variant?: TTypographyVariants;
 } & React$1.ComponentPropsWithoutRef<C>;
-declare const TypographyComponent: <C extends React$1.ElementType = "p">(props: TTypographyProps<C>, forwardRef: ForwardedRef<C>) => React$1.JSX.Element;
-declare const Typography: React$1.ForwardRefExoticComponent<Omit<TTypographyProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>, "ref"> & React$1.RefAttributes<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
+declare const Typography: <C extends React$1.ElementType = "p">({ as, children, className, variant, ...rest }: TTypographyProps<C>) => React$1.JSX.Element;
 
 type TCalloutRootProps = {
-    type?: 'primary' | 'secondary' | 'warning' | 'error' | 'positive';
+    type?: 'error' | 'positive' | 'primary' | 'secondary' | 'warning';
 };
 type TCalloutTextProps = TTypographyProps<'p'>;
 declare const Callout: {
-    Root: ({ type, children }: PropsWithChildren<TCalloutRootProps>) => React$1.JSX.Element;
     Icon: ({ size, weight, ...rest }: TIconProps) => React$1.JSX.Element;
+    Root: ({ children, type }: PropsWithChildren<TCalloutRootProps>) => React$1.JSX.Element;
     Text: ({ children, ...props }: PropsWithChildren<TCalloutTextProps>) => React$1.JSX.Element;
 };
 
 declare const defaultElement = "div";
 type TCardVariants = {
-    visual?: 'primary' | 'secondary' | 'tertiary';
+    elementType?: 'div';
+    radius?: 'large' | 'medium' | 'none' | 'small';
     size?: {
-        vertical: 'none' | 'extra-small' | 'small' | 'medium' | 'large';
-        horizontal: 'none' | 'extra-small' | 'small' | 'medium' | 'large';
+        horizontal: 'extra-small' | 'large' | 'medium' | 'none' | 'small';
+        vertical: 'extra-small' | 'large' | 'medium' | 'none' | 'small';
     };
-    radius?: 'none' | 'small' | 'medium' | 'large';
-    elementType?: 'div';
+    visual?: 'primary' | 'secondary' | 'tertiary';
 };
 interface ICardOwnProps extends React$1.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
     as?: 'div';
-    variants?: TCardVariants;
     className?: string;
     isSquare?: boolean;
+    variants?: TCardVariants;
 }
 type ICardProps<T extends React$1.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<ICardOwnProps, T>;
-declare function Card<T extends React$1.ElementType = typeof defaultElement>({ as, children, variants, className, isSquare, ...rest }: ICardProps<T>): React$1.JSX.Element;
+declare function Card<T extends React$1.ElementType = typeof defaultElement>({ as, children, className, isSquare, variants, ...rest }: ICardProps<T>): React$1.JSX.Element;
 
 type CardsVariants = {
-    layout?: 'bento-three' | 'bento-four' | 'bento-five';
+    layout?: 'bento-five' | 'bento-four' | 'bento-three';
 };
 interface ICardsProps extends PropsWithChildren {
-    as: 'div' | 'ol' | 'ul' | 'section';
+    as: 'div' | 'ol' | 'section' | 'ul';
     variants: CardsVariants;
 }
 declare const Cards: ({ as, children, variants }: ICardsProps) => React$1.JSX.Element;
 
-type TCheckboxProps = {
-    id: string;
-    label: string | ReactNode;
-    disabled?: boolean;
+type TCheckboxProps<T extends FieldValues> = {
     className?: string;
-    variant?: 'radio' | 'checkbox';
-    onChange?: (value: boolean) => void;
-    onBlur?: () => void;
-    value?: boolean;
+    disabled?: boolean;
+    id: string;
+    label: ReactNode | string;
+    name: Path<T>;
+    variant?: 'checkbox' | 'radio';
 };
-declare const Checkbox: ({ id, label, variant, value, onChange, onBlur }: TCheckboxProps) => React$1.JSX.Element;
+declare const Checkbox: <T extends FieldValues>(props: TCheckboxProps<T>) => React$1.JSX.Element;
 
 type TColumnsProps = {
-    cols: number;
     children: React$1.ReactNode;
+    cols: number;
 };
-declare const Columns: ({ cols, children }: TColumnsProps) => React$1.JSX.Element;
+declare const Columns: ({ children, cols }: TColumnsProps) => React$1.JSX.Element;
 
 type TComboBoxItem = {
-    text: string;
     img?: string;
     render?: ReactNode;
+    text: string;
 };
 type TComboBoxProps = {
+    alwaysOpen?: boolean;
+    field: ControllerRenderProps<FieldValues>;
     label: string;
-    options: TComboBoxItem[];
+    name: string;
     onSelect?: (item: TComboBoxItem) => void;
-    alwaysOpen?: boolean;
-    field: {
-        value: string;
-        onChange: (value: string) => void;
-        onBlur: () => void;
-    };
+    options: TComboBoxItem[];
 };
-declare const ComboBox: (props: TComboBoxProps) => React$1.JSX.Element;
+declare const ComboBox: (props: Omit<TComboBoxProps, "field">) => React$1.JSX.Element;
+declare const Field: ({ alwaysOpen, field: { onBlur, ...restField }, label, onSelect, options }: TComboBoxProps) => React$1.JSX.Element;
 
-type TDatePickerProps = {
-    id: string;
-    label: string;
-    helper?: {
-        message: string;
-    };
+type TDatePicker<T extends FieldValues> = {
     disabled?: boolean;
-    error?: {
+    helper?: {
         message: string;
     };
-} & React$1.InputHTMLAttributes<HTMLInputElement>;
-declare const DatePicker: React$1.ForwardRefExoticComponent<{
     id: string;
     label: string;
-    helper?: {
-        message: string;
-    };
-    disabled?: boolean;
-    error?: {
-        message: string;
-    };
-} & React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
+    max?: string;
+    min?: string;
+    name: Path<T>;
+};
+declare const DatePicker: <T extends FieldValues>(props: TDatePicker<T>) => React$1.JSX.Element;
 
 type TDisclosureProps = {
-    condition: boolean;
     children: React$1.ReactNode;
+    condition: boolean;
 };
-declare const Disclosure: ({ condition, children }: TDisclosureProps) => React$1.JSX.Element;
+declare const Disclosure: ({ children, condition }: TDisclosureProps) => React$1.JSX.Element;
 
-type TFormProps = PropsWithChildren<DetailedHTMLProps<InputHTMLAttributes<HTMLFormElement>, HTMLFormElement>>;
-declare const Form: ({ children, ...rest }: TFormProps) => React$1.JSX.Element;
+type TFormProps<T extends FieldValues> = {
+    methods: UseFormReturn<T>;
+    onSubmit: (values: T) => void;
+} & PropsWithChildren<HTMLProps<HTMLFormElement>>;
+declare const Form: <T extends FieldValues>({ children, methods, onSubmit, ...rest }: TFormProps<T>) => React$1.JSX.Element;
 
 type PolymorphicLink<T extends ElementType> = {
     as?: T;
     className?: string;
 } & PropsWithChildren;
-type AnchorProps = React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
+type AnchorProps = {
     as?: undefined;
-};
-type TLink<T extends ElementType> = PolymorphicLink<T> | AnchorProps;
+} & React$1.AnchorHTMLAttributes<HTMLAnchorElement>;
+type TLink<T extends ElementType> = AnchorProps | PolymorphicLink<T>;
 declare const Link: <T extends ElementType = "a">({ as, children, className, ...rest }: TLink<T>) => React$1.JSX.Element;
 
 declare const sizes: {
-    small: string;
-    medium: string;
-    large: string;
     full: string;
+    large: string;
+    medium: string;
+    small: string;
 };
 type TLoadingProps = {
     size?: keyof typeof sizes;
@@ -204,200 +193,146 @@ declare const Loading: ({ size }: TLoadingProps) => React$1.JSX.Element;
 
 type TUseModalProps = {
     activeModal: string;
+    close: () => void;
     isOpen: boolean;
     open: (value: string) => void;
-    close: () => void;
 };
 declare const useModal: zustand.UseBoundStore<zustand.StoreApi<TUseModalProps>>;
 type TModalContentProps = {
     children: React$1.ReactNode;
-    value: string;
-    focusTrap?: boolean;
     closeOnBackdropClick?: boolean;
+    focusTrap?: boolean;
+    value: string;
 };
 type TModalControlProps = {
     children: React$1.ReactNode;
     value: string;
 } & TButtonProps;
 type TModalHeaderProps = {
+    actionButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    onClick?: () => void;
     title: string;
     variant?: 'action';
-    onClick?: () => void;
-    actionButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
 };
 type TModalButtonProps = PropsWithChildren;
 declare const Buttons: ({ children }: TModalButtonProps) => React$1.JSX.Element;
 declare const Modal: {
-    Content: ({ value, children, focusTrap, closeOnBackdropClick }: TModalContentProps) => React$1.JSX.Element;
-    Control: ({ value, children, ...rest }: TModalControlProps) => React$1.JSX.Element;
-    Header: ({ title, variant, onClick, actionButtonProps }: TModalHeaderProps) => React$1.JSX.Element;
     Buttons: ({ children }: TModalButtonProps) => React$1.JSX.Element;
+    Content: ({ children, closeOnBackdropClick, focusTrap, value }: TModalContentProps) => React$1.JSX.Element;
+    Control: ({ children, value, ...rest }: TModalControlProps) => React$1.JSX.Element;
+    Header: ({ actionButtonProps, onClick, title, variant }: TModalHeaderProps) => React$1.JSX.Element;
 };
 
-type TNumberFieldProps = {
-    id: string;
-    label: string;
-    width?: number;
+type TNumberFieldProps<T extends FieldValues> = {
     helper?: {
         message: string;
     };
-    error?: {
-        message: string;
-    };
-    onChange?: (value: number) => void;
-    onBlur?: () => void;
-} & DetailedHTMLProps<InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-/**
- * NumberField - A component for rendering a number input field.
- *
- * @param {TNumberFieldProps} props - The properties for the number field component.
- * @returns {JSX.Element} The rendered number field component.
- *
- * !!! If using this component with react-hook-form, you will need to wrap this component in a Controller component.
- */
-declare const NumberField: (props: TNumberFieldProps) => React$1.JSX.Element;
-
-type TPhoneFieldProps = {
-    id: string;
+    label: string;
+    max?: number;
+    min?: number;
+    name: Path<T>;
+    width?: number;
+};
+declare const NumberField: <T extends FieldValues>(props: TNumberFieldProps<T>) => React$1.JSX.Element;
+
+type TPhoneFieldProps<T extends FieldValues> = {
+    className?: string;
     disabled?: boolean;
-    error?: {
-        message: string;
-    };
     helper?: {
         message: ReactNode | string;
     };
-    className?: string;
+    id: string;
+    name: Path<T>;
     placeholder?: string;
-    onChange?: (value: {
-        code: string;
-        number: string;
-        formatted: string;
-    }) => void;
-    onBlur?: () => void;
-    value?: {
-        code: string;
-        number: string;
-        formatted: string;
-    };
 };
-/**
- * PhoneField - A component for rendering a number input field.
- *
- * @param {TPhoneFieldProps} props - The properties for the phone field component.
- * @returns {JSX.Element} The rendered number field component.
- *
- * !!! If using this component with react-hook-form, you will need to wrap this component in a Controller component.
- */
-declare const PhoneField: (props: TPhoneFieldProps) => React$1.JSX.Element;
-
-interface TPinInputProps {
-    length: number;
-    label: string;
+declare const PhoneField: <T extends FieldValues>(props: TPhoneFieldProps<T>) => React$1.JSX.Element;
+
+interface TPinInputProps<T extends FieldValues> {
+    isNumeric?: boolean;
     isOTP?: boolean;
     isPassword?: boolean;
-    isNumeric?: boolean;
-    onChange: (value: string) => void;
-    onBlur?: () => void;
+    label: string;
+    length: number;
+    name: Path<T>;
 }
-declare const PinInput: ({ length, label, isOTP, isPassword, isNumeric, onChange, onBlur }: TPinInputProps) => React$1.JSX.Element;
+declare const PinInput: <T extends FieldValues>(props: TPinInputProps<T>) => React$1.JSX.Element;
+declare const OTPInput: () => React$1.JSX.Element;
 
 type TPopoverRootProps = React$1.ComponentPropsWithoutRef<typeof RadixPopover.Root>;
 type TPopoverTriggerProps = React$1.ComponentPropsWithoutRef<typeof RadixPopover.Trigger>;
 type TPopoverContentProps = React$1.ComponentPropsWithoutRef<typeof RadixPopover.Content>;
 declare const Popover: {
+    Content: ({ children, ...rest }: TPopoverContentProps) => React$1.JSX.Element;
     Root: (props: TPopoverRootProps) => React$1.JSX.Element;
     Trigger: ({ children, ...rest }: TPopoverTriggerProps) => React$1.JSX.Element;
-    Content: ({ children, ...rest }: TPopoverContentProps) => React$1.JSX.Element;
 };
 
 type TProgressIndicatorProps = {
-    label?: string;
-    size?: 'small' | 'medium' | 'full-width';
     current?: number;
+    label?: string;
     max?: number;
+    size?: 'full-width' | 'medium' | 'small';
 };
-declare const ProgressIndicator: ({ label, size, current, max }: TProgressIndicatorProps) => React$1.JSX.Element;
+declare const ProgressIndicator: ({ current, label, max, size }: TProgressIndicatorProps) => React$1.JSX.Element;
 
-type TRadioGroupProps = {
-    className?: string;
-    name?: string;
+type TRadioGroupProps<T extends FieldValues> = {
+    error?: FieldError;
     label: string;
+    name: Path<T>;
     variant?: 'cards' | 'circle';
-    error?: {
-        message: string;
-    };
-    onChange?: (value: string) => void;
-    onBlur?: () => void;
-    disabled?: boolean;
-    value?: string;
-};
+} & Omit<RadixRadioGroup.RadioGroupProps, 'name'>;
 declare const RadioGroup: {
-    Root: React$1.ForwardRefExoticComponent<TRadioGroupProps & {
-        children?: React$1.ReactNode | undefined;
-    } & React$1.RefAttributes<HTMLDivElement>>;
-    Item: ({ children, className, variant, ...props }: RadixRadioGroup.RadioGroupItemProps & {
-        variant?: "circle" | "cards";
-    }) => React$1.JSX.Element;
     Indicator: ({ className, ...props }: RadixRadioGroup.RadioGroupIndicatorProps) => React$1.JSX.Element;
+    Item: ({ children, className, variant, ...props }: {
+        variant?: "cards" | "circle";
+    } & RadixRadioGroup.RadioGroupItemProps) => React$1.JSX.Element;
+    Root: <T extends FieldValues>({ children, className, disabled, label, name, variant, ...props }: TRadioGroupProps<T>) => React$1.JSX.Element;
 };
 
-type TRangeProps = {
-    id: string;
-    label: string;
-    step?: number;
+type TRangeProps<T extends FieldValues> = {
     helper?: {
         message: string;
     };
-    error?: {
-        message: string;
-    };
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-} & Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'>;
-declare const Range: React$1.ForwardRefExoticComponent<{
     id: string;
     label: string;
+    max?: number;
+    min?: number;
+    name: Path<T>;
+    showValue?: boolean;
     step?: number;
-    helper?: {
-        message: string;
-    };
-    error?: {
-        message: string;
-    };
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-} & Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> & React$1.RefAttributes<HTMLInputElement>>;
+};
+declare const Range: <T extends FieldValues>(props: TRangeProps<T>) => React$1.JSX.Element;
 
 type TItem = {
     id: string;
     title: string;
 };
-type TSelectProps = {
-    id: string;
-    label: string;
+type TSelectProps<T extends FieldValues> = {
+    children?: ReactNode;
+    defaultValue?: string;
+    disabled?: boolean;
     helper?: {
         message: string;
     };
+    id: string;
     items?: {
         id: string;
-        title: string;
         props?: OptionHTMLAttributes<HTMLOptionElement>;
+        title: string;
     }[];
-    placeholder?: string;
-    disabled?: boolean;
-    defaultValue?: string;
+    label: string;
     missing?: boolean;
-    children?: ReactNode;
-    error?: {
-        message: string;
-    };
-} & DetailedHTMLProps<React$1.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
-declare const Select: React$1.ForwardRefExoticComponent<Omit<TSelectProps, "ref"> & React$1.RefAttributes<HTMLSelectElement>>;
+    name: Path<T>;
+    placeholder?: string;
+};
+declare const Select: <T extends FieldValues>(props: TSelectProps<T>) => React$1.JSX.Element;
 
 type TSkeletonProps = {
-    width?: string;
     height?: string;
     rounded?: boolean;
+    width?: string;
 };
-declare const Skeleton: ({ width, height, rounded }: TSkeletonProps) => React$1.JSX.Element;
+declare const Skeleton: ({ height, rounded, width }: TSkeletonProps) => React$1.JSX.Element;
 
 declare const TableRoot: ({ children }: PropsWithChildren) => React$1.JSX.Element;
 declare const TableHead: ({ children }: PropsWithChildren) => React$1.JSX.Element;
@@ -407,13 +342,13 @@ declare const TableRow: ({ children }: PropsWithChildren) => React$1.JSX.Element
 declare const TableData: ({ children }: PropsWithChildren) => React$1.JSX.Element;
 declare const TableFooter: ({ children }: PropsWithChildren) => React$1.JSX.Element;
 declare const Table: {
-    Root: ({ children }: PropsWithChildren) => React$1.JSX.Element;
-    Head: ({ children }: PropsWithChildren) => React$1.JSX.Element;
-    Header: ({ children }: PropsWithChildren) => React$1.JSX.Element;
     Body: ({ children }: PropsWithChildren) => React$1.JSX.Element;
-    Row: ({ children }: PropsWithChildren) => React$1.JSX.Element;
     Data: ({ children }: PropsWithChildren) => React$1.JSX.Element;
     Footer: ({ children }: PropsWithChildren) => React$1.JSX.Element;
+    Head: ({ children }: PropsWithChildren) => React$1.JSX.Element;
+    Header: ({ children }: PropsWithChildren) => React$1.JSX.Element;
+    Root: ({ children }: PropsWithChildren) => React$1.JSX.Element;
+    Row: ({ children }: PropsWithChildren) => React$1.JSX.Element;
 };
 
 type TTabsRoot = React$1.ComponentProps<typeof RadixTabs.Root>;
@@ -421,87 +356,85 @@ type TTabsList = React$1.ComponentProps<typeof RadixTabs.List>;
 type TTabsTrigger = React$1.ComponentProps<typeof RadixTabs.Trigger>;
 type TTabsContent = React$1.ComponentProps<typeof RadixTabs.Content>;
 declare const Tabs: {
-    Root: ({ children, ...rest }: TTabsRoot) => React$1.JSX.Element;
+    Content: ({ children, ...rest }: TTabsContent) => React$1.JSX.Element;
     List: ({ children, ...rest }: TTabsList) => React$1.JSX.Element;
+    Root: ({ children, ...rest }: TTabsRoot) => React$1.JSX.Element;
     Trigger: ({ children, ...rest }: TTabsTrigger) => React$1.JSX.Element;
-    Content: ({ children, ...rest }: TTabsContent) => React$1.JSX.Element;
 };
 
 type TTagProps = {
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'danger' | 'warning' | 'night';
+    children: ReactNode | ReactNode[];
     circularIcon?: boolean;
     className?: string;
     icon: boolean;
-    children: ReactNode | ReactNode[];
+    variant?: 'danger' | 'night' | 'positive' | 'primary' | 'secondary' | 'tertiary' | 'warning';
 };
 declare const Tag: {
-    Root: ({ variant, children, className, icon, circularIcon, ...rest }: TTagProps) => React$1.JSX.Element;
-    Icon: ({ size, weight, ...rest }: TIconProps) => React$1.JSX.Element;
     Content: ({ children, ...rest }: TTypographyProps) => React$1.JSX.Element;
+    Icon: ({ size, weight, ...rest }: TIconProps) => React$1.JSX.Element;
+    Root: ({ children, circularIcon, className, icon, variant, ...rest }: TTagProps) => React$1.JSX.Element;
 };
 
-type TTextFieldProps = {
-    id: string;
-    label: string;
+type TTextFieldProps<T extends FieldValues> = {
+    className?: string;
     disabled?: boolean;
+    disableError?: boolean;
     helper?: {
         message: ReactNode | string;
     };
-    type?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>['type'];
-    prefix?: string | ReactNode;
-    suffix?: string | ReactNode;
-    className?: string;
-    rightContent?: ReactNode | string;
+    id: string;
+    label: string;
     leftContent?: ReactNode | string;
     missing?: boolean;
-    disableError?: boolean;
-    error?: {
-        message: ReactNode | string;
-    };
+    name: Path<T>;
+    prefix?: ReactNode | string;
+    rightContent?: ReactNode | string;
+    suffix?: ReactNode | string;
+    type?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>['type'];
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-declare const TextField: React$1.ForwardRefExoticComponent<Omit<TTextFieldProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const TextField: React$1.ForwardRefExoticComponent<Omit<TTextFieldProps<FieldValues>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 type TToastRootProps = {
     children: React$1.ReactNode;
 };
 type TToastTitleProps = {
-    className?: string;
     children: React$1.ReactNode;
+    className?: string;
 };
 type TToastDescriptionProps = {
     children: React$1.ReactNode;
 };
 type TToastIconProps = TIconProps;
 declare const Toast: {
-    Root: ({ children }: TToastRootProps) => React$1.JSX.Element;
-    Title: ({ className, children }: TToastTitleProps) => React$1.JSX.Element;
     Description: ({ children }: TToastDescriptionProps) => React$1.JSX.Element;
     Icon: (props: TToastIconProps) => React$1.JSX.Element;
+    Root: ({ children }: TToastRootProps) => React$1.JSX.Element;
+    Title: ({ children, className }: TToastTitleProps) => React$1.JSX.Element;
 };
 
 type TTooltipRootProps = React$1.ComponentProps<typeof RadixTooltip.Root>;
-type TTooltipTriggerProps = React$1.ComponentProps<typeof RadixTooltip.Trigger> & {
+type TTooltipTriggerProps = {
     className?: string;
-};
-type TTooltipContentProps = React$1.ComponentProps<typeof RadixTooltip.Content> & {
+} & React$1.ComponentProps<typeof RadixTooltip.Trigger>;
+type TTooltipContentProps = {
     className?: string;
-};
+} & React$1.ComponentProps<typeof RadixTooltip.Content>;
 declare const Tooltip: {
+    Content: ({ children, className, ...rest }: TTooltipContentProps) => React$1.JSX.Element;
     Root: ({ children, ...rest }: TTooltipRootProps) => React$1.JSX.Element;
-    Trigger: ({ className, children, ...rest }: TTooltipTriggerProps) => React$1.JSX.Element;
-    Content: ({ className, children, ...rest }: TTooltipContentProps) => React$1.JSX.Element;
+    Trigger: ({ children, className, ...rest }: TTooltipTriggerProps) => React$1.JSX.Element;
 };
 
-interface WrapperProps extends PropsWithChildren {
-    as?: 'li' | 'div';
-    variants?: WrapperVariants;
-    className?: string;
-}
 type WrapperVariants = {
-    visual?: 'paper' | 'bento' | 'bento-icon';
     orientation?: 'center';
     type?: 'trustPilot';
+    visual?: 'bento' | 'bento-icon' | 'paper';
 };
-declare const Wrapper: ({ as, className, variants, children }: WrapperProps) => React$1.JSX.Element;
+interface WrapperProps extends PropsWithChildren {
+    as?: 'div' | 'li';
+    className?: string;
+    variants?: WrapperVariants;
+}
+declare const Wrapper: ({ as, children, className, variants }: WrapperProps) => React$1.JSX.Element;
 
-export { Accordion, Button, Buttons, Callout, Card, Cards, type CardsVariants, Checkbox, Columns, ComboBox, DatePicker, Disclosure, Form, type ICardOwnProps, type ICardProps, type ICardsProps, Icon, Link, Loading, Modal, NumberField, PhoneField, PinInput, Popover, ProgressIndicator, RadioGroup, Range, Select, Skeleton, type TAccordionRootProps, type TAccordionTriggerProps, type TButtonProps, type TCalloutRootProps, type TCalloutTextProps, type TCardVariants, type TCheckboxProps, type TColumnsProps, type TComboBoxItem, type TComboBoxProps, type TDatePickerProps, type TDisclosureProps, type TIconProps, type TItem, type TLegacyMarketingFooter, type TLegacyMarketingHeading, type TLegacyMarketingText, type TLink, type TLoadingProps, type TModalButtonProps, type TModalContentProps, type TModalControlProps, type TModalHeaderProps, type TNumberFieldProps, type TPhoneFieldProps, type TPinInputProps, type TPopoverContentProps, type TPopoverRootProps, type TPopoverTriggerProps, type TProgressIndicatorProps, type TRadioGroupProps, type TRangeProps, type TSelectProps, type TSkeletonProps, type TTabsContent, type TTabsList, type TTabsRoot, type TTabsTrigger, type TTagProps, type TTextFieldProps, type TToastDescriptionProps, type TToastIconProps, type TToastRootProps, type TToastTitleProps, type TTooltipContentProps, type TTooltipRootProps, type TTooltipTriggerProps, type TTypography, type TTypographyProps, type TTypographyVariants, type TUseModalProps, Table, TableBody, TableData, TableFooter, TableHead, TableHeader, TableRoot, TableRow, Tabs, Tag, TextField, Toast, Tooltip, Typography, TypographyComponent, Wrapper, type WrapperProps, type WrapperVariants, useModal };
+export { Accordion, Button, Buttons, Callout, Card, Cards, type CardsVariants, Checkbox, Columns, ComboBox, DatePicker, Disclosure, Field, Form, type ICardOwnProps, type ICardProps, type ICardsProps, Icon, Link, Loading, Modal, NumberField, OTPInput, PhoneField, PinInput, Popover, ProgressIndicator, RadioGroup, Range, Select, Skeleton, type TAccordionRootProps, type TAccordionTriggerProps, type TButtonProps, type TCalloutRootProps, type TCalloutTextProps, type TCardVariants, type TCheckboxProps, type TColumnsProps, type TComboBoxItem, type TComboBoxProps, type TDatePicker, type TDisclosureProps, type TIconProps, type TItem, type TLegacyMarketingFooter, type TLegacyMarketingHeading, type TLegacyMarketingText, type TLink, type TLoadingProps, type TModalButtonProps, type TModalContentProps, type TModalControlProps, type TModalHeaderProps, type TNumberFieldProps, type TPhoneFieldProps, type TPinInputProps, type TPopoverContentProps, type TPopoverRootProps, type TPopoverTriggerProps, type TProgressIndicatorProps, type TRadioGroupProps, type TRangeProps, type TSelectProps, type TSkeletonProps, type TTabsContent, type TTabsList, type TTabsRoot, type TTabsTrigger, type TTagProps, type TTextFieldProps, type TToastDescriptionProps, type TToastIconProps, type TToastRootProps, type TToastTitleProps, type TTooltipContentProps, type TTooltipRootProps, type TTooltipTriggerProps, type TTypography, type TTypographyProps, type TTypographyVariants, type TUseModalProps, Table, TableBody, TableData, TableFooter, TableHead, TableHeader, TableRoot, TableRow, Tabs, Tag, TextField, Toast, Tooltip, Typography, Wrapper, type WrapperProps, type WrapperVariants, useModal };