@delightui/components 0.1.46 → 0.1.48

package/dist/index.d.ts

@@ -0,0 +1,2300 @@
+import * as React$1 from 'react';
+import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, InputHTMLAttributes, TextareaHTMLAttributes, Dispatch, SetStateAction, Ref, FormHTMLAttributes, LiHTMLAttributes, CSSProperties, TableHTMLAttributes, TdHTMLAttributes } from 'react';
+import { LinkProps } from 'react-router-dom';
+import { Plugin } from 'flatpickr/dist/types/options';
+import FlatPickr from 'react-flatpickr';
+import { Offset } from 'react-overlays/usePopper';
+
+/**
+ * Enum for different image fit options.
+ */
+type ImageFitEnum = 'Fit' | 'Fill' | 'Crop';
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * The URL of the image to display if the image fails to load.
+     */
+    fallback?: string;
+    /**
+     * The fit option for the image.
+     * @default 'Fit'
+     */
+    fit?: ImageFitEnum;
+    /**
+     * Callback function when the image has loaded.
+     */
+    onLoad?: () => void;
+    /**
+     * Callback function when an error occurs while loading the image.
+     */
+    onError?: (error: SyntheticEvent<HTMLImageElement>) => void;
+    /**
+     * Flag to show a loading indicator for the image.
+     * @default false
+     */
+    showLoading?: boolean;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * The aspect ratio of the image.
+     * @default natural aspect ratio of the image
+     */
+    aspectRatio?: string;
+}
+
+declare const Image: (props: ImageProps) => JSX.Element;
+
+type ActionImageProps = ImageProps & {
+    /**
+     * Specifies if the action image is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};
+
+/**
+ * ActionImage component definition.
+ */
+declare const ActionImage: (props: ActionImageProps) => React__default.JSX.Element;
+
+type ButtonAppearanceEnum = 'Default' | 'Inverse';
+type ButtonTypeEnum = 'Filled' | 'Outlined' | 'Ghost';
+type ButtonStyleEnum = 'Primary' | 'Secondary' | 'Destructive';
+type ButtonSizeEnum = 'Small' | 'Medium' | 'Large';
+type ButtonActionTypeEnum = 'button' | 'submit' | 'reset';
+type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'style'> & {
+    /**
+     * Appearance of the button.
+     * @default 'Default'
+     */
+    appearance?: ButtonAppearanceEnum;
+    /**
+     * Type of the button.
+     * @default 'Filled'
+     */
+    type?: ButtonTypeEnum;
+    /**
+     * Style of the button.
+     * @default 'Primary'
+     */
+    style?: ButtonStyleEnum;
+    /**
+     * Size of the button.
+     * @default 'Medium'
+     */
+    size?: ButtonSizeEnum;
+    /**
+     * Indicates if the button is in a loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Specifies if the button is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon to be displayed before the button's content.
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Icon to be displayed after the button's content.
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * Click event handler for the button.
+     */
+    onClick?: (event?: MouseEvent<HTMLElement>) => void;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * Type of action associated with the button.
+     * @default 'button'
+     */
+    actionType?: ButtonActionTypeEnum;
+};
+
+/**
+ * Button component definition.
+ */
+declare const Button: (props: ButtonProps) => React__default.JSX.Element;
+
+type IconStyleEnum = 'Outlined' | 'Filled' | 'Round';
+type IconSizeEnum = 'Small' | 'Medium' | 'Large';
+interface IconProps {
+    /**
+     * The name of the icon to be displayed.
+     */
+    icon: string;
+    /**
+     * Style of the icon.
+     * @default 'Filled'
+     */
+    style?: IconStyleEnum;
+    /**
+     * Size of the icon.
+     * @default 'Medium'
+     */
+    size?: IconSizeEnum;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+}
+
+declare const Icon: (props: IconProps) => React__default.JSX.Element | null;
+
+type IconButtonAppearanceEnum = 'Default' | 'Inverse';
+type IconButtonStyleEnum = 'Primary' | 'Secondary';
+type IconButtonSizeEnum = 'Small' | 'Medium';
+interface IconButtonProps extends Omit<ButtonProps, 'leadingIcon' | 'trailingIcon' | 'style' | 'size'> {
+    /**
+     * Appearance of the button.
+     * @default 'Default'
+     */
+    appearance?: IconButtonAppearanceEnum;
+    /**
+     * The icon to be displayed.
+     */
+    icon?: ReactNode;
+    /**
+     * Style of the button.
+     * @default 'Primary'
+     */
+    style?: IconButtonStyleEnum;
+    /**
+     * Size of the button.
+     * @default 'Medium'
+     */
+    size?: IconButtonSizeEnum;
+}
+
+declare const IconButton: (props: IconButtonProps) => React__default.JSX.Element;
+
+/**
+ * Enum for different input types.
+ */
+type InputTypeEnum = 'Text' | 'Number' | 'Email' | 'Password';
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> & {
+    /**
+     * The type of input.
+     * @default 'Text'
+     */
+    inputType?: InputTypeEnum;
+    /**
+     * The value of the input.
+     */
+    value?: string;
+    /**
+     * Callback function when the input value changes.
+     * @param value - The new value of the input.
+     */
+    onValueChanged?: (value: string) => void;
+    /**
+     * Indicates if the input is invalid.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Icon to be displayed before the input.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Icon to be displayed after the input.
+     */
+    trailingIcon?: React.ReactNode;
+    /**
+     * provide a way to override the styling
+     */
+    'component-variant'?: string;
+    /**
+     * The input is independent of the parent form field context.
+     * @default false
+     */
+    independent?: boolean;
+};
+
+declare const Input: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & {
+    inputType?: InputTypeEnum;
+    value?: string;
+    onValueChanged?: (value: string) => void;
+    invalid?: boolean;
+    leadingIcon?: React__default.ReactNode;
+    trailingIcon?: React__default.ReactNode;
+    'component-variant'?: string;
+    independent?: boolean;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+type PasswordProps = Omit<InputProps, 'inputType' | 'trailingIcon'> & {
+    hideTrailingIcon?: boolean;
+};
+
+declare const Password: (props: PasswordProps) => React__default.JSX.Element;
+
+type SpinnerProps = {
+    className?: string;
+};
+
+declare const Spinner: ({ className }: SpinnerProps) => React__default.JSX.Element;
+
+declare const types: readonly ["Heading1", "Heading2", "Heading3", "Heading4", "Heading5", "Heading6", "BodyLarge", "BodyMedium", "BodySmall"];
+declare const weights: readonly ["Thin", "ExtraLight", "Light", "Regular", "Medium", "SemiBold", "Bold", "ExtraBold", "Black", "ExtraBlack", 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+declare const transforms: readonly ["None", "Capitalize", "UpperCase", "LowerCase"];
+
+/**
+ * Enum for the types of text.
+ */
+type TextTypeEnum = typeof types[number];
+/**
+ * Enum for the weights of text.
+ */
+type TextWeightEnum = typeof weights[number];
+/**
+ * Enum for text decorations.
+ */
+type TextDecorationEnum = 'None' | 'Underline' | 'Strikethrough';
+/**
+ * Enum for text transformations.
+ */
+type TextTransformEnum = typeof transforms[number];
+interface TextProps {
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * Type of the text.
+     * @default 'BodyMedium'
+     */
+    type?: TextTypeEnum;
+    /**
+     * Weight of the text.
+     * @default 'Regular'
+     */
+    weight?: TextWeightEnum;
+    /**
+     * The content to be displayed as text.
+     */
+    children?: React.ReactNode;
+    /**
+     * Flag to prevent text from wrapping.
+     * @default false
+     */
+    noWrap?: boolean;
+    /**
+     * Flag to handle how white space inside an element is handled.
+     * @default false
+     */
+    whiteSpaceNoWrap?: boolean;
+    /**
+     * Flag to italicize the text.
+     * @default false
+     */
+    italic?: boolean;
+    /**
+     * Decoration style for the text.
+     * @default 'None'
+     */
+    decoration?: TextDecorationEnum;
+    /**
+     * Flag to show ellipsis for overflowing text.
+     * @default false
+     */
+    ellipsis?: boolean;
+    /**
+     * Transform style for the text.
+     * @default 'None'
+     */
+    transform?: TextTransformEnum;
+    /**
+     * Modify the element type used for rendering
+     */
+    as?: React.ElementType<any, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'>;
+}
+
+/**
+ * Text component definition.
+ */
+declare const Text: (props: TextProps) => React__default.JSX.Element;
+
+type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
+    /**
+      * The value of the text area.
+      */
+    value?: string;
+    /**
+     * Callback function when the value of the text area changes.
+     * @param value - The new value of the text area.
+     */
+    onValueChanged?: (value: string) => void;
+    /**
+     * Indicates if the text area is in an invalid state.
+      * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};
+
+declare const TextArea: React__default.ForwardRefExoticComponent<Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & {
+    value?: string;
+    onValueChanged?: (value: string) => void;
+    invalid?: boolean;
+    className?: string;
+} & React__default.RefAttributes<HTMLTextAreaElement>>;
+
+type ResponsiveComponentProps<T> = {
+    className?: string;
+    component: React.FC<T>;
+    children: React.ReactElement<BreakpointProps<T>>[];
+};
+type BreakpointProps<T> = {
+    width: number;
+    children: React.ReactElement<T>;
+};
+
+declare const Breakpoint: <T>({ children }: BreakpointProps<T>) => React__default.JSX.Element;
+declare const ResponsiveComponent: <T>(props: ResponsiveComponentProps<T>) => React__default.JSX.Element;
+
+type ListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    /**
+     * Icon to be displayed before the button's content.
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Icon to be displayed after the button's content.
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * Whether the list item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Click event handler for the list item.
+     */
+    onClick?: (event?: MouseEvent<HTMLElement>) => void;
+    /**
+     * The label for the list item.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};
+
+declare const ListItem: (props: ListItemProps) => React__default.JSX.Element;
+
+type SelectListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    /**
+     * Icon to be displayed before the button's content.
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Icon to be displayed after the button's content.
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * Whether the list item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Click event handler for the list item.
+     */
+    onClick?: (event?: MouseEvent<HTMLElement>) => void;
+    /**
+     * The label for the list item.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};
+
+declare const SelectListItem: (props: SelectListItemProps) => React__default.JSX.Element;
+
+type ToggleLabelAlignmentEnum = 'Left' | 'Right';
+type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'checked'> & {
+    /**
+     * The label of the toggle.
+     */
+    children?: React.ReactNode;
+    /**
+     * The checked state of the toggle.
+     */
+    checked?: boolean;
+    /**
+     * Callback function when the toggle state changes.
+     * @param value - The new checked state of the toggle.
+     */
+    onValueChanged?: (value: boolean) => void;
+    /**
+     * Default checked state of the toggle.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Indicates if the toggle is invalid.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Alignment of the label.
+     * @default 'Left'
+     */
+    labelAlignment?: ToggleLabelAlignmentEnum;
+};
+
+declare const Toggle: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
+    children?: React__default.ReactNode;
+    checked?: boolean;
+    onValueChanged?: (value: boolean) => void;
+    defaultChecked?: boolean;
+    invalid?: boolean;
+    labelAlignment?: ToggleLabelAlignmentEnum;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+declare const ToggleButton: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "type" | "actionType"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onValueChanged?: (value: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    children?: React__default.ReactNode;
+    className?: string;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+type ToggleButtonProps = Omit<ButtonProps, 'type' | 'actionType'> & {
+    /**
+     * Controlled state of the toggle
+     */
+    checked?: boolean;
+    /**
+     * Default value for uncontrolled component
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback function when toggle state changes
+     */
+    onValueChanged?: (value: boolean) => void;
+    /**
+     * Disable the toggle
+     */
+    disabled?: boolean;
+    /**
+     * Make the toggle required
+     */
+    required?: boolean;
+    /**
+     * Show invalid state
+     */
+    invalid?: boolean;
+    /**
+     * Content of the button
+     */
+    children?: ReactNode;
+    /**
+     * Additional className for the toggle
+     */
+    className?: string;
+};
+
+/**
+ * Enum for the action type of the Tooltip.
+ */
+type TooltipActionType = 'Click' | 'Hover' | 'Follow';
+/**
+ * Enum for the direction of the Tooltip.
+ */
+type TooltipDirectionEnum = 'Top' | 'Bottom' | 'Right' | 'Left';
+/**
+ * Enum for the alignment of the Tooltip.
+ */
+type TooltipAlignEnum = 'Start' | 'End' | 'Center';
+/**
+ * Enum for the style of the Tooltip.
+ */
+type TooltipStyleEnum = 'Default' | 'Outlined';
+/**
+ * Props for the Tooltip component.
+ */
+type TooltipProps = {
+    /**
+     * The content displayed inside the tooltip.
+     */
+    children?: React__default.ReactNode;
+    /**
+     * The direction where the tooltip should appear relative to the target.
+     * @default "Top"
+     */
+    direction?: TooltipDirectionEnum;
+    /**
+     * Alignment of the tooltip relative to the target.
+     * @default "Start"
+     */
+    alignment?: TooltipAlignEnum;
+    /**
+     * The event that action the tooltip visibility.
+     * @default "Hover"
+     */
+    action?: TooltipActionType;
+    /**
+     * Whether the tooltip is initially visible.
+     * @default false
+     */
+    isVisible?: boolean;
+    /**
+     * The target element that triggers the tooltip.
+     */
+    target?: React__default.ReactNode;
+    /**
+     * The style of the tooltip.
+     * @default "Default"
+     */
+    style?: TooltipStyleEnum;
+    /**
+     * Additional CSS class names for the tooltip.
+     */
+    className?: string;
+};
+
+declare const Tooltip: ({ children, direction, alignment, action, style, isVisible, target, className, }: TooltipProps) => React__default.JSX.Element;
+
+interface CustomToggleProps {
+    /**
+     * Controlled state of the toggle
+     */
+    checked?: boolean;
+    /**
+     * Default value for uncontrolled component
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback function when toggle state changes
+     */
+    onValueChanged?: (value: boolean) => void;
+    /**
+     * Disable the toggle
+     */
+    disabled?: boolean;
+    /**
+     * Make the toggle required
+     */
+    required?: boolean;
+    /**
+     * Show invalid state
+     */
+    invalid?: boolean;
+    /**
+     * Content to show when toggle is off
+     */
+    offContent?: ReactNode;
+    /**
+     * Content to show when toggle is on
+     */
+    onContent?: ReactNode;
+    /**
+     * Additional className for the toggle
+     */
+    className?: string;
+}
+
+declare const CustomToggle: React__default.ForwardRefExoticComponent<CustomToggleProps & React__default.RefAttributes<HTMLInputElement>>;
+
+type ChipTypeEnum = 'Bright' | 'BrightOutline' | 'Subdued' | 'SubduedOutline';
+type ChipStyleEnum = 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
+type ChipSizeEnum = 'Small' | 'Medium' | 'Large';
+type ChipCornerEnum = 'Rounded' | 'Squared';
+type ChipProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    /**
+     * Type of the chip.
+     * @default 'Filled'
+     */
+    type?: ChipTypeEnum;
+    /**
+     * Style of the chip.
+     * @default 'A'
+     */
+    style?: ChipStyleEnum;
+    /**
+     * Size of the chip.
+     * @default 'Medium'
+     */
+    size?: ChipSizeEnum;
+    /**
+     * Determines if the chip is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Icon displayed before the chip's content.
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Icon displayed after the chip's content.
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * Click event handler for the chip.
+     */
+    onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * Defines the corner shape of the chip.
+     * @default 'Rounded'
+     */
+    corner?: ChipCornerEnum;
+    /**
+     * Determines if the chip is dismissible.
+     * @default false
+     */
+    isDismissible?: boolean;
+    /**
+     * Close button/icon for dismissible chips.
+     */
+    closeIcon?: ReactNode;
+    /**
+     * Event handler for the close action when chip is dismissible.
+     */
+    onClose?: (event?: MouseEvent<HTMLElement>) => void;
+};
+
+/**
+ * Chip component definition.
+ */
+declare const Chip: (props: ChipProps) => React__default.JSX.Element;
+
+type CheckboxSizeEnum = 'Small' | 'Medium' | 'Large';
+type CheckboxLabelAlignmentEnum = 'Left' | 'Right';
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
+    /**
+     * The label of the checkbox.
+     */
+    children?: React.ReactNode;
+    /**
+     * The size of the checkbox.
+     * @default 'Medium'
+     */
+    size?: CheckboxSizeEnum;
+    /**
+     * The checked state of the checkbox.
+     */
+    checked?: boolean;
+    /**
+     * Callback function when the checkbox state changes.
+     * @param value - The new checked state of the checkbox.
+     */
+    onValueChanged?: (value: boolean) => void;
+    /**
+     * Default checked state of the checkbox.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Indicates if the checkbox is invalid.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * The value of the checkbox.
+     */
+    value?: string | number;
+    /**
+     * The alignment of the label.
+     */
+    labelAlignment?: CheckboxLabelAlignmentEnum;
+    /**
+     * The checkbox is independent of the parent form field context.
+     * @default false
+     */
+    independent?: boolean;
+};
+
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
+    children?: React__default.ReactNode;
+    size?: CheckboxSizeEnum;
+    checked?: boolean;
+    onValueChanged?: (value: boolean) => void;
+    defaultChecked?: boolean;
+    invalid?: boolean;
+    value?: string | number;
+    labelAlignment?: CheckboxLabelAlignmentEnum;
+    independent?: boolean;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+declare const CheckboxItem: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "onValueChanged"> & {
+    onChange?: (value: boolean) => void;
+    showRightButton?: boolean;
+    onRightButtonClick?: () => void;
+    rightButtonIcon?: React__default.ReactNode;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+type CheckboxItemProps = Omit<CheckboxProps, 'onValueChanged'> & {
+    /**
+     * Callback function when the checkbox state changes.
+     * @param value: boolean - The new checked state of the checkbox.
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * Flag to show right button.
+     * @default false
+     */
+    showRightButton?: boolean;
+    /**
+     * Callback function when the right button is clicked.
+     */
+    onRightButtonClick?: () => void;
+    /**
+     * Custom icon for the right button.
+     */
+    rightButtonIcon?: ReactNode;
+};
+
+type SliderProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The minimum value of the slider.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value of the slider.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The step size for the slider.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * The current value of the slider.
+     * Can be a single number or an array with exactly two numbers for range selection.
+     */
+    value?: number | [number, number];
+    /**
+     * Callback function triggered when the slider value changes.
+     * @param value - The new value of the slider.
+     */
+    onValueChange?: (value: number | [number, number]) => void;
+    /**
+     * Whether to display the minimum value label.
+     * @default false
+     */
+    showMin?: boolean;
+    /**
+     * Whether to display the maximum value label.
+     * @default false
+     */
+    showMax?: boolean;
+    /**
+     * Whether to show the current value on the slider thumb.
+     * @default false
+     */
+    showValueOnThumb?: boolean;
+    /**
+     * Whether to enable range selection (two thumbs).
+     * @default false
+     */
+    enableRange?: boolean;
+    /**
+     * Flag to disabled slider.
+     * @default false
+     */
+    disabled?: boolean;
+    className?: string;
+};
+
+declare const Slider: (props: SliderProps) => React__default.JSX.Element;
+
+type AccordionSizeEnum = 'Small' | 'Medium' | 'Large';
+type AccordionSummaryProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Custom expand/collapse icon element to override the default icon.
+     * It will rotate 90 degrees clockwise when the accordion is expanded.
+     */
+    expandIcon?: ReactNode;
+};
+type AccordionDetailsProps = {
+    /**
+     * The content to be displayed in the accordion details section.
+     */
+    children: ReactNode;
+    /**
+     * Optional CSS class name for custom styling.
+     */
+    className?: string;
+};
+type AccordionProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * The size of the accordion.
+     * @default 'Medium'
+     */
+    size?: AccordionSizeEnum;
+    /**
+     * Whether the accordion is expanded by default.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controls the expanded state when using controlled mode.
+     * Use this prop along with onChange for controlled behavior.
+     */
+    expanded?: boolean;
+    /**
+     * Callback function when the accordion is expanded/collapsed.
+     * @param isOpen - The new expanded state of the accordion.
+     */
+    onChange?: (isOpen: boolean) => void;
+    /**
+     * Unique identifier for the accordion.
+     * This is used to identify the accordion in the group.
+     */
+    name?: string;
+};
+
+declare const AccordionSummary: (props: AccordionSummaryProps) => React__default.JSX.Element;
+declare const AccordionDetails: (props: AccordionDetailsProps) => React__default.JSX.Element;
+declare const Accordion: (props: AccordionProps) => React__default.JSX.Element;
+
+type AccordionGroupProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Unique identifier for the accordion group.
+     * This will be passed to the accordions as a prop.
+     */
+    name?: string;
+};
+
+declare const AccordionGroup: (props: AccordionGroupProps) => React__default.JSX.Element;
+
+type ActionCardProps = HTMLAttributes<HTMLDivElement> & Omit<LinkProps, 'to'> & {
+    /**
+     * The content to be displayed within the action card.
+     */
+    children: ReactNode;
+    /**
+     * Specifies if the action card is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * The destination URL or path for the navigation link.
+     * If the URL starts with "https", it will be treated as an external link and rendered as an <a> tag.
+     * Otherwise, it will be treated as an internal link and rendered as a <RouterNavLink> component.
+     *
+     * @example
+     * // Internal link
+     * <NavLink to="/home">Home</NavLink>
+     *
+     * // External link
+     * <NavLink to="https://www.example.com">External</NavLink>
+     */
+    to?: string | -1;
+};
+
+/**
+ * ActionCard component definition.
+ */
+declare const ActionCard: (props: ActionCardProps) => React__default.JSX.Element;
+
+interface BreadcrumbsProps {
+    /**
+     * The divider element to separate breadcrumb items.
+     * Can be a string, icon, or custom React node.
+     */
+    divider?: ReactNode;
+    /**
+     * Additional classes for custom styling.
+     */
+    className?: string;
+    /**
+     * The breadcrumb items to be displayed.
+     */
+    children: ReactNode;
+}
+
+declare const Breadcrumbs: (props: BreadcrumbsProps) => React__default.JSX.Element;
+
+type NavLinkTypeEnum = 'Fill' | 'Underline';
+type NavLinkProps = Omit<LinkProps, 'to'> & Pick<ButtonProps, 'appearance' | 'size' | 'style' | 'leadingIcon' | 'trailingIcon'> & {
+    /**
+     * The destination URL or path for the navigation link.
+     * If the URL starts with "https", it will be treated as an external link and rendered as an <a> tag.
+     * Otherwise, it will be treated as an internal link and rendered as a <RouterNavLink> component.
+     *
+     * @example
+     * // Internal link
+     * <NavLink to="/home">Home</NavLink>
+     *
+     * // External link
+     * <NavLink to="https://www.example.com">External</NavLink>
+     */
+    to: string | -1;
+    /**
+     * The type of nav link to render.
+     * @default 'Fill'
+     */
+    type?: NavLinkTypeEnum | ButtonTypeEnum;
+    /**
+     * provide a way to override the styling
+     */
+    'component-variant'?: string;
+};
+
+declare const NavLink: (props: NavLinkProps) => React__default.JSX.Element;
+
+interface BreadcrumbProps extends Omit<NavLinkProps, 'type'> {
+    /**
+     * Flag that defines the breadcrumb state.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Defines the button type used for the breadcrumb link.
+     */
+    navLinkType?: ButtonTypeEnum;
+}
+
+declare const Breadcrumb: (props: BreadcrumbProps) => React__default.JSX.Element;
+
+/**
+ * Enum for the alignment of the button-group.
+ */
+type ButtonGroupAlignEnum = 'Horizontal' | 'Vertical';
+/**
+ * Enum for the type of the button-group.
+ */
+type ButtonGroupTypeEnum = 'Outlined' | 'Ghost';
+type ButtonGroupProps = {
+    /**
+     * The alignment of the button-group.
+     * @default 'Horizontal'
+     */
+    align?: ButtonGroupAlignEnum;
+    /**
+     * Type of the button-group.
+     * @default 'Filled'
+     */
+    type?: ButtonGroupTypeEnum;
+    /**
+     * The content to be displayed within the ButtonGroup.
+     */
+    children: ReactNode | ReactNode[];
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};
+
+/**
+ * ButtonGroup component definition.
+ */
+declare const ButtonGroup: (props: ButtonGroupProps) => React__default.JSX.Element;
+
+type CardProps = {
+    /**
+     * The content to be displayed within the card.
+     */
+    children: ReactNode;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};
+
+/**
+ * Card component definition.
+ */
+declare const Card: (props: CardProps) => React__default.JSX.Element;
+
+/**
+ * Enum for the alignment of the list.
+ *
+ * @typedef {'Horizontal' | 'Vertical'} ListAlignEnum
+ */
+type ListAlignEnum = 'Horizontal' | 'Vertical';
+/**
+ * Represents a generic list item.
+ *
+ * @property {string | number} [id] - A unique identifier for the list item. This is optional and can be auto-generated if not provided.
+ * @property {string} [itemClassName] - Additional class for styling the list item.
+ * @property {React.CSSProperties} [itemStyle] - Additional styles for the list item.
+ */
+type ListItemType = object & {
+    id?: string | number;
+    itemClassName?: string;
+    itemStyle?: React.CSSProperties;
+};
+/**
+ * Props for the list wrapper component.
+ *
+ * @template T - The type of the list items.
+ * @property {T[]} [data] - The data to be rendered in the list.
+ * @property {React.FC<any>} component - The React functional component used to render each list item.
+ * @property {(item: T, index: number) => string | number} [keyExtractor] - A function to extract unique keys for each item.
+ * @property {'Horizontal' | 'Vertical'} [align='Vertical'] - The alignment of the list. Defaults to `'Vertical'`.
+ * @property {boolean} [wrap] - Whether the list content should wrap.
+ * @property {string} [className] - Additional class for styling the list.
+ * @property {boolean} [sortable] - Whether the list items can be sorted using drag-and-drop.
+ * @property {Dispatch<SetStateAction<T[]>>} [updateSortOrder] - Callback function to update the order of the list items after sorting.
+ */
+type ListProps<T extends ListItemType> = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    /**
+     * The data to be rendered in the list.
+     */
+    data?: T[];
+    /**
+     * The component used to render each item in the list.
+     */
+    component: React.FC<any>;
+    /**
+     * Function to extract keys.
+     */
+    keyExtractor?: (item: T, index: number) => string | number;
+    /**
+     * The alignment of the list.
+     * @default 'Vertical'
+     */
+    align?: ListAlignEnum;
+    /**
+     * Flag to control if the content should wrap.
+     */
+    wrap?: boolean;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * Flag to enable sorting of list items
+     */
+    sortable?: boolean;
+    /**
+     * callback function to update the current order of data
+     *
+     * @param data
+     * @returns
+     */
+    updateSortOrder?: Dispatch<SetStateAction<T[]>>;
+};
+
+/**
+ * A wrapper component that manages the rendering of either a sortable or regular list based on the provided props.
+ *
+ * @template T - The type of the list items.
+ * @param {ListProps<T>} props - The properties for the list wrapper.
+ * @returns {JSX.Element} The rendered list component.
+ */
+declare const List: <T extends ListItemType>(props: ListProps<T>) => React__default.JSX.Element;
+
+type ContextMenuProps<T extends ListItemType> = ListProps<T>;
+
+declare const ContextMenu: <T extends ListItemType>(props: ContextMenuProps<T>) => React__default.JSX.Element;
+
+type DatePickerPosition = 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
+type DatePickerProps = {
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: string | Date;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: string | Date;
+    /**
+     * Enable time selection in the date picker.
+     * @default false
+     */
+    enableTime?: boolean;
+    /**
+     * Enable selecting a start and end date.
+     * @default false
+     */
+    enableRange?: boolean;
+    /**
+     * The date that is initially displayed.
+     */
+    defaultDate?: string | Date;
+    /**
+     * The format of the date to be displayed.
+     * @remark
+     * For info about what formats exist, refer to the flatpickr documentation
+     */
+    dateFormat?: string;
+    /**
+     * Callback function when the date(s) are changed.
+     * @param dates - Array of selected dates.
+     * @param dateStr - String representation of the selected date(s). Will match the date format.
+     */
+    onChange?: (dates: Date[], dateStr: string) => void;
+    /**
+     * Callback function when the date picker is opened.
+     * @param dates - Array of selected dates.
+     * @param dateStr - String representation of the selected date(s). Will match the date format.
+     */
+    onOpen?: (dates: Date[], dateStr: string) => void;
+    /**
+     * Callback function when the date picker is closed.
+     * @param dates - Array of selected dates.
+     * @param dateStr - String representation of the selected date(s). Will match the date format.
+     */
+    onClose?: (dates: Date[], dateStr: string) => void;
+    /**
+     * render date picker inline
+     */
+    inline?: boolean;
+    /**
+   * Hide calendar for only time picker.
+   * @default false
+   */
+    noCalendar?: boolean;
+    /**
+     * The Flatpickr ref.
+     */
+    datePickerRef?: React.RefObject<FlatPickr>;
+    /**
+     * Datepicker position
+     */
+    position?: DatePickerPosition;
+    /**
+     * Function to parse date strings into Date objects.
+     * Used for parsing both the initial date string and any date strings entered in the input field.
+     * @param date - The date value to parse, can be a string
+     * @param format - Optional format string to use when parsing date strings
+     * @returns A Date object representing the parsed date
+     */
+    parseDate?: (date: string, format?: string) => Date;
+    /**
+    * Allow user to type date/time in input.
+    * @default false
+    */
+    allowInput?: boolean;
+    /**
+     * Custom time picker plugin
+     */
+    customTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
+    /**
+     * Custom time picker plugin
+     */
+    customDateTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
+    /**
+     * Use custom time input same as date picker input
+     * This is useful when the datepicker is inline and is re-added to the DOM after closing
+     * For example using this inside a Popover as content
+     */
+    useCustomTimeInputForTimePicker?: boolean;
+};
+type CustomTimePickerConfig = {
+    minuteStep: number;
+};
+
+declare const DatePicker: (props: DatePickerProps) => React__default.JSX.Element;
+
+/**
+ * Type representing the allowed values for form fields
+ */
+type FieldValue = string | number | Date | boolean | File | Array<string | number | Date | File>;
+/**
+ * Type representing the form values as a partial record of field names to field values
+ * @example
+ * ```typescript
+ * const formState: FormState = {
+ *   name: 'John Doe',
+ *   age: 30,
+ *   dob: new Date('1990-01-01')
+ * };
+ * ```
+ */
+type FormState<T extends FieldValue = FieldValue> = Partial<Record<string, T>>;
+/**
+ * Type representing the form errors as a partial record of field names to error messages
+ */
+type FormErrors<T extends FormState = FormState> = Partial<Record<keyof T, string>>;
+/**
+ * Type representing a validation function for a form field
+ * It takes an error setter function and the field value (optional) and returns a boolean indicating if the value is valid
+ * @example
+ * ```typescript
+ * const nameValidator: FieldValidationFunction = (setError, value) => {
+ *   if (!value) {
+ *     setError('Name is required');
+ *     return false;
+ *   }
+ *   return true;
+ * };
+ * ```
+ */
+type FieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => boolean;
+/**
+ * Type representing the required fields in a form
+ * It's a partial record of field names to a boolean indicating if the field is required
+ */
+type RequiredFields<T extends FormState = FormState> = Partial<Record<keyof T, boolean>>;
+/**
+ * Type representing the validation functions for each field in a form
+ * It's a partial record of field names to validation functions (or undefined)
+ * @example
+ * ```typescript
+ * const nameValidator: FieldValidationFunction = (setError, value) => {
+ *   if (!value) {
+ *     setError('Name is required');
+ *     return false;
+ *   }
+ *   return true;
+ * };
+ * const fieldValidators: FieldValidators = {
+ *   name: nameValidator,
+ *   age: undefined,
+ * };
+ * ```
+ */
+type FieldValidators<T extends FormState = FormState> = Partial<Record<keyof T, FieldValidationFunction | undefined>>;
+/**
+ * Type representing a function that handles form state changes
+ * It takes the new form state and an error setter function and doesn't return anything
+ * @example
+ * ```typescript
+ * const handleFormStateChange: FormStateChangeHandler = (state, setError) => {
+ *   // Validate form state and set errors
+ *   if (!state.name) {
+ *     setError('name', 'Name is required');
+ *   }
+ * };
+ * ```
+ */
+type FormStateChangeHandler<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => void;
+/**
+ * Type representing a function that validates the entire form
+ * It takes the form values and an error setter function and returns a boolean indicating if the form is valid
+ * @example
+ * ```typescript
+ * const validateForm: FormValidator = (state, setError) => {
+ *   let isValid = true;
+ *   if (!state.name) {
+ *     setError('name', 'Name is required');
+ *     isValid = false;
+ *   }
+ *   if (!state.age || typeof state.age !== 'number') {
+ *     setError('age', 'Age must be a number');
+ *     isValid = false;
+ *   }
+ *   return isValid;
+ * };
+ * ```
+ */
+type FormValidator<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => boolean;
+/**
+ * Type representing a function that handles form submission.
+ * It takes updated form state and a function to set error messages for specific fields.
+ *
+ * @template T - The type of the form state, defaulting to `FormState`.
+ *
+ * @param {T} values - The updated form state values.
+ * @param {(field: keyof T, errorMessage: string) => void} setError - A function to set error messages for specific fields.
+ *
+ * @example
+ * ```typescript
+ * const handleFormSubmit: FormSubmitHandler = (values, setError) => {
+ *   // Submit form data
+ *   console.log(values);
+ * };
+ * ```
+ */
+type FormSubmitHandler<T extends FormState = FormState> = (values: T, setError: (field: keyof T, errorMessage: string) => void) => void;
+type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> & {
+    formRef?: Ref<HTMLFormElement>;
+};
+type FormContextValues<T extends FormState = FormState> = {
+    formRef?: Ref<HTMLFormElement>;
+    formState?: T;
+    updateFieldValue: (name: string, value: FieldValue) => void;
+    formErrors: FormErrors<T>;
+    updateFieldError: (name: keyof T, errorMessage: string) => void;
+    onFormSubmit: React__default.FormEventHandler<HTMLFormElement>;
+    updateFieldValidators: (name: keyof T, validate?: FieldValidationFunction) => void;
+    updateRequiredFields: (name: keyof T, required?: boolean) => void;
+};
+type FormProviderProps<T extends FormState = FormState> = {
+    formRef?: Ref<HTMLFormElement>;
+    children?: React__default.ReactNode;
+    formState?: T;
+    onFormStateChange?: FormStateChangeHandler<T>;
+    formValidator?: FormValidator<T>;
+    onSubmit?: FormSubmitHandler<T>;
+    validateOnChange?: boolean;
+};
+
+/**
+ * Props for the FormField component.
+ */
+type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The label for the form field
+     */
+    label?: string;
+    /**
+     * Optional message for the form field
+     */
+    message?: string;
+    /**
+     * Info icon for message
+     */
+    infoIcon?: React.ReactNode;
+    /**
+     * Optional field for possible error message
+     */
+    hasMessage?: boolean;
+};
+/**
+ * Props for the FormFieldProvider component.
+ */
+type FormFieldProviderProps = {
+    /**
+     * Child components
+     */
+    children: React.ReactNode;
+    /**
+     * Name of the form field
+     */
+    name: string;
+    /**
+     * Indicates if the field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indicates if the field is invalid
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Indicates if the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Validation function for the field
+     */
+    validate?: FieldValidationFunction;
+    /**
+     * id attribute to connect label and field of form field
+     * note:- this is optional as FormFieldContext will generate an id
+     */
+    id?: string;
+};
+/**
+ * Props for the UseField hook.
+ */
+type UseFieldProps<T extends FieldValue = FieldValue> = {
+    /**
+     * The value of the field
+     */
+    value?: T;
+    /**
+     * Indicates if the field is invalid
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Callback when the field value changes
+     */
+    onValueChanged?: (value: T) => void;
+    /**
+     * Indicates if the field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indicates if the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Default value for the field
+     */
+    defaultValue?: T;
+    /**
+     * the field is independent of the parent form field contexts
+     * @default false
+     */
+    independent?: boolean;
+};
+
+declare const useField: <T extends FieldValue = FieldValue>(props: UseFieldProps<T>) => {
+    fieldValue: T;
+    updateFieldValue: (newValue: T) => void;
+    disabledField: boolean | undefined;
+    requiredField: boolean | undefined;
+    invalidField: boolean | undefined;
+    formFieldId: string | undefined;
+    name: string | undefined;
+};
+
+type FormFieldPropsWithProvider = FormFieldProviderProps & FormFieldProps;
+declare const FormField: (props: FormFieldPropsWithProvider) => React__default.JSX.Element;
+
+type GridProps = HTMLAttributes<HTMLDivElement> & {
+    columns?: number;
+    rows?: number;
+};
+type GridItemProps = HTMLAttributes<HTMLDivElement> & {
+    columnSpan?: number;
+    rowSpan?: number;
+};
+
+declare const Grid: (props: GridProps) => React__default.JSX.Element;
+
+declare const GridItem: (props: GridItemProps) => React$1.JSX.Element;
+
+type GridListProps<T extends ListItemType> = Omit<ListProps<T>, 'style'> & {
+    columns?: number;
+};
+
+declare const GridList: <T extends ListItemType>(props: GridListProps<T>) => React__default.JSX.Element;
+
+/**
+ * Enum defining the possible sizes for the Modal component.
+ */
+type ModalSizeEnum = 'Small' | 'Medium' | 'Large';
+/**
+ * Props for the Modal component.
+ */
+type ModalProps = {
+    /**
+     * The content that will be rendered inside the modal.
+     */
+    children: ReactNode;
+    /**
+     * Optional size of the modal. Defaults to 'Medium'.
+     *  @default "Medium"
+     */
+    size?: ModalSizeEnum;
+    /**
+     * Callback function invoked when the modal is hidden.
+     */
+    onHide?: () => void;
+    /**
+     * Controls whether the modal is visible (`true`) or hidden (`false`).
+     *  @default false
+     */
+    show?: boolean;
+    /**
+     * The content to be rendered in the header of the modal.
+     */
+    header?: ReactNode;
+    /**
+     * The content to be rendered in the footer of the modal.
+     */
+    footer?: ReactNode;
+    /**
+     * Custom JSX element to render as the backdrop for the modal.
+     */
+    renderBackdrop?: ReactNode;
+    /**
+     * Determines whether a backdrop should be displayed behind the modal.
+     *  @default true
+     */
+    backdrop?: boolean;
+    /**
+     * Disables the ability to dismiss the modal by clicking on the backdrop.
+     *  @default false
+     */
+    disableBackdropDismiss?: boolean;
+    /**
+     * Additional CSS class names to apply to the modal.
+     */
+    className?: string;
+};
+
+/**
+ * Modal component for displaying a dialog window.
+ */
+declare const Modal: (props: ModalProps) => React__default.JSX.Element;
+
+/**
+ * Defines the type of modal footer layout.
+ * @default "1Button"
+ */
+type ModalFooterTypeEnum = "1Button" | "2Buttons";
+/**
+ * Props for the ModalFooter component.
+ */
+type ModalFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    /**
+     * Determines whether the footer contains one or two buttons.
+     * @default "1Button"
+     */
+    type?: ModalFooterTypeEnum;
+    /**
+     * The primary button element.
+     */
+    primaryButton?: ReactNode;
+    /**
+     * The secondary button element (only applicable when type is "2 buttons").
+     */
+    secondaryButton?: ReactNode;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};
+
+/**
+ * Modal Footer component for displaying footer actions in a modal.
+ */
+declare const ModalFooter: React__default.FC<ModalFooterProps>;
+
+/**
+ * Props for the ModalHeader component.
+ */
+type ModalHeaderProps = {
+    /**
+     * The title to be displayed in the header.
+     */
+    title?: string;
+    /**
+     * An optional icon button to display in the header.
+     */
+    iconButton?: ReactNode;
+    /**
+     * Additional CSS class names to apply to the modal header.
+     */
+    className?: string;
+};
+
+/**
+ * Modal Header component definition.
+ */
+declare const ModalHeader: (props: ModalHeaderProps) => React__default.JSX.Element;
+
+type NavProps = HTMLAttributes<HTMLElement> & {};
+
+declare const Nav: (props: NavProps) => React__default.JSX.Element;
+
+type NavItemProps = LiHTMLAttributes<HTMLElement> & {};
+
+declare const NavItem: (props: NavItemProps) => React__default.JSX.Element;
+
+type PaginationProps = {
+    className?: string;
+    currentPage?: number;
+    totalPages?: number;
+    updateCurrentPage?: (page: number) => void;
+    previousPageIcon?: React.ReactNode;
+    nextPageIcon?: React.ReactNode;
+};
+
+declare const Pagination: (props: PaginationProps) => React$1.JSX.Element;
+
+type PaginationNumberFieldProps = {
+    className?: string;
+    page?: number;
+    totalPages?: number;
+    onPageChanged?: (page: number) => void;
+};
+
+declare const PaginationNumberField: (props: PaginationNumberFieldProps) => React$1.JSX.Element;
+
+/**
+ * Enum for the action type of the Popover.
+ */
+type ActionType = 'Click' | 'Hover' | 'DoubleClick';
+/**
+ * Enum for the overlay direction of the Popover.
+ */
+type OverlayDirectionEnum = 'Up' | 'Down' | 'Right' | 'Left';
+/**
+ * Enum for the overlay alignment of the Popover.
+ */
+type OverlayAlignEnum = 'Start' | 'End' | 'Center';
+/**
+ * Props for the content of the Popover.
+ */
+type ContentProps = {
+    width?: CSSProperties['width'] | 'match-trigger';
+    minWidth?: CSSProperties['minWidth'] | 'match-trigger';
+};
+/**
+ * Props for the Popover component.
+ */
+type PopoverProps = {
+    /**
+     * Ref or Element for the Popover component to render in.
+     */
+    container?: HTMLElement | React__default.RefObject<HTMLElement> | null;
+    /**
+     * The content to display in the Popover.
+     */
+    content: ReactNode;
+    /**
+     * The target element for the Popover.
+     */
+    target: ReactNode;
+    /**
+     * Offset for positioning the Popover.
+     */
+    offset?: Offset;
+    /**
+     * Function to handle hiding the Popover.
+     */
+    onHide?: () => void;
+    /**
+     * Function to handle hiding the Popover.
+     */
+    onOpen?: () => void;
+    /**
+     * Direction in which the Popover should open.
+     * @default 'Down'
+     */
+    direction?: OverlayDirectionEnum;
+    /**
+     * Indicates if Popover should hide on click away.
+     * @default true
+     */
+    hideOnClickAway?: boolean;
+    /**
+     * Indicates if content should stay on item click.
+     * @default false
+     */
+    keepContentOnItemClick?: boolean;
+    /**
+     * Indicates if the Popover is shown.
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * Action type to trigger the Popover.
+     * @default 'Click'
+     */
+    action?: ActionType;
+    /**
+     * Alignment of the Popover.
+     * @default 'Center'
+     */
+    alignment?: OverlayAlignEnum;
+    /**
+     * Props for the content of the Popover.
+     */
+    contentProps?: ContentProps;
+    /**
+     * Indicates if the Popover is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indicates if content should change placement to stay on the screen.
+     * @default false
+     */
+    flip?: boolean;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * Additional class for overlay container styling.
+     */
+    overlayClassName?: string;
+    /**
+     * Position of the Popover.
+     * @default 'absolute'
+     */
+    contentPosition?: 'absolute' | 'fixed';
+};
+type PopoverHandle = {
+    close: () => void;
+    open: () => void;
+};
+
+/**
+ * Popover component that displays a floating content element in relation to a target element.
+ * It can be triggered via different user actions like 'Click' or 'Hover'.
+ */
+declare const Popover: React__default.ForwardRefExoticComponent<PopoverProps & React__default.RefAttributes<PopoverHandle>>;
+
+type ProgressBarLabelType = "Percentage" | "Text";
+type ProgressBarProps = {
+    /**
+     * Current progress value
+     * @default 0
+     */
+    value: number;
+    /**
+     * Minimum value of the progress bar
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value of the progress bar
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Defines the orientation of the progress bar
+     * @default "horizontal"
+     */
+    /**
+     * Determines if and how the label is displayed
+     */
+    showLabel?: ProgressBarLabelType;
+    /**
+     * Custom label to be displayed when `showLabel` is set to "Text"
+     */
+    label?: React.ReactNode;
+    /**
+     * Additional class for styling
+     */
+    className?: string;
+};
+
+declare const ProgressBar: React__default.FC<ProgressBarProps>;
+
+/**
+ * Props for the Option component, extending LiHTMLAttributes<HTMLLIElement>.
+ * Represents an option within a Select component.
+ */
+type OptionProps = LiHTMLAttributes<HTMLLIElement> & {
+    /**
+     * Value associated with the option.
+     */
+    value: string | number;
+    /**
+     * Indicates if the option is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon to be displayed before the option content.
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Icon to be displayed after the option content.
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * Additional CSS class names for custom styling.
+     */
+    className?: string;
+    /**
+     * Children elements or text content of the option.
+     */
+    children?: ReactNode;
+};
+
+/**
+ * Functional component representing an option within a select dropdown.
+ *
+ * @param props - Props for configuring the Option component.
+ * @returns Element representing the option.
+ */
+declare const Option: (props: OptionProps) => React__default.JSX.Element;
+
+/**
+ * Represents the context provided by the Select component.
+ */
+type SelectContextType = {
+    /**
+     * The currently selected value in the Select component.
+     */
+    selectedValue: FieldValue;
+    /**
+     * Function to update the selected value.
+     * @param value - The new value to select, either a string or number.
+     */
+    updateSelectedValue: (value: string | number) => void;
+    /**
+     * Function to reset the selected value to its default state.
+     */
+    resetSelectedValue: () => void;
+    /**
+     * Indicates whether the field is in an invalid state.
+     */
+    invalidField?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     */
+    disabledField?: boolean;
+    /**
+     * id to use as htmlFor for label, which will be fetched from FormFieldContext
+     */
+    formFieldId: string;
+};
+/**
+ * Props for the SelectProvider component, which manages state and provides context for Select.
+ */
+type SelectProviderProps = {
+    /**
+     * Child elements to be rendered within the SelectProvider.
+     */
+    children: ReactNode;
+    /**
+     * Currently selected value (if controlled).
+     */
+    value?: FieldValue;
+    /**
+     * Indicates if multiple options can be selected.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Default selected value (if uncontrolled).
+     */
+    defaultValue?: FieldValue;
+    /**
+     * Indicates whether the Select is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback function invoked when the selected value changes.
+     * @param event - Optional event containing the new field value.
+     */
+    onValueChanged?: (event?: FieldValue) => void;
+    /**
+     * Indicates whether the selected field is hasDefaultOption or not.
+     * @default false
+     */
+    hasDefaultOption?: boolean;
+};
+/**
+ * Enum representing different states of the Select component.
+ */
+type SelectStateEnum = 'Default' | 'Error';
+/**
+ * Props for the SelectView component, defining its visual appearance and behavior.
+ */
+type SelectViewProps = Omit<HTMLAttributes<HTMLElement>, 'style' | 'children'> & {
+    /**
+     * Options to be rendered within the Select component.
+     */
+    children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
+    /**
+     * Placeholder text displayed when no option is selected.
+     */
+    placeholder?: string;
+    /**
+     * Determines if the dropdown menu is initially open.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Icon displayed before the select input.
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Icon displayed for the expand sign.
+     */
+    expandIcon?: ReactNode;
+    /**
+     * Indicates whether the dropdown menu is currently open.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Current state of the Select component.
+     * @default 'Default'
+     */
+    state?: SelectStateEnum;
+    /**
+     * Additional props for the dropdown menu.
+     */
+    menuProps?: ContentProps;
+    /**
+   * Indicates whether the selected field is hasDefaultOption or not.
+   * @default false
+   */
+    hasDefaultOption?: boolean;
+    /**
+     * Indicates if multiple options can be selected.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Additional CSS classes for customization.
+     */
+    className?: string;
+    /**
+     * The component used to render each item in the list.
+     */
+    selectedView?: React.FC<any>;
+};
+/**
+ * Props for the Select component, combining provider and view props.
+ */
+type SelectProps = Omit<SelectProviderProps, 'children'> & SelectViewProps;
+
+/**
+ * Custom hook to use the SelectContext values.
+ * Throws an error if used outside of a SelectProvider.
+ *
+ * @throws Error if used outside of SelectProvider.
+ * @returns Context values of type SelectContextType.
+ */
+declare const useSelectContext: () => SelectContextType;
+/**
+ * Provider component for managing state and providing context to Select components.
+ * Manages the selected value state and provides methods to update or reset it.
+ *
+ * @param props - Props for configuring the SelectProvider.
+ * @returns JSX element that provides context to its children.
+ */
+declare const SelectProvider: ({ children, value, defaultValue, multiple, disabled, onValueChanged, }: SelectProviderProps) => React__default.JSX.Element;
+
+/**
+ * Select component that wraps SelectComponent with SelectProvider.
+ * Provides state management and context to SelectComponent.
+ *
+ * @param props - Props for configuring the Select component.
+ * @returns JSX element that renders the SelectComponent wrapped with SelectProvider.
+ */
+declare const Select: (props: SelectProps) => JSX.Element;
+
+/**
+ * Dropzone component props
+ * @param initial React.ReactNode - The initial state of the dropzone.
+ * @param uploading React.ReactNode - The uploading state of the dropzone.
+ * @param uploaded React.ReactNode - The uploaded state of the dropzone.
+ * @param accept { [key: string]: readonly string[] } - The accepted file types.
+ * @param maxSize number - The maximum size of the file in bytes.
+ * @param maxFiles number - The maximum number of files to upload.
+ * @param onFilesUpload (file: File) => void - callback when files are selected
+ * @param onFilesReset () => void - callback when files are reset
+ */
+type DropzoneProps = {
+    /**
+     * The initial state of the dropzone.
+     */
+    initial?: React.ReactNode;
+    /**
+     * The uploading state of the dropzone.
+     */
+    uploading?: React.ReactNode;
+    /**
+     * The uploaded state of the dropzone.
+     */
+    uploaded?: React.ReactNode;
+    /**
+     * The accepted file types based on mime type.
+     * @example
+     * accept={{
+     *   'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.ico', '.webp'],
+     * }}
+     */
+    accept?: {
+        [key: string]: readonly string[];
+    };
+    /**
+     * The maximum size of the file in bytes.
+     */
+    maxSize?: number;
+    /**
+     * The maximum number of files to upload.
+     * @default 1
+     */
+    maxFiles?: number;
+    disabled?: boolean;
+    required?: boolean;
+    /**
+     * callback when files are selected
+     */
+    onFilesSelected?: (files: File[]) => Promise<void> | void;
+    /**
+     * callback when files are reset
+     */
+    onFilesReset?: () => void;
+};
+/**
+ * Dropzone context type
+ * @param status 'initial' | 'uploading' | 'uploaded' - The status of the dropzone.
+ * @param file File | null - The file of the dropzone.
+ * @param selectFile () => void - The function to call when the file is selected.
+ * @param resetUpload () => void - The function to call when the file is reset.
+ */
+type DropzoneContextType = {
+    /**
+     * The status of the dropzone.
+     */
+    status: 'initial' | 'uploading' | 'uploaded';
+    /**
+     * The files of the dropzone.
+     */
+    files: File[];
+    /**
+     * The accepted file types based on mime type.
+     * @example
+     * accept={{
+     *   'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.ico', '.webp'],
+     * }}
+     */
+    accept: {
+        [key: string]: readonly string[];
+    };
+    /**
+     * The function to call to open the file dialog.
+     */
+    selectFiles: () => void;
+    /**
+     * The function to call to reset the files.
+     */
+    resetFiles: () => void;
+    children?: ReactNode;
+};
+type DropzoneTriggerProps = ButtonProps;
+type DropzoneSupportedFormatsProps = TextProps;
+type DropzoneClearProps = IconButtonProps;
+type DropzoneFilenameProps = TextProps & {
+    /**
+     * The index of the file in the files array.
+     * @default 0
+     */
+    fileIndex?: number;
+};
+
+declare const Dropzone: (props: DropzoneProps) => React__default.JSX.Element;
+declare const useDropzoneContext: () => DropzoneContextType;
+
+declare const DropzoneClear: (props: DropzoneClearProps) => React__default.JSX.Element;
+
+declare const DropzoneFilename: ({ children, fileIndex, ...props }: DropzoneFilenameProps) => React__default.JSX.Element;
+
+declare const DropzoneSupportedFormats: (props: DropzoneSupportedFormatsProps) => React__default.JSX.Element;
+
+declare const DropzoneTrigger: (props: DropzoneTriggerProps) => React__default.JSX.Element;
+
+type DropzoneContentTypeEnum = 'Empty' | 'Uploaded' | 'Loading';
+type DropzoneContentProps = {
+    className?: string;
+    type: DropzoneContentTypeEnum;
+};
+
+declare const DropzoneContent: (props: DropzoneContentProps) => React$1.JSX.Element;
+
+declare const Form: <T extends FormState>(props: FormProviderProps<T> & FormProps) => React__default.JSX.Element;
+
+type TableProps = TableHTMLAttributes<HTMLTableElement> & {
+    /**
+     * Whether the table header should stick to the top when scrolling
+     */
+    stickyHeader?: boolean;
+};
+
+declare const Table: (props: TableProps) => React__default.JSX.Element;
+
+type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
+
+declare const TableRow: (props: TableRowProps) => React__default.JSX.Element;
+
+type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+
+declare const TableCell: (props: TableCellProps) => React__default.JSX.Element;
+
+type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+
+declare const TableHeader: (props: TableHeaderProps) => React__default.JSX.Element;
+
+type TableHeaderCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+
+declare const TableHeaderCell: (props: TableHeaderCellProps) => React__default.JSX.Element;
+
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+
+declare const TableBody: (props: TableBodyProps) => React__default.JSX.Element;
+
+type TabsStyleEnum = 'Filled' | 'Underlined';
+type TabsTypeEnum = 'Horizontal' | 'Vertical';
+type TabContextType = {
+    /**
+    * The tab item style to apply.
+    * @default Filled
+    */
+    style: TabsStyleEnum;
+    /**
+     * The currently selected tab.
+     */
+    currentTab: string | number;
+    /**
+     * Function to update the currently selected tab.
+     * @param tabValue - The value of the tab to be set.
+     */
+    updateCurrentTab: (tabValue: string | number) => void;
+};
+type TabProviderProps = {
+    /**
+     * The content to be displayed within the tab provider.
+     */
+    children: React.ReactNode;
+    /**
+     * The value of the tab.
+     */
+    value?: number | string;
+    /**
+    * The tab item style to apply.
+    * @default Filled
+    */
+    style?: TabsStyleEnum;
+    /**
+     * Callback function when a tab is clicked.
+     * @param value - The value of the clicked tab.
+     */
+    onClick?: (value: string | number) => void;
+};
+type TabsViewProps = {
+    /**
+     * The content to be displayed within the tabs.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+    * The tab item style to apply.
+    * @default Filled
+    */
+    style?: TabsStyleEnum;
+    /**
+     * The tab item type to apply.
+     * @default Horizontal
+     */
+    type?: TabsTypeEnum;
+};
+type TabsProps = TabProviderProps & TabsViewProps;
+
+/**
+ * Custom hook to use the TabContext
+ * Throws an error if used outside of a TabProvider
+ */
+declare const useTab: () => TabContextType;
+
+declare const Tabs: (props: TabsProps) => React__default.JSX.Element;
+
+type TabItemStyleEnum = 'Filled' | 'Underlined';
+type TabItemProps = Omit<ButtonProps, 'actionType' | 'appearance' | 'size' | 'style' | 'type'> & {
+    /**
+     * The tabs value.
+     * @remarks
+     * This is used for determining which tab is selected.
+     * The value from TabContent will be compared to the value from TabItem.
+     * @example
+     * 1
+     * "One"
+     */
+    value: number | string;
+    /**
+     * The default tab.
+     * @remarks
+     * True means that this tab will be displayed initially
+     */
+    defaultTab?: boolean;
+    /**
+    * The tab item style to apply.
+    * @default Filled
+    */
+    style?: TabItemStyleEnum;
+};
+
+declare const TabItem: (props: TabItemProps) => React__default.JSX.Element;
+
+interface TabContentProps {
+    /**
+     * The tab contents value.
+     * @remarks
+     * This is used for determining which tab is selected.
+     * The value from TabContent will be compared to the value from TabItem.
+     * @example
+     * 1
+     * "One"
+     */
+    value: number | string;
+    /**
+     * The contents of the tab.
+     */
+    children: React.ReactNode;
+    /**
+     * The classname applied to the tab content.
+     */
+    className?: string;
+}
+
+declare const TabContent: (props: TabContentProps) => React__default.JSX.Element;
+
+type ThemeContextType = {
+    theme: string;
+    updateTheme: (theme: string) => void;
+};
+type ThemeProviderProps = {
+    theme?: string;
+    children?: ReactNode;
+};
+
+declare const ThemeContext: React__default.Context<ThemeContextType>;
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+
+type ToastNotificationStyleEnum = 'Neutral' | 'Error' | 'Success';
+
+/**
+ * Represents a single notification.
+ */
+type Notification = {
+    id?: number;
+    message?: ReactNode;
+    duration?: number;
+};
+/**
+ * Payload for triggering a new notification.
+ */
+type TriggerNotificationPayload = Notification & {
+    style?: ToastNotificationStyleEnum;
+};
+/**
+ * Props for the NotificationContainer component.
+ */
+type NotificationContainerProps = {
+    className?: string;
+};
+/**
+ * Context value for notifications.
+ */
+type NotificationContextValue = {
+    notifications: Notification[];
+    clear: VoidFunction;
+    removeNotification: (id: number) => void;
+    trigger: (payload: TriggerNotificationPayload) => void;
+};
+/**
+ * Props for the NotificationProvider component.
+ */
+type NotificationProviderProps = {
+    children: ReactNode;
+};
+
+declare const NotificationContext: React__default.Context<NotificationContextValue>;
+declare const NotificationProvider: React__default.FC<NotificationProviderProps>;
+declare const useNotification: () => NotificationContextValue;
+
+export { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, Chip, type ChipProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DatePicker, type DatePickerProps, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormFieldPropsWithProvider, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps, type ListProps, Modal, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type NotificationContainerProps, NotificationContext, NotificationProvider, Option, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, Slider, type SliderProps, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, useDropzoneContext, useField, useNotification, useSelectContext, useTab };