@cleen/ui 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,2959 @@
+import * as react from 'react';
+import react__default, { ComponentProps, ReactNode, CSSProperties, SVGProps, ChangeEvent, ButtonHTMLAttributes, JSX, ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Position, ComponentClassnames, ComponentStyles, HintedString } from '@cleen/ui-core';
+import { WaveSurferOptions } from 'wavesurfer.js';
+import { RecordPluginOptions } from 'wavesurfer.js/dist/plugins/record.js';
+import { WaveSurferOptions as WaveSurferOptions$1 } from 'wavesurfer.js/dist/types.js';
+import { DayPickerProps, DateRange } from 'react-day-picker';
+import * as react_toastify from 'react-toastify';
+import { ToastOptions, ToastContainerProps } from 'react-toastify';
+import ReactSelect, { SelectInstance, GroupBase } from 'react-select';
+
+interface TooltipProps extends ComponentProps<'div'> {
+    label?: ReactNode;
+    invertColors?: boolean;
+    placement?: Position;
+    bg?: string;
+    closeOnClick?: boolean;
+    hideOnMouseDown?: boolean;
+    isOpen?: boolean;
+    isDisabled?: boolean;
+    hasArrow?: boolean;
+    openDelay?: number;
+    offset?: number;
+    classNames?: {
+        container?: string;
+        labelContainer?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        labelContainer?: CSSProperties;
+    };
+}
+/**
+ * Hover-activated tooltip that portals a label relative to its trigger child.
+ *
+ * - Wrap any element as `children`; the tooltip appears when it is hovered or focused.
+ * - Control position with `placement` (any `Position` value) and tweak gap with `offset`.
+ * - Delay opening by `openDelay` milliseconds to avoid flickery quick-hovers.
+ * - Use `isOpen` for fully controlled mode; `isDisabled` to suppress rendering entirely.
+ * - Override bubble colors with `bg` / `color`, or enable `invertColors` for a dark-on-light style.
+ * - Accepts `classNames` and `styles` for keys: `container`, `labelContainer`.
+ */
+declare const Tooltip: ({ bg, label, color, closeOnClick, hideOnMouseDown, isOpen, children, hasArrow, placement, offset, className, classNames, isDisabled, openDelay, invertColors, style, styles, onClick, onMouseEnter, onMouseLeave, ...props }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+interface Bar {
+    type: 'bar';
+    start?: number;
+    end?: number;
+}
+interface Clamp {
+    type: 'clamp';
+    value?: number;
+}
+type Serie = (Bar | Clamp) & {
+    color?: string;
+    height?: number;
+    label?: ReactNode;
+    tooltip?: TooltipProps;
+};
+interface AdvancedProgressBarProps extends ComponentProps<'div'> {
+    series?: Serie[];
+    classNames?: {
+        container?: string;
+        track?: string;
+        bar?: string;
+        clamp?: string;
+        labels?: string;
+        label?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        track?: CSSProperties;
+        bar?: CSSProperties;
+        clamp?: CSSProperties;
+        label?: CSSProperties;
+        labels?: CSSProperties;
+    };
+    track?: {
+        color?: string;
+        height?: number;
+    };
+    minValue?: number;
+    maxValue?: number;
+    renderAnimated?: boolean;
+    renderAnimatedDuration?: number;
+}
+
+/**
+ * The `AdvancedProgressBar` component renders a customizable progress track with support for multiple overlapping bars and clamp markers.
+ *
+ * - Each item in `series` is either a `bar` (with `start`/`end` range) or a `clamp` (a single `value` marker).
+ * - Supports optional labels and tooltips per series item.
+ * - The `track` prop controls the track's background color and height.
+ * - Use `minValue`/`maxValue` to define the scale range (defaults to 0–100).
+ * - Set `renderAnimated` to animate bars from their start to end values; control speed via `renderAnimatedDuration`.
+ * - Accepts `classNames` and `styles` to customize: `container`, `track`, `bar`, `clamp`, `labels`, `label`.
+ */
+declare const AdvancedProgressBar: react.ForwardRefExoticComponent<Omit<AdvancedProgressBarProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type ButtonVariant = 'borderless' | 'borderless-blue' | 'borderless-success' | 'group' | 'secondary' | 'secondary-blue' | 'primary' | 'disable' | 'error' | 'warning';
+
+type ButtonProps = ComponentProps<'button'> & {
+    variant?: ButtonVariant;
+    label?: ReactNode;
+    fullWidth?: boolean;
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    loaderColor?: string;
+    dataModalTarget?: string;
+    'data-testid'?: string;
+    classNames?: {
+        container?: string;
+        loaderContainer?: string;
+        loader?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        loaderContainer?: CSSProperties;
+        loader?: CSSProperties;
+    };
+};
+/**
+ * The `Button` component is used to trigger an action or event, such as submitting a form, opening a dialog, or performing a specific task. It is a fundamental UI element that users interact with to initiate various operations within an application.
+ */
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+type WaveSurferHookOptions$1 = Omit<WaveSurferOptions, 'container' | 'url'>;
+interface AudioPlaybackProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** URL of the audio file to play */
+    url: string;
+    options?: WaveSurferHookOptions$1;
+    classNames?: {
+        container?: string;
+        controls?: string;
+        playButton?: ComponentClassnames<ButtonProps>;
+        waveform?: string;
+        timestamp?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        controls?: CSSProperties;
+        playButton?: ComponentStyles<ButtonProps>;
+        waveform?: CSSProperties;
+        timestamp?: CSSProperties;
+    };
+}
+/**
+ * The `AudioPlayback` component renders an interactive audio player with a waveform
+ * visualization, a play/pause control, and a current/total time display.
+ *
+ * - Provide a `url` pointing to the audio file.
+ * - Use `waveColor` / `progressColor` to theme the waveform.
+ * - Accepts `classNames` and `styles` to customize: `container`, `controls`, `playButton`, `waveform`, `timestamp`.
+ */
+declare const AudioPlayback: react.ForwardRefExoticComponent<Omit<AudioPlaybackProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface AudioRecorderLabels {
+    startRecording: ReactNode;
+}
+
+type WaveSurferHookOptions = Omit<WaveSurferOptions$1, 'container' | 'plugins' | 'splitChannels'> & {
+    regionColor?: string;
+};
+interface AudioRecorderProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** Fired when a recording is finalized; receives the raw Blob and a transient blob-URL */
+    onFinalize?: (blob: Blob, url: string) => void;
+    /** Options forwarded to the WaveSurfer RecordPlugin */
+    recordOptions?: RecordPluginOptions;
+    /** Options forwarded to the WaveSurfer hook */
+    options?: WaveSurferHookOptions;
+    labels?: Partial<AudioRecorderLabels>;
+    classNames?: {
+        container?: string;
+        startButton?: string;
+        startLabel?: string;
+        stopButton?: string;
+        waveform?: string;
+        recordedContainer?: string;
+        timestamp?: string;
+        trimmedTimestamp?: string;
+        playPauseButton?: ComponentClassnames<ButtonProps>;
+        discardButton?: ComponentClassnames<ButtonProps>;
+        trimButton?: ComponentClassnames<ButtonProps>;
+        finalizeButton?: ComponentClassnames<ButtonProps>;
+    };
+    styles?: {
+        container?: CSSProperties;
+        startButton?: CSSProperties;
+        startLabel?: CSSProperties;
+        stopButton?: CSSProperties;
+        waveform?: CSSProperties;
+        recordedContainer?: CSSProperties;
+        timestamp?: CSSProperties;
+        trimmedTimestamp?: CSSProperties;
+        playPauseButton?: ComponentStyles<ButtonProps>;
+        discardButton?: ComponentStyles<ButtonProps>;
+        trimButton?: ComponentStyles<ButtonProps>;
+        finalizeButton?: ComponentStyles<ButtonProps>;
+    };
+}
+
+/**
+ * `AudioRecorder` captures audio from the microphone with a live waveform preview.
+ * After stopping, a resizable trim region appears — drag its handles to select the
+ * desired clip, then hit the scissors button to apply. The trash button discards
+ * the whole recording.
+ *
+ * - `onFinalize(blob, url)` fires when the user confirms the final recording.
+ * - `recordOptions` are forwarded directly to the WaveSurfer `RecordPlugin`.
+ * - `options` controls the WaveSurfer instance (waveColor, height, regionColor, etc.).
+ * - `labels` allows overriding UI strings (e.g. `startRecording`).
+ * - Accepts `classNames` / `styles` for: `container`, `startButton`, `startLabel`,
+ *   `stopButton`, `waveform`, `recordedContainer`, `timestamp`, `trimmedTimestamp`,
+ *   `playPauseButton`, `discardButton`, `trimButton`, `finalizeButton`.
+ */
+declare const AudioRecorder: react.ForwardRefExoticComponent<Omit<AudioRecorderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type AvatarProps = Omit<ComponentProps<'div'>, 'children'> & {
+    name?: string;
+    src?: string;
+    alt?: string;
+    size?: AvatarSize | number;
+    initialsLength?: 1 | 2;
+    isSelected?: boolean;
+    showBorder?: boolean;
+    fallback?: ReactNode;
+    classNames?: {
+        container?: string;
+        avatar?: string;
+        avatarSelected?: string;
+        image?: string;
+        fallback?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        avatar?: CSSProperties;
+        avatarSelected?: CSSProperties;
+        image?: CSSProperties;
+        fallback?: CSSProperties;
+    };
+};
+/**
+ * Avatar component displays a user's profile picture or initials.
+ *
+ * - Supports image source via `src` prop or displays first letter of `name` as fallback.
+ * - Configurable `size` variants: xs, sm, md, lg, xl.
+ * - Optional `isSelected` state changes border color to primary.
+ * - Accepts `classNames` and `styles` objects to customize:
+ *   `container`, `avatar`, `image`, and `fallback`.
+ * - Forwards remaining div props and ref to the root element.
+ */
+declare const Avatar: react.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type AvatarRowProps = Omit<ComponentProps<'div'>, 'children'> & {
+    avatars?: AvatarProps[];
+    size?: AvatarSize;
+    selectedAvatars?: string[];
+    onAvatarToggle?: (id: string) => void;
+    gap?: number;
+    maxVisible?: number;
+    maxExtra?: number;
+    showBorder?: boolean;
+    initialsLength?: 1 | 2;
+    fallback?: ReactNode;
+    classNames?: {
+        container?: string;
+        row?: string;
+        avatar?: ComponentClassnames<AvatarProps>;
+        extra?: ComponentClassnames<AvatarProps>;
+    };
+    styles?: {
+        container?: CSSProperties;
+        row?: CSSProperties;
+        avatar?: ComponentStyles<AvatarProps>;
+        extra?: ComponentStyles<AvatarProps>;
+    };
+};
+/**
+ * AvatarRow displays multiple user avatars in a horizontal row.
+ *
+ * - Renders a list of `avatars` with Avatar components.
+ * - Supports `selectedAvatars` array to highlight selected avatars using their `id`.
+ * - Optional `onAvatarToggle` callback fired when an avatar is clicked.
+ * - Configurable `size`, `gap`, `maxVisible` (shows +N for overflow), and `showBorder`.
+ * - Accepts `classNames` and `styles` objects to customize:
+ *   `container`, `row`, `avatar`, and `extra`.
+ * - Forwards remaining div props and ref to the root element.
+ * - By default each avatar has a zIndex based on its position from the left to create a stacking effect.
+ */
+declare const AvatarRow: react.ForwardRefExoticComponent<Omit<AvatarRowProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface BreadcrumbSegment {
+    path: string;
+    icon?: ReactNode;
+    label?: ReactNode;
+    id?: string;
+}
+type BreadcrumbProps = ComponentProps<'div'> & {
+    root?: BreadcrumbSegment | null;
+    segments?: BreadcrumbSegment[];
+    classNames?: {
+        container?: string;
+        list?: string;
+        item?: string;
+        link?: string;
+        chevron?: string;
+        rootItem?: string;
+        rootLink?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        list?: CSSProperties;
+        item?: CSSProperties;
+        link?: CSSProperties;
+        chevron?: CSSProperties;
+        rootItem?: CSSProperties;
+        rootLink?: CSSProperties;
+    };
+};
+/**
+ * The `Breadcrumb` component displays the navigation path to the current page, helping users understand their location within the application's hierarchy. It supports custom segments, icons, and styling for flexible integration.
+ */
+declare const Breadcrumb: react.ForwardRefExoticComponent<Omit<BreadcrumbProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type CardProps = ComponentProps<'div'> & {
+    header?: {
+        title?: ReactNode;
+        content?: ReactNode;
+        hasDivider?: boolean;
+    };
+    footer?: {
+        content?: ReactNode;
+        hasDivider?: boolean;
+    };
+    color?: string;
+    isGlass?: boolean;
+    p?: number;
+    gap?: number;
+    hoverable?: boolean;
+    classNames?: {
+        container?: string;
+        childrenContainer?: string;
+        header?: {
+            title?: string;
+            content?: string;
+            divider?: string;
+        };
+        footer?: {
+            content?: string;
+            divider?: string;
+        };
+    };
+    styles?: {
+        container?: CSSProperties;
+        childrenContainer?: CSSProperties;
+        header?: {
+            title?: CSSProperties;
+            content?: CSSProperties;
+            divider?: CSSProperties;
+        };
+        footer?: {
+            content?: CSSProperties;
+            divider?: CSSProperties;
+        };
+    };
+};
+/**
+ * The `Card` component is a versatile container used to display content in a structured format, optionally with a header and footer. The header and footer can include content and optional dividers.
+ */
+declare const Card: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type IconProps = SVGProps<SVGSVGElement> & {
+    color1?: string;
+    color2?: string;
+};
+declare enum IconName {
+    AlertCircle = "AlertCircle",
+    AlertFeatured = "AlertFeatured",
+    AlertOctagon = "AlertOctagon",
+    AlertTriangle = "AlertTriangle",
+    AlignRight = "AlignRight",
+    ArrowDown = "ArrowDown",
+    ArrowLeft = "ArrowLeft",
+    ArrowLeft2 = "ArrowLeft2",
+    ArrowRight = "ArrowRight",
+    ArrowToTop = "ArrowToTop",
+    ArrowUp = "ArrowUp",
+    ArrowUpRight = "ArrowUpRight",
+    ArrowUpRightNarrow = "ArrowUpRightNarrow",
+    ArrowUpRightSquare = "ArrowUpRightSquare",
+    Attachment = "Attachment",
+    BarChartSquare = "BarChartSquare",
+    Bold = "Bold",
+    BookmarkCheck = "BookmarkCheck",
+    BookmarkCheckFill = "BookmarkCheckFill",
+    BookmarkPlus = "BookmarkPlus",
+    BookmarkX = "BookmarkX",
+    BoxLines = "BoxLines",
+    BoxText = "BoxText",
+    BracketsCheck = "BracketsCheck",
+    BracketsEllipses = "BracketsEllipses",
+    Building = "Building",
+    Calendar = "Calendar",
+    CertificateHeart = "CertificateHeart",
+    Check = "Check",
+    CheckCircle = "CheckCircle",
+    CheckCircleBroken = "CheckCircleBroken",
+    CheckFill = "CheckFill",
+    CheckVerified = "CheckVerified",
+    ChevronDown = "ChevronDown",
+    ChevronLeft = "ChevronLeft",
+    ChevronLeftDouble = "ChevronLeftDouble",
+    ChevronRight = "ChevronRight",
+    ChevronRightDouble = "ChevronRightDouble",
+    ChevronSelectorVertical = "ChevronSelectorVertical",
+    ChevronUp = "ChevronUp",
+    CircleSwap = "CircleSwap",
+    ClockFastForward = "ClockFastForward",
+    ClockRewind = "ClockRewind",
+    ClockRewind2 = "ClockRewind2",
+    CodeBrowser = "CodeBrowser",
+    CodeCircle = "CodeCircle",
+    Colors = "Colors",
+    ColumnEdit = "ColumnEdit",
+    Copy = "Copy",
+    Copy2 = "Copy2",
+    Copy3 = "Copy3",
+    Copy4 = "Copy4",
+    Copy5 = "Copy5",
+    CopyCheck = "CopyCheck",
+    Cube = "Cube",
+    CubeOutline = "CubeOutline",
+    CursorBox = "CursorBox",
+    Dataflow = "Dataflow",
+    Dataflow2 = "Dataflow2",
+    Dataflow3 = "Dataflow3",
+    Delete = "Delete",
+    DollarCircle = "DollarCircle",
+    DotsGrid = "DotsGrid",
+    DotsHorizontal = "DotsHorizontal",
+    DotsVertical = "DotsVertical",
+    Edit = "Edit",
+    Editable = "Editable",
+    Expand = "Expand",
+    Eye = "Eye",
+    EyeHidden = "EyeHidden",
+    EyeHidden2 = "EyeHidden2",
+    FaceSmile = "FaceSmile",
+    Filter = "Filter",
+    Filter2 = "Filter2",
+    Flag = "Flag",
+    Flag2 = "Flag2",
+    Flag3 = "Flag3",
+    HandShield = "HandShield",
+    Hash = "Hash",
+    HeadsetMic = "HeadsetMic",
+    Heart = "Heart",
+    HouseLine = "HouseLine",
+    Image = "Image",
+    Image2 = "Image2",
+    Image3 = "Image3",
+    Image4 = "Image4",
+    ImageCheck = "ImageCheck",
+    InfoCircle = "InfoCircle",
+    InfoHexagon = "InfoHexagon",
+    Italic = "Italic",
+    LayersMultiple = "LayersMultiple",
+    LayersSingle = "LayersSingle",
+    Layout = "Layout",
+    Layout2 = "Layout2",
+    LayoutColumns = "LayoutColumns",
+    LayoutCustom = "LayoutCustom",
+    LayoutSequential = "LayoutSequential",
+    LayoutStuffed = "LayoutStuffed",
+    LayoutTile = "LayoutTile",
+    LifeBuoy = "LifeBuoy",
+    Lightbulb = "Lightbulb",
+    Lightning = "Lightning",
+    Lightning2 = "Lightning2",
+    LightningFast = "LightningFast",
+    LineChartBar = "LineChartBar",
+    LineChartBreakoutSquare = "LineChartBreakoutSquare",
+    LineChartUp = "LineChartUp",
+    LineChartUp2 = "LineChartUp2",
+    Lines = "Lines",
+    LinesCheck = "LinesCheck",
+    LinesPlay = "LinesPlay",
+    Link = "Link",
+    Link2 = "Link2",
+    Link3 = "Link3",
+    Link4 = "Link4",
+    Link5 = "Link5",
+    ListBullet = "ListBullet",
+    ListOrder = "ListOrder",
+    ListOrder2 = "ListOrder2",
+    Lock = "Lock",
+    Lock2 = "Lock2",
+    LogIn = "LogIn",
+    LogOut = "LogOut",
+    LogOut2 = "LogOut2",
+    MagicWand = "MagicWand",
+    MagicWand2 = "MagicWand2",
+    Mail = "Mail",
+    MessageSquare = "MessageSquare",
+    MessageSquare2 = "MessageSquare2",
+    MessageXSquare = "MessageXSquare",
+    MinusCircle = "MinusCircle",
+    Mobile = "Mobile",
+    Monitor = "Monitor",
+    Monitor2 = "Monitor2",
+    Monitor3 = "Monitor3",
+    MoonCircle = "MoonCircle",
+    NavigationPointer = "NavigationPointer",
+    NotificationBox = "NotificationBox",
+    Palette = "Palette",
+    PasscodeLock = "PasscodeLock",
+    PCSetup = "PCSetup",
+    Pencil = "Pencil",
+    PercentageCircle = "PercentageCircle",
+    Perspective = "Perspective",
+    PhoneCall = "PhoneCall",
+    Pin = "Pin",
+    PlayCircle = "PlayCircle",
+    Plus = "Plus",
+    PlusCircle = "PlusCircle",
+    Pulse = "Pulse",
+    QuestionCircle = "QuestionCircle",
+    RadioButton = "RadioButton",
+    RadioButtonActive = "RadioButtonActive",
+    ReceiptCheck = "ReceiptCheck",
+    Redo = "Redo",
+    Refresh = "Refresh",
+    Refresh2 = "Refresh2",
+    Refresh3 = "Refresh3",
+    Repeat = "Repeat",
+    Repeat2 = "Repeat2",
+    Retweet = "Retweet",
+    RoundChart = "RoundChart",
+    RoundChart2 = "RoundChart2",
+    Route = "Route",
+    Save = "Save",
+    Save2 = "Save2",
+    ScanDots = "ScanDots",
+    Search = "Search",
+    Send = "Send",
+    Settings = "Settings",
+    Settings2 = "Settings2",
+    Settings3 = "Settings3",
+    ShieldLightning = "ShieldLightning",
+    ShieldPlus = "ShieldPlus",
+    ShieldRemove = "ShieldRemove",
+    Shuffle = "Shuffle",
+    SlashCircle = "SlashCircle",
+    SlashOctagon = "SlashOctagon",
+    SocialGlobe = "SocialGlobe",
+    SocialLinkedin = "SocialLinkedin",
+    SocialX = "SocialX",
+    Speedometer = "Speedometer",
+    StairsRound = "StairsRound",
+    Star = "Star",
+    StarHalf = "StarHalf",
+    Stars = "Stars",
+    Stars2 = "Stars2",
+    Strikethrough = "Strikethrough",
+    SuccessFeatured = "SuccessFeatured",
+    Sun = "Sun",
+    SwitchHorizontal = "SwitchHorizontal",
+    Tag = "Tag",
+    Target = "Target",
+    Target2 = "Target2",
+    TextFormat = "TextFormat",
+    TextFormat2 = "TextFormat2",
+    TextHighlight = "TextHighlight",
+    Translate = "Translate",
+    Trash = "Trash",
+    Trending = "Trending",
+    Underline = "Underline",
+    Undo = "Undo",
+    Undo2 = "Undo2",
+    UploadCloud = "UploadCloud",
+    User = "User",
+    UserEdit = "UserEdit",
+    UserRight = "UserRight",
+    UserSquare = "UserSquare",
+    Users = "Users",
+    UsersUp = "UsersUp",
+    Volume = "Volume",
+    Wrench = "Wrench",
+    X = "X",
+    XCircle = "XCircle",
+    XCircle2 = "XCircle2",
+    XClose = "XClose",
+    XSquare = "XSquare"
+}
+
+interface SuperIconProps extends IconProps {
+    name: IconName;
+    color?: string;
+}
+/**
+ * The `CleenIcon` component renders a named SVG icon from the built-in icon library.
+ *
+ * - Pick an icon via the `name` prop using the `IconName` enum.
+ * - Use `color` to set the primary fill color of the icon.
+ * - `color1` and `color2` are available for dual-tone icons that use two separate fill areas.
+ * - All standard SVG props (e.g. `className`, `style`, `width`, `height`, `aria-*`) are forwarded to the underlying SVG element.
+ */
+declare function CleenIcon({ name, ...props }: SuperIconProps): react_jsx_runtime.JSX.Element | null;
+
+declare const IconAlertCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconAlertFeatured: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconAlertOctagon: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconAlertTriangle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconAlignRight: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconArrowDown: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconArrowLeft: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconArrowLeft2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconArrowRight: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconArrowToTop: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconArrowUp: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconArrowUpRight: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconArrowUpRightNarrow: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconArrowUpRightSquare: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconAttachment: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconBarChartSquare: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconBold: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconBookmarkCheck: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconBookmarkCheckFill: ({ color1, color2, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconBookmarkX: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconBoxLines: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconBoxText: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconBracketsCheck: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconBracketsEllipses: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCalendar: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCertificateHeart: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCheck: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCheckCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCheckCircleBroken: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCheckFill: ({ color1, color2, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCheckVerified: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconChevronDown: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconChevronLeft: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconChevronLeftDouble: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconChevronRight: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconChevronRightDouble: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconChevronSelectorVertical: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconChevronUp: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCircleSwap: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconClockFastForward: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconClockRewind: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconClockRewind2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCodeBrowser: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCodeCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconColors: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconColumnEdit: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCopy: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCopy2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCopy3: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCopy4: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCopy5: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCopyCheck: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCube: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCubeOutline: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconCursorBox: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconDataflow: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconDataflow2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconDataflow3: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconDelete: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconDollarCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconDotsGrid: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconDotsHorizontal: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconDotsVertical: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconEdit: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconEditable: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconExpand: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconEye: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconEyeHidden: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconEyeHidden2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconFaceSmile: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconFilter: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconFilter2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconFlag: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconFlag2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconFlag3: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconHandShield: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconHash: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconHeadsetMic: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconHeart: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconHouseLine: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconImage: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconImage2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconImage3: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconImage4: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconImageCheck: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconInfoCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconInfoHexagon: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconItalic: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLayersMultiple: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLayersSingle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLayout: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLayout2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLayoutColumns: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLayoutCustom: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLayoutSequential: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLayoutStuffed: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLayoutTile: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLifeBuoy: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLightbulb: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLightning: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLightning2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLightningFast: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLineChartBar: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLineChartBreakoutSquare: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLineChartUp: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLineChartUp2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLines: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLinesCheck: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLinesPlay: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLink: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLink2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLink3: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLink4: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLink5: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconListBullet: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconListOrder: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconListOrder2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLock: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLock2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLogIn: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLogOut: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconLogOut2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMagicWand: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMagicWand2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMail: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMessageSquare: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMessageSquare2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMessageXSquare: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMinusCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMobile: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMonitor: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMonitor2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMonitor3: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconMoonCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconNavigationPointer: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconNotificationBox: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPalette: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPasscodeLock: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPCSetup: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPencil: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPercentageCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPerspective: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPhoneCall: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPin: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPlayCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPlus: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPlusCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconPulse: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconQuestionCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRadioButton: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRadioButtonActive: ({ color1, color2, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconReceiptCheck: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRedo: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRefresh: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRefresh2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRefresh3: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRepeat: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRepeat2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRetweet: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRoundChart: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRoundChart2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconRoute: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSave: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSave2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconScanDots: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSearch: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSend: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSettings: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSettings2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSettings3: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconShieldLightning: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconShieldPlus: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconShieldRemove: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconShuffle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSlashCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSlashOctagon: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSocialGlobe: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSocialLinkedin: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSocialX: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSpeedometer: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconStairsRound: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconStar: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconStarHalf: ({ color1, color2, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconStars: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconStars2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconStrikethrough: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSuccessFeatured: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSun: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconSwitchHorizontal: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconTag: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconTarget: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconTarget2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconTextFormat: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconTextFormat2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconTextHighlight: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconTranslate: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconTrash: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconTrending: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUnderline: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUndo: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUndo2: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUploadCloud: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUser: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUserEdit: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUserRight: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUsers: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUserSquare: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconUsersUp: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconVolume: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconWrench: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconX: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconXCircle: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconXCircle2: ({ color1, color2, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconXClose: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconXSquare: ({ ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+type CardIconProps = CardProps & {
+    /** Icon to display in the icon holder (using IconName enum) */
+    iconName?: IconName;
+    /** Custom icon source (SVG path or component) - alternative to iconName */
+    iconSrc?: string;
+    /** Custom icon element - alternative to iconName/iconSrc */
+    icon?: ReactNode;
+    /** Size of the icon in pixels */
+    iconSize?: number;
+    classNames?: CardProps['classNames'] & {
+        /** Custom class name for the icon holder */
+        iconHolder?: string;
+        /** Custom class name for the content wrapper */
+        content?: string;
+    };
+    styles?: CardProps['styles'] & {
+        /** Custom style for the icon holder */
+        iconHolder?: CSSProperties;
+        /** Custom style for the content wrapper */
+        content?: CSSProperties;
+    };
+};
+/**
+ * CardIcon - A card component with an icon holder on the left
+ *
+ * Built on top of the Card component with a styled icon container.
+ * Supports both light and dark modes with proper theming.
+ *
+ * @example
+ * ```tsx
+ * // Using IconName
+ * <IconCard iconName={IconName.HouseLine}>
+ *   <h3>Home</h3>
+ *   <p>Welcome to your dashboard</p>
+ * </IconCard>
+ *
+ * // Using custom icon source
+ * <IconCard iconSrc="/icons/custom.svg">
+ *   <h3>Custom Icon</h3>
+ *   <p>With custom SVG</p>
+ * </IconCard>
+ *
+ * // With header and footer (inherited from Card)
+ * <IconCard
+ *   iconName={IconName.Settings}
+ *   header={{ content: 'Settings', hasDivider: true }}
+ *   footer={{ content: 'Last updated: Today', hasDivider: true }}
+ * >
+ *   <p>Configure your preferences</p>
+ * </IconCard>
+ * ```
+ */
+declare const CardIcon: react.ForwardRefExoticComponent<Omit<CardIconProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type Media = (ComponentProps<'img'> & {
+    type: 'image';
+}) | (ComponentProps<'video'> & {
+    type: 'video';
+}) | (ComponentProps<'iframe'> & {
+    type: 'iframe';
+});
+type CardMediaProps = Omit<CardProps, 'header'> & {
+    media?: Media;
+    header?: {
+        title?: ReactNode;
+        hasDivider?: boolean;
+    };
+    classNames?: CardProps['classNames'] & {
+        media?: {
+            container?: string;
+            content?: string;
+        };
+    };
+    styles?: CardProps['styles'] & {
+        media?: {
+            container?: CSSProperties;
+            content?: CSSProperties;
+        };
+    };
+};
+/**
+ * CardMedia - a Card variant that places an image or video inside the header.content area.
+ * Only `header.title` and `header.hasDivider` are accepted via the `header` prop; `header.content` is reserved for the `media` prop.
+ */
+declare const CardMedia: react.ForwardRefExoticComponent<Omit<CardMediaProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface InfoLabelsProps extends ComponentProps<'div'> {
+    infoMessage?: ReactNode;
+    errorMessage?: ReactNode;
+    subtitle?: ReactNode;
+    classNames?: {
+        container?: string;
+        infoMessage?: string;
+        errorMessage?: string;
+        subtitle?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        infoMessage?: CSSProperties;
+        errorMessage?: CSSProperties;
+        subtitle?: CSSProperties;
+    };
+}
+/**
+ * The `InfoLabels` component renders up to three contextual text messages beneath a form field.
+ *
+ * - `infoMessage` is displayed in primary color as an informational hint.
+ * - `errorMessage` is displayed in error color with `role="alert"` for accessibility.
+ * - `subtitle` is displayed in muted gray as a secondary description.
+ * - All three are optional; only the ones with content are rendered.
+ * - Accepts `classNames` and `styles` to customize: `container`, `infoMessage`, `errorMessage`, `subtitle`.
+ */
+declare const InfoLabels: ({ className, classNames, style, styles, infoMessage, errorMessage, subtitle, ...props }: InfoLabelsProps) => react_jsx_runtime.JSX.Element;
+
+declare const checkedVariants: {
+    readonly primary: "cleen-bg-primary cleen-transition-all cleen-duration-200 hover:cleen-bg-primary hover:cleen-shadow-[0px_0px_0px_4px_rgba(var(--cleen-primary),0.25)]";
+    readonly error: "cleen-bg-error cleen-transition-all cleen-duration-200 hover:cleen-bg-error hover:cleen-shadow-[0px_0px_0px_4px_rgba(var(--cleen-error),0.25)]";
+};
+
+type CheckboxProps = Omit<ComponentProps<'input'>, 'title'> & {
+    checked?: boolean | null;
+    defaultChecked?: boolean;
+    title?: ReactNode;
+    label?: ReactNode;
+    sublabel?: ReactNode;
+    variant?: keyof typeof checkedVariants;
+    allowIndeterminate?: boolean;
+    fullTriggerArea?: boolean;
+    classNames?: {
+        container?: string;
+        title?: string;
+        checkboxContainer?: string;
+        checkbox?: string;
+        label?: string;
+        sublabel?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        title?: CSSProperties;
+        checkboxContainer?: CSSProperties;
+        checkbox?: CSSProperties;
+        label?: CSSProperties;
+        sublabel?: CSSProperties;
+    };
+    infoLabels?: InfoLabelsProps;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+/**
+ * The `Checkbox` component is a controlled or uncontrolled input that supports checked, unchecked, and optional indeterminate states.
+ *
+ * - Pass `checked` (boolean or `null` for indeterminate) to use as a controlled input, or use `defaultChecked` for uncontrolled mode.
+ * - Set `allowIndeterminate` to cycle through checked → indeterminate → unchecked on each change.
+ * - Supports `label`, `sublabel`, and `title` for rich labelling above and beside the input.
+ * - Use `infoLabels` to show an error, info, or subtitle message below the checkbox.
+ * - Set `fullTriggerArea` to make the entire label row clickable instead of just the checkbox box.
+ * - Accepts `classNames` and `styles` to customize: `container`, `title`, `checkboxContainer`, `checkbox`, `label`, `sublabel`.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+interface CheckboxGroupProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    label?: ReactNode;
+    checkboxes?: CheckboxProps[];
+    onChange?: (checkbox: CheckboxProps, checkboxArray?: CheckboxProps[]) => void;
+    allowIndeterminate?: boolean;
+    infoLabels?: InfoLabelsProps;
+    requiresAtLeastOneOptions?: {
+        title?: ReactNode;
+        subtitle?: ReactNode;
+    };
+    classNames?: {
+        container?: string;
+        label?: string;
+        checkboxes?: string;
+        checkboxContainer?: string;
+        requiresAtLeastOne?: {
+            container?: string;
+            title?: string;
+            subtitle?: string;
+        };
+    };
+    styles?: {
+        container?: CSSProperties;
+        label?: CSSProperties;
+        checkboxes?: CSSProperties;
+        checkboxContainer?: CSSProperties;
+        requiresAtLeastOne?: {
+            container?: CSSProperties;
+            title?: CSSProperties;
+            subtitle?: CSSProperties;
+        };
+    };
+}
+/**
+ * The `CheckboxGroup` component renders a labelled list of `Checkbox` items and manages their collective state.
+ *
+ * - Pass an array of `checkboxes` (each with an `id` for accurate tracking) to populate the group.
+ * - The `onChange` callback receives the changed checkbox and the full updated array when all items have an `id`.
+ * - Set `allowIndeterminate` to propagate indeterminate support to each checkbox in the group.
+ * - Use `requiresAtLeastOneOptions` to display a validation error when all checkboxes are unchecked.
+ * - Use `infoLabels` for static error, info, or subtitle messages below the group.
+ * - Accepts `classNames` and `styles` to customize: `container`, `label`, `checkboxes`, `checkboxContainer`, `requiresAtLeastOne`.
+ */
+declare const CheckboxGroup: ({ label, checkboxes, allowIndeterminate, infoLabels, requiresAtLeastOneOptions, classNames, styles, onChange, ...props }: CheckboxGroupProps) => react_jsx_runtime.JSX.Element;
+
+interface CollapsibleItem {
+    content: ReactNode;
+    onClick?: () => void;
+    key?: string | number;
+}
+interface CollapsibleSection {
+    title: ReactNode;
+    items?: CollapsibleItem[];
+    onClick?: () => void;
+    key?: string | number;
+}
+interface CollapsibleProps extends ComponentProps<'div'> {
+    sections: CollapsibleSection[];
+    defaultOpenIndex?: number | null;
+    classNames?: {
+        container?: string;
+        section?: string;
+        sectionHeader?: string;
+        sectionBody?: string;
+        item?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        section?: CSSProperties;
+        sectionHeader?: CSSProperties;
+        sectionBody?: CSSProperties;
+        item?: CSSProperties;
+    };
+}
+/**
+ * The `Collapsible` component renders an accordion-style list of sections, each of which can be
+ * expanded or collapsed to reveal its items.
+ *
+ * - Pass an array of `sections`, each with a `title` and optional `items` array.
+ * - Each `CollapsibleItem` accepts a `content` node and an optional `onClick` callback.
+ * - Use `defaultOpenIndex` to pre-open a specific section on mount; pass `null` (default) to start
+ *   fully collapsed.
+ * - Only one section can be open at a time; clicking an open section closes it.
+ * - Sections without `items` act as plain clickable rows and do not show a chevron.
+ * - Accepts `classNames` and `styles` to customize: `container`, `section`, `sectionHeader`,
+ *   `sectionBody`, `item`.
+ */
+declare const Collapsible: react.ForwardRefExoticComponent<Omit<CollapsibleProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends ComponentProps<'input'> {
+    label?: ReactNode;
+    uploadLabel?: ReactNode;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    topRightIcon?: ReactNode;
+    inputOverlay?: ReactNode;
+    isFocusedBorder?: boolean;
+    maxLengthLabelThreshold?: number;
+    maxLengthLabel?: (remaining: number) => ReactNode;
+    infoLabels?: InfoLabelsProps;
+    classNames?: {
+        container?: string;
+        label?: string;
+        inputContainer?: string;
+        input?: string;
+        leftIconContainer?: string;
+        rightIconContainer?: string;
+        maxLengthLabel?: string;
+        inputOverlay?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        label?: CSSProperties;
+        inputContainer?: CSSProperties;
+        input?: CSSProperties;
+        leftIconContainer?: CSSProperties;
+        rightIconContainer?: CSSProperties;
+        maxLengthLabel?: CSSProperties;
+        inputOverlay?: CSSProperties;
+    };
+}
+/**
+ * The `Input` component is a controlled or uncontrolled text input with rich labelling and icon support.
+ *
+ * - Pass `value` for controlled usage; use `defaultValue` (or neither) for uncontrolled.
+ * - Use `label` to show a label above the input and `uploadLabel` for the file-input trigger text.
+ * - `leftIcon` and `rightIcon` accept any ReactNode and are rendered inside the input border.
+ * - Set `isFocusedBorder` to visually highlight the border when the input is focused.
+ * - Use `maxLength` together with `maxLengthLabel` (callback) to show a character-countdown message.
+ *   `maxLengthLabelThreshold` (0–1) controls when the countdown replaces the `infoLabels.subtitle`.
+ * - Use `infoLabels` to show error, info, or subtitle messages below the input.
+ * - Accepts `classNames` and `styles` to customize: `container`, `label`, `inputContainer`, `input`,
+ *   `leftIconContainer`, `rightIconContainer`, `maxLengthLabel`.
+ */
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+declare const SIZES$1: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+declare const SPEEDS: {
+    slow: number;
+    normal: number;
+    fast: number;
+};
+interface LoaderProps extends ComponentProps<'div'> {
+    isFullscreen?: boolean;
+    size?: keyof typeof SIZES$1 | number;
+    stroke?: number;
+    speed?: keyof typeof SPEEDS | number;
+    classNames?: {
+        container?: string;
+        loader?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        loader?: CSSProperties;
+    };
+}
+/**
+ * Spinning loader indicator with configurable size, speed, stroke, and color.
+ *
+ * - Controlled via `size` (preset `xs`–`xl` or pixel number), `speed` (preset or seconds), and `stroke` (border width in px).
+ * - Pass `isFullscreen` to fill the entire viewport with a background overlay.
+ * - Pass `color` to override the default primary color of the spinner.
+ * - Accepts `classNames` and `styles` for keys: `container`, `loader`.
+ */
+declare const Loader: ({ isFullscreen, size, stroke, speed, className, classNames, style, styles, color, ...props }: LoaderProps) => react_jsx_runtime.JSX.Element;
+
+interface CardData {
+    number: string;
+    expiry: string;
+    cvc: string;
+}
+type CardLabels = {
+    [key in keyof CardData]?: ReactNode;
+};
+type CardErrors = CardLabels;
+
+type CreditCardInputProps = Omit<ComponentProps<'div'>, 'onChange'> & {
+    isLoading?: boolean;
+    value?: CardData;
+    labels?: CardLabels;
+    errors?: CardErrors;
+    classNames?: {
+        container?: string;
+        loader?: {
+            container?: string;
+            component?: ComponentClassnames<LoaderProps>;
+        };
+        form?: {
+            container?: string;
+            cvcExpiryContainer?: string;
+            cardNumber?: ComponentClassnames<InputProps>;
+            expiry?: ComponentClassnames<InputProps>;
+            cvc?: ComponentClassnames<InputProps>;
+        };
+    };
+    styles?: {
+        container?: CSSProperties;
+        loader?: {
+            container?: CSSProperties;
+            component?: ComponentStyles<LoaderProps>;
+        };
+        form?: {
+            container?: CSSProperties;
+            cvcExpiryContainer?: CSSProperties;
+            cardNumber?: ComponentStyles<InputProps>;
+            expiry?: ComponentStyles<InputProps>;
+            cvc?: ComponentStyles<InputProps>;
+        };
+    };
+    infoLabels?: InfoLabelsProps;
+    onChange?: (value: CardData) => void;
+    onFieldFocus?: (fieldName: keyof CardData) => void;
+};
+
+/**
+ * The `CreditCardInput` component provides a user interface for securely collecting credit card information.
+ * It displays a visual representation of the card and includes input fields for the cardholder's card number, expiration date and CVC. The component handles formatting and validation for each field, displays error messages, and supports loading states for asynchronous operations.
+ */
+declare const CreditCardInput: react.ForwardRefExoticComponent<Omit<CreditCardInputProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type DropdownProps = Omit<ComponentProps<'div'>, 'title'> & {
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    disabled?: boolean;
+    title?: ReactNode;
+    label?: ReactNode;
+    fullWidth?: boolean;
+    fullWidthDropdown?: boolean;
+    offset?: number;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    keepOpenOnClickContent?: boolean;
+    infoLabels?: InfoLabelsProps;
+    classNames?: {
+        container?: string;
+        label?: string;
+        title?: string;
+        trigger?: string;
+        dropdown?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        label?: CSSProperties;
+        title?: CSSProperties;
+        trigger?: CSSProperties;
+        dropdown?: CSSProperties;
+    };
+};
+/**
+ * The `Dropdown` component is a button that when clicked, displays a custom dropdown container beneath it.
+ * It can be used to trigger actions or display a menu with custom content.
+ */
+declare const Dropdown: react.ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type DatePickerBase = Omit<DayPickerProps, 'classNames' | 'styles' | 'mode'> & {
+    label?: ReactNode;
+    placeholder?: ReactNode;
+    min?: Date | 'today';
+    max?: Date | 'today';
+    infoLabels?: InfoLabelsProps;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    classNames?: {
+        label?: string;
+        dropdown?: ComponentClassnames<DropdownProps>;
+        card?: ComponentClassnames<CardProps>;
+        datePicker?: ComponentClassnames<DayPickerProps>;
+    };
+    styles?: {
+        label?: CSSProperties;
+        dropdown?: ComponentStyles<DropdownProps>;
+        card?: ComponentStyles<CardProps>;
+        datePicker?: ComponentStyles<DayPickerProps>;
+    };
+};
+type DatePickerSingleProps = DatePickerBase & {
+    mode?: 'single';
+    selected?: Date;
+    onSelect?: (value?: Date) => void;
+};
+type DatePickerRangeProps = DatePickerBase & {
+    mode?: 'range';
+    selected?: DateRange;
+    onSelect?: (value?: DateRange) => void;
+};
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+
+/**
+ * The `DatePicker` component is a controlled or uncontrolled date selection interface that combines a dropdown trigger with a calendar picker. It supports both single date and date range selection modes with customizable label, optional styling, and class name support for both the wrapper and internal DayPicker component.
+ */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DividerProps extends ComponentProps<'div'> {
+    isHorizontal?: boolean;
+    classNames?: {
+        container?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+    };
+}
+/**
+ * The `Divider` component renders a thin horizontal or vertical separator line.
+ *
+ * - Set `isHorizontal` to `false` to render a vertical divider (defaults to `true`).
+ * - Accepts `classNames` and `styles` to customize: `container`.
+ */
+declare const Divider: ({ isHorizontal, className, classNames, style, styles, ...props }: DividerProps) => react_jsx_runtime.JSX.Element;
+
+declare const sizes$1: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+};
+type DrawerProps = Omit<ComponentProps<'div'>, 'title'> & {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    headerCloseBtn?: ReactNode;
+    footer?: ReactNode;
+    isOpen?: boolean;
+    onClose?: () => void;
+    closeOnOverlayClick?: boolean;
+    zIndex?: number;
+    size?: keyof typeof sizes$1 | number;
+    p?: number;
+    gap?: number;
+    classNames?: {
+        overlay?: string;
+        drawer?: string;
+        header?: string;
+        title?: string;
+        subtitle?: string;
+        content?: string;
+        footer?: string;
+    };
+    styles?: {
+        overlay?: CSSProperties;
+        drawer?: CSSProperties;
+        header?: CSSProperties;
+        title?: CSSProperties;
+        subtitle?: CSSProperties;
+        content?: CSSProperties;
+        footer?: CSSProperties;
+    };
+};
+/**
+ * A right-anchored slide-over panel (drawer) for presenting contextual UI.
+ *
+ * - Controlled via `isOpen` (boolean) and `onClose` (callback).
+ * - Renders a clickable overlay/backdrop that closes the drawer when clicked.
+ * - Supports an optional `title`, `subtitle`, custom `headerCloseBtn`, `footer`, and `children` for the content area.
+ * - Accepts `classNames` and `styles` objects to customize classes and inline styles for:
+ *   `overlay`, `drawer`, `header`, `title`, `subtitle`, `content`, and `footer`.
+ * - Forwards remaining div props and a ref to the root element.
+ */
+declare const Drawer: react.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface FilterDrawerNewFilter {
+    filterName: string;
+    exposed: boolean;
+}
+interface FilterDrawerFilterCategories {
+    isFeatured: boolean | null;
+    isMine: boolean | null;
+    isPinned: boolean | null;
+    isShared: boolean | null;
+}
+interface SavedFilterParameter {
+    controlCode: string;
+    controlTypeID: number;
+    valueObject: string;
+}
+interface FilterDrawerSavedFilter {
+    filterID: number;
+    title: string | null;
+    isFeatured: boolean | null;
+    isPinned: boolean | null;
+    isShared: boolean | null;
+    createdDate: string;
+    filterParameters: SavedFilterParameter[] | null;
+    [key: string]: unknown;
+}
+
+type SwitchProps = Omit<ComponentProps<'button'>, 'onChange' | 'title'> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    title?: ReactNode;
+    label?: ReactNode;
+    sublabel?: ReactNode;
+    onChange?: (value: boolean) => void;
+    infoLabels?: InfoLabelsProps;
+    classNames?: {
+        container?: string;
+        title?: string;
+        switch?: string;
+        check?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        title?: CSSProperties;
+        switch?: CSSProperties;
+        check?: CSSProperties;
+    };
+};
+/**
+ * Toggle switch for boolean on/off input with optional title, label, sub-label, and info messages.
+ *
+ * - Supports controlled mode via `checked` + `onChange`, and uncontrolled via `defaultChecked`.
+ * - Pass `title` for a heading row above the switch, `label` for primary text, and `sublabel` for secondary text beside it.
+ * - Accepts `classNames` and `styles` for keys: `container`, `title`, `switch`, `check`.
+ */
+declare const Switch: ({ checked, defaultChecked, onChange, title, label, sublabel, disabled, classNames, className, style, styles, infoLabels, ...props }: SwitchProps) => react_jsx_runtime.JSX.Element;
+
+interface FilterDrawerLabels {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    save?: ReactNode;
+    apply?: ReactNode;
+    cancel?: ReactNode;
+    clear?: ReactNode;
+    saveStep?: {
+        title?: ReactNode;
+        subtitle?: ReactNode;
+        back?: ReactNode;
+        save?: ReactNode;
+        filterNameInput?: {
+            label?: ReactNode;
+            placeholder?: string;
+        };
+        exposureSwitch?: {
+            title?: ReactNode;
+            label?: ReactNode;
+            sublabel?: ReactNode;
+        };
+        validation?: {
+            tooShort?: ReactNode;
+            tooLong?: ReactNode;
+        };
+    };
+    savedFilters?: {
+        label?: ReactNode;
+        noFilters?: ReactNode;
+        filter?: {
+            delete?: ReactNode;
+            cancelDelete?: ReactNode;
+            pin?: string;
+            unpin?: string;
+        };
+        tabs?: {
+            all?: ReactNode;
+            mine?: ReactNode;
+            shared?: ReactNode;
+            featured?: ReactNode;
+            pinned?: ReactNode;
+        };
+    };
+}
+type FilterDrawerStandaloneProps = {
+    selectedSavedFilter?: FilterDrawerSavedFilter;
+    savedFilters?: FilterDrawerSavedFilter[];
+    isFiltersFetching?: boolean;
+    labels?: FilterDrawerLabels;
+    withSavedFilters?: boolean;
+    activeFiltersCount?: number;
+    onClear?: () => void;
+    onSave?: (newFilter: FilterDrawerNewFilter) => Promise<void>;
+    onCancel?: () => void;
+    onApply?: () => void;
+    onClose?: () => void;
+    filterDateFormatter?: (date: string) => string;
+    onFilterCategoryChange?: (categories: FilterDrawerFilterCategories) => Promise<void>;
+    onFilterDelete?: (filterID: number) => Promise<void>;
+    onFilterPin?: (filterID: number) => Promise<void>;
+    onFilterUnpin?: (filterID: number) => Promise<void>;
+    onFilterSelect?: (filter: FilterDrawerSavedFilter | undefined) => void;
+    classNames?: DrawerProps['classNames'] & {
+        dropdown?: ComponentClassnames<DropdownProps>;
+        clearBtn?: ComponentClassnames<ButtonProps>;
+        cancelBtn?: ComponentClassnames<ButtonProps>;
+        applyBtn?: ComponentClassnames<ButtonProps>;
+        saveBtn?: ComponentClassnames<ButtonProps>;
+        saveFilter?: {
+            filterName?: ComponentClassnames<InputProps>;
+            exposure?: ComponentClassnames<SwitchProps>;
+            backBtn?: ComponentClassnames<ButtonProps>;
+            saveBtn?: ComponentClassnames<ButtonProps>;
+        };
+    };
+    styles?: DrawerProps['styles'] & {
+        dropdown?: ComponentStyles<DropdownProps>;
+        clearBtn?: ComponentStyles<ButtonProps>;
+        cancelBtn?: ComponentStyles<ButtonProps>;
+        applyBtn?: ComponentStyles<ButtonProps>;
+        saveBtn?: ComponentStyles<ButtonProps>;
+        saveFilter?: {
+            filterName?: ComponentStyles<InputProps>;
+            exposure?: ComponentStyles<SwitchProps>;
+            backBtn?: ComponentStyles<ButtonProps>;
+            saveBtn?: ComponentStyles<ButtonProps>;
+        };
+    };
+};
+type FilterDrawerProps = DrawerProps & FilterDrawerStandaloneProps;
+
+/**
+ * A right-anchored slide-over panel (drawer) specialized for filter interfaces.
+ *
+ * Features:
+ * - Standard drawer functionality (open/close, overlay, customizable sections)
+ * - Pre-configured footer with Save, Cancel and Apply actions
+ * - Clear filters button in header
+ * - Customizable labels for all buttons
+ * - Accepts all standard Drawer props plus filter-specific callbacks
+ */
+declare const FilterDrawer: react.ForwardRefExoticComponent<Omit<FilterDrawerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface FormGroupProps extends ComponentProps<'div'> {
+    title: string;
+    subtitle?: string;
+    required?: boolean;
+    requiredMark?: ReactNode;
+    tooltipDescription?: string;
+    children?: ReactNode;
+    classNames?: {
+        container?: string;
+        titleColumn?: string;
+        controlsRow?: string;
+        requiredMark?: string;
+        tooltip?: ComponentClassnames<TooltipProps>;
+        questionIcon?: string;
+        title?: string;
+        subtitle?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        titleColumn?: CSSProperties;
+        controlsRow?: CSSProperties;
+        requiredMark?: CSSProperties;
+        tooltip?: ComponentStyles<TooltipProps>;
+        questionIcon?: CSSProperties;
+        title?: CSSProperties;
+        subtitle?: CSSProperties;
+    };
+}
+/**
+ * The `FormGroup` component is a layout row that pairs a labelled title column with a controls column.
+ *
+ * - The `title` is required. Add a `subtitle` for secondary context beneath it.
+ * - Set `required` to show a required mark beside the title (defaults to `"*"`, customisable via `requiredMark`).
+ * - Pass a `tooltipDescription` to show an info tooltip icon next to the title.
+ * - `children` are rendered in the right-hand controls column (inputs, selects, etc.).
+ * - Accepts `classNames` and `styles` to customize: `container`, `titleColumn`, `controlsRow`,
+ *   `title`, `subtitle`, `requiredMark`, `tooltip`, `questionIcon`.
+ */
+declare const FormGroup: react.ForwardRefExoticComponent<Omit<FormGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface GroupSelectorSaveResult {
+    success: boolean;
+    [k: string]: unknown;
+}
+interface LabelsProps extends ComponentProps<'div'> {
+    inputPlaceholder?: string;
+    newGroupPlaceholder?: string;
+    newItemPlaceholder?: string;
+    saveButtonLabel?: string;
+}
+interface GroupSelectorThreeDotOption<T = unknown> {
+    label: string;
+    icon?: react__default.ReactElement;
+    onClick: (target: T) => void;
+    disabledOptionCallback?: (target: T) => boolean;
+}
+interface GroupSelectorProps<G = unknown, I = unknown> {
+    position?: Position;
+    labels?: LabelsProps;
+    groups?: G[] | null;
+    selectedItemID?: string | number | null;
+    groupThreeDotMenuOptions?: GroupSelectorThreeDotOption<G>[];
+    itemThreeDotMenuOptions?: GroupSelectorThreeDotOption<I>[];
+    refetchData?: () => Promise<void> | void;
+    onGroupSave?: (payload: Record<string, unknown>) => Promise<GroupSelectorSaveResult>;
+    onItemSave?: (payload: Record<string, unknown>) => Promise<GroupSelectorSaveResult>;
+    onGroupThreeDotMenuClick?: (group: G | null) => void;
+    onItemThreeDotMenuClick?: (item: I | null) => void;
+    onSearchChange?: (searchText: string) => void;
+    onItemSelect?: (item: I | null) => void;
+    groupIDKey: string;
+    groupTitleKey: string;
+    itemsKey: string;
+    itemIDKey: string;
+    itemGroupIDKey: string;
+    itemTitleKey: string;
+    itemSubtitleKey?: string;
+    newValueMinLength?: number;
+    isLoading?: boolean;
+    isGroupSaving?: boolean;
+    isItemSaving?: boolean;
+    selectedColor?: string;
+    className?: string;
+    classNames?: {
+        container?: string;
+        label?: string;
+        input?: string;
+        columnsContainer?: string;
+        leftColumn?: string;
+        rightColumn?: string;
+        groupItem?: string;
+        groupItemTitle?: string;
+        newGroupButton?: string;
+        item?: string;
+        itemTitle?: string;
+        itemSubtitle?: string;
+        newItemButton?: string;
+    };
+    style?: CSSProperties;
+    styles?: {
+        container?: CSSProperties;
+        label?: CSSProperties;
+        input?: CSSProperties;
+        columnsContainer?: CSSProperties;
+        leftColumn?: CSSProperties;
+        rightColumn?: CSSProperties;
+        groupItem?: CSSProperties;
+        groupItemTitle?: CSSProperties;
+        newGroupButton?: CSSProperties;
+        item?: CSSProperties;
+        itemTitle?: CSSProperties;
+        itemSubtitle?: CSSProperties;
+        newItemButton?: CSSProperties;
+    };
+}
+/**
+ * The `GroupSelector` component renders a two-column searchable panel for browsing and selecting items
+ * that are organised into labelled groups.
+ *
+ * - The left column lists groups; selecting one reveals its items in the right column.
+ * - Both columns support an inline "add new" input and a three-dot context menu per entry.
+ * - Key mapping props (`groupIDKey`, `groupTitleKey`, `itemsKey`, `itemIDKey`, `itemGroupIDKey`,
+ *   `itemTitleKey`, `itemSubtitleKey`) let you use any plain object shape for groups and items.
+ * - `selectedItemID` highlights the currently active item.
+ * - `onItemSelect` is fired when the user picks an item; `onGroupSave`/`onItemSave` handle creation.
+ * - Use `isLoading`, `isGroupSaving`, `isItemSaving` to show loader states during async operations.
+ * - Accepts `classNames` and `styles` for granular visual customisation of every element.
+ */
+declare const GroupSelector: <G = unknown, I = unknown>({ position, labels, groups, selectedItemID, groupThreeDotMenuOptions, itemThreeDotMenuOptions, refetchData, onGroupSave, onItemSave, onGroupThreeDotMenuClick, onItemThreeDotMenuClick, onSearchChange, onItemSelect, groupIDKey, groupTitleKey, itemsKey, itemIDKey, itemGroupIDKey, itemTitleKey, itemSubtitleKey, newValueMinLength, isLoading, isGroupSaving, isItemSaving, selectedColor, className, classNames, style, styles, }: GroupSelectorProps<G, I>) => JSX.Element;
+
+declare const colorList: readonly ["blue", "lighter-blue", "primary", "indigo", "green", "red", "purple", "pink", "orange", "gray"];
+type Color = (typeof colorList)[number];
+declare const roundVariants: {
+    full: string;
+    rounded: string;
+    semiRounded: string;
+    sleek: string;
+};
+
+type PillBadgeProps = Omit<ComponentProps<'span'>, 'color'> & {
+    color?: HintedString<Color>;
+    colorByIndex?: number;
+    variant?: keyof typeof roundVariants;
+    label?: ReactNode;
+    showDot?: boolean;
+    icon?: ReactNode;
+    removeable?: boolean;
+    withBorder?: boolean;
+    classNames?: {
+        container?: string;
+        dot?: string;
+        removable?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        dot?: CSSProperties;
+        removable?: CSSProperties;
+    };
+    onRemoveClicked?: () => void;
+};
+/**
+ * Compact badge/chip used to display labels, statuses, tags, and counts.
+ *
+ * - Pick from preset `color` values or pass any CSS color string for custom tinting.
+ * - Use `colorByIndex` to deterministically cycle through the color palette by a numeric index.
+ * - Set `variant` to control roundness (`rounded`, `square`, `pill`).
+ * - Enable `showDot` for a colored status dot, `removeable` for an \`×\` remove button.
+ * - Accepts `classNames` and `styles` for keys: `container`, `dot`, `removable`.
+ */
+declare const PillBadge: ({ className, classNames, style, styles, label, color, variant, showDot, icon, removeable, withBorder, onRemoveClicked, onClick, colorByIndex, children, ...props }: PillBadgeProps) => react_jsx_runtime.JSX.Element;
+
+type LookupOptionListProps = ComponentProps<'div'> & {
+    options?: LookupOption[];
+    selection?: LookupOption[];
+    classNames?: {
+        container?: string;
+        item?: string;
+        labels?: string;
+        checkContainer?: string;
+        check?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        item?: CSSProperties;
+        labels?: CSSProperties;
+        checkContainer?: CSSProperties;
+        check?: CSSProperties;
+    };
+    onChoose?: (option: LookupOption, isSelected?: boolean) => void;
+    displaySubtextInline?: boolean;
+};
+
+type LookupProps = Omit<ComponentProps<'input'>, 'value' | 'onChange'> & {
+    label?: ReactNode;
+    labels?: {
+        noDataFound?: ReactNode;
+    };
+    options?: LookupOption[];
+    value?: LookupOption[];
+    displaySelected?: 'under' | 'inside' | 'inside-badge' | 'none';
+    limit?: number;
+    getCustomBadgeLabel?: (option: LookupOption) => string | number | undefined;
+    displaySubtextInline?: boolean;
+    selectedBadgeColor?: Color;
+    isLoading?: boolean;
+    debounceDelay?: number;
+    characterThreshold?: number;
+    internalFiltering?: boolean;
+    closeOnReachingLimit?: boolean;
+    infoLabels?: InfoLabelsProps;
+    isNoDataVisibleOnCreateNew?: boolean;
+    menuDetachedFromPortal?: boolean;
+    classNames?: {
+        container?: string;
+        label?: string;
+        input?: {
+            container?: string;
+            inlineBadgeContainer?: string;
+            component?: ComponentClassnames<InputProps>;
+        };
+        menu?: {
+            container?: string;
+            loader?: string;
+            noDataFound?: string;
+            list?: ComponentClassnames<LookupOptionListProps>;
+        };
+        createNewOption?: {
+            container?: string;
+            divider?: ComponentClassnames<DividerProps>;
+            value?: string;
+        };
+        pillbadge?: {
+            container?: string;
+            component?: ComponentClassnames<PillBadgeProps>;
+        };
+    };
+    styles?: {
+        container?: CSSProperties;
+        label?: CSSProperties;
+        input?: {
+            container?: CSSProperties;
+            inlineBadgeContainer?: CSSProperties;
+            component?: ComponentStyles<InputProps>;
+        };
+        menu?: {
+            container?: CSSProperties;
+            loader?: CSSProperties;
+            noDataFound?: CSSProperties;
+            list?: ComponentStyles<LookupOptionListProps>;
+        };
+        createNewOption?: {
+            container?: CSSProperties;
+            divider?: ComponentStyles<DividerProps>;
+            value?: CSSProperties;
+        };
+        pillbadge?: {
+            container?: CSSProperties;
+            component?: ComponentStyles<PillBadgeProps>;
+        };
+    };
+    onCreateNewOption?: (value: string) => void;
+    createNewOptionLabelString?: ((inputValue: string) => ReactNode) | ReactNode;
+    onInputChange?: (value: string) => void;
+    onChange?: (value: LookupOption[]) => void;
+    onLookupBlur?: () => void;
+    triggerBlurOnlyWhenOpen?: boolean;
+};
+interface LookupOption<T = unknown> {
+    value: string | number;
+    extraData?: T;
+    label?: string;
+    icon?: ReactNode;
+    sublabel?: ReactNode;
+    preSublabel?: ReactNode;
+    leadingBadgeValue?: string;
+}
+
+/**
+ * Lookup component is an input component that provides a searchable dropdown list of options to choose from. Options can be fetched asynchronously based on user input using debounce.
+ */
+declare const Lookup: react.ForwardRefExoticComponent<Omit<LookupProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+interface MenuItemProps {
+    item: IMenuItem;
+    isLast?: boolean;
+    handleClick?: (item: MenuItemButton) => void;
+    onEnterSubmenu?: (items: IMenuItem[], title?: React.ReactNode) => void;
+    classNames?: {
+        container?: string;
+        label?: string;
+        groupLabel?: string;
+        groupDivider?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        label?: CSSProperties;
+        groupLabel?: CSSProperties;
+        groupDivider?: CSSProperties;
+    };
+}
+type IMenuItem = MenuItemButton | MenuItemLink | MenuItemGroup;
+interface MenuItemSharedProps {
+    id?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    icon?: ReactNode;
+    label?: ReactNode;
+}
+interface MenuItemButton extends MenuItemSharedProps {
+    type: 'button';
+    onClick?: () => void;
+    submenu?: IMenuItem[];
+}
+interface MenuItemLink extends MenuItemSharedProps {
+    type: 'link';
+    to: string;
+}
+interface MenuItemGroup {
+    id?: string;
+    type: 'group';
+    label?: ReactNode;
+    items: IMenuItem[];
+}
+
+type MenuProps = ComponentProps<'div'> & {
+    items?: IMenuItem[];
+    position?: Position;
+    keepOpenOnClick?: boolean;
+    classNames?: {
+        container?: string;
+        trigger?: string;
+        triggerOpen?: string;
+        menu?: string;
+        item?: MenuItemProps['classNames'];
+        submenuButton?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        trigger?: CSSProperties;
+        triggerOpen?: CSSProperties;
+        menu?: CSSProperties;
+        item?: MenuItemProps['styles'];
+        submenuButton?: CSSProperties;
+    };
+};
+
+/**
+ * The `Menu` component displays a list of selectable items, typically used for navigation or actions. It appears when triggered and can be positioned relative to its trigger element, automatically adjusting to fit within the viewport.
+ */
+declare const Menu: react.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+};
+type ModalProps = ComponentProps<'div'> & {
+    isOpen?: boolean;
+    onClose?: () => void;
+    closeOnOverlayClick?: boolean;
+    closeButtonIcon?: ReactNode | null;
+    zIndex?: number;
+    size?: keyof typeof SIZES | number;
+    header?: CardProps['header'];
+    footer?: CardProps['header'];
+    color?: string;
+    p?: number;
+    gap?: number;
+    classNames?: {
+        overlay?: string;
+        container?: string;
+        modal?: ComponentClassnames<CardProps>;
+    };
+    styles?: {
+        overlay?: CSSProperties;
+        container?: CSSProperties;
+        modal?: ComponentStyles<CardProps>;
+    };
+};
+/**
+ * Modal component that displays content in a centered modal dialog.
+ *
+ * - Controlled via `isOpen` (boolean) and `onClose` (callback).
+ * - Renders a clickable overlay/backdrop that closes the modal when clicked.
+ * - Modal content is centered on the screen with smooth fade-in/fade-out animations.
+ * - Accepts `classNames` and `styles` objects to customize classes and inline styles for:
+ *   `overlay` and `container`.
+ */
+declare const Modal: react.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type NotificationVariant = 'success' | 'error' | 'info' | 'warning' | 'default';
+interface NotificationProps extends Omit<ToastOptions, 'type' | 'transition'> {
+    message: ReactNode;
+    variant?: NotificationVariant;
+    animationType?: 'bounce' | 'zoom' | 'slide' | 'flip';
+}
+/**
+ * The `Notification` component provides a way to display brief notifications to users.
+ * It uses react-toastify library for toast notifications.
+ */
+declare const showNotification: ({ message, variant, animationType, className, ...options }: NotificationProps) => react_toastify.Id;
+
+declare const CleenNotificationContainer: (props: ToastContainerProps) => react_jsx_runtime.JSX.Element;
+
+interface PaginationGoToPageProps extends ComponentProps<'div'> {
+    totalPages: number;
+    onGoToPage?: (page: number) => void;
+    labels?: {
+        goToPage?: ReactNode;
+    };
+    classNames?: {
+        container?: string;
+        label?: string;
+        input?: ComponentClassnames<InputProps>;
+    };
+    styles?: {
+        container?: CSSProperties;
+        label?: CSSProperties;
+        input?: ComponentStyles<InputProps>;
+    };
+}
+declare const PaginationGoToPage: react.ForwardRefExoticComponent<Omit<PaginationGoToPageProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+interface PaginationPageSizeProps extends ComponentProps<'div'> {
+    pageSize?: number;
+    pageSizes?: number[];
+    labels?: {
+        itemsPerPage?: (size: number) => ReactNode;
+    };
+    onPageSizeChange?: (size: number) => void;
+    classNames?: {
+        container?: string;
+        trigger?: string;
+        menu?: string;
+        menuItem?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        trigger?: CSSProperties;
+        menu?: CSSProperties;
+        menuItem?: CSSProperties;
+    };
+}
+declare const PaginationPageSize: react.ForwardRefExoticComponent<Omit<PaginationPageSizeProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface PaginationLabels {
+    goToPreviousPage?: ReactNode;
+    goToNextPage?: ReactNode;
+    goToPage?: ReactNode;
+    itemsPerPage?: (size: number) => ReactNode;
+}
+
+interface PaginationProps extends ComponentProps<'div'> {
+    totalPages: number;
+    currentPage: number;
+    pageSize?: number;
+    pageSizes?: number[];
+    hasPageSizeSelector?: boolean;
+    hasGotoPage?: boolean;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+    labels?: PaginationLabels;
+    classNames?: {
+        container?: string;
+        buttonsContainer?: string;
+        pageButton?: string;
+        activePageButton?: string;
+        navButton?: string;
+        ellipsis?: string;
+        pageSizeSelector?: ComponentClassnames<PaginationPageSizeProps>;
+        goToPage?: ComponentClassnames<PaginationGoToPageProps>;
+    };
+    styles?: {
+        container?: CSSProperties;
+        pageButton?: CSSProperties;
+        buttonsContainer?: CSSProperties;
+        activePageButton?: CSSProperties;
+        navButton?: CSSProperties;
+        ellipsis?: CSSProperties;
+        pageSizeSelector?: ComponentStyles<PaginationPageSizeProps>;
+        goToPage?: ComponentStyles<PaginationGoToPageProps>;
+    };
+}
+/**
+ * Pagination controls for navigating multi-page data sets.
+ *
+ * - Controlled via `currentPage` and `totalPages`; fire `onPageChange` to update externally.
+ * - Optional `pageSize` selector shown when `hasPageSizeSelector` is true; available sizes via `pageSizes`.
+ * - Optional "go to page" input shown when `hasGotoPage` is true.
+ * - Localise all button labels through the `labels` prop.
+ * - Accepts `classNames` and `styles` for keys: `container`, `buttonsContainer`, `pageButton`, `activePageButton`, `navButton`, `ellipsis`, `pageSizeSelector`, `goToPage`.
+ */
+declare const Pagination: react.ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type PopoverProps = Omit<ComponentProps<'div'>, 'content'> & {
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    content?: ReactNode;
+    position?: Position;
+    classNames?: {
+        container?: string;
+        trigger?: string;
+        triggerOpen?: string;
+        popover?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        trigger?: CSSProperties;
+        triggerOpen?: CSSProperties;
+        popover?: CSSProperties;
+    };
+};
+
+/**
+ * A Popover component that displays a floating menu when the trigger element is clicked. The menu is positioned relative to the trigger based on the specified `position` prop. The component handles click outside to close the menu and calculates optimal positioning to ensure it stays within the viewport.
+ */
+declare const Popover: react.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface ProgressBarProps extends ComponentProps<'div'> {
+    percentage: number;
+    title?: string;
+    barColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    invertProgressColors?: boolean;
+    showPercentage?: boolean;
+    renderAnimated?: boolean;
+    renderAnimatedDuration?: number;
+    classNames?: {
+        container?: string;
+        wrapper?: string;
+        track?: string;
+        fill?: string;
+        progress?: string;
+        title?: string;
+        text?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        wrapper?: CSSProperties;
+        track?: CSSProperties;
+        fill?: CSSProperties;
+        progress?: CSSProperties;
+        title?: CSSProperties;
+        text?: CSSProperties;
+    };
+}
+/**
+ * Horizontal progress bar with optional title, percentage label, color overrides, and entrance animation.
+ *
+ * - Pass `percentage` (0–100) to set fill level; values are clamped automatically.
+ * - Set `renderAnimated` to animate the fill from 0 to the target on mount; control speed with `renderAnimatedDuration`.
+ * - Use `invertProgressColors` to swap the success/error color logic (useful for "budget remaining" scenarios).
+ * - Accepts `classNames` and `styles` for keys: `container`, `wrapper`, `track`, `fill`, `progress`, `title`, `text`.
+ */
+declare const ProgressBar: react.ForwardRefExoticComponent<Omit<ProgressBarProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+};
+interface ProgressCircleProps extends ComponentProps<'div'> {
+    isFullscreen?: boolean;
+    percentage: number;
+    duration?: number;
+    radius?: number;
+    stroke?: number;
+    size?: keyof typeof sizes;
+    color?: string;
+    emptyColor?: string;
+    textColor?: string;
+    fontSize?: string | number;
+    classNames?: {
+        container?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+    };
+}
+/**
+ * Animated SVG circular progress indicator.
+ *
+ * - Animates from 0% to `percentage` on mount over `duration` milliseconds.
+ * - Choose from preset `size` values (`xs`–`xxxl`) or supply a custom `radius` in pixels.
+ * - Override track and fill colors with `emptyColor` and `color`; label color with `textColor`.
+ * - Pass `isFullscreen` to center the circle in a full-viewport overlay.
+ * - Accepts `classNames` and `styles` for key: `container`.
+ */
+declare const ProgressCircle: react.ForwardRefExoticComponent<Omit<ProgressCircleProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface RadioBoxData {
+    id: string | number;
+    label?: ReactNode;
+    subLabel?: ReactNode;
+}
+interface RadioBoxGroupProps {
+    horizontal?: boolean;
+    boxes: RadioBoxData[];
+    selectedBox?: RadioBoxData;
+    onBoxClick?: (box: RadioBoxData) => void;
+    leftElement?: (box: RadioBoxData) => ReactNode;
+    rightElement?: (box: RadioBoxData) => ReactNode;
+    leftIcon?: ReactNode;
+    leftIconName?: IconName;
+    rightIconName?: IconName;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A group of selectable option boxes, each displaying a label and optional sub-label with an icon.
+ *
+ * - Pass `boxes` as an array of `{ id, label?, subLabel? }` objects.
+ * - Control the selected box via `selectedBox`; fires `onBoxClick` on selection.
+ * - Toggle `horizontal` to switch from a vertical stack to a flex-wrap row layout.
+ * - Inject leading content per row with `leftElement` / `leftIcon` / `leftIconName`, and trailing content with `rightElement` / `rightIconName`.
+ */
+declare const RadioBoxGroup: ({ horizontal, boxes, selectedBox, onBoxClick, leftElement, rightElement, leftIcon, leftIconName, rightIconName, className, style, }: RadioBoxGroupProps) => react_jsx_runtime.JSX.Element;
+
+interface RadioButtonData {
+    id: string | number;
+    title?: ReactNode;
+    postTitle?: ReactNode;
+    subTitle?: ReactNode;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+}
+
+interface RadioButtonGroupProps {
+    radios: RadioButtonData[];
+    name?: string;
+    defaultActiveId?: string | number;
+    label?: ReactNode;
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    radioPosition?: 'left' | 'right';
+    classNames?: {
+        container?: string;
+        label?: string;
+        radios?: string;
+        radioContainer?: string;
+        radioActive?: string;
+        radioOuterCheckBox?: string;
+        radioLabelsContainer?: string;
+        radioTitle?: string;
+        radiotPostTitle?: string;
+        radioSubTitle?: string;
+        infoLabels?: ComponentClassnames<InfoLabelsProps>;
+    };
+    className?: string;
+    styles?: {
+        container?: CSSProperties;
+        label?: CSSProperties;
+        radios?: CSSProperties;
+        radioContainer?: CSSProperties;
+        radioActive?: CSSProperties;
+        radioOuterCheckBox?: CSSProperties;
+        radioLabelsContainer?: CSSProperties;
+        radioTitle?: CSSProperties;
+        radiotPostTitle?: CSSProperties;
+        radioSubTitle?: CSSProperties;
+        infoLabels?: ComponentStyles<InfoLabelsProps>;
+    };
+    style?: CSSProperties;
+    infoMessage?: ReactNode;
+    errorMessage?: ReactNode;
+    subtitle?: ReactNode;
+    infoLabels?: InfoLabelsProps;
+}
+/**
+ * A group of styled radio buttons for single-option selection.
+ *
+ * - Supports controlled mode via `value` + `onChange`, and uncontrolled via `defaultActiveId`.
+ * - Each radio item (`RadioButtonData`) has an `id`, `title`, optional `postTitle`, and `subTitle`.
+ * - Flip radio indicator position with `radioPosition` (`left` | `right`).
+ * - Accepts `classNames` and `styles` for keys: `container`, `label`, `radios`, `radioContainer`, `radioActive`, `radioOuterCheckBox`, `radioLabelsContainer`, `radioTitle`, `radiotPostTitle`, `radioSubTitle`, `infoLabels`.
+ */
+declare const RadioButtonGroup: ({ radios, label, className, classNames, style, styles, name, radioPosition, defaultActiveId, value, infoLabels, onChange, }: RadioButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+interface RangeSliderProps {
+    key?: string | number;
+    minValue?: number;
+    maxValue?: number;
+    step?: number;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onChange?: (value: [number, number]) => void;
+    onChangeEnd?: (value: [number, number]) => void;
+    className?: string;
+    classNames?: {
+        container?: string;
+        track?: string;
+        filledTrack?: string;
+        thumb?: string;
+    };
+    style?: CSSProperties;
+    styles?: {
+        container?: CSSProperties;
+        track?: CSSProperties;
+        filledTrack?: CSSProperties;
+        thumb?: CSSProperties;
+    };
+    disabled?: boolean;
+    label?: ReactNode;
+    labels?: {
+        minLabel?: ReactNode;
+        maxLabel?: ReactNode;
+    };
+    tooltips?: {
+        min?: TooltipProps;
+        max?: TooltipProps;
+        shared?: TooltipProps;
+    };
+    infoLabels?: InfoLabelsProps;
+}
+/**
+ * Dual-handle range slider for selecting a numeric interval.
+ *
+ * - Supports controlled mode via `value` (`[min, max]`) + `onChange`, and uncontrolled via `defaultValue`.
+ * - Configure bounds with `minValue` / `maxValue` and increment with `step`.
+ * - Attach tooltip configuration to each thumb via `tooltips.min`, `tooltips.max`, or a shared preset via `tooltips.shared`.
+ * - Accepts `classNames` and `styles` for keys: `container`, `track`, `filledTrack`, `thumb`, `infoLabels`.
+ */
+declare const RangeSlider: react__default.FC<RangeSliderProps>;
+
+interface SelectProps extends Omit<ComponentPropsWithoutRef<ReactSelect>, 'isDisabled'> {
+    label?: ReactNode;
+    sublabel?: ReactNode;
+    emboldenOptions?: boolean;
+    disabled?: boolean;
+    labels?: {
+        noDataFound?: string;
+    };
+    infoLabels?: InfoLabelsProps;
+    classNames?: ComponentProps<ReactSelect>['classNames'] & {
+        cleenContainer?: string;
+        labels?: {
+            container?: string;
+            label?: string;
+            sublabel?: string;
+        };
+        inputOuterContainer?: string;
+    };
+    style?: CSSProperties;
+    styles?: ComponentProps<ReactSelect>['styles'] & {
+        cleenContainer?: CSSProperties;
+        labels?: {
+            container?: CSSProperties;
+            label?: CSSProperties;
+            sublabel?: CSSProperties;
+        };
+    };
+    createNewOptionCallback?: (value: string) => void;
+    createNewOptionLabelStringCb?: (inputValue: string) => string;
+}
+/**
+ * Select component is a customizable dropdown select input field that allows users to choose one or more options from a list.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<SelectInstance<unknown, boolean, GroupBase<unknown>>>>;
+
+/**
+ * Represents a single item in the sidebar navigation
+ */
+interface SidebarItemConfig {
+    /** Unique identifier for the menu item */
+    id: string;
+    /** Display name for the item */
+    name?: string;
+    /** Label shown in tooltip */
+    label: string;
+    /** Icon name from the Icon component library */
+    iconName?: string;
+    /** Custom icon source (SVG path or component) */
+    iconSrc?: string;
+    /** Optional path for navigation */
+    path?: string | null;
+    /** Optional badge count to display */
+    badgeCount?: number | string;
+    /** Optional divider below the item */
+    withBottomDivider?: boolean;
+    /** Any additional custom data */
+    [key: string]: unknown;
+}
+/**
+ * Props for the SidebarItem component
+ */
+interface SidebarItemProps {
+    /** Configuration object for the sidebar item */
+    item: SidebarItemConfig;
+    /** ID of the currently active item */
+    activeId?: string | null;
+    /** Click handler for the item */
+    onClick?: (item: SidebarItemConfig) => void;
+    /** Optional badge count to display on the item */
+    countBadge?: number | string | null;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom icon render function */
+    renderIcon?: (item: SidebarItemConfig, isActive: boolean) => ReactNode;
+}
+/**
+ * Submenu item for DrawerContentTitle
+ */
+interface SubmenuItem {
+    /** Unique identifier */
+    id: string;
+    /** Display title */
+    title: string;
+    /** Click handler */
+    onClick: (item: SubmenuItem) => void;
+    /** Optional icon */
+    iconSrc?: string;
+    /** Any additional custom data */
+    [key: string]: unknown;
+}
+/**
+ * Props for the DrawerContentTitle component
+ */
+interface DrawerContentTitleProps {
+    /** Title text to display */
+    title: string;
+    /** Icon name from the Icon component library */
+    iconName?: string;
+    /** Icon source (SVG path or component) */
+    iconSrc?: string;
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** Badge color */
+    badgeColor?: string;
+    /** Badge count to display */
+    badgeCount?: string | number;
+    /** Array of submenu items (creates collapsible submenu) */
+    submenu?: SubmenuItem[];
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional title CSS classes */
+    titleClassName?: string;
+    /** Whether this item is active */
+    isActive?: boolean;
+}
+/**
+ * Props for the DrawerContainer component
+ */
+interface DrawerContainerProps {
+    /** Content to render inside the drawer */
+    children: ReactNode;
+    /** Title displayed at the top of the drawer */
+    title: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom header render function */
+    renderHeader?: (title: string) => ReactNode;
+}
+/**
+ * Configuration for drawer content based on menu ID
+ */
+interface DrawerConfig {
+    /** Menu ID that triggers this drawer */
+    menuId: string;
+    /** Content to render in the drawer */
+    content: ReactNode;
+}
+/**
+ * Main Sidebar component props
+ */
+interface SidebarProps {
+    /** Array of main navigation menu items */
+    navigationItems: SidebarItemConfig[];
+    /** Array of bottom navigation menu items */
+    bottomNavigationItems?: SidebarItemConfig[];
+    /** Drawer configurations mapped by menu ID */
+    drawerContent?: Record<string, ReactNode>;
+    /** Logo component or element */
+    logo?: ReactNode;
+    /** Click handler for logo */
+    onLogoClick?: () => void;
+    /** User avatar component or element */
+    userAvatar?: ReactNode;
+    /** User information component or element (shown in drawer footer) */
+    userInfo?: ReactNode;
+    /** Footer content shown when drawer is open */
+    drawerFooter?: ReactNode | ((activeMenuId: string | null) => ReactNode);
+    /** Width of the drawer when open (in pixels) */
+    drawerWidth?: number;
+    /** Initial active menu ID */
+    defaultActiveId?: string | null;
+    /** Controlled active menu ID */
+    activeId?: string | null;
+    /** Callback when active menu changes */
+    onActiveChange?: (menuId: string | null) => void;
+    /** Whether clicking outside should close the drawer */
+    closeOnOutsideClick?: boolean;
+    /** Whether losing focus should close the drawer (default: true) */
+    closeOnBlur?: boolean;
+    /** Additional CSS classes for the sidebar container */
+    className?: string;
+    /** Additional CSS classes for the navigation section */
+    navigationClassName?: string;
+    /** Additional CSS classes for the drawer */
+    drawerClassName?: string;
+    /** Custom render function for sidebar items */
+    renderSidebarItem?: (item: SidebarItemConfig, isActive: boolean, onClick: (item: SidebarItemConfig) => void) => ReactNode;
+}
+
+/**
+ * Sidebar - A flexible, generic sidebar navigation component
+ *
+ * Provides a collapsible sidebar with navigation items and an expandable drawer.
+ * Highly customizable through props, allowing for different menu structures,
+ * drawer content, and styling.
+ *
+ * @example
+ * ```tsx
+ * const navigationItems = [
+ *   { id: 'home', label: 'Home', iconName: 'Home' },
+ *   { id: 'settings', label: 'Settings', iconName: 'Settings' },
+ * ];
+ *
+ * const drawerContent = {
+ *   home: <HomeDrawerContent />,
+ *   settings: <SettingsDrawerContent />,
+ * };
+ *
+ * <Sidebar
+ *   navigationItems={navigationItems}
+ *   drawerContent={drawerContent}
+ *   logo={<MyLogo />}
+ *   onLogoClick={() => navigate('/')}
+ * />
+ * ```
+ */
+declare function Sidebar({ navigationItems, bottomNavigationItems, drawerContent, logo, onLogoClick, userAvatar, userInfo, drawerFooter, drawerWidth, defaultActiveId, activeId: controlledActiveId, onActiveChange, closeOnOutsideClick, closeOnBlur, className, navigationClassName, drawerClassName, renderSidebarItem, }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * SidebarItem - A single navigation item in the sidebar
+ *
+ * Displays an icon with optional badge count and tooltip.
+ * Supports active state styling and custom click handling.
+ *
+ * @example
+ * ```tsx
+ * <SidebarItem
+ *   item={{ id: 'home', label: 'Home', iconName: 'Home' }}
+ *   activeId="home"
+ *   onClick={(item) => console.log('Clicked:', item.id)}
+ *   countBadge={5}
+ * />
+ * ```
+ */
+declare function SidebarItem({ item, activeId, onClick, countBadge, className, renderIcon, }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * DrawerContainer - Container for drawer content with a title header
+ *
+ * Provides consistent styling and layout for sidebar drawer content.
+ *
+ * @example
+ * ```tsx
+ * <DrawerContainer title="Settings">
+ *   <div>Your drawer content here</div>
+ * </DrawerContainer>
+ * ```
+ */
+declare function DrawerContainer({ children, title, className, renderHeader, }: DrawerContainerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * DrawerContentTitle - A title/item component for drawer content
+ *
+ * Supports simple items with icons and badges, or collapsible submenus.
+ *
+ * @example
+ * ```tsx
+ * <DrawerContentTitle
+ *   title="Dashboard"
+ *   iconSrc="/icons/dashboard.svg"
+ *   badgeCount={5}
+ *   onClick={() => navigate('/dashboard')}
+ * />
+ *
+ * // With submenu
+ * <DrawerContentTitle
+ *   title="Settings"
+ *   iconSrc="/icons/settings.svg"
+ *   submenu={[
+ *     { id: '1', title: 'Profile', onClick: handleProfile },
+ *     { id: '2', title: 'Security', onClick: handleSecurity },
+ *   ]}
+ * />
+ * ```
+ */
+declare function DrawerContentTitle({ title, iconName, iconSrc, iconSize, badgeColor, badgeCount, submenu, onClick, className, titleClassName, isActive, }: DrawerContentTitleProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonRoundness = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+interface SkeletonProps {
+    width?: string | number;
+    height?: string | number;
+    roundness?: SkeletonRoundness;
+    variant?: 'pulse' | 'default';
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The most basic skeleton block - a single rectangle with customizable size, roundness, and animation.
+ * Can be used on its own or as a building block for more complex skeleton components.
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SkeletonComponentProps {
+    variant?: 'pulse' | 'default';
+    itemCount?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+
+declare const SkeletonAvatar: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonBadge: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonBanner: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonButton: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonCard: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonCard2: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonCard3: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonCardStack: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonChart: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonContentCard: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonDataGrid: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonForm: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonImage: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonInfoCard: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonInput: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonList: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonParagraph: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonText: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonVideo: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const SkeletonWidgetCard: react.ForwardRefExoticComponent<SkeletonComponentProps & react.RefAttributes<HTMLDivElement>>;
+
+type SkeletonType = 'card' | 'card2' | 'card3' | 'cardStack' | 'contentCard' | 'infoCard' | 'widgetCard' | 'image' | 'video' | 'avatar' | 'dataGrid' | 'text' | 'paragraph' | 'list' | 'form' | 'banner' | 'chart' | 'button' | 'badge' | 'input';
+interface SkeletonWrapperProps extends SkeletonComponentProps {
+    skeleton?: SkeletonType;
+    isShowing?: boolean;
+    children?: ReactNode;
+}
+declare const SkeletonWrapper: react.ForwardRefExoticComponent<SkeletonWrapperProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SliderProps {
+    minValue?: number;
+    maxValue?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    className?: string;
+    classNames?: {
+        container?: string;
+        track?: string;
+        path?: string;
+        filledTrack?: string;
+        thumb?: string;
+    };
+    style?: CSSProperties;
+    styles?: {
+        container?: CSSProperties;
+        track?: CSSProperties;
+        path?: CSSProperties;
+        filledTrack?: CSSProperties;
+        thumb?: CSSProperties;
+    };
+    disabled?: boolean;
+    label?: ReactNode;
+    labels?: {
+        minLabel?: ReactNode;
+        maxLabel?: ReactNode;
+    };
+    tooltip?: TooltipProps;
+    infoLabels?: InfoLabelsProps;
+}
+/**
+ * Single-handle slider for selecting a numeric value within a range.
+ *
+ * - Supports controlled mode via `value` + `onChange`, and uncontrolled via `defaultValue`.
+ * - Configure bounds with `minValue` / `maxValue` and increment with `step`.
+ * - Attach a tooltip to the thumb via the `tooltip` prop (forwarded to the Tooltip component).
+ * - Accepts `classNames` and `styles` for keys: `container`, `track`, `path`, `filledTrack`, `thumb`, `infoLabels`.
+ */
+declare const Slider: react__default.FC<SliderProps>;
+
+interface Step {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+}
+interface StepperProps extends ComponentProps<'div'> {
+    steps?: Step[];
+    activeStep?: number;
+    orientation?: 'horizontal' | 'vertical';
+    color?: string;
+    classNames?: {
+        container?: string;
+        step?: string;
+        circle?: string;
+        connector?: string;
+        title?: string;
+        subtitle?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        step?: CSSProperties;
+        circle?: CSSProperties;
+        connector?: CSSProperties;
+        title?: CSSProperties;
+        subtitle?: CSSProperties;
+    };
+}
+/**
+ * Step-progress indicator rendered horizontally or vertically.
+ *
+ * - Pass `steps` as an array of `{ title?, subtitle? }` objects.
+ * - Control the active step with `activeStep` (1-based index).
+ * - Toggle layout with `orientation` (`horizontal` | `vertical`).
+ * - Override the accent color with `color`.
+ * - Accepts `classNames` and `styles` for keys: `container`, `step`, `circle`, `connector`, `title`, `subtitle`.
+ */
+declare const Stepper: react.ForwardRefExoticComponent<Omit<StepperProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+interface Tab {
+    id?: string;
+    label?: ReactNode;
+    badge?: PillBadgeProps;
+    content?: ReactNode;
+    isDisabled?: boolean;
+}
+interface TabsClassNames {
+    container?: string;
+    list?: string;
+    tab?: string;
+    tabActive?: string;
+    tabInactive?: string;
+    tabDisabled?: string;
+    count?: ComponentClassnames<PillBadgeProps>;
+    content?: string;
+}
+interface TabsStyles {
+    container?: CSSProperties;
+    list?: CSSProperties;
+    tab?: CSSProperties;
+    tabActive?: CSSProperties;
+    tabInactive?: CSSProperties;
+    tabDisabled?: CSSProperties;
+    count?: ComponentStyles<PillBadgeProps>;
+    content?: CSSProperties;
+}
+
+type Direction = 'horizontal' | 'vertical';
+type Variant = 'underlined' | 'padded';
+
+type TabsProps = ComponentProps<'div'> & {
+    tabs?: Tab[];
+    currentTabIndex?: number;
+    onTabChange?: (index: number, tab?: Tab) => void;
+    variant?: Variant;
+    direction?: Direction;
+    classNames?: TabsClassNames;
+    styles?: TabsStyles;
+};
+/**
+ * The `Tabs` component displays a set of selectable tabs, allowing users to switch between different views or content sections within an application.
+ * It supports controlled and uncontrolled modes, custom styling, and optional tab counts.
+ */
+declare const Tabs: react.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type TextAreaProps = Omit<ComponentProps<'textarea'>, 'onChange'> & {
+    label?: ReactNode;
+    value?: string;
+    minHeight?: number;
+    maxHeight?: number;
+    onChange?: (value: string) => void;
+    maxLengthLabelThreshold?: number;
+    maxLengthLabel?: (remaining: number) => ReactNode;
+    infoLabels?: InfoLabelsProps;
+    topRightElement?: ReactNode;
+    labelRightElement?: ReactNode;
+    textareaOverlay?: ReactNode;
+    classNames?: {
+        container?: string;
+        label?: string;
+        textareaContainer?: string;
+        textarea?: string;
+        maxLengthLabel?: string;
+    };
+    styles?: {
+        container?: CSSProperties;
+        label?: CSSProperties;
+        textareaContainer?: CSSProperties;
+        textarea?: CSSProperties;
+        maxLengthLabel?: CSSProperties;
+    };
+};
+/**
+ * TextArea component is a resizable textarea input field that can be used to capture multi-line text input from users.
+ */
+declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
+
+export { AdvancedProgressBar, type AdvancedProgressBarProps, AudioPlayback, type AudioPlaybackProps, AudioRecorder, type AudioRecorderProps, Avatar, type AvatarProps, AvatarRow, type AvatarRowProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonVariant, Card, CardIcon, type CardIconProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CleenIcon, CleenNotificationContainer, Collapsible, type CollapsibleProps, type CollapsibleSection, CreditCardInput, type CreditCardInputProps, DatePicker, type DatePickerProps, Divider, type DividerProps, Drawer, type DrawerConfig, DrawerContainer, type DrawerContainerProps, DrawerContentTitle, type DrawerContentTitleProps, type DrawerProps, Dropdown, type DropdownProps, FilterDrawer, type FilterDrawerFilterCategories, type FilterDrawerNewFilter, type FilterDrawerProps, type FilterDrawerSavedFilter, FormGroup, type FormGroupProps, GroupSelector, type GroupSelectorProps, type GroupSelectorSaveResult, type GroupSelectorThreeDotOption, IconAlertCircle, IconAlertFeatured, IconAlertOctagon, IconAlertTriangle, IconAlignRight, IconArrowDown, IconArrowLeft, IconArrowLeft2, IconArrowRight, IconArrowToTop, IconArrowUp, IconArrowUpRight, IconArrowUpRightNarrow, IconArrowUpRightSquare, IconAttachment, IconBarChartSquare, IconBold, IconBookmarkCheck, IconBookmarkCheckFill, IconBookmarkX, IconBoxLines, IconBoxText, IconBracketsCheck, IconBracketsEllipses, IconCalendar, IconCertificateHeart, IconCheck, IconCheckCircle, IconCheckCircleBroken, IconCheckFill, IconCheckVerified, IconChevronDown, IconChevronLeft, IconChevronLeftDouble, IconChevronRight, IconChevronRightDouble, IconChevronSelectorVertical, IconChevronUp, IconCircleSwap, IconClockFastForward, IconClockRewind, IconClockRewind2, IconCodeBrowser, IconCodeCircle, IconColors, IconColumnEdit, IconCopy, IconCopy2, IconCopy3, IconCopy4, IconCopy5, IconCopyCheck, IconCube, IconCubeOutline, IconCursorBox, IconDataflow, IconDataflow2, IconDataflow3, IconDelete, IconDollarCircle, IconDotsGrid, IconDotsHorizontal, IconDotsVertical, IconEdit, IconEditable, IconExpand, IconEye, IconEyeHidden, IconEyeHidden2, IconFaceSmile, IconFilter, IconFilter2, IconFlag, IconFlag2, IconFlag3, IconHandShield, IconHash, IconHeadsetMic, IconHeart, IconHouseLine, IconImage, IconImage2, IconImage3, IconImage4, IconImageCheck, IconInfoCircle, IconInfoHexagon, IconItalic, IconLayersMultiple, IconLayersSingle, IconLayout, IconLayout2, IconLayoutColumns, IconLayoutCustom, IconLayoutSequential, IconLayoutStuffed, IconLayoutTile, IconLifeBuoy, IconLightbulb, IconLightning, IconLightning2, IconLightningFast, IconLineChartBar, IconLineChartBreakoutSquare, IconLineChartUp, IconLineChartUp2, IconLines, IconLinesCheck, IconLinesPlay, IconLink, IconLink2, IconLink3, IconLink4, IconLink5, IconListBullet, IconListOrder, IconListOrder2, IconLock, IconLock2, IconLogIn, IconLogOut, IconLogOut2, IconMagicWand, IconMagicWand2, IconMail, IconMessageSquare, IconMessageSquare2, IconMessageXSquare, IconMinusCircle, IconMobile, IconMonitor, IconMonitor2, IconMonitor3, IconMoonCircle, IconName, IconNavigationPointer, IconNotificationBox, IconPCSetup, IconPalette, IconPasscodeLock, IconPencil, IconPercentageCircle, IconPerspective, IconPhoneCall, IconPin, IconPlayCircle, IconPlus, IconPlusCircle, IconPulse, IconQuestionCircle, IconRadioButton, IconRadioButtonActive, IconReceiptCheck, IconRedo, IconRefresh, IconRefresh2, IconRefresh3, IconRepeat, IconRepeat2, IconRetweet, IconRoundChart, IconRoundChart2, IconRoute, IconSave, IconSave2, IconScanDots, IconSearch, IconSend, IconSettings, IconSettings2, IconSettings3, IconShieldLightning, IconShieldPlus, IconShieldRemove, IconShuffle, IconSlashCircle, IconSlashOctagon, IconSocialGlobe, IconSocialLinkedin, IconSocialX, IconSpeedometer, IconStairsRound, IconStar, IconStarHalf, IconStars, IconStars2, IconStrikethrough, IconSuccessFeatured, IconSun, IconSwitchHorizontal, IconTag, IconTarget, IconTarget2, IconTextFormat, IconTextFormat2, IconTextHighlight, IconTranslate, IconTrash, IconTrending, IconUnderline, IconUndo, IconUndo2, IconUploadCloud, IconUser, IconUserEdit, IconUserRight, IconUserSquare, IconUsers, IconUsersUp, IconVolume, IconWrench, IconX, IconXCircle, IconXCircle2, IconXClose, IconXSquare, InfoLabels, type InfoLabelsProps, Input, type InputProps, Loader, type LoaderProps, Lookup, type LookupOption, type LookupProps, Menu, type MenuProps, Modal, type ModalProps, type NotificationProps, Pagination, PaginationGoToPage, type PaginationGoToPageProps, PaginationPageSize, type PaginationPageSizeProps, type PaginationProps, PillBadge, type PillBadgeProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, RadioBoxGroup, type RadioBoxGroupProps, RadioButtonGroup, type RadioButtonGroupProps, RangeSlider, type RangeSliderProps, Select, type SelectProps, Sidebar, SidebarItem, type SidebarItemConfig, type SidebarItemProps, type SidebarProps, Skeleton, SkeletonAvatar, SkeletonBadge, SkeletonBanner, SkeletonButton, SkeletonCard, SkeletonCard2, SkeletonCard3, SkeletonCardStack, SkeletonChart, type SkeletonComponentProps, SkeletonContentCard, SkeletonDataGrid, SkeletonForm, SkeletonImage, SkeletonInfoCard, SkeletonInput, SkeletonList, SkeletonParagraph, type SkeletonProps, type SkeletonRoundness, SkeletonText, type SkeletonType, SkeletonVideo, SkeletonWidgetCard, SkeletonWrapper, Slider, type SliderProps, Stepper, type StepperProps, type SubmenuItem, Switch, type SwitchProps, type Tab, Tabs, type TabsProps, TextArea, type TextAreaProps, Tooltip, type TooltipProps, showNotification };