@kubit-ui-web/react-components 2.0.0-beta.4 → 2.0.0-beta.41

package/dist/types/index.d.ts

@@ -121,6 +121,58 @@ export declare type AccordionVariantStyles<Variant extends string> = AccordionSt
     [key in Variant]: AccordionStyleProps;
 };
 
+/**
+ * Alert component for displaying notification messages.
+ *
+ * This component renders styled alerts.
+ * Useful for notifications, success/error messages, and informational banners.
+ * Always visible - no open/close functionality.
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   variant="success"
+ *   content={{ content: "Your changes have been saved." }}
+ * />
+ * ```
+ */
+export declare const Alert: ForwardRefExoticComponent<AlertProps<string> & RefAttributes<HTMLDivElement>>;
+
+declare type AlertCssClasses = ComponentSelected<ComponentsTypesComponents['ALERT']>;
+
+/**
+ * Interface for the Alert component.
+ * Extends the AlertStandAloneProps interface and adds a variant and additional CSS classes.
+ *
+ * @template Variant - The type of the variant for the Alert.
+ */
+export declare interface AlertProps<Variant = undefined extends string ? unknown : string> extends AlertStandAloneProps {
+    variant?: Variant;
+    additionalClasses?: Partial<AlertCssClasses>;
+}
+
+/**
+ * Interface for the standalone Alert component.
+ * A simplified component that displays alert messages. Always visible.
+ */
+export declare interface AlertStandAloneProps extends DataAttributes {
+    content: CommonTextProps;
+    role?: React.AriaRole;
+    id?: string;
+    ariaLive?: AriaAttributes['aria-live'];
+    cssClasses?: AlertCssClasses;
+}
+
+export declare interface AlertStyleProps extends CssLibPropsType {
+    _container?: CssLibPropsType;
+    _contentContainer?: CssLibPropsType;
+    _description?: CssLibPropsType;
+}
+
+export declare type AlertVariantStyles<Variant extends string> = AlertStyleProps & {
+    [key in Variant]: AlertStyleProps;
+};
+
 export declare interface ArrowsControlStyleProps extends CssLibPropsType {
     _leftArrowControlContainer?: CssLibPropsType;
     _rightArrowControlContainer?: CssLibPropsType;
@@ -402,7 +454,7 @@ export declare interface BreadcrumbsStandAloneProps extends BreadcrumbAriaAttrib
     id?: string;
     crumbs: BreadcrumbProps[];
     minCharLimit?: number;
-    dividerIcon?: ElementOrIconProps;
+    dividerIcon?: CommonIconProps;
     lastOneCrumbComponent?: TextComponentType;
     cssClasses?: BreadcrumbsCssClasses;
 }
@@ -426,17 +478,25 @@ export declare interface BreadcrumbStandAloneProps extends DataAttributes {
     crumb: BreadcrumbProps;
     lastCrumb?: boolean;
     lastOneCrumbComponent?: TextComponentType;
-    dividerIcon?: ElementOrIconProps;
+    dividerIcon?: CommonIconProps;
 }
 
 export declare type BreadcrumbsVariantStyles<Variant extends string> = BreadcrumbsStyleProps & {
     [key in Variant]: BreadcrumbsStyleProps;
 };
 
+/**
+ * Defines responsive breakpoints in pixels for different screen sizes.
+ * Used for creating media queries and responsive layouts.
+ */
 declare interface Breakpoints {
+    /** Small screen breakpoint (typically mobile landscape) - default: 576px */
     sm: number;
+    /** Medium screen breakpoint (typically tablets) - default: 768px */
     md: number;
+    /** Large screen breakpoint (typically desktops) - default: 992px */
     lg: number;
+    /** Extra large screen breakpoint (typically large desktops) - default: 1200px */
     xl: number;
 }
 
@@ -496,7 +556,7 @@ export declare interface ButtonProps<Variant = undefined extends string | unknow
 export declare interface ButtonStandAloneProps extends PropsWithChildren<ButtonStylesProps>, ButtonAriaProps, DataAttributes {
     type?: HTMLButtonElement['type'];
     onClick?: MouseEventHandler<HTMLButtonElement>;
-    icon?: ElementOrIconProps;
+    icon?: CommonIconProps;
     form?: string;
     role?: AriaRole;
     title?: string;
@@ -534,6 +594,28 @@ export declare type ButtonVariantStyles<Variant extends string> = ButtonStylePro
     [key in Variant]?: Partial<ButtonStyleProps>;
 };
 
+/**
+ * Calendar component for date selection.
+ *
+ * This component provides an interactive calendar interface for selecting single dates
+ * or date ranges. It supports month/year navigation, date restrictions, and customizable variants.
+ *
+ * @example
+ * ```tsx
+ * <Calendar
+ *   selectedDate={new Date()}
+ *   onSelectedDateChange={(date) => console.log(date)}
+ * />
+ *
+ * // Date range selection:
+ * <Calendar
+ *   hasRange
+ *   selectedDate={startDate}
+ *   secondSelectedDate={endDate}
+ *   onSelectedDateChange={(dates) => console.log(dates)}
+ * />
+ * ```
+ */
 export declare const Calendar: ForwardRefExoticComponent<CalendarProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -647,87 +729,121 @@ export declare type CalendarVariantStyles<Variant extends string> = CalendarStyl
 };
 
 /**
- * CardImage component for displaying an image card with responsive and theme support.
+ * Card component for displaying content in a structured container.
+ *
+ * This component wraps content in a styled card with optional header, content, and footer sections.
+ * It is useful for organizing information, displaying items in a list, or creating selectable cards.
+ * Supports interactive states (hover, selected) and custom theming via variants.
  *
- * This component is useful for rendering images in a card layout, adapting its style
- * based on the current device and variant. It leverages generics to allow custom variant
- * types, enabling flexible theming and styling.
+ * All sections (header, content, footer) are optional and can accept either text or any React node.
+ * The card can respond to user interaction through onClick, onMouseEnter, and onMouseLeave handlers.
  *
- * Internally, it uses {@link CardImageStandAlone} and injects device and CSS class information.
+ * Internally, it computes CSS classes using a custom hook and delegates rendering to {@link CardStandAlone}.
  *
- * The generic type parameter `<Variant extends string>` allows you to define your own variant
- * types for more precise theming.
+ * This component accepts a generic type parameter `<Variant extends string>` to allow for custom variant values,
+ * enabling flexible theming and styling.
  *
  * @example
  * ```tsx
- * <CardImage variant="primary" />
+ * <Card
+ *   header={{ content: "Card Title" }}
+ *   content="This is the card content"
+ *   footer={{ content: "Footer information" }}
+ * />
  *
  * // With a custom variant type:
- * type MyVariant = "rounded" | "square";
- * <CardImage<MyVariant> variant="rounded" />
+ * type MyVariant = "primary" | "secondary";
+ * <Card<MyVariant>
+ *   header="Primary Card"
+ *   content={<div>Custom content</div>}
+ *   variant="primary"
+ *   state="selected"
+ * />
  * ```
  */
-export declare const CardImage: ForwardRefExoticComponent<CardImageProps<string> & RefAttributes<HTMLDivElement>>;
+export declare const Card: ForwardRefExoticComponent<CardProps<string> & RefAttributes<HTMLDivElement>>;
 
-declare type CardImageCssClasses = ComponentSelected<ComponentsTypesComponents['CARD_IMAGE']>;
-
-/**
- * Represents the type for a link within the CardImage component.
- * Extends the LinkProps interface and includes content.
- */
-export declare type CardImageLinkProps = Omit<LinkProps, 'children'> & {
-    content: string;
-};
+declare type CardCssClasses = ComponentSelected<ComponentsTypesComponents['CARD']>;
 
 /**
- * Interface for the CardImage component with a variant.
- * Extends the CardImageStandAloneProps interface and adds a variant and additional CSS classes.
+ * Interface for the card component with a variant.
+ * Extends the ICardStandAlone interface and adds a variant and additional CSS classes.
  *
- * @template Variant - The type of the variant for the CardImage.
+ * @template Variant - The type of the variant for the card.
  */
-export declare interface CardImageProps<Variant = undefined extends string ? unknown : string> extends Omit<CardImageStandAloneProps, 'device'> {
+export declare interface CardProps<Variant extends string | unknown> extends Omit<CardStandAloneProps, 'cssClasses'> {
     variant?: Variant;
-    additionalClasses?: CardImageCssClasses;
+    additionalClasses?: Partial<CardCssClasses>;
 }
 
 /**
- * Represents the type for responsive images based on device breakpoints.
+ * Standalone card component for rendering a section with optional header, content and footer areas.
+ *
+ * This component displays a styled card container with three optional sections:
+ * - header: Can be text or any React node
+ * - content: Can be text or any React node
+ * - footer: Can be text or any React node
+ *
+ * Supports interactive states like hover and selected, making it useful for
+ * selectable cards, clickable items, or informational panels.
+ *
+ * This component accepts a generic type parameter `<Variant extends string>` to allow for custom variant values,
+ * enabling flexible theming and styling of the card.
+ *
+ * @example
+ * ```tsx
+ * <CardStandAlone
+ *   header={{ content: "Card Title" }}
+ *   content="Card content goes here"
+ *   footer={{ content: "Footer text" }}
+ * />
+ *
+ * // With a custom variant type:
+ * type MyVariant = "primary" | "secondary";
+ * <CardStandAlone<MyVariant>
+ *   header="Primary Card"
+ *   content={<div>Custom content</div>}
+ *   variant="primary"
+ *   state="selected"
+ * />
+ * ```
  */
-declare interface CardImageResponsiveImages {
-    [DEVICE_BREAKPOINTS.DESKTOP]: string;
-    [DEVICE_BREAKPOINTS.MOBILE]: string;
-    [DEVICE_BREAKPOINTS.TABLET]: string;
-}
+export declare const CardStandAlone: ForwardRefExoticComponent<CardStandAloneProps & RefAttributes<HTMLDivElement>>;
 
 /**
- * Interface for the standalone CardImage component.
- * Includes responsive images, title, description, optional link, and CSS classes.
+ * Interface for the standalone card component.
+ * It includes optional custom CSS classes, header, content, footer sections and interactive states.
  */
-export declare interface CardImageStandAloneProps extends DataAttributes {
-    image: CardImageResponsiveImages;
-    title: CommonTextProps;
-    description?: CommonTextProps;
-    link?: CardImageLinkProps;
-    device: string;
-    imageAltText?: string;
-    component?: string | React.ElementType;
-    onClick?: React.MouseEventHandler;
-    cssClasses?: CardImageCssClasses;
+export declare interface CardStandAloneProps extends DataAttributes {
+    cssClasses?: CardCssClasses;
+    header?: CommonTextProps | ReactNode;
+    content?: CommonTextProps | ReactNode;
+    footer?: CommonTextProps | ReactNode;
+    state?: StateType;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
 
-export declare interface CardImageStyleProps extends CssLibPropsType {
-    _imageContainer?: CssLibPropsType;
+/**
+ * Interface representing the styles for the card component.
+ */
+export declare interface CardStyleProps extends CssLibPropsType {
+    _header?: CssLibPropsType;
     _content?: CssLibPropsType;
-    _textContainer?: CssLibPropsType;
-    _titleContainer?: CssLibPropsType;
-    _title?: CssLibPropsType;
-    _descriptionContainer?: CssLibPropsType;
-    _description?: CssLibPropsType;
-    _linkContainer?: CssLibPropsType;
+    _footer?: CssLibPropsType;
+    $pseudo?: {
+        hover?: CssLibPropsType;
+    };
 }
 
-export declare type CardImageVariantStyles<Variant extends string> = CardImageStyleProps & {
-    [key in Variant]?: CardImageStyleProps;
+/**
+ * Type representing the styles for different variants of the card component.
+ *
+ * @template Variant - The type of the variant keys.
+ */
+export declare type CardVariantStyles<Variant extends string> = CardStyleProps & {
+    [key in Variant]: CardStyleProps;
 };
 
 export declare const Carousel: ForwardRefExoticComponent<Omit<ICarousel, "ref"> & RefAttributes<CarouselRefType>>;
@@ -788,16 +904,63 @@ export declare type ChecboxVariantStyles<Variant extends string> = ChecboxStyleP
     [key in Variant]?: ChecboxStyleProps;
 };
 
+/**
+ * CheckboxUnControlled component with internal state management.
+ *
+ * This component renders a checkbox that manages its own checked state internally.
+ * Useful when you don't need to control the checkbox state from a parent component.
+ * It automatically handles toggle behavior on user interaction.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxUnControlled
+ *   checked={false}
+ *   onChange={(e) => console.log(e.target.checked)}
+ *   label="Remember me"
+ * />
+ * ```
+ */
 export declare const Checkbox: ForwardRefExoticComponent<CheckboxUnControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type CheckboxAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby' | 'aria-hidden' | 'aria-describedby'>;
 
+/**
+ * CheckboxBaseUnControlled component with internal state management.
+ *
+ * This is a low-level uncontrolled checkbox that manages its own checked state.
+ * It automatically handles toggle behavior and notifies via onChange callback.
+ * Useful for checkboxes that don't require external state control.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxBaseUnControlled
+ *   checked={false}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ * ```
+ */
 export declare const CheckboxBase: ForwardRefExoticComponent<CheckboxBaseUnControlledProps<string> & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;
 
 declare type CheckboxBaseAriaAttributesProps = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby' | 'aria-hidden' | 'aria-describedby'>;
 
+/**
+ * CheckboxBaseControlled component for managed checkbox state.
+ *
+ * This is a low-level checkbox component where the checked state is controlled
+ * externally. It handles error states, required validation, and applies appropriate
+ * styling based on the checkbox state (checked, unchecked, indeterminate, disabled).
+ *
+ * @example
+ * ```tsx
+ * <CheckboxBaseControlled
+ *   checked={isChecked}
+ *   onChange={(e) => setIsChecked(e.target.checked)}
+ *   error={hasError}
+ * />
+ * ```
+ */
 export declare const CheckboxBaseControlled: ForwardRefExoticComponent<CheckboxBaseControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -840,6 +1003,22 @@ export declare interface CheckboxBaseStandAloneProps extends InputActionsProps,
  */
 export declare type CheckboxBaseUnControlledProps<Variant = undefined extends string ? unknown : string> = CheckboxBaseControlledProps<Variant>;
 
+/**
+ * CheckboxControlled component for managed checkbox state.
+ *
+ * This component renders a checkbox where the checked state is controlled
+ * externally via props. It handles checked, indeterminate, disabled, and
+ * error states with appropriate styling and ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxControlled
+ *   checked={isChecked}
+ *   onChange={(e) => setIsChecked(e.target.checked)}
+ *   label="Accept terms"
+ * />
+ * ```
+ */
 export declare const CheckboxControlled: ForwardRefExoticComponent<CheckboxControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -855,10 +1034,6 @@ export declare interface CheckboxControlledProps<Variant = undefined extends str
 
 export declare type CheckboxCssClasses = ComponentSelected<ComponentsTypesComponents['CHECKBOX']>;
 
-export declare type CheckboxLabelType = Omit<LabelStandAloneProps, 'children' | 'inputId'> & {
-    content?: string | JSX.Element;
-};
-
 export declare interface CheckboxMessageType {
     message?: CommonTextProps;
     icon?: CommonIconProps;
@@ -880,7 +1055,9 @@ export declare interface CheckboxStandAloneProps extends InputActionsType_2, Dat
      *  Reference for the CheckboxStyled component (input element)
      */
     inputRef?: Ref<HTMLInputElement>;
-    label?: CheckboxLabelType;
+    label?: CommonTextProps & {
+        requiredSymbol?: string | JSX.Element;
+    };
     errorMessage?: CheckboxMessageType;
     checkedIcon?: CommonIconProps;
     checkboxBase?: {
@@ -950,11 +1127,6 @@ export declare interface ChipStandAloneProps extends DataAttributes {
     rangeIcon?: ElementOrIconProps;
     errorMessage?: CommonTextProps;
     rangeSeparator?: CommonTextProps;
-    /**
-     * @deprecated
-     * Use closeIcon -> altText instead
-     */
-    deleteText?: string;
     state: ChipStateType;
     cssClasses?: ChipCssClasses;
 }
@@ -988,7 +1160,7 @@ declare type ComponentSelected<T> = Pick<T, NonVariablesKeys<T>>;
 
 declare type ComponentSelected_2<T> = Pick<T, NonVariablesKeys_2<T>>;
 
-declare type ComponentsTypesAvailableComponents = 'ACCORDION' | 'AVATAR' | 'BADGE' | 'BREADCRUMBS' | 'BUTTON' | 'CALENDAR' | 'CARD_IMAGE' | 'CAROUSEL' | 'CHECKBOX' | 'CHECKBOX_BASE' | 'CHIP' | 'CONTAINER' | 'DATA_TABLE' | 'DOT' | 'DROPDOWN_SELECTED' | 'ERROR_MESSAGE' | 'ICON' | 'INPUT' | 'INPUT_BASE' | 'INPUT_DECORATION' | 'INPUT_SIGNATURE' | 'ITEM_ROVE' | 'LINK' | 'LINK_AS_BUTTON' | 'LIST_OPTIONS' | 'MESSAGE' | 'MODAL' | 'NAVBAR' | 'OPTION' | 'OVERLAY' | 'PAGE_CONTROL' | 'PAGINATION' | 'POPOVER' | 'PROGRESS_BAR' | 'RADIO_BUTTON' | 'SELECTOR_BOX_FILE' | 'SKELETON' | 'SLIDER' | 'SNACKBAR' | 'STEPPER_NUMBER' | 'TABLE' | 'TABLE_BODY' | 'TABLE_CAPTION' | 'TABLE_CELL' | 'TABLE_DIVIDER' | 'TABLE_FOOT' | 'TABLE_HEAD' | 'TABLE_ROW' | 'TABS' | 'TAG' | 'TEXT' | 'TEXT_AREA' | 'TEXT_COUNT' | 'TOGGLE' | 'TOOLTIP' | 'VIRTUAL_KEYBOARD';
+declare type ComponentsTypesAvailableComponents = 'ACCORDION' | 'ALERT' | 'AVATAR' | 'BADGE' | 'BREADCRUMBS' | 'BUTTON' | 'CALENDAR' | 'CARD' | 'CAROUSEL' | 'CHECKBOX' | 'CHECKBOX_BASE' | 'CHIP' | 'DATA_TABLE' | 'DOT' | 'ERROR_MESSAGE' | 'ICON' | 'INPUT' | 'INPUT_BASE' | 'INPUT_DECORATION' | 'INPUT_SIGNATURE' | 'ITEM_ROVE' | 'LINK' | 'LINK_AS_BUTTON' | 'LIST_OPTIONS' | 'MODAL' | 'OPTION' | 'OVERLAY' | 'PAGE_CONTROL' | 'PAGINATION' | 'POPOVER' | 'PROGRESS_BAR' | 'RADIO_BUTTON' | 'SELECT' | 'SELECTOR_BOX_FILE' | 'SKELETON' | 'SLIDER' | 'SNACKBAR' | 'STEPPER_NUMBER' | 'TABLE' | 'TABLE_BODY' | 'TABLE_CAPTION' | 'TABLE_CELL' | 'TABLE_DIVIDER' | 'TABLE_FOOT' | 'TABLE_HEAD' | 'TABLE_ROW' | 'TABS' | 'TAG' | 'TEXT' | 'TEXT_AREA' | 'TEXT_COUNT' | 'TOGGLE' | 'TOOLTIP' | 'VIRTUAL_KEYBOARD';
 
 declare type ComponentsTypesComponents = {
     ACCORDION: {
@@ -1004,6 +1176,27 @@ declare type ComponentsTypesComponents = {
             accordion: string;
         };
     };
+    ALERT: {
+        container: string;
+        contentcontainer: string;
+        description: string;
+        $_error: {
+            alert: string;
+            container: string;
+        };
+        $_informative: {
+            alert: string;
+            container: string;
+        };
+        $_success: {
+            alert: string;
+            container: string;
+        };
+        $_warning: {
+            alert: string;
+            container: string;
+        };
+    };
     AVATAR: {
         avatar: string;
         dot: string;
@@ -1079,21 +1272,20 @@ declare type ComponentsTypesComponents = {
             button: string;
             icon: string;
         };
-        $_medium: {
+        $_small: {
             button: string;
             icon: string;
         };
-        $_small: {
+        $_alternative: {
             button: string;
-            icon: string;
         };
-        $_action_primary: {
+        $_ghost_alt: {
             button: string;
         };
-        $_action_secondary: {
+        $_ghost_primary: {
             button: string;
         };
-        $_action_secondary_alt: {
+        $_ghost_secondary: {
             button: string;
         };
         $_primary: {
@@ -1102,9 +1294,6 @@ declare type ComponentsTypesComponents = {
         $_secondary: {
             button: string;
         };
-        $_secondary_alt: {
-            button: string;
-        };
         dynamic_values: (styles: {
             '$alignText': string;
         }) => {
@@ -1149,22 +1338,16 @@ declare type ComponentsTypesComponents = {
             loader: string;
         };
     };
-    CARD_IMAGE: {
-        card_image: string;
+    CARD: {
+        card: string;
         content: string;
-        description: string;
-        descriptioncontainer: string;
-        imagecontainer: string;
-        linkcontainer: string;
-        textcontainer: string;
-        title: string;
-        titlecontainer: string;
-        $_alternative: {
-            card_image: string;
-        };
+        footer: string;
+        header: string;
         $_default: {
-            card_image: string;
-            description: string;
+            card: string;
+            content: string;
+            footer: string;
+            header: string;
         };
     };
     CAROUSEL: {
@@ -1219,21 +1402,6 @@ declare type ComponentsTypesComponents = {
             rangeitemtext: string;
         };
     };
-    CONTAINER: {
-        container: string;
-        content: string;
-        header: string;
-        title: string;
-        $_alternative: {
-            container: string;
-        };
-        $_default: {
-            container: string;
-        };
-        $_secondary: {
-            container: string;
-        };
-    };
     DATA_TABLE: {
         data_table: string;
         headboxshadow: string;
@@ -1329,51 +1497,6 @@ declare type ComponentsTypesComponents = {
             dot: string;
         };
     };
-    DROPDOWN_SELECTED: {
-        dropdown_selected: string;
-        buttonorlinkcontainer: string;
-        iconclosed: string;
-        iconopened: string;
-        labelclosed: string;
-        labelopened: string;
-        listoptionscontainer: string;
-        $_default: {
-            dropdown_selected: string;
-            buttonorlinkcontainer: string;
-            iconclosed: string;
-            iconopened: string;
-            labelclosed: string;
-            labelopened: string;
-            listoptionscontainer: string;
-        };
-        $_side_menu: {
-            dropdown_selected: string;
-            buttonorlinkcontainer: string;
-            iconclosed: string;
-            iconopened: string;
-            labelclosed: string;
-            labelopened: string;
-            listoptionscontainer: string;
-        };
-        $_topbar: {
-            dropdown_selected: string;
-            buttonorlinkcontainer: string;
-            iconclosed: string;
-            iconopened: string;
-            labelclosed: string;
-            labelopened: string;
-            listoptionscontainer: string;
-        };
-        $_topbar_tab: {
-            dropdown_selected: string;
-            buttonorlinkcontainer: string;
-            iconclosed: string;
-            iconopened: string;
-            labelclosed: string;
-            labelopened: string;
-            listoptionscontainer: string;
-        };
-    };
     ERROR_MESSAGE: {
         error_message: string;
         icon: string;
@@ -1490,76 +1613,11 @@ declare type ComponentsTypesComponents = {
         optionscontainer: string;
         title: string;
         titlecontainer: string;
-        $_code_viewer_subtheme: {
-            list_options: string;
-        };
         $_default: {
             list_options: string;
             title: string;
             titlecontainer: string;
         };
-        $_dropdown_selected_section: {
-            list_options: string;
-            optionscontainer: string;
-        };
-        $_input_dropdown_default: {
-            list_options: string;
-        };
-        $_input_dropdown_section: {
-            list_options: string;
-        };
-        $_input_search: {
-            list_options: string;
-        };
-        $_side_menu_section: {
-            list_options: string;
-            optionscontainer: string;
-            title: string;
-            titlecontainer: string;
-        };
-    };
-    MESSAGE: {
-        message: string;
-        actionbuttoncontainer: string;
-        buttonsectioncontainer: string;
-        closeicon: string;
-        container: string;
-        contentcontainer: string;
-        contentcontainerlargemessage: string;
-        description: string;
-        extraactionbuttoncontainer: string;
-        headercontainer: string;
-        headercontainerlargemessage: string;
-        infoicon: string;
-        linkcontainer: string;
-        linkscontainer: string;
-        title: string;
-        titlecontainer: string;
-        $_error: {
-            message: string;
-            container: string;
-            infoicon: string;
-        };
-        $_informative: {
-            message: string;
-            container: string;
-            infoicon: string;
-        };
-        $_success: {
-            message: string;
-            container: string;
-            infoicon: string;
-        };
-        $_warning: {
-            message: string;
-            container: string;
-            infoicon: string;
-        };
-        action_button: {
-            button: string;
-            icon: string;
-            loader: string;
-        };
     };
     MODAL: {
         modal: string;
@@ -1578,13 +1636,6 @@ declare type ComponentsTypesComponents = {
             modal: string;
         };
     };
-    NAVBAR: {
-        navbar: string;
-        itemcontainer: string;
-        $_default: {
-            navbar: string;
-        };
-    };
     OPTION: {
         option: string;
         checkedicon: string;
@@ -1595,55 +1646,12 @@ declare type ComponentsTypesComponents = {
         labeliconcontainer: string;
         sublabel: string;
         sublabelcontainer: string;
-        $_code_viewer_subtheme: {
-            option: string;
-            label: string;
-        };
-        $_input_dropdown: {
+        $_default: {
             option: string;
             icon: string;
             label: string;
             labeliconcontainer: string;
         };
-        $_input_option: {
-            option: string;
-            icon: string;
-            label: string;
-            labelhighlighted: string;
-            labeliconcontainer: string;
-            sublabel: string;
-        };
-        $_input_option_hightlighted: {
-            option: string;
-            icon: string;
-            label: string;
-            labelhighlighted: string;
-            labeliconcontainer: string;
-            sublabel: string;
-        };
-        $_inverted: {
-            option: string;
-            label: string;
-        };
-        $_side_menu_level_1: {
-            option: string;
-            icon: string;
-            label: string;
-            labeliconcontainer: string;
-        };
-        $_side_menu_level_2: {
-            option: string;
-            label: string;
-        };
-        $_topbar: {
-            option: string;
-            label: string;
-            labelhighlighted: string;
-        };
-        $_topbar_tab: {
-            option: string;
-            label: string;
-        };
     };
     OVERLAY: {
         overlay: string;
@@ -1709,63 +1717,6 @@ declare type ComponentsTypesComponents = {
         $_default: {
             progress_bar: string;
         };
-        $_interactive: {
-            progress_bar: string;
-            barcontainer: string;
-        };
-        slider: {
-            activetrack: string;
-            inactivetrack: string;
-            thumb: string;
-            decrement_button_size: {
-                icon: string;
-                button: string;
-                loader: string;
-            };
-            decrement_button_variant: {
-                button: string;
-                icon: string;
-                loader: string;
-            };
-            tooltip: {
-                arrowcontainer: string;
-                arrowposition: string;
-                arrowsize: string;
-                closebuttoncontainer: string;
-                closebuttonicon: string;
-                headercontainer: string;
-                paragraph: string;
-                paragraphcontainer: string;
-                title: string;
-                tooltipexternalcontainer: string;
-                tooltipinternalcontainer: string;
-                popover: {
-                    arrow: string;
-                    popover: string;
-                };
-                arrow: string;
-                divider: string;
-                dragicon: string;
-                dragiconcontainer: string;
-                tooltipalignstyles: string;
-                tooltipasmodal: string;
-            };
-            buttonstrackscontainer: string;
-            helpertext: string;
-            helpertextcontainer: string;
-            helpertextleftcontainer: string;
-            helpertextrightcontainer: string;
-            innerthumbtooltip: string;
-            label: string;
-            labelcontainer: string;
-            rightthumbicon: string;
-            scalecontainer: string;
-            scaleoption: string;
-            thumbicon: string;
-            tracksthumbscontainer: string;
-            tracksthumbsinnercontainer: string;
-            slider: string;
-        };
     };
     RADIO_BUTTON: {
         radio_button: string;
@@ -1789,12 +1740,8 @@ declare type ComponentsTypesComponents = {
             arrowcontainer: string;
             arrowposition: string;
             arrowsize: string;
-            closebuttoncontainer: string;
-            closebuttonicon: string;
-            headercontainer: string;
             paragraph: string;
             paragraphcontainer: string;
-            title: string;
             tooltipexternalcontainer: string;
             tooltipinternalcontainer: string;
             popover: {
@@ -1802,16 +1749,57 @@ declare type ComponentsTypesComponents = {
                 popover: string;
             };
             arrow: string;
-            divider: string;
-            dragicon: string;
-            dragiconcontainer: string;
             tooltipalignstyles: string;
             tooltipasmodal: string;
         };
     };
+    SELECT: {
+        select: string;
+        buttonorlinkcontainer: string;
+        iconclosed: string;
+        iconopened: string;
+        labelclosed: string;
+        labelopened: string;
+        listoptionscontainer: string;
+        $_default: {
+            select: string;
+            buttonorlinkcontainer: string;
+            iconclosed: string;
+            iconopened: string;
+            labelclosed: string;
+            labelopened: string;
+            listoptionscontainer: string;
+        };
+        $_side_menu: {
+            select: string;
+            buttonorlinkcontainer: string;
+            iconclosed: string;
+            iconopened: string;
+            labelclosed: string;
+            labelopened: string;
+            listoptionscontainer: string;
+        };
+        $_topbar: {
+            select: string;
+            buttonorlinkcontainer: string;
+            iconclosed: string;
+            iconopened: string;
+            labelclosed: string;
+            labelopened: string;
+            listoptionscontainer: string;
+        };
+        $_topbar_tab: {
+            select: string;
+            buttonorlinkcontainer: string;
+            iconclosed: string;
+            iconopened: string;
+            labelclosed: string;
+            labelopened: string;
+            listoptionscontainer: string;
+        };
+    };
     SELECTOR_BOX_FILE: {
         selector_box_file: string;
-        actiondescriptioncontainer: string;
         actionicon: string;
         actioniconandactiontextcontainer: string;
         animationcontainer: string;
@@ -1824,57 +1812,13 @@ declare type ComponentsTypesComponents = {
         containerboxfilename: string;
         containerboxicon: string;
         containerboxtextscontainer: string;
-        description: string;
-        descriptioncontainer: string;
-        errormessage: string;
-        errormessagecontainer: string;
-        errormessageicon: string;
         header: string;
         leftanimationcontainer: string;
         rightanimationcontainer: string;
-        subtitle: string;
-        subtitletooltipcontainer: string;
-        title: string;
-        titlesubtitlecontainer: string;
-        tooltipicon: string;
-        tooltipiconcontainer: string;
         topanimationcontainer: string;
         $_default: {
             selector_box_file: string;
         };
-        button_size: {
-            icon: string;
-            button: string;
-            loader: string;
-        };
-        button_variant: {
-            button: string;
-            icon: string;
-            loader: string;
-        };
-        tooltip: {
-            arrowcontainer: string;
-            arrowposition: string;
-            arrowsize: string;
-            closebuttoncontainer: string;
-            closebuttonicon: string;
-            headercontainer: string;
-            paragraph: string;
-            paragraphcontainer: string;
-            title: string;
-            tooltipexternalcontainer: string;
-            tooltipinternalcontainer: string;
-            popover: {
-                arrow: string;
-                popover: string;
-            };
-            arrow: string;
-            divider: string;
-            dragicon: string;
-            dragiconcontainer: string;
-            tooltipalignstyles: string;
-            tooltipasmodal: string;
-        };
     };
     SKELETON: {
         skeleton: string;
@@ -1933,12 +1877,8 @@ declare type ComponentsTypesComponents = {
             arrowcontainer: string;
             arrowposition: string;
             arrowsize: string;
-            closebuttoncontainer: string;
-            closebuttonicon: string;
-            headercontainer: string;
             paragraph: string;
             paragraphcontainer: string;
-            title: string;
             tooltipexternalcontainer: string;
             tooltipinternalcontainer: string;
             popover: {
@@ -1946,9 +1886,6 @@ declare type ComponentsTypesComponents = {
                 popover: string;
             };
             arrow: string;
-            divider: string;
-            dragicon: string;
-            dragiconcontainer: string;
             tooltipalignstyles: string;
             tooltipasmodal: string;
         };
@@ -2253,15 +2190,8 @@ declare type ComponentsTypesComponents = {
         arrowcontainer: string;
         arrowposition: string;
         arrowsize: string;
-        closebuttoncontainer: string;
-        closebuttonicon: string;
-        divider: string;
-        dragicon: string;
-        dragiconcontainer: string;
-        headercontainer: string;
         paragraph: string;
         paragraphcontainer: string;
-        title: string;
         tooltipalignstyles: string;
         tooltipasmodal: string;
         tooltipexternalcontainer: string;
@@ -2271,12 +2201,8 @@ declare type ComponentsTypesComponents = {
             arrowcontainer: string;
             arrowposition: string;
             arrowsize: string;
-            closebuttoncontainer: string;
-            closebuttonicon: string;
-            headercontainer: string;
             paragraph: string;
             paragraphcontainer: string;
-            title: string;
             tooltipexternalcontainer: string;
             tooltipinternalcontainer: string;
         };
@@ -2300,75 +2226,6 @@ declare type ComponentsTypesComponents = {
     };
 };
 
-/**
- * Container component for grouping content with consistent styling and structure.
- *
- * This component wraps its children in a styled container, optionally displaying a header/title.
- * It is useful for organizing related content, settings, or sections in a visually consistent way.
- * Supports custom CSS classes and theming via variants.
- *
- * Internally, it computes CSS classes using a custom hook and delegates rendering to {@link ContainerStandAlone}.
- *
- * This component accepts a generic type parameter `<Variant extends string>` to allow for custom variant values,
- * enabling flexible theming and styling.
- *
- * @example
- * ```tsx
- * <Container title={{ content: "Section Title" }}>
- *   Section content goes here.
- * </Container>
- *
- * // With a custom variant type:
- * type MyVariant = "primary" | "secondary";
- * <Container<MyVariant> title={{ content: "Primary Section" }} variant="primary">
- *   Primary section content.
- * </Container>
- * ```
- */
-export declare const Container: ForwardRefExoticComponent<ContainerProps<string> & {
-children?: ReactNode | undefined;
-} & RefAttributes<HTMLDivElement>>;
-
-declare type ContainerCssClasses = ComponentSelected<ComponentsTypesComponents['CONTAINER']>;
-
-/**
- * Interface for the container component with a variant.
- * Extends the IContainerStandAlone interface and adds a variant and additional CSS classes.
- *
- * @template Variant - The type of the variant for the container.
- */
-export declare interface ContainerProps<Variant extends string | unknown> extends Omit<ContainerStandAloneProps, 'cssClasses'> {
-    variant?: Variant;
-    additionalClasses?: Partial<ContainerCssClasses>;
-}
-
-/**
- * Interface for the standalone container component.
- * It includes optional custom CSS classes, a title, and a data-testid attribute.
- */
-export declare interface ContainerStandAloneProps extends DataAttributes {
-    cssClasses?: ContainerCssClasses;
-    title?: CommonTextProps;
-}
-
-/**
- * Interface representing the styles for the container component.
- */
-export declare interface ContainerStyleProps extends CssLibPropsType {
-    _header?: CssLibPropsType;
-    _title?: CssLibPropsType;
-    _content?: CssLibPropsType;
-}
-
-/**
- * Type representing the styles for different variants of the container component.
- *
- * @template Variant - The type of the variant keys.
- */
-export declare type ContainerVariantStyles<Variant extends string> = ContainerStyleProps & {
-    [key in Variant]: ContainerStyleProps;
-};
-
 declare type CssAdvancedSelectorsType = {
     adjacent?: CssLibPropsType & {
         $target?: string;
@@ -3074,6 +2931,21 @@ declare type DataAttributes = {
     [key in `data-${string}`]?: string;
 };
 
+/**
+ * DataTable component for displaying structured data in a table format.
+ *
+ * This component provides advanced table functionality including sticky columns,
+ * scrollable content, shadow effects, and divider management. It handles complex
+ * table behaviors automatically through internal hooks.
+ *
+ * @example
+ * ```tsx
+ * <DataTable variant="striped">
+ *   <TableHead>...</TableHead>
+ *   <TableBody>...</TableBody>
+ * </DataTable>
+ * ```
+ */
 export declare const DataTable: ForwardRefExoticComponent<DataTableProps<string> & RefAttributes<HTMLDivElement>>;
 
 export declare type DataTableCellProps = TableCellProps & {
@@ -3203,16 +3075,30 @@ export declare type DataTableVariantStyles<Variant extends string> = DataTableSt
     [key in Variant]: DataTableStyleProps;
 };
 
+/**
+ * Options for formatting dates using Intl.DateTimeFormat.
+ * Provides granular control over date/time display format.
+ */
 declare interface DateFormatOptions {
+    /** Representation of the weekday ('long', 'short', 'narrow') */
     weekday?: Intl.DateTimeFormatOptions['weekday'];
+    /** Representation of the year ('numeric', '2-digit') */
     year?: Intl.DateTimeFormatOptions['year'];
+    /** Representation of the month ('numeric', '2-digit', 'long', 'short', 'narrow') */
     month?: Intl.DateTimeFormatOptions['month'];
+    /** Representation of the day ('numeric', '2-digit') */
     day?: Intl.DateTimeFormatOptions['day'];
+    /** Representation of the hour ('numeric', '2-digit') */
     hour?: Intl.DateTimeFormatOptions['hour'];
+    /** Representation of the minute ('numeric', '2-digit') */
     minute?: Intl.DateTimeFormatOptions['minute'];
+    /** Representation of the second ('numeric', '2-digit') */
     second?: Intl.DateTimeFormatOptions['second'];
+    /** Representation of the time zone name ('long', 'short', etc.) */
     timeZoneName?: Intl.DateTimeFormatOptions['timeZoneName'];
+    /** Whether to use 12-hour time format (true) or 24-hour format (false) */
     hour12?: Intl.DateTimeFormatOptions['hour12'];
+    /** Hour cycle to use ('h11', 'h12', 'h23', 'h24') */
     hourCycle?: Intl.DateTimeFormatOptions['hourCycle'];
 }
 
@@ -3296,205 +3182,130 @@ export declare type DotThemeStyles<variant extends string, size extends string>
 };
 
 /**
- * Uncontrolled dropdown component for displaying selectable options.
- *
- * This component manages its own open/close state and selected option internally, so you do not need
- * to control the dropdown state from the parent. It is useful when you want a simple dropdown that handles
- * its own toggle and selection logic. You can optionally receive state changes via callbacks.
- *
- * Internally, it wraps {@link DropdownSelectedControlled} and passes the necessary props.
- *
- * @example
- * ```tsx
- * <DropdownSelectedUnControlled defaultOpen />
- * ```
+ * @name ElementOrIconProps
+ * @description
+ * Interface for the ElementOrIcon component
+ * @property { JSX.Element | HTMLElement | React.ReactNode} icon - Icon to be displayed
+ * @property {boolean} basic - If true, the icon will be displayed as a basic icon
+ */
+declare interface ElementOrIconProps extends Omit<IconProps, 'icon'>, DataAttributes {
+    icon?: JSX.Element | HTMLElement | React.ReactNode | string;
+    basic?: boolean;
+}
+
+declare type FormatDateType = 'd' | 'dd' | 'ddd' | 'dddd' | 'f' | 'ff' | 'fff' | 'F' | 'FF' | 'FFF' | 'ffff' | 'FFFF' | 't' | 'tt' | 'T' | 'TT' | 'ttt' | 'TTT' | 'tttt' | 'TTTT';
+
+/**
+ * React Context for generic component implementations.
+ * Provides access to custom Link and Image components throughout the application.
  */
-export declare const DropdownSelected: ForwardRefExoticComponent<DropdownSelectedUnControlledProps & RefAttributes<HTMLDivElement>>;
+export declare const GenericComponentContext: Context<GenericComponentsType | null>;
 
 /**
- * Controlled dropdown component for displaying selectable options.
+ * Provider component for custom generic component implementations.
+ * Allows applications to inject their own Link and Image components
+ * (e.g., Next.js Link, React Router Link) to be used by all Kubit components.
  *
- * This component renders a dropdown that is fully controlled by its parent, allowing for custom open/close logic,
- * keyboard navigation, and flexible theming. It is useful when you need to manage the dropdown state and behavior externally.
+ * This is essential for integrating Kubit components with different routing libraries
+ * or custom implementations while maintaining consistent behavior across the application.
  *
- * Internally, it wraps {@link DropdownSelectedStandAlone} and handles keyboard focus and scroll-based closing.
- * Accepts a generic type parameter `<Variant extends string>` to allow for custom variant values, enabling flexible styling.
+ * @param props - Provider props
+ * @param props.children - React children to be wrapped by the provider
+ * @param props.value - Custom generic components to be used throughout the application
+ *
+ * @returns The provider component wrapping all child components
  *
  * @example
  * ```tsx
- * <DropdownSelectedControlled open listOptions={options} />
+ * import { Link } from 'react-router-dom';
  *
- * // With a custom variant type:
- * type MyVariant = "primary" | "secondary";
- * <DropdownSelectedControlled<MyVariant> variant="primary" open listOptions={options} />
+ * const customComponents = {
+ *   LINK: Link,
+ *   IMAGE: CustomImage,
+ * };
+ *
+ * <GenericComponentsProvider value={customComponents}>
+ *   <App />
+ * </GenericComponentsProvider>
  * ```
  */
-export declare const DropdownSelectedControlled: ForwardRefExoticComponent<DropdownSelectedControlledProps<string> & RefAttributes<HTMLDivElement>>;
+export declare const GenericComponentsProvider: ({ children, value, }: PropsWithChildren<GenericComponentsProviderProps>) => JSX.Element;
 
 /**
- * Interface for the controlled DropdownSelected component.
- * Extends the DropdownSelectedStandAloneProps interface and adds a variant and additional CSS classes.
- *
- * @template Variant - The type of the variant for the DropdownSelected.
+ * Props for the GenericComponentsProvider.
+ * Wraps the application with custom component implementations.
  */
-export declare interface DropdownSelectedControlledProps<Variant = undefined extends string ? unknown : string> extends Omit<DropdownSelectedStandAloneProps, 'listOptionsRef' | 'onButtonKeyDown' | 'component'> {
-    variant?: Variant;
-    additionalClasses?: Partial<DropdownSelectedCssClasses>;
+declare interface GenericComponentsProviderProps {
+    /** The custom generic components to be made available to child components */
+    value: GenericComponentsType;
 }
 
-declare type DropdownSelectedCssClasses = ComponentSelected<ComponentsTypesComponents['DROPDOWN_SELECTED']>;
-
 /**
- * Represents the type for the list options in the DropdownSelected component.
+ * Collection of generic component implementations.
+ * Allows customization of primitive components used throughout the library.
  */
-export declare type DropdownSelectedListOptionsProps = Omit<ListOptionsProps, 'selectedValue' | 'onOptionClick'>;
-
-declare type DropdownSelectedOmittedProps = 'buttonOrLinkRef' | 'open' | 'onButtonClick' | 'optionSelected' | 'onOptionClick' | 'onClosePopover' | 'onMouseEnter' | 'onMouseLeave' | 'onBlur' | 'onFocus' | 'onKeyDown';
+declare interface GenericComponentsType {
+    /** Link component implementation (required) */
+    LINK: GenericLinkType;
+    /** Image component implementation (optional) */
+    IMAGE?: GenericImageType;
+}
 
 /**
- * Represents the type for the popover in the DropdownSelected component.
+ * Props for a generic image component.
+ * Inherits all standard HTML image attributes.
  */
-export declare type DropdownSelectedPopoverProps = Omit<IPopover, 'children' | 'open'>;
+declare type GenericImageProps = ImgHTMLAttributes<HTMLImageElement>;
 
 /**
- * Interface for the standalone DropdownSelected component.
- * Includes properties for state, event handlers, and CSS classes.
+ * Type definition for a generic image component.
+ * Can be either a functional component or a forward ref component to support refs.
  */
-export declare interface DropdownSelectedStandAloneProps extends DataAttributes {
-    open: boolean;
-    popover?: DropdownSelectedPopoverProps;
-    onButtonClick: MouseEventHandler<HTMLButtonElement | HTMLLinkElement>;
-    onButtonKeyDown: KeyboardEventHandler<HTMLButtonElement | HTMLLinkElement>;
-    onClosePopover: () => void;
-    label: CommonTextProps;
-    icon: ElementOrIconProps;
-    listOptions: DropdownSelectedListOptionsProps;
-    optionSelected?: string;
-    onOptionClick: (value: string) => void;
-    listOptionsRef: RefObject<HTMLDivElement>;
-    closePopoverOnScroll?: boolean;
-    openAndCloseOnHover?: boolean;
-    url?: string;
-    urlTarget?: HTMLAttributeAnchorTarget;
-    component: 'button' | GenericLinkType;
-    buttonOrLinkRef?: RefObject<HTMLButtonElement>;
-    onFocus?: FocusEventHandler<HTMLDivElement>;
-    onBlur?: FocusEventHandler<HTMLDivElement>;
-    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
-    cssClasses?: DropdownSelectedCssClasses;
-}
+declare type GenericImageType = ((props: GenericImageProps) => JSX.Element) | ForwardRefExoticComponent<GenericImageProps & RefAttributes<unknown>>;
 
-export declare interface DropdownSelectedStyleProps extends CssLibPropsType {
-    _buttonOrLinkContainer?: CssLibPropsType;
-    _labelOpened?: CssLibPropsType;
-    _labelClosed?: CssLibPropsType;
-    _iconOpened?: CssLibPropsType;
-    _iconClosed?: CssLibPropsType;
-    _listOptionsContainer?: CssLibPropsType;
-}
+/**
+ * Subset of ARIA attributes applicable to link elements.
+ * Ensures proper accessibility for navigation components.
+ */
+declare type GenericLinkAriaAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-describedby' | 'aria-labelledby' | 'aria-disabled' | 'aria-current'>;
 
 /**
- * Interface for the uncontrolled DropdownSelected component.
- * Extends the DropdownSelectedProps interface and adds default properties.
- */
-export declare interface DropdownSelectedUnControlledProps extends Omit<DropdownSelectedControlledProps, DropdownSelectedOmittedProps> {
-    defaultOpen?: boolean;
-    defaultOptionSelected?: string;
-    onOptionClick?: (value: string) => void;
-    onButtonClick?: (open: boolean) => void;
-    onClosePopover?: (open: boolean) => void;
-    onMouseEnter?: (open: boolean) => void;
-    onMouseLeave?: (open: boolean) => void;
-    onFocus?: (open: boolean) => void;
-    onBlur?: (open: boolean) => void;
-}
-
-export declare type DropdownSelectedVariantStyles<Variant extends string> = DropdownSelectedStyleProps & {
-    [key in Variant]: DropdownSelectedStyleProps;
-};
-
-/**
- * @name ElementOrIconProps
- * @description
- * Interface for the ElementOrIcon component
- * @property { JSX.Element | HTMLElement | React.ReactNode} icon - Icon to be displayed
- * @property {boolean} basic - If true, the icon will be displayed as a basic icon
- */
-declare interface ElementOrIconProps extends Omit<IconProps, 'icon'>, DataAttributes {
-    icon?: JSX.Element | HTMLElement | React.ReactNode | string;
-    basic?: boolean;
-}
-
-declare type FormatDateType = 'd' | 'dd' | 'ddd' | 'dddd' | 'f' | 'ff' | 'fff' | 'F' | 'FF' | 'FFF' | 'ffff' | 'FFFF' | 't' | 'tt' | 'T' | 'TT' | 'ttt' | 'TTT' | 'tttt' | 'TTTT';
-
-export declare const GenericComponentContext: Context<GenericComponentsType | null>;
-
-export declare const GenericComponentsProvider: ({ children, value, }: PropsWithChildren<GenericComponentsProviderProps>) => JSX.Element;
-
-/**
- * Provides the interface for the generic components provider.
- * @property {GenericComponentsType} value - The actual components to be provided.
- */
-declare interface GenericComponentsProviderProps {
-    value: GenericComponentsType;
-}
-
-/**
- * Defines the types for generic components, including links and images.
- */
-declare interface GenericComponentsType {
-    LINK: GenericLinkType;
-    IMAGE?: GenericImageType;
-}
-
-/**
- * Defines the properties for a generic image component.
- */
-declare type GenericImageProps = ImgHTMLAttributes<HTMLImageElement>;
-
-/**
- * Defines the type for a generic image component, which can be either a functional component or a forward ref component.
- */
-declare type GenericImageType = ((props: GenericImageProps) => JSX.Element) | ForwardRefExoticComponent<GenericImageProps & RefAttributes<unknown>>;
-
-declare type GenericLinkAriaAttributes = Pick<AriaAttributes, 'aria-label' | 'aria-describedby' | 'aria-labelledby' | 'aria-disabled' | 'aria-current'>;
-
-/**
- * Defines the properties for a generic link component.
- * @property {string} url - The URL the link points to.
- * @property {string | JSX.Element} children - The content inside the link.
- * @property {string} [className] - Optional CSS class for styling.
- * @property {string} [target] - Specifies where to open the linked document.
- * @property {boolean} [aria-disabled] - Indicates that the element is perceivable but disabled.
- * @property {string} [aria-label] - Defines a string value that labels the current element.
- * @property {string} [aria-describedby] - Defines a string value that labels the current element.
- * @property {string} [aria-current] - Defines value for the current element.
- * @property {() => void} [onClick] - Function to call when the link is clicked.
- * @property {() => void} [onFocus] - Function to call when the link is focused.
- * @property {() => void} [onMouseEnter] - Function to call when the mouse enters the link area.
- * @property {() => void} [onMouseLeave] - Function to call when the mouse leaves the link area.
- * @property {ROLES} [role] - ARIA role to describe the link's type.
- * @property {string} [dataTestId] - Test ID for testing purposes.
- * @property {boolean} [draggable] - Indicates whether the element can be dragged.
+ * Props for a generic link component.
+ * Provides a flexible interface for custom link implementations that can be used
+ * throughout the component library (e.g., for React Router, Next.js Link, etc.).
  */
 declare type GenericLinkProps = {
+    /** The destination URL for the link */
     url: string;
+    /** Optional unique identifier for the link element */
     id?: string;
+    /** Content to be displayed inside the link */
     children: string | JSX.Element;
+    /** Optional CSS class name(s) for styling */
     className?: string;
+    /** Specifies where to open the linked document ('_blank', '_self', '_parent', '_top') */
     target?: string;
+    /** Callback function invoked when the link is clicked */
     onClick?: () => void;
+    /** Callback function invoked when the link receives focus */
     onFocus?: () => void;
+    /** Callback function invoked when the mouse pointer enters the link area */
     onMouseEnter?: () => void;
+    /** Callback function invoked when the mouse pointer leaves the link area */
     onMouseLeave?: () => void;
+    /** Relationship between the current document and the linked document */
     rel?: string;
+    /** ARIA role to override the default link role if needed */
     role?: AriaRole;
+    /** Test ID for automated testing purposes */
     dataTestId?: string;
+    /** Whether the element can be dragged */
     draggable?: boolean;
 } & GenericLinkAriaAttributes & DataAttributes;
 
 /**
- * Defines the type for a generic link component, which can be either a functional component or a forward ref component.
+ * Type definition for a generic link component.
+ * Can be either a functional component or a forward ref component to support refs.
  */
 declare type GenericLinkType = ((props: GenericLinkProps) => JSX.Element) | ForwardRefExoticComponent<GenericLinkProps & RefAttributes<unknown>>;
 
@@ -3651,10 +3462,6 @@ export declare interface IconStyleProps extends CssLibPropsType {
 
 export declare type IImage = ImageStandAloneProps;
 
-declare interface IInputLabelProps {
-    variant?: string;
-}
-
 /**
  * A flexible image component that supports generic customization.
  *
@@ -3714,6 +3521,23 @@ export declare interface ImageStyleProps {
     width?: string;
 }
 
+/**
+ * Input component for text input fields.
+ *
+ * This component provides a styled text input with support for labels, helper text,
+ * error messages, icons, and various states (disabled, error, success). It manages
+ * focus state internally and applies appropriate styling.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   error="Invalid email"
+ * />
+ * ```
+ */
 export declare const Input: ForwardRefExoticComponent<InputProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type InputActionsProps = Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onChange'>;
@@ -3722,6 +3546,23 @@ export declare type InputActionsType = Pick<DOMAttributes<HTMLInputElement>, 'on
 
 declare type InputActionsType_2 = Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onChange'>;
 
+/**
+ * InputBase component for basic text input functionality.
+ *
+ * This is a low-level input component that provides the foundation for more
+ * complex input components. It manages states (focused, filled, error, disabled)
+ * and applies appropriate styling and ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * <InputBase
+ *   placeholder="Enter text"
+ *   error={hasError}
+ *   filled={!!value}
+ *   focused={isFocused}
+ * />
+ * ```
+ */
 export declare const InputBase: ForwardRefExoticComponent<InputBaseProps<string> & RefAttributes<HTMLInputElement>>;
 
 export declare type InputBaseActionsType = Pick<DOMAttributes<HTMLInputElement>, 'onKeyDown' | 'onFocus' | 'onBlur' | 'onPaste' | 'onCopy'>;
@@ -3777,6 +3618,24 @@ export declare type InputBaseVariantStyles<Variant extends string> = CssLibProps
 
 declare type InputCssClasses = ComponentSelected<ComponentsTypesComponents['INPUT']>;
 
+/**
+ * InputDecoration component for wrapping and decorating input fields.
+ *
+ * This component provides a styled container for input elements with support
+ * for labels, icons, helper text, and various visual states. It manages the
+ * state representation (focused, filled, error, disabled) for consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <InputDecoration
+ *   label="Email"
+ *   error={hasError}
+ *   helperText="Enter a valid email"
+ * >
+ *   <input type="email" />
+ * </InputDecoration>
+ * ```
+ */
 export declare const InputDecoration: ForwardRefExoticComponent<InputDecorationProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type InputDecorationCssClasses = ComponentSelected<ComponentsTypesComponents['INPUT_DECORATION']>;
@@ -3804,7 +3663,7 @@ export declare interface InputDecorationProps<Variant = undefined extends string
  */
 export declare interface InputDecorationStandAloneProps extends DataAttributes {
     disabled?: boolean;
-    decoration?: ElementOrIconProps;
+    decoration?: CommonIconProps;
     cssClasses?: InputDecorationCssClasses;
     component?: React.ElementType;
 }
@@ -3830,8 +3689,43 @@ export declare interface InputProps<Variant = undefined extends string ? unknown
     additionalClasses?: Partial<InputCssClasses>;
 }
 
+/**
+ * InputSignatureUnControlled component with internal signature management.
+ *
+ * This component provides a canvas-based signature capture that manages its own
+ * state internally. It handles drawing, clearing, and state updates automatically.
+ * Exposes methods via ref for resetting the signature canvas.
+ *
+ * @example
+ * ```tsx
+ * const signatureRef = useRef();
+ *
+ * <InputSignatureUnControlled
+ *   ref={signatureRef}
+ *   onChange={(dataUrl) => console.log(dataUrl)}
+ * />
+ *
+ * // Reset signature: signatureRef.current.reset()
+ * ```
+ */
 export declare const InputSignature: ForwardRefExoticComponent<InputSignatureUnControlledProps<string> & RefAttributes<InputSignatureCustomHandle | undefined>>;
 
+/**
+ * InputSignatureControlled component for capturing handwritten signatures.
+ *
+ * This component provides a canvas-based signature capture interface where
+ * signature style (color, line width) is controlled externally. It's useful
+ * for forms requiring user signatures.
+ *
+ * @example
+ * ```tsx
+ * <InputSignatureControlled
+ *   signatureStyle={{ color: '#000000', lineWidth: 2 }}
+ *   setSignatureStyles={(style) => console.log(style)}
+ *   onSignatureChange={(dataUrl) => setSignature(dataUrl)}
+ * />
+ * ```
+ */
 export declare const InputSignatureControlled: ForwardRefExoticComponent<InputSignatureControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -3908,7 +3802,6 @@ export declare interface InputStandAloneProps extends DataAttributes, Omit<Input
     required?: boolean;
     rightDecoration?: InputDecorationProps;
     leftDecoration?: InputDecorationProps;
-    label?: IInputLabelProps;
     /** Value to perform truncation logic */
     truncate?: boolean;
     /** HTML Standard attribute to focus automatically
@@ -4043,17 +3936,77 @@ export declare interface ISnackbarV2 extends Omit<ISnackbarStandAlone, 'onMouseE
 
 declare type keyMoveType = number | ((previous: number, e?: KeyboardEvent) => number) | null;
 
+/**
+ * Main provider component for the Kubit component library.
+ * Orchestrates all sub-providers (Utils, Styles, and GenericComponents) and provides
+ * a single entry point for configuring the entire component library context.
+ *
+ * This provider wraps the application and supplies:
+ * - Date manipulation and formatting utilities
+ * - Theme and styling configuration
+ * - Custom generic components (Link, Image)
+ *
+ * @param props - Configuration props for the provider
+ * @param props.children - React children to be wrapped by the provider
+ * @param props.genericComponentsProvider - Custom implementations of generic components (Link, Image).
+ *        Defaults to library's built-in components if not provided
+ * @param props.utilsConfig - Optional configuration to override default utility functions
+ *        (date helpers, formatters, asset paths)
+ *
+ * @returns The provider component wrapping all child components
+ *
+ * @example
+ * ```tsx
+ * import { KubitProvider } from '@kubit/react-components';
+ *
+ * function App() {
+ *   return (
+ *     <KubitProvider
+ *       genericComponentsProvider={{
+ *         LINK: CustomLink,
+ *         IMAGE: CustomImage,
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </KubitProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const KubitProvider: ({ children, genericComponentsProvider, utilsConfig, }: KubitProviderProps) => JSX.Element;
 
+/**
+ * Props for the KubitProvider component.
+ * Provides configuration for the entire Kubit component library context.
+ */
 declare interface KubitProviderProps {
+    /**
+     * The React children to be wrapped by the provider.
+     */
     children?: React.ReactNode;
+    /**
+     * Custom generic components (like Link and Image) to be used throughout the application.
+     * Defaults to the library's default generic components if not provided.
+     */
     genericComponentsProvider?: GenericComponentsType;
-    showErrors?: boolean;
-    idCreateModal?: string | null;
-    customFallback?: JSX.Element;
+    /**
+     * Configuration for utility functions like date helpers, formatting, and assets.
+     * Allows overriding the default utility configurations.
+     */
     utilsConfig?: UtilsContextType;
 }
 
+/**
+ * LabelStandAlone component renders an accessible label element with optional required indicator.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LabelStandAlone inputId="email" required requiredSymbol="*">
+ *   Email Address
+ * </LabelStandAlone>
+ * ```
+ */
 export declare const Label: ForwardRefExoticComponent<LabelStandAloneProps & RefAttributes<HTMLParagraphElement>>;
 
 /**
@@ -4185,6 +4138,21 @@ export declare type LinkVariantStyles<Variant extends string> = LinkStylesProps
     [key in Variant]?: LinkStylesProps;
 };
 
+/**
+ * ListOptions component for displaying a list of selectable options.
+ *
+ * This component renders a list container for options/items, commonly used
+ * in dropdowns, select menus, or autocomplete interfaces. It manages styling
+ * and provides a consistent container for option elements.
+ *
+ * @example
+ * ```tsx
+ * <ListOptions variant="default">
+ *   <Option>Option 1</Option>
+ *   <Option>Option 2</Option>
+ * </ListOptions>
+ * ```
+ */
 export declare const ListOptions: ForwardRefExoticComponent<ListOptionsProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4232,7 +4200,7 @@ export declare interface ListOptionsStandAloneProps extends DataAttributes {
     content?: React.ReactNode;
     onOptionClick?: (value: string, event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>) => void;
     multiSelect?: boolean;
-    checkedIcon?: ElementOrIconProps;
+    checkedIcon?: CommonIconProps;
     id?: string;
     roveFocus?: UseRoveFocusProps;
     index?: number;
@@ -4252,129 +4220,21 @@ export declare type ListOptionsVariantStyles<Variant extends string> = ListOptio
     [key in Variant]: ListOptionsStyleProps;
 };
 
+/**
+ * Media query strings for targeting specific screen size ranges.
+ * Built from the provided breakpoints configuration.
+ */
 declare interface MediaQueries {
+    /** Media query for mobile devices only (below md breakpoint) */
     onlyMobile: string;
+    /** Media query for tablets only (between md and lg breakpoints) */
     onlyTablet: string;
+    /** Media query for desktops (below xl breakpoint) */
     onlyDesktop: string;
+    /** Media query for large desktops (xl breakpoint and above) */
     onlyLargeDesktop: string;
 }
 
-export declare const Message: ForwardRefExoticComponent<MessageUnControlledProps<string> & RefAttributes<HTMLDivElement>>;
-
-/**
- * Represents the type for the action button in the Message component.
- */
-export declare type MessageActionButtonProps = Omit<ButtonProps, 'children' | 'size'> & {
-    content?: React.ReactNode;
-    size?: string;
-};
-
-/**
- * Represents the type for the container as a link in the Message component.
- */
-export declare interface MessageContainerAsLinkProps {
-    onClick?: () => void;
-    url?: string;
-    target?: React.HTMLAttributeAnchorTarget;
-}
-
-export declare const MessageControlled: ForwardRefExoticComponent<MessageProps<string> & RefAttributes<HTMLDivElement>>;
-
-declare type MessageCssClasses = ComponentSelected<ComponentsTypesComponents['MESSAGE']>;
-
-/**
- * Represents the type for the extra action button in the Message component.
- */
-export declare type MessageExtraActionButtonProps = Omit<ButtonProps, 'children'> & {
-    content?: React.ReactNode;
-};
-
-/**
- * Represents the type for the link in the Message component.
- */
-export declare type MessageLinkProps = Omit<LinkProps, 'children'> & {
-    content?: string;
-};
-
-/**
- * Interface for the controlled Message component.
- * Extends the MessageStandAloneProps interface and adds a variant and additional CSS classes.
- *
- * @template Variant - The type of the variant for the Message.
- */
-export declare interface MessageProps<Variant = undefined extends string ? unknown : string> extends Omit<MessageStandAloneProps, 'linkComponent'> {
-    open: boolean;
-    variant?: Variant;
-    additionalClasses?: Partial<MessageCssClasses>;
-}
-
-/**
- * Interface for the standalone Message component.
- * Includes properties for icons, buttons, links, tags, and CSS classes.
- */
-export declare interface MessageStandAloneProps extends DataAttributes {
-    linkComponent: GenericLinkType;
-    messageContainerProps?: MessageContainerAsLinkProps;
-    titleAndContentContainerProps?: MessageContainerAsLinkProps;
-    titleAndContentRole?: AriaRole;
-    infoIcon?: ElementOrIconProps;
-    actionButton?: MessageActionButtonProps;
-    extraActionButton?: MessageExtraActionButtonProps;
-    content: CommonTextProps;
-    inlineLink?: MessageLinkProps;
-    title?: CommonTextProps;
-    tag?: MessageTagProps;
-    ariaMessageId?: string;
-    closeIcon?: ElementOrIconProps;
-    maxContentLength?: number;
-    open: boolean;
-    role?: React.AriaRole;
-    id?: string;
-    ariaLive?: AriaAttributes['aria-live'];
-    links?: MessageLinkProps[];
-    cssClasses?: MessageCssClasses;
-}
-
-export declare interface MessageStyleProps extends CssLibPropsType {
-    _container?: CssLibPropsType;
-    _headerContainer?: CssLibPropsType;
-    _headerContainerLargeMessage?: CssLibPropsType;
-    _title?: CssLibPropsType;
-    _titleContainer?: CssLibPropsType;
-    _contentContainer?: CssLibPropsType;
-    _contentContainerLargeMessage?: CssLibPropsType;
-    _description?: CssLibPropsType;
-    _infoIcon?: CssLibPropsType;
-    _closeIcon?: CssLibPropsType;
-    _buttonSectionContainer?: CssLibPropsType;
-    _actionButtonContainer?: CssLibPropsType;
-    _extraActionButtonContainer?: CssLibPropsType;
-    _illustration?: CssLibPropsType;
-    _linkContainer?: CssLibPropsType;
-    _linksContainer?: CssLibPropsType;
-}
-
-/**
- * Represents the type for the tag in the Message component.
- */
-export declare type MessageTagProps = Omit<TagProps, 'children'> & {
-    content: string;
-};
-
-/**
- * Interface for the uncontrolled Message component.
- * Extends the MessageProps interface and omits specific properties.
- *
- * @template Variant - The type of the variant for the Message.
- */
-export declare interface MessageUnControlledProps<Variant = undefined extends string ? unknown : string> extends Omit<MessageProps<Variant>, 'open'> {
-    defaultOpen?: boolean;
-}
-
-export declare type MessageVariantStyles<Variant extends string> = MessageStyleProps & {
-    [key in Variant]: MessageStyleProps;
-};
-
 /**
  * Options for middleware configuration in the popover
  */
@@ -4384,6 +4244,23 @@ declare interface MiddlewareOptions {
     hideWhenDetached?: boolean;
 }
 
+/**
+ * ModalUnControlled component with internal state management.
+ *
+ * This component renders a modal that manages its own open/close state internally.
+ * It automatically syncs with prop changes and handles keyboard interactions.
+ * Useful when you don't need external control over the modal's visibility.
+ *
+ * @example
+ * ```tsx
+ * <ModalUnControlled
+ *   open={true}
+ *   onClose={() => console.log('closed')}
+ * >
+ *   Modal content
+ * </ModalUnControlled>
+ * ```
+ */
 export declare const Modal: ForwardRefExoticComponent<ModalUnControlledProps<string | undefined> & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;
@@ -4404,6 +4281,24 @@ export declare interface ModalContentContainerProps extends Pick<AriaAttributes,
     role?: string;
 }
 
+/**
+ * ModalControlled component for displaying overlay dialogs.
+ *
+ * This component manages modal visibility externally through props. It provides
+ * scroll detection, swipe-down gestures, focus management, and portal rendering.
+ * Use this when you need full control over the modal's open/close state.
+ *
+ * @example
+ * ```tsx
+ * <ModalControlled
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   variant="default"
+ * >
+ *   Modal content here
+ * </ModalControlled>
+ * ```
+ */
 export declare const ModalControlled: ForwardRefExoticComponent<ModalControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4422,13 +4317,6 @@ export declare interface ModalControlledProps<Variant = undefined extends string
 
 declare type ModalCssClasses = ComponentSelected<ComponentsTypesComponents['MODAL']>;
 
-/**
- * Represents the type for the footer in the Modal component.
- */
-export declare type ModalFooterProps = Omit<NavBarProps, 'variant'> & {
-    variant?: string;
-};
-
 declare type ModalOmittedProps = 'styles' | 'device' | 'contentHasScroll';
 
 /**
@@ -4455,18 +4343,18 @@ export declare interface ModalStandAloneProps extends DataAttributes {
     title?: CommonTextProps & {
         visible?: boolean;
     };
-    closeIcon?: ElementOrIconProps;
+    closeIcon?: CommonIconProps;
     closeButton?: ModalButtonProps;
     contentContainer?: ModalContentContainerProps;
     content?: ReactNode;
     contentScrollArias?: Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;
     contentHasScroll: boolean;
-    footer?: ModalFooterProps;
+    footer?: ReactNode;
     device: DeviceBreakpointsType;
     onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
     onPopoverCloseInternally?: () => void;
     cssClasses?: ModalCssClasses;
-    dragIcon?: ElementOrIconProps;
+    dragIcon?: CommonIconProps;
 }
 
 /**
@@ -4507,51 +4395,6 @@ export declare type ModalVariantStyles<Variant extends string> = ModalStyleProps
     [key in Variant]: ModalStyleProps;
 };
 
-/**
- * A component that renders a navigation bar, which can be used as a header, footer, or standalone navigation.
- * It supports custom CSS classes and forwards a ref to the inner navigation container.
- *
- * @param {INavBarControlled} props - The props for the navigation bar component.
- * @param {ForwardedRef<HTMLDivElement>} ref - The forwarded ref for the inner navigation container.
- * @returns {JSX.Element} The rendered navigation bar component.
- */
-export declare const NabVar: ForwardRefExoticComponent<NavBarProps<string> & RefAttributes<HTMLDivElement>>;
-
-declare type NavBarCssClasses = ComponentSelected<ComponentsTypesComponents['NAVBAR']>;
-
-/**
- * Interface for the NavBar component with a variant.
- * Extends the NavBarStandAloneProps interface and adds a variant and additional CSS classes.
- *
- * @template Variant - The type of the variant for the NavBar.
- */
-export declare interface NavBarProps<Variant = undefined extends string ? unknown : string> extends NavBarStandAloneProps {
-    variant?: Variant;
-    additionalClasses?: Partial<NavBarCssClasses>;
-}
-
-/**
- * Interface for the standalone NavBar component.
- * Includes properties for items, layout direction, focus order, and CSS classes.
- */
-export declare interface NavBarStandAloneProps extends DataAttributes {
-    leftItems?: React.ReactNode[];
-    centerItems?: React.ReactNode[];
-    rightItems?: React.ReactNode[];
-    component?: 'header' | 'footer' | 'nav';
-    direction?: 'horizontal' | 'vertical';
-    focusOrder?: ('left' | 'center' | 'right')[];
-    cssClasses?: NavBarCssClasses;
-}
-
-export declare interface NavBarStyleProps extends CssLibPropsType {
-    _itemContainer?: CssLibPropsType;
-}
-
-export declare type NavBarVariantStyles<Variant extends string> = NavBarStyleProps & {
-    [key in Variant]: NavBarStyleProps;
-};
-
 declare type NonVariablesKeys<T> = {
     [K in keyof T]: K extends `$${string}` ? never : K;
 }[keyof T];
@@ -4560,6 +4403,24 @@ declare type NonVariablesKeys_2<T> = {
     [K in keyof T]: K extends `$${string}` ? never : K;
 }[keyof T];
 
+/**
+ * Option component for rendering selectable list items.
+ *
+ * This component represents a single option within a list, dropdown, or menu.
+ * It manages focus states and supports custom variants for flexible styling.
+ * Useful for building accessible select menus, autocomplete lists, or navigation options.
+ *
+ * Accepts a generic type parameter `<Variant extends string>` for custom variant values.
+ *
+ * @example
+ * ```tsx
+ * <Option value="option1" variant="default">Option 1</Option>
+ *
+ * // With custom variant:
+ * type MyVariant = "primary" | "secondary";
+ * <Option<MyVariant> variant="primary" value="item">Primary Option</Option>
+ * ```
+ */
 declare const Option_2: ForwardRefExoticComponent<OptionProps<string> & RefAttributes<HTMLElement>>;
 export { Option_2 as Option }
 
@@ -4586,11 +4447,11 @@ export declare interface OptionProps<Variant = undefined extends string ? unknow
  * Includes ARIA attributes, labels, icons, event handlers, and CSS classes.
  */
 export declare interface OptionStandAloneProps extends OptionAriaProps, DataAttributes {
-    icon?: ElementOrIconProps;
+    icon?: CommonIconProps;
     sublabel?: CommonTextProps;
     label: ReactNode;
     labelCharsHighlighted?: string;
-    checkedIcon?: ElementOrIconProps;
+    checkedIcon?: CommonIconProps;
     multiSelect?: boolean;
     disabled?: boolean;
     selected?: boolean;
@@ -4627,6 +4488,23 @@ export declare type OptionVariantStyles<Variant extends string> = OptionStylePro
     [key in Variant]: OptionStyleProps;
 };
 
+/**
+ * PageControl component for pagination/slide navigation indicators.
+ *
+ * This component displays navigation dots or bullets with arrow controls for
+ * paginated content like carousels. It handles position tracking, visibility
+ * of dots, and direction-based navigation.
+ *
+ * @example
+ * ```tsx
+ * <PageControl
+ *   pages={10}
+ *   currentPosition={3}
+ *   onPageChange={(page) => console.log(page)}
+ *   isBullet
+ * />
+ * ```
+ */
 export declare const PageControl: ForwardRefExoticComponent<PageControlProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4694,6 +4572,26 @@ export declare type PageControlVariantStyles<Variant extends string> = PageContr
     [key in Variant]: PageControlStyleProps;
 };
 
+/**
+ * Pagination component for navigating through multiple pages.
+ *
+ * This component renders a pagination control with page numbers and navigation buttons.
+ * It automatically adjusts the visible page numbers based on screen size and configuration.
+ * Useful for implementing page navigation in lists, tables, or content galleries.
+ *
+ * Accepts a generic type parameter `<Variant extends string>` for custom variant styling.
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   variant="default"
+ *   currentStep={5}
+ *   maxStepsNumber={100}
+ *   maxCountersNumber={7}
+ *   onStepChange={handlePageChange}
+ * />
+ * ```
+ */
 export declare const Pagination: ForwardRefExoticComponent<PaginationProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4792,6 +4690,24 @@ export declare interface PopoverStylePropsV2 extends CssLibPropsType {
 
 declare type PositionType = 'bottom' | 'bottom-center' | 'bottom-center-fixed' | 'bottom-fixed' | 'bottom-gap-right' | 'bottom-left' | 'bottom-left-fit-content' | 'bottom-right' | 'bottom-right-fit-content' | 'center' | 'left' | 'left-bottom-fixed' | 'left-fixed' | 'right' | 'right-fixed' | 'top' | 'top-center' | 'top-center-fixed' | 'top-left' | 'top-right' | 'without';
 
+/**
+ * ProgressBar component for displaying progress indicators.
+ *
+ * This component visualizes completion progress with customizable variants and sizes.
+ * It displays a filled bar representing the percentage of progress completed.
+ * Useful for showing loading states, task completion, or any measurable progress.
+ *
+ * Accepts generic type parameters `<Variant, Size>` for custom styling values.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar variant="primary" size="md" percentProgressCompleted={60} />
+ *
+ * // With custom types:
+ * type MyVariant = "success" | "warning";
+ * <ProgressBar<MyVariant> variant="success" percentProgressCompleted={100} />
+ * ```
+ */
 export declare const ProgressBar: ForwardRefExoticComponent<ProgressBarProps<string | undefined, unknown> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -4828,11 +4744,6 @@ export declare interface ProgressBarStandAloneProps extends DataAttributes {
     cssSizeClasses?: ProgressBarCssClasses;
     barAriaLabel?: string;
     progressCompleted: number;
-    onChange?: (value: number) => void;
-    onDragStart?: () => void;
-    onDragEnd?: () => void;
-    tooltip?: SliderTooltipProps;
-    useAsSlider?: boolean;
     progressAnimation?: {
         duration?: string;
         timingFunction?: string;
@@ -4854,6 +4765,22 @@ export declare type ProgressBarVariantStyles<Variant extends string> = {
 
 declare type propsToOmit = 'styles' | 'filled' | 'focused' | 'inputBaseId' | 'labelId';
 
+/**
+ * RadioButton component for single selection from multiple options.
+ *
+ * This component renders a styled radio input for use in forms and option groups.
+ * It manages checked, disabled, and error states with appropriate visual feedback.
+ *
+ * @example
+ * ```tsx
+ * <RadioButton
+ *   name="option"
+ *   value="1"
+ *   checked={selectedValue === "1"}
+ *   onChange={(e) => setSelectedValue(e.target.value)}
+ * />
+ * ```
+ */
 export declare const RadioButton: ({ additionalClasses, checked, cssClasses: propsStyles, disabled, error, variant, ...props }: RadioButtonProps) => JSX.Element;
 
 /**
@@ -4881,6 +4808,21 @@ export declare interface RadioButtonProps<Variant = undefined extends string ? u
     additionalClasses?: Partial<RadioButtonCssClasses>;
 }
 
+/**
+ * Standalone radio button component for rendering selectable radio inputs.
+ *
+ * This component renders a radio button with label, optional legend, error message,
+ * and custom icon states. It handles accessibility attributes and visual states.
+ *
+ * @example
+ * ```tsx
+ * <RadioButtonStandAlone
+ *   label={{ content: "Option A" }}
+ *   checked={true}
+ *   onChange={() => {}}
+ * />
+ * ```
+ */
 export declare const RadioButtonStandAlone: ({ altVariant, checked, cssClasses, disabled, error, errorAriaLiveType, errorIcon, errorMessage, id, label, lastChild, name, onBlur, onChange, screenReaderId, state, subTitle, tabIndex, value, ...props }: RadioButtonStandAloneProps) => JSX.Element;
 
 /**
@@ -4893,7 +4835,7 @@ export declare interface RadioButtonStandAloneProps extends RadioButtonAriaProps
     name?: string;
     label?: RadioButtonLabelProps;
     errorMessage?: string;
-    errorIcon?: ElementOrIconProps;
+    errorIcon?: CommonIconProps;
     errorAriaLiveType?: AriaAttributes['aria-live'];
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
@@ -4926,44 +4868,111 @@ export declare interface RadioButtonStyleProps extends CssLibPropsType {
     _infoContainer?: CssLibPropsType;
 }
 
-export declare type RadioButtonVariantStyles<Variant extends string> = RadioButtonStyleProps & {
-    [key in Variant]: RadioButtonStyleProps;
-};
-
-declare type RecoverComponentStyles = <T extends ComponentsTypesAvailableComponents>(params: {
-    component: T;
-    variant?: string;
-    additionalClassNames?: Partial<ComponentSelected_2<ComponentsTypesComponents[T]>>;
-}) => ComponentSelected_2<ComponentsTypesComponents[T]>;
+export declare type RadioButtonVariantStyles<Variant extends string> = RadioButtonStyleProps & {
+    [key in Variant]: RadioButtonStyleProps;
+};
+
+declare type RecoverComponentStyles = <T extends ComponentsTypesAvailableComponents>(params: {
+    component: T;
+    variant?: string;
+    additionalClassNames?: Partial<ComponentSelected_2<ComponentsTypesComponents[T]>>;
+}) => ComponentSelected_2<ComponentsTypesComponents[T]>;
+
+declare type ScreenReaderOnlyProps = ScreenReaderOnlyStandAloneProps;
+
+declare interface ScreenReaderOnlyStandAloneProps extends DataAttributes {
+    ariaAtomic?: AriaAttributes['aria-atomic'];
+    ariaLive?: AriaAttributes['aria-live'];
+    children?: React.ReactNode;
+    className?: string;
+    id?: string;
+    role?: React.AriaRole;
+}
+
+/**
+ * Uncontrolled select component for displaying selectable options.
+ *
+ * This component manages its own open/close state and selected option internally, so you do not need
+ * to control the select state from the parent. It is useful when you want a simple select that handles
+ * its own toggle and selection logic. You can optionally receive state changes via callbacks.
+ *
+ * Internally, it wraps {@link SelectControlled} and passes the necessary props.
+ *
+ * @example
+ * ```tsx
+ * <SelectUnControlled defaultOpen />
+ * ```
+ */
+export declare const Select: ForwardRefExoticComponent<SelectUnControlledProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Controlled select component for displaying selectable options.
+ *
+ * This component renders a select that is fully controlled by its parent, allowing for custom open/close logic,
+ * keyboard navigation, and flexible theming. It is useful when you need to manage the select state and behavior externally.
+ *
+ * Internally, it wraps {@link SelectStandAlone} and handles keyboard focus and scroll-based closing.
+ * Accepts a generic type parameter `<Variant extends string>` to allow for custom variant values, enabling flexible styling.
+ *
+ * @example
+ * ```tsx
+ * <SelectControlled open listOptions={options} />
+ *
+ * // With a custom variant type:
+ * type MyVariant = "primary" | "secondary";
+ * <SelectControlled<MyVariant> variant="primary" open listOptions={options} />
+ * ```
+ */
+export declare const SelectControlled: ForwardRefExoticComponent<SelectControlledProps<string> & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Interface for the controlled Select component.
+ * Extends the SelectStandAloneProps interface and adds a variant and additional CSS classes.
+ *
+ * @template Variant - The type of the variant for the Select.
+ */
+export declare interface SelectControlledProps<Variant = undefined extends string ? unknown : string> extends Omit<SelectStandAloneProps, 'listOptionsRef' | 'onButtonKeyDown' | 'component'> {
+    variant?: Variant;
+    additionalClasses?: Partial<SelectCssClasses>;
+}
+
+declare type SelectCssClasses = ComponentSelected<ComponentsTypesComponents['SELECT']>;
 
-declare interface ScreenReaderOnlyProps extends DataAttributes {
-    children?: React.ReactNode;
-    id?: string;
-    show?: boolean;
-    ariaLive?: AriaAttributes['aria-live'];
-    role?: React.AriaRole;
-}
+/**
+ * Represents the type for the list options in the Select component.
+ */
+export declare type SelectListOptionsProps = Omit<ListOptionsProps, 'selectedValue' | 'onOptionClick'>;
 
-export declare const SelectorBoxFile: ForwardRefExoticComponent<SelectorBoxFileProps<string> & RefAttributes<HTMLDivElement>>;
+declare type SelectOmittedProps = 'buttonOrLinkRef' | 'open' | 'onButtonClick' | 'optionSelected' | 'onOptionClick' | 'onClosePopover' | 'onMouseEnter' | 'onMouseLeave' | 'onBlur' | 'onFocus' | 'onKeyDown';
 
 /**
- * Represents the type for the button in the SelectorBoxFile component.
+ * SelectorBoxFile component for file upload with drag-and-drop support.
+ *
+ * This component provides a file selection interface with validation for file type
+ * and size, upload progress display, error handling, and visual feedback states
+ * (loading, success, error). It manages internal state for file selection and focus.
+ *
+ * @example
+ * ```tsx
+ * <SelectorBoxFile
+ *   accept="image/*"
+ *   maxSize={5000000}
+ *   onChange={(files) => console.log(files)}
+ *   onSizeError={(file) => alert('File too large')}
+ * />
+ * ```
  */
-export declare type SelectorBoxFileButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'size'> & {
-    content: string;
-    variant?: string;
-    size?: string;
-};
+export declare const SelectorBoxFile: ForwardRefExoticComponent<SelectorBoxFileProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
  * Represents the mapping of states to content in the SelectorBoxFile component.
  */
 export declare type SelectorBoxFileContainerBoxStateContentProps = {
     [key in SelectorBoxFileStateType]: {
-        icon?: ElementOrIconProps;
-        iconRight?: ElementOrIconProps;
+        icon?: CommonIconProps;
+        iconRight?: CommonIconProps;
         actionText?: CommonTextProps;
-        actionIcon?: ElementOrIconProps;
+        actionIcon?: CommonIconProps;
         description?: CommonTextProps;
     };
 };
@@ -4981,6 +4990,8 @@ export declare interface SelectorBoxFileProps<Variant = undefined extends string
     success?: boolean;
     error?: boolean;
     disabled?: boolean;
+    errorMaxSizeMessage?: CommonTextProps;
+    errorFileExtensionMessage?: CommonTextProps;
     percentage?: number;
     variant?: Variant;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
@@ -4995,16 +5006,8 @@ export declare interface SelectorBoxFileProps<Variant = undefined extends string
  */
 export declare interface SelectorBoxFileStandAloneProps extends DataAttributes {
     state: SelectorBoxFileStateType;
-    title?: CommonTextProps;
-    subtitle?: CommonTextProps;
-    tooltipIcon?: ElementOrIconProps;
-    tooltip?: SelectorBoxFileTooltipProps;
     containerBoxStateContent: SelectorBoxFileContainerBoxStateContentProps;
     filename?: string;
-    errorMessageIcon?: ElementOrIconProps;
-    errorMessage?: CommonTextProps;
-    errorMaxSizeMessage?: CommonTextProps;
-    errorFileExtensionMessage?: CommonTextProps;
     focus: boolean;
     onFocus: React.FocusEventHandler<HTMLInputElement>;
     onBlur: React.FocusEventHandler<HTMLInputElement>;
@@ -5015,8 +5018,6 @@ export declare interface SelectorBoxFileStandAloneProps extends DataAttributes {
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     onClick?: React.MouseEventHandler<HTMLInputElement>;
     onAnimationCompleted?: () => void;
-    description?: CommonTextProps;
-    button?: SelectorBoxFileButtonProps;
     maxSize?: number;
     fileExtension?: string[];
     loader?: React.ReactNode;
@@ -5027,19 +5028,7 @@ export declare interface SelectorBoxFileStandAloneProps extends DataAttributes {
 declare type SelectorBoxFileStateType = Extract<StateType, 'default' | 'loading' | 'success' | 'error' | 'disabled'>;
 
 export declare interface SelectorBoxFileStyleProps extends CssLibPropsType {
-    _actionDescriptionContainer?: CssLibPropsType;
     _header?: CssLibPropsType;
-    _titleSubtitleContainer?: CssLibPropsType;
-    _title?: CssLibPropsType;
-    _subtitle?: CssLibPropsType;
-    _subtitleTooltipContainer?: CssLibPropsType;
-    _descriptionContainer?: CssLibPropsType;
-    _description?: CssLibPropsType;
-    _tooltipIconContainer?: CssLibPropsType;
-    _tooltipIcon?: CssLibPropsType;
-    _errorMessageContainer?: CssLibPropsType;
-    _errorMessageIcon?: CssLibPropsType;
-    _errorMessage?: CssLibPropsType;
     _animationContainer?: CssLibPropsType;
     _topAnimationContainer?: CssLibPropsType;
     _leftAnimationContainer?: CssLibPropsType;
@@ -5057,17 +5046,86 @@ export declare interface SelectorBoxFileStyleProps extends CssLibPropsType {
     _containerActionContainer?: CssLibPropsType;
 }
 
+export declare type SelectorBoxFileVariantStyles<Variant extends string> = SelectorBoxFileStyleProps & {
+    [key in Variant]?: SelectorBoxFileStyleProps;
+};
+
 /**
- * Represents the type for the tooltip in the SelectorBoxFile component.
+ * Represents the type for the popover in the Select component.
  */
-export declare type SelectorBoxFileTooltipProps = Omit<TooltipUnControlledProps, 'children' | 'variant'> & {
-    variant?: string;
-};
+export declare type SelectPopoverProps = Omit<IPopover, 'children' | 'open'>;
 
-export declare type SelectorBoxFileVariantStyles<Variant extends string> = SelectorBoxFileStyleProps & {
-    [key in Variant]?: SelectorBoxFileStyleProps;
+/**
+ * Interface for the standalone Select component.
+ * Includes properties for state, event handlers, and CSS classes.
+ */
+export declare interface SelectStandAloneProps extends DataAttributes {
+    open: boolean;
+    popover?: SelectPopoverProps;
+    onButtonClick: MouseEventHandler<HTMLButtonElement | HTMLLinkElement>;
+    onButtonKeyDown: KeyboardEventHandler<HTMLButtonElement | HTMLLinkElement>;
+    onClosePopover: () => void;
+    label: CommonTextProps;
+    icon: CommonIconProps;
+    listOptions: SelectListOptionsProps;
+    optionSelected?: string;
+    onOptionClick: (value: string) => void;
+    listOptionsRef: RefObject<HTMLDivElement>;
+    closePopoverOnScroll?: boolean;
+    openAndCloseOnHover?: boolean;
+    url?: string;
+    urlTarget?: HTMLAttributeAnchorTarget;
+    component: 'button' | GenericLinkType;
+    buttonOrLinkRef?: RefObject<HTMLButtonElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    cssClasses?: SelectCssClasses;
+}
+
+export declare interface SelectStyleProps extends CssLibPropsType {
+    _buttonOrLinkContainer?: CssLibPropsType;
+    _labelOpened?: CssLibPropsType;
+    _labelClosed?: CssLibPropsType;
+    _iconOpened?: CssLibPropsType;
+    _iconClosed?: CssLibPropsType;
+    _listOptionsContainer?: CssLibPropsType;
+}
+
+/**
+ * Interface for the uncontrolled Select component.
+ * Extends the SelectProps interface and adds default properties.
+ */
+export declare interface SelectUnControlledProps extends Omit<SelectControlledProps, SelectOmittedProps> {
+    defaultOpen?: boolean;
+    defaultOptionSelected?: string;
+    onOptionClick?: (value: string) => void;
+    onButtonClick?: (open: boolean) => void;
+    onClosePopover?: (open: boolean) => void;
+    onMouseEnter?: (open: boolean) => void;
+    onMouseLeave?: (open: boolean) => void;
+    onFocus?: (open: boolean) => void;
+    onBlur?: (open: boolean) => void;
+}
+
+export declare type SelectVariantStyles<Variant extends string> = SelectStyleProps & {
+    [key in Variant]: SelectStyleProps;
 };
 
+/**
+ * Skeleton component for displaying loading placeholders.
+ *
+ * This component renders animated placeholder shapes while content is loading.
+ * It supports different shapes (rectangle, circle, text) and variants for styling.
+ * Useful for improving perceived performance by showing content structure during loading.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="rectangular" shapeVariant="image" />
+ * <Skeleton variant="text" shapeVariant="heading" />
+ * <Skeleton variant="circular" shapeVariant="avatar" />
+ * ```
+ */
 export declare const Skeleton: ForwardRefExoticComponent<SkeletonProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -5112,6 +5170,31 @@ export declare type SkeletonVariantStyles<Variant extends string> = CssLibPropsT
     [key in Variant]?: CssLibPropsType;
 };
 
+/**
+ * Slider component for selecting values within a range.
+ *
+ * This component provides a draggable slider control for selecting single values
+ * or value ranges. It supports keyboard navigation, custom min/max/step values,
+ * tooltips, and range selection. Handles both mouse and touch interactions.
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   min={0}
+ *   max={100}
+ *   value={50}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Range slider:
+ * <Slider
+ *   min={0}
+ *   max={100}
+ *   rangeValue={[25, 75]}
+ *   onChange={(range) => console.log(range)}
+ * />
+ * ```
+ */
 export declare const Slider: ForwardRefExoticComponent<SliderProps<string> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -5246,6 +5329,24 @@ export declare type SnackbarV2Popover = Omit<IPopover, 'children' | 'open'>;
 
 declare type StateType = 'active' | 'active_filled' | 'active_filled_hide' | 'completed' | 'default' | 'default_selected' | 'default_unselected' | 'disabled' | 'disabled_empty' | 'disabled_filled' | 'disabled_filled_hide' | 'disabled_selected' | 'disabled_unselected' | 'error' | 'error_empty' | 'error_filled' | 'error_filled_hide' | 'empty' | 'filled' | 'filled_hide' | 'focus' | 'hover' | 'loading' | 'multiple_selected' | 'multiple_selected_hover' | 'prefilled' | 'pressed' | 'selected' | 'selected_hover' | 'success' | 'warning' | 'visited' | 'inactive' | 'filling' | 'blocked_by_system' | 'error_unselected' | 'error_selected' | 'current' | 'current_day' | 'start_date_range' | 'end_date_range' | 'midle_date_range' | 'pending' | 'unselected';
 
+/**
+ * StepperNumber component for incrementing/decrementing numeric values.
+ *
+ * This component provides plus/minus buttons for adjusting numeric values with
+ * configurable step intervals. Supports both horizontal and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * <StepperNumber
+ *   value={5}
+ *   min={0}
+ *   max={10}
+ *   step={1}
+ *   onChange={(newValue) => console.log(newValue)}
+ *   orientation="horizontal"
+ * />
+ * ```
+ */
 export declare const StepperNumber: ForwardRefExoticComponent<StepperNumberProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type StepperNumberCssClasses = ComponentSelected<ComponentsTypesComponents['STEPPER_NUMBER']>;
@@ -5340,42 +5441,138 @@ export declare interface StepStateProps {
     ['aria-label']?: string;
 }
 
+/**
+ * React Context for styles and theming.
+ * Provides access to styling utilities, theme management, and responsive breakpoints.
+ */
 export declare const StylesContext: Context<StylesContextProps | undefined>;
 
+/**
+ * Context value provided by StylesProvider.
+ * Contains all styling-related data and utilities available to child components.
+ */
 declare interface StylesContextProps {
+    /** Current responsive breakpoints configuration */
     breakpoints: Breakpoints;
+    /** Array of CSS class names or null */
     classes: string[] | null;
+    /** Pre-built media query strings for responsive design */
     mediaQueries: MediaQueries;
+    /** Map of available icons */
     icons: Record<string, string>;
+    /** Map of available illustrations */
     illustrations: Record<string, string>;
+    /** Currently active theme name, or null if no theme is selected */
     currentTheme: string | null;
+    /** Function to retrieve styles for a specific component and variant */
     getComponentStyles: RecoverComponentStyles;
+    /** Function to change the active theme */
     changeTheme: (themeName: string) => void;
+    /** Array of CSS class names for the current theme */
     themeClassNames: string[];
+    /** Map of all available themes */
     themes: Record<string, string>;
+    /** Map of CSS custom properties (variables) for the current theme */
     themeVariables: Record<string, string>;
 }
 
 /**
- * Provider component to supply styles-related data to its children, including theme management.
+ * Provider component for styles, theming, and responsive design utilities.
+ * Manages theme selection, CSS class generation, and provides styling context to child components.
+ *
+ * Features:
+ * - Theme management with dynamic theme switching
+ * - Responsive breakpoints and media queries
+ * - Icon and illustration asset management
+ * - Component-specific style retrieval
+ * - CSS-in-JS support via Bernova provider
+ *
+ * @param props - Configuration props for the styles provider
+ * @param props.children - React children to be wrapped by the provider
+ * @param props.breakpoints - Custom responsive breakpoints (defaults to standard breakpoints if not provided)
+ * @param props.icons - Map of icon names to URLs or base64 strings
+ * @param props.illustrations - Map of illustration names to URLs or base64 strings
+ * @param props.themeSelected - Initial theme to apply
+ * @param props.bernovaProvider - Custom Bernova provider instance for advanced styling control
+ * @param props.linkId - ID for the style link element in the DOM (default: 'kb-styled-provider')
+ * @param props.jsInCss - Whether to inject CSS directly into JavaScript (default: true)
+ *
+ * @returns The styled provider component wrapping all child components
+ *
+ * @example
+ * ```tsx
+ * <StylesProvider
+ *   themeSelected="dark"
+ *   breakpoints={{ sm: 576, md: 768, lg: 992, xl: 1200 }}
+ *   icons={{ home: '/icons/home.svg' }}
+ * >
+ *   <App />
+ * </StylesProvider>
+ * ```
  */
 export declare const StylesProvider: FC<StylesProviderProps>;
 
+/**
+ * Props for the StylesProvider component.
+ * Configures the styling system including themes, breakpoints, and assets.
+ */
 declare interface StylesProviderProps {
+    /** The React children to be wrapped by the provider */
     children: React.ReactNode;
+    /** Custom breakpoints for responsive design. If not provided, uses default breakpoints */
     breakpoints?: Breakpoints;
+    /** Map of icon names to their corresponding URLs or base64 strings */
     icons?: Record<string, string>;
+    /** Map of illustration names to their corresponding URLs or base64 strings */
     illustrations?: Record<string, string>;
+    /** The initial theme to be applied. If not provided, uses the provider's default theme */
     themeSelected?: string;
+    /** Custom Bernova provider instance for advanced styling control */
     bernovaProvider?: typeof Provider;
+    /** ID for the style link element in the DOM. Default: 'kb-styled-provider' */
     linkId?: string;
+    /** Whether to inject CSS directly into JavaScript. Default: true */
     jsInCss?: boolean;
 }
 
+/**
+ * Table component with automatic sticky column calculations and scroll shadow effects.
+ *
+ * This component wraps TableStandAlone and adds automatic sticky positioning for left
+ * and right columns, scroll shadow effects, and responsive behavior. It manages scroll
+ * state and column positioning internally.
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   variant="primary"
+ *   autoLeftStickyCalc={true}
+ *   autoRightStickyCalc={true}
+ * >
+ *   <thead>...</thead>
+ *   <tbody>...</tbody>
+ * </Table>
+ * ```
+ */
 export declare const Table: ForwardRefExoticComponent<TableProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;
 
+/**
+ * TableBody component for rendering table body sections.
+ *
+ * This component wraps the tbody element with consistent styling and variant support.
+ * Use it as a container for TableRow components within a Table.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableBody variant="default">
+ *     <TableRow>...</TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
 export declare const TableBody: ForwardRefExoticComponent<TableBodyProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5397,6 +5594,22 @@ export declare type TableBodyVariantStyles<Variant extends string> = CssLibProps
     [key in Variant]: CssLibPropsType;
 };
 
+/**
+ * TableCaption component for providing titles or descriptions for tables.
+ *
+ * This component renders a caption element for tables, helping users understand
+ * the table's purpose or contents. Important for accessibility and SEO.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableCaption variant="default">
+ *     Sales Report for Q4 2024
+ *   </TableCaption>
+ *   <TableHead>...</TableHead>
+ * </Table>
+ * ```
+ */
 export declare const TableCaption: ForwardRefExoticComponent<TableCaptionProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5419,6 +5632,20 @@ export declare type TableCaptionVariantStyles<Variant extends string> = CssLibPr
     [key in Variant]: CssLibPropsType;
 };
 
+/**
+ * TableCell component for rendering individual table cells.
+ *
+ * This component wraps td or th elements with consistent styling and variant support.
+ * Use it within TableRow components to display data or headers in a table.
+ *
+ * @example
+ * ```tsx
+ * <TableRow>
+ *   <TableCell variant="default">Cell content</TableCell>
+ *   <TableCell>Another cell</TableCell>
+ * </TableRow>
+ * ```
+ */
 export declare const TableCell: ForwardRefExoticComponent<TableCellProps<string> & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableCellElement>>;
@@ -5475,6 +5702,23 @@ export declare type TableCellVariantStyles<Variant extends string> = CssLibProps
 
 declare type TableCssClasses = ComponentSelected<ComponentsTypesComponents['TABLE']>;
 
+/**
+ * TableDivider component for rendering visual separators in tables.
+ *
+ * This component creates visual dividers or separators between table sections.
+ * Useful for organizing complex tables with multiple logical groups of data.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableBody>
+ *     <TableRow>...</TableRow>
+ *     <TableDivider variant="default" />
+ *     <TableRow>...</TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
 export declare const TableDivider: ForwardRefExoticComponent<TableDividerProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5496,6 +5740,25 @@ export declare type TableDividerVariantStyles<Variant extends string> = CssLibPr
     [key in Variant]: CssLibPropsType;
 };
 
+/**
+ * TableFoot component for rendering table footer sections.
+ *
+ * This component wraps the tfoot element with consistent styling and variant support.
+ * Use it to display summary rows, totals, or footer information in a table.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableBody>...</TableBody>
+ *   <TableFoot variant="default">
+ *     <TableRow>
+ *       <TableCell>Total</TableCell>
+ *       <TableCell>$1,234</TableCell>
+ *     </TableRow>
+ *   </TableFoot>
+ * </Table>
+ * ```
+ */
 export declare const TableFoot: ForwardRefExoticComponent<TableFootProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5517,6 +5780,23 @@ export declare type TableFootVariantStyles<Variant extends string> = CssLibProps
     [key in Variant]: CssLibPropsType;
 };
 
+/**
+ * TableHead component for rendering table header sections.
+ *
+ * This component wraps the thead element with consistent styling and variant support.
+ * Use it as a container for TableRow components with header cells within a Table.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHead variant="default">
+ *     <TableRow>
+ *       <TableCell>Header 1</TableCell>
+ *     </TableRow>
+ *   </TableHead>
+ * </Table>
+ * ```
+ */
 export declare const TableHead: ForwardRefExoticComponent<TableHeadProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableSectionElement>>;
@@ -5548,6 +5828,22 @@ export declare interface TableProps extends Omit<TableStandAloneProps, 'hasScrol
     additionalClasses?: Partial<TableCssClasses>;
 }
 
+/**
+ * TableRow component for rendering table rows.
+ *
+ * This component wraps the tr element with consistent styling and variant support.
+ * Use it as a container for TableCell components within TableHead or TableBody sections.
+ *
+ * @example
+ * ```tsx
+ * <TableBody>
+ *   <TableRow variant="default">
+ *     <TableCell>Data 1</TableCell>
+ *     <TableCell>Data 2</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ * ```
+ */
 export declare const TableRow: ForwardRefExoticComponent<TableRowProps & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLTableRowElement>>;
@@ -5597,8 +5893,44 @@ export declare type TableVariantStyles<Variant extends string> = TableStyleProps
     [key in Variant]: TableStyleProps;
 };
 
+/**
+ * TabsUnControlled component with internal tab selection state.
+ *
+ * This component renders a tab navigation that manages the selected tab internally.
+ * It starts with a default selected tab and updates automatically on user interaction.
+ * Useful when you don't need to control tab selection from a parent component.
+ *
+ * @example
+ * ```tsx
+ * <TabsUnControlled
+ *   defaultSelectedTab={0}
+ *   tabs={[
+ *     { id: 'tab1', label: 'Tab 1' },
+ *     { id: 'tab2', label: 'Tab 2' }
+ *   ]}
+ *   onSelectTab={(index) => console.log(index)}
+ * />
+ * ```
+ */
 export declare const Tabs: ForwardRefExoticComponent<TabsUnControlledProps<string | undefined> & RefAttributes<HTMLDivElement>>;
 
+/**
+ * TabsControlled component for tab navigation with external state management.
+ *
+ * This component displays a set of tabs where the selected tab is controlled
+ * externally via props. It's device-aware and adjusts behavior based on screen size.
+ *
+ * @example
+ * ```tsx
+ * <TabsControlled
+ *   defaultSelectedTab="tab1"
+ *   tabs={[
+ *     { id: 'tab1', label: 'Tab 1' },
+ *     { id: 'tab2', label: 'Tab 2' }
+ *   ]}
+ * />
+ * ```
+ */
 export declare const TabsControlled: ForwardRefExoticComponent<TabsUnControlledProps<string> & RefAttributes<HTMLDivElement>>;
 
 declare type TabsCssClasses = ComponentSelected<ComponentsTypesComponents['TABS']>;
@@ -5753,6 +6085,23 @@ export declare type TagVariantStyles<Variant extends string> = TagStyleProps & {
 declare const Text_2: ForwardRefExoticComponent<TextProps<string> & RefAttributes<HTMLParagraphElement>>;
 export { Text_2 as Text }
 
+/**
+ * TextArea component for multi-line text input.
+ *
+ * This component provides a styled textarea with support for labels, error states,
+ * character counting, and focus management. It handles internal focus state and
+ * applies appropriate styling based on filled and error states.
+ *
+ * @example
+ * ```tsx
+ * <TextArea
+ *   label="Comments"
+ *   placeholder="Enter your comments"
+ *   maxLength={500}
+ *   error="Required field"
+ * />
+ * ```
+ */
 export declare const TextArea: ForwardRefExoticComponent<TextAreaProps<string | undefined> & RefAttributes<HTMLDivElement>>;
 
 export declare type TextAreaCssClasses = ComponentSelected<ComponentsTypesComponents['TEXT_AREA']>;
@@ -6038,17 +6387,46 @@ export declare type ToggleVariantStyles<Variant extends string> = ToggleVariantS
     [key in Variant]?: ToggleVariantStyleProps;
 };
 
+/**
+ * TooltipUnControlled component with internal visibility management.
+ *
+ * This component renders a tooltip that manages its own open/close state based
+ * on user interactions (hover, focus). It handles modal behavior on mobile devices,
+ * scroll detection, swipe gestures, and focus trapping automatically.
+ *
+ * @example
+ * ```tsx
+ * <TooltipUnControlled
+ *   title="Helpful information"
+ *   variant="default"
+ * >
+ *   <button>Hover me</button>
+ * </TooltipUnControlled>
+ * ```
+ */
 export declare const Tooltip: ForwardRefExoticComponent<TooltipUnControlledProps<string | undefined> & RefAttributes<HTMLDivElement>>;
 
 declare type TooltipAlignType = Extract<PositionType, 'top' | 'right' | 'bottom' | 'left'>;
 
 /**
- * Represents the type for the close icon in the Tooltip component.
+ * TooltipControlled component for displaying contextual information.
+ *
+ * This component renders a tooltip that can be shown on hover or focus.
+ * It supports modal behavior on mobile devices and adjusts positioning based
+ * on scroll detection. State is managed externally via props.
+ *
+ * @example
+ * ```tsx
+ * <TooltipControlled
+ *   variant="default"
+ *   title="Help text"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ * >
+ *   <button>Hover me</button>
+ * </TooltipControlled>
+ * ```
  */
-export declare type TooltipCloseIconProps = Omit<IconProps, 'icon'> & {
-    icon?: string;
-};
-
 export declare const TooltipControlled: <Variant extends string>({ additionalClasses, tooltipAriaLabel, tooltipAsModal: propTooltipAsModal, tooltipAsModal: isModal, tooltipRef, variant, ...props }: TooltipControlledProps<Variant>) => JSX.Element;
 
 /**
@@ -6083,7 +6461,6 @@ export declare interface TooltipStandAloneProps extends DataAttributes {
     disabled?: boolean;
     mediaDevice: DeviceBreakpointsType;
     align?: TooltipAlignType | string;
-    title?: CommonTextProps;
     contentHasScroll?: boolean;
     content?: CommonTextProps;
     contentRef?: ForwardedRef<HTMLDivElement> | undefined;
@@ -6095,11 +6472,9 @@ export declare interface TooltipStandAloneProps extends DataAttributes {
     onTriggerClick?: MouseEventHandler<HTMLElement>;
     onTriggerMouseDown?: MouseEventHandler<HTMLElement>;
     onTriggerMouseUp?: MouseEventHandler<HTMLElement>;
-    onCloseIconClick?: MouseEventHandler<HTMLElement>;
     children: JSX.Element | string | ReactNode;
     popoverOpen?: boolean;
     cssClasses?: TooltipCssClasses;
-    closeIcon?: IconProps;
     childrenAsButton?: boolean;
     triggerAsButton?: Pick<AriaAttributes, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-controls' | 'aria-expanded' | 'aria-pressed' | 'aria-disabled'>;
     onPopoverCloseInternally?: () => void;
@@ -6110,8 +6485,6 @@ export declare interface TooltipStandAloneProps extends DataAttributes {
     onTriggerKeyDown?: KeyboardEventHandler<HTMLDivElement>;
     onTooltipKeyDown?: KeyboardEventHandler<HTMLElement>;
     popover?: TooltipPopoverProps;
-    dragIcon?: ElementOrIconProps;
-    dragIconRef?: MutableRefObject<HTMLDivElement | null>;
     tooltipAriaLabel?: string;
 }
 
@@ -6149,6 +6522,24 @@ export declare type TooltipVariantStyles<Variant extends string> = TooltipStyleP
     [key in Variant]?: TooltipStyleProps;
 };
 
+/**
+ * Custom hook to access the generic components context.
+ * Provides access to the custom Link and Image components configured in the provider.
+ *
+ * @throws {Error} If used outside of a GenericComponentsProvider or with invalid value
+ * @returns The generic components (LINK, IMAGE) from the context
+ *
+ * @example
+ * ```tsx
+ * const { LINK, IMAGE } = useGenericComponents();
+ *
+ * return (
+ *   <LINK url="/home">
+ *     <IMAGE src="/logo.png" alt="Logo" />
+ *   </LINK>
+ * );
+ * ```
+ */
 export declare const useGenericComponents: () => GenericComponentsType;
 
 declare interface UseRoveFocusProps {
@@ -6164,10 +6555,17 @@ declare interface UseRoveFocusProps {
 }
 
 /**
- * Custom hook to access the `StylesContext`.
+ * Custom hook to access the StylesContext.
+ * Provides styling utilities including theme management, breakpoints, and component styles.
+ *
+ * @throws {Error} If used outside of a StylesProvider
+ * @returns The current styles context value
  *
- * @throws Will throw an error if used outside of a `StylesProvider`.
- * @returns The current value of the `StylesContext`.
+ * @example
+ * ```tsx
+ * const { currentTheme, changeTheme, getComponentStyles } = useStylesContext();
+ * const styles = getComponentStyles({ component: 'button', variant: 'primary' });
+ * ```
  */
 export declare const useStylesContext: () => StylesContextProps;
 
@@ -6192,27 +6590,84 @@ export declare const useUtilsProvider: () => UtilsContextType;
  */
 export declare const UtilsContext: Context<UtilsContextType | null>;
 
+/**
+ * Context type for utility functions and configurations.
+ * Provides date manipulation, formatting, and asset management utilities.
+ */
 declare interface UtilsContextType {
+    /**
+     * Base URLs for different types of assets.
+     * Used to construct full paths for icons, illustrations, images, and animations.
+     */
     assets?: {
+        /** Base URL for all assets */
         baseHost: string;
+        /** Specific base URL for icon assets */
         iconsBaseHost?: string;
+        /** Specific base URL for illustration assets */
         illutrationsBaseHost?: string;
+        /** Specific base URL for image assets */
         imagesBaseHost?: string;
+        /** Specific base URL for animation assets */
         animationsBaseHost?: string;
     };
+    /**
+     * Formats a Date object into a string representation.
+     * @param date - The date to format
+     * @param format - Format string or options object (e.g., 'dd/MM/yyyy', 'd', etc.)
+     * @param locale - Optional locale string (e.g., 'en-US', 'es-ES')
+     * @returns Formatted date string
+     */
     formatDate: (date: Date, format: DateFormatOptions | FormatDateType | string, locale?: string) => string;
+    /**
+     * Transforms a string or number into a Date object.
+     * @param date - The date value to transform (timestamp or date string)
+     * @param format - Optional format string to parse the date
+     * @returns Parsed Date object
+     */
     transformDate: (date: string | number, format?: string) => Date;
+    /**
+     * Collection of date manipulation and comparison utilities.
+     */
     dateHelpers: {
+        /** Subtracts a specified number of days from a date */
         getSubDays: (date: Date, amount: number) => Date;
+        /** Subtracts a specified number of months from a date */
         getSubMonths: (date: Date, amount: number) => Date;
+        /** Subtracts a specified number of years from a date */
         getSubYears: (date: Date, amount: number) => Date;
+        /** Adds a specified number of months to a date */
         getAddMonths: (date: Date, amount: number) => Date;
+        /** Adds a specified number of days to a date */
         getAddDays: (date: Date, amount: number) => Date;
+        /** Adds a specified number of years to a date */
         getAddYears: (date: Date, years: number) => Date;
+        /**
+         * Gets all month names in the specified format and locale.
+         * @param monthFormat - Format for month names ('long', 'short', 'narrow')
+         * @param locale - Optional locale string
+         * @returns Array of month names
+         */
         getAllMonthName: (monthFormat: Intl.DateTimeFormatOptions['month'], locale?: string) => Array<string>;
+        /**
+         * Gets all weekday names in the specified format and locale.
+         * @param weekdayFormat - Format for weekday names ('long', 'short', 'narrow')
+         * @param isSundayFirst - Whether Sunday should be the first day of the week
+         * @param locale - Optional locale string
+         * @returns Array of weekday names
+         */
         getAllWeekdayName: (weekdayFormat: Intl.DateTimeFormatOptions['weekday'], isSundayFirst: boolean, locale?: string) => Array<string>;
+        /** Checks if the first date is before the second date */
         isBefore: (date1: Date, date2: Date) => boolean;
+        /** Checks if the first date is after the second date */
         isAfter: (date1: Date, date2: Date) => boolean;
+        /**
+         * Checks if two dates are equal.
+         * @param firstDate - First date to compare
+         * @param secondDate - Second date to compare
+         * @param shouldCompareTime - Whether to include time in comparison
+         * @returns True if dates are equal
+         */
         isDatesEqual: (firstDate: Date | number | string, secondDate: Date | number | string, shouldCompareTime: boolean) => boolean;
     };
 }
@@ -6243,7 +6698,12 @@ declare interface UtilsContextType {
  */
 export declare const UtilsProvider: (props: UtilsProviderProps) => JSX_2.Element;
 
+/**
+ * Props for the UtilsProvider component.
+ * Extends UtilsContextType with required children prop.
+ */
 declare type UtilsProviderProps = UtilsContextType & {
+    /** The React children to be wrapped by the provider */
     children: ReactElement;
 };
 
@@ -6296,7 +6756,7 @@ export declare interface VirtualKeyboardStandAloneProps extends DataAttributes {
     onVirtualKeyboardBlur: React.FocusEventHandler<HTMLDivElement>;
     onDigitButtonClick: (digit: string, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onRemoveButtonClick: React.MouseEventHandler<HTMLButtonElement>;
-    icon: ElementOrIconProps;
+    icon: CommonIconProps;
     cssClasses?: VirtualKeyboardCssClasses;
 }