@cognitiv/components-web 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,3523 @@
+import React$1, { AllHTMLAttributes, ReactNode } from 'react';
+import * as solidIcons from '@fortawesome/pro-solid-svg-icons';
+import * as regularIcons from '@fortawesome/pro-regular-svg-icons';
+import * as duotoneIcons from '@fortawesome/pro-duotone-svg-icons';
+import * as brandIcons from '@fortawesome/free-brands-svg-icons';
+import dayjs from 'dayjs';
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as node_modules_styled_components_dist_types from 'node_modules/styled-components/dist/types';
+
+/**
+ * Avatar component for displaying user profile images with fallback initials.
+ *
+ * An avatar component that displays a user's profile image. When no image is
+ * provided, displays the user's initials as a fallback. Built on Radix UI
+ * Avatar for accessibility. Supports multiple sizes.
+ *
+ * @category Data
+ * @see Image
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Built on Radix UI Avatar for accessibility
+ * - Automatically generates initials from alt text when image is missing
+ * - Fallback uses first letter of each word in alt text
+ * - Alt text is required for accessibility
+ *
+ * @example Basic usage with image
+ * ```tsx
+ * <Avatar
+ *   src="/user-avatar.jpg"
+ *   alt="John Doe"
+ * />
+ * ```
+ *
+ * @example With fallback initials
+ * ```tsx
+ * <Avatar alt="Jane Smith" />
+ * // Displays "JS" as fallback
+ * ```
+ *
+ * @example Different sizes
+ * ```tsx
+ * <Avatar alt="User" variant="small" />
+ * <Avatar alt="User" variant="medium" />
+ * <Avatar alt="User" variant="large" />
+ * ```
+ */
+interface AvatarProps extends AllHTMLAttributes<HTMLImageElement> {
+    /**
+     * Person's name (required for accessibility and fallback initials).
+     *
+     * Used as alt text and to generate initials when image is not provided.
+     */
+    alt: string;
+    /**
+     * Image URL for the avatar.
+     *
+     * When not provided, initials are displayed based on the alt text.
+     *
+     * @default undefined
+     */
+    src?: string;
+    /**
+     * Size variant of the avatar.
+     *
+     * @default 'small' (24px)
+     */
+    variant?: 'small' | 'medium' | 'large';
+}
+
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLImageElement>>;
+
+/**
+ * Banner type variants.
+ */
+type BannerType = 'info' | 'success' | 'warning' | 'error';
+/**
+ * Banner component for displaying alert messages and notifications.
+ *
+ * A banner component that displays important messages, alerts, and notifications
+ * to users. Supports multiple variants (info, success, warning, error), optional
+ * dismissal, and auto-dismiss functionality.
+ *
+ * @category Feedback
+ * @see Tooltip
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Should have appropriate ARIA role for announcements
+ * - Dismissible banners should have accessible close button
+ * - Important messages should be announced to screen readers
+ * - Use for system-wide notifications and important alerts
+ *
+ * @example Basic info banner
+ * ```tsx
+ * <Banner
+ *   type="info"
+ *   title="Information"
+ *   content="This is an informational message"
+ * />
+ * ```
+ *
+ * @example Success banner
+ * ```tsx
+ * <Banner
+ *   type="success"
+ *   title="Success!"
+ *   content="Your changes have been saved"
+ * />
+ * ```
+ *
+ * @example Warning banner
+ * ```tsx
+ * <Banner
+ *   type="warning"
+ *   title="Warning"
+ *   content="Please review your settings"
+ * />
+ * ```
+ *
+ * @example Error banner
+ * ```tsx
+ * <Banner
+ *   type="error"
+ *   title="Error"
+ *   content="Something went wrong. Please try again."
+ * />
+ * ```
+ *
+ * @example Required (non-dismissible) banner
+ * ```tsx
+ * <Banner
+ *   type="error"
+ *   title="Critical Error"
+ *   content="This message cannot be dismissed"
+ *   required={true}
+ * />
+ * ```
+ *
+ * @example Auto-dismiss banner
+ * ```tsx
+ * <Banner
+ *   type="success"
+ *   title="Saved"
+ *   content="Changes saved successfully"
+ *   dismissAfter={3000}
+ * />
+ * ```
+ */
+interface BannerProps {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Visual variant/type of the banner.
+     *
+     * @default 'info'
+     */
+    type?: BannerType;
+    /**
+     * Optional title text or React node displayed in the banner.
+     *
+     * @default undefined
+     */
+    title?: string | React$1.ReactNode;
+    /**
+     * Optional content text or React node displayed in the banner.
+     *
+     * @default undefined
+     */
+    content?: string | React$1.ReactNode;
+    /**
+     * Whether the banner is required and cannot be dismissed.
+     *
+     * When true, the close button is hidden and the banner cannot be dismissed.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Time in milliseconds to automatically dismiss the banner.
+     *
+     * When provided, the banner will automatically close after this duration.
+     *
+     * @default undefined
+     */
+    dismissAfter?: number;
+}
+
+declare const Banner: React$1.ForwardRefExoticComponent<BannerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const IconPacks: {
+    readonly solid: typeof solidIcons;
+    readonly regular: typeof regularIcons;
+    readonly duotone: typeof duotoneIcons;
+    readonly brands: typeof brandIcons;
+};
+type IconStyle = keyof typeof IconPacks;
+type IconName = keyof typeof solidIcons | keyof typeof brandIcons;
+
+/**
+ * Icon component for displaying FontAwesome icons.
+ *
+ * A versatile icon component that renders FontAwesome Pro icons (solid, regular,
+ * duotone) and brand icons. Supports all FontAwesome icon names and sizes, with
+ * theme-based color support.
+ *
+ * @category Interactive
+ * @see ClickableIcon
+ * @see Button
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Uses FontAwesome Pro icons (solid, regular, duotone) and brand icons
+ * - Icon names follow FontAwesome convention (e.g., 'faUser', 'faChevronDown')
+ * - Decorative icons should have aria-hidden='true'
+ * - Meaningful icons should have aria-label or be wrapped in a semantic element
+ * - For clickable icons, use ClickableIcon component instead
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Icon name="faUser" />
+ * ```
+ *
+ * @example Different styles
+ * ```tsx
+ * <Icon name="faUser" iconStyle="solid" />
+ * <Icon name="faUser" iconStyle="regular" />
+ * <Icon name="faUser" iconStyle="duotone" />
+ * ```
+ *
+ * @example Different sizes
+ * ```tsx
+ * <Icon name="faHome" size="xs" />
+ * <Icon name="faHome" size="sm" />
+ * <Icon name="faHome" size="lg" />
+ * <Icon name="faHome" size="2x" />
+ * ```
+ *
+ * @example With color
+ * ```tsx
+ * <Icon name="faCheck" color="primary" />
+ * <Icon name="faWarning" color="#ff0000" />
+ * ```
+ *
+ * @example Decorative icon (should be hidden from screen readers)
+ * ```tsx
+ * <Icon name="faStar" aria-hidden="true" />
+ * ```
+ *
+ * @example Meaningful icon (should have label)
+ * ```tsx
+ * <span aria-label="Success">
+ *   <Icon name="faCheck" color="success" />
+ * </span>
+ * ```
+ */
+interface IconProps {
+    /**
+     * FontAwesome icon name to display.
+     *
+     * Must be a valid icon name from FontAwesome Pro (solid, regular, duotone)
+     * or brand icons. Examples: 'faUser', 'faHome', 'faChevronDown', 'faCheck'.
+     */
+    name: IconName;
+    /**
+     * Icon style variant: 'solid', 'regular', or 'duotone'.
+     *
+     * @default 'solid'
+     */
+    iconStyle?: IconStyle;
+    /**
+     * Color of the icon (theme color name or CSS color value).
+     *
+     * Can be a theme color name (e.g., 'primary', 'textDark') or any CSS
+     * color value (e.g., '#ff0000', 'rgb(255, 0, 0)').
+     *
+     * @default 'textDark'
+     */
+    color?: string;
+    /**
+     * Icon size using FontAwesome size values.
+     *
+     * Supports FontAwesome size props: 'xs', 'sm', 'lg', '1x', '2x', '3x', etc.
+     * If undefined, uses default size based on fontSize.
+     *
+     * @default undefined
+     */
+    size?: SizeProp;
+    /**
+     * Additional CSS class name for custom styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+}
+
+declare const Icon: React$1.FC<IconProps>;
+
+/**
+ * Button visual variants.
+ */
+declare enum ButtonVariant {
+    /** Primary button with primary color background */
+    primary = "primary",
+    /** Secondary button with background color and border */
+    secondary = "secondary",
+    /** Tertiary button with background color and no visible border */
+    tertiary = "tertiary"
+}
+/**
+ * Button component for user actions and form submissions.
+ *
+ * A versatile button component with multiple visual variants, sizes, and
+ * optional icon support. Supports all standard HTML button attributes and
+ * provides consistent styling across the application.
+ *
+ * @category Interactive
+ * @see ClickableIcon
+ * @see Icon
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Supports all standard HTML button attributes (type, onClick, etc.)
+ * - Automatically adjusts size when icon-only (no children)
+ * - Disabled state prevents all interactions and reduces opacity
+ * - Forward ref supported for integration with form libraries
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Button onClick={() => handleClick()}>
+ *   Click Me
+ * </Button>
+ * ```
+ *
+ * @example With variants
+ * ```tsx
+ * <Button variant={ButtonVariant.primary}>Primary</Button>
+ * <Button variant={ButtonVariant.secondary}>Secondary</Button>
+ * <Button variant={ButtonVariant.tertiary}>Tertiary</Button>
+ * ```
+ *
+ * @example With icon
+ * ```tsx
+ * <Button iconName="faSave" onClick={handleSave}>
+ *   Save
+ * </Button>
+ * ```
+ *
+ * @example Icon-only button
+ * ```tsx
+ * <Button iconName="faTrash" aria-label="Delete" />
+ * ```
+ *
+ * @example Mini size
+ * ```tsx
+ * <Button mini={true} iconName="faEdit">
+ *   Edit
+ * </Button>
+ * ```
+ *
+ * @example Full width
+ * ```tsx
+ * <Button fullWidth={true} onClick={handleSubmit}>
+ *   Submit Form
+ * </Button>
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Button disabled={true} onClick={handleClick}>
+ *   Cannot Click
+ * </Button>
+ * ```
+ */
+interface ButtonProps extends AllHTMLAttributes<HTMLButtonElement> {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Button content (text, React nodes, etc.).
+     *
+     * If omitted and iconName is provided, button becomes icon-only and
+     * automatically adjusts size.
+     */
+    children?: React.ReactNode;
+    /**
+     * Visual variant of the button.
+     *
+     * @default ButtonVariant.primary
+     */
+    variant?: ButtonVariant;
+    /**
+     * Whether to use the smaller mini size (28px height instead of 36px).
+     *
+     * @default false
+     */
+    mini?: boolean;
+    /**
+     * Whether the button is disabled.
+     *
+     * When true, onClick will not be called and the button appears
+     * visually disabled with reduced opacity.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should take the full width of its container.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon name to display before the button content.
+     *
+     * If provided without children, the button becomes icon-only and
+     * automatically adjusts to a square size appropriate for the icon.
+     *
+     * @default undefined
+     */
+    iconName?: IconName;
+}
+
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Calendar component for date selection with range support.
+ *
+ * A calendar component that allows users to select single dates or date ranges.
+ * Supports min/max date constraints, highlighted dates, and multiple month
+ * display. Uses dayjs for date manipulation.
+ *
+ * @category DateTime
+ * @see DatePicker
+ * @see DateInput
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Uses dayjs for all date operations
+ * - Supports single date and date range selection
+ * - Keyboard navigation with arrow keys
+ * - Screen reader support for date announcements
+ * - Multiple months can be displayed side-by-side
+ *
+ * @example Basic single date selection
+ * ```tsx
+ * <Calendar
+ *   startDate={selectedDate}
+ *   onChange={(startDate) => setSelectedDate(startDate)}
+ * />
+ * ```
+ *
+ * @example Date range selection
+ * ```tsx
+ * <Calendar
+ *   startDate={startDate}
+ *   endDate={endDate}
+ *   useRange={true}
+ *   onChange={(start, end) => {
+ *     setStartDate(start)
+ *     setEndDate(end)
+ *   }}
+ * />
+ * ```
+ *
+ * @example With min/max dates
+ * ```tsx
+ * <Calendar
+ *   startDate={selectedDate}
+ *   minDate={dayjs().subtract(1, 'year')}
+ *   maxDate={dayjs().add(1, 'year')}
+ *   onChange={(startDate) => setSelectedDate(startDate)}
+ * />
+ * ```
+ *
+ * @example With highlighted dates
+ * ```tsx
+ * <Calendar
+ *   startDate={selectedDate}
+ *   highlightedDates={[
+ *     { date: dayjs(), tooltip: 'Today' },
+ *     { date: dayjs().add(1, 'day'), disabled: true }
+ *   ]}
+ *   onChange={(startDate) => setSelectedDate(startDate)}
+ * />
+ * ```
+ *
+ * @example Multiple months
+ * ```tsx
+ * <Calendar
+ *   startDate={selectedDate}
+ *   displayMonths={2}
+ *   onChange={(startDate) => setSelectedDate(startDate)}
+ * />
+ * ```
+ */
+interface CalendarProps {
+    /**
+     * Selected start date.
+     *
+     * For single date selection, this is the selected date.
+     * For range selection, this is the start of the range.
+     *
+     * @default undefined
+     */
+    startDate?: dayjs.Dayjs;
+    /**
+     * Selected end date (only used when useRange is true).
+     *
+     * The end date of the selected range. Only relevant when useRange is true.
+     *
+     * @default undefined
+     */
+    endDate?: dayjs.Dayjs;
+    /**
+     * Minimum date that can be selected.
+     *
+     * Dates before this will be disabled.
+     *
+     * @default undefined
+     */
+    minDate?: dayjs.Dayjs;
+    /**
+     * Maximum date that can be selected.
+     *
+     * Dates after this will be disabled.
+     *
+     * @default undefined
+     */
+    maxDate?: dayjs.Dayjs;
+    /**
+     * Array of dates to highlight or disable.
+     *
+     * Each item can specify a date, optional tooltip text, and whether
+     * the date should be disabled.
+     */
+    highlightedDates?: {
+        /** The date to highlight */
+        date: dayjs.Dayjs;
+        /** Optional tooltip text shown on hover */
+        tooltip?: string;
+        /** Whether this date should be disabled */
+        disabled?: boolean;
+    }[];
+    /**
+     * Whether to enable date range selection.
+     *
+     * When true, users can select a start and end date to create a range.
+     *
+     * @default false
+     */
+    useRange?: boolean;
+    /**
+     * Number of months to display side-by-side.
+     *
+     * @default 1
+     */
+    displayMonths?: number;
+    /**
+     * Callback function triggered when the selected date or range changes.
+     *
+     * For single date selection, endDate will be undefined.
+     * For range selection, both startDate and endDate are provided.
+     *
+     * @param startDate - The selected start date (or single date)
+     * @param endDate - The selected end date (undefined for single date selection)
+     */
+    onChange?: (startDate: dayjs.Dayjs, endDate?: dayjs.Dayjs) => void;
+}
+
+declare const Calendar: React$1.ForwardRefExoticComponent<CalendarProps & React$1.RefAttributes<any>>;
+
+/**
+ * Checkbox component for boolean selections.
+ *
+ * A checkbox input component that allows users to select one or more options
+ * from a set. Supports labels, controlled/uncontrolled states, and disabled
+ * states. Built on Radix UI checkbox for accessibility.
+ *
+ * @category Forms
+ * @see Switch
+ * @see Input
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Built on Radix UI Checkbox for accessibility
+ * - Supports controlled and uncontrolled modes
+ * - Keyboard accessible (Space to toggle)
+ * - Use for multiple independent selections
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Checkbox
+ *   checked={isChecked}
+ *   setChecked={(checked) => setIsChecked(checked)}
+ *   label="I agree to the terms"
+ * />
+ * ```
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <Checkbox
+ *   defaultChecked={true}
+ *   label="Subscribe to newsletter"
+ * />
+ * ```
+ *
+ * @example With custom label
+ * ```tsx
+ * <Checkbox
+ *   checked={isChecked}
+ *   setChecked={setIsChecked}
+ *   label={<span>Custom <strong>label</strong></span>}
+ * />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Checkbox
+ *   checked={true}
+ *   setChecked={setIsChecked}
+ *   label="Cannot change"
+ *   disabled={true}
+ * />
+ * ```
+ */
+interface CheckboxProps {
+    /**
+     * Whether the checkbox is checked.
+     *
+     * For controlled components, use this with setChecked.
+     *
+     * @default undefined
+     */
+    checked?: boolean;
+    /**
+     * Callback function triggered when the checkbox state changes.
+     *
+     * @param checked - The new checked state (boolean)
+     */
+    setChecked?: (checked: boolean) => void;
+    /**
+     * Label text or React node displayed next to the checkbox.
+     *
+     * Can be a string or any React node for custom styling.
+     *
+     * @default undefined
+     */
+    label?: ReactNode;
+    /**
+     * Whether the checkbox is disabled and cannot be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<any>>;
+
+/**
+ * ClickableIcon component for icon-only interactive actions.
+ *
+ * A clickable icon component that wraps the Icon component with interactive
+ * functionality. Ideal for toolbar actions, icon buttons, and compact controls
+ * where text labels are not needed. Requires an aria-label for accessibility.
+ *
+ * @category Interactive
+ * @see Icon
+ * @see Button
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Requires aria-label prop for accessibility (icon-only buttons need labels)
+ * - Keyboard accessible (Enter/Space to activate)
+ * - Disabled state prevents interactions
+ * - Use for icon-only actions where Button would be too large
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ClickableIcon
+ *   iconName="faTrash"
+ *   onClick={() => handleDelete()}
+ *   aria-label="Delete item"
+ * />
+ * ```
+ *
+ * @example With tooltip
+ * ```tsx
+ * <Tooltip content="Edit item">
+ *   <ClickableIcon
+ *     iconName="faEdit"
+ *     onClick={() => handleEdit()}
+ *     aria-label="Edit"
+ *   />
+ * </Tooltip>
+ * ```
+ *
+ * @example Different sizes
+ * ```tsx
+ * <ClickableIcon iconName="faUser" size="xs" onClick={handleClick} />
+ * <ClickableIcon iconName="faUser" size="sm" onClick={handleClick} />
+ * <ClickableIcon iconName="faUser" size="lg" onClick={handleClick} />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <ClickableIcon
+ *   iconName="faSave"
+ *   onClick={() => handleSave()}
+ *   disabled={true}
+ *   aria-label="Save"
+ * />
+ * ```
+ */
+interface ClickableIconProps {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * FontAwesome icon name to display.
+     *
+     * Must be a valid IconName from the Icon component constants.
+     */
+    iconName: IconName;
+    /**
+     * Callback function called when the icon is clicked.
+     *
+     * @default undefined
+     */
+    onClick?: () => void;
+    /**
+     * Size of the icon using FontAwesome size values.
+     *
+     * @default 'sm'
+     */
+    size?: SizeProp;
+    /**
+     * Color of the icon (theme color name or CSS color value).
+     *
+     * @default undefined (uses theme default)
+     */
+    color?: string;
+    /**
+     * Whether the icon is disabled and cannot be clicked.
+     *
+     * When true, onClick will not be called.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const ClickableIcon: React$1.ForwardRefExoticComponent<ClickableIconProps & React$1.RefAttributes<any>>;
+
+/**
+ * Currency value structure for CurrencyInput.
+ */
+interface CurrencyValue {
+    /** The numeric amount value */
+    amount: number;
+    /** The currency code (e.g., 'USD', 'EUR') */
+    currency: string;
+}
+/**
+ * CurrencyInput component for currency amount entry with formatting.
+ *
+ * A specialized input component for entering currency values with automatic
+ * formatting, currency symbol display, and decimal handling. Includes a
+ * currency selector dropdown and formats values according to the selected
+ * currency locale.
+ *
+ * @category Forms
+ * @see Input
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Built on react-currency-input-field
+ * - Automatically formats values with currency symbols
+ * - Supports decimal values (up to 2 decimal places)
+ * - Currency selector is built into the component
+ * - Currently supports USD currency (extensible)
+ * - Use InputContainer for labels, error messages, and helper text
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CurrencyInput
+ *   value={{ amount: 100, currency: 'USD' }}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @example With placeholder
+ * ```tsx
+ * <CurrencyInput
+ *   value={currencyValue}
+ *   onChange={(value) => setCurrencyValue(value)}
+ *   placeholder="Enter amount"
+ * />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <CurrencyInput
+ *   value={{ amount: 50, currency: 'USD' }}
+ *   onChange={() => {}}
+ *   disabled={true}
+ * />
+ * ```
+ */
+interface CurrencyInputProps {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Current currency value (amount and currency code).
+     *
+     * @default undefined
+     */
+    value?: CurrencyValue;
+    /**
+     * Callback function triggered when the currency value changes.
+     *
+     * Receives an object with the amount (number), currency (string), and
+     * formatted (string) values.
+     *
+     * @param value - Object containing amount, currency, and formatted string
+     */
+    onChange?: (value: {
+        /** The numeric amount (undefined if input is cleared) */
+        amount?: number;
+        /** The currency code */
+        currency: string;
+        /** The formatted string representation */
+        formatted?: string;
+    }) => void;
+    /**
+     * Placeholder text displayed when the input is empty.
+     *
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled and cannot be edited.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const CurrencyInput: ({ className, value, onChange, placeholder, disabled }: CurrencyInputProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * DateInput component for date entry with validation.
+ *
+ * A date input component that extends Calendar functionality to provide
+ * a text input field for date entry. Supports date validation, min/max
+ * dates, and date range selection. Uses dayjs for date handling.
+ *
+ * @category Forms
+ * @see DatePicker
+ * @see Calendar
+ * @see TimeInput
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Extends CalendarProps for date selection features
+ * - Uses dayjs for date manipulation and formatting
+ * - Supports single date and date range selection
+ * - Date format should be clearly indicated to users
+ * - Use InputContainer for labels, error messages, and helper text
+ *
+ * @example Basic usage
+ * ```tsx
+ * <DateInput
+ *   startDate={selectedDate}
+ *   onChange={(startDate) => setSelectedDate(startDate)}
+ *   placeholder="Select date"
+ * />
+ * ```
+ *
+ * @example With date range
+ * ```tsx
+ * <DateInput
+ *   startDate={startDate}
+ *   endDate={endDate}
+ *   useRange={true}
+ *   onChange={(start, end) => {
+ *     setStartDate(start)
+ *     setEndDate(end)
+ *   }}
+ * />
+ * ```
+ *
+ * @example With min/max dates
+ * ```tsx
+ * <DateInput
+ *   startDate={selectedDate}
+ *   minDate={dayjs().subtract(1, 'year')}
+ *   maxDate={dayjs().add(1, 'year')}
+ *   onChange={(startDate) => setSelectedDate(startDate)}
+ * />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <DateInput
+ *   startDate={selectedDate}
+ *   onChange={() => {}}
+ *   disabled={true}
+ * />
+ * ```
+ */
+interface DateInputProps extends CalendarProps {
+    /**
+     * Placeholder text displayed when no date is selected.
+     *
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled and cannot be edited.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const DateInput: React$1.ForwardRefExoticComponent<DateInputProps & React$1.RefAttributes<any>>;
+
+/**
+ * Dropdown visual variants.
+ */
+declare enum DropdownVariant {
+    /** Small variant with compact sizing */
+    small = "small",
+    /** Normal variant with standard sizing */
+    normal = "normal"
+}
+/**
+ * DropdownTrigger component for the dropdown button/trigger element.
+ *
+ * @category Navigation
+ * @see Dropdown
+ * @see DropdownMenu
+ */
+interface DropdownTriggerProps {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Label text or React node to display in the trigger.
+     */
+    label: string | ReactNode;
+    /**
+     * Whether the trigger is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback function called when the trigger is clicked.
+     *
+     * @default undefined
+     */
+    onClick?: () => void;
+    /**
+     * Whether the dropdown is currently open.
+     *
+     * Used to render the correct chevron icon (up/down).
+     *
+     * @default undefined
+     */
+    isOpen?: boolean;
+    /**
+     * Visual variant of the dropdown.
+     *
+     * @default DropdownVariant.normal
+     */
+    variant?: DropdownVariant;
+    /**
+     * Whether the trigger should take full width of its container.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+/**
+ * DropdownItem component for individual items in a dropdown menu.
+ *
+ * @category Navigation
+ * @see Dropdown
+ * @see DropdownMenu
+ */
+interface DropdownItemProps {
+    /**
+     * Optional icon name to display before the label.
+     *
+     * @default undefined
+     */
+    iconName?: IconName;
+    /**
+     * Label text or React node to display.
+     */
+    label: string | ReactNode;
+    /**
+     * Callback function called when the item is clicked.
+     *
+     * @default undefined
+     */
+    onClick?: () => void;
+    /**
+     * Whether the item is disabled and cannot be clicked.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Color of the item (theme color name or CSS color value).
+     *
+     * @default 'textNormal'
+     */
+    color?: string;
+    /**
+     * Visual variant of the dropdown item.
+     *
+     * @default DropdownVariant.normal
+     */
+    variant?: DropdownVariant;
+    /**
+     * Optional content to display on the right side of the item.
+     *
+     * Useful for icons, checkmarks, or other indicators.
+     *
+     * @default undefined
+     */
+    rightContent?: React.ReactNode;
+}
+/**
+ * Dropdown component for displaying popover content triggered by a button.
+ *
+ * A flexible dropdown component built on Radix UI Popover that displays
+ * content in a popover when triggered. Supports positioning, alignment,
+ * and modal/non-modal modes.
+ *
+ * @category Navigation
+ * @see Select
+ * @see MultiSelect
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Built on Radix UI Popover for accessibility
+ * - Keyboard accessible (Escape to close, arrow keys for navigation)
+ * - Focus management on open/close
+ * - Positioning adjusts automatically to avoid collisions
+ * - Use for context menus, action menus, and custom dropdowns
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Dropdown
+ *   trigger={<Button>Open Menu</Button>}
+ *   content={<div>Menu content</div>}
+ * />
+ * ```
+ *
+ * @example Controlled dropdown
+ * ```tsx
+ * const [isOpen, setOpen] = useState(false)
+ *
+ * <Dropdown
+ *   isOpen={isOpen}
+ *   setOpen={setOpen}
+ *   trigger={<Button>Toggle</Button>}
+ *   content={<div>Content</div>}
+ * />
+ * ```
+ */
+interface DropdownProps {
+    /**
+     * Trigger element that opens the dropdown when clicked.
+     *
+     * Can be any React node (typically a Button or DropdownTrigger).
+     */
+    trigger: React.ReactNode;
+    /**
+     * Content to display in the dropdown popover.
+     *
+     * Can be any React node.
+     */
+    content: React.ReactNode;
+    /**
+     * Controlled open state of the dropdown.
+     *
+     * @default undefined
+     */
+    isOpen?: boolean;
+    /**
+     * Callback function called when the open state changes.
+     *
+     * @param open - The new open state (boolean)
+     */
+    setOpen?: (open: boolean) => void;
+    /**
+     * Visual variant of the dropdown.
+     *
+     * @default DropdownVariant.normal
+     */
+    variant?: DropdownVariant;
+    /**
+     * Whether the dropdown is disabled and cannot be opened.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Side of the trigger where the popover should render.
+     *
+     * Automatically adjusts if there's not enough space.
+     *
+     * @default 'bottom'
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Distance in pixels between the trigger and popover.
+     *
+     * @default 0
+     */
+    sideOffset?: number;
+    /**
+     * Alignment of the popover relative to the trigger.
+     *
+     * Automatically adjusts if there's not enough space.
+     *
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Offset in pixels from the alignment position.
+     *
+     * @default 0
+     */
+    alignOffset?: number;
+    /**
+     * Whether the dropdown blocks interaction with elements behind it.
+     *
+     * When false, users can interact with elements behind the dropdown.
+     *
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Whether the popover should take full width of the trigger.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+/**
+ * DropdownMenu component for structured menu content with sections.
+ *
+ * A specialized dropdown component that provides a structured menu layout
+ * with optional header, sections of items, and footer. Useful for complex
+ * menu structures.
+ *
+ * @category Navigation
+ * @see Dropdown
+ */
+interface DropdownMenuProps {
+    /**
+     * Trigger element that opens the menu when clicked.
+     */
+    trigger: React.ReactNode;
+    /**
+     * Optional header content displayed at the top of the menu.
+     *
+     * @default undefined
+     */
+    header?: ReactNode;
+    /**
+     * Array of item sections, where each section is an array of DropdownItemProps.
+     *
+     * Sections are visually separated in the menu.
+     */
+    sections: DropdownItemProps[][];
+    /**
+     * Optional footer content displayed at the bottom of the menu.
+     *
+     * @default undefined
+     */
+    footer?: ReactNode;
+    /**
+     * Callback function called when a menu item is clicked.
+     *
+     * @param item - The clicked DropdownItemProps object
+     */
+    onItemClick?: (item: DropdownItemProps) => void;
+    /**
+     * Visual variant of the dropdown menu.
+     *
+     * @default DropdownVariant.normal
+     */
+    variant?: DropdownVariant;
+    /**
+     * Side of the trigger where the menu should render.
+     *
+     * @default 'bottom'
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Distance in pixels between the trigger and menu.
+     *
+     * @default 0
+     */
+    sideOffset?: number;
+    /**
+     * Alignment of the menu relative to the trigger.
+     *
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Offset in pixels from the alignment position.
+     *
+     * @default 0
+     */
+    alignOffset?: number;
+}
+
+declare const Dropdown: ({ trigger, content, isOpen, setOpen, variant, side, sideOffset, align, alignOffset, disabled, modal, fullWidth }: DropdownProps) => string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode>> | react_jsx_runtime.JSX.Element;
+
+declare const DropdownTrigger: React$1.ForwardRefExoticComponent<DropdownTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const DropdownItem: React$1.ForwardRefExoticComponent<DropdownItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const DropdownMenu: ({ trigger, header, sections, footer, onItemClick, variant, side, sideOffset, align, alignOffset }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * DatePicker component combining input field with calendar popup.
+ *
+ * A date picker component that combines a text input field with a calendar
+ * popup. Users can type dates directly or click to open the calendar for
+ * visual date selection. Extends Calendar component functionality.
+ *
+ * @category DateTime
+ * @see Calendar
+ * @see DateInput
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Extends CalendarProps for all calendar features
+ * - Combines input field with dropdown calendar
+ * - Uses dayjs for date manipulation
+ * - Supports single date and date range selection
+ * - Calendar opens as a dropdown when input is focused/clicked
+ * - Use InputContainer for labels, error messages, and helper text
+ *
+ * @example Basic usage
+ * ```tsx
+ * <DatePicker
+ *   startDate={selectedDate}
+ *   onChange={(startDate) => setSelectedDate(startDate)}
+ * />
+ * ```
+ *
+ * @example With date range
+ * ```tsx
+ * <DatePicker
+ *   startDate={startDate}
+ *   endDate={endDate}
+ *   useRange={true}
+ *   onChange={(start, end) => {
+ *     setStartDate(start)
+ *     setEndDate(end)
+ *   }}
+ * />
+ * ```
+ *
+ * @example With InputContainer
+ * ```tsx
+ * <InputContainer label="Select Date" error={errors.date}>
+ *   <DatePicker
+ *     startDate={selectedDate}
+ *     onChange={(startDate) => setSelectedDate(startDate)}
+ *   />
+ * </InputContainer>
+ * ```
+ *
+ * @example With custom dropdown variant
+ * ```tsx
+ * <DatePicker
+ *   startDate={selectedDate}
+ *   onChange={(startDate) => setSelectedDate(startDate)}
+ *   dropdownVariant={DropdownVariant.normal}
+ * />
+ * ```
+ */
+interface DatePickerProps extends CalendarProps {
+    /**
+     * Visual variant of the dropdown calendar.
+     *
+     * Controls the size and styling of the calendar dropdown.
+     *
+     * @default DropdownVariant.small
+     */
+    dropdownVariant?: DropdownVariant;
+}
+
+declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & React$1.RefAttributes<any>>;
+
+/**
+ * Divider component for visually separating content sections.
+ *
+ * A simple divider component that creates a visual separation between content
+ * sections. Supports horizontal and vertical orientations, dashed styles, and
+ * custom colors. For decorative dividers, should have aria-hidden='true'.
+ *
+ * @category Layout
+ * @see Flex
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Default is horizontal divider (full width, 1px height)
+ * - Vertical divider is 1px width, full height
+ * - Decorative dividers should have aria-hidden='true'
+ * - Semantic dividers should use proper HTML elements (hr, etc.)
+ *
+ * @example Basic horizontal divider
+ * ```tsx
+ * <div>Content above</div>
+ * <Divider />
+ * <div>Content below</div>
+ * ```
+ *
+ * @example Vertical divider
+ * ```tsx
+ * <Flex row>
+ *   <div>Left content</div>
+ * <Divider vertical />
+ *   <div>Right content</div>
+ * </Flex>
+ * ```
+ *
+ * @example Dashed divider
+ * ```tsx
+ * <Divider dashed />
+ * ```
+ *
+ * @example Custom color
+ * ```tsx
+ * <Divider color="primary" />
+ * ```
+ *
+ * @example Decorative divider (hidden from screen readers)
+ * ```tsx
+ * <Divider aria-hidden="true" />
+ * ```
+ */
+interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Width of the divider.
+     *
+     * Defaults to '100%' for horizontal dividers, '1px' for vertical.
+     *
+     * @default '100%' (horizontal) or '1px' (vertical)
+     */
+    width?: string;
+    /**
+     * Height of the divider.
+     *
+     * Defaults to '1px' for horizontal dividers, '100%' for vertical.
+     *
+     * @default '1px' (horizontal) or '100%' (vertical)
+     */
+    height?: string;
+    /**
+     * Whether the divider is vertical instead of horizontal.
+     *
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Whether the divider uses a dashed border style.
+     *
+     * @default false
+     */
+    dashed?: boolean;
+    /**
+     * Color of the divider (theme color name or CSS color value).
+     *
+     * @default theme.colors.border
+     */
+    color?: string;
+}
+
+declare const Divider: node_modules_styled_components_dist_types.IStyledComponentBase<"web", node_modules_styled_components_dist_types.Substitute<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DividerProps>> & string;
+
+/**
+ * Item type for DragList component.
+ */
+interface DragListItem {
+    /** Index position in the list (0-based) */
+    index: number;
+    /** Unique identifier for the item */
+    id: string;
+    /** Content to display for the item (React node) */
+    content: ReactNode;
+    /** Whether the item is disabled and cannot be dragged */
+    disabled?: boolean;
+}
+/**
+ * DragList component for reorderable lists with drag and drop.
+ *
+ * A draggable list component that allows users to reorder items by dragging
+ * and dropping. Built on react-dnd for drag and drop functionality. Supports
+ * disabled items and provides callbacks for order changes.
+ *
+ * @category Advanced
+ * @see Table
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Built on react-dnd for drag and drop
+ * - Keyboard alternative should be provided for accessibility
+ * - Drag state should be announced to screen readers
+ * - Position changes should be communicated to users
+ * - Disabled items cannot be dragged
+ *
+ * @example Basic usage
+ * ```tsx
+ * <DragList
+ *   items={items}
+ *   onChange={(newItems) => setItems(newItems)}
+ * />
+ * ```
+ *
+ * @example With disabled items
+ * ```tsx
+ * <DragList
+ *   items={[
+ *     { index: 0, id: '1', content: <Text>Item 1</Text> },
+ *     { index: 1, id: '2', content: <Text>Item 2</Text>, disabled: true }
+ *   ]}
+ *   onChange={(newItems) => setItems(newItems)}
+ * />
+ * ```
+ */
+interface DragListProps {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Array of items to display in the list.
+     *
+     * Each item must have a unique id and content. The index is used for
+     * initial ordering and will be updated when items are reordered.
+     */
+    items: DragListItem[];
+    /**
+     * Callback function called when items are reordered.
+     *
+     * Receives the new array of items with updated indices.
+     *
+     * @param items - The new array of items in their new order
+     */
+    onChange: (items: DragListItem[]) => void;
+}
+
+declare const DragList: ({ className, items, onChange }: DragListProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Allowed value types for filters.
+ */
+type AllowedValues = string | number | boolean | undefined;
+/**
+ * Filter value structure for different filter types.
+ */
+type FilterValue = {
+    /** Text search value (for 'text' type) */
+    like?: string;
+    /** Single value (for 'select' type) */
+    value?: AllowedValues;
+    /** Array of included values (for 'checkbox' type) */
+    includes?: AllowedValues[];
+    /** Array of excluded values */
+    excludes?: AllowedValues[];
+    /** Minimum value (for 'range' and 'dateRange' types) */
+    min?: number;
+    /** Maximum value (for 'range' and 'dateRange' types) */
+    max?: number;
+};
+/**
+ * Filter values object mapping filter IDs to their values.
+ */
+type FilterValues = Record<string, FilterValue | undefined>;
+/**
+ * Filter type definition for Filters component.
+ */
+type FilterType = {
+    /** Unique identifier for the filter */
+    id: string;
+    /** Type of filter input */
+    type: 'text' | 'select' | 'checkbox' | 'range' | 'dateRange';
+    /** Label displayed for the filter */
+    label: string;
+    /** Placeholder text for the filter input */
+    placeholder?: string;
+    /** Options for select and checkbox filters */
+    options?: {
+        /** Option label */
+        label: string;
+        /** Option value */
+        value: AllowedValues;
+        /** Optional icon for the option */
+        iconName?: IconName;
+        /** Whether the option is disabled */
+        disabled?: boolean;
+    }[];
+    /** Minimum value constraint (type-specific) */
+    minValue?: number;
+    /** Maximum value constraint (type-specific) */
+    maxValue?: number;
+    /** Validation function that returns error message if value is invalid */
+    getError?: (value: FilterValue | undefined) => string;
+};
+/**
+ * Filters component for advanced filtering interfaces.
+ *
+ * A comprehensive filter component that supports multiple filter types:
+ * text search, select dropdowns, checkboxes, numeric ranges, and date ranges.
+ * Provides a unified interface for complex filtering needs.
+ *
+ * @category Advanced
+ * @see Input
+ * @see Select
+ * @see Checkbox
+ * @see DateInput
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - minValue/maxValue constraints are type-specific:
+ *   - text: string length constraints
+ *   - select: not applicable
+ *   - checkbox: min/max number of checked items
+ *   - range: min/max numeric values
+ *   - dateRange: min/max date range constraints
+ * - Filter state should be clear to users
+ * - Keyboard navigation between filters
+ * - Active filters should be announced
+ *
+ * @example Basic usage with text filter
+ * ```tsx
+ * <Filters
+ *   filters={[
+ *     {
+ *       id: 'search',
+ *       type: 'text',
+ *       label: 'Search',
+ *       placeholder: 'Type to search...'
+ *     }
+ *   ]}
+ *   values={filterValues}
+ *   onFilterChange={(values) => setFilterValues(values)}
+ * />
+ * ```
+ *
+ * @example With multiple filter types
+ * ```tsx
+ * <Filters
+ *   filters={[
+ *     { id: 'name', type: 'text', label: 'Name' },
+ *     {
+ *       id: 'status',
+ *       type: 'select',
+ *       label: 'Status',
+ *       options: [
+ *         { label: 'Active', value: 'active' },
+ *         { label: 'Inactive', value: 'inactive' }
+ *       ]
+ *     },
+ *     {
+ *       id: 'tags',
+ *       type: 'checkbox',
+ *       label: 'Tags',
+ *       options: [
+ *         { label: 'Tag 1', value: 'tag1' },
+ *         { label: 'Tag 2', value: 'tag2' }
+ *       ]
+ *     }
+ *   ]}
+ *   values={filterValues}
+ *   onFilterChange={(values) => setFilterValues(values)}
+ * />
+ * ```
+ *
+ * @example With range filter
+ * ```tsx
+ * <Filters
+ *   filters={[
+ *     {
+ *       id: 'price',
+ *       type: 'range',
+ *       label: 'Price Range',
+ *       minValue: 0,
+ *       maxValue: 1000
+ *     }
+ *   ]}
+ *   values={filterValues}
+ *   onFilterChange={(values) => setFilterValues(values)}
+ * />
+ * ```
+ */
+interface FiltersProps {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Array of filter definitions.
+     *
+     * Each filter defines its type, label, options, and validation rules.
+     */
+    filters: FilterType[];
+    /**
+     * Current filter values object.
+     *
+     * Maps filter IDs to their current FilterValue objects.
+     */
+    values: FilterValues;
+    /**
+     * Callback function called when any filter value changes.
+     *
+     * Receives the updated FilterValues object with all current filter values.
+     *
+     * @param values - The updated FilterValues object
+     */
+    onFilterChange: (values: FilterValues) => void;
+}
+
+declare const Filters: React$1.MemoExoticComponent<(props: FiltersProps) => react_jsx_runtime.JSX.Element>;
+
+/**
+ * Flex component for flexible container layouts using CSS Flexbox.
+ *
+ * A layout component that provides a flexible container with convenient props
+ * for common flexbox patterns. Supports row/column direction, alignment,
+ * justification, spacing, and responsive behavior.
+ *
+ * @category Layout
+ * @see Divider
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Uses CSS Flexbox under the hood
+ * - Gap and padding use theme spacing units (multiplied by 4px base unit)
+ * - Default direction is column (vertical)
+ * - Full width by default (100%)
+ * - Supports all standard HTML div attributes
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Flex>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Flex>
+ * ```
+ *
+ * @example Row layout
+ * ```tsx
+ * <Flex row>
+ *   <Button>Left</Button>
+ *   <Button>Right</Button>
+ * </Flex>
+ * ```
+ *
+ * @example With gap and alignment
+ * ```tsx
+ * <Flex
+ *   row
+ *   gap={2}
+ *   align="center"
+ *   justify="space-between"
+ * >
+ *   <Text>Left</Text>
+ *   <Text>Right</Text>
+ * </Flex>
+ * ```
+ *
+ * @example Centered content
+ * ```tsx
+ * <Flex center>
+ *   <Text>Centered content</Text>
+ * </Flex>
+ * ```
+ *
+ * @example With padding
+ * ```tsx
+ * <Flex padding={4} gap={2}>
+ *   <Input />
+ *   <Button>Submit</Button>
+ * </Flex>
+ * ```
+ *
+ * @example Hoverable container
+ * ```tsx
+ * <Flex hoverable onClick={handleClick}>
+ *   <Text>Clickable container</Text>
+ * </Flex>
+ * ```
+ */
+interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Child elements to render inside the flex container.
+     */
+    children?: ReactNode;
+    /**
+     * Whether to use row (horizontal) direction instead of column (vertical).
+     *
+     * @default false
+     */
+    row?: boolean;
+    /**
+     * Alignment of flex items along the cross axis.
+     *
+     * @default 'center' for column direction, 'flex-start' for row
+     */
+    align?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
+    /**
+     * Justification of flex items along the main axis.
+     *
+     * @default 'flex-start'
+     */
+    justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+    /**
+     * Whether the flex container should grow to fill available space.
+     *
+     * @default false
+     */
+    grow?: boolean;
+    /**
+     * Width of the flex container.
+     *
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * Height of the flex container.
+     *
+     * @default undefined
+     */
+    height?: string;
+    /**
+     * Gap factor for spacing between flex items.
+     *
+     * Uses theme spacing units (multiplied by 4px base unit).
+     * Example: gap={2} = 8px gap
+     *
+     * @default undefined
+     */
+    gap?: number;
+    /**
+     * Padding factor for the flex container.
+     *
+     * Uses theme spacing units (multiplied by 4px base unit).
+     * Example: padding={4} = 16px padding
+     *
+     * @default undefined
+     */
+    padding?: number;
+    /**
+     * Whether to center items both vertically and horizontally.
+     *
+     * Sets both align and justify to 'center'.
+     *
+     * @default false
+     */
+    center?: boolean;
+    /**
+     * Whether the container should have hover effects.
+     *
+     * Adds cursor: pointer, background color change, and border radius on hover.
+     * Useful for clickable containers.
+     *
+     * @default false
+     */
+    hoverable?: boolean;
+}
+
+declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAttributes<any>>;
+
+/**
+ * Image component with lazy loading and fallback support.
+ *
+ * An image component that provides lazy loading, fallback content, and
+ * customizable styling. Supports all standard img attributes and provides
+ * consistent image display across the application.
+ *
+ * @category Data
+ * @see Avatar
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Supports lazy loading for performance
+ * - Fallback content displayed while image loads or if it fails
+ * - Alt text should be provided for meaningful images
+ * - Decorative images should have empty alt text
+ * - Clickable images should have proper keyboard support
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Image
+ *   src="/image.jpg"
+ *   alt="Description of image"
+ * />
+ * ```
+ *
+ * @example With fallback
+ * ```tsx
+ * <Image
+ *   src="/image.jpg"
+ *   alt="Product image"
+ *   fallback={<Spinner />}
+ * />
+ * ```
+ *
+ * @example With sizing
+ * ```tsx
+ * <Image
+ *   src="/image.jpg"
+ *   alt="Image"
+ *   width="200px"
+ *   height="200px"
+ * />
+ * ```
+ *
+ * @example With object fit
+ * ```tsx
+ * <Image
+ *   src="/image.jpg"
+ *   alt="Image"
+ *   objectFit="cover"
+ *   width="100%"
+ *   height="300px"
+ * />
+ * ```
+ *
+ * @example Clickable image
+ * ```tsx
+ * <Image
+ *   src="/image.jpg"
+ *   alt="Click to enlarge"
+ *   onClick={() => openLightbox()}
+ * />
+ * ```
+ */
+interface ImageProps {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Image source URL.
+     *
+     * @default undefined
+     */
+    src?: string;
+    /**
+     * Alt text for the image (required for meaningful images).
+     *
+     * For decorative images, use empty string ("").
+     *
+     * @default undefined
+     */
+    alt?: string;
+    /**
+     * Fallback content displayed while image loads or if it fails to load.
+     *
+     * @default undefined
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Callback function called when the image is clicked.
+     *
+     * @default undefined
+     */
+    onClick?: () => void;
+    /**
+     * Width of the image (CSS value).
+     *
+     * @default undefined
+     */
+    width?: string;
+    /**
+     * Height of the image (CSS value).
+     *
+     * @default undefined
+     */
+    height?: string;
+    /**
+     * CSS object-fit property for the image.
+     *
+     * @default 'contain'
+     */
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /**
+     * Background color of the image container (theme color or CSS value).
+     *
+     * @default 'backgroundLight'
+     */
+    backgroundColor?: string;
+    /**
+     * Border radius of the image (CSS value).
+     *
+     * @default undefined
+     */
+    borderRadius?: string;
+}
+
+declare const Image: React$1.ForwardRefExoticComponent<ImageProps & React$1.RefAttributes<any>>;
+
+/**
+ * Input component for single-line text entry with optional autocomplete dropdown.
+ *
+ * A flexible text input component that supports standard HTML input attributes
+ * and includes optional dropdown suggestions. When options are provided, the
+ * input automatically displays a dropdown menu with selectable suggestions as
+ * the user types.
+ *
+ * @category Forms
+ * @see InputContainer
+ * @see TextArea
+ * @see Select
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Supports all standard HTML input attributes (type, placeholder, disabled, etc.)
+ * - When options are provided, renders a Dropdown component automatically
+ * - Dropdown appears after user types and disappears when input is disabled
+ * - Use InputContainer for labels, error messages, and helper text
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Input
+ *   placeholder="Enter your name"
+ *   onTextChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @example With Enter key handler
+ * ```tsx
+ * <Input
+ *   placeholder="Press Enter to submit"
+ *   onTextChange={(value) => setValue(value)}
+ *   onEnter={() => handleSubmit()}
+ * />
+ * ```
+ *
+ * @example With autocomplete dropdown
+ * ```tsx
+ * <Input
+ *   placeholder="Enter email"
+ *   onTextChange={(value) => setValue(value)}
+ *   options={[
+ *     { value: 'user@gmail.com', label: 'user@gmail.com' },
+ *     { value: 'user@outlook.com', label: 'user@outlook.com' }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example With InputContainer for labels and errors
+ * ```tsx
+ * <InputContainer
+ *   label="Email Address"
+ *   error={errors.email}
+ *   helperText="We'll never share your email"
+ * >
+ *   <Input
+ *     type="email"
+ *     onTextChange={(value) => setEmail(value)}
+ *   />
+ * </InputContainer>
+ * ```
+ */
+interface InputProps extends AllHTMLAttributes<HTMLInputElement> {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Callback function that triggers when the input value changes.
+     *
+     * This callback receives the new string value of the input. Use this instead
+     * of the standard onChange event when you only need the value string.
+     *
+     * @param value - The new input value as a string
+     */
+    onTextChange?: (value: string) => void;
+    /**
+     * Callback function triggered when the user presses the Enter key.
+     *
+     * Useful for form submission or triggering actions on Enter key press.
+     */
+    onEnter?: () => void;
+    /**
+     * Optional dropdown options for autocomplete functionality.
+     *
+     * When provided, the input will automatically display a dropdown menu
+     * with these options as the user types. The dropdown appears after typing
+     * and disappears when the input is disabled or options are cleared.
+     *
+     * @default undefined
+     */
+    options?: {
+        /**
+         * The value that will be set when this option is selected
+         */
+        value: string;
+        /**
+         * The label displayed in the dropdown (can be React node or string)
+         */
+        label: React$1.ReactNode | string;
+        /**
+         * Whether this option is disabled and cannot be selected
+         *
+         * @default false
+         */
+        disabled?: boolean;
+    }[];
+}
+
+declare const Input: ({ className, value, onChange, onTextChange, onEnter, options, ...props }: InputProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * InputContainer component for wrapping form inputs with labels and error messages.
+ *
+ * A wrapper component that provides consistent styling and layout for form
+ * inputs with labels, error messages, and optional helper text. Should wrap
+ * Input, Select, TextArea, and other form components.
+ *
+ * @category Forms
+ * @see Input
+ * @see TextArea
+ * @see Select
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Provides consistent spacing and layout for form fields
+ * - Error messages animate in/out smoothly
+ * - Label is displayed in uppercase with headingXs variant
+ * - Right content (e.g., help icon) can be added alongside label
+ * - Use this component for all form inputs that need labels or error messages
+ *
+ * @example Basic usage with label
+ * ```tsx
+ * <InputContainer label="Email Address">
+ *   <Input
+ *     type="email"
+ *     onTextChange={(value) => setEmail(value)}
+ *   />
+ * </InputContainer>
+ * ```
+ *
+ * @example With error message
+ * ```tsx
+ * <InputContainer
+ *   label="Password"
+ *   error={errors.password}
+ * >
+ *   <Input
+ *     type="password"
+ *     onTextChange={(value) => setPassword(value)}
+ *   />
+ * </InputContainer>
+ * ```
+ *
+ * @example With right content
+ * ```tsx
+ * <InputContainer
+ *   label="API Key"
+ *   rightContent={<Tooltip content="Get your API key from settings">?</Tooltip>}
+ * >
+ *   <Input
+ *     onTextChange={(value) => setApiKey(value)}
+ *   />
+ * </InputContainer>
+ * ```
+ *
+ * @example With TextArea
+ * ```tsx
+ * <InputContainer
+ *   label="Description"
+ *   error={errors.description}
+ * >
+ *   <TextArea
+ *     value={description}
+ *     onTextChange={(value) => setDescription(value)}
+ *   />
+ * </InputContainer>
+ * ```
+ */
+interface InputContainerProps {
+    /**
+     * Label text or React node displayed above the input.
+     *
+     * Displayed in uppercase with headingXs typography variant.
+     *
+     * @default undefined
+     */
+    label?: string | React.ReactNode;
+    /**
+     * Form input component to wrap (Input, Select, TextArea, etc.).
+     *
+     * Any React node can be used, but typically form input components.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional content displayed to the right of the label.
+     *
+     * Useful for help icons, tooltips, or additional actions.
+     *
+     * @default undefined
+     */
+    rightContent?: React.ReactNode;
+    /**
+     * Error message displayed below the input.
+     *
+     * When provided, the error message animates in. When undefined or empty,
+     * the error container collapses with animation.
+     *
+     * @default undefined
+     */
+    error?: string;
+}
+
+declare const InputContainer: ({ label, children, rightContent, error }: InputContainerProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * LoadingPlaceholder component for skeleton loading states.
+ *
+ * A skeleton loading component that displays animated placeholder content
+ * while data is being loaded. Provides a better user experience than
+ * blank screens or spinners for content loading.
+ *
+ * @category Feedback
+ * @see Spinner
+ * @see Table
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Should have aria-label='Loading' for accessibility
+ * - Should be replaced with actual content when loaded
+ * - Use for skeleton screens and content placeholders
+ * - Better UX than spinners for content that has structure
+ *
+ * @example Basic usage
+ * ```tsx
+ * <LoadingPlaceholder width="200px" height="20px" />
+ * ```
+ *
+ * @example Multiple placeholders for skeleton screen
+ * ```tsx
+ * <Flex gap={2}>
+ *   <LoadingPlaceholder width="100%" height="100px" />
+ *   <LoadingPlaceholder width="80%" height="20px" />
+ *   <LoadingPlaceholder width="60%" height="20px" />
+ * </Flex>
+ * ```
+ *
+ * @example In table loading state
+ * ```tsx
+ * {isLoading ? (
+ *   <LoadingPlaceholder width="100%" height="400px" />
+ * ) : (
+ *   <Table data={data} columns={columns} />
+ * )}
+ * ```
+ */
+interface LoadingPlaceholderProps {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Width of the placeholder (CSS value).
+     *
+     * @default undefined
+     */
+    width?: string;
+    /**
+     * Height of the placeholder (CSS value).
+     *
+     * @default undefined
+     */
+    height?: string;
+}
+
+/**
+ *  Component used as a Shimmer during loading state in components. The `width` and `height` must be set for it to work properly.
+ */
+declare const LoadingPlaceholder: React$1.FC<LoadingPlaceholderProps>;
+
+declare function Modal({ open, setOpen, title, children, trigger }: {
+    open: any;
+    setOpen: any;
+    title: any;
+    children: any;
+    trigger: any;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Option type for MultiSelect component.
+ */
+interface MultiSelectOption {
+    /** The value of the option (must be unique) */
+    value: string;
+    /** The label displayed for the option */
+    label: string;
+}
+/**
+ * MultiSelect component for choosing multiple options from a searchable dropdown.
+ *
+ * A searchable multi-select component that allows users to select multiple
+ * options from a list. Includes a "Select all" checkbox, search functionality,
+ * and displays selected values in the input field when closed.
+ *
+ * @category Forms
+ * @see Select
+ * @see Dropdown
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Built on top of Dropdown and Checkbox components
+ * - Includes built-in search/filter functionality
+ * - Shows "Select all" option when dropdown is open
+ * - Selected values are displayed using the renderValues function
+ * - Use InputContainer for labels, error messages, and helper text
+ *
+ * @example Basic usage
+ * ```tsx
+ * <MultiSelect
+ *   values={selectedValues}
+ *   onChange={(values) => setSelectedValues(values)}
+ *   options={[
+ *     { value: 'opt1', label: 'Option 1' },
+ *     { value: 'opt2', label: 'Option 2' }
+ *   ]}
+ *   renderValues={(selected) => selected.map(o => o.label).join(', ')}
+ * />
+ * ```
+ *
+ * @example With placeholder
+ * ```tsx
+ * <MultiSelect
+ *   values={selectedValues}
+ *   onChange={(values) => setSelectedValues(values)}
+ *   options={options}
+ *   placeholder="Select options"
+ *   renderValues={(selected) => `${selected.length} selected`}
+ * />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <MultiSelect
+ *   values={selectedValues}
+ *   onChange={(values) => setSelectedValues(values)}
+ *   options={options}
+ *   renderValues={(selected) => selected.map(o => o.label).join(', ')}
+ *   disabled={true}
+ * />
+ * ```
+ */
+interface MultiSelectPropsType {
+    /**
+     * Currently selected values (array of option values).
+     *
+     * @default undefined
+     */
+    values?: string[];
+    /**
+     * Callback function called when selected values change.
+     *
+     * @param values - Array of selected option values
+     */
+    onChange: (values: string[]) => void;
+    /**
+     * Array of options to display in the dropdown.
+     *
+     * Each option must have a unique value and a label.
+     */
+    options: MultiSelectOption[];
+    /**
+     * Placeholder text displayed when no options are selected.
+     *
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Function to render the selected values when the dropdown is closed.
+     *
+     * This function receives the array of selected option objects and should
+     * return a string to display in the input field.
+     *
+     * @param values - Array of selected MultiSelectOption objects
+     * @returns String to display in the input field
+     */
+    renderValues: (values: MultiSelectOption[]) => string;
+    /**
+     * Whether the select is disabled and cannot be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const MultiSelect: ({ values, onChange, options, placeholder, renderValues, disabled }: MultiSelectPropsType) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Option type for Select component.
+ */
+interface SelectOption extends DropdownItemProps {
+    /**
+     * The value of the option (must be unique)
+     */
+    value: string;
+}
+/**
+ * Select component for choosing a single option from a dropdown list.
+ *
+ * A dropdown select component that displays a list of options when clicked.
+ * The selected value is shown in the trigger, and users can choose from the
+ * dropdown menu. Supports keyboard navigation and is built on top of the
+ * Dropdown component.
+ *
+ * @category Forms
+ * @see MultiSelect
+ * @see Dropdown
+ * @see Input
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Built on top of Dropdown component with small variant
+ * - Shows a checkmark icon next to the selected option
+ * - Full width by default (can be overridden)
+ * - Use InputContainer for labels, error messages, and helper text
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Select
+ *   value={selectedValue}
+ *   onChange={(value) => setSelectedValue(value)}
+ *   options={[
+ *     { value: 'option1', label: 'Option 1' },
+ *     { value: 'option2', label: 'Option 2' }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example With placeholder
+ * ```tsx
+ * <Select
+ *   value={selectedValue}
+ *   onChange={(value) => setSelectedValue(value)}
+ *   placeholder="Choose an option"
+ *   options={options}
+ * />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Select
+ *   value={selectedValue}
+ *   onChange={(value) => setSelectedValue(value)}
+ *   options={options}
+ *   disabled={true}
+ * />
+ * ```
+ *
+ * @example Custom variant and width
+ * ```tsx
+ * <Select
+ *   value={selectedValue}
+ *   onChange={(value) => setSelectedValue(value)}
+ *   options={options}
+ *   variant={DropdownVariant.normal}
+ *   fullWidth={false}
+ * />
+ * ```
+ */
+interface SelectPropsType {
+    /**
+     * Current selected value of the select.
+     *
+     * Should match one of the option values. If undefined, placeholder is shown.
+     *
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * Callback function called when the selected value changes.
+     *
+     * @param value - The newly selected option value
+     */
+    onChange: (value: string) => void;
+    /**
+     * Array of options to display in the dropdown.
+     *
+     * Each option must have a unique value and a label. Options can include
+     * additional DropdownItemProps for advanced customization.
+     */
+    options: SelectOption[];
+    /**
+     * Placeholder text displayed when no option is selected.
+     *
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Whether the select is disabled and cannot be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the select should take the full width of its container.
+     *
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Visual variant of the dropdown (small or normal).
+     *
+     * @default DropdownVariant.normal
+     */
+    variant?: DropdownVariant;
+}
+
+declare const Select: ({ value, onChange, options, placeholder, disabled, fullWidth, variant }: SelectPropsType) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Slideout component for side panel overlays.
+ *
+ * A slideout panel component that slides in from the side of the screen.
+ * Non-blocking overlay that allows interaction with the rest of the page.
+ * Supports resizing and includes accessibility features.
+ *
+ * @category Overlay
+ * @see Modal
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Non-blocking overlay (unlike Modal)
+ * - Slides in from the right side
+ * - Supports resizable width (stored in session storage)
+ * - Focus management on open/close
+ * - Escape key closes the slideout
+ * - Use for detail views, side panels, and non-critical overlays
+ *
+ * @example Basic usage with trigger
+ * ```tsx
+ * <Slideout
+ *   trigger={<Button>Open Panel</Button>}
+ *   title="Details"
+ * >
+ *   <Text>Panel content here</Text>
+ * </Slideout>
+ * ```
+ *
+ * @example Controlled slideout
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ *
+ * <Slideout
+ *   open={open}
+ *   setOpen={setOpen}
+ *   title="Edit Item"
+ * >
+ *   <InputContainer label="Name">
+ *     <Input onTextChange={(v) => setName(v)} />
+ *   </InputContainer>
+ * </Slideout>
+ * ```
+ *
+ * @example Resizable slideout
+ * ```tsx
+ * <Slideout
+ *   open={isOpen}
+ *   setOpen={setIsOpen}
+ *   title="Details"
+ *   resizable={true}
+ * >
+ *   <Text>Resizable panel content</Text>
+ * </Slideout>
+ * ```
+ *
+ * @example With custom title element
+ * ```tsx
+ * <Slideout
+ *   open={isOpen}
+ *   setOpen={setIsOpen}
+ *   title={<span>Custom <strong>Title</strong></span>}
+ * >
+ *   <Text>Content</Text>
+ * </Slideout>
+ * ```
+ */
+interface SlideoutProps {
+    /**
+     * Content to display in the slideout panel body.
+     *
+     * Can be any React node.
+     */
+    children: ReactNode;
+    /**
+     * Optional trigger element that opens the slideout when clicked.
+     *
+     * If provided, clicking this element will open the slideout. For controlled
+     * slideouts, this is optional.
+     *
+     * @default undefined
+     */
+    trigger?: ReactNode;
+    /**
+     * Controlled open state of the slideout.
+     *
+     * For controlled slideouts, use this with setOpen.
+     *
+     * @default undefined
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state changes.
+     *
+     * @param open - The new open state (boolean)
+     */
+    setOpen?: (open: boolean) => void;
+    /**
+     * Whether the slideout is disabled and cannot be opened.
+     *
+     * When true, only the trigger (children) is rendered, and the slideout
+     * cannot be opened.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible title announced to screen readers and displayed in header.
+     *
+     * Can be a string (truncated when overflowing) or a React node for
+     * custom styling.
+     */
+    title: string | ReactNode;
+    /**
+     * Whether the slideout can be resized by dragging the left edge.
+     *
+     * When true, users can drag the left edge to resize the panel width.
+     * The width is stored in session storage and persists during the session.
+     *
+     * @default false
+     */
+    resizable?: boolean;
+}
+
+/**
+ *
+ * A window overlaid on the current window that slides in from the right side of the screen.
+ * The slideout fills the entire screen vertically and resizes horizontally based on screen size. When on mobile (less than 600px wide) it fills the entire screen.
+ * It can be uncontrolled by passing in a trigger element (button) as children to the Slideout component to automatically handle the opening and closing of the slideout. This is the recommended way with best accessibility.
+ * Alternately, it can be controlled (using for example local state) by passing in `open` and `setOpen` props.
+ * The slideout can be resized (when `resizable` is `true`) by dragging the left edge of the slideout. The width is remembered within the current session.
+ *
+ */
+declare const Slideout: React$1.FC<SlideoutProps>;
+
+declare const Spinner: ({ width, color }: {
+    width: any;
+    color: any;
+}) => react_jsx_runtime.JSX.Element;
+
+/**
+ * StatusLabel component for displaying status indicators and badges.
+ *
+ * A status label component that displays text with optional icons and color
+ * coding. Useful for showing status, badges, tags, and state indicators.
+ * Supports tooltips for additional information.
+ *
+ * @category Data
+ * @see Text
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Color should not be the only indicator (include text/icon)
+ * - Status should be announced to screen readers
+ * - Tooltip provides additional context on hover
+ *
+ * @example Basic usage
+ * ```tsx
+ * <StatusLabel label="Active" color="green" />
+ * ```
+ *
+ * @example With icon
+ * ```tsx
+ * <StatusLabel
+ *   label="Pending"
+ *   color="yellow"
+ *   iconName="faClock"
+ * />
+ * ```
+ *
+ * @example With tooltip
+ * ```tsx
+ * <StatusLabel
+ *   label="Error"
+ *   color="red"
+ *   tooltip="This item has an error that needs attention"
+ * />
+ * ```
+ *
+ * @example Plain status
+ * ```tsx
+ * <StatusLabel label="Draft" color="plain" />
+ * ```
+ */
+interface StatusLabelProps {
+    /**
+     * Label text or React node to display.
+     *
+     * Can be a string or any React node for custom styling.
+     */
+    label: ReactNode | string;
+    /**
+     * Optional icon name to display after the label.
+     *
+     * @default undefined
+     */
+    iconName?: IconName;
+    /**
+     * Color variant of the status label.
+     *
+     * @default 'plain'
+     */
+    color?: 'green' | 'yellow' | 'red' | 'plain';
+    /**
+     * Optional tooltip content displayed on hover.
+     *
+     * Can be a string or React node.
+     *
+     * @default undefined
+     */
+    tooltip?: ReactNode | string;
+}
+
+declare const StatusLabel: React$1.ForwardRefExoticComponent<StatusLabelProps & React$1.RefAttributes<any>>;
+
+/**
+ * Switch component for on/off toggle states.
+ *
+ * A toggle switch component that allows users to switch between two states
+ * (on/off). Ideal for settings, feature toggles, and binary choices. Built on
+ * Radix UI Switch for accessibility.
+ *
+ * @category Forms
+ * @see Checkbox
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Built on Radix UI Switch for accessibility
+ * - Supports controlled and uncontrolled modes
+ * - Keyboard accessible (Space to toggle)
+ * - Use for single on/off toggles (not multiple selections)
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Switch
+ *   checked={isEnabled}
+ *   setChecked={(checked) => setIsEnabled(checked)}
+ *   label="Enable notifications"
+ * />
+ * ```
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <Switch
+ *   defaultChecked={true}
+ *   label="Dark mode"
+ * />
+ * ```
+ *
+ * @example With custom label
+ * ```tsx
+ * <Switch
+ *   checked={isEnabled}
+ *   setChecked={setIsEnabled}
+ *   label={<span>Enable <strong>feature</strong></span>}
+ * />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Switch
+ *   checked={true}
+ *   setChecked={setIsEnabled}
+ *   label="Cannot toggle"
+ *   disabled={true}
+ * />
+ * ```
+ */
+interface SwitchProps {
+    /**
+     * Whether the switch is checked (on) or unchecked (off).
+     *
+     * For controlled components, use this with setChecked.
+     *
+     * @default undefined
+     */
+    checked?: boolean;
+    /**
+     * Callback function triggered when the switch state changes.
+     *
+     * @param checked - The new checked state (boolean)
+     */
+    setChecked?: (checked: boolean) => void;
+    /**
+     * Label text or React node displayed next to the switch.
+     *
+     * Can be a string or any React node for custom styling.
+     *
+     * @default undefined
+     */
+    label?: ReactNode;
+    /**
+     * Whether the switch is disabled and cannot be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<any>>;
+
+/**
+ * Tab definition type for TabBar component.
+ */
+interface TabProps {
+    /**
+     * Unique identifier for the tab.
+     *
+     * Used to identify which tab is selected and must be unique within the tab bar.
+     */
+    value: string;
+    /**
+     * Tab label text or React node.
+     *
+     * Can be a string or React node (useful for icons).
+     */
+    label: string | ReactNode;
+}
+/**
+ * TabBar component for tab navigation between views.
+ *
+ * A tab navigation component that allows users to switch between different
+ * views or sections. Supports keyboard navigation and follows ARIA tabs
+ * pattern for accessibility.
+ *
+ * @category Navigation
+ * @see Button
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Follows ARIA tabs pattern for accessibility
+ * - Keyboard navigation with arrow keys
+ * - Active tab is clearly indicated
+ * - First tab is selected by default if no value is provided
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TabBar
+ *   tabs={[
+ *     { value: 'tab1', label: 'Tab 1' },
+ *     { value: 'tab2', label: 'Tab 2' }
+ *   ]}
+ *   onChange={(value) => setActiveTab(value)}
+ * />
+ * ```
+ *
+ * @example Controlled tabs
+ * ```tsx
+ * <TabBar
+ *   value={activeTab}
+ *   onChange={(value) => setActiveTab(value)}
+ *   tabs={tabs}
+ * />
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <TabBar
+ *   tabs={[
+ *     { value: 'home', label: <Icon name="faHome" /> },
+ *     { value: 'settings', label: <Icon name="faCog" /> }
+ *   ]}
+ *   onChange={(value) => navigate(value)}
+ * />
+ * ```
+ */
+interface TabBarProps {
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Value of the currently selected tab.
+     *
+     * If not provided, the first tab is selected by default.
+     *
+     * @default undefined (first tab)
+     */
+    value?: string;
+    /**
+     * Callback function fired when the selected tab changes.
+     *
+     * @param value - The value of the newly selected tab
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Array of tab definitions to display.
+     *
+     * Each tab must have a unique value and a label.
+     */
+    tabs: TabProps[];
+}
+
+declare const TabBar: React$1.MemoExoticComponent<({ className, value, onChange, tabs }: TabBarProps) => react_jsx_runtime.JSX.Element>;
+
+/**
+ * Column definition type for Table component.
+ */
+type TableColumnType = {
+    /** Unique key for the column, used to access data in row objects */
+    id: string;
+    /** Header content (string or React node) */
+    header: ReactNode;
+    /** Function to render cell content, receives the row object */
+    cell?: (row: Record<string, any>) => any;
+    /** Function to format the cell value before display */
+    formatter?: (value?: any, row?: Record<string, any>) => any;
+    /** Alignment of cell content */
+    align?: 'left' | 'center' | 'right';
+    /** Data type for sorting ('text' or 'number') */
+    type?: 'text' | 'number';
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Width of the column (CSS value) */
+    width?: string;
+    /** If true, column cannot be hidden when customization is enabled */
+    required?: boolean;
+};
+/**
+ * Pagination configuration type for Table component.
+ */
+type TablePaginationType = {
+    /** Current page number (1-indexed) */
+    page?: number;
+    /** Number of rows per page */
+    size?: number;
+    /** Total number of rows across all pages */
+    total?: number;
+};
+/**
+ * Sorting state type for Table component.
+ */
+type SortingType = {
+    /** Column ID to sort by */
+    column?: string;
+    /** Sort direction */
+    direction?: 'asc' | 'desc';
+};
+/**
+ * Table component for displaying tabular data with sorting, pagination, and customization.
+ *
+ * A comprehensive data table component that supports sorting, pagination, column
+ * customization, loading states, and empty states. Column visibility can be
+ * customized by users and saved to localStorage. Built with accessibility in mind.
+ *
+ * @category Data
+ * @see Text
+ * @see StatusLabel
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Column customizations are saved to localStorage using the table id
+ * - Supports keyboard navigation for sortable columns
+ * - Loading state shows skeleton rows
+ * - Empty state displayed when data is empty and not loading
+ * - Row click handlers for interactive rows
+ * - Column customization allows users to show/hide columns
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Table
+ *   id="users-table"
+ *   columns={[
+ *     { id: 'name', header: 'Name', cell: (row) => row.name },
+ *     { id: 'email', header: 'Email', cell: (row) => row.email }
+ *   ]}
+ *   data={users}
+ * />
+ * ```
+ *
+ * @example With sorting
+ * ```tsx
+ * <Table
+ *   id="products-table"
+ *   columns={[
+ *     { id: 'name', header: 'Name', sortable: true },
+ *     { id: 'price', header: 'Price', sortable: true, type: 'number' }
+ *   ]}
+ *   data={products}
+ *   sorting={sorting}
+ *   onSortChange={(newSorting) => setSorting(newSorting)}
+ * />
+ * ```
+ *
+ * @example With pagination
+ * ```tsx
+ * <Table
+ *   id="items-table"
+ *   columns={columns}
+ *   data={items}
+ *   pagination={{
+ *     page: currentPage,
+ *     size: pageSize,
+ *     total: totalItems
+ *   }}
+ *   onPaginationChange={(pagination) => handlePageChange(pagination)}
+ * />
+ * ```
+ *
+ * @example With loading state
+ * ```tsx
+ * <Table
+ *   id="data-table"
+ *   columns={columns}
+ *   data={data}
+ *   isLoading={isLoading}
+ * />
+ * ```
+ *
+ * @example With empty state
+ * ```tsx
+ * <Table
+ *   id="results-table"
+ *   columns={columns}
+ *   data={results}
+ *   emptyState={<Text>No results found</Text>}
+ * />
+ * ```
+ */
+interface TableProps {
+    /**
+     * Unique identifier for the table.
+     *
+     * Used as a key for saving column customizations to localStorage.
+     * Each table instance should have a unique id.
+     */
+    id: string;
+    /**
+     * Array of column definitions.
+     *
+     * Each column defines how data is displayed in that column.
+     */
+    columns: TableColumnType[];
+    /**
+     * Array of row data objects.
+     *
+     * Each object should have keys corresponding to column ids.
+     *
+     * @default undefined
+     */
+    data?: Record<string, any>[];
+    /**
+     * Whether the table is in a loading state.
+     *
+     * When true, displays skeleton loading rows.
+     *
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Content to display when data is empty and not loading.
+     *
+     * @default undefined
+     */
+    emptyState?: ReactNode;
+    /**
+     * Optional header content displayed above the table.
+     *
+     * @default undefined
+     */
+    header?: ReactNode;
+    /**
+     * Callback function called when a row is clicked.
+     *
+     * @param row - The row data object that was clicked
+     */
+    onRowClick?: (row: Record<string, any>) => void;
+    /**
+     * Current sorting state.
+     *
+     * @default undefined
+     */
+    sorting?: SortingType;
+    /**
+     * Callback function called when sorting changes.
+     *
+     * @param sorting - The new sorting state
+     */
+    onSortChange?: (sorting: SortingType) => void;
+    /**
+     * Pagination configuration.
+     *
+     * When provided, pagination controls are rendered and onPaginationChange
+     * is called when page/size changes.
+     *
+     * @default undefined
+     */
+    pagination?: TablePaginationType;
+    /**
+     * Callback function called when pagination changes.
+     *
+     * @param pagination - The new pagination state
+     */
+    onPaginationChange?: (pagination: TablePaginationType) => void;
+    /**
+     * Whether to disable column customization feature.
+     *
+     * When true, the customization button is hidden.
+     *
+     * @default false
+     */
+    disableCustomization?: boolean;
+    /**
+     * Fixed height of the table container.
+     *
+     * When provided, the table body becomes scrollable.
+     *
+     * @default undefined
+     */
+    height?: string;
+}
+
+declare const Table: React$1.FC<TableProps>;
+
+declare const TYPOGRAPHY: {
+    [k: string]: string;
+};
+
+/**
+ * Typography variant type from theme.
+ */
+type TextVariant = keyof typeof TYPOGRAPHY;
+/**
+ * Text component for displaying typography with theme-based styling.
+ *
+ * A versatile text component that provides consistent typography across the
+ * application. Supports all typography variants from the theme, custom colors,
+ * alignment, and text transformations. Use semantic HTML elements for headings.
+ *
+ * @category Data
+ * @see StatusLabel
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Supports all typography variants from theme
+ * - Use semantic HTML (h1, h2, etc.) for headings when appropriate
+ * - Color contrast should meet WCAG standards
+ * - Truncate prop adds ellipsis for overflow text
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Text>Hello World</Text>
+ * ```
+ *
+ * @example Different variants
+ * ```tsx
+ * <Text variant="headingLg">Large Heading</Text>
+ * <Text variant="headingMd">Medium Heading</Text>
+ * <Text variant="bodyMd">Body Text</Text>
+ * <Text variant="bodySm">Small Text</Text>
+ * ```
+ *
+ * @example With color
+ * ```tsx
+ * <Text color="primary">Primary colored text</Text>
+ * <Text color="#ff0000">Red text</Text>
+ * ```
+ *
+ * @example With alignment
+ * ```tsx
+ * <Text align="center">Centered text</Text>
+ * <Text align="right">Right aligned text</Text>
+ * ```
+ *
+ * @example With transformations
+ * ```tsx
+ * <Text uppercase>Uppercase Text</Text>
+ * <Text underline>Underlined Text</Text>
+ * <Text truncate>Long text that will be truncated...</Text>
+ * ```
+ */
+interface TextProps extends AllHTMLAttributes<HTMLSpanElement> {
+    /**
+     * Text content to display.
+     */
+    children: ReactNode;
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Typography variant from the theme.
+     *
+     * @default 'bodySm'
+     */
+    variant?: TextVariant;
+    /**
+     * Text alignment.
+     *
+     * @default 'left'
+     */
+    align?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end' | 'match-parent';
+    /**
+     * Font weight override.
+     *
+     * Can be a number (400, 500, 600, 700) or string.
+     * Regular: 400, Medium: 500, Semibold: 600, Bold: 700
+     *
+     * @default undefined (uses variant default)
+     */
+    fontWeight?: string | number;
+    /**
+     * Text color (theme color name or CSS color value).
+     *
+     * Examples: 'textNormal', '#ff0000', 'rgb(255, 0, 0)'
+     *
+     * @default 'textDark'
+     */
+    color?: string;
+    /**
+     * Whether to render text in uppercase.
+     *
+     * @default false
+     */
+    uppercase?: boolean;
+    /**
+     * Whether to render text with underline.
+     *
+     * @default false
+     */
+    underline?: boolean;
+    /**
+     * Whether to truncate text with ellipsis when it overflows.
+     *
+     * @default false
+     */
+    truncate?: boolean;
+}
+
+declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * TextArea component for multi-line text input.
+ *
+ * A multi-line text input component for longer form content such as comments,
+ * descriptions, and messages. Supports standard textarea attributes and
+ * integrates with InputContainer for labels and error messages.
+ *
+ * @category Forms
+ * @see Input
+ * @see InputContainer
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Supports all standard HTML textarea attributes
+ * - Resizable by default (can be controlled via CSS)
+ * - Use InputContainer for labels, error messages, and helper text
+ * - For single-line text, use Input component instead
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TextArea
+ *   value={message}
+ *   onTextChange={(value) => setMessage(value)}
+ *   placeholder="Enter your message"
+ * />
+ * ```
+ *
+ * @example With InputContainer
+ * ```tsx
+ * <InputContainer
+ *   label="Comments"
+ *   error={errors.comments}
+ *   helperText="Maximum 500 characters"
+ * >
+ *   <TextArea
+ *     value={comments}
+ *     onTextChange={(value) => setComments(value)}
+ *   />
+ * </InputContainer>
+ * ```
+ *
+ * @example With max length
+ * ```tsx
+ * <TextArea
+ *   value={description}
+ *   onTextChange={(value) => setDescription(value)}
+ *   maxLength={500}
+ *   placeholder="Enter description (max 500 chars)"
+ * />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <TextArea
+ *   value={readOnlyText}
+ *   onTextChange={() => {}}
+ *   disabled={true}
+ * />
+ * ```
+ */
+interface TextAreaProps {
+    /**
+     * The current value of the textarea.
+     *
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * Callback function triggered when the textarea value changes.
+     *
+     * This callback receives the new string value of the textarea.
+     *
+     * @param value - The new textarea value as a string
+     */
+    onTextChange?: (value: string) => void;
+    /**
+     * Whether the textarea is disabled and cannot be edited.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text displayed when the textarea is empty.
+     *
+     * @default undefined
+     */
+    placeholder?: string;
+}
+
+declare const TextArea: ({ value, onTextChange, disabled, placeholder }: TextAreaProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * TimeInput component for time entry with validation.
+ *
+ * A time input component that allows users to enter time values in HH:mm
+ * format (24-hour format). Includes validation to ensure valid time values
+ * and integrates with InputContainer for labels and error messages.
+ *
+ * @category Forms
+ * @see DateInput
+ * @see DatePicker
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Uses HH:mm format (24-hour format)
+ * - Includes built-in time validation
+ * - Use InputContainer for labels, error messages, and helper text
+ * - For date and time together, consider using DatePicker with time support
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TimeInput
+ *   value={timeValue}
+ *   onChange={(value) => setTimeValue(value)}
+ *   placeholder="HH:mm"
+ * />
+ * ```
+ *
+ * @example With InputContainer
+ * ```tsx
+ * <InputContainer
+ *   label="Start Time"
+ *   error={errors.startTime}
+ * >
+ *   <TimeInput
+ *     value={startTime}
+ *     onChange={(value) => setStartTime(value)}
+ *   />
+ * </InputContainer>
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <TimeInput
+ *   value="14:30"
+ *   onChange={() => {}}
+ *   disabled={true}
+ * />
+ * ```
+ */
+interface TimeInputProps {
+    /**
+     * Current time value in HH:mm format (24-hour format).
+     *
+     * Example: "14:30" for 2:30 PM
+     *
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * Callback function called when the time value changes.
+     *
+     * @param value - The new time value in HH:mm format
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Placeholder text displayed when the input is empty.
+     *
+     * Should indicate the expected format (e.g., "HH:mm").
+     *
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled and cannot be edited.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const TimeInput: React$1.ForwardRefExoticComponent<TimeInputProps & React$1.RefAttributes<any>>;
+
+/**
+ * Tooltip component for displaying contextual information on hover or focus.
+ *
+ * A tooltip component built on Radix UI Tooltip that displays additional
+ * information when users hover over or focus on an element. Supports
+ * positioning, alignment, and custom styling.
+ *
+ * @category Feedback
+ * @see ClickableIcon
+ *
+ * @remarks
+ * - Requires UIProvider wrapper for theming
+ * - Built on Radix UI Tooltip for accessibility
+ * - Keyboard accessible (focus triggers tooltip)
+ * - Screen reader support
+ * - Should not be the only way to access important information
+ * - Positioning adjusts automatically to avoid collisions
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ * ```
+ *
+ * @example With ClickableIcon
+ * ```tsx
+ * <Tooltip content="Delete item">
+ *   <ClickableIcon
+ *     iconName="faTrash"
+ *     onClick={handleDelete}
+ *     aria-label="Delete"
+ *   />
+ * </Tooltip>
+ * ```
+ *
+ * @example Custom positioning
+ * ```tsx
+ * <Tooltip
+ *   content="Tooltip on the right"
+ *   side="right"
+ *   align="start"
+ * >
+ *   <Button>Hover</Button>
+ * </Tooltip>
+ * ```
+ *
+ * @example Dark style
+ * ```tsx
+ * <Tooltip
+ *   content="Dark tooltip"
+ *   style="dark"
+ * >
+ *   <Button>Hover</Button>
+ * </Tooltip>
+ * ```
+ *
+ * @example With custom width
+ * ```tsx
+ * <Tooltip
+ *   content="This is a longer tooltip that needs more width"
+ *   width="300px"
+ * >
+ *   <Button>Hover</Button>
+ * </Tooltip>
+ * ```
+ */
+interface TooltipProps {
+    /**
+     * Child element that triggers the tooltip on hover or focus.
+     *
+     * Can be any React node.
+     */
+    children: ReactNode;
+    /**
+     * CSS class name for styled-components styling.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Content to display inside the tooltip.
+     *
+     * Can be a string or React node.
+     *
+     * @default undefined
+     */
+    content?: string | ReactNode;
+    /**
+     * Whether the tooltip is disabled and will not render.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Side of the trigger where the tooltip should render.
+     *
+     * Automatically adjusts if there's not enough space.
+     *
+     * @default 'top'
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Distance in pixels between the trigger and tooltip.
+     *
+     * @default 0
+     */
+    sideOffset?: number;
+    /**
+     * Alignment of the tooltip relative to the trigger.
+     *
+     * Automatically adjusts if there's not enough space.
+     *
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Offset in pixels from the alignment position.
+     *
+     * @default 0
+     */
+    alignOffset?: number;
+    /**
+     * Visual style variant of the tooltip.
+     *
+     * @default 'light'
+     */
+    style?: 'light' | 'dark';
+    /**
+     * Width of the tooltip (CSS value).
+     *
+     * @default 'auto'
+     */
+    width?: string;
+}
+
+declare const Tooltip: ({ children, side, sideOffset, align, alignOffset, style, content, disabled, width, className }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+declare const UIProvider: ({ children, locale }: {
+    children: React$1.ReactNode;
+    locale: string;
+}) => react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps, Banner, Button, ButtonVariant, Calendar, Checkbox, ClickableIcon, CurrencyInput, type CurrencyInputProps, DateInput, DatePicker, Divider, DragList, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, DropdownVariant, Filters, type FiltersProps, Flex, type FlexProps, Icon, type IconName, type IconProps, type IconStyle, Image, Input, InputContainer, type InputContainerProps, type InputProps, LoadingPlaceholder, Modal, MultiSelect, Select, Slideout, Spinner, StatusLabel, Switch, TabBar, Table, Text, TextArea, type TextProps, TimeInput, Tooltip, type TooltipProps, UIProvider };