@kubit-ui-web/react-components 2.0.0-beta.6 → 2.0.0-beta.60

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ import { AriaAttributes } from 'react';
 import { AriaRole } from 'react';
 import { ComponentType } from 'react';
 import { Context } from 'react';
+import { CssLibPropsType as CssLibPropsType_2 } from 'bernova/interfaces';
 import { CSSProperties } from 'react';
 import { DOMAttributes } from 'react';
 import { FC } from 'react';
@@ -25,7 +26,6 @@ import { offset as popoverMWOffset } from '@floating-ui/dom';
 import { shift as popoverMWShift } from '@floating-ui/dom';
 import { size as popoverMWSize } from '@floating-ui/dom';
 import { PropsWithChildren } from 'react';
-import { Provider } from '../../cssProvider/provider';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
@@ -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,20 +478,36 @@ 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;
 }
 
+export declare interface BreakpointsType {
+    ZERO: number;
+    S: number;
+    M: number;
+    L: number;
+    XL?: number;
+}
+
 /**
  * Generic button component for triggering actions or submitting forms.
  *
@@ -496,7 +564,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 +602,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>>;
 
 /**
@@ -554,8 +644,8 @@ export declare interface CalendarAccessibilityProps {
  * Includes properties for navigation icons and button styles.
  */
 export declare interface CalendarConfigProps {
-    leftArrowIcon: ElementOrIconProps;
-    rightArrowIcon: ElementOrIconProps;
+    leftArrowIcon: CommonIconProps;
+    rightArrowIcon: CommonIconProps;
     variantSelectorButton?: string;
     sizeSelectorButton?: string;
 }
@@ -647,87 +737,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 +912,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 +1011,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 +1042,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 +1063,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 +1135,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 +1168,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: {
@@ -997,33 +1177,16 @@ declare type ComponentsTypesComponents = {
         header: string;
         headerbutton: string;
         innercontent: string;
-        $_neutral: {
-            accordion: string;
-        };
-        $_standard: {
-            accordion: string;
-        };
+    };
+    ALERT: {
+        container: string;
+        contentcontainer: string;
+        description: string;
     };
     AVATAR: {
         avatar: string;
         dot: string;
         icon: string;
-        $_large: {
-            avatar: string;
-            icon: string;
-        };
-        $_medium: {
-            avatar: string;
-            icon: string;
-        };
-        $_small: {
-            avatar: string;
-            icon: string;
-        };
-        $_extra_large: {
-            avatar: string;
-            icon: string;
-        };
     };
     BADGE: {
         badge: string;
@@ -1034,22 +1197,6 @@ declare type ComponentsTypesComponents = {
         label: string;
         labelcontainer: string;
         labelicon: string;
-        $_default: {
-            badge: string;
-            icon: string;
-        };
-        $_alternative: {
-            badge: string;
-            icon: string;
-            label: string;
-            labelicon: string;
-        };
-        $_primary: {
-            badge: string;
-            icon: string;
-            label: string;
-            labelicon: string;
-        };
     };
     BREADCRUMBS: {
         breadcrumbs: string;
@@ -1059,54 +1206,13 @@ declare type ComponentsTypesComponents = {
         lastonecrumb: string;
         link: string;
         linkcontainer: string;
-        $_alternative: {
-            breadcrumbs: string;
-            icondivider: string;
-            lastonecrumb: string;
-            link: string;
-        };
-        $_default: {
-            breadcrumbs: string;
-            lastonecrumb: string;
-            link: string;
-        };
     };
     BUTTON: {
         button: string;
         icon: string;
         loader: string;
-        $_large: {
-            button: string;
-            icon: string;
-        };
-        $_medium: {
-            button: string;
-            icon: string;
-        };
-        $_small: {
-            button: string;
-            icon: string;
-        };
-        $_action_primary: {
-            button: string;
-        };
-        $_action_secondary: {
-            button: string;
-        };
-        $_action_secondary_alt: {
-            button: string;
-        };
-        $_primary: {
-            button: string;
-        };
-        $_secondary: {
-            button: string;
-        };
-        $_secondary_alt: {
-            button: string;
-        };
         dynamic_values: (styles: {
-            '$alignText': string;
+            $alignText: string;
         }) => {
             string: string;
             object: object;
@@ -1149,31 +1255,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;
-        };
-        $_default: {
-            card_image: string;
-            description: string;
-        };
+        footer: string;
+        header: string;
     };
     CAROUSEL: {
         carousel: string;
         content: string;
         viewer: string;
-        $_default: {
-            carousel: string;
-        };
     };
     CHECKBOX: {
         checkbox: string;
@@ -1191,9 +1282,6 @@ declare type ComponentsTypesComponents = {
         icon: string;
         iconcontainer: string;
         input: string;
-        $_default: {
-            checkbox_base: string;
-        };
     };
     CHIP: {
         chip: string;
@@ -1207,32 +1295,6 @@ declare type ComponentsTypesComponents = {
         rangeitemseparator: string;
         rangeitemtext: string;
         rangeitemwrapper: string;
-        $_default: {
-            chip: string;
-            closeicon: string;
-            errorcontainer: string;
-            erroricon: string;
-            errormessage: string;
-            label: string;
-            lefticon: string;
-            rangeitemseparator: string;
-            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;
@@ -1242,9 +1304,6 @@ declare type ComponentsTypesComponents = {
         rightboxshadow: string;
         rightboxshadowcontainer: string;
         scrollablecontainer: string;
-        $_default: {
-            data_table: string;
-        };
         row_group_table: {
             container: string;
             headboxshadow: string;
@@ -1310,88 +1369,22 @@ declare type ComponentsTypesComponents = {
     };
     DOT: {
         dot: string;
-        $_big: {
-            dot: string;
-        };
-        $_medium: {
-            dot: string;
-        };
-        $_small: {
-            dot: string;
-        };
-        $_alternative: {
-            dot: string;
-        };
-        $_with_border: {
-            dot: string;
-        };
-        $_without_border: {
-            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;
         typography: string;
-        $_default: {
-            error_message: string;
-        };
     };
     ICON: {
         button: string;
         complex: string;
         svg: string;
         dynamic_values: (styles: {
-            '$color': string;
-            '$moveAround': string;
-            '$transitionDuration': string;
-            '$height': string;
-            '$width': string;
+            $color: string;
+            $moveAround: string;
+            $transitionDuration: string;
+            $height: string;
+            $width: string;
         }) => {
             string: string;
             object: object;
@@ -1400,15 +1393,6 @@ declare type ComponentsTypesComponents = {
     INPUT: {
         input: string;
         inputandlabelcontainer: string;
-        $_filled: {
-            input: string;
-        };
-        $_outlined: {
-            input: string;
-        };
-        $_standard: {
-            input: string;
-        };
         input_base: {
             input_base: string;
         };
@@ -1423,31 +1407,16 @@ declare type ComponentsTypesComponents = {
     };
     INPUT_BASE: {
         input_base: string;
-        $_filled: {
-            input_base: string;
-        };
-        $_outlined: {
-            input_base: string;
-        };
-        $_standard: {
-            input_base: string;
-        };
     };
     INPUT_DECORATION: {
         input_decoration: string;
         decoration: string;
-        $_standard: {
-            input_decoration: string;
-        };
     };
     INPUT_SIGNATURE: {
         input_signature: string;
         canvas: string;
         placeholdercontainer: string;
         placeholdertext: string;
-        $_default: {
-            input_signature: string;
-        };
     };
     ITEM_ROVE: {
         item_rove: string;
@@ -1457,30 +1426,6 @@ declare type ComponentsTypesComponents = {
         childrencontainer: string;
         icon: string;
         labelandiconcontainer: string;
-        $_inline_primary: {
-            link: string;
-            icon: string;
-        };
-        $_inline_secondary: {
-            link: string;
-            icon: string;
-        };
-        $_inline_secondary_alt: {
-            link: string;
-            icon: string;
-        };
-        $_navigation_primary: {
-            link: string;
-            icon: string;
-        };
-        $_navigation_secondary: {
-            link: string;
-            icon: string;
-        };
-        $_navigation_secondary_alt: {
-            link: string;
-            icon: string;
-        };
     };
     LINK_AS_BUTTON: {
         link_as_button: string;
@@ -1490,100 +1435,20 @@ 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;
-        closebuttoncontainer: string;
-        closebuttonicon: string;
-        content: string;
-        dragicon: string;
-        dragiconcontainer: string;
-        footer: string;
+    MODAL: {
+        modal: string;
+        closebuttoncontainer: string;
+        closebuttonicon: string;
+        content: string;
+        dragicon: string;
+        dragiconcontainer: string;
+        footer: string;
         headercontainer: string;
         headercontentcontainer: string;
         title: string;
         titlecontainer: string;
         titlehiddencontainer: string;
-        $_default: {
-            modal: string;
-        };
-    };
-    NAVBAR: {
-        navbar: string;
-        itemcontainer: string;
-        $_default: {
-            navbar: string;
-        };
     };
     OPTION: {
         option: string;
@@ -1595,64 +1460,9 @@ declare type ComponentsTypesComponents = {
         labeliconcontainer: string;
         sublabel: string;
         sublabelcontainer: string;
-        $_code_viewer_subtheme: {
-            option: string;
-            label: string;
-        };
-        $_input_dropdown: {
-            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;
-        $_default: {
-            overlay: string;
-        };
-        $_secondary: {
-            overlay: string;
-        };
     };
     PAGE_CONTROL: {
         page_control: string;
@@ -1663,15 +1473,6 @@ declare type ComponentsTypesComponents = {
         pagedot: string;
         rightarrowcontrolcontainer: string;
         rightbuttoncontrol: string;
-        $_default: {
-            page_control: string;
-            icon: string;
-        };
-        $_bullets: {
-            page_control: string;
-            dotscontainer: string;
-            pagedot: string;
-        };
     };
     PAGINATION: {
         pagination: string;
@@ -1680,12 +1481,6 @@ declare type ComponentsTypesComponents = {
         pagescontainer: string;
         paginationleftarrowicon: string;
         paginationrightarrowicon: string;
-        $_default: {
-            pagination: string;
-            page: string;
-            paginationleftarrowicon: string;
-            paginationrightarrowicon: string;
-        };
     };
     POPOVER: {
         popover: string;
@@ -1696,76 +1491,6 @@ declare type ComponentsTypesComponents = {
         bar: string;
         barcontainer: string;
         progressbar: string;
-        $_medium: {
-            progress_bar: string;
-            bar: string;
-            progressbar: string;
-        };
-        $_small: {
-            progress_bar: string;
-            bar: string;
-            progressbar: string;
-        };
-        $_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;
@@ -1780,21 +1505,12 @@ declare type ComponentsTypesComponents = {
         rowcontainer: string;
         speciallabel: string;
         sublabel: string;
-        $_default: {
-            radio_button: string;
-            errormessage: string;
-            sublabel: 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: {
@@ -1802,16 +1518,21 @@ 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;
+    };
     SELECTOR_BOX_FILE: {
         selector_box_file: string;
-        actiondescriptioncontainer: string;
         actionicon: string;
         actioniconandactiontextcontainer: string;
         animationcontainer: string;
@@ -1824,71 +1545,21 @@ 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;
-        $_circle: {
-            skeleton: string;
-        };
-        $_square: {
-            skeleton: string;
-        };
-        $_alternative: {
-            skeleton: string;
-        };
-        $_default: {
-            skeleton: string;
+        dynamic_values: (styles: {
+            $skeletonWidth: string;
+            $skeletonHeight: string;
+            $skeletonBorderRadius: string;
+            $skeletonDuration: string;
+        }) => {
+            string: string;
+            object: object;
         };
     };
     SLIDER: {
@@ -1910,15 +1581,6 @@ declare type ComponentsTypesComponents = {
         thumbicon: string;
         tracksthumbscontainer: string;
         tracksthumbsinnercontainer: string;
-        $_primary: {
-            slider: string;
-            activetrack: string;
-            inactivetrack: string;
-            thumb: string;
-        };
-        $_test_no_thumb_exceeds_track: {
-            slider: string;
-        };
         decrement_button_size: {
             icon: string;
             button: string;
@@ -1933,12 +1595,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,34 +1604,12 @@ declare type ComponentsTypesComponents = {
                 popover: string;
             };
             arrow: string;
-            divider: string;
-            dragicon: string;
-            dragiconcontainer: string;
             tooltipalignstyles: string;
             tooltipasmodal: string;
         };
     };
     SNACKBAR: {
-        $_error: {
-            snackbar: string;
-            container: string;
-        };
-        $_container: {
-            snackbar: string;
-        };
         container: string;
-        $_primary: {
-            snackbar: string;
-            container: string;
-        };
-        $_success: {
-            snackbar: string;
-            container: string;
-        };
-        $_warning: {
-            snackbar: string;
-            container: string;
-        };
     };
     STEPPER_NUMBER: {
         stepper_number: string;
@@ -1985,23 +1621,6 @@ declare type ComponentsTypesComponents = {
         stepindex: string;
         stepname: string;
         stepnamecontainer: string;
-        $_horizontal: {
-            stepper_number: string;
-            stepindex: string;
-        };
-        $_default: {
-            stepper_number: string;
-            iconselected: string;
-            stepbar: string;
-            stepcircle: string;
-            stepindex: string;
-        };
-        $_vertical: {
-            stepper_number: string;
-            stepcontainer: string;
-            stepname: string;
-            stepnamecontainer: string;
-        };
     };
     TABLE: {
         table: string;
@@ -2012,46 +1631,28 @@ declare type ComponentsTypesComponents = {
         rightboxshadow: string;
         rightboxshadowcontainer: string;
         scrollablecontainer: string;
-        $_default: {
-            table: string;
-        };
     };
     TABLE_BODY: {
         table_body: string;
-        $_default: {
-            table_body: string;
-        };
     };
     TABLE_CAPTION: {
         table_caption: string;
-        $_default: {
-            table_caption: string;
-        };
     };
     TABLE_CELL: {
         table_cell: string;
-        $_body_cell_default: {
-            table_cell: string;
-        };
-        $_header_cell_default: {
-            table_cell: string;
-        };
-        $_header_cell_secondary: {
-            table_cell: string;
-        };
         dynamic_values: (styles: {
-            '$tdWidth': string;
-            '$tdHeight': string;
-            '$tdMinWidth': string;
-            '$tdMaxWidth': string;
-            '$tdTextAlign': string;
-            '$tdVerticalAlign': string;
-            '$tdAlignItems': string;
-            '$tdJustifyContent': string;
-            '$tdTop': string;
-            '$tdLeft': string;
-            '$tdRight': string;
-            '$tdBottom': string;
+            $tdWidth: string;
+            $tdHeight: string;
+            $tdMinWidth: string;
+            $tdMaxWidth: string;
+            $tdTextAlign: string;
+            $tdVerticalAlign: string;
+            $tdAlignItems: string;
+            $tdJustifyContent: string;
+            $tdTop: string;
+            $tdLeft: string;
+            $tdRight: string;
+            $tdBottom: string;
         }) => {
             string: string;
             object: object;
@@ -2059,33 +1660,15 @@ declare type ComponentsTypesComponents = {
     };
     TABLE_DIVIDER: {
         table_divider: string;
-        $_default: {
-            table_divider: string;
-        };
     };
     TABLE_FOOT: {
         table_foot: string;
-        $_default: {
-            table_foot: string;
-        };
     };
     TABLE_HEAD: {
         table_head: string;
-        $_default: {
-            table_head: string;
-        };
     };
     TABLE_ROW: {
         table_row: string;
-        $_body_row_default: {
-            table_row: string;
-        };
-        $_header_row_default: {
-            table_row: string;
-        };
-        $_header_row_secondary: {
-            table_row: string;
-        };
     };
     TABS: {
         tabs: string;
@@ -2100,39 +1683,14 @@ declare type ComponentsTypesComponents = {
         tabbutton: string;
         tabbuttonscontainer: string;
         tabcontainer: string;
-        $_default: {
-            tabs: string;
-        };
     };
     TAG: {
         tag: string;
         icon: string;
         label: string;
-        $_code: {
-            tag: string;
-            label: string;
-        };
-        $_deprecated: {
-            tag: string;
-        };
-        $_dormant: {
-            tag: string;
-        };
-        $_healthy: {
-            tag: string;
-        };
-        $_informative: {
-            tag: string;
-        };
-        $_issue: {
-            tag: string;
-        };
     };
     TEXT: {
         text: string;
-        $_default: {
-            text: string;
-        };
         $_heading_display_1_expanded: {
             text: string;
         };
@@ -2141,939 +1699,139 @@ declare type ComponentsTypesComponents = {
         };
         $_heading_h1_expanded: {
             text: string;
-        };
-        $_heading_h1_extended: {
-            text: string;
-        };
-        $_heading_h2_expanded: {
-            text: string;
-        };
-        $_heading_h2_extended: {
-            text: string;
-        };
-        $_heading_h3_expanded: {
-            text: string;
-        };
-        $_heading_h3_extended: {
-            text: string;
-        };
-        $_heading_h4_expanded: {
-            text: string;
-        };
-        $_heading_h4_extended: {
-            text: string;
-        };
-        $_main_heading_display_1_expanded: {
-            text: string;
-        };
-        $_main_heading_h1_expanded: {
-            text: string;
-        };
-        $_main_heading_h2_expanded: {
-            text: string;
-        };
-        $_main_heading_h3_expanded: {
-            text: string;
-        };
-        $_main_heading_h4_expanded: {
-            text: string;
-        };
-        $_paragraph_caption_expanded: {
-            text: string;
-        };
-        $_paragraph_caption_extended: {
-            text: string;
-        };
-        $_paragraph_large_expanded: {
-            text: string;
-        };
-        $_paragraph_large_extended: {
-            text: string;
-        };
-        $_paragraph_medium_expanded: {
-            text: string;
-        };
-        $_paragraph_medium_extended: {
-            text: string;
-        };
-        $_paragraph_medium_mono: {
-            text: string;
-        };
-        $_paragraph_small_expanded: {
-            text: string;
-        };
-        $_paragraph_small_extended: {
-            text: string;
-        };
-    };
-    TEXT_AREA: {
-        text_area: string;
-        bottomcontainer: string;
-        counter: string;
-        counterleft: string;
-        counterright: string;
-        errorcontainer: string;
-        erroricon: string;
-        errormessage: string;
-        helpmessage: string;
-        helpmessageerrorcontainer: string;
-        label: string;
-        labelandadditionalinfocontainer: string;
-        labeltextareacontainer: string;
-        required: string;
-        textarea: string;
-        title: string;
-        titlecontainer: string;
-        $_default: {
-            text_area: string;
-        };
-    };
-    TEXT_COUNT: {
-        text_count: string;
-        letftext: string;
-        righttext: string;
-        $_default: {
-            text_count: string;
-            letftext: string;
-            righttext: string;
-        };
-    };
-    TOGGLE: {
-        icon: string;
-        iconwrapper: string;
-        thumb: string;
-        track: string;
-        $_regular: {
-            toggle: string;
-            track: string;
-        };
-    };
-    TOOLTIP: {
-        arrow: string;
-        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;
-        tooltipinternalcontainer: string;
-        $_default: {
-            tooltip: string;
-            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;
-        };
-    };
-    VIRTUAL_KEYBOARD: {
-        virtual_keyboard: string;
-        digitbuttons: string;
-        digittext: string;
-        digitwrapper: string;
-        iconcontainer: string;
-        removebutton: string;
-        $_default: {
-            virtual_keyboard: string;
-            digitbuttons: string;
-            digittext: string;
-        };
-    };
-};
-
-/**
- * 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;
-    };
-} | {
-    child?: CssLibPropsType & {
-        $target?: string;
-    };
-} | {
-    descendant?: CssLibPropsType & {
-        $target?: string;
-    };
-} | {
-    near?: CssLibPropsType & {
-        $target?: string;
-    };
-} | {
-    concat?: CssLibPropsType & {
-        $target?: string;
-    };
-} | {
-    column?: CssLibPropsType & {
-        $target?: string;
-    };
-};
-
-declare type CssDynamicValuesType = {
-    $dynamicValues?: string[];
-};
-
-declare type CssForeignLibType = {
-    $foreign?: CssForeignType;
-};
-
-declare type CssForeignType = {
-    [key: string]: {
-        component: object;
-        variant?: string | unknown;
-        name: string;
-    };
-};
-
-declare type CssLibAdvancedSelectorsType = {
-    $advancedSelectors?: CssAdvancedSelectorsType[];
-};
-
-declare type CssLibAttributesType = {
-    $attributes?: {
-        [key: string]: CssLibPropsType;
-    } | {
-        [key: string]: {
-            [key: string]: CssLibPropsType;
-        };
-    };
-};
-
-declare type CssLibMediaQueriesType = {
-    $mediaQueries?: {
-        [key: string]: CssMediaQueriesType;
-    } | {
-        'mobile'?: CssLibPropsType;
-        'tablet'?: CssLibPropsType;
-        'desktop'?: CssLibPropsType;
-        'large_desktop'?: CssLibPropsType;
-    };
-};
-
-declare type CssLibPropsType = CssPropsType & CssLibPseudoClassesType & CssLibPseudoElementsType & CssLibAdvancedSelectorsType & CssDynamicValuesType & CssLibAttributesType & CssLibMediaQueriesType & CssForeignLibType;
-
-declare type CssLibPseudoClassesType = {
-    $pseudoClasses?: CssPseudoClassesType;
-};
-
-declare type CssLibPseudoElementsType = {
-    $pseudoElements?: CssPseudoElementsType;
-};
-
-declare type CssMediaQueriesType = CssPropsType & {
-    $type?: string;
-    $values?: {
-        [key: string]: string;
-    };
-};
-
-declare type CssPropsType = {
-    scrollbar_width?: string;
-    scrollbar_color?: string;
-    scrollbar_gutter?: string;
-    scroll_behavior?: string;
-    scroll_margin?: string;
-    scroll_padding?: string;
-    scroll_snap_align?: string;
-    scroll_snap_stop?: string;
-    scroll_snap_type?: string;
-    webkit_scrollbar?: string;
-    scroll_container?: string;
-    scrollbar_aria_role?: string;
-    background?: string;
-    background_color?: string;
-    background_image?: string;
-    background_position?: string;
-    background_repeat?: string;
-    background_size?: string;
-    background_attachment?: string;
-    background_blend_mode?: string;
-    background_clip?: string;
-    background_origin?: string;
-    border?: string;
-    border_top?: string;
-    border_right?: string;
-    border_bottom?: string;
-    border_left?: string;
-    border_radius?: string;
-    border_width?: string;
-    border_left_width?: string;
-    border_right_width?: string;
-    border_top_width?: string;
-    border_bottom_width?: string;
-    border_color?: string;
-    border_left_color?: string;
-    border_right_color?: string;
-    border_top_color?: string;
-    border_bottom_color?: string;
-    border_top_left_radius?: string;
-    border_top_right_radius?: string;
-    border_bottom_left_radius?: string;
-    border_bottom_right_radius?: string;
-    border_style?: string;
-    border_left_style?: string;
-    border_top_style?: string;
-    border_right_style?: string;
-    border_bottom_style?: string;
-    outline?: string;
-    outline_style?: string;
-    outline_color?: string;
-    outline_width?: string;
-    outline_offset?: string;
-    display?: string;
-    opacity?: string;
-    visibility?: string;
-    overflow?: string;
-    overflow_x?: string;
-    overflow_y?: string;
-    overflow_block?: string;
-    overflow_inline?: string;
-    overflow_clip_margin?: string;
-    flex?: string;
-    flex_direction?: string;
-    flex_wrap?: string;
-    flex_flow?: string;
-    flex_grow?: string;
-    flex_shrink?: string;
-    flex_basis?: string;
-    justify_content?: string;
-    justify_items?: string;
-    align_items?: string;
-    align_self?: string;
-    align_content?: string;
-    order?: string;
-    gap?: string;
-    row_gap?: string;
-    column_gap?: string;
-    grid?: string;
-    grid_area?: string;
-    grid_template?: string;
-    grid_template_areas?: string;
-    grid_template_rows?: string;
-    grid_template_columns?: string;
-    grid_row?: string;
-    grid_row_start?: string;
-    grid_row_end?: string;
-    grid_column?: string;
-    grid_column_start?: string;
-    grid_column_end?: string;
-    grid_gap?: string;
-    grid_row_gap?: string;
-    grid_column_gap?: string;
-    grid_auto_flow?: string;
-    grid_auto_rows?: string;
-    grid_auto_columns?: string;
-    margin?: string;
-    margin_left?: string;
-    margin_right?: string;
-    margin_top?: string;
-    margin_bottom?: string;
-    padding?: string;
-    padding_left?: string;
-    padding_right?: string;
-    padding_top?: string;
-    padding_bottom?: string;
-    box_sizing?: string;
-    box_shadow?: string;
-    width?: string;
-    min_width?: string;
-    max_width?: string;
-    height?: string;
-    min_height?: string;
-    max_height?: string;
-    position?: string;
-    top?: string;
-    right?: string;
-    bottom?: string;
-    left?: string;
-    z_index?: string;
-    float?: string;
-    clear?: string;
-    transform?: string;
-    transform_origin?: string;
-    transform_style?: string;
-    translate?: string;
-    font?: string;
-    font_family?: string;
-    font_size?: string;
-    font_weight?: string;
-    font_style?: string;
-    font_variant?: string;
-    font_stretch?: string;
-    font_size_adjust?: string;
-    font_synthesis?: string;
-    font_feature_settings?: string;
-    font_kerning?: string;
-    font_language_override?: string;
-    font_optical_sizing?: string;
-    font_variant_alternates?: string;
-    font_variant_caps?: string;
-    font_variant_east_asian?: string;
-    font_variant_ligatures?: string;
-    font_variant_numeric?: string;
-    font_variant_position?: string;
-    line_height?: string;
-    letter_spacing?: string;
-    text_align?: string;
-    text_decoration?: string;
-    text_transform?: string;
-    white_space?: string;
-    word_break?: string;
-    word_wrap?: string;
-    text_overflow?: string;
-    text_shadow?: string;
-    text_indent?: string;
-    text_justify?: string;
-    text_orientation?: string;
-    text_rendering?: string;
-    text_size_adjust?: string;
-    text_combine_upright?: string;
-    text_emphasis?: string;
-    text_emphasis_color?: string;
-    text_emphasis_position?: string;
-    text_emphasis_style?: string;
-    text_decoration_color?: string;
-    text_decoration_line?: string;
-    text_decoration_skip?: string;
-    text_decoration_skip_ink?: string;
-    text_decoration_style?: string;
-    text_underline_position?: string;
-    list_style?: string;
-    list_style_type?: string;
-    list_style_position?: string;
-    list_style_image?: string;
-    color?: string;
-    accent_color?: string;
-    cursor?: string;
-    pointer_events?: string;
-    vertical_align?: string;
-    inset?: string;
-    inset_block?: string;
-    inset_block_start?: string;
-    inset_block_end?: string;
-    inset_inline?: string;
-    inset_inline_start?: string;
-    inset_inline_end?: string;
-    transition?: string;
-    transition_property?: string;
-    transition_duration?: string;
-    transition_timing_function?: string;
-    transition_delay?: string;
-    animation?: string;
-    animation_name?: string;
-    animation_duration?: string;
-    animation_timing_function?: string;
-    animation_delay?: string;
-    animation_iteration_count?: string;
-    animation_direction?: string;
-    animation_fill_mode?: string;
-    animation_play_state?: string;
-    animation_timeline?: string;
-    appearance?: string;
-    user_select?: string;
-    aspect_ratio?: string;
-    resize?: string;
-    caret?: string;
-    caret_animation?: string;
-    caret_shape?: string;
-    caret_color?: string;
-    backdrop_filter?: string;
-    backface_visibility?: string;
-    block_size?: string;
-    writing_mode?: string;
-    break_before?: string;
-    break_after?: string;
-    break_inside?: string;
-    clip?: string;
-    clip_path?: string;
-    clip_rule?: string;
-    filter?: string;
-    float_offset?: string;
-    float_defer?: string;
-    hyphens?: string;
-    image_rendering?: string;
-    image_orientation?: string;
-    image_resolution?: string;
-    isolation?: string;
-    mix_blend_mode?: string;
-    object_fit?: string;
-    object_position?: string;
-    overscroll_behavior?: string;
-    overscroll_behavior_x?: string;
-    overscroll_behavior_y?: string;
-    perspective?: string;
-    perspective_origin?: string;
-    scroll_snap_margin?: string;
-    caption_side?: string;
-    empty_cells?: string;
-    fill?: string;
-    fill_rule?: string;
-    flood_color?: string;
-    flood_opacity?: string;
-    lighting_color?: string;
-    marker_end?: string;
-    marker_mid?: string;
-    marker_start?: string;
-    shape_rendering?: string;
-    stop_color?: string;
-    stop_opacity?: string;
-    stroke?: string;
-    stroke_dasharray?: string;
-    stroke_dashoffset?: string;
-    stroke_linecap?: string;
-    stroke_linejoin?: string;
-    stroke_miterlimit?: string;
-    stroke_opacity?: string;
-    mask?: string;
-    mask_type?: string;
-    mask_image?: string;
-    mask_mode?: string;
-    mask_repeat?: string;
-    mask_position?: string;
-    mask_clip?: string;
-    mask_origin?: string;
-    mask_size?: string;
-    mask_composite?: string;
-    mask_border?: string;
-    mask_border_source?: string;
-    mask_border_mode?: string;
-    mask_border_slice?: string;
-    mask_border_width?: string;
-    mask_border_outset?: string;
-    mask_border_repeat?: string;
-    $content?: string;
-};
-
-declare type CssPseudoClassesType = {
-    fullscreen?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    modal?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    picture_in_picture?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    autofill?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    enabled?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    disabled?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    read_only?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    read_write?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    placeholder_shown?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    default?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    checked?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    indeterminate?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    blank?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    valid?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    invalid?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    in_range?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    out_of_range?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    required?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    optional?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    user_valid?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    user_invalid?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    dir?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    lang?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    any_link?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    link?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    visited?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    local_link?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    target?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    target_within?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    scope?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    playing?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    paused?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    current?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    past?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    future?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    root?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    empty?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    nth_child?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    nth_last_child?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    first_child?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    last_child?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    only_child?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    nth_of_type?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    nth_last_of_type?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    first_of_type?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    last_of_type?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    only_of_type?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    active?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    focus?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    focus_visible?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    focus_within?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    hover?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    is?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    not?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    where?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    has?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    nth_col?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    nth_last_col?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    host?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    host_context?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    defined?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_any?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_any_link?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_focusring?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_full_screen?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_full_screen_ancestor?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_full_screen_document?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_full_screen_element?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_full_screen_root?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_placeholder?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_read_only?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_read_write?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_submit_invalid?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_ui_invalid?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    moz_ui_valid?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_any?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_any_link?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_autofill?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_current?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_full_screen?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_full_screen_ancestor?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_full_screen_document?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_full_screen_element?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_full_screen_root?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_input_placeholder?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_read_only?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_read_write?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_scrollbar?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
-    };
-    webkit_scrollbar_button?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
+        };
+        $_heading_h1_extended: {
+            text: string;
+        };
+        $_heading_h2_expanded: {
+            text: string;
+        };
+        $_heading_h2_extended: {
+            text: string;
+        };
+        $_heading_h3_expanded: {
+            text: string;
+        };
+        $_heading_h3_extended: {
+            text: string;
+        };
+        $_heading_h4_expanded: {
+            text: string;
+        };
+        $_heading_h4_extended: {
+            text: string;
+        };
+        $_main_heading_display_1_expanded: {
+            text: string;
+        };
+        $_main_heading_h1_expanded: {
+            text: string;
+        };
+        $_main_heading_h2_expanded: {
+            text: string;
+        };
+        $_main_heading_h3_expanded: {
+            text: string;
+        };
+        $_main_heading_h4_expanded: {
+            text: string;
+        };
     };
-    webkit_scrollbar_thumb?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
+    TEXT_AREA: {
+        text_area: string;
+        bottomcontainer: string;
+        counter: string;
+        counterleft: string;
+        counterright: string;
+        errorcontainer: string;
+        erroricon: string;
+        errormessage: string;
+        helpmessage: string;
+        helpmessageerrorcontainer: string;
+        label: string;
+        labelandadditionalinfocontainer: string;
+        labeltextareacontainer: string;
+        required: string;
+        textarea: string;
+        title: string;
+        titlecontainer: string;
     };
-    webkit_scrollbar_track?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
+    TEXT_COUNT: {
+        text_count: string;
+        letftext: string;
+        righttext: string;
     };
-    webkit_scrollbar_track_piece?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
+    TOGGLE: {
+        icon: string;
+        iconwrapper: string;
+        thumb: string;
+        track: string;
     };
-    webkit_search_cancel_button?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
+    TOOLTIP: {
+        arrow: string;
+        arrowcontainer: string;
+        arrowposition: string;
+        arrowsize: string;
+        paragraph: string;
+        paragraphcontainer: string;
+        tooltipalignstyles: string;
+        tooltipasmodal: string;
+        tooltipexternalcontainer: string;
+        tooltipinternalcontainer: string;
+        popover: {
+            arrow: string;
+            popover: string;
+        };
     };
-    webkit_search_results_button?: CssPseudoClassesType | CssPseudoElementsType | CssLibPropsType & {
-        $target?: string;
+    VIRTUAL_KEYBOARD: {
+        virtual_keyboard: string;
+        digitbuttons: string;
+        digittext: string;
+        digitwrapper: string;
+        iconcontainer: string;
+        removebutton: string;
     };
 };
 
-declare type CssPseudoElementsType = {
-    before?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    after?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    first_letter?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    first_line?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    selection?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    backdrop?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    placeholder?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    marker?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    spelling_error?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    grammar_error?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    cue?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    cue_region?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    part?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    slotted?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    file_selector_button?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    target_text?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    highlight?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    moz_color_swatch?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    moz_focus_inner?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    moz_list_bullet?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    moz_list_number?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    moz_meter_bar?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    moz_progress_bar?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    moz_range_progress?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    moz_range_thumb?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    moz_range_track?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_inner_spin_button?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_meter_even_less_good_value?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_meter_inner_element?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_meter_optimum_value?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_meter_suboptimum_value?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_progress_bar?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_progress_inner_element?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_progress_value?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_scrollbar?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_scrollbar_button?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_scrollbar_thumb?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_scrollbar_track?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_scrollbar_track_piece?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_search_cancel_button?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_search_results_button?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_slider_runnable_track?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_slider_thumb?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_resizer?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    webkit_input_placeholder?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    placeholder_shown?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    autofill?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    progress_value?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    progress_bar?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    meter_optimum?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    meter_suboptimum?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
-    meter_sub_suboptimum?: CssPseudoElementsType | CssPseudoClassesType | CssLibPropsType;
+/**
+ * Create a spring animation configuration with physics-based keyframes as CSS string
+ */
+export declare const createSpringAnimation: (direction: "up" | "down" | "left" | "right" | "fade", options?: {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    duration?: string;
+    initialDisplacement?: number;
+    keyframeCount?: number;
+    placement?: string;
+}) => {
+    duration: string;
+    keyframesCSS: string;
+};
+
+export declare type CssLibPropsType = CssLibPropsType_2<any> & {
+    $dynamicValues?: string[];
 };
 
-declare type DataAttributes = {
+export 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,27 +1961,115 @@ 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'];
 }
 
-declare const DEVICE_BREAKPOINTS: {
+declare interface 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;
+}
+
+export declare const DEVICE_BREAKPOINTS: {
     readonly DESKTOP: "desktop";
     readonly LARGE_DESKTOP: "large_desktop";
     readonly MOBILE: "mobile";
     readonly TABLET: "tablet";
 };
 
-declare type DeviceBreakpointsType = 'mobile' | 'tablet' | 'desktop' | 'large_desktop';
+export declare type DeviceBreakpointsType = 'mobile' | 'tablet' | 'desktop' | 'large_desktop';
+
+/**
+ * Utility functions for checking device breakpoint types.
+ * These helpers allow you to easily determine if a given DeviceBreakpointsType
+ * matches a specific device category (mobile, tablet, desktop, etc).
+ */
+export declare const DeviceBreakpointsTypeUtils: {
+    /**
+     * Returns true if the device is a desktop device.
+     */
+    isDesktop: (device: DeviceBreakpointsType) => boolean;
+    /**
+     * Returns true if the device is a large desktop device.
+     */
+    isLargeDesktop: (device: DeviceBreakpointsType) => boolean;
+    /**
+     * Returns true if the device is a mobile device.
+     */
+    isMobile: (device: DeviceBreakpointsType) => boolean;
+    /**
+     * Returns true if the device is either mobile or tablet.
+     */
+    isMobileOrTablet: (device: DeviceBreakpointsType) => boolean;
+    /**
+     * Returns true if the device is either desktop or large desktop.
+     */
+    isOnlyDesktop: (device: DeviceBreakpointsType) => boolean;
+    /**
+     * Returns true if the device is a tablet device.
+     */
+    isTablet: (device: DeviceBreakpointsType) => boolean;
+};
 
 /**
  * Dot component for displaying a small badge or counter.
@@ -3296,205 +2142,195 @@ 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
  */
-export declare const DropdownSelected: ForwardRefExoticComponent<DropdownSelectedUnControlledProps & RefAttributes<HTMLDivElement>>;
+declare interface ElementOrIconProps extends Omit<IconProps, 'icon'>, DataAttributes {
+    icon?: JSX.Element | HTMLElement | React.ReactNode | string;
+    basic?: boolean;
+}
 
 /**
- * Controlled dropdown component for displaying selectable options.
+ * ErrorMessage component for displaying error messages.
  *
- * 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.
- *
- * 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.
+ * This component renders a styled error message with optional icons and
+ * customizable variants. It uses the ErrorMessageStandAlone component
+ * for rendering with CSS classes from the design system.
  *
  * @example
  * ```tsx
- * <DropdownSelectedControlled open listOptions={options} />
- *
- * // With a custom variant type:
- * type MyVariant = "primary" | "secondary";
- * <DropdownSelectedControlled<MyVariant> variant="primary" open listOptions={options} />
+ * <ErrorMessage variant="default">
+ *   Please enter a valid email address
+ * </ErrorMessage>
  * ```
  */
-export declare const DropdownSelectedControlled: ForwardRefExoticComponent<DropdownSelectedControlledProps<string> & RefAttributes<HTMLDivElement>>;
+export declare const ErrorMessage: ForwardRefExoticComponent<Omit<ErrorMessageStandAloneProps, "styles"> & {
+variant?: string | undefined;
+additionalClasses?: Partial<{
+icon: string;
+error_message: string;
+typography: string;
+}>;
+} & RefAttributes<HTMLDivElement>>;
 
-/**
- * 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.
- */
-export declare interface DropdownSelectedControlledProps<Variant = undefined extends string ? unknown : string> extends Omit<DropdownSelectedStandAloneProps, 'listOptionsRef' | 'onButtonKeyDown' | 'component'> {
+declare type ErrorMessageCssClasses = ComponentSelected<ComponentsTypesComponents['ERROR_MESSAGE']>;
+
+export declare type ErrorMessageProps<Variant = undefined extends string ? unknown : string> = Omit<ErrorMessageStandAloneProps, 'styles'> & {
     variant?: Variant;
-    additionalClasses?: Partial<DropdownSelectedCssClasses>;
+    additionalClasses?: Partial<ErrorMessageCssClasses>;
+};
+
+export declare interface ErrorMessageStandAloneProps extends Pick<AriaAttributes, 'aria-live'> {
+    cssClasses?: ErrorMessageCssClasses;
+    show?: boolean;
+    message?: CommonTextProps;
+    id?: string;
+    icon?: CommonIconProps;
 }
 
-declare type DropdownSelectedCssClasses = ComponentSelected<ComponentsTypesComponents['DROPDOWN_SELECTED']>;
+export declare interface ErrorMessageStyleProps extends CssLibPropsType {
+    _icon?: CssLibPropsType;
+    _typography?: CssLibPropsType;
+}
 
-/**
- * Represents the type for the list options in the DropdownSelected component.
- */
-export declare type DropdownSelectedListOptionsProps = Omit<ListOptionsProps, 'selectedValue' | 'onOptionClick'>;
+export declare type ErrorMessageVariantStyles<Variant extends string> = ErrorMessageStyleProps & {
+    [key in Variant]: ErrorMessageStyleProps;
+};
 
-declare type DropdownSelectedOmittedProps = 'buttonOrLinkRef' | 'open' | 'onButtonClick' | 'optionSelected' | 'onOptionClick' | 'onClosePopover' | 'onMouseEnter' | 'onMouseLeave' | 'onBlur' | 'onFocus' | 'onKeyDown';
+declare type FormatDateType = 'd' | 'dd' | 'ddd' | 'dddd' | 'f' | 'ff' | 'fff' | 'F' | 'FF' | 'FFF' | 'ffff' | 'FFFF' | 't' | 'tt' | 'T' | 'TT' | 'ttt' | 'TTT' | 'tttt' | 'TTTT';
 
 /**
- * Represents the type for the popover in the DropdownSelected component.
+ * Generate spring keyframes with realistic physics calculations
+ *
+ * Simulates real spring behavior using mathematical formulas to calculate
+ * natural bounce animations based on stiffness, damping, and mass properties.
  */
-export declare type DropdownSelectedPopoverProps = Omit<IPopover, 'children' | 'open'>;
+export declare const generateSpringKeyframes: (direction: "up" | "down" | "left" | "right" | "fade", stiffness?: number, // How "tight" the spring is - higher = snappier animation
+damping?: number, // How much the spring slows down - higher = less bouncy
+mass?: number, // How "heavy" the element feels - higher = slower to start/stop
+initialDisplacement?: number, // Starting distance in pixels
+keyframeCount?: number, // How many animation steps to create
+placement?: string) => string;
 
 /**
- * Interface for the standalone DropdownSelected component.
- * Includes properties for state, event handlers, and CSS classes.
+ * Generate a complete CSS keyframes rule with a given name
  */
-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;
-}
-
-export declare interface DropdownSelectedStyleProps extends CssLibPropsType {
-    _buttonOrLinkContainer?: CssLibPropsType;
-    _labelOpened?: CssLibPropsType;
-    _labelClosed?: CssLibPropsType;
-    _iconOpened?: CssLibPropsType;
-    _iconClosed?: CssLibPropsType;
-    _listOptionsContainer?: CssLibPropsType;
-}
+export declare const generateSpringKeyframesRule: (keyframeName: string, direction: "up" | "down" | "left" | "right" | "fade", stiffness?: number, damping?: number, mass?: number, initialDisplacement?: number, keyframeCount?: number, placement?: string) => string;
 
 /**
- * Interface for the uncontrolled DropdownSelected component.
- * Extends the DropdownSelectedProps interface and adds default properties.
+ * React Context for generic component implementations.
+ * Provides access to custom Link and Image components throughout the application.
  */
-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;
-};
+export declare const GenericComponentContext: Context<GenericComponentsType | null>;
 
 /**
- * @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
+ * 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 is essential for integrating Kubit components with different routing libraries
+ * or custom implementations while maintaining consistent behavior across the application.
+ *
+ * @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
+ * import { Link } from 'react-router-dom';
+ *
+ * const customComponents = {
+ *   LINK: Link,
+ *   IMAGE: CustomImage,
+ * };
+ *
+ * <GenericComponentsProvider value={customComponents}>
+ *   <App />
+ * </GenericComponentsProvider>
+ * ```
  */
-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.
+ * Props for the GenericComponentsProvider.
+ * Wraps the application with custom component implementations.
  */
 declare interface GenericComponentsProviderProps {
+    /** The custom generic components to be made available to child components */
     value: GenericComponentsType;
 }
 
 /**
- * Defines the types for generic components, including links and images.
+ * Collection of generic component implementations.
+ * Allows customization of primitive components used throughout the library.
  */
 declare interface GenericComponentsType {
+    /** Link component implementation (required) */
     LINK: GenericLinkType;
+    /** Image component implementation (optional) */
     IMAGE?: GenericImageType;
 }
 
 /**
- * Defines the properties for a generic image component.
+ * Props for a generic image component.
+ * Inherits all standard HTML image attributes.
  */
 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.
+ * Type definition for a generic image component.
+ * Can be either a functional component or a forward ref component to support refs.
  */
 declare type GenericImageType = ((props: GenericImageProps) => JSX.Element) | ForwardRefExoticComponent<GenericImageProps & RefAttributes<unknown>>;
 
+/**
+ * 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'>;
 
 /**
- * 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>>;
 
@@ -3562,8 +2398,8 @@ export declare interface ICarousel extends Omit<ICarouselStandAlone, 'cssClasses
 
 declare interface ICarouselStandAlone extends DataAttributes {
     cssClasses?: CarouselCssClasses;
-    viewerContainerRef: React.RefObject<HTMLDivElement>;
-    contentContainerRef: React.RefObject<HTMLDivElement>;
+    viewerContainerRef: React.RefObject<HTMLDivElement | null>;
+    contentContainerRef: React.RefObject<HTMLDivElement | null>;
     elements: JSX.Element[];
     screenReaderOnly?: CarouselScreenReaderOnlyType;
     allowModifySliceWidth?: boolean;
@@ -3651,10 +2487,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 +2546,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 +2571,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 +2643,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 +2688,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 +2714,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>>;
 
 /**
@@ -3868,7 +2787,7 @@ export declare interface InputSignatureLineStyles {
  */
 export declare interface InputSignatureStandAloneProps extends DataAttributes {
     state: InputSignatureState;
-    canvasRef: React.RefObject<HTMLCanvasElement>;
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
     placeholder: CommonTextProps;
     errorText?: CommonTextProps;
     onClickContainer: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -3908,7 +2827,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 +2961,17 @@ export declare interface ISnackbarV2 extends Omit<ISnackbarStandAlone, 'onMouseE
 
 declare type keyMoveType = number | ((previous: number, e?: KeyboardEvent) => number) | null;
 
-export declare const KubitProvider: ({ children, genericComponentsProvider, utilsConfig, }: KubitProviderProps) => JSX.Element;
-
-declare interface KubitProviderProps {
-    children?: React.ReactNode;
-    genericComponentsProvider?: GenericComponentsType;
-    showErrors?: boolean;
-    idCreateModal?: string | null;
-    customFallback?: JSX.Element;
-    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 +3103,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 +3165,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,138 +3185,56 @@ 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.
+ * Options for middleware configuration in the popover
  */
-export declare interface MessageContainerAsLinkProps {
-    onClick?: () => void;
-    url?: string;
-    target?: React.HTMLAttributeAnchorTarget;
+declare interface MiddlewareOptions {
+    offsetDistance?: [number, number];
+    edgePadding?: number;
+    hideWhenDetached?: boolean;
 }
 
-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;
+export declare const MIRROR_POSITIONS: {
+    bottom: "top";
+    "bottom-center": "top-center";
+    left: "right";
+    right: "left";
+    top: "bottom";
+    "top-center": "bottom-center";
 };
 
 /**
- * Interface for the controlled Message component.
- * Extends the MessageStandAloneProps interface and adds a variant and additional CSS classes.
+ * ModalUnControlled component with internal state management.
  *
- * @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.
+ * 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.
  *
- * @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
+ * @example
+ * ```tsx
+ * <ModalUnControlled
+ *   open={true}
+ *   onClose={() => console.log('closed')}
+ * >
+ *   Modal content
+ * </ModalUnControlled>
+ * ```
  */
-declare interface MiddlewareOptions {
-    offsetDistance?: [number, number];
-    edgePadding?: number;
-    hideWhenDetached?: boolean;
-}
-
 export declare const Modal: ForwardRefExoticComponent<ModalUnControlledProps<string | undefined> & {
 children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;
@@ -4404,6 +3255,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 +3291,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 +3317,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 +3369,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 +3377,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 +3421,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 +3462,48 @@ export declare type OptionVariantStyles<Variant extends string> = OptionStylePro
     [key in Variant]: OptionStyleProps;
 };
 
+declare type OverlayCssClasses = ComponentSelected<ComponentsTypesComponents['OVERLAY']>;
+
+/**
+ * Interface for the Overlay component with a variant.
+ * Extends the OverlayStandAloneProps interface and adds a variant and additional CSS classes.
+ *
+ * @template Variant - The type of the variant for the Overlay.
+ */
+export declare interface OverlayProps<Variant = undefined extends string ? unknown : string> extends Omit<OverlayStandAloneProps, 'cssClasses'> {
+    variant?: Variant;
+    additionalClasses?: Partial<OverlayCssClasses>;
+}
+
+/**
+ * Interface for the standalone Overlay component.
+ * Includes optional CSS classes and data attributes.
+ */
+export declare interface OverlayStandAloneProps extends DataAttributes {
+    cssClasses?: OverlayCssClasses;
+}
+
+export declare type OverlayVariantStyles<Variant extends string> = CssLibPropsType & {
+    [key in Variant]: CssLibPropsType;
+};
+
+/**
+ * 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 +3571,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>>;
 
 /**
@@ -4786,12 +3683,54 @@ export { popoverMWShift }
 
 export { popoverMWSize }
 
-export declare interface PopoverStylePropsV2 extends CssLibPropsType {
+export declare interface PopoverStyleProps extends CssLibPropsType {
     _arrow?: 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';
+export declare const POSITIONS: {
+    readonly BOTTOM: "bottom";
+    readonly BOTTOM_CENTER: "bottom-center";
+    readonly BOTTOM_CENTER_FIXED: "bottom-center-fixed";
+    readonly BOTTOM_FIXED: "bottom-fixed";
+    readonly BOTTOM_GAP_RIGHT: "bottom-gap-right";
+    readonly BOTTOM_LEFT: "bottom-left";
+    readonly BOTTOM_LEFT_FIT_CONTENT: "bottom-left-fit-content";
+    readonly BOTTOM_RIGHT: "bottom-right";
+    readonly BOTTOM_RIGHT_FIT_CONTENT: "bottom-right-fit-content";
+    readonly CENTER: "center";
+    readonly LEFT: "left";
+    readonly LEFT_BOTTOM_FIXED: "left-bottom-fixed";
+    readonly LEFT_FIXED: "left-fixed";
+    readonly RIGHT: "right";
+    readonly RIGHT_FIXED: "right-fixed";
+    readonly TOP: "top";
+    readonly TOP_CENTER: "top-center";
+    readonly TOP_CENTER_FIXED: "top-center-fixed";
+    readonly TOP_LEFT: "top-left";
+    readonly TOP_RIGHT: "top-right";
+    readonly WITHOUT: "without";
+};
+
+export 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 +3767,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 +3788,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 +3831,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 +3858,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>;
@@ -4936,34 +3901,101 @@ declare type RecoverComponentStyles = <T extends ComponentsTypesAvailableCompone
     additionalClassNames?: Partial<ComponentSelected_2<ComponentsTypesComponents[T]>>;
 }) => ComponentSelected_2<ComponentsTypesComponents[T]>;
 
-declare interface ScreenReaderOnlyProps extends DataAttributes {
+declare type ScreenReaderOnlyProps = ScreenReaderOnlyStandAloneProps;
+
+declare interface ScreenReaderOnlyStandAloneProps extends DataAttributes {
+    ariaAtomic?: AriaAttributes['aria-atomic'];
+    ariaLive?: AriaAttributes['aria-live'];
     children?: React.ReactNode;
+    className?: string;
     id?: string;
-    show?: boolean;
-    ariaLive?: AriaAttributes['aria-live'];
     role?: React.AriaRole;
 }
 
-export declare const SelectorBoxFile: ForwardRefExoticComponent<SelectorBoxFileProps<string> & RefAttributes<HTMLDivElement>>;
+/**
+ * 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']>;
 
 /**
- * Represents the type for the button in the SelectorBoxFile component.
+ * Represents the type for the list options in the Select component.
  */
-export declare type SelectorBoxFileButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'size'> & {
-    content: string;
-    variant?: string;
-    size?: string;
-};
+export declare type SelectListOptionsProps = Omit<ListOptionsProps, 'selectedValue' | 'onOptionClick'>;
+
+declare type SelectOmittedProps = 'buttonOrLinkRef' | 'open' | 'onButtonClick' | 'optionSelected' | 'onOptionClick' | 'onClosePopover' | 'onMouseEnter' | 'onMouseLeave' | 'onBlur' | 'onFocus' | 'onKeyDown';
+
+/**
+ * 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 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 +4013,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 +4029,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 +4041,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 +4051,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 +4069,96 @@ 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'>;
+
+/**
+ * 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 | null>;
+    closePopoverOnScroll?: boolean;
+    openAndCloseOnHover?: boolean;
+    url?: string;
+    urlTarget?: HTMLAttributeAnchorTarget;
+    component: 'button' | GenericLinkType;
+    buttonOrLinkRef?: RefObject<HTMLButtonElement | null>;
+    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;
 };
 
-export declare type SelectorBoxFileVariantStyles<Variant extends string> = SelectorBoxFileStyleProps & {
-    [key in Variant]?: SelectorBoxFileStyleProps;
+export declare const SIZES: {
+    readonly EXTRA_LARGE: "extra_large";
+    readonly EXTRA_SMALL: "extra_small";
+    readonly LARGE: "large";
+    readonly MEDIUM: "medium";
+    readonly SMALL: "small";
 };
 
+export declare type SizesType = 'extra_small' | 'small' | 'medium' | 'large' | 'extra_large';
+
+/**
+ * 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>>;
 
 /**
@@ -5085,8 +4176,8 @@ declare type SkeletonCssClasses = ComponentSelected<ComponentsTypesComponents['S
  */
 export declare interface SkeletonProps<Variant = undefined extends string ? unknown : string> extends SkeletonStandAloneProps {
     variant?: Variant;
-    additionalClasses?: string;
-    additionalShapeClasses?: string;
+    additionalClasses?: Partial<SkeletonCssClasses>;
+    additionalShapeClasses?: Partial<SkeletonCssClasses>;
 }
 
 export declare type SkeletonShapeStyles<Shape extends string> = CssLibPropsType & {
@@ -5100,6 +4191,7 @@ export declare type SkeletonShapeStyles<Shape extends string> = CssLibPropsType
 export declare interface SkeletonStandAloneProps extends SkeletonAriaProps, DataAttributes {
     width?: string;
     height?: string;
+    borderRadius?: string;
     duration?: string;
     cssClasses?: SkeletonCssClasses;
     shapeVariant?: string;
@@ -5112,6 +4204,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>>;
 
 /**
@@ -5183,7 +4300,7 @@ export declare interface SliderStandAloneProps extends DataAttributes {
     hover: boolean;
     pressed: boolean;
     activePointer: React.MutableRefObject<string>;
-    containerRef: React.RefObject<HTMLDivElement>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
     onMouseDown: React.MouseEventHandler<HTMLDivElement>;
     onChange: (event: MouseEvent | React.TouchEvent | React.MouseEvent) => void;
     onTouchStart: React.TouchEventHandler<HTMLDivElement>;
@@ -5244,8 +4361,73 @@ declare type SnackbarV2CssClasses = ComponentSelected<ComponentsTypesComponents[
 
 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';
+export declare const STATES: {
+    readonly ACTIVE: "active";
+    readonly ACTIVE_FILLED: "active_filled";
+    readonly ACTIVE_FILLED_HIDE: "active_filled_hide";
+    readonly BLOCKED_BY_SYSTEM: "blocked_by_system";
+    readonly COMPLETED: "completed";
+    readonly CURRENT: "current";
+    readonly CURRENT_DAY: "current_day";
+    readonly DEFAULT: "default";
+    readonly DEFAULT_SELECTED: "default_selected";
+    readonly DEFAULT_UNSELECTED: "default_unselected";
+    readonly DISABLED: "disabled";
+    readonly DISABLED_EMPTY: "disabled_empty";
+    readonly DISABLED_FILLED: "disabled_filled";
+    readonly DISABLED_FILLED_HIDE: "disabled_filled_hide";
+    readonly DISABLED_SELECTED: "disabled_selected";
+    readonly DISABLED_UNSELECTED: "disabled_unselected";
+    readonly EMPTY: "empty";
+    readonly END_DATE_RANGE: "end_date_range";
+    readonly ERROR: "error";
+    readonly ERROR_EMPTY: "error_empty";
+    readonly ERROR_FILLED: "error_filled";
+    readonly ERROR_FILLED_HIDE: "error_filled_hide";
+    readonly ERROR_SELECTED: "error_selected";
+    readonly ERROR_UNSELECTED: "error_unselected";
+    readonly FILLED: "filled";
+    readonly FILLED_HIDE: "filled_hide";
+    readonly FILLING: "filling";
+    readonly FOCUS: "focus";
+    readonly HOVER: "hover";
+    readonly INACTIVE: "inactive";
+    readonly LOADING: "loading";
+    readonly MIDLE_DATE_RANGE: "midle_date_range";
+    readonly MULTIPLE_SELECTED: "multiple_selected";
+    readonly MULTIPLE_SELECTED_HOVER: "multiple_selected_hover";
+    readonly PENDING: "pending";
+    readonly PREFILLED: "prefilled";
+    readonly PRESSED: "pressed";
+    readonly SELECTED: "selected";
+    readonly SELECTED_HOVER: "selected_hover";
+    readonly START_DATE_RANGE: "start_date_range";
+    readonly SUCCESS: "success";
+    readonly UNSELECTED: "unselected";
+    readonly VISITED: "visited";
+    readonly WARNING: "warning";
+};
+
+export 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']>;
@@ -5254,7 +4436,7 @@ export declare type StepperNumberOrientationStyles<Orientation extends StepperNu
     [key in Orientation]?: StepperNumberStyleProps;
 };
 
-declare type StepperNumberOrientationType = 'horizontal' | 'vertical';
+export declare type StepperNumberOrientationType = 'horizontal' | 'vertical';
 
 declare interface StepperNumberprefixSuffixProps {
     prefix?: {
@@ -5340,42 +4522,140 @@ 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;
-    bernovaProvider?: typeof Provider;
+    /** Custom Bernova provider instance for advanced styling control */
+    bernovaProvider?: never;
+    /** 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;
+    genericComponents?: GenericComponentsType;
+    dateHelpers?: dateHelpers;
 }
 
+/**
+ * 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 +4677,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 +4715,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 +4785,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 +4823,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 +4863,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 +4911,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 +4976,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 +5168,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']>;
@@ -5840,6 +5272,15 @@ declare type TextAriaProps = Pick<React.AriaAttributes, 'aria-label' | 'aria-lab
 
 declare type TextComponentType = 'b' | 'a' | 'strong' | 'i' | 'em' | 'mark' | 'small' | 'del' | 'ins' | 'sub' | 'sup' | 'p' | 'span' | 'label' | 'legend' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'dl' | 'dt' | 'dd' | 'div' | (string & {});
 
+export declare interface TextCountPropsStylesType extends CssLibPropsType {
+    _letfText?: CssLibPropsType;
+    _rightText?: CssLibPropsType;
+}
+
+export declare type TextCountStylesType<P extends string> = TextCountPropsStylesType & {
+    [variant in P]: TextCountPropsStylesType;
+};
+
 export declare type TextCssClasses = ComponentSelected<ComponentsTypesComponents['TEXT']>;
 
 /**
@@ -6038,17 +5479,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 +5553,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 +5564,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 +5577,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 +5614,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 +5647,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 Will throw an error if used outside of a `StylesProvider`.
- * @returns The current value of the `StylesContext`.
+ * @throws {Error} If used outside of a StylesProvider
+ * @returns The current styles context value
+ *
+ * @example
+ * ```tsx
+ * const { currentTheme, changeTheme, getComponentStyles } = useStylesContext();
+ * const styles = getComponentStyles({ component: 'button', variant: 'primary' });
+ * ```
  */
 export declare const useStylesContext: () => StylesContextProps;
 
@@ -6192,29 +5682,46 @@ 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;
-    dateHelpers: {
-        getSubDays: (date: Date, amount: number) => Date;
-        getSubMonths: (date: Date, amount: number) => Date;
-        getSubYears: (date: Date, amount: number) => Date;
-        getAddMonths: (date: Date, amount: number) => Date;
-        getAddDays: (date: Date, amount: number) => Date;
-        getAddYears: (date: Date, years: number) => Date;
-        getAllMonthName: (monthFormat: Intl.DateTimeFormatOptions['month'], locale?: string) => Array<string>;
-        getAllWeekdayName: (weekdayFormat: Intl.DateTimeFormatOptions['weekday'], isSundayFirst: boolean, locale?: string) => Array<string>;
-        isBefore: (date1: Date, date2: Date) => boolean;
-        isAfter: (date1: Date, date2: Date) => boolean;
-        isDatesEqual: (firstDate: Date | number | string, secondDate: Date | number | string, shouldCompareTime: boolean) => boolean;
-    };
+    /**
+     * Collection of date manipulation and comparison utilities.
+     */
+    dateHelpers: dateHelpers;
 }
 
 /**
@@ -6243,7 +5750,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 +5808,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;
 }