pixelize-design-library 2.1.13 → 2.1.15

package/dist/index.d.ts

@@ -1,54 +1,1461 @@
-import Accordian from "./Components/Accordion/Accordion";
-import AlertDialog from "./Components/AlertDialog/AlertDialog";
-import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
-import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
-import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
-import Button from "./Components/Button/Button";
-import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
-import Card from "./Components/Card/Card";
-import Checkbox from "./Components/Checkbox/Checkbox";
-import ContactForm from "./Components/ContactForm/ContactForm";
-import DatePicker from "./Components/DatePicker/DatePicker";
-import Drawer, { DrawerHeader, DrawerBody, DrawerFooter } from "./Components/Drawer/Drawer";
-import Dropdown from "./Components/Dropdown/DropDown";
-import Editor from "./Components/Editor/Editor";
-import FileUpload from "./Components/FileUpload/FileUpload";
-import FormWrapper from "./Components/Form/FormWrapper";
-import Header from "./Components/Header/Header";
-import HeaderActions from "./Components/Header/HeaderActions";
-import InputTextArea from "./Components/InputTextArea/InputTextArea";
-import KanbanBoard from "./Components/KanbanBoard/KanbanBoard";
-import Loading from "./Components/Loading/Loading";
-import Modal, { ModalHeader, ModalBody, ModalFooter } from "./Components/Modal/Modal";
-import MultiSelect from "./Components/MultiSelect/MultiSelect";
-import NavigationBar from "./Components/NavigationBar/NavigationBar";
-import NoteTextArea from "./Components/NoteTextArea/NoteTextArea";
-import NumberInput from "./Components/NumberInput/NumberInput";
-import PinInput from "./Components/PinInput/PinInput";
-import ProfileCard, { ProfileCardHeader, ProfileCardBody, ProfileCardFooter } from "./Components/ProfileCard/ProfileCard";
-import ProfilePhotoViewer from "./Components/ProfilePhotoViewer/ProfilePhotoViewer";
-import ProgressBar from "./Components/ProgressBar/ProgressBar";
-import { RadioButton, RadioButtonGroup } from "./Components/RadioButton/RadioButton";
-import Reorder from "./Components/Reorder/Reorder";
-import Search from "./Components/Search/Search";
-import Select from "./Components/Select/Select";
-import SearchSelect from "./Components/SearchSelect/SearchSelect";
-import SelectSearch from "./Components/SelectSearch/SelectSearch";
-import SideBar from "./Components/SideBar/SideBar";
-import Skeletons from "./Components/Skeletons/Skeletons";
-import Switch from "./Components/Switch/Switch";
-import Table from "./Components/Table/Table";
-import Tag from "./Components/Tag/Tag";
-import TextInput from "./Components/Input/TextInput";
-import Timeline from "./Components/Timeline/Timeline";
-import Toaster, { useToaster } from "./Components/Toaster/Toaster";
-import ToolTip from "./Components/ToolTip/ToolTip";
-import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
-import TableToggle from "./Components/Toggle/TableToggle";
-import withTheme from "./withTheme";
-import { useCustomTheme } from "./Theme/useCustomTheme";
-import { ThemesList } from "./Theme";
-import { debounce } from "./Utils/table";
-import ProductCard from "./Components/ProductCard/ProductCard";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProductCard, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
-export default withTheme;
+import React$1, { ReactElement, ReactNode, FC, LegacyRef, ElementType } from 'react';
+import { AccordionProps as AccordionProps$1, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, AlertDialogProps, AlertProps, BreadcrumbProps, ButtonProps as ButtonProps$1, CardProps as CardProps$1, CheckboxProps as CheckboxProps$1, DrawerProps as DrawerProps$1, SelectProps, TextareaProps, ModalProps, NumberInputProps as NumberInputProps$1, PinInputProps, ProgressProps, RadioProps, RadioGroupProps, SkeletonProps as SkeletonProps$1, SkeletonTextProps, InputProps, ToastProps, TooltipProps, Theme } from '@chakra-ui/react';
+import { IJoditEditorProps } from 'jodit-react';
+
+type AccordionProps = AccordionProps$1 & {
+    items: {
+        header: React.ReactNode;
+        content: React.ReactNode;
+        buttonProps?: AccordionButtonProps;
+        panelProps?: AccordionPanelProps;
+        itemProps?: AccordionItemProps;
+        customStyles?: {
+            buttonStyle?: React.CSSProperties;
+            hoverbuttonStyle?: React.CSSProperties;
+            panelStyle?: React.CSSProperties;
+            itemStyle?: React.CSSProperties;
+        };
+    }[];
+};
+
+declare const Accordion: ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }: AccordionProps) => React$1.JSX.Element;
+
+type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
+    title: string;
+    content: ReactElement;
+    isCentered?: boolean;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    isConfirmLoading?: boolean;
+    onConfirm: () => void;
+    ContentStyle?: React.CSSProperties;
+    headerStyle?: React.CSSProperties;
+    bodyStyle?: React.CSSProperties;
+    footerStyle?: React.CSSProperties;
+    closeButtonStyle?: React.CSSProperties;
+    button1Style?: React.CSSProperties;
+    button2Style?: React.CSSProperties;
+    key?: string | number;
+    confirmButtonColor?: string;
+};
+
+declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, confirmButtonColor, key, }: AlertDialogsProps) => React$1.JSX.Element;
+
+type ApexBarChartProps = {
+    data: number[];
+    labels: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number;
+    width?: number;
+    barColor?: string[];
+    xAxisStyle?: StyleProps$1;
+    yAxisStyle?: StyleProps$1;
+    titleStyle?: StyleProps$1;
+};
+type StyleProps$1 = {
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    color?: string;
+};
+
+declare function ApexBarChart({ data, labels, title, titlePosition, height, width, barColor, xAxisStyle, yAxisStyle, titleStyle, }: ApexBarChartProps): React$1.JSX.Element;
+
+type ApexPieChartProps = {
+    data: number[];
+    labels: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number;
+    width?: number;
+    chartColor?: string[];
+    titleStyle?: StyleProps;
+};
+type StyleProps = {
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    color?: string;
+};
+
+declare function ApexPieChart({ data, labels, title, titlePosition, height, width, chartColor, titleStyle, }: ApexPieChartProps): React$1.JSX.Element;
+
+type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "fontWeight" | "fontSize"> & {
+    isCurrentPage?: boolean;
+    isLastChild?: boolean;
+    handleClick: (path: string) => void;
+    items: BreadcrumbItem[];
+};
+type BreadcrumbItem = {
+    path: string;
+    label: string;
+};
+
+declare function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }: BreadcrumbsProps): React$1.JSX.Element;
+
+type ButtonProps = Pick<ButtonProps$1, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius"> & {
+    label?: string;
+    width?: string | number;
+    size?: "lg" | "md" | "sm" | "xs";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    type?: "button" | "submit" | "reset";
+    colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
+    ref?: React.Ref<HTMLButtonElement>;
+    children?: React.ReactNode;
+    opacity?: number;
+};
+
+declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, }: ButtonProps): React$1.JSX.Element;
+declare const _default$1: React$1.MemoExoticComponent<typeof Button>;
+
+type ButtonGroupIconProps = {
+    leftIcon?: ReactElement;
+    rightIcon?: ReactElement;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    buttonText: string;
+    onButtonClick?: () => void;
+    onButtongroupClick?: () => void;
+    size?: "lg" | "md" | "sm" | "xs";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    buttonGroupStyle?: React.CSSProperties;
+    buttonGroupLeftIconStyle?: React.CSSProperties;
+    buttonGroupRightIconStyle?: React.CSSProperties;
+    buttonStyle?: React.CSSProperties;
+    onBlurLeftIcon?: () => void;
+    onBlurRightIcon?: () => void;
+    dropdownOptions?: {
+        label: string;
+        id: string | number;
+        image?: ReactElement | undefined;
+    }[];
+    onDropdownOptionClick?: (event: React.MouseEvent, option: {
+        label: string;
+        id: string | number;
+    }) => void;
+    rightIconDropdown?: boolean;
+    menulistStyle?: React.CSSProperties;
+    menuItemStyle?: React.CSSProperties;
+    isLoading?: boolean;
+    divider?: boolean;
+};
+
+declare function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
+onDropdownOptionClick, // New prop to handle option clicks
+rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider, }: ButtonGroupIconProps): React$1.JSX.Element;
+
+type CardProps = Pick<CardProps$1, "direction" | "maxW" | "align" | "justify" | "overflow" | "sx"> & {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    variant?: "elevated" | "outline" | "filled" | "unstyled";
+    size?: "sm" | "md" | "lg";
+    color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    key?: string;
+    dividercolor?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    dividersize?: string;
+    dividervariant?: "solid" | "dashed";
+};
+
+declare function Card({ key, maxW, align, variant, direction, justify, children, size, color, overflow, sx, }: CardProps): React$1.JSX.Element;
+
+type CheckboxProps = Pick<CheckboxProps$1, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx"> & {
+    label?: string;
+    width?: string | number;
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    size?: "sm" | "md" | "lg";
+    isRequired?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    isInformation?: boolean;
+    informationMessage?: string;
+    id?: string;
+    helperText?: string;
+};
+
+declare function CheckBox({ label, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, }: CheckboxProps): React$1.JSX.Element;
+
+interface ContactFormProps {
+    apiKey?: string;
+    customerId: string | number;
+    organizationId: string | number;
+    isDisabled?: boolean;
+    customFields?: ReactNode;
+    getCustomValues?: () => Record<string, any>;
+}
+
+declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, }: ContactFormProps) => React$1.JSX.Element;
+
+type PickerType = "date" | "time" | "datetime";
+type BaseDatePickerProps = {
+    id?: string;
+    name?: string;
+    label?: string;
+    isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    placeholderText?: string;
+    dateFormat?: string;
+    pickerType?: PickerType;
+    minDate?: Date;
+    maxDate?: Date;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
+    autoComplete?: string;
+    disabled?: boolean;
+    width?: string | number;
+};
+type SingleDatePickerProps = BaseDatePickerProps & {
+    isRange?: false;
+    selectedDate?: Date | null;
+    onChange: (date: Date | null) => void;
+};
+type RangeDate = {
+    from: Date | null;
+    to: Date | null;
+};
+type RangeDatePickerProps = BaseDatePickerProps & {
+    isRange: true;
+    selectedDate?: RangeDate | null;
+    onChange: (range: RangeDate | null) => void;
+};
+type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
+
+declare function CustomDatePicker(props: DatePickerProps): React$1.JSX.Element;
+
+type DrawerProps = Pick<DrawerProps$1, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant"> & {
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    placement?: "top" | "right" | "bottom" | "left";
+    vaiant?: "solid" | "outline" | "ghost" | "link";
+    children?: React.ReactNode;
+};
+
+declare const DrawerHeader: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+declare const DrawerBody: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+declare const DrawerFooter: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+declare function Drawer({ isOpen, onClose, placement, size, id, variant, children, }: DrawerProps): React$1.JSX.Element;
+
+type DropdownProps = {
+    ButtonText?: string;
+    options: Option[];
+    handleOptionSelect: (id: string | number, label: string) => void;
+    dropdownType?: "button" | "text";
+    text?: string;
+    DropdownIcon?: JSX.Element;
+    dropDownButtonStyle?: React.CSSProperties;
+    isVisibleIconShow?: boolean;
+    buttonProps?: ButtonProps$1;
+    headStyle?: React.CSSProperties;
+    ListStyle?: React.CSSProperties;
+    ItemStyle?: React.CSSProperties;
+    LabelStyle?: React.CSSProperties;
+    ImageStyle?: React.CSSProperties;
+    optionsSize?: "sm" | "md";
+    divider?: boolean;
+};
+type Option = {
+    id: string | number;
+    label: string;
+    image?: React.ElementType;
+};
+
+declare const Dropdown: React$1.ForwardRefExoticComponent<DropdownProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type EditorProps = Pick<IJoditEditorProps, "value" | "config" | "className" | "onChange" | "onBlur"> & {
+    editorRef?: React.RefObject<any>;
+};
+
+declare function Editor({ value, config, editorRef, className, onChange, onBlur, }: EditorProps): React$1.JSX.Element;
+
+type MimeExtension = '.jpg' | '.jpeg' | '.png' | '.gif' | '.webp' | '.svg' | '.pdf' | '.doc' | '.docx' | '.xls' | '.xlsx' | '.ppt' | '.pptx' | '.txt' | '.mp4' | '.mov' | '.mp3' | '.wav' | '.zip' | '.rar' | '.7z';
+type FileUploaderProps = {
+    onFilesUploaded: (files: File[]) => void;
+    uploadedFiles: File[];
+    onRemoveFile?: (file: File) => void;
+    acceptTypes?: MimeExtension[];
+    maxSizeKB?: number;
+    maxFiles?: number;
+    progress?: Record<string, number>;
+};
+
+declare const FileUpload: React$1.FC<FileUploaderProps>;
+
+declare const FormWrapper: ({ icon, text, children, }: {
+    icon?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
+    text?: string | undefined;
+    children: React$1.ReactNode;
+}) => React$1.JSX.Element;
+
+type SubItem = {
+    label: string;
+    href: string;
+    badge?: {
+        label: string;
+        colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
+    };
+    onClick?: () => void;
+};
+type MenuItemProp = {
+    label: string;
+    href?: string;
+    badge?: {
+        label: string;
+        colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
+    };
+    onClick?: () => void;
+    children?: SubItem[];
+};
+type HeaderProps = {
+    logo: React.ReactNode;
+    menuItems: MenuItemProp[];
+    rightSlot?: React.ReactNode;
+    active?: string;
+    colors?: {
+        bg: string;
+        color: string;
+        active: string;
+        hover: string;
+    };
+};
+
+declare const Header: FC<HeaderProps>;
+
+type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "onBlur" | "onFocus" | "errorBorderColor" | "isDisabled" | "isReadOnly" | "isRequired" | "value" | "colorScheme"> & {
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    options: OptionProp[];
+    width?: string | number;
+    height?: string | number;
+    onChange: (selectedOption: OptionProp | undefined) => void;
+    formControlStyle?: React.CSSProperties;
+    isInformation?: boolean;
+    informationMessage?: string;
+    selectStyle?: React.CSSProperties;
+};
+type OptionProp = {
+    id: string | number;
+    label: string | number;
+};
+
+declare const HeaderActions: ({ select, edit, create, }: {
+    select?: {
+        isSelect?: boolean | undefined;
+        options?: OptionProp[] | undefined;
+        onSelectChange?: ((option?: OptionProp) => void) | undefined;
+        selectPlaceholderText?: string | undefined;
+        width?: string | undefined;
+        value?: string | undefined;
+    } | undefined;
+    edit?: {
+        isEditable?: boolean | undefined;
+        onEdit?: (() => void) | undefined;
+        label?: string | undefined;
+    } | undefined;
+    create?: {
+        isCreatable?: boolean | undefined;
+        onCreate?: (() => void) | undefined;
+        label?: string | undefined;
+    } | undefined;
+}) => React$1.JSX.Element;
+
+type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "size" | "resize" | "isDisabled" | "errorBorderColor" | "focusBorderColor" | "isReadOnly" | "isRequired" | "variant"> & {
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    width?: string | number;
+    rows?: number;
+    height?: string | number;
+};
+
+declare function InputTextArea({ label, placeholder, value, onChange, size, resize, width, isDisabled, errorBorderColor, focusBorderColor, isReadOnly, isRequired, error, errorMessage, helperText, rows, height, }: InputTextAreaProps): React$1.JSX.Element;
+
+type Account = {
+    id: string;
+    rating: string;
+    name: string;
+    owner: string;
+    site: string;
+    details?: string;
+    [key: string]: string | undefined;
+};
+type ColumnType = {
+    id: string;
+    title: string;
+    color: string;
+    items: Account[];
+};
+type KanbanBoardProps = {
+    data: Record<string, ColumnType>;
+    onDelete?: (account: Account) => void;
+    onOpen?: (account: Account) => void;
+    onColumnDelete?: (colId: (string | number)[]) => void;
+    onDrag?: ({ from, to, item, }: {
+        from: string;
+        to: string;
+        item: Account;
+    }) => void;
+    isLoading?: boolean;
+};
+
+declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, }: KanbanBoardProps) => React$1.JSX.Element;
+
+type LoadingProps = {
+    text?: string;
+    isLoading: boolean;
+    onlytext?: boolean;
+};
+
+declare function Loading({ text, isLoading, onlytext }: LoadingProps): React$1.JSX.Element | null;
+
+type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
+    overlaybg?: string;
+    overlaybackdropFilter?: string;
+    overlaybackdropInvert?: string;
+    overlaybackdropBlur?: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    children?: React.ReactNode;
+    isLoading?: boolean;
+};
+
+declare const ModalHeader: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+declare const ModalBody: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+declare const ModalFooter: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+declare function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }: ChakraModelProps): React$1.JSX.Element;
+
+type MultiSelectProps = {
+    value: MultiSelctOPtions[];
+    onValueChange: (options: MultiSelctOPtions[]) => void;
+    width?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
+    placeholderText?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    size?: string;
+    inputStyle?: {};
+};
+type MultiSelctOPtions = {
+    id: string;
+    label: string;
+};
+
+declare function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, }: MultiSelectProps): React$1.JSX.Element;
+
+type NavbarProps = {
+    userAvathar: string;
+    userName: string;
+    navMenu: MenuProps$1[];
+    moreIcon?: any;
+    handleNavOnClick: (url: string) => void;
+    handleLogout: () => void;
+    logoutText: string;
+    navigationBarText?: {
+        text: string;
+        onIconClick?: () => void;
+    };
+};
+type MenuProps$1 = {
+    title: string;
+    url: string;
+    icon?: React.ReactNode;
+};
+
+declare function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, }: NavbarProps): React$1.JSX.Element;
+
+type NoteTextAreaProps = {
+    width: number | string;
+    handleSubmit: (noteValue: string, titleValue: string, file: File[], resetState: void) => void;
+    value?: string;
+    title?: string;
+    file?: File[];
+    isEditable?: boolean;
+    handleCancel?: (isActive: boolean) => void;
+    saveButtonLoading: boolean;
+    maxFileSize?: number;
+    maxFilesSizeError?: string;
+    maxNoteWordCount?: number;
+    onChange?: (value: string) => void;
+    ref?: LegacyRef<HTMLInputElement>;
+};
+
+declare function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref, }: NoteTextAreaProps): React$1.JSX.Element;
+
+type NumberInputProps = Pick<NumberInputProps$1, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel"> & {
+    NumberIncrementStepperBg?: string;
+    NumberIncrementStepperActive?: ActiveStyle;
+    NumberIncrementStepperChildren?: string;
+    NumberDecrementStepperBg?: string;
+    NumberDecrementStepperChildren?: string;
+    NumberDecrementStepperActive?: ActiveStyle;
+};
+type ActiveStyle = {
+    bg: string;
+};
+
+declare function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, }: NumberInputProps): React$1.JSX.Element;
+
+type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultValue" | "placeholder" | "manageFocus" | "errorBorderColor" | "focusBorderColor" | "onChange" | "onComplete"> & {
+    type?: "alphanumeric" | "number";
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "flushed" | "outline" | "filled" | "unstyled";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    pins: number;
+    label?: string;
+};
+
+declare function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, }: ChakraPinInputProps): React$1.JSX.Element;
+
+type ProfileCardProps = Pick<CardProps$1, "direction" | "maxW" | "align" | "justify" | "overflow"> & {
+    children: React.ReactNode;
+    variant?: "elevated" | "outlein" | "filled" | "unstyled";
+    size?: "sm" | "md" | "lg";
+    color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    dividercolor?: string;
+    dividersize?: string;
+    dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
+    CardStyle?: React.CSSProperties;
+    CardHeaderStyle?: React.CSSProperties;
+    CardBodyStyle?: React.CSSProperties;
+    borderTopColor?: boolean;
+    borderLeftColor?: boolean;
+};
+
+declare const ProfileCardHeader: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+declare const ProfileCardBody: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+declare const ProfileCardFooter: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+declare function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React$1.JSX.Element;
+
+type ProfilePhotoViewerProps = {
+    photoUrl: string;
+    onPhotoChange: (photoUrl: File) => void;
+    imageWidth?: string;
+    imageAlt?: string;
+    imageObjectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    imageBorderRadius?: string;
+    isEditable?: boolean;
+    editIconSize?: string;
+    editIconPositionRight?: string;
+    editIconPositionBottom?: string;
+    isRound?: boolean;
+    boxStyle?: React.CSSProperties;
+    isView?: boolean;
+    style?: React.CSSProperties;
+    handleIsView?: () => void;
+    fallbackText?: string;
+};
+
+declare function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, }: ProfilePhotoViewerProps): React$1.JSX.Element;
+
+type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min"> & {
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    size?: "lg" | "md" | "sm" | "xs";
+};
+
+declare function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, }: ProgressBarProps): React$1.JSX.Element;
+
+type ChakraRadioProps = Pick<RadioProps, "size" | "colorScheme" | "isChecked" | "onChange" | "isDisabled" | "value" | "defaultChecked"> & {
+    label: string;
+};
+type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
+    options: {
+        label: string;
+        id: string;
+    }[];
+    onChange?: (value: string) => void;
+};
+
+declare const RadioButton: ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, }: ChakraRadioProps) => React$1.JSX.Element;
+declare const RadioButtonGroup: ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, }: ChakraRadioGroupProps) => React$1.JSX.Element;
+
+interface ReorderItem {
+    id: string;
+    previewUrl: string;
+    name?: string;
+}
+interface ReorderListProps<T extends ReorderItem> {
+    label?: string;
+    items: T[];
+    onReorder: (items: T[]) => void;
+}
+
+declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, }: ReorderListProps<T>) => JSX.Element;
+
+type SearchProps = {
+    placeholder?: string;
+    onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    shortcut?: "Ctrl+K";
+    query?: string;
+    onclose: () => void;
+};
+
+declare function Search({ placeholder, onSearch, onclose, shortcut, query, }: SearchProps): React$1.JSX.Element;
+
+declare function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): React$1.JSX.Element;
+
+type SearchSelectProps = {
+    id?: string;
+    label?: string;
+    options: Options[];
+    onSelect?: (options: Options | Options[] | undefined) => void;
+    onSearch?: (value: string) => void;
+    isOptionLoading?: boolean;
+    isLoading?: boolean;
+    loadingText?: string;
+    placeholder?: string;
+    value?: Options[] | Options;
+    searchQuery?: string;
+    isMultiple?: boolean;
+    isRequired?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    width?: string | number;
+    height?: string | number;
+    size?: "xs" | "sm" | "md" | "lg";
+    chip?: {
+        maxChips?: number;
+        maxText?: number;
+        onClick?: (options: Options | Options[]) => void;
+    };
+    information?: {
+        isInformation?: boolean;
+        informationMessage?: string;
+    };
+    rightIcon?: {
+        icon?: React.ReactNode;
+        onClick?: () => void;
+    };
+    addNew?: {
+        enabled: boolean;
+        icon?: React.ReactNode;
+        text?: string;
+        onClick?: () => void;
+    };
+    isRemoveAllIcon?: boolean;
+    isSelectAll?: boolean;
+    pagination?: {
+        onScroll?: (startIndex: number, limit: number, query: string) => void;
+        limit?: number;
+        scrollLoading?: boolean;
+    };
+    virtualization?: boolean;
+    insideSelect?: {
+        onSelect?: (options: Options) => void;
+        value?: Options;
+        option?: Options[];
+        width?: string;
+    };
+};
+type Options = {
+    id: string | number;
+    label: string;
+    view?: React.ReactNode;
+};
+
+declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon }: SearchSelectProps) => React$1.JSX.Element;
+
+type SelectSearchProps = {
+    options: selectOptions[];
+    isSearchEnabled?: boolean;
+    initialSelectedOption?: selectOptions | null;
+    onOptionSelect?: (option: selectOptions) => void;
+    onOptionMultiSelect?: (option: selectOptions[]) => void;
+    inputOnchange: (value: string | number) => void;
+    id?: string;
+    name?: string;
+    label?: string;
+    inputStyle?: React.CSSProperties;
+    dropdownStyle?: React.CSSProperties;
+    boxStyle?: React.CSSProperties;
+    isOptionLoading?: boolean;
+    loadingText?: string;
+    placeholder?: string;
+    searchQuery: string | null;
+    isInformation?: boolean;
+    informationMessage?: string;
+    rightIcon?: React.ReactNode;
+    rightElementStyle?: {};
+    isMultipleSelect?: boolean;
+    isRequired?: boolean | undefined;
+    error?: boolean | undefined;
+    isProfile?: boolean | undefined;
+    isColorOptions?: boolean | undefined;
+    errorMessage?: string | undefined;
+    isBottomIcon?: boolean | undefined;
+    BottomIcon?: boolean | undefined | JSX.Element;
+    BottomIconStyle?: React.CSSProperties;
+    BottomText?: string | number;
+    BottomTextColor?: React.CSSProperties;
+    handleBottomClick?: () => void;
+};
+type selectOptions = {
+    id: string;
+    label: string;
+    email?: string;
+    profileUrl?: string;
+    color?: string;
+};
+
+declare function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, isProfile, isBottomIcon, errorMessage, BottomIcon, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }: Readonly<SelectSearchProps>): React$1.JSX.Element;
+
+type SidebarProps = {
+    menus: MenuProps[];
+    activeMenu: string;
+    handleMenuClick?: (menu: MenuProps) => void;
+    toggle: boolean;
+    changeToggle: () => void;
+    logo?: string;
+    companyName: string;
+    isDisableAddNew?: boolean;
+    onAddNewClick?: () => void;
+    selectedSubMenu?: string | null;
+};
+type MenuProps = {
+    id: string | number;
+    title: string;
+    icon: any;
+    url: string;
+    disabled?: boolean;
+    locked?: boolean;
+    badge?: string | number;
+    subMenu?: MenuProps[];
+};
+
+declare function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, }: SidebarProps): React$1.JSX.Element;
+
+type SkeletonProps = Pick<SkeletonProps$1, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
+    type: "skeleton" | "circle" | "text";
+} & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;
+
+declare function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): React$1.JSX.Element;
+
+type SwitchProps = {
+    leftText: string;
+    rightText: string;
+    leftIcon?: JSX.Element;
+    rightIcon?: JSX.Element;
+    onSwitchToggle: (value: "left" | "right") => void;
+    switchActive: "left" | "right";
+};
+
+declare function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }: SwitchProps): React$1.JSX.Element;
+
+type TableProps = {
+    data: DataObject[];
+    columns: TableHeaderProps[];
+    handleExportChange?: (value: string) => void | undefined;
+    exportOptions?: ExportOption[];
+    exportLabel?: string;
+    isLoading?: boolean;
+    isVisiblity?: boolean;
+    isCheckbox?: boolean;
+    headerBgColor?: string;
+    freezedBgColor?: string;
+    headerTextColor?: string;
+    freezedTextColor?: string;
+    tableBorderColor?: string;
+    noBorders?: boolean;
+    onSelection?: (selected: (string | number)[]) => void;
+    isPagination?: boolean;
+    selections?: (string | number)[];
+    onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
+    isActionFreeze?: boolean;
+    preferencesUrl?: string;
+    preferencesKey?: string;
+    preferencesName?: string;
+    preferencesPage?: string;
+    authToken?: string;
+    paginationMode?: "client" | "server";
+    noOfRowsPerPage?: number;
+    totalRecords?: number;
+    onPagination?: (page: number, noOfRecords: number) => void;
+    isTableSettings?: boolean;
+    headerActions?: HeaderActionsProps;
+};
+type HeaderActionsProps = {
+    isDelete?: {
+        enabled?: boolean;
+        onClick?: (selection: (string | number)[]) => void;
+    };
+    isUpdate?: {
+        enabled?: boolean;
+        onClick?: (selection: (string | number)[]) => void;
+    };
+    items?: {
+        icon: React.ReactElement;
+        name: string;
+        onClick?: (selection: (string | number)[]) => void;
+    }[];
+};
+type DataObject = {
+    [key: string]: string | number | any;
+};
+type TableHeaderProps = {
+    label: string | number;
+    id: string | number;
+    isSort?: boolean;
+    isSearch?: boolean;
+    isFreeze?: boolean;
+    isHidden?: boolean;
+    node?: (data: DataObject) => JSX.Element | string | number | undefined;
+};
+type ExportOption = {
+    label: string;
+    id: string;
+};
+
+declare function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, }: TableProps): React$1.JSX.Element;
+
+interface ChipProps {
+    label: string;
+    onIconClick?: () => void;
+    onTagClick?: () => void;
+    icon?: ElementType;
+    colorScheme?: "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    size?: "sm" | "md" | "lg";
+    variant?: "solid" | "outline";
+}
+declare const Tag: React$1.FC<ChipProps>;
+
+type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size" | "onKeyDown" | "onKeyUp" | "onMouseEnter" | "onMouseLeave"> & {
+    label?: string;
+    id?: string;
+    name?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    onRightIconclick?: () => void;
+    inputRightIcon?: any;
+    onLeftIconClick?: () => void;
+    inputLeftIcon?: any;
+    inputStyle?: {};
+    inputGroupStyle?: {};
+    isInformation?: boolean;
+    informationMessage?: string;
+    leftElementStyle?: {};
+    rightElementStyle?: {};
+    ref?: React.Ref<HTMLInputElement>;
+    autoComplete?: string;
+    minW?: string;
+    maxW?: string;
+};
+
+declare const _default: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>>;
+
+interface TimelineProps {
+    events?: TimelineEvent[];
+    timelineEvents: TimelineEvents[];
+    onEventClick?: (event: TimelineEvents, index: number) => void;
+}
+interface TimelineEvent {
+    title: string;
+    description: string;
+    time: string;
+}
+interface TimelineEvents {
+    logs_id: number;
+    title: string;
+    primary_id: number;
+    is_from: string;
+    action_from: string;
+    action_by: string;
+    created_at: number;
+    changes: any;
+}
+
+declare const Timeline: ({ timelineEvents }: TimelineProps) => React$1.JSX.Element;
+
+type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isClosable' | 'duration' | 'children' | 'onClose'> & {
+    position?: "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    status?: "success" | "error" | "warning" | "info" | "loading";
+};
+interface ToasterContextType {
+    showToast: (children: ToasterToastProps) => void;
+}
+interface ToasterChildren {
+    children: ReactNode;
+}
+
+declare function ToasterProvider({ children }: ToasterChildren): React$1.JSX.Element;
+declare const useToaster: () => ToasterContextType;
+
+type ToolTipProps = Pick<TooltipProps, "placement" | "label" | "hasArrow" | "fontSize" | "bg" | "color" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+    children: React.ReactNode;
+    styles?: React.CSSProperties;
+    placement: "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+};
+
+declare function ToolTip({ placement, label, children, hasArrow, fontSize, bg, color, isDisabled, isOpen, defaultIsOpen, openDelay, closeDelay, arrowSize, closeOnClick, size, width, height, arrowPadding, arrowShadowColor, direction, gutter, onClose, modifiers, closeOnPointerDown, styles, }: ToolTipProps): React$1.JSX.Element;
+
+type VerifyEmailOtpProps = {
+    resendMail: () => void;
+    onChange: (value: string) => void;
+    onComplete: (value: string) => void;
+    placeholder?: string;
+    pins: number;
+    title: string;
+    description: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    styles?: React.CSSProperties;
+};
+
+declare function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): React$1.JSX.Element;
+
+type ViewMode = "grid" | "list";
+type ViewToggleProps = {
+    value: ViewMode;
+    onChange: (val: ViewMode) => void;
+};
+
+declare const TableToggle: React$1.FC<ViewToggleProps>;
+
+type ProductCardProps = {
+    label: string;
+    description?: string;
+    productImage: productImage;
+    tags?: string[];
+    rating?: string | number;
+    reviews?: string | number;
+    options?: options[];
+    onClick?: () => void;
+    onAddToCart?: () => void;
+    bag?: bag;
+};
+type options = {
+    label: string;
+    weight: number;
+    price: number;
+    offer: number;
+};
+type bag = {
+    label: string;
+    color?: string;
+};
+type productImage = {
+    visibile: string;
+    hover?: string;
+};
+
+declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, onAddToCart, bag, description, }: ProductCardProps) => React$1.JSX.Element;
+
+declare const withTheme: (Component: React$1.ComponentType, theme?: any) => (props: any) => React$1.JSX.Element;
+
+type CustomThemeProps = {
+    colors: {
+        primary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            opacity: {
+                4: string;
+                8: string;
+                16: string;
+                24: string;
+                32: string;
+                40: string;
+                48: string;
+            };
+        };
+        secondary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            opacity: {
+                4: string;
+                8: string;
+                16: string;
+                24: string;
+                32: string;
+                40: string;
+                48: string;
+            };
+        };
+        tertiary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            opacity: {
+                4: string;
+                8: string;
+                16: string;
+                24: string;
+                32: string;
+                40: string;
+                48: string;
+            };
+        };
+        transparent: string;
+        black: string;
+        white: string;
+        semantic: {
+            success: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            error: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            warning: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            info: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+        };
+        gray: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        red: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        orange: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        yellow: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        green: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        teal: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        blue: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        cyan: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        purple: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        pink: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        background: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        text: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        header: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        placeholder: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        boxShadow: {
+            primary: string;
+            error: string;
+            default: string;
+        };
+        sidebar: {
+            background: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+        };
+        boxborder: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        border: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        table: {
+            hover: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+        };
+        disabled: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        backgroundColor: {
+            main: string;
+            secondary: string;
+            quaternary: string;
+            tertiary: string;
+            light: string;
+            medium: string;
+            accent: string;
+            subtle: string;
+            muted: string;
+            neutral: string;
+        };
+    };
+    fonts: Theme["fonts"] & {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+    lineHeights: {
+        normal: string;
+        none: number;
+        shorter: number;
+        short: number;
+        base: number;
+        tall: number;
+        taller: string;
+        [key: string]: string | number;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    space: {
+        [key: string]: string;
+    };
+    sizes: {
+        [key: string]: string | any;
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+    shadows: {
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        outline: string;
+        inner: string;
+        none: string;
+        darkLg: string;
+    };
+    radii: Theme["radii"] & {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        full: string;
+    };
+    zIndices: Theme["zIndices"] & {
+        hide: number;
+        auto: string;
+        base: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
+    };
+    config: {
+        cssVarPrefix: string;
+    };
+};
+
+declare const useCustomTheme: () => CustomThemeProps;
+
+declare const ThemesList: {
+    skyline: Record<string, any>;
+    meadow: Record<string, any>;
+    radiant: Record<string, any>;
+    lavender: Record<string, any>;
+};
+
+declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
+
+export { Accordion as Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, _default$1 as Button, ButtonGroupIcon, Card, CheckBox as Checkbox, ContactForm, CustomDatePicker as DatePicker, Drawer, DrawerBody, DrawerFooter, DrawerHeader, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, NavBar as NavigationBar, NoteTextArea, NumberInput, PinInputs as PinInput, ProductCard, ProfileCard, ProfileCardBody, ProfileCardFooter, ProfileCardHeader, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, ReorderList as Reorder, Search, SearchSelect, Select, SelectSearch, Sidebar as SideBar, Skeletons, Switch, Table, TableToggle, Tag, _default as TextInput, ThemesList, Timeline, ToasterProvider as Toaster, ToolTip, VerifyEmailOtp, debounce, withTheme as default, useCustomTheme, useToaster };