@aurora-ds/components 0.25.1 → 1.1.0

package/dist/index.d.ts

@@ -1,184 +1,114 @@
-import * as react from 'react';
-import { PropsWithChildren, FC, ReactNode, MouseEvent, KeyboardEvent, CSSProperties, FormEvent, FocusEvent, ComponentType, SVGProps, DragEvent, ComponentPropsWithoutRef, ReactElement, RefObject } from 'react';
+import { ComponentType, SVGProps, ButtonHTMLAttributes, Ref, FC, AnchorHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties, FormEvent, InputHTMLAttributes } from 'react';
 
-/**
- * Alert variant types
- */
-type AlertVariant = 'default' | 'info' | 'warning' | 'error' | 'success';
-/**
- * Alert position types
- */
-type AlertPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-
-type ButtonVariants = 'contained' | 'outlined' | 'text' | 'destructive' | 'link';
-type IconButtonVariants = Exclude<ButtonVariants, 'link'>;
-type IconButtonSizes = 'small' | 'medium' | 'large';
-type ButtonVariantStyle = {
-    default: {
-        backgroundColor: string;
-        color: string;
-        border: string;
-        textDecoration?: string;
-        textDecorationColor?: string;
-        textUnderlineOffset?: string;
-    };
-    hover: {
-        backgroundColor: string;
-        textDecoration?: string;
-        textDecorationColor?: string;
-        textUnderlineOffset?: string;
-    };
-    pressed: {
-        backgroundColor: string;
-        textDecoration?: string;
-        textDecorationColor?: string;
-        color?: string;
-        textUnderlineOffset?: string;
-    };
-    disabled: {
-        color: string;
-        cursor: string;
-        backgroundColor: string;
-        borderColor?: string;
-        textDecoration?: string;
-        textUnderlineOffset?: string;
-    };
-    textColor: keyof ThemeContract['colors'];
-};
-
-type TextVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label';
-type TextVariantStyle = {
-    tag: TextVariants;
-    fontSize: string;
-    fontWeight: number;
-    lineHeight: number;
-};
-
-/** Status variant options */
-type StatusVariant = 'filled' | 'outlined';
-/** Status color options */
-type StatusColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'highlight' | 'accent' | 'new' | 'rose' | 'yellow';
-/** Status size options */
-type StatusSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
-
-/** Avatar size variants */
-type AvatarSize = 'small' | 'medium' | 'large';
-
-type SelectOption = {
-    label: string;
-    value: string | number;
-    disabled?: boolean;
-};
-
-/**
- * Theme Contracts for aurora-ds-components
- *
- * These interfaces define the MINIMUM required theme structure.
- * All projects using this library MUST provide these tokens.
- *
- * You can extend these contracts with your own custom tokens:
- *
- * @example
- * ```typescript
- * import type { ThemeColorContract } from 'aurora-ds-components'
- *
- * // Extend with custom tokens
- * export interface ThemeColorTypes extends ThemeColorContract {
- *     // Required tokens already included via extends
- *
- *     // Add your custom tokens
- *     highlight: string
- *     accent: string
- * }
- * ```
- */
-/**
- * Minimum color tokens required by aurora-ds-components
- * Projects can extend this interface with additional tokens
- */
-interface ThemeColorContract {
-    background: string;
-    surface: string;
-    surfaceHover: string;
-    surfaceActive: string;
-    text: string;
+declare const lightPalette: {
+    surfaceBackground: string;
+    surfacePaper: string;
+    surfaceElevated: string;
+    textPrimary: string;
     textSecondary: string;
     textTertiary: string;
-    primary: string;
+    textDisabled: string;
+    textInverse: string;
+    primaryMain: string;
     primaryHover: string;
     primaryActive: string;
     primarySubtle: string;
+    primarySubtleHover: string;
+    primarySubtleActive: string;
     primaryDisabled: string;
-    onPrimary: string;
-    secondary: string;
+    primaryOn: string;
+    secondaryMain: string;
     secondaryHover: string;
     secondaryActive: string;
     secondarySubtle: string;
+    secondarySubtleHover: string;
+    secondarySubtleActive: string;
     secondaryDisabled: string;
-    onSecondary: string;
-    border: string;
+    secondaryOn: string;
+    borderSubtle: string;
+    borderMain: string;
+    borderStrong: string;
+    disabledMain: string;
     disabledText: string;
-    disabled: string;
-    success: string;
+    successMain: string;
+    successHover: string;
+    successActive: string;
     successSubtle: string;
-    warning: string;
+    successSubtleHover: string;
+    successSubtleActive: string;
+    successOn: string;
+    warningMain: string;
+    warningHover: string;
+    warningActive: string;
     warningSubtle: string;
-    error: string;
+    warningSubtleHover: string;
+    warningSubtleActive: string;
+    warningOn: string;
+    errorMain: string;
     errorHover: string;
+    errorActive: string;
     errorSubtle: string;
-    onError: string;
-    info: string;
+    errorSubtleHover: string;
+    errorSubtleActive: string;
+    errorOn: string;
+    infoMain: string;
+    infoHover: string;
+    infoActive: string;
     infoSubtle: string;
-    highlight: string;
-    highlightSubtle: string;
-    accent: string;
-    accentSubtle: string;
-    default: string;
+    infoSubtleHover: string;
+    infoSubtleActive: string;
+    infoOn: string;
+    orangeMain: string;
+    orangeHover: string;
+    orangeActive: string;
+    orangeSubtle: string;
+    orangeSubtleHover: string;
+    orangeSubtleActive: string;
+    orangeOn: string;
+    pinkMain: string;
+    pinkHover: string;
+    pinkActive: string;
+    pinkSubtle: string;
+    pinkSubtleHover: string;
+    pinkSubtleActive: string;
+    pinkOn: string;
+    violetMain: string;
+    violetHover: string;
+    violetActive: string;
+    violetSubtle: string;
+    violetSubtleHover: string;
+    violetSubtleActive: string;
+    violetOn: string;
+    defaultMain: string;
+    defaultHover: string;
+    defaultActive: string;
     defaultSubtle: string;
-    new: string;
-    newSubtle: string;
-    rose: string;
-    roseSubtle: string;
-    yellow: string;
-    yellowSubtle: string;
-    link: string;
+    defaultSubtleHover: string;
+    defaultSubtleActive: string;
+    skeletonPrimary: string;
+    skeletonSecondary: string;
+    linkMain: string;
     linkHover: string;
     linkActive: string;
     linkDisabled: string;
-}
-/**
- * Minimum spacing tokens required by aurora-ds-components
- */
-interface ThemeSpacingContract {
-    none: string;
-    '2xs': string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-    '3xl': string;
-    '4xl': string;
-    '5xl': string;
-}
+};
+
 /**
- * Minimum border radius tokens required by aurora-ds-components
+ * Default breakpoint tokens
  */
-interface ThemeRadiusContract {
-    none: string;
+declare const themeBreakpoints: {
     xs: string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
     '2xl': string;
-    full: string;
-}
+};
+
 /**
- * Minimum font size tokens required by aurora-ds-components
+ * Default font size tokens
  */
-interface ThemeFontSizeContract {
+declare const themeFontSize: {
     '2xs': string;
     xs: string;
     sm: string;
@@ -189,31 +119,34 @@ interface ThemeFontSizeContract {
     '3xl': string;
     '4xl': string;
     '5xl': string;
-}
+};
+
 /**
- * Minimum font weight tokens required by aurora-ds-components
+ * Default font weight tokens
  */
-interface ThemeFontWeightContract {
+declare const themeFontWeight: {
     light: number;
     regular: number;
     medium: number;
     semibold: number;
     bold: number;
-}
+};
+
 /**
- * Minimum line height tokens required by aurora-ds-components
+ * Default line height tokens
  */
-interface ThemeLineHeightContract {
+declare const themeLineHeight: {
     none: number;
     tight: number;
     normal: number;
     relaxed: number;
     loose: number;
-}
+};
+
 /**
- * Minimum opacity tokens required by aurora-ds-components
+ * Default opacity tokens
  */
-interface ThemeOpacityContract {
+declare const themeOpacity: {
     none: number;
     lowest: number;
     low: number;
@@ -221,11 +154,12 @@ interface ThemeOpacityContract {
     high: number;
     higher: number;
     full: number;
-}
+};
+
 /**
- * Minimum shadow tokens required by aurora-ds-components
+ * Default border radius tokens
  */
-interface ThemeShadowsContract {
+declare const themeRadius: {
     none: string;
     xs: string;
     sm: string;
@@ -233,32 +167,56 @@ interface ThemeShadowsContract {
     lg: string;
     xl: string;
     '2xl': string;
-    inner: string;
-    focus: string;
-}
+    full: string;
+};
+
 /**
- * Minimum transition tokens required by aurora-ds-components
+ * Default shadow tokens
  */
-interface ThemeTransitionContract {
-    fast: string;
-    normal: string;
-    slow: string;
-}
+declare const themeShadows: {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+    focus: string;
+    dropSm: string;
+};
+
 /**
- * Minimum breakpoint tokens required by aurora-ds-components
+ * Default spacing tokens
  */
-interface ThemeBreakpointsContract {
+declare const themeSpacing: {
+    none: string;
+    '2xs': string;
     xs: string;
+    'xs+': string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
     '2xl': string;
-}
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+};
+
+/**
+ * Default transition tokens
+ */
+declare const themeTransition: {
+    fast: string;
+    normal: string;
+    slow: string;
+};
+
 /**
- * Minimum z-index tokens required by aurora-ds-components
+ * Default z-index tokens
  */
-interface ThemeZIndexContract {
+declare const themeZIndex: {
     behind: number;
     base: number;
     dropdown: number;
@@ -268,1817 +226,841 @@ interface ThemeZIndexContract {
     popover: number;
     tooltip: number;
     toast: number;
-}
-/**
- * Complete theme contract required by aurora-ds-components
- *
- * Your theme MUST provide at minimum these tokens.
- * You can add custom tokens by extending the sub-contracts.
- *
- * @example
- * ```typescript
- * import type {
- *     ThemeColorContract,
- *     ThemeSpacingContract
- * } from 'aurora-ds-components'
- *
- * // Extend contracts with custom tokens
- * interface MyColors extends ThemeColorContract {
- *     highlight: string
- *     accent: string
- * }
- *
- * interface MySpacing extends ThemeSpacingContract {
- *     '6xl': string
- * }
- *
- * // Define your theme type
- * interface MyTheme {
- *     colors: MyColors
- *     spacing: MySpacing
- *     // ... other required properties
- * }
- * ```
- */
-interface ThemeContract {
-    colors: ThemeColorContract;
-    spacing: ThemeSpacingContract;
-    radius: ThemeRadiusContract;
-    shadows: ThemeShadowsContract;
-    fontSize: ThemeFontSizeContract;
-    fontWeight: ThemeFontWeightContract;
-    lineHeight: ThemeLineHeightContract;
-    zIndex: ThemeZIndexContract;
-    transition: ThemeTransitionContract;
-    opacity: ThemeOpacityContract;
-    breakpoints: ThemeBreakpointsContract;
+};
+
+type Palette = typeof lightPalette;
+type Theme = {
+    colors: Palette;
+    spacing: typeof themeSpacing;
+    radius: typeof themeRadius;
+    shadows: typeof themeShadows;
+    fontSize: typeof themeFontSize;
+    fontWeight: typeof themeFontWeight;
+    lineHeight: typeof themeLineHeight;
+    zIndex: typeof themeZIndex;
+    transition: typeof themeTransition;
+    opacity: typeof themeOpacity;
+    breakpoints: typeof themeBreakpoints;
+};
+
+declare module '@aurora-ds/theme' {
+    interface ThemeRegistry {
+        theme: Theme;
+    }
 }
 
-type IconProps = PropsWithChildren<{
-    /** Icon size based on theme font sizes */
-    size?: keyof ThemeContract['fontSize'];
-    /** Icon stroke/line color from theme */
-    color?: keyof ThemeContract['colors'];
-    /** Icon fill color from theme (for filled icons) */
-    fill?: keyof ThemeContract['colors'];
-    /** Background color from theme */
-    backgroundColor?: keyof ThemeContract['colors'];
-    /** Padding from theme spacing */
-    padding?: keyof ThemeContract['spacing'];
-    /** Border radius from theme */
-    borderRadius?: keyof ThemeContract['radius'];
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this icon */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this icon */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
-}>;
+/** SVG icon component used by button slots and loading state. */
+type ButtonIcon = ComponentType<SVGProps<SVGSVGElement>>;
+/** Visual style of the button surface. */
+type ButtonVariant = 'contained' | 'outlined' | 'text';
+/** Semantic color intent of the button. */
+type ButtonColor = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+/** Size token controlling height, padding and label scale. */
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+    /** Visual style. @default 'contained' */
+    variant?: ButtonVariant;
+    /** Semantic color. @default 'primary' */
+    color?: ButtonColor;
+    /** Size token controlling height, padding and font size. @default 'md' */
+    size?: ButtonSize;
+    /** Explicit width for the button. Accepts numbers (px) or any CSS width value. */
+    width?: number | string;
+    /** Flex grow factor applied to the button container. */
+    flexGrow?: number;
+    /** Flex shrink factor applied to the button container. */
+    flexShrink?: number;
+    /** Show a spinner and disable interaction. */
+    isLoading?: boolean;
+    /** Native button type. @default 'button' */
+    type?: 'button' | 'submit' | 'reset';
+    /** SVG icon component rendered before the label (inherits the button color). */
+    startIcon?: ButtonIcon;
+    /** SVG icon component rendered after the label (inherits the button color). */
+    endIcon?: ButtonIcon;
+};
 
 /**
- * Icon component - Wrapper for SVG icons with theme-aware styling
+ * Theme-aware button built on `createVariants`.
  *
- * **Features:**
- * - Theme-aware sizing via font sizes
- * - Color (stroke) and fill support from theme
- * - Optional background with padding and border radius
- * - Transition animation on color changes
- *
- * **Usage:**
- * ```tsx
- * import { SomeIcon } from 'some-icon-library'
- *
- * // Stroke color only
- * <Icon size="md" color="primary">
- *   <SomeIcon />
- * </Icon>
- *
- * // With fill color
- * <Icon size="md" color="primary" fill="secondary">
- *   <SomeIcon />
- * </Icon>
- * ```
- *
- * **With background:**
- * ```tsx
- * <Icon
- *   size="lg"
- *   color="onPrimary"
- *   fill="onPrimary"
- *   backgroundColor="primary"
- *   padding="sm"
- *   borderRadius="full"
- * >
- *   <SomeIcon />
- * </Icon>
- * ```
+ * @example <Button onClick={save}>Save</Button>
+ * @example <Button variant='outlined' color='error' startIcon={IconRegistry.CloseIcon}>Delete</Button>
+ * @example <Button color='success' isLoading width='100%'>Submitting…</Button>
  */
-declare const Icon: FC<IconProps>;
+declare const Button: FC<ButtonProps>;
 
-type TextProps = PropsWithChildren<{
-    /** Text variant that determines the HTML tag and default styling */
-    variant?: TextVariants;
-    /** Text color from theme */
-    color?: keyof ThemeContract['colors'];
-    /** Font size from theme (overrides variant fontSize if provided) */
-    fontSize?: keyof ThemeContract['fontSize'];
-    /** Font family override (CSS value) */
-    fontFamily?: string;
-    /** Maximum number of lines before truncation with ellipsis */
-    maxLines?: number;
-    /** Add underline text decoration */
-    underline?: boolean;
-    /** Preserve whitespace and line breaks */
-    preserveWhitespace?: boolean;
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this text */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this text */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
-    /** HTML id attribute (used for aria-labelledby / aria-describedby references) */
-    id?: string;
-}>;
+type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> & {
+    /** Ref forwarded to the underlying button element. */
+    ref?: Ref<HTMLButtonElement>;
+    /** SVG icon component to render inside the button. */
+    icon: ButtonIcon;
+    /** Accessible label — required since there is no visible text. */
+    ariaLabel: string;
+    /** Visual style. @default 'contained' */
+    variant?: ButtonVariant;
+    /** Semantic color. @default 'primary' */
+    color?: ButtonColor;
+    /** Size token controlling width, height and padding. @default 'md' */
+    size?: ButtonSize;
+    /** Show a spinner and disable interaction. */
+    isLoading?: boolean;
+    /** Native button type. @default 'button' */
+    type?: 'button' | 'submit' | 'reset';
+};
 
 /**
- * Text component - Renders semantic HTML elements based on variant
- *
- * **Variants:**
- * - `h1-h6`: Heading elements with appropriate styling
- * - `p`: Paragraph element with relaxed line height
- * - `span`: Inline text element (default)
- * - `label`: Label element with medium font weight
+ * Square icon-only button.
+ * `ariaLabel` is mandatory since there is no visible text.
  *
- * **Features:**
- * - Automatic HTML tag selection based on variant
- * - Theme-aware colors
- * - Text truncation with `maxLines`
- * - Underline support
- * - Preserve whitespace with `preserveWhitespace` prop
- * - Bold text with **double asterisks** syntax
+ * @example <IconButton icon={CloseIcon} ariaLabel={t('common.close')} />
+ * @example <IconButton icon={DeleteIcon} ariaLabel={t('actions.delete')} variant='outlined' color='error' />
+ * @example <IconButton icon={SaveIcon} ariaLabel={t('actions.save')} isLoading />
  */
-declare const Text: FC<TextProps>;
+declare const IconButton: FC<IconButtonProps>;
 
-type StatusProps = {
-    /** Text label to display */
-    label?: string;
-    /** Icon to display before the label */
-    icon?: ReactNode;
-    /** Status variant style */
-    variant?: StatusVariant;
-    /** Status color from theme */
-    color?: StatusColor;
-    /** Status size */
-    size?: StatusSize;
-    /** Gap between icon and text (theme spacing key) */
-    gap?: keyof ThemeContract['spacing'];
-    /** Border radius from theme */
-    radius?: keyof ThemeContract['radius'];
-    /** Disabled state */
+type LinkUnderline = 'always' | 'hover' | 'none';
+
+/** SVG icon component, e.g. imported via `?react` or taken from the `IconRegistry`. */
+type LinkIcon = ComponentType<SVGProps<SVGSVGElement>>;
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** React 19 ref prop. */
+    ref?: Ref<HTMLAnchorElement>;
+    /** Controls when the underline is visible. @default 'hover' */
+    underline?: LinkUnderline;
+    /** Open in a new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+    /** Prevent navigation and style as inactive. */
     disabled?: boolean;
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this status */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this status */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
+    /** SVG icon rendered before the text. */
+    startIcon?: LinkIcon;
+    /** SVG icon rendered after the text. */
+    endIcon?: LinkIcon;
 };
 
 /**
- * Status component
- *
- * A compact element for displaying status, tags, or information.
- *
- * **Variants:**
- * - `filled`: Solid background (default)
- * - `outlined`: Border only
+ * Theme-aware anchor element with optional icons and underline control.
+ *
+ * @example <Link href='/about'>About</Link>
+ * @example <Link href='https://example.com' external>External site</Link>
+ * @example <Link href='/profile' underline='always' startIcon={UserIcon}>Profile</Link>
+ * @example <Link href='/terms' underline='none'>Terms</Link>
+ */
+declare const Link: FC<LinkProps>;
+
+/** SVG icon component used by badge icon slots. */
+type BadgeIcon = ComponentType<SVGProps<SVGSVGElement>>;
+/** Visual style of the badge surface. */
+type BadgeVariant = 'filled' | 'outlined' | 'subtle' | 'subtleOutlined';
+/** Semantic color intent of the badge. */
+type BadgeColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'orange' | 'pink' | 'violet';
+/** Size token controlling height, padding and font size. */
+type BadgeSize = 'sm' | 'md' | 'lg';
+
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    ref?: Ref<HTMLSpanElement>;
+    /** Visual style of the badge surface. @default 'subtle' */
+    variant?: BadgeVariant;
+    /** Semantic color intent. @default 'default' */
+    color?: BadgeColor;
+    /** Size token controlling height, padding and font size. @default 'md' */
+    size?: BadgeSize;
+    /** Border radius token from the theme. Defaults to a pill shape. */
+    borderRadius?: keyof Theme['radius'];
+    /** SVG icon component rendered before the label (inherits the badge color). */
+    startIcon?: BadgeIcon;
+    /** SVG icon component rendered after the label (inherits the badge color). */
+    endIcon?: BadgeIcon;
+    /** @deprecated Use `startIcon` instead. */
+    icon?: BadgeIcon;
+    /** Render as a small colored dot indicator — children and icons are ignored. @default false */
+    dot?: boolean;
+};
+
+/**
+ * Compact label used to convey status, category or count information.
  *
- * **Colors:**
- * - `default`, `primary`, `success`, `warning`, `error`, `info`, `highlight`, `accent`, `new`, `rose`, `yellow`
+ * @example <Badge color='success'>Active</Badge>
+ * @example <Badge variant='outlined' color='error'>Critical</Badge>
+ * @example <Badge variant='filled' color='primary' size='sm' startIcon={StarIcon}>Featured</Badge>
+ * @example <Badge dot color='warning' />
  */
-declare const Status: FC<StatusProps>;
+declare const Badge: FC<BadgeProps>;
 
-type AvatarProps = {
-    /** Image source URL */
-    image?: string;
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    /** Content that triggers the tooltip on hover/focus. */
+    children: ReactNode;
+    /** Text displayed inside the tooltip bubble. */
+    label: string;
+    /** Placement of the tooltip relative to the trigger element. @default 'right' */
+    placement?: TooltipPlacement;
+    /** When true, the tooltip will never show. @default false */
+    disabled?: boolean;
     /**
-     * Fallback text to display when no image (initials, name, etc.)
-     * Also used as the image `alt` text for accessibility.
+     * When true, the wrapper renders as `inline-flex` with `auto` width instead of
+     * full-width flex — use this when the trigger is an inline element (e.g. an icon).
+     * @default false
      */
-    label?: string;
+    inline?: boolean;
+    /**
+     * When true, renders a directional arrow on the bubble pointing toward the trigger.
+     * @default false
+     */
+    withArrow?: boolean;
     /**
-     * Click handler. When provided, the avatar becomes interactive
-     * with `role="button"` and keyboard support (Enter/Space).
+     * Maximum width of the tooltip bubble in pixels.
+     * @default 200
      */
-    onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
-    /** Size of the avatar */
-    size?: AvatarSize;
-    /** Text color for the label */
-    color?: string;
-    /** Border color */
-    borderColor?: string;
-    /** Background color */
-    backgroundColor?: string;
+    width?: number;
     /**
-     * Accessibility label for screen readers.
-     * Defaults to `label` prop when not provided.
+     * When true (default), the tooltip is hidden as soon as the trigger is clicked.
+     * Set to `false` on purely informational triggers (e.g. InfoBubble) so the tooltip
+     * stays visible after a tap/click.
+     * @default true
      */
-    ariaLabel?: string;
-    /** Tab index for keyboard navigation (auto-set when onClick is provided) */
-    tabIndex?: number;
-};
+    hideOnClick?: boolean;
+    /**
+     * When true (default), the tooltip is completely disabled on touch/mobile devices
+     * (`pointer: coarse`). Set to `false` for components like InfoBubble that should
+     * still be tappable on mobile.
+     * @default true
+     */
+    disableOnMobile?: boolean;
+}
+
+interface InfoBubbleProps {
+    /** Text displayed inside the tooltip bubble. */
+    label: string;
+    /** Placement of the tooltip relative to the info icon. @default 'top' */
+    placement?: TooltipPlacement;
+    /**
+     * Maximum width of the tooltip bubble in pixels.
+     * @default 200
+     */
+    width?: number;
+    /**
+     * When true, renders a directional arrow on the bubble.
+     * @default true
+     */
+    withArrow?: boolean;
+}
 
 /**
- * Avatar component
- *
- * Displays a user's avatar with an optional image or fallback initials.
+ * InfoBubble
  *
- * **Accessibility:**
- * - When `onClick` is provided, the avatar becomes a focusable button
- *   with keyboard support (Enter/Space activates the click)
- * - Provide `label` or `ariaLabel` for screen readers
- * - For decorative avatars, both can be omitted
+ * An info icon with an attached tooltip. Unlike the regular `Tooltip`, the
+ * tooltip is **not** disabled on mobile — users can tap the icon to read the
+ * information on touch devices.
  *
  * @example
  * ```tsx
- * // Static avatar with image
- * <Avatar image="/user.jpg" label="Jane Doe" />
+ * <InfoBubble label="This field is required for compliance." />
+ * ```
  *
- * // Interactive avatar (clickable)
- * <Avatar label="JD" onClick={() => openProfile()} ariaLabel="Open Jane's profile" />
+ * @example
+ * ```tsx
+ * <InfoBubble label="Detailed explanation" placement="right" withArrow={false} />
  * ```
  */
-declare const Avatar: FC<AvatarProps>;
+declare const InfoBubble: FC<InfoBubbleProps>;
+
+type IconProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+    /** SVG component to render — import with `?react` (e.g. `import MyIcon from './my-icon.svg?react'`). */
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Size token mapped to `theme.fontSize`. Controls both width and height. @default 'md' */
+    size?: keyof Theme['fontSize'];
+    /** Sets CSS `stroke` + `color` on the SVG — use for standard line icons. */
+    strokeColor?: keyof Theme['colors'];
+    /** Sets CSS `fill` only on `fill="currentColor"` paths — leaves `fill="none"` untouched. */
+    fill?: keyof Theme['colors'];
+    /** Wrapper background color. */
+    backgroundColor?: keyof Theme['colors'];
+    /** Wrapper padding token. */
+    padding?: keyof Theme['spacing'];
+    /** Wrapper border-radius token. @default 'none' */
+    borderRadius?: keyof Theme['radius'];
+};
+type IconStyleParams = {
+    size?: keyof Theme['fontSize'];
+    strokeColor?: keyof Theme['colors'];
+    fill?: keyof Theme['colors'];
+    backgroundColor?: keyof Theme['colors'];
+    padding?: keyof Theme['spacing'];
+    borderRadius?: keyof Theme['radius'];
+};
 
 /**
- * AvatarGroup component
+ * Renders an SVG icon inside a theme-aware wrapper.
  *
- * Groups multiple avatars with overlapping display and optional limit.
+ * @example <Icon icon={MenuIcon} size='md' strokeColor='primaryMain' />
+ * @example <Icon icon={CloseIcon} strokeColor='textInverse' backgroundColor='primaryMain' padding='sm' borderRadius='full' />
  */
-declare const AvatarGroup: FC<AvatarGroupProps>;
+declare const Icon: FC<IconProps>;
 
-type AvatarGroupProps = {
-    /** Avatar children */
-    children: ReactNode;
-    /** Maximum number of avatars to display */
-    limit?: number;
-    /** Size of the avatars in the group */
-    size?: AvatarSize;
-};
+/** Shape variant of the Skeleton placeholder. */
+type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+/**
+ * Animation applied to the Skeleton.
+ * - `'shimmer'` — sliding gradient highlight (default).
+ * - `false`     — no animation (useful when `prefers-reduced-motion` is handled manually).
+ */
+type SkeletonAnimation = 'shimmer' | false;
 
-type SkeletonProps = {
-    width: CSSProperties['width'];
-    height: CSSProperties['height'];
-    borderRadius?: keyof ThemeContract['radius'];
+type SkeletonProps = HTMLAttributes<HTMLSpanElement> & {
+    ref?: Ref<HTMLSpanElement>;
+    /** Shape of the placeholder: `'text'` | `'circular'` | `'rectangular'` | `'rounded'`. @default 'rounded' */
+    variant?: SkeletonVariant;
+    /** Loading animation: `'shimmer'` (default) or `false` to disable. */
+    animation?: SkeletonAnimation;
+    /** Explicit width; falls back to `100%` when omitted. */
+    width?: CSSProperties['width'];
+    /** Explicit height; falls back to the variant default when omitted. */
+    height?: CSSProperties['height'];
 };
 
+/**
+ * Block-level placeholder rendered while content is loading.
+ *
+ * @example // Text line
+ * <Skeleton variant='text' width={200} />
+ *
+ * @example // Avatar
+ * <Skeleton variant='circular' width={40} height={40} />
+ *
+ * @example // Card thumbnail
+ * <Skeleton variant='rounded' width='100%' height={160} />
+ *
+ * @example // No animation
+ * <Skeleton variant='rectangular' width='100%' height={80} animation={false} />
+ */
 declare const Skeleton: FC<SkeletonProps>;
 
-type ButtonProps = {
-    /** Button text label */
-    label: string;
-    /** Optional icon to display before label */
-    startIcon?: ReactNode;
-    /** Optional icon to display after label */
-    endIcon?: ReactNode;
-    /** Click handler */
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    /** Visual variant of the button */
-    variant?: ButtonVariants;
-    /** Button type attribute */
-    type?: 'button' | 'submit';
-    /** Active/pressed state */
-    active?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Custom text color (overrides variant color) */
-    textColor?: keyof ThemeContract['colors'];
-    /** Custom backgroundColor (overrides variant backgroundColor) */
-    backgroundColor?: keyof ThemeContract['colors'];
-    /** Custom hover backgroundColor (overrides variant hover backgroundColor) */
-    hoverBackgroundColor?: keyof ThemeContract['colors'];
-    /** Custom active backgroundColor (overrides variant active backgroundColor) */
-    activeBackgroundColor?: keyof ThemeContract['colors'];
-    /** Size of the button */
-    size?: IconButtonSizes;
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this button */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this button */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
-    /** Whether the button is in a pressed/active state (for toggle buttons) */
-    ariaPressed?: boolean;
-    /** Whether the button is in a loading/busy state */
-    ariaBusy?: boolean;
-    /** Whether the button controls an expandable section */
-    ariaExpanded?: boolean;
-    /** Whether the button has a popup (menu, dialog, etc.) */
-    ariaHasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
-    /** ID of the element controlled by this button */
-    ariaControls?: string;
+type TextVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'strong';
+type TextVariantStyle = {
+    /** HTML tag to render. */
+    tag: string;
+    /** CSS font-size value. */
+    fontSize: string;
+    /** CSS font-weight value. */
+    fontWeight: number;
+    /** CSS line-height value. */
+    lineHeight: number;
+};
+
+type TextProps = HTMLAttributes<HTMLElement> & {
+    ref?: Ref<HTMLElement>;
+    /** Semantic variant — determines the rendered HTML tag and baseline styles. @default 'span' */
+    variant?: TextVariants;
+    /** Override the rendered HTML tag while keeping variant styles (e.g. `variant="h1" as="h2"`). */
+    as?: string;
+    /** Theme color token — e.g. `'textPrimary'`, `'errorMain'`, `'linkHover'`. @default 'inherit' */
+    color?: keyof Theme['colors'];
+    /** Font size token — overrides the variant default. */
+    fontSize?: keyof Theme['fontSize'];
+    /** Font weight token — overrides the variant default. */
+    fontWeight?: keyof Theme['fontWeight'];
+    /** Line height token — overrides the variant default. */
+    lineHeight?: keyof Theme['lineHeight'];
+    /** CSS font-family value — use sparingly; prefer theme tokens. */
+    fontFamily?: string;
+    /** Maximum lines before ellipsis truncation. Uses `nowrap` for 1, `-webkit-line-clamp` for n > 1. */
+    maxLines?: number;
+    /** Truncate to one line with ellipsis. Shorthand for `maxLines={1}` — takes precedence. */
+    truncate?: boolean;
+    /** Underline text decoration. */
+    underline?: boolean;
+    /** Line-through text decoration. */
+    strikethrough?: boolean;
+    /** Italic font style. */
+    italic?: boolean;
+    /** Prevent text wrapping (`white-space: nowrap`). Ignored when `truncate` or `maxLines` is set. */
+    noWrap?: boolean;
+    /** Preserve whitespace and line breaks (`white-space: pre-wrap`). */
+    preserveWhitespace?: boolean;
+    /** Associates a `<label>` with an input — only meaningful when `variant` or `as` is `"label"`. */
+    htmlFor?: string;
+    /** Explicit CSS width applied as a style property (not an HTML attribute). */
+    width?: CSSProperties['width'];
+    /** CSS `text-transform` value. */
+    textTransform?: CSSProperties['textTransform'];
+    /** CSS `letter-spacing` value. */
+    letterSpacing?: CSSProperties['letterSpacing'];
+    /** CSS `text-align` value. */
+    textAlign?: CSSProperties['textAlign'];
+};
+type TextStyleParams = {
+    variant?: TextVariants;
+    color?: keyof Theme['colors'];
+    fontSize?: keyof Theme['fontSize'];
+    fontWeight?: keyof Theme['fontWeight'];
+    lineHeight?: keyof Theme['lineHeight'];
+    fontFamily?: string;
+    underline?: boolean;
+    strikethrough?: boolean;
+    italic?: boolean;
+    noWrap?: boolean;
+    preserveWhitespace?: boolean;
+    width?: CSSProperties['width'];
+    textTransform?: CSSProperties['textTransform'];
+    letterSpacing?: CSSProperties['letterSpacing'];
+    textAlign?: CSSProperties['textAlign'];
 };
 
 /**
- * Button component
+ * Renders a semantic HTML text element with theme-aware styling.
  *
- * **Variants:**
- * - `contained`: Solid background button (default)
- * - `outlined`: Border only button
- * - `text`: Text only button without background
- * - `destructive`: Danger/delete action button
- *
- * **Accessibility:**
- * - Use `ariaLabel` when the button has no visible text or the label is unclear
- * - Use `ariaPressed` for toggle buttons to indicate their state
- * - Use `ariaBusy` when the button triggers an async action
- * - Use `ariaExpanded` when the button controls a collapsible section
- * - Use `ariaControls` to reference the controlled element
+ * @example <Text variant='h1' color='text.primary'>Title</Text>
+ * @example <Text variant='p' maxLines={2}>Long content…</Text>
+ * @example <Text variant='h1' as='h2'>h1 styles, h2 semantics</Text>
+ * @example <Text variant='label' htmlFor='email'>Email</Text>
+ * @example <Text>Hello **world**!</Text>  // → Hello <strong>world</strong>!
  */
-declare const Button: FC<ButtonProps>;
+declare const Text: FC<TextProps>;
 
-type IconButtonProps = {
-    /** IconButton icon */
-    icon?: ReactNode;
-    /** Click handler */
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    /** Visual variant of the button */
-    variant?: IconButtonVariants;
-    /** Button type attribute */
-    type?: 'button' | 'submit';
-    /** Active/pressed state */
-    active?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Custom text/icon color (overrides variant color) */
-    textColor?: keyof ThemeContract['colors'];
-    /** Custom backgroundColor (overrides variant backgroundColor) */
-    backgroundColor?: keyof ThemeContract['colors'];
-    /** Custom hover backgroundColor (overrides variant hover backgroundColor) */
-    hoverBackgroundColor?: keyof ThemeContract['colors'];
-    /** Custom active backgroundColor (overrides variant active backgroundColor) */
-    activeBackgroundColor?: keyof ThemeContract['colors'];
-    /** Size of the icon button */
-    size?: IconButtonSizes;
-    /** Accessibility label for screen readers (strongly recommended for icon-only buttons) */
-    ariaLabel?: string;
-    /** ID of element that labels this button */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this button */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
-    /** Whether the button is in a pressed/active state (for toggle buttons) */
-    ariaPressed?: boolean;
-    /** Whether the button is in a loading/busy state */
-    ariaBusy?: boolean;
-    /** Whether the button controls an expandable section */
-    ariaExpanded?: boolean;
-    /** Whether the button has a popup (menu, dialog, etc.) */
-    ariaHasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
-    /** ID of the element controlled by this button */
-    ariaControls?: string;
+type FormProps = {
+    /** Form content — typically form field components. */
+    children: ReactNode;
+    /** Called when the form is submitted. Receives the native submit event. */
+    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+    /** Accessible name for the form. */
+    'aria-label'?: string;
+    /** Id of an element that labels the form. */
+    'aria-labelledby'?: string;
 };
 
 /**
- * IconButton component
- *
- * A button that displays only an icon without text.
- *
- * **⚠️ Accessibility:** Always provide an `ariaLabel` for icon-only buttons
- * so screen readers can describe the action.
+ * Thin wrapper around `<form>`. Prevents the default browser submit and
+ * delegates to the `onSubmit` callback.
  *
  * @example
- * ```tsx
- * <IconButton icon={<CloseIcon />} ariaLabel="Close dialog" onClick={onClose} />
- * ```
+ * <Form onSubmit={handleSubmit}>
+ *   <TextField label="Email" />
+ *   <Button type="submit">Send</Button>
+ * </Form>
  */
-declare const IconButton: FC<IconButtonProps>;
+declare const Form: FC<FormProps>;
 
-type ButtonToggleProps = {
-    /** Value to identify this toggle button */
-    value: string;
-    /** Button content (icon or text) */
-    children: ReactNode;
-    /** Click handler */
-    onClick?: (e: MouseEvent<HTMLButtonElement>, value: string) => void;
-    /** Active/pressed state */
-    active?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Custom text/icon color when active (default: primary) */
-    activeTextColor?: keyof ThemeContract['colors'];
-    /** Custom text/icon color when inactive (default: textSecondary) */
-    inactiveTextColor?: keyof ThemeContract['colors'];
-    /** Custom text/icon color (overrides activeTextColor and inactiveTextColor) */
-    textColor?: keyof ThemeContract['colors'];
-    /** Custom backgroundColor (overrides variant backgroundColor) */
-    backgroundColor?: keyof ThemeContract['colors'];
-    /** Custom hover backgroundColor (overrides variant hover backgroundColor) */
-    hoverBackgroundColor?: keyof ThemeContract['colors'];
-    /** Custom active backgroundColor (overrides variant active backgroundColor) */
-    activeBackgroundColor?: keyof ThemeContract['colors'];
-    /** Size of the button */
-    size?: IconButtonSizes;
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this button */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this button */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
+type SwitchSize = 'sm' | 'md' | 'lg';
+type SwitchColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';
+
+type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> & {
+    ref?: Ref<HTMLInputElement>;
+    /** Visible label rendered next to the switch. */
+    label?: string;
+    /** Size variant. @default 'md' */
+    size?: SwitchSize;
+    /** Semantic color applied to the checked track. @default 'primary' */
+    color?: SwitchColor;
 };
 
 /**
- * ButtonToggle component
+ * Accessible toggle switch built on `<input type="checkbox" role="switch">`.
  *
- * A toggle button similar to IconButton but with active state.
- * Uses only the 'text' variant style.
- * Designed to be used within ButtonToggleGroup.
+ * Supports controlled (`checked` + `onChange`) and uncontrolled (`defaultChecked`) modes.
  *
- * **Colors:**
- * - Active: primary (default) - customizable via activeTextColor
- * - Inactive: textSecondary (default) - customizable via inactiveTextColor
+ * @example <Switch label='Enable notifications' defaultChecked />
+ * @example <Switch checked={isEnabled} onChange={(e) => setEnabled(e.target.checked)} color='success' size='lg' />
  */
-declare const ButtonToggle: FC<ButtonToggleProps>;
-
-type ButtonToggleGroupProps = {
-    /** Current selected value */
-    value?: string | null;
-    /** Change handler for value selection */
-    onChange?: (value: string | null) => void;
-    /** Children ButtonToggle components */
-    children: ReactNode;
-    /** If true, only one button can be active at a time */
-    exclusive?: boolean;
-    /** If true, at least one button must always be active (clicking the active button won't deselect it) */
-    required?: boolean;
-    /** Size of all buttons in the group */
-    size?: IconButtonSizes;
-    /** Custom text/icon color when active (default: primary) - applied to all children */
-    activeTextColor?: keyof ThemeContract['colors'];
-    /** Custom text/icon color when inactive (default: textSecondary) - applied to all children */
-    inactiveTextColor?: keyof ThemeContract['colors'];
-    /** Accessibility label for the group */
-    ariaLabel?: string;
-    /** ARIA role for the group */
-    role?: string;
+declare const Switch: FC<SwitchProps>;
+
+/** Size variant of the TextField. */
+type TextFieldSize = 'sm' | 'md' | 'lg';
+/** Semantic status of the TextField, affecting border and helper text color. */
+type TextFieldStatus = 'default' | 'error' | 'success' | 'warning';
+
+type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    ref?: Ref<HTMLInputElement>;
+    /** Visible label rendered above the field. */
+    label?: string;
+    /** Helper text or validation message rendered below the field. */
+    helperText?: string;
+    /** Size variant controlling height, padding and font size. @default 'md' */
+    size?: TextFieldSize;
+    /** Semantic status affecting border and helper text color. @default 'default' */
+    status?: TextFieldStatus;
+    /** SVG icon component rendered on the left inside the field. */
+    startIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * Element rendered on the right inside the field (e.g. a clear button, unit label).
+     * When `type` is `'password'`, the visibility toggle is always appended after this.
+     */
+    endAction?: ReactNode;
 };
 
 /**
- * ButtonToggleGroup component
+ * Full-featured text input with label, helper text, icons and end actions.
  *
- * Groups multiple ButtonToggle components together in a row without gaps.
- * Manages exclusive selection (only one button can be active at a time).
+ * Supports all native input types. When `type` is `'password'`, a visibility
+ * toggle is automatically injected as an end action.
  *
- * **Default Colors:**
- * - Active buttons: primary
- * - Inactive buttons: textSecondary
+ * @example <TextField label="Email" placeholder="you@example.com" />
+ * @example <TextField label="Password" type="password" helperText="Min. 8 characters." />
+ * @example <TextField label="Name" status="error" helperText="This field is required." />
+ * @example <TextField label="Search" startIcon={SearchIcon} endAction={<ClearButton />} />
  */
-declare const ButtonToggleGroup: FC<ButtonToggleGroupProps>;
-
-type FormProps = {
-    /** Form content (inputs, buttons, etc.) */
-    children: ReactNode;
-    /** Callback fired when the form is submitted (preventDefault is called automatically) */
-    onSubmit?: (e: FormEvent) => void;
-    /** Accessibility label for the form */
-    ariaLabel?: string;
-};
-
-declare const _default$3: react.NamedExoticComponent<FormProps>;
+declare const TextField: FC<TextFieldProps>;
 
-type InputProps = {
-    /** The value of the input */
+/** An option in the Select dropdown. */
+type SelectOption = {
+    /** The value submitted or returned in onChange. */
     value: string;
-    /** Callback fired when the value changes */
-    onChange: (value: string) => void;
-    /** Callback fired when the input receives focus */
-    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
-    /** Callback fired when the input loses focus */
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-    /** Callback fired when the input is clicked */
-    onClick?: (event: MouseEvent<HTMLInputElement>) => void;
-    /** Label displayed above the input */
-    label?: string;
-    /** Whether the field is mandatory (displays an asterisk next to the label) */
-    mandatory?: boolean;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Whether the input is disabled */
+    /** Display label shown in the trigger and menu. */
+    label: string;
+    /** Optional icon rendered before the label in the menu item. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Whether the option cannot be selected. */
     disabled?: boolean;
-    /** Input type */
-    type?: 'text' | 'password' | 'email' | 'number';
-    /** Accessibility label (defaults to `label` if not provided) */
-    ariaLabel?: string;
-    /** Icon to display before the input */
-    startIcon?: ReactNode;
-    /** Icon to display after the input */
-    endIcon?: ReactNode;
-    /** Custom width for the input */
-    width?: CSSProperties['width'];
     /**
-     * Error message to display below the input.
-     * When provided, `aria-invalid="true"` and `aria-errormessage` are set automatically.
+     * Optional group key. Options sharing the same group key are visually grouped together.
+     * A MenuGroup with the group key as label is automatically created.
      */
-    error?: string;
-    /** Unique HTML id for the input element (required when using `error`) */
-    id?: string;
+    group?: string;
 };
 
-declare const _default$2: react.MemoExoticComponent<react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>>;
-
-type TextAreaProps = {
-    /** The value of the textarea */
-    value: string;
-    /** Callback fired when the value changes */
-    onChange: (value: string) => void;
-    /** Callback fired when the textarea receives focus */
-    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
-    /** Callback fired when the textarea loses focus */
-    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
-    /** Label displayed above the textarea */
+type SelectProps = {
+    ref?: Ref<HTMLButtonElement>;
+    /** Currently selected value (controlled mode). */
+    value?: string;
+    /** Default value for uncontrolled mode. */
+    defaultValue?: string;
+    /** Called with the new value when the selection changes. */
+    onChange?: (value: string) => void;
+    /** List of options. */
+    options?: SelectOption[];
+    /** Label rendered above the trigger. */
     label?: string;
-    /** Whether the field is mandatory (displays an asterisk next to the label) */
-    mandatory?: boolean;
-    /** Placeholder text */
+    /** Helper text or validation message rendered below the trigger. */
+    helperText?: string;
+    /** Placeholder shown when no option is selected. */
     placeholder?: string;
-    /** Whether the textarea is disabled */
+    /** Size variant. @default 'md' */
+    size?: TextFieldSize;
+    /** Semantic status affecting border and helper text color. @default 'default' */
+    status?: TextFieldStatus;
+    /** Whether the select is disabled. */
     disabled?: boolean;
-    /** Accessibility label (defaults to `label` if not provided) */
-    ariaLabel?: string;
-    /** Custom width for the textarea */
-    width?: CSSProperties['width'];
-    /** Minimum number of visible text lines (auto-expands with content) */
-    minRows?: number;
-    /** Maximum number of visible text lines (adds scroll when exceeded) */
-    maxRows?: number;
-    /**
-     * Error message to display below the textarea.
-     * When provided, `aria-invalid="true"` and `aria-errormessage` are set automatically.
-     */
-    error?: string;
-    /** Unique HTML id for the textarea element (required when using `error`) */
+    /** Whether the field is required. */
+    required?: boolean;
+    /** Fixed width for the select. Defaults to 100% of its container. */
+    width?: string | number;
+    /** HTML id for the trigger button. */
     id?: string;
 };
 
-declare const _default$1: react.MemoExoticComponent<react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>>;
+declare const Select: FC<SelectProps>;
 
-type SelectProps = {
-    /**
-     * The options to display in the select dropdown
-     */
-    options: SelectOption[];
-    /**
-     * The currently selected value (null to show placeholder)
-     */
-    value: string | number | null;
-    /**
-     * Callback when selection changes
-     */
-    onChange: (value: string | number | null) => void;
-    /**
-     * Label displayed above the select
-     */
-    label?: string;
-    /**
-     * Whether the field is mandatory (displays an asterisk next to the label)
-     */
-    mandatory?: boolean;
-    /**
-     * Placeholder text when no option is selected
-     */
-    placeholder?: string;
-    /**
-     * Whether the select is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Width of the select
-     */
-    width?: string | number;
-    /**
-     * Error message to display below the select.
-     * When provided, `aria-invalid="true"` and `aria-errormessage` are set automatically.
-     */
-    error?: string;
-    /**
-     * Unique HTML id for the select trigger (required when using `error`)
-     */
-    id?: string;
-    /**
-     * Accessibility label for screen readers (defaults to `label`)
-     */
-    ariaLabel?: string;
-};
-
-/**
- * Select component that uses Menu for dropdown
- *
- * **Accessibility:**
- * - Uses `role="combobox"` with `aria-expanded` and `aria-haspopup="listbox"`
- * - Keyboard support: Enter/Space opens, Escape closes
- * - When `error` is provided, `aria-invalid="true"` and `aria-errormessage` are set
- * - `mandatory` adds `aria-required="true"`
- *
- * @example
- * ```tsx
- * <Select
- *   options={[{ value: 'fr', label: 'France' }]}
- *   value={country}
- *   onChange={setCountry}
- *   label="Country"
- *   mandatory
- *   error={countryError}
- * />
- * ```
- */
-declare const Select: FC<SelectProps>;
-
-type DateFormat = 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd';
-type DatePickerProps = {
-    /** The selected date */
-    value?: Date | null;
-    /** Callback fired when the date changes */
-    onChange: (date: Date | null) => void;
-    /** Label displayed above the date picker */
-    label?: string;
-    /** Whether the field is mandatory (displays an asterisk next to the label) */
-    mandatory?: boolean;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Whether the date picker is disabled */
-    disabled?: boolean;
-    /** Custom width for the date picker */
-    width?: string | number;
-    /** Minimum selectable date */
-    minDate?: Date | null;
-    /** Maximum selectable date */
-    maxDate?: Date | null;
-    /** Date format for display and input (default: 'dd/MM/yyyy') */
-    dateFormat?: DateFormat;
-    /** Locale for month/year display (default: 'fr-FR') */
-    locale?: string;
-};
-
-declare const _default: react.NamedExoticComponent<DatePickerProps>;
-
-/**
- * SVG icon component type (compatible with Aurora-DS Icon)
- */
-type SvgIconComponent = ComponentType<SVGProps<SVGSVGElement>>;
-type FilePickerProps = {
-    /**
-     * Label for the input
-     */
-    label?: string;
-    /**
-     * Accepted file types (MIME types)
-     * @example 'image/jpeg,image/png,image/webp'
-     * @example 'application/pdf'
-     * @example '.jpg,.png,.pdf'
-     */
-    accept?: string;
-    /**
-     * Preview content to display when a file is selected
-     * Can be a URL string for images or a ReactNode for custom preview
-     */
-    preview?: string | ReactNode | null;
-    /**
-     * Whether the preview is an image URL
-     * @default true when preview is a string
-     */
-    previewIsImage?: boolean;
-    /**
-     * Alt text for image preview
-     */
-    previewAlt?: string;
-    /**
-     * Error message to display
-     */
-    error?: string | null;
-    /**
-     * Callback when a file is selected
-     */
-    onSelect: (file: File | null) => void;
-    /**
-     * Callback when the file is cleared
-     */
-    onClear: () => void;
-    /**
-     * Whether the input is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Placeholder text shown in the dropzone
-     */
-    placeholder?: string;
-    /**
-     * Hint text shown below the placeholder (e.g., accepted formats)
-     */
-    hint?: string;
-    /**
-     * Icon component to display in the dropzone
-     * Should be an SVG component (e.g., from @resources/Icons)
-     */
-    icon?: SvgIconComponent;
-    /**
-     * Icon component to display on the clear button
-     * Should be an SVG component (e.g., from @resources/Icons)
-     */
-    clearIcon?: SvgIconComponent;
-    /**
-     * Aria label for the clear button
-     */
-    clearAriaLabel?: string;
-    /**
-     * Width of the FilePicker container
-     * @example '400px'
-     * @example '100%'
-     */
-    width?: CSSProperties['width'];
-    /**
-     * Height of the dropzone (when no preview)
-     * @example '200px'
-     * @default '120px'
-     */
-    dropzoneHeight?: CSSProperties['height'];
-    /**
-     * Max height of the preview image
-     * @example '300px'
-     * @default '200px'
-     */
-    previewMaxHeight?: CSSProperties['maxHeight'];
-    /**
-     * Max width of the preview image
-     * @example '400px'
-     * @default '100%'
-     */
-    previewMaxWidth?: CSSProperties['maxWidth'];
-    /**
-     * Object fit for the preview image
-     * @default 'cover'
-     */
-    previewObjectFit?: CSSProperties['objectFit'];
+type BoxProps = HTMLAttributes<HTMLDivElement> & BoxStyleProps & {
+    ref?: Ref<HTMLDivElement>;
 };
-
-/**
- * Generic file picker component with drag-and-drop style interface.
- * Supports custom preview, icons, and styling for use in external libraries.
- *
- * @example
- * ```tsx
- * // Basic usage with image
- * <FilePicker
- *     label="Upload Image"
- *     accept="image/*"
- *     preview={imagePreview}
- *     placeholder="Click to upload"
- *     hint="JPEG, PNG or WebP"
- *     icon={PlusIcon}
- *     clearIcon={TrashIcon}
- *     onSelect={handleSelect}
- *     onClear={handleClear}
- * />
- * ```
- */
-declare const FilePicker: FC<FilePickerProps>;
-
-type ImagePickerProps = {
-    /**
-     * Label for the input
-     */
-    label?: string;
-    /**
-     * Preview URL of the selected image
-     */
-    preview: string | null;
-    /**
-     * Error message to display
-     */
-    error?: string | null;
-    /**
-     * Callback when a file is selected
-     */
-    onSelect: (file: File | null) => void;
-    /**
-     * Callback when the image is cleared
-     */
-    onClear: () => void;
-    /**
-     * Whether the input is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Placeholder text shown in the dropzone
-     * @default 'Click to upload an image'
-     */
-    placeholder?: string;
-    /**
-     * Hint text shown below the placeholder
-     * @default 'JPEG, PNG or WebP'
-     */
-    hint?: string;
-    /**
-     * Alt text for image preview
-     * @default 'Image preview'
-     */
-    previewAlt?: string;
-    /**
-     * Aria label for the clear button
-     * @default 'Remove image'
-     */
-    clearAriaLabel?: string;
-    /**
-     * Width of the ImagePicker container
-     * @example '400px'
-     * @example '100%'
-     */
-    width?: CSSProperties['width'];
-    /**
-     * Height of the dropzone (when no preview)
-     * @example '200px'
-     * @default '120px'
-     */
-    dropzoneHeight?: CSSProperties['height'];
-    /**
-     * Max height of the preview image
-     * @example '300px'
-     * @default '200px'
-     */
-    previewMaxHeight?: CSSProperties['maxHeight'];
-    /**
-     * Max width of the preview image
-     * @example '400px'
-     * @default '100%'
-     */
-    previewMaxWidth?: CSSProperties['maxWidth'];
-    /**
-     * Object fit for the preview image
-     * @default 'cover'
-     */
-    previewObjectFit?: CSSProperties['objectFit'];
-};
-
-/**
- * Image picker component built on top of the generic FilePicker.
- * Pre-configured for image uploads with JPEG, PNG, and WebP support.
- *
- * @example
- * ```tsx
- * <ImagePicker
- *     label="Profile Picture"
- *     preview={imageUrl}
- *     onSelect={handleImageSelect}
- *     onClear={handleImageClear}
- * />
- * ```
- */
-declare const ImagePicker: FC<ImagePickerProps>;
-
-type BoxProps = {
-    /** Box children elements */
-    children?: ReactNode;
-    /** Width of the box */
+/** Style props accepted by Box — token-aware for spacing/color/radius/shadow/zIndex. */
+type BoxStyleProps = {
+    display?: CSSProperties['display'];
     width?: CSSProperties['width'];
-    /** Height of the box */
     height?: CSSProperties['height'];
-    /** Minimum width */
     minWidth?: CSSProperties['minWidth'];
-    /** Minimum height */
-    minHeight?: CSSProperties['minHeight'];
-    /** Maximum width */
     maxWidth?: CSSProperties['maxWidth'];
-    /** Maximum height */
+    minHeight?: CSSProperties['minHeight'];
     maxHeight?: CSSProperties['maxHeight'];
-    /** Padding inside the box (theme spacing key) */
-    padding?: keyof ThemeContract['spacing'];
-    /** Margin around the box (theme spacing key) */
-    margin?: keyof ThemeContract['spacing'];
-    /** Background color of the box */
-    backgroundColor?: keyof ThemeContract['colors'];
-    /** Border radius of the box */
-    radius?: keyof ThemeContract['radius'];
-    /** Display type */
-    display?: CSSProperties['display'];
-    /** Position type */
+    padding?: keyof Theme['spacing'];
+    paddingTop?: keyof Theme['spacing'];
+    paddingRight?: keyof Theme['spacing'];
+    paddingBottom?: keyof Theme['spacing'];
+    paddingLeft?: keyof Theme['spacing'];
+    /** Horizontal padding (left + right). */
+    px?: keyof Theme['spacing'];
+    /** Vertical padding (top + bottom). */
+    py?: keyof Theme['spacing'];
+    margin?: keyof Theme['spacing'];
+    marginTop?: keyof Theme['spacing'];
+    marginRight?: keyof Theme['spacing'];
+    marginBottom?: keyof Theme['spacing'];
+    marginLeft?: keyof Theme['spacing'];
+    /** Horizontal margin (left + right). */
+    mx?: keyof Theme['spacing'];
+    /** Vertical margin (top + bottom). */
+    my?: keyof Theme['spacing'];
+    gap?: keyof Theme['spacing'];
+    rowGap?: keyof Theme['spacing'];
+    columnGap?: keyof Theme['spacing'];
+    flexDirection?: CSSProperties['flexDirection'];
+    flexWrap?: CSSProperties['flexWrap'];
+    alignItems?: CSSProperties['alignItems'];
+    justifyContent?: CSSProperties['justifyContent'];
+    gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
+    gridTemplateRows?: CSSProperties['gridTemplateRows'];
+    flex?: CSSProperties['flex'];
+    flexGrow?: CSSProperties['flexGrow'];
+    flexShrink?: CSSProperties['flexShrink'];
+    flexBasis?: CSSProperties['flexBasis'];
+    alignSelf?: CSSProperties['alignSelf'];
+    justifySelf?: CSSProperties['justifySelf'];
+    gridColumn?: CSSProperties['gridColumn'];
+    gridRow?: CSSProperties['gridRow'];
+    order?: CSSProperties['order'];
     position?: CSSProperties['position'];
-    /** Top position */
     top?: CSSProperties['top'];
-    /** Right position */
     right?: CSSProperties['right'];
-    /** Bottom position */
     bottom?: CSSProperties['bottom'];
-    /** Left position */
     left?: CSSProperties['left'];
-    /** Overflow behavior */
+    inset?: CSSProperties['inset'];
+    zIndex?: keyof Theme['zIndex'];
     overflow?: CSSProperties['overflow'];
-    /** Overflow X behavior */
     overflowX?: CSSProperties['overflowX'];
-    /** Overflow Y behavior */
     overflowY?: CSSProperties['overflowY'];
-    /** Border color */
-    borderColor?: keyof ThemeContract['colors'];
-    /** Border width */
-    borderWidth?: string;
-    /** Flex direction (when display is flex) */
-    flexDirection?: CSSProperties['flexDirection'];
-    /** Align items (when display is flex) */
-    alignItems?: CSSProperties['alignItems'];
-    /** Justify content (when display is flex) */
-    justifyContent?: CSSProperties['justifyContent'];
-    /** Gap between children (theme spacing key) */
-    gap?: keyof ThemeContract['spacing'];
-    /** Flex wrap */
-    flexWrap?: CSSProperties['flexWrap'];
-    /** Flex grow */
-    flexGrow?: CSSProperties['flexGrow'];
-    /** Flex shrink */
-    flexShrink?: CSSProperties['flexShrink'];
-    /** Flex basis */
-    flexBasis?: CSSProperties['flexBasis'];
-    /** Z-index */
-    zIndex?: CSSProperties['zIndex'];
-    /** Opacity */
-    opacity?: CSSProperties['opacity'];
-    /** Cursor */
+    backgroundColor?: keyof Theme['colors'];
+    color?: keyof Theme['colors'];
+    borderRadius?: keyof Theme['radius'];
+    boxShadow?: keyof Theme['shadows'];
+    border?: CSSProperties['border'];
+    borderColor?: keyof Theme['colors'];
+    borderWidth?: CSSProperties['borderWidth'];
+    borderStyle?: CSSProperties['borderStyle'];
+    textAlign?: CSSProperties['textAlign'];
     cursor?: CSSProperties['cursor'];
-    /** Box shadow */
-    shadow?: keyof ThemeContract['shadows'];
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this box */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this box */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
-    /** HTML id attribute */
-    id?: string;
-    /** onClick handler */
-    onClick?: () => void;
-    /** onMouseEnter handler */
-    onMouseEnter?: () => void;
-    /** onMouseLeave handler */
-    onMouseLeave?: () => void;
-    /** Drag over event handler */
-    onDragOver?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag leave event handler */
-    onDragLeave?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drop event handler */
-    onDrop?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag start event handler */
-    onDragStart?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag end event handler */
-    onDragEnd?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag enter event handler */
-    onDragEnter?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Whether the element is draggable */
-    draggable?: boolean;
+    opacity?: CSSProperties['opacity'];
 };
 
 /**
- * Box component
+ * A plain `div` enriched with convenient, token-aware style props.
  *
- * A versatile container component that acts as a flexible div with extensive styling props.
- * Perfect for layout composition, spacing control, and creating custom containers.
+ * Spacing / color / radius / shadow / z-index props accept theme tokens only
+ * (e.g. `padding='md'`, `backgroundColor='surfacePaper'`).
+ * Dimensions and position offsets accept any CSS value.
+ * All native `div` attributes are forwarded, and `ref` points to the element.
  *
- * **Common use cases:**
- * - Layout containers with specific dimensions
- * - Spacing and positioning elements
- * - Creating flexible layouts with flexbox
- * - Wrapping content with background colors or borders
- *
- * @example
- * ```tsx
- * <Box width="300px" height="200px" padding="md" backgroundColor="surface">
- *   Content here
- * </Box>
- * ```
+ * @example <Box padding='md' backgroundColor='surfacePaper' borderRadius='lg'>Content</Box>
+ * @example <Box display='flex' gap='sm' alignItems='center'>…</Box>
  */
 declare const Box: FC<BoxProps>;
 
-type StackProps = {
-    /** Stack children elements */
-    children: ReactNode;
-    /** Flex direction of the stack */
-    direction?: CSSProperties['flexDirection'];
-    /** Gap between children (theme spacing or CSS value) */
-    gap?: keyof ThemeContract['spacing'];
-    /** Width of the stack container */
-    width?: CSSProperties['width'];
-    /** Height of the stack container */
-    height?: CSSProperties['height'];
-    /** Alignment of items on the cross axis */
-    align?: CSSProperties['alignItems'];
-    /** Justification of items on the main axis */
-    justify?: CSSProperties['justifyContent'];
-    /** Whether items should wrap */
-    wrap?: CSSProperties['flexWrap'];
-    /** Padding inside the stack */
-    padding?: keyof ThemeContract['spacing'];
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this stack */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this stack */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+    /** Visual style. @default 'elevated' */
+    variant?: CardVariant;
+    /** Inner padding using a spacing token. @default 'none' */
+    padding?: keyof Theme['spacing'];
 };
 
-/**
- * Stack component
- *
- * A flexbox container for laying out children in a row or column.
- *
- * **Direction:**
- * - `row`: Horizontal layout (default)
- * - `column`: Vertical layout
- */
-declare const Stack: FC<StackProps>;
-
-type CardProps = {
-    /** Card children elements */
-    children: ReactNode;
-    /** Flex direction of the card content */
-    direction?: CSSProperties['flexDirection'];
-    /** Padding inside the card (theme spacing key) */
-    padding?: keyof ThemeContract['spacing'];
-    /** Width of the card */
-    width?: CSSProperties['width'];
-    /** Height of the card */
-    height?: CSSProperties['height'];
-    /** Maximum height of the card */
-    maxHeight?: CSSProperties['maxHeight'];
-    /** Gap between children (theme spacing key) */
-    gap?: keyof ThemeContract['spacing'];
-    /** Border radius of the card */
-    radius?: keyof ThemeContract['radius'];
-    /** Shadow depth of the card */
-    shadow?: keyof ThemeContract['shadows'];
-    /** Alignment of items on the cross axis */
-    align?: CSSProperties['alignItems'];
-    /** Justification of items on the main axis */
-    justify?: CSSProperties['justifyContent'];
-    /** Background color of the card */
-    backgroundColor?: keyof ThemeContract['colors'];
-    /** Border color of the card */
-    borderColor?: keyof ThemeContract['colors'];
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this card */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this card */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
-    /** Drag over event handler */
-    onDragOver?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag leave event handler */
-    onDragLeave?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drop event handler */
-    onDrop?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag start event handler */
-    onDragStart?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag end event handler */
-    onDragEnd?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag enter event handler */
-    onDragEnter?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Whether the element is draggable */
-    draggable?: boolean;
+type CardHeaderProps = {
+    /** Main label of the card header. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Optional actions rendered on the right side (e.g. buttons, IconButton). */
+    actions?: ReactNode;
 };
 
-/**
- * Card component
- *
- * A container component with a background, border radius, and optional shadow.
- * Uses a Stack layout internally for organizing children.
- *
- * **Direction:**
- * - `column`: Vertical layout (default)
- * - `row`: Horizontal layout
- */
-declare const Card: FC<CardProps>;
-
-type GridProps = {
-    /** Grid children elements */
+type CardBodyProps = {
+    /** Card body content. */
     children: ReactNode;
-    /** Number of columns. Acts as max columns when minChildWidth is set for responsive behavior. */
-    columns?: number;
-    /** Number of rows. */
-    rows?: number;
-    /** Gap between columns (theme spacing key) */
-    columnGap?: keyof ThemeContract['spacing'];
-    /** Gap between rows (theme spacing key) */
-    rowGap?: keyof ThemeContract['spacing'];
-    /** Width of the grid container */
-    width?: CSSProperties['width'];
-    /** Height of the grid container */
-    height?: CSSProperties['height'];
-    /** Minimum height of the grid container */
-    minHeight?: CSSProperties['minHeight'];
-    /** Alignment of items within their grid area (cross axis) */
-    alignItems?: CSSProperties['alignItems'];
-    /** Justification of items within their grid area (main axis) */
-    justifyItems?: CSSProperties['justifyItems'];
-    /** Alignment of the entire grid within its container (cross axis) */
-    alignContent?: CSSProperties['alignContent'];
-    /** Justification of the entire grid within its container (main axis) */
-    justifyContent?: CSSProperties['justifyContent'];
-    /** Padding inside the grid */
-    padding?: keyof ThemeContract['spacing'];
-    /** Minimum width for each grid child. Enables responsive auto-fill behavior. */
-    minChildWidth?: CSSProperties['width'];
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this grid */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this grid */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
+    /** Vertical padding using a spacing token. @default 'md' */
+    py?: keyof Theme['spacing'];
+    /** Horizontal padding using a spacing token. @default 'md' */
+    px?: keyof Theme['spacing'];
 };
 
-/**
- * Grid component
- *
- * A CSS Grid container for laying out children in a two-dimensional grid.
- *
- * **Usage:**
- * - Use `columns` to define the number of columns or a custom grid-template-columns value
- * - Use `rows` to define the number of rows or a custom grid-template-rows value
- * - Use `minChildWidth` for responsive auto-fill grids
- * - Combine `columns` + `minChildWidth` for responsive grid with max columns limit
- */
-declare const Grid: FC<GridProps>;
-
-type SeparatorProps = {
-    /** Direction of the separator */
-    direction?: 'horizontal' | 'vertical';
-    /** Custom width (overrides default) */
-    width?: string | number;
-    /** Custom height (overrides default) */
-    height?: string | number;
-    /** Custom color (overrides default) */
-    color?: keyof ThemeContract['colors'];
+type CardVariant = 'elevated' | 'outlined';
+type CardComponent = FC<CardProps> & {
+    Header: FC<CardHeaderProps>;
+    Body: FC<CardBodyProps>;
 };
 
-/**
- * Separator component
- *
- * A simple separator line for horizontal or vertical division.
- */
-declare const Separator: FC<SeparatorProps>;
-
-type PageSectionProps = PropsWithChildren<{
-    /** Gap between child elements */
-    gap?: keyof ThemeContract['spacing'];
-    /** Horizontal padding around the section */
-    paddingHorizontal?: keyof ThemeContract['spacing'];
-    /** Vertical padding around the section */
-    paddingVertical?: keyof ThemeContract['spacing'];
-    /** Alignment of items within the section */
-    alignItems?: CSSProperties['alignItems'];
-    /** Maximum width of the section */
-    maxWidth?: CSSProperties['maxWidth'];
-    /** Minimum height of the section */
-    minHeight?: CSSProperties['minHeight'];
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this section */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this section */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
-}>;
+declare const Card: CardComponent;
 
 /**
- * PageSection component
- *
- * A layout component that provides consistent spacing and alignment for page sections.
- * Supports customization of gap, padding, alignment, min height and max width.
+ * Extra CSS Grid props not covered by BoxProps.
+ * `columns` and `rows` are convenience shorthands:
+ * a number is expanded to `repeat(n, 1fr)`, a string is forwarded as-is.
  */
-declare const PageSection: FC<PageSectionProps>;
-
-type PageProps = {
-    /** Page content */
-    children: ReactNode;
-    /** Optional footer component */
-    footer?: ReactNode;
-    /** Maximum width of the page content (default: 100%) */
-    maxWidth?: CSSProperties['maxWidth'];
-    /** Background color */
-    backgroundColor?: CSSProperties['backgroundColor'];
-    /** Padding around the page */
-    padding?: CSSProperties['padding'];
-    /** Custom className for additional styling */
-    className?: string;
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this page */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this page */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
+type GridStyleProps = {
+    /** Shorthand for `gridTemplateColumns`. A number expands to `repeat(n, 1fr)`. */
+    columns?: number | CSSProperties['gridTemplateColumns'];
+    /** Shorthand for `gridTemplateRows`. A number expands to `repeat(n, 1fr)`. */
+    rows?: number | CSSProperties['gridTemplateRows'];
+    autoFlow?: CSSProperties['gridAutoFlow'];
+    autoColumns?: CSSProperties['gridAutoColumns'];
+    autoRows?: CSSProperties['gridAutoRows'];
+    alignContent?: CSSProperties['alignContent'];
+    justifyItems?: CSSProperties['justifyItems'];
+    placeItems?: CSSProperties['placeItems'];
+    placeContent?: CSSProperties['placeContent'];
 };
-
-/**
- * Page component
- *
- * A layout component that provides consistent page structure with optional footer.
- * Supports customization of dimensions, background, and content constraints.
- */
-declare const Page: FC<PageProps>;
-
-type AccordionProps = {
-    /** Title displayed in the accordion header */
-    title: string;
-    /** Content to show/hide when accordion is expanded */
-    children: ReactNode;
-    /** Whether the accordion is expanded */
-    expanded?: boolean;
-    /** Default expanded state (for uncontrolled mode) */
-    defaultExpanded?: boolean;
-    /** Callback fired when the accordion expands or collapses */
-    onChange?: (expanded: boolean) => void;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Optional icon to display before title */
-    icon?: ReactNode;
-    /** Optional background color */
-    backgroundColor?: keyof ThemeContract['colors'];
-    /** Optional width */
-    width?: CSSProperties['width'];
-    /** Padding for the accordion header */
-    headerPadding?: CSSProperties['padding'];
-    /** Padding for the accordion content */
-    contentPadding?: CSSProperties['padding'];
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this accordion */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this accordion */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
+type GridProps = Omit<BoxProps, 'display'> & GridStyleProps & {
+    /** Defaults to `'grid'`. */
+    display?: 'grid' | 'inline-grid';
 };
 
 /**
- * Accordion component
+ * A CSS Grid `Box` with convenience props for common grid patterns.
+ *
+ * Defaults to `display: grid`. The `columns` and `rows` shorthands accept either a
+ * number (expanded to `repeat(n, 1fr)`) or any valid CSS `grid-template-*` string.
+ * All `Box` style props remain available (`gap`, `rowGap`, `columnGap`,
+ * `gridTemplateColumns`, `gridTemplateRows`, `alignItems`, `justifyContent`, …).
  *
- * A collapsible container that can show/hide content.
- * Supports controlled and uncontrolled modes.
+ * @example <Grid columns={3} gap='md'>…</Grid>
+ * @example <Grid columns='repeat(auto-fill, minmax(200px, 1fr))' gap='lg'>…</Grid>
+ * @example <Grid rows={2} autoFlow='column' gap='sm' alignItems='center'>…</Grid>
  */
-declare const Accordion: FC<AccordionProps>;
+declare const Grid: FC<GridProps>;
 
-/**
- * Alert component props
- */
-interface AlertProps {
-    /**
-     * Text content of the alert
-     */
-    text: string;
-    /**
-     * Variant of the alert determining its color and icon
-     * @default 'default'
-     */
-    variant?: AlertVariant;
-    /**
-     * Position of the alert on screen
-     * @default 'top-right'
-     */
-    position?: AlertPosition;
-    /**
-     * Whether the alert is visible
-     * @default false
-     */
-    isVisible?: boolean;
-    /**
-     * Vertical offset for stacking alerts (in pixels)
-     * @default 0
-     */
-    offsetY?: number;
-    /**
-     * Maximum width of the alert in pixels
-     * @default 300
-     */
-    maxWidth?: number;
-    /**
-     * Unique identifier for the alert
-     * @internal
-     */
-    alertId?: string;
-    /**
-     * Callback when alert height changes
-     * @internal
-     */
-    onHeightChange?: (alertId: string, height: number) => void;
-}
+type StackProps = BoxProps;
 
 /**
- * Alert component - Display notifications with different variants
- *
- * **Variants:**
- * - `default`: Standard alert with neutral styling
- * - `info`: Informational alert with blue styling
- * - `warning`: Warning alert with yellow/orange styling
- * - `error`: Error alert with red styling
- * - `success`: Success alert with green styling
+ * A flex `Box` for laying out children along a single axis.
  *
- * **Features:**
- * - Auto-dismisses after 3 seconds
- * - Positioned at screen corners
- * - Supports stacking with offsetY
- * - Icon based on variant
- * - Smooth animations
- * - Dynamic height calculation for proper stacking
+ * Defaults to `display: flex` and a vertical (`column`) direction. Every
+ * `Box` style prop is available (`gap`, `alignItems`, `justifyContent`, …),
+ * and `display` can still be overridden (e.g. `'inline-flex'`).
  *
- * **Accessibility:**
- * - Uses `role="alert"` for screen reader announcements
- * - Error alerts use `aria-live="assertive"` for urgent announcements
- * - Other variants use `aria-live="polite"` to avoid interrupting users
- *
- * @example
- * ```tsx
- * <Alert
- *   text="Operation completed successfully"
- *   variant="success"
- *   position="top-right"
- *   isVisible={true}
- * />
- * ```
+ * @example <Stack gap='sm'>…</Stack>
+ * @example <Stack flexDirection='row' gap='md' alignItems='center' justifyContent='space-between'>…</Stack>
  */
-declare const Alert: FC<AlertProps>;
-
-type AnchorPosition = {
-    top: number;
-    left: number;
-} | null;
-type AnchorOrigin = 'left' | 'right';
+declare const Stack: FC<StackProps>;
 
-type MenuProps = {
-    anchor: HTMLElement | null;
-    onClose: () => void;
-    children: ReactNode;
-    anchorOrigin?: AnchorOrigin;
+type AlertProps = {
+    /** Visual style of the alert. @default 'default' */
+    variant?: AlertVariant;
+    /** Alert sub-components: Alert.Title and/or Alert.Body. */
+    children?: ReactNode;
+    /** Explicit width for the Alert. */
     width?: CSSProperties['width'];
-    /**
-     * Désactive l'animation/transition d'apparition du menu
-     * @default false
-     */
-    disableAnimation?: boolean;
 };
 
-declare const Menu: FC<MenuProps>;
-
-type MenuGroupProps = {
+type AlertTitleProps = {
+    /** Title text displayed next to the variant icon. */
     children: ReactNode;
 };
 
-declare const MenuGroup: FC<MenuGroupProps>;
+type AlertBodyProps = {
+    /** Alert message content. */
+    children: ReactNode;
+};
 
-type MenuItemProps = {
-    label: string;
-    icon?: ReactNode;
-    onClick: () => void;
-    textColor?: keyof ThemeContract['colors'];
-    iconColor?: keyof ThemeContract['colors'];
-    /** If true, the menu item is highlighted as active */
-    active?: boolean;
+type AlertVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
+type AlertComponent = FC<AlertProps> & {
+    Title: FC<AlertTitleProps>;
+    Body: FC<AlertBodyProps>;
 };
 
-declare const MenuItem: FC<MenuItemProps>;
+declare const Alert: AlertComponent;
 
-type ModalProps = {
-    isOpen: boolean;
+type DialogProps = {
+    /** Whether the dialog is visible. */
+    open: boolean;
+    /** Called when the dialog should close (Escape key or close button). */
     onClose: () => void;
-    label: string;
+    /** Whether clicking the backdrop closes the dialog. @default false */
+    closeOnBackdropClick?: boolean;
+    /** Maximum width of the dialog panel. Accepts numbers (px) or any CSS width value. @default '80vw' */
+    maxWidth?: number | string;
+    /** Maximum height of the dialog panel before the body scrolls. @default '80vh' */
+    maxHeight?: string;
+    /** Minimum width of the dialog panel. Accepts numbers (px) or any CSS width value. */
+    minWidth?: number | string;
+    /** Minimum height of the dialog panel. Accepts numbers (px) or any CSS height value. */
+    minHeight?: number | string;
+    /** Whether the dialog takes the full viewport height on mobile (bottom-sheet variant). @default false */
+    fullscreen?: boolean;
+    /** Accessible label — use when Dialog.Header is not present. */
+    'aria-label'?: string;
+    /** Dialog content. Typically Dialog.Header + Dialog.Body. */
     children: ReactNode;
-    isForm?: boolean;
-    action?: ButtonProps;
 };
 
-/**
- * Modal component
- *
- * An overlay dialog for focused interactions.
- *
- * **Accessibility:**
- * - Uses `role="dialog"` and `aria-modal="true"` for screen readers
- * - `aria-labelledby` links to the modal title
- * - Focus is trapped inside the modal while it is open
- * - Focus returns to the triggering element when closed
- * - Escape key closes the modal
- *
- * @example
- * ```tsx
- * <Modal
- *   isOpen={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   label="Confirm deletion"
- *   action={{ label: 'Delete', onClick: handleDelete }}
- * >
- *   <Text>Are you sure you want to delete this item?</Text>
- * </Modal>
- * ```
- */
-declare const Modal: FC<ModalProps>;
-
-type DrawerItemProps = {
-    /** DrawerItem text label */
-    label: string;
-    /** Optional icon to display before label */
-    startIcon?: ReactNode;
-    /** Optional icon to display after label */
-    endIcon?: ReactNode;
-    /** Click handler */
-    onClick?: () => void;
-    /** Selected state */
-    selected?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Optional chip to display */
-    chip?: Omit<StatusProps, 'size' | 'disabled'>;
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this item */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this item */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
+type DialogHeaderProps = {
+    /** Dialog title displayed in the header. */
+    title: string;
+    /** Called when the close button is clicked. */
+    onClose: () => void;
 };
 
-/**
- * DrawerItem component
- *
- * A navigation item for use in drawers/sidebars.
- * Similar to a text button with selected state support.
- */
-declare const DrawerItem: FC<DrawerItemProps>;
-
-/**
- * Props for the Breadcrumb component
- */
-interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {
-    /**
-     * Maximum number of items to display (minimum 2).
-     * If exceeded, shows: first item + ellipsis + last (maxItems - 1) items
-     * Separators are automatically inserted between items.
-     * @example maxItems={3} with 6 items → Home > ... > Item5 > Item6
-     */
-    maxItems?: number;
-}
-
-/**
- * Breadcrumb component
- * Navigation component for hierarchical page structures
- *
- * @param maxItems - Maximum number of items to display (minimum 2).
- *                   If exceeded, shows: first item + ellipsis + last (maxItems - 1) items
- * @param children
- * @param props
- */
-declare const Breadcrumb: react.NamedExoticComponent<BreadcrumbProps>;
-
-/**
- * Props for the BreadcrumbLink component
- * Renders a clickable breadcrumb item (includes the li wrapper)
- */
-interface BreadcrumbLinkProps {
-    /**
-     * The text content of the link (required)
-     */
-    children: string;
-    /**
-     * Click handler for navigation (compatible with React Router)
-     */
-    onClick?: () => void;
-}
-
-/**
- * BreadcrumbLink component
- * Renders a clickable breadcrumb item with a link
- */
-declare const BreadcrumbLink: react.NamedExoticComponent<BreadcrumbLinkProps>;
-
-/**
- * Props for the BreadcrumbPage component
- * Renders the current page in the breadcrumb (includes the li wrapper)
- */
-interface BreadcrumbPageProps {
-    /**
-     * The text content of the page (required)
-     */
-    children: string;
-}
-
-/**
- * BreadcrumbPage component
- * Renders the current page (non-clickable) in the breadcrumb
- */
-declare const BreadcrumbPage: react.NamedExoticComponent<BreadcrumbPageProps>;
-
-/**
- * Props for the BreadcrumbSeparator component
- */
-interface BreadcrumbSeparatorProps {
-}
-
-/**
- * BreadcrumbSeparator component
- */
-declare const BreadcrumbSeparator: FC<BreadcrumbSeparatorProps>;
-
-/**
- * Props for the BreadcrumbEllipsis component
- */
-interface BreadcrumbEllipsisProps {
-}
-
-/**
- * BreadcrumbEllipsis component
- * Renders an ellipsis item in the breadcrumb (includes the li wrapper)
- */
-declare const BreadcrumbEllipsis: FC<BreadcrumbEllipsisProps>;
-
-type TabsProps = {
-    /** Children TabItem components */
+type DialogBodyProps = {
+    /** Body content of the dialog. */
     children: ReactNode;
-    /** Currently active tab value or index */
-    activeTab?: string | number;
-    /** Width of the tabs container, default 100% */
-    width?: string;
 };
 
-/**
- * Tabs component for navigation between multiple sections
- */
-declare const Tabs: FC<TabsProps>;
-
-type TabItemProps = {
-    /** Label of the tab */
-    label?: string;
-    /** Start icon of the tab */
-    startIcon?: ReactElement;
-    /** End icon of the tab */
-    endIcon?: ReactElement;
-    /** Optional value associated with the tab */
-    value?: string | number;
-    /** Whether the tab is active */
-    isActive?: boolean;
-    /** Click handler */
-    onClick?: () => void;
+type DialogComponent = FC<DialogProps> & {
+    Header: FC<DialogHeaderProps>;
+    Body: FC<DialogBodyProps>;
 };
 
-/**
- * TabItem component for use inside Tabs
- */
-declare const TabItem: FC<TabItemProps>;
+declare const Dialog: DialogComponent;
 
-/**
- * Props for the Pagination component
- */
-type PaginationProps = {
-    /** Current page number (1-indexed) */
-    currentPage: number;
-    /** Total number of pages */
-    totalPages: number;
-    /** Callback when page changes */
-    onPageChange: (page: number) => void;
-    /** Callback when clicking the previous button */
-    onPrevious?: (page: number) => void;
-    /** Callback when clicking the next button */
-    onNext?: (page: number) => void;
-    /** Maximum number of page buttons to display */
-    maxVisiblePages?: number;
-    /** Accessibility label for the pagination */
-    ariaLabel?: string;
+type MenuProps = {
+    /** Whether the menu is visible. */
+    open: boolean;
+    /** Called when the menu should close (click outside or Escape key). */
+    onClose: () => void;
+    /** Reference element used to position the menu. */
+    anchorEl?: HTMLElement | null;
+    /** Minimum width override. Defaults to the anchor element's width. */
+    minWidth?: number | string;
+    /** Maximum height before scrolling. @default '20rem' */
+    maxHeight?: string;
+    /** ARIA id for the listbox panel. */
+    id?: string;
+    /** Menu content — MenuGroup and/or MenuItem. */
+    children: ReactNode;
 };
 
-/**
- * Pagination component for navigating between pages
- */
-declare const Pagination: FC<PaginationProps>;
-
-/**
- * Options for showing an alert
- */
-interface ShowAlertOptions {
-    /**
-     * Text content of the alert
-     */
-    text: string;
-    /**
-     * Variant of the alert
-     * @default 'default'
-     */
-    variant?: AlertVariant;
-    /**
-     * Position of the alert on screen
-     * @default 'top-right'
-     */
-    position?: AlertPosition;
-    /**
-     * Duration before auto-dismiss in milliseconds
-     * @default 3000
-     */
-    duration?: number;
-    /**
-     * Maximum width of the alert in pixels
-     * @default 300
-     */
-    maxWidth?: number;
-}
-/**
- * Alert context value
- */
-interface AlertContextValue {
-    /**
-     * Show an alert
-     */
-    showAlert: (options: ShowAlertOptions) => void;
-}
-/**
- * Alert provider props
- */
-interface AlertProviderProps {
-    children: React.ReactNode;
-}
-
-/**
- * Alert Provider Component
- * Manages alert queue and renders alerts in a portal
- */
-declare const AlertProvider: FC<AlertProviderProps>;
-/**
- * Hook to access alert functionality
- *
- * @example
- * ```tsx
- * const { showAlert } = useAlert()
- *
- * showAlert({
- *   text: 'Operation completed',
- *   variant: 'success',
- *   position: 'top-right'
- * })
- * ```
- */
-declare const useAlert: () => AlertContextValue;
-
-type UseAnchorPositionParams = {
-    anchor: HTMLElement | null;
-    menuRef: RefObject<HTMLDivElement | null>;
-    anchorOrigin?: AnchorOrigin;
-    isVisible: boolean;
+type MenuGroupProps = {
+    /** Optional label shown above the group items. */
+    label?: string;
+    /** Render a visual horizontal separator above this group. */
+    divider?: boolean;
+    /** MenuItem children. */
+    children: ReactNode;
 };
-/**
- * Hook pour calculer la position d'un élément par rapport à son ancre
- * @param anchor - Élément HTML servant d'ancre
- * @param menuRef - Référence vers l'élément à positionner
- * @param anchorOrigin - Origine de l'ancrage ('left' ou 'right')
- * @param isVisible - Si l'élément est visible (pour recalculer la position)
- */
-declare const useAnchorPosition: ({ anchor, menuRef, anchorOrigin, isVisible }: UseAnchorPositionParams) => AnchorPosition;
-
-/**
- * Gestion d'un click en dehors d'un ou plusieurs éléments
- * @param refs Tableau de références à écouter
- * @param onClickOutside Callback si clic à l'extérieur
- * @param shouldTrigger Activation du comportement
- */
-declare const useClickOutside: (refs: RefObject<HTMLElement | null>[], onClickOutside: () => void, shouldTrigger?: boolean) => void;
 
-type UseTransitionRenderReturnType = {
-    isVisible: boolean;
-    isFadingIn: boolean;
+type MenuItemProps = HTMLAttributes<HTMLLIElement> & {
+    ref?: Ref<HTMLLIElement>;
+    /** Display text of the item. */
+    label: string;
+    /** Optional SVG icon rendered before the label. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Whether this item is currently selected. */
+    selected?: boolean;
+    /** Whether this item has keyboard focus (highlighted via arrow navigation). */
+    focused?: boolean;
+    /** Whether the item is non-interactive. */
+    disabled?: boolean;
 };
 
-/**
- * Hook pour gérer les animations de transition lors des renders
- * @param isOpen - État d'ouverture
- * @param duration - Durée de la transition en ms
- */
-declare const useTransitionRender: (isOpen: boolean, duration?: number) => UseTransitionRenderReturnType;
-
-/**
- * Default theme type for aurora-ds-components
- */
-type Theme = {
-    colors: ThemeColorContract;
-    spacing: ThemeSpacingContract;
-    radius: ThemeRadiusContract;
-    shadows: ThemeShadowsContract;
-    fontSize: ThemeFontSizeContract;
-    fontWeight: ThemeFontWeightContract;
-    lineHeight: ThemeLineHeightContract;
-    zIndex: ThemeZIndexContract;
-    transition: ThemeTransitionContract;
-    opacity: ThemeOpacityContract;
-    breakpoints: ThemeBreakpointsContract;
+type MenuComponent = FC<MenuProps> & {
+    Item: FC<MenuItemProps>;
+    Group: FC<MenuGroupProps>;
 };
 
+declare const Menu: MenuComponent;
+
 /**
- * Default module augmentation for @aurora-ds/components
- *
- * This provides the base theme structure for the library.
- * Projects can override this to add custom tokens:
+ * Tooltip
  *
- * @example
- * ```typescript
- * // In your project: src/theme/theme.module.ts
- * import type { Theme } from '@aurora-ds/components'
- *
- * // Extend the base Theme with your custom tokens
- * interface MyTheme extends Theme {
- *     colors: Theme['colors'] & {
- *         link: string
- *         linkHover: string
- *     }
- * }
+ * A hover/focus-triggered tooltip rendered in a portal to avoid clipping
+ * by parent `overflow: hidden` containers. Computes its fixed position from
+ * the trigger element's bounding rect and clamps it to the viewport on all sides.
  *
- * declare module '@aurora-ds/theme' {
- *     interface ThemeRegistry {
- *         theme: MyTheme  // Override with your extended theme
- *     }
- * }
- * ```
- */
-declare module '@aurora-ds/theme' {
-    interface ThemeRegistry {
-        theme: Theme;
-    }
-}
-
-/**
- * Default theme for aurora-ds-components
+ * **Placements:** `top` | `bottom` | `left` | `right` (default)
  *
- * This theme is used by default if no custom theme is provided.
- * You can override it by passing your own theme to ThemeProvider:
+ * By default the tooltip is disabled on touch/mobile devices (`pointer: coarse`).
+ * Set `disableOnMobile={false}` to keep it active on mobile (e.g. InfoBubble).
  *
  * @example
  * ```tsx
- * import { ThemeProvider } from '@aurora-ds/theme'
- * import { defaultTheme } from '@aurora-ds/components'
- *
- * // Use default theme
- * <ThemeProvider theme={defaultTheme}>
- *   <App />
- * </ThemeProvider>
- *
- * // Or extend/override it
- * const myTheme = {
- *   ...defaultTheme,
- *   colors: {
- *     ...defaultTheme.colors,
- *     primary: '#FF0000', // Override primary color
- *   }
- * }
+ * <Tooltip label="Save document" placement="top">
+ *   <Button>Save</Button>
+ * </Tooltip>
  * ```
  */
-declare const defaultTheme: Theme;
+declare const Tooltip: FC<TooltipProps>;
+
+declare const lightTheme: Theme;
+
+declare const darkTheme: Theme;
 
-export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonToggle, ButtonToggleGroup, Card, _default as DatePicker, DrawerItem, FilePicker, _default$3 as Form, Grid, Icon, IconButton, ImagePicker, _default$2 as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, Status, TabItem, Tabs, Text, _default$1 as TextArea, defaultTheme, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
-export type { AccordionProps, AlertContextValue, AlertPosition, AlertProps, AlertProviderProps, AlertVariant, AnchorOrigin, AnchorPosition, AvatarGroupProps, AvatarProps, BoxProps, BreadcrumbEllipsisProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps, ButtonProps, ButtonToggleGroupProps, ButtonToggleProps, ButtonVariantStyle, ButtonVariants, CardProps, DateFormat, DatePickerProps, DrawerItemProps, FilePickerProps, FormProps, GridProps, IconButtonProps, IconProps, ImagePickerProps, InputProps, MenuGroupProps, MenuItemProps, MenuProps, ModalProps, PageProps, PageSectionProps, PaginationProps, SelectOption, SelectProps, SeparatorProps, ShowAlertOptions, SkeletonProps, StackProps, StatusColor, StatusProps, StatusSize, StatusVariant, TabItemProps, TabsProps, TextAreaProps, TextProps, TextVariantStyle, TextVariants, Theme, ThemeBreakpointsContract, ThemeColorContract, ThemeContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeRadiusContract, ThemeShadowsContract, ThemeSpacingContract, ThemeTransitionContract, ThemeZIndexContract, UseTransitionRenderReturnType };
+export { Alert, Badge, Box, Button, Card, Dialog, Form, Grid, Icon, IconButton, InfoBubble, Link, Menu, Select, Skeleton, Stack, Switch, Text, TextField, Tooltip, darkTheme, lightTheme };
+export type { AlertBodyProps, AlertProps, AlertTitleProps, AlertVariant, BadgeColor, BadgeIcon, BadgeProps, BadgeSize, BadgeVariant, BoxProps, ButtonColor, ButtonIcon, ButtonProps, ButtonSize, ButtonVariant, CardBodyProps, CardHeaderProps, CardProps, CardVariant, DialogBodyProps, DialogHeaderProps, DialogProps, FormProps, GridProps, GridStyleProps, IconButtonProps, IconProps, IconStyleParams, InfoBubbleProps, LinkIcon, LinkProps, LinkUnderline, MenuGroupProps, MenuItemProps, MenuProps, Palette, SelectOption, SelectProps, SkeletonAnimation, SkeletonProps, SkeletonVariant, StackProps, SwitchColor, SwitchProps, SwitchSize, TextFieldProps, TextFieldSize, TextFieldStatus, TextProps, TextStyleParams, TextVariantStyle, TextVariants, Theme, TooltipPlacement, TooltipProps };