@gsk_poc/untitled-ui-base 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,1417 @@
+import * as react from 'react';
+import react__default, { FC, ReactNode, ComponentPropsWithRef, Ref, CSSProperties, HTMLAttributes, SVGProps, ComponentProps, RefAttributes, TdHTMLAttributes, ThHTMLAttributes, MouseEventHandler, DetailedHTMLProps, ButtonHTMLAttributes, AnchorHTMLAttributes, PropsWithChildren, ComponentType } from 'react';
+import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
+import { FileIcon } from '@untitledui/file-icons';
+import * as react_aria_components from 'react-aria-components';
+import { DialogProps as DialogProps$1, ModalOverlayProps, ModalRenderProps, DialogTrigger, TableProps, TableBody, CellProps, ColumnProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabListProps, TabProps, TabRenderProps, TabPanel as TabPanel$1, Tabs as Tabs$1, ToggleButtonGroupProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, MenuTrigger, PopoverProps, MenuProps, MenuItemProps, SeparatorProps, Form as Form$1, RadioProps, RadioGroupProps as RadioGroupProps$1, ComboBoxProps as ComboBoxProps$1, ListBoxProps, ListBoxItemProps, SelectProps as SelectProps$1, Key, SliderProps as SliderProps$1, TagGroupProps as TagGroupProps$1, TagProps as TagProps$1, TextAreaProps, TextFieldProps as TextFieldProps$2, SwitchProps, TooltipTriggerComponentProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1 } from 'react-aria-components';
+import { OTPInput } from 'input-otp';
+import { ListData } from 'react-stately';
+import { RefObject } from '@react-types/shared';
+import * as tailwind_merge from 'tailwind-merge';
+
+type NavItem = {
+    /** Label text for the nav item. */
+    label: string;
+    /** URL to navigate to when the nav item is clicked. */
+    href: string;
+    /** Whether the nav item is currently active. */
+    current?: boolean;
+    /** Icon component to display. */
+    icon?: FC<{
+        className?: string;
+    }>;
+    /** Badge to display. */
+    badge?: ReactNode;
+    /** List of sub-items to display. */
+    items?: NavItem[];
+};
+interface HeaderNavigationBaseProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** List of items to display. */
+    items: NavItem[];
+    /** List of sub-items to display. */
+    subItems?: NavItem[];
+    /** Content to display in the trailing position. */
+    trailingContent?: ReactNode;
+    /** Whether to show the avatar dropdown. */
+    showAvatarDropdown?: boolean;
+    /** Whether to hide the bottom border. */
+    hideBorder?: boolean;
+}
+declare const HeaderNavigationBase: ({ activeUrl, items, subItems, trailingContent, showAvatarDropdown, hideBorder, }: HeaderNavigationBaseProps) => react.JSX.Element;
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    /** The options for the Embla carousel. */
+    opts?: CarouselOptions;
+    /** The plugins for the Embla carousel. */
+    plugins?: CarouselPlugin;
+    /** The orientation of the carousel. */
+    orientation?: "horizontal" | "vertical";
+    /** The function to set the API for the carousel. */
+    setApi?: (api: CarouselApi) => void;
+};
+type CarouselContextProps = CarouselProps & {
+    /** The ref of the carousel. */
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    /** The API of the carousel. */
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    /** The function to scroll the carousel to the previous slide. */
+    scrollPrev: () => void;
+    /** The function to scroll the carousel to the next slide. */
+    scrollNext: () => void;
+    /** Whether the carousel can scroll to the previous slide. */
+    canScrollPrev: boolean;
+    /** Whether the carousel can scroll to the next slide. */
+    canScrollNext: boolean;
+    /** The index of the selected slide. */
+    selectedIndex: number;
+    /** The scroll snaps of the carousel. */
+    scrollSnaps: number[];
+};
+declare const CarouselContext: react.Context<CarouselContextProps | null>;
+declare const useCarousel: () => CarouselContextProps;
+interface CarouselContentProps extends ComponentPropsWithRef<"div"> {
+    /** The class name of the content. */
+    className?: string;
+    /** Whether to hide the overflow. */
+    overflowHidden?: boolean;
+}
+interface TriggerRenderProps {
+    isDisabled: boolean;
+    onClick: () => void;
+}
+interface TriggerProps {
+    /** The ref of the trigger. */
+    ref?: Ref<HTMLButtonElement>;
+    /** If true, the child element will be cloned and passed down the prop of the trigger. */
+    asChild?: boolean;
+    /** The direction of the trigger. */
+    direction: "prev" | "next";
+    /** The children of the trigger. Can be a render prop or a valid element. */
+    children: ReactNode | ((props: TriggerRenderProps) => ReactNode);
+    /** The style of the trigger. */
+    style?: CSSProperties;
+    /** The class name of the trigger. */
+    className?: string | ((args: {
+        isDisabled: boolean;
+    }) => string);
+}
+interface CarouselIndicatorRenderProps {
+    isSelected: boolean;
+    onClick: () => void;
+}
+interface CarouselIndicatorProps {
+    /** The index of the indicator. */
+    index: number;
+    /** If true, the child element will be cloned and passed down the prop of the indicator. */
+    asChild?: boolean;
+    /** If true, the indicator will be selected. */
+    isSelected?: boolean;
+    /** The children of the indicator. Can be a render prop or a valid element. */
+    children?: ReactNode | ((props: CarouselIndicatorRenderProps) => ReactNode);
+    /** The style of the indicator. */
+    style?: CSSProperties;
+    /** The class name of the indicator. */
+    className?: string | ((args: {
+        isSelected: boolean;
+    }) => string);
+}
+interface CarouselIndicatorGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: ReactNode | ((props: {
+        index: number;
+    }) => ReactNode);
+    className?: string;
+}
+declare const Carousel: {
+    Root: ({ orientation, opts, setApi, plugins, className, children, ...props }: ComponentPropsWithRef<"div"> & CarouselProps) => react.JSX.Element;
+    Content: ({ className, overflowHidden, ...props }: CarouselContentProps) => react.JSX.Element;
+    Item: ({ className, ...props }: ComponentPropsWithRef<"div">) => react.JSX.Element;
+    PrevTrigger: (props: Omit<TriggerProps, "direction">) => react.JSX.Element;
+    NextTrigger: (props: Omit<TriggerProps, "direction">) => react.JSX.Element;
+    IndicatorGroup: ({ children, ...props }: CarouselIndicatorGroupProps) => react.JSX.Element;
+    Indicator: ({ index, isSelected, children, asChild, className, style }: CarouselIndicatorProps) => react.JSX.Element;
+};
+
+interface FeaturedIconProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    className?: string;
+    icon?: FC<{
+        className?: string;
+    }> | ReactNode;
+    size?: "sm" | "md" | "lg" | "xl";
+    color: "brand" | "gray" | "success" | "warning" | "error";
+    theme?: "light" | "gradient" | "dark" | "outline" | "modern" | "modern-neue";
+}
+declare const FeaturedIcon$1: (props: FeaturedIconProps) => react.JSX.Element;
+
+declare const patterns: {
+    circle: (props: Omit<SVGProps<SVGSVGElement>, "size"> & {
+        size?: "sm" | "md" | "lg";
+    }) => react.JSX.Element;
+    square: (props: Omit<SVGProps<SVGSVGElement>, "size"> & {
+        size?: "sm" | "md" | "lg";
+    }) => react.JSX.Element;
+    grid: (props: Omit<SVGProps<SVGSVGElement>, "size"> & {
+        size?: "sm" | "md" | "lg";
+    }) => react.JSX.Element;
+    "grid-check": (props: Omit<SVGProps<SVGSVGElement>, "size"> & {
+        size?: "sm" | "md";
+    }) => react.JSX.Element;
+};
+interface BackgroundPatternProps extends Omit<SVGProps<SVGSVGElement>, "size"> {
+    size?: "sm" | "md" | "lg";
+    pattern: keyof typeof patterns;
+}
+
+interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg";
+    svgClassName?: string;
+    childrenClassName?: string;
+}
+type IllustrationType = "box" | "cloud" | "documents" | "credit-card";
+declare const Illustration$1: (props: IllustrationProps & {
+    type: IllustrationType;
+}) => react.JSX.Element | null;
+
+interface RootContextProps {
+    size?: "sm" | "md" | "lg";
+}
+interface RootProps$1 extends ComponentPropsWithRef<"div">, RootContextProps {
+}
+declare const Root$1: ({ size, ...props }: RootProps$1) => react.JSX.Element;
+declare const FeaturedIcon: ({ color, theme, icon, size, ...props }: ComponentPropsWithRef<typeof FeaturedIcon$1>) => react.JSX.Element;
+declare const Illustration: ({ type, color, size, ...props }: ComponentPropsWithRef<typeof Illustration$1>) => react.JSX.Element;
+interface FileTypeIconProps extends ComponentPropsWithRef<"div"> {
+    type?: ComponentProps<typeof FileIcon>["type"];
+    theme?: ComponentProps<typeof FileIcon>["variant"];
+}
+declare const FileTypeIcon: ({ type, theme, ...props }: FileTypeIconProps) => react.JSX.Element;
+interface HeaderProps extends ComponentPropsWithRef<"div"> {
+    pattern?: "none" | BackgroundPatternProps["pattern"];
+    patternSize?: "sm" | "md" | "lg";
+}
+declare const Header$1: ({ pattern, patternSize, ...props }: HeaderProps) => react.JSX.Element;
+declare const Content$1: (props: ComponentPropsWithRef<"div">) => react.JSX.Element;
+declare const Footer$1: (props: ComponentPropsWithRef<"div">) => react.JSX.Element;
+declare const Title: (props: ComponentPropsWithRef<"h1">) => react.JSX.Element;
+declare const Description$1: (props: ComponentPropsWithRef<"p">) => react.JSX.Element;
+declare const EmptyState: typeof Root$1 & {
+    Title: typeof Title;
+    Header: typeof Header$1;
+    Footer: typeof Footer$1;
+    Content: typeof Content$1;
+    Description: typeof Description$1;
+    Illustration: typeof Illustration;
+    FeaturedIcon: typeof FeaturedIcon;
+    FileTypeIcon: typeof FileTypeIcon;
+};
+
+/**
+ * Returns a human-readable file size.
+ * @param bytes - The size of the file in bytes.
+ * @returns A string representing the file size in a human-readable format.
+ */
+declare const getReadableFileSize: (bytes: number) => string;
+interface FileUploadDropZoneProps {
+    /** The class name of the drop zone. */
+    className?: string;
+    /**
+     * A hint text explaining what files can be dropped.
+     */
+    hint?: string;
+    /**
+     * Disables dropping or uploading files.
+     */
+    isDisabled?: boolean;
+    /**
+     * Specifies the types of files that the server accepts.
+     * Examples: "image/*", ".pdf,image/*", "image/*,video/mpeg,application/pdf"
+     */
+    accept?: string;
+    /**
+     * Allows multiple file uploads.
+     */
+    allowsMultiple?: boolean;
+    /**
+     * Maximum file size in bytes.
+     */
+    maxSize?: number;
+    /**
+     * Callback function that is called with the list of dropped files
+     * when files are dropped on the drop zone.
+     */
+    onDropFiles?: (files: FileList) => void;
+    /**
+     * Callback function that is called with the list of unaccepted files
+     * when files are dropped on the drop zone.
+     */
+    onDropUnacceptedFiles?: (files: FileList) => void;
+    /**
+     * Callback function that is called with the list of files that exceed
+     * the size limit when files are dropped on the drop zone.
+     */
+    onSizeLimitExceed?: (files: FileList) => void;
+}
+declare const FileUploadDropZone: ({ className, hint, isDisabled, accept, allowsMultiple, maxSize, onDropFiles, onDropUnacceptedFiles, onSizeLimitExceed, }: FileUploadDropZoneProps) => react.JSX.Element;
+interface FileListItemProps {
+    /** The name of the file. */
+    name: string;
+    /** The size of the file. */
+    size: number;
+    /** The upload progress of the file. */
+    progress: number;
+    /** Whether the file failed to upload. */
+    failed?: boolean;
+    /** The type of the file. */
+    type?: ComponentProps<typeof FileIcon>["type"];
+    /** The class name of the file list item. */
+    className?: string;
+    /** The variant of the file icon. */
+    fileIconVariant?: ComponentProps<typeof FileIcon>["variant"];
+    /** The function to call when the file is deleted. */
+    onDelete?: () => void;
+    /** The function to call when the file upload is retried. */
+    onRetry?: () => void;
+}
+declare const FileListItemProgressBar: ({ name, size, progress, failed, type, fileIconVariant, onDelete, onRetry, className }: FileListItemProps) => react.JSX.Element;
+declare const FileListItemProgressFill: ({ name, size, progress, failed, type, fileIconVariant, onDelete, onRetry, className }: FileListItemProps) => react.JSX.Element;
+declare const FileUpload: {
+    Root: (props: ComponentPropsWithRef<"div">) => react.JSX.Element;
+    List: (props: ComponentPropsWithRef<"ul">) => react.JSX.Element;
+    DropZone: ({ className, hint, isDisabled, accept, allowsMultiple, maxSize, onDropFiles, onDropUnacceptedFiles, onSizeLimitExceed, }: FileUploadDropZoneProps) => react.JSX.Element;
+    ListItemProgressBar: ({ name, size, progress, failed, type, fileIconVariant, onDelete, onRetry, className }: FileListItemProps) => react.JSX.Element;
+    ListItemProgressFill: ({ name, size, progress, failed, type, fileIconVariant, onDelete, onRetry, className }: FileListItemProps) => react.JSX.Element;
+};
+
+interface LoadingIndicatorProps {
+    /**
+     * The visual style of the loading indicator.
+     * @default 'line-simple'
+     */
+    type?: "line-simple" | "line-spinner" | "dot-circle";
+    /**
+     * The size of the loading indicator.
+     * @default 'sm'
+     */
+    size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Optional text label displayed below the indicator.
+     */
+    label?: string;
+}
+declare const LoadingIndicator: ({ type, size, label }: LoadingIndicatorProps) => react.JSX.Element;
+
+declare const ModalOverlay: (props: ModalOverlayProps) => react.JSX.Element;
+declare const Modal: (props: ModalOverlayProps) => react.JSX.Element;
+declare const Dialog$1: (props: DialogProps$1) => react.JSX.Element;
+
+interface PaginationRootProps {
+    /** Number of sibling pages to show on each side of the current page */
+    siblingCount?: number;
+    /** Current active page number */
+    page: number;
+    /** Total number of pages */
+    total: number;
+    children: ReactNode;
+    /** The style of the pagination root. */
+    style?: CSSProperties;
+    /** The class name of the pagination root. */
+    className?: string;
+    /** Callback function that's called when the page changes with the new page number. */
+    onPageChange?: (page: number) => void;
+}
+
+interface PaginationProps extends Partial<Omit<PaginationRootProps, "children">> {
+    /** Whether the pagination buttons are rounded. */
+    rounded?: boolean;
+}
+declare const PaginationPageDefault: ({ rounded, page, total, className, ...props }: PaginationProps) => react.JSX.Element;
+declare const PaginationPageMinimalCenter: ({ rounded, page, total, className, ...props }: PaginationProps) => react.JSX.Element;
+declare const PaginationCardDefault: ({ rounded, page, total, ...props }: PaginationProps) => react.JSX.Element;
+interface PaginationCardMinimalProps {
+    /** The current page. */
+    page?: number;
+    /** The total number of pages. */
+    total?: number;
+    /** The alignment of the pagination. */
+    align?: "left" | "center" | "right";
+    /** The class name of the pagination component. */
+    className?: string;
+    /** The function to call when the page changes. */
+    onPageChange?: (page: number) => void;
+}
+declare const PaginationCardMinimal: ({ page, total, align, onPageChange, className }: PaginationCardMinimalProps) => react.JSX.Element;
+interface PaginationButtonGroupProps extends Partial<Omit<PaginationRootProps, "children">> {
+    /** The alignment of the pagination. */
+    align?: "left" | "center" | "right";
+}
+declare const PaginationButtonGroup: ({ align, page, total, ...props }: PaginationButtonGroupProps) => react.JSX.Element;
+
+interface PaginationDotProps extends Omit<PaginationRootProps, "children"> {
+    /** The size of the pagination dot. */
+    size?: "md" | "lg";
+    /** Whether the pagination uses brand colors. */
+    isBrand?: boolean;
+    /** Whether the pagination is displayed in a card. */
+    framed?: boolean;
+}
+declare const PaginationDot: ({ framed, className, size, isBrand, ...props }: PaginationDotProps) => react.JSX.Element;
+
+interface PaginationLineProps extends Omit<PaginationRootProps, "children"> {
+    /** The size of the pagination line. */
+    size?: "md" | "lg";
+    /** Whether the pagination is displayed in a card. */
+    framed?: boolean;
+}
+declare const PaginationLine: ({ framed, className, size, ...props }: PaginationLineProps) => react.JSX.Element;
+
+interface DialogProps extends DialogProps$1, RefAttributes<HTMLElement> {
+}
+declare const Dialog: {
+    (props: DialogProps): react.JSX.Element;
+    displayName: string;
+};
+interface SlideoutMenuProps extends Omit<ModalOverlayProps, "children">, RefAttributes<HTMLDivElement> {
+    children: ReactNode | ((children: ModalRenderProps & {
+        close: () => void;
+    }) => ReactNode);
+    dialogClassName?: string;
+}
+declare const Menu: {
+    ({ children, dialogClassName, ...props }: SlideoutMenuProps): react.JSX.Element;
+    displayName: string;
+};
+declare const Content: {
+    ({ role, ...props }: ComponentPropsWithRef<"div">): react.JSX.Element;
+    displayName: string;
+};
+interface SlideoutHeaderProps extends ComponentPropsWithRef<"header"> {
+    onClose?: () => void;
+}
+declare const Header: {
+    ({ className, children, onClose, ...props }: SlideoutHeaderProps): react.JSX.Element;
+    displayName: string;
+};
+declare const Footer: {
+    (props: ComponentPropsWithRef<"footer">): react.JSX.Element;
+    displayName: string;
+};
+declare const SlideoutMenu: typeof Menu & {
+    Trigger: typeof DialogTrigger;
+    Content: typeof Content;
+    Header: typeof Header;
+    Footer: typeof Footer;
+};
+
+declare const TableRowActionsDropdown: () => react.JSX.Element;
+interface TableCardHeaderProps {
+    /** The title of the table card header. */
+    title: string;
+    /** The badge displayed next to the title. */
+    badge?: ReactNode;
+    /** The description of the table card header. */
+    description?: string;
+    /** The content displayed after the title and badge. */
+    contentTrailing?: ReactNode;
+    /** The class name of the table card header. */
+    className?: string;
+}
+interface TableRootProps extends TableProps, Omit<ComponentPropsWithRef<"table">, "className" | "slot" | "style"> {
+    size?: "sm" | "md";
+}
+declare const TableRoot: {
+    ({ className, size, ...props }: TableRootProps): react.JSX.Element;
+    displayName: string;
+};
+interface TableHeaderProps<T extends object> extends TableHeaderProps$1<T>, Omit<ComponentPropsWithRef<"thead">, "children" | "className" | "slot" | "style"> {
+    bordered?: boolean;
+}
+declare const TableHeader: {
+    <T extends object>({ columns, children, bordered, className, ...props }: TableHeaderProps<T>): react.JSX.Element;
+    displayName: string;
+};
+interface TableHeadProps extends ColumnProps, Omit<ThHTMLAttributes<HTMLTableCellElement>, "children" | "className" | "style" | "id"> {
+    label?: string;
+    tooltip?: string;
+}
+declare const TableHead: {
+    ({ className, tooltip, label, children, ...props }: TableHeadProps): react.JSX.Element;
+    displayName: string;
+};
+interface TableRowProps<T extends object> extends RowProps<T>, Omit<ComponentPropsWithRef<"tr">, "children" | "className" | "onClick" | "slot" | "style" | "id"> {
+    highlightSelectedRow?: boolean;
+}
+declare const TableRow: {
+    <T extends object>({ columns, children, className, highlightSelectedRow, ...props }: TableRowProps<T>): react.JSX.Element;
+    displayName: string;
+};
+interface TableCellProps extends CellProps, Omit<TdHTMLAttributes<HTMLTableCellElement>, "children" | "className" | "style" | "id"> {
+    ref?: Ref<HTMLTableCellElement>;
+}
+declare const TableCell: {
+    ({ className, children, ...props }: TableCellProps): react.JSX.Element;
+    displayName: string;
+};
+declare const TableCard: {
+    Root: ({ children, className, size, ...props }: HTMLAttributes<HTMLDivElement> & {
+        size?: "sm" | "md";
+    }) => react.JSX.Element;
+    Header: ({ title, badge, description, contentTrailing, className }: TableCardHeaderProps) => react.JSX.Element;
+};
+declare const Table: typeof TableRoot & {
+    Body: typeof TableBody;
+    Cell: typeof TableCell;
+    Head: typeof TableHead;
+    Header: typeof TableHeader;
+    Row: typeof TableRow;
+};
+
+type Orientation = "horizontal" | "vertical";
+type HorizontalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "underline";
+type VerticalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "line";
+type TabTypeColors<T> = T extends "horizontal" ? HorizontalTypes : VerticalTypes;
+declare const sizes: {
+    sm: {
+        "button-brand": string;
+        "button-gray": string;
+        "button-border": string;
+        "button-minimal": string;
+        underline: string;
+        line: string;
+    };
+    md: {
+        "button-brand": string;
+        "button-gray": string;
+        "button-border": string;
+        "button-minimal": string;
+        underline: string;
+        line: string;
+    };
+};
+interface TabListComponentProps<T extends object, K extends Orientation> extends TabListProps<T> {
+    /** The size of the tab list. */
+    size?: keyof typeof sizes;
+    /** The type of the tab list. */
+    type?: TabTypeColors<K>;
+    /** The orientation of the tab list. */
+    orientation?: K;
+    /** The items of the tab list. */
+    items: T[];
+    /** Whether the tab list is full width. */
+    fullWidth?: boolean;
+}
+declare const TabList: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => react.JSX.Element;
+declare const TabPanel: (props: ComponentPropsWithRef<typeof TabPanel$1>) => react.JSX.Element;
+interface TabComponentProps extends TabProps {
+    /** The label of the tab. */
+    label?: ReactNode;
+    /** The children of the tab. */
+    children?: ReactNode | ((props: TabRenderProps) => ReactNode);
+    /** The badge displayed next to the label. */
+    badge?: number | string;
+}
+declare const Tab: (props: TabComponentProps) => react.JSX.Element;
+declare const Tabs: {
+    ({ className, ...props }: ComponentPropsWithRef<typeof Tabs$1>): react.JSX.Element;
+    Panel: (props: ComponentPropsWithRef<typeof TabPanel$1>) => react.JSX.Element;
+    List: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => react.JSX.Element;
+    Item: (props: TabComponentProps) => react.JSX.Element;
+};
+
+type AvatarSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+interface AvatarProps {
+    size?: AvatarSize;
+    className?: string;
+    src?: string | null;
+    alt?: string;
+    /**
+     * Display a contrast border around the avatar.
+     */
+    contrastBorder?: boolean;
+    /**
+     * Display a badge (i.e. company logo).
+     */
+    badge?: ReactNode;
+    /**
+     * Display a status indicator.
+     */
+    status?: "online" | "offline";
+    /**
+     * Display a verified tick icon.
+     *
+     * @default false
+     */
+    verified?: boolean;
+    /**
+     * The initials of the user to display if no image is available.
+     */
+    initials?: string;
+    /**
+     * An icon to display if no image is available.
+     */
+    placeholderIcon?: FC<{
+        className?: string;
+    }>;
+    /**
+     * A placeholder to display if no image is available.
+     */
+    placeholder?: ReactNode;
+    /**
+     * Whether the avatar should show a focus ring when the parent group is in focus.
+     * For example, when the avatar is wrapped inside a link.
+     *
+     * @default false
+     */
+    focusable?: boolean;
+}
+declare const Avatar: ({ contrastBorder, size, src, alt, initials, placeholder, placeholderIcon: PlaceholderIcon, badge, status, verified, focusable, className, }: AvatarProps) => react.JSX.Element;
+
+type IconComponentType = React.FunctionComponent<{
+    className?: string;
+    strokeWidth?: string | number;
+}>;
+type Sizes = "sm" | "md" | "lg";
+type BadgeColors = "gray" | "brand" | "error" | "warning" | "success" | "gray-blue" | "blue-light" | "blue" | "indigo" | "purple" | "pink" | "orange";
+type FlagTypes = "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ-1" | "BQ-2" | "BQ" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD-1" | "CD" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "earth" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB-2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PM" | "PN" | "PR" | "PT" | "PW" | "PY" | "QA" | "RE" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SD" | "SE" | "SG" | "SH" | "SI" | "SJ" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TF" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TZ" | "UA" | "UG" | "UM" | "US" | "UY" | "UZ" | "VA" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WF" | "WS" | "YE" | "YT" | "ZA" | "ZM" | "ZW";
+type ExtractColorKeys<T> = T extends {
+    styles: infer C;
+} ? keyof C : never;
+type ExtractBadgeKeys<T> = keyof T;
+type BadgeTypeToColorMap<T> = {
+    [K in ExtractBadgeKeys<T>]: ExtractColorKeys<T[K]>;
+};
+declare const badgeTypes: {
+    readonly pillColor: "pill-color";
+    readonly badgeColor: "color";
+    readonly badgeModern: "modern";
+};
+type BadgeTypes = (typeof badgeTypes)[keyof typeof badgeTypes];
+
+declare const filledColors: Record<BadgeColors, {
+    root: string;
+    addon: string;
+    addonButton: string;
+}>;
+declare const withPillTypes: {
+    "pill-color": {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    color: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    modern: {
+        common: string;
+        styles: {
+            gray: {
+                root: string;
+                addon: string;
+                addonButton: string;
+            };
+        };
+    };
+};
+declare const withBadgeTypes: {
+    "pill-color": {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    color: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    modern: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+        }>;
+    };
+};
+type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof withPillTypes>[T];
+interface BadgeProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeColor<T>;
+    children: ReactNode;
+    className?: string;
+}
+declare const Badge: <T extends BadgeTypes>(props: BadgeProps<T>) => react.JSX.Element;
+interface BadgeWithDotProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    className?: string;
+    children: ReactNode;
+}
+declare const BadgeWithDot: <T extends BadgeTypes>(props: BadgeWithDotProps<T>) => react.JSX.Element;
+interface BadgeWithIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    iconLeading?: IconComponentType;
+    iconTrailing?: IconComponentType;
+    children: ReactNode;
+    className?: string;
+}
+declare const BadgeWithIcon: <T extends BadgeTypes>(props: BadgeWithIconProps<T>) => react.JSX.Element;
+interface BadgeWithFlagProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    flag?: FlagTypes;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+declare const BadgeWithFlag: <T extends BadgeTypes>(props: BadgeWithFlagProps<T>) => react.JSX.Element;
+interface BadgeWithImageProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    imgSrc: string;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+declare const BadgeWithImage: <T extends BadgeTypes>(props: BadgeWithImageProps<T>) => react.JSX.Element;
+interface BadgeWithButtonProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon?: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+    /**
+     * The label for the button.
+     */
+    buttonLabel?: string;
+    /**
+     * The click event handler for the button.
+     */
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+}
+declare const BadgeWithButton: <T extends BadgeTypes>(props: BadgeWithButtonProps<T>) => react.JSX.Element;
+interface BadgeIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children?: ReactNode;
+}
+declare const BadgeIcon: <T extends BadgeTypes>(props: BadgeIconProps<T>) => react.JSX.Element;
+
+type Size = "md" | "lg";
+type Color = "brand" | "warning" | "error" | "gray" | "success";
+type Theme = "light" | "modern";
+type Align = "leading" | "trailing";
+interface BadgeGroupProps {
+    children?: string | ReactNode;
+    addonText: string;
+    size?: Size;
+    color: Color;
+    theme?: Theme;
+    /**
+     * Alignment of the badge addon element.
+     */
+    align?: Align;
+    iconTrailing?: FC<{
+        className?: string;
+    }> | ReactNode;
+    className?: string;
+}
+declare const BadgeGroup: ({ children, addonText, size, color, theme, align, className, iconTrailing: IconTrailing, }: BadgeGroupProps) => react.JSX.Element;
+
+declare const styles$2: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+    };
+};
+type ButtonSize = keyof typeof styles$2.sizes;
+interface ButtonGroupProps extends Omit<ToggleButtonGroupProps, "orientation">, RefAttributes<HTMLDivElement> {
+    size?: ButtonSize;
+    className?: string;
+}
+declare const ButtonGroup: ({ children, size, className, ...otherProps }: ButtonGroupProps) => react.JSX.Element;
+
+declare const styles$1: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        sm: {
+            root: string;
+            linkRoot: string;
+        };
+        md: {
+            root: string;
+            linkRoot: string;
+        };
+        lg: {
+            root: string;
+            linkRoot: string;
+        };
+        xl: {
+            root: string;
+            linkRoot: string;
+        };
+    };
+    colors: {
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        tertiary: {
+            root: string;
+        };
+        "link-gray": {
+            root: string;
+        };
+        "link-color": {
+            root: string;
+        };
+        "primary-destructive": {
+            root: string;
+        };
+        "secondary-destructive": {
+            root: string;
+        };
+        "tertiary-destructive": {
+            root: string;
+        };
+        "link-destructive": {
+            root: string;
+        };
+    };
+};
+/**
+ * Common props shared between button and anchor variants
+ */
+interface CommonProps$1 {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** Shows a loading spinner and disables the button */
+    isLoading?: boolean;
+    /** The size variant of the button */
+    size?: keyof typeof styles$1.sizes;
+    /** The color variant of the button */
+    color?: keyof typeof styles$1.colors;
+    /** Icon component or element to show before the text */
+    iconLeading?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Icon component or element to show after the text */
+    iconTrailing?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Removes horizontal padding from the text content */
+    noTextPadding?: boolean;
+    /** When true, keeps the text visible during loading state */
+    showTextWhileLoading?: boolean;
+}
+/**
+ * Props for the button variant (non-link)
+ */
+interface ButtonProps extends CommonProps$1, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "slot">, HTMLButtonElement> {
+    /** Slot name for react-aria component */
+    slot?: ButtonProps$1["slot"];
+}
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps$1, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">, HTMLAnchorElement> {
+}
+/** Union type of button and link props */
+type Props = ButtonProps | LinkProps;
+declare const Button: ({ size, color, children, className, noTextPadding, iconLeading: IconLeading, iconTrailing: IconTrailing, isDisabled: disabled, isLoading: loading, showTextWhileLoading, ...otherProps }: Props) => react__default.JSX.Element;
+
+interface CheckboxProps extends CheckboxProps$1 {
+    ref?: Ref<HTMLLabelElement>;
+    size?: "sm" | "md";
+    label?: ReactNode;
+    hint?: ReactNode;
+}
+declare const Checkbox: {
+    ({ label, hint, size, className, ...ariaCheckboxProps }: CheckboxProps): react.JSX.Element;
+    displayName: string;
+};
+
+interface DropdownItemProps extends MenuItemProps {
+    /** The label of the item to be displayed. */
+    label?: string;
+    /** An addon to be displayed on the right side of the item. */
+    addon?: string;
+    /** If true, the item will not have any styles. */
+    unstyled?: boolean;
+    /** An icon to be displayed on the left side of the item. */
+    icon?: FC<{
+        className?: string;
+    }>;
+}
+interface DropdownMenuProps<T extends object> extends MenuProps<T> {
+}
+interface DropdownPopoverProps extends PopoverProps {
+}
+declare const Dropdown: {
+    Root: typeof MenuTrigger;
+    Popover: (props: DropdownPopoverProps) => react.JSX.Element;
+    Menu: <T extends object>(props: DropdownMenuProps<T>) => react.JSX.Element;
+    Section: <T extends object>(props: react_aria_components.MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => react.ReactElement | null;
+    SectionHeader: (props: React.HTMLAttributes<HTMLElement> & React.RefAttributes<object>) => React.ReactElement | null;
+    Item: ({ label, children, addon, icon: Icon, unstyled, ...props }: DropdownItemProps) => react.JSX.Element;
+    Separator: (props: SeparatorProps) => react.JSX.Element;
+    DotsButton: (props: ButtonProps$1 & RefAttributes<HTMLButtonElement>) => react.JSX.Element;
+};
+
+declare const Form: {
+    (props: ComponentPropsWithRef<typeof Form$1>): react.JSX.Element;
+    displayName: string;
+};
+
+type PinInputContextType = {
+    size: "sm" | "md" | "lg";
+    disabled: boolean;
+    id: string;
+};
+declare const usePinInputContext: () => PinInputContextType;
+interface RootProps extends ComponentPropsWithRef<"div"> {
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+}
+declare const Root: {
+    ({ className, size, disabled, ...props }: RootProps): react.JSX.Element;
+    displayName: string;
+};
+type GroupProps = ComponentPropsWithRef<typeof OTPInput> & {
+    width?: number;
+    inputClassName?: string;
+};
+declare const Group: {
+    ({ inputClassName, containerClassName, width, maxLength, ...props }: GroupProps): react.JSX.Element;
+    displayName: string;
+};
+declare const Slot: {
+    ({ index, className, ...props }: ComponentPropsWithRef<"div"> & {
+        index: number;
+    }): react.JSX.Element;
+    displayName: string;
+};
+declare const Separator: {
+    (props: ComponentPropsWithRef<"p">): react.JSX.Element;
+    displayName: string;
+};
+declare const Label$1: {
+    ({ className, ...props }: ComponentPropsWithRef<"label">): react.JSX.Element;
+    displayName: string;
+};
+declare const Description: {
+    ({ className, ...props }: ComponentPropsWithRef<"p">): react.JSX.Element;
+    displayName: string;
+};
+declare const PinInput: typeof Root & {
+    Slot: typeof Slot;
+    Label: typeof Label$1;
+    Group: typeof Group;
+    Separator: typeof Separator;
+    Description: typeof Description;
+};
+
+interface ProgressBarProps {
+    /**
+     * The current value of the progress bar.
+     */
+    value: number;
+    /**
+     * The minimum value of the progress bar.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value of the progress bar.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Optional additional CSS class names for the progress bar container.
+     */
+    className?: string;
+    /**
+     * Optional additional CSS class names for the progress bar indicator element.
+     */
+    progressClassName?: string;
+    /**
+     * Optional function to format the displayed value.
+     * It receives the raw value and the calculated percentage.
+     */
+    valueFormatter?: (value: number, valueInPercentage: number) => string | number;
+}
+/**
+ * A basic progress bar component.
+ */
+declare const ProgressBarBase: ({ value, min, max, className, progressClassName }: ProgressBarProps) => react.JSX.Element;
+type ProgressBarLabelPosition = "right" | "bottom" | "top-floating" | "bottom-floating";
+interface ProgressIndicatorWithTextProps extends ProgressBarProps {
+    /**
+     * Specifies the layout of the text relative to the progress bar.
+     * - `right`: Text is displayed to the right of the progress bar.
+     * - `bottom`: Text is displayed below the progress bar, aligned to the right.
+     * - `top-floating`: Text is displayed in a floating tooltip above the progress indicator.
+     * - `bottom-floating`: Text is displayed in a floating tooltip below the progress indicator.
+     */
+    labelPosition?: ProgressBarLabelPosition;
+}
+/**
+ * A progress bar component that displays the value text in various configurable layouts.
+ */
+declare const ProgressBar: ({ value, min, max, valueFormatter, labelPosition, className, progressClassName }: ProgressIndicatorWithTextProps) => react.JSX.Element;
+
+interface RadioGroupContextType {
+    size?: "sm" | "md";
+}
+interface RadioButtonBaseProps {
+    size?: "sm" | "md";
+    className?: string;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+declare const RadioButtonBase: {
+    ({ className, isFocusVisible, isSelected, isDisabled, size }: RadioButtonBaseProps): react.JSX.Element;
+    displayName: string;
+};
+interface RadioButtonProps extends RadioProps {
+    size?: "sm" | "md";
+    label?: ReactNode;
+    hint?: ReactNode;
+    ref?: Ref<HTMLLabelElement>;
+}
+declare const RadioButton: {
+    ({ label, hint, className, size, ...ariaRadioProps }: RadioButtonProps): react.JSX.Element;
+    displayName: string;
+};
+interface RadioGroupProps extends RadioGroupContextType, RadioGroupProps$1 {
+    children: ReactNode;
+    className?: string;
+}
+declare const RadioGroup: ({ children, className, size, ...props }: RadioGroupProps) => react.JSX.Element;
+
+interface ComboBoxProps extends Omit<ComboBoxProps$1<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    children: ListBoxProps<SelectItemType>["children"];
+}
+declare const ComboBox: ({ placeholder, shortcut, size, children, items, shortcutClassName, ...otherProps }: ComboBoxProps) => react.JSX.Element;
+
+interface SelectItemProps extends Omit<ListBoxItemProps<SelectItemType>, "id">, SelectItemType {
+}
+declare const SelectItem: ({ label, id, value, avatarUrl, supportingText, isDisabled, icon: Icon, className, children, ...props }: SelectItemProps) => react.JSX.Element;
+
+type SelectItemType = {
+    id: string;
+    label?: string;
+    avatarUrl?: string;
+    isDisabled?: boolean;
+    supportingText?: string;
+    icon?: FC | ReactNode;
+};
+interface CommonProps {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+}
+interface SelectProps extends Omit<SelectProps$1<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    placeholderIcon?: FC | ReactNode;
+    children: ReactNode | ((item: SelectItemType) => ReactNode);
+}
+declare const Select: ({ placeholder, placeholderIcon, size, children, items, label, hint, tooltip, className, ...rest }: SelectProps) => react.JSX.Element;
+declare const _Select: typeof Select & {
+    ComboBox: typeof ComboBox;
+    Item: typeof SelectItem;
+};
+
+interface MultiSelectProps extends Omit<ComboBoxProps$1<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement> {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    selectedItems: ListData<SelectItemType>;
+    placeholderIcon?: IconComponentType | null;
+    children: ListBoxProps<SelectItemType>["children"];
+    onItemCleared?: (key: Key) => void;
+    onItemInserted?: (key: Key) => void;
+}
+declare const MultiSelectBase: ({ items, children, size, selectedItems, onItemCleared, onItemInserted, shortcut, placeholder, name: _name, className: _className, ...props }: MultiSelectProps) => react.JSX.Element;
+declare const MultiSelect: typeof MultiSelectBase & {
+    Item: typeof SelectItem;
+};
+
+declare const styles: {
+    default: string;
+    bottom: string;
+    "top-floating": string;
+};
+interface SliderProps extends SliderProps$1 {
+    labelPosition?: keyof typeof styles;
+    labelFormatter?: (value: number) => string;
+}
+declare const Slider: ({ labelPosition, minValue, maxValue, labelFormatter, formatOptions, ...rest }: SliderProps) => react.JSX.Element;
+
+interface TagItem {
+    id: string;
+    label: string;
+    count?: number;
+    avatarSrc?: string;
+    avatarContrastBorder?: boolean;
+    dot?: boolean;
+    dotClassName?: string;
+    isDisabled?: boolean;
+    onClose?: (id: string) => void;
+}
+interface TagGroupProps extends TagGroupProps$1, RefAttributes<HTMLDivElement> {
+    label: string;
+    size?: "sm" | "md" | "lg";
+}
+declare const TagGroup: ({ label, selectionMode, size, children, ...otherProps }: TagGroupProps) => react.JSX.Element;
+declare const TagList: <T extends object>(props: react_aria_components.TagListProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+interface TagProps extends TagProps$1, RefAttributes<object>, Omit<TagItem, "label" | "id"> {
+}
+declare const Tag: ({ id, avatarSrc, avatarContrastBorder, dot, dotClassName, isDisabled, count, className, children, onClose, }: PropsWithChildren<TagProps>) => react.JSX.Element;
+
+interface TextAreaBaseProps extends TextAreaProps {
+    ref?: Ref<HTMLTextAreaElement>;
+}
+declare const TextAreaBase: {
+    ({ className, ...props }: TextAreaBaseProps): react__default.JSX.Element;
+    displayName: string;
+};
+interface TextFieldProps$1 extends TextFieldProps$2 {
+    /** Label text for the textarea */
+    label?: string;
+    /** Helper text displayed below the textarea */
+    hint?: ReactNode;
+    /** Tooltip message displayed after the label. */
+    tooltip?: string;
+    /** Class name for the textarea wrapper */
+    textAreaClassName?: TextAreaBaseProps["className"];
+    /** Ref for the textarea wrapper */
+    ref?: Ref<HTMLDivElement>;
+    /** Ref for the textarea */
+    textAreaRef?: TextAreaBaseProps["ref"];
+    /** Whether to hide required indicator from label. */
+    hideRequiredIndicator?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Visible height of textarea in rows . */
+    rows?: number;
+    /** Visible width of textarea in columns. */
+    cols?: number;
+}
+declare const TextArea: {
+    ({ label, hint, tooltip, textAreaRef, hideRequiredIndicator, textAreaClassName, placeholder, className, rows, cols, ...props }: TextFieldProps$1): react__default.JSX.Element;
+    displayName: string;
+};
+
+interface ToggleBaseProps {
+    size?: "sm" | "md";
+    slim?: boolean;
+    className?: string;
+    isHovered?: boolean;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+declare const ToggleBase: ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size }: ToggleBaseProps) => react.JSX.Element;
+interface ToggleProps extends SwitchProps {
+    size?: "sm" | "md";
+    label?: string;
+    hint?: ReactNode;
+    slim?: boolean;
+}
+declare const Toggle: ({ label, hint, className, size, slim, ...ariaSwitchProps }: ToggleProps) => react.JSX.Element;
+
+interface TooltipProps extends TooltipTriggerComponentProps, Omit<TooltipProps$1, "children"> {
+    /**
+     * The title of the tooltip.
+     */
+    title: ReactNode;
+    /**
+     * The description of the tooltip.
+     */
+    description?: ReactNode;
+    /**
+     * Whether to show the arrow on the tooltip.
+     *
+     * @default false
+     */
+    arrow?: boolean;
+    /**
+     * Delay in milliseconds before the tooltip is shown.
+     *
+     * @default 300
+     */
+    delay?: number;
+}
+declare const Tooltip: ({ title, description, children, arrow, delay, closeDelay, trigger, isDisabled, isOpen, defaultOpen, offset, crossOffset, placement, onOpenChange, ...tooltipProps }: TooltipProps) => react.JSX.Element;
+interface TooltipTriggerProps extends ButtonProps$1 {
+}
+declare const TooltipTrigger: ({ children, className, ...buttonProps }: TooltipTriggerProps) => react.JSX.Element;
+
+declare const getStarProgress: (starPosition: number, rating: number, maxRating?: number) => number;
+interface StarIconProps extends SVGProps<SVGSVGElement> {
+    /**
+     * The progress of the star icon. It should be a number between 0 and 100.
+     *
+     * @default 100
+     */
+    progress?: number;
+}
+declare const StarIcon: ({ progress, ...props }: StarIconProps) => react.JSX.Element;
+interface RatingStarsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The rating to display.
+     *
+     * @default 5
+     */
+    rating?: number;
+    /**
+     * The number of stars to display.
+     */
+    stars?: number;
+    /**
+     * The class name of the star icon.
+     */
+    starClassName?: string;
+}
+declare const RatingStars: ({ rating, stars, starClassName, ...props }: RatingStarsProps) => react.JSX.Element;
+
+declare const Wreath: (props: HTMLAttributes<HTMLOrSVGElement>) => react.JSX.Element;
+interface RatingBadgeProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    subtitle?: string;
+    rating?: number;
+    theme?: "light" | "dark";
+}
+declare const RatingBadge: ({ title, subtitle, rating, theme, className, ...props }: RatingBadgeProps) => react.JSX.Element;
+
+declare function useActiveItem(itemIds: string[]): string;
+
+/**
+ * Checks whether a particular Tailwind CSS viewport size applies.
+ *
+ * @param size The size to check, which must either be included in Tailwind CSS's
+ * list of default screen sizes, or added to the Tailwind CSS config file.
+ *
+ * @returns A boolean indicating whether the viewport size applies.
+ */
+declare const useBreakpoint: (size: "sm" | "md" | "lg" | "xl" | "2xl") => boolean;
+
+type UseClipboardReturnType = {
+    /**
+     * The state indicating whether the text has been copied.
+     * If a string is provided, it will be used as the identifier for the copied state.
+     */
+    copied: string | boolean;
+    /**
+     * Function to copy text to the clipboard using the modern clipboard API.
+     * Falls back to the fallback function if the modern API fails.
+     *
+     * @param {string} text - The text to be copied.
+     * @param {string} [id] - Optional identifier to set the copied state.
+     * @returns {Promise<Object>} - A promise that resolves to an object containing:
+     *  - `success` (boolean): Whether the copy operation was successful.
+     *  - `error` (Error | undefined): The error object if the copy operation failed.
+     */
+    copy: (text: string, id?: string) => Promise<{
+        success: boolean;
+        error?: Error;
+    }>;
+};
+/**
+ * Custom hook to copy text to the clipboard.
+ *
+ * @returns {UseClipboardReturnType} - An object containing the copied state and the copy function.
+ */
+declare const useClipboard: () => UseClipboardReturnType;
+
+/**
+ * The options for the useResizeObserver hook.
+ */
+type useResizeObserverOptionsType<T> = {
+    /**
+     * The ref to the element to observe.
+     */
+    ref: RefObject<T | undefined | null> | undefined;
+    /**
+     * The box to observe.
+     */
+    box?: ResizeObserverBoxOptions;
+    /**
+     * The callback function to call when the size changes.
+     */
+    onResize: () => void;
+};
+/**
+ * A hook that observes the size of an element and calls a callback function when the size changes.
+ * @param options - The options for the hook.
+ */
+declare function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>): void;
+
+/**
+ * This function is a wrapper around the twMerge function.
+ * It is used to merge the classes inside style objects.
+ */
+declare const cx: (...classLists: tailwind_merge.ClassNameValue[]) => string;
+/**
+ * This function does nothing besides helping us to be able to
+ * sort the classes inside style objects which is not supported
+ * by the Tailwind IntelliSense by default.
+ */
+declare function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T;
+
+type ReactComponent = react__default.FC<any> | react__default.ComponentClass<any, any>;
+/**
+ * Checks if a given value is a function component.
+ */
+declare const isFunctionComponent: (component: any) => component is react__default.FC<any>;
+/**
+ * Checks if a given value is a class component.
+ */
+declare const isClassComponent: (component: any) => component is react__default.ComponentClass<any, any>;
+/**
+ * Checks if a given value is a forward ref component.
+ */
+declare const isForwardRefComponent: (component: any) => component is react__default.ForwardRefExoticComponent<any>;
+/**
+ * Checks if a given value is a valid React component.
+ */
+declare const isReactComponent: (component: any) => component is ReactComponent;
+
+interface InputBaseProps extends TextFieldProps {
+    /** Tooltip message on hover. */
+    tooltip?: string;
+    /**
+     * Input size.
+     * @default "sm"
+     */
+    size?: "sm" | "md";
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Class name for the icon. */
+    iconClassName?: string;
+    /** Class name for the input. */
+    inputClassName?: string;
+    /** Class name for the input wrapper. */
+    wrapperClassName?: string;
+    /** Class name for the tooltip. */
+    tooltipClassName?: string;
+    /** Keyboard shortcut to display. */
+    shortcut?: string | boolean;
+    ref?: Ref<HTMLInputElement>;
+    groupRef?: Ref<HTMLDivElement>;
+    /** Icon component to display on the left side of the input. */
+    icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
+}
+interface BaseProps {
+    /** Label text for the input */
+    label?: string;
+    /** Helper text displayed below the input */
+    hint?: ReactNode;
+}
+interface TextFieldProps extends BaseProps, TextFieldProps$2, Pick<InputBaseProps, "size" | "wrapperClassName" | "inputClassName" | "iconClassName" | "tooltipClassName"> {
+    ref?: Ref<HTMLDivElement>;
+}
+interface InputProps extends InputBaseProps, BaseProps {
+    /** Whether to hide required indicator from label */
+    hideRequiredIndicator?: boolean;
+}
+declare const Input: {
+    ({ size, placeholder, icon: Icon, label, hint, shortcut, hideRequiredIndicator, className, ref, groupRef, tooltip, iconClassName, inputClassName, wrapperClassName, tooltipClassName, ...props }: InputProps): react.JSX.Element;
+    displayName: string;
+};
+
+interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {
+    /** The position of the prefix. */
+    position?: "leading" | "trailing";
+    /** The size of the prefix. */
+    size?: "sm" | "md";
+    /** Indicates that the prefix is disabled. */
+    isDisabled?: boolean;
+}
+interface InputGroupProps extends Omit<InputBaseProps, "type" | "icon" | "placeholder" | "tooltip" | "shortcut" | `${string}ClassName`> {
+    /** A prefix text that is displayed in the same box as the input.*/
+    prefix?: string;
+    /** A leading addon that is displayed with visual separation from the input. */
+    leadingAddon?: ReactNode;
+    /** A trailing addon that is displayed with visual separation from the input. */
+    trailingAddon?: ReactNode;
+    /** The class name to apply to the input group. */
+    className?: string;
+    /** The children of the input group (i.e `<InputBase />`) */
+    children: ReactNode;
+}
+declare const InputGroup: {
+    ({ size, prefix, leadingAddon, trailingAddon, label, hint, children, ...props }: InputGroupProps): react.JSX.Element;
+    Prefix: ({ isDisabled, children, ...props }: InputPrefixProps) => react.JSX.Element;
+    displayName: string;
+};
+
+interface LabelProps extends LabelProps$1 {
+    children: ReactNode;
+    isRequired?: boolean;
+    tooltip?: string;
+    tooltipDescription?: string;
+    ref?: Ref<HTMLLabelElement>;
+}
+declare const Label: {
+    ({ isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps): react.JSX.Element;
+    displayName: string;
+};
+
+export { Avatar, type AvatarProps, Badge, type BadgeColor, BadgeGroup, BadgeIcon, BadgeWithButton, BadgeWithDot, BadgeWithFlag, BadgeWithIcon, BadgeWithImage, Button, ButtonGroup, type ButtonProps, Carousel, CarouselContext, Checkbox, ComboBox, type CommonProps$1 as CommonProps, Dialog, Dropdown, EmptyState, FeaturedIcon$1 as FeaturedIcon, FileListItemProgressBar, FileListItemProgressFill, type FileListItemProps, FileUpload, FileUploadDropZone, Form, HeaderNavigationBase, Input, InputGroup, Label, LoadingIndicator, Modal, Dialog$1 as ModalDialog, ModalOverlay, MultiSelect, PaginationButtonGroup, PaginationCardDefault, PaginationCardMinimal, PaginationDot, PaginationLine, PaginationPageDefault, PaginationPageMinimalCenter, PinInput, ProgressBar, ProgressBarBase, type ProgressBarProps, type ProgressIndicatorWithTextProps, type Props, RadioButton, RadioButtonBase, type RadioButtonBaseProps, RadioGroup, type RadioGroupContextType, RatingBadge, RatingStars, _Select as Select, SlideoutMenu, Slider, StarIcon, Tab, TabList, TabPanel, Table, TableCard, TableRowActionsDropdown, Tabs, Tag, TagGroup, type TagItem, TagList, TextArea, TextAreaBase, Toggle, ToggleBase, Tooltip, TooltipTrigger, Wreath, cx, filledColors, getReadableFileSize, getStarProgress, isClassComponent, isForwardRefComponent, isFunctionComponent, isReactComponent, sortCx, styles$1 as styles, useActiveItem, useBreakpoint, useCarousel, useClipboard, usePinInputContext, useResizeObserver };