@hybr1d-tech/charizard 0.6.108 → 0.6.109

package/dist/index.d.ts

@@ -1 +1,2941 @@
-export * from './components/index'
+import { ActionMeta } from 'react-select';
+import { default as default_2 } from 'react';
+import * as dialog from '@zag-js/dialog';
+import { HTMLInputTypeAttribute } from 'react';
+import { Id } from 'react-toastify';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { Matcher } from 'react-day-picker';
+import { MenuPlacement } from 'react-select';
+import { MultiValue } from 'react-select';
+import { Placement } from '@zag-js/popper';
+import { Placement as Placement_2 } from '@popperjs/core';
+import { PositioningOptions } from '@zag-js/popper';
+import { Props } from 'react-select';
+import { PropsSingle } from 'react-day-picker';
+import * as React_2 from 'react';
+import { ReactElement } from 'react';
+import { SingleValue } from 'react-select';
+import { StoreApi } from 'zustand';
+import { StylesConfig } from 'react-select';
+import { ToastOptions } from 'react-toastify';
+import { UseBoundStore } from 'zustand';
+
+export declare function ActionsDropdown({ variant, disabled, menuItems, customData, size, positionerProps, isTable, children, customStyles, }: ActionsDropdownProps): JSX_2.Element;
+
+export declare interface ActionsDropdownProps {
+    variant?: BUTTON_V2_VARIANT;
+    disabled?: boolean;
+    menuItems: MenuItemV2[];
+    customData?: any;
+    size?: BUTTON_V2_SIZE;
+    positionerProps?: PositioningOptions;
+    isTable?: boolean;
+    children?: React_2.ReactNode;
+    customStyles?: {
+        customMenuStyles?: React_2.CSSProperties;
+        customButtonStyles?: React_2.CSSProperties;
+    };
+}
+
+export declare function Alert({ alertType, actionType, header, body }: AlertPropTypes): false | JSX_2.Element;
+
+export declare enum ALERT_ACTION_TYPES {
+    CLOSE = "close",
+    SHOW_MORE = "show-more"
+}
+
+export declare enum ALERT_TYPES {
+    DEFAULT = "default",
+    POSITIVE = "positive"
+}
+
+declare interface AlertPropTypes {
+    alertType: string;
+    actionType: string;
+    header: React_2.ReactNode;
+    body?: React_2.ReactNode;
+}
+
+export declare const alertTypeMap: {
+    [key: string]: {
+        bg: string;
+        color: string;
+        icon: string;
+    };
+};
+
+/**
+ * AsyncImage component that displays an image asynchronously.
+ * While the image is loading, it shows a skeleton loader.
+ *
+ * @param {Object} props - The image properties object.
+ * @param {string} props.src - The source URL of the image.
+ * @param {string} props.alt - The alt text for the image.
+ * @param {string} [props.className] - Additional CSS classes for styling the image and skelton.
+ * @param {React.ImgHTMLAttributes<HTMLImageElement>} props - Additional props for the img element.
+ * @returns {JSX.Element} The rendered component.
+ */
+export declare function AsyncImage({ src, alt, className, ...props }: ImageProps): JSX_2.Element;
+
+export declare function Avatar({ user, imageStyles }: AvatarProps): JSX_2.Element;
+
+declare interface AvatarProps {
+    user: any;
+    imageStyles?: React.CSSProperties;
+}
+
+export declare function Badge({ highlight, status, selected, children, icon, customSvgStyles, }: BadgeProps): JSX_2.Element;
+
+export declare enum BADGE_HIGHLIGHT {
+    ICON = "icon",
+    DOT = "dot",
+    NONE = "none"
+}
+
+export declare enum BADGE_STATUS {
+    DEFAULT = "default",
+    NEUTRAL = "neutral",
+    POSITIVE = "positive",
+    WARNING = "warning",
+    NEGATIVE = "negative",
+    HIGHLIGHT = "highlight"
+}
+
+declare interface BadgeProps {
+    highlight?: BADGE_HIGHLIGHT;
+    status?: BADGE_STATUS;
+    selected?: boolean;
+    children: React_2.ReactNode;
+    icon?: string;
+    customSvgStyles?: React_2.CSSProperties;
+}
+
+declare interface BaseButtonProps {
+    variant?: BUTTON_V2_VARIANT;
+    disabled?: boolean;
+    onClick?: React_2.MouseEventHandler<HTMLButtonElement>;
+    size?: BUTTON_V2_SIZE | 'xs' | 'sm' | 'md' | 'adapt';
+    customStyles?: React_2.CSSProperties;
+    btnType?: 'button' | 'reset' | 'submit';
+}
+
+/**
+ * Base props for input adornment components. It can be dropdown or non actionable
+ *
+ * @interface BaseInputAdornmentProps
+ *
+ * @property {React.ReactNode} children - The elements or text inside the adornment.
+ * @property {boolean} [disabled] - Whether the adornment is disabled.
+ */
+declare interface BaseInputAdornmentProps {
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+
+declare interface Breadcrumb {
+    label: string;
+    href?: string;
+    active?: boolean;
+}
+
+declare interface Breadcrumb_2 {
+    label: string;
+    href?: string;
+    active?: boolean;
+}
+
+export declare function Breadcrumbs(): JSX_2.Element;
+
+declare interface BreadcrumbsStore {
+    breadcrumbs: Breadcrumb[];
+    setBreadcrumbs: (breadcrumbs: Breadcrumb[]) => void;
+}
+
+export declare function Button({ children, variant, disabled, onClick, type, size, customStyles, }: ButtonProps): JSX_2.Element;
+
+export declare namespace Button {
+    var MenuButton: ({ children, variant, disabled, menuItems, onClick, isCustomTrigger, isSingleBtnTrigger, customData, size, actionsDropdownOptions, positionerProps, isTable, }: MenuButtonProps) => JSX_2.Element;
+    var ActionsDropdown: typeof MenuActionsDropdown;
+}
+
+export declare enum BUTTON_V2_SIZE {
+    SMALL = "small",
+    DEFAULT = "default"
+}
+
+export declare enum BUTTON_V2_TYPE {
+    BASIC = "basic",
+    ICON_LEFT = "iconLeft",
+    ICON_RIGHT = "iconRight",
+    ICON_ONLY = "iconOnly",
+    BUTTON = "button",
+    RESET = "reset"
+}
+
+export declare enum BUTTON_V2_VARIANT {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    GHOST = "tertiary",
+    DANGER = "primary",
+    LINK = "link",
+    MINIMAL = "tertiary"
+}
+
+export declare enum BUTTON_VARIANT {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    GHOST = "ghost",
+    DANGER = "danger",
+    LINK = "link",
+    MINIMAL = "minimal"
+}
+
+export declare type ButtonProps = {
+    children: React_2.ReactNode;
+    variant?: BUTTON_VARIANT;
+    disabled?: boolean;
+    onClick?: React_2.MouseEventHandler<HTMLButtonElement>;
+    type?: 'button' | 'submit' | 'reset';
+    size?: 'xs' | 'sm' | 'md' | 'adapt';
+    customStyles?: React_2.CSSProperties;
+};
+
+export declare function ButtonV2({ children, variant, disabled, onClick, type, size, customStyles, icon, btnType, }: ButtonV2Props): JSX_2.Element;
+
+export declare namespace ButtonV2 {
+    var GroupAction: ({ children, variant, disabled, menuItems, customData, size, actionsDropdownOptions, positionerProps, isTable, isCustomTrigger, customStyles, onClick, isSingleBtnTrigger, }: GroupActionProps) => JSX_2.Element;
+    var ActionsDropdown: ActionsDropdown;
+}
+
+export declare type ButtonV2Props = IconOnlyButtonV2TypeProps | IconButtonV2TypeProps | OtherButtonV2TypeProps;
+
+export declare function Checkbox({ id, name, children, onChange, customClasses, customStyles, errorMsg, checked, indeterminate, disabled, }: CheckboxProps): JSX_2.Element;
+
+declare interface CheckboxProps {
+    /**
+     * Checkbox id
+     */
+    id: string;
+    /**
+     * Checkbox name
+     */
+    name: string;
+    /**
+     * children
+     */
+    children: React.ReactNode;
+    /**
+     * handle checkbox clicked
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * custom classes
+     */
+    customClasses?: string;
+    /**
+     * custom styles
+     */
+    customStyles?: React.CSSProperties;
+    /**
+     * error message
+     */
+    errorMsg?: string;
+    /**
+     * Checkbox checked
+     */
+    checked?: boolean;
+    /**
+     * Checkbox indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Checkbox disabled
+     */
+    disabled?: boolean;
+}
+
+declare interface CheckboxProps_2 {
+    label: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+export declare const CheckboxV2: React_2.FC<CheckboxProps_2>;
+
+export declare function ColorPicker({ name, label, errorMsg, required, onChange, defaultColor, }: ColorPickerProps): JSX_2.Element;
+
+declare interface ColorPickerProps {
+    name: string;
+    label?: string;
+    errorMsg?: string | false;
+    required?: boolean;
+    onChange: (color: string) => void;
+    defaultColor?: string;
+}
+
+export declare function CreatableSelect({ options, onChange, name, id, className, placeholder, selectStyles, defaultValue, formatGroupLabel, customContainerStyles, menuPlacement, errorMsg, extraprops, isDisabled, isSearchable, isMulti, isClearable, createNewOption, refetchOptions, }: CreatableSelectProps): JSX_2.Element;
+
+declare interface CreatableSelectProps {
+    /**
+     * The options to be displayed in the select
+     * should atleast have {label: string, value: string}
+     */
+    options: Array<{
+        label: string | '';
+        value: string | '';
+        profileImgUrl?: string;
+    }> | any;
+    /**
+     * Handle change events on the select
+     */
+    onChange: (newValue: string | string[], actionMeta: SelectActionMeta_2) => void;
+    /**
+     * The name of the select
+     */
+    name?: string;
+    /**
+     * The id of the select
+     */
+    id?: string;
+    /**
+     * The className of the select
+     */
+    className?: string;
+    /**
+     * The placeholder of the select
+     */
+    placeholder?: string;
+    /**
+     * Whether the select is searchable
+     */
+    isSearchable?: boolean;
+    /**
+     * Whether multiple selection is possible
+     */
+    isMulti?: boolean;
+    /**
+     * Whether the select is clearable
+     */
+    isClearable?: boolean;
+    /**
+     * The styles of the select component
+     */
+    selectStyles?: StylesConfig<any>;
+    /**
+     * The default value of the select
+     */
+    defaultValue?: {
+        label: string;
+        value: string;
+        profileImgUrl?: string;
+    };
+    /**
+     * Formats group labels in the menu as React components
+     */
+    formatGroupLabel?: (data: any) => React_2.ReactNode;
+    /**
+     * The custom styles of the select container
+     */
+    customContainerStyles?: React_2.CSSProperties;
+    /**
+     * Whether the select is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.
+     */
+    menuPlacement?: MenuPlacement;
+    /**
+     * The error message to be displayed
+     */
+    errorMsg?: string | false;
+    /**
+     * extra props to pass for select component
+     */
+    extraprops?: any;
+    /**
+     * create new option api mutate function
+     */
+    createNewOption: (value: string | string[]) => Promise<OptionType | Array<OptionType>>;
+    /**
+     * refetch options to show options in dropdown
+     */
+    refetchOptions?: Function;
+}
+
+/**
+ * A custom select component based on react-select.
+ * @param props - The properties for the SelectV2 component:
+ *   - `options` (Array<Option>): An array of options to be displayed in the dropdown. Each option can include a label, value, and optional profile image or icon.
+ *   - `mainContainerClassName` (string, optional): A custom CSS class name to apply to the main container for additional styling.
+ *   - `variant` (SELECT_VARIANT, optional): Defines the variant of the select component (e.g., 'default', 'users', 'checkbox', 'tags') to control the styling and behavior.
+ *   - `errorMsg` (string, optional): An error message to display below the select component for validation purposes.
+ *   - `onChange` (function): A callback function that is triggered when the selected value(s) change. It receives the selected value(s) and action meta information.
+ *   - `customStyles` (StylesConfig<any>): custom styles for react select. it will override default styles
+ *   - `onCreateOption` (Promise<void> | void): function to create new option which is not in the list
+ * @returns The SelectV2 component.
+ */
+export declare function CreatableSelectV2(props: CreatableSelectV2Props): JSX_2.Element;
+
+export declare interface CreatableSelectV2Props extends SelectV2Props {
+    onCreateOption: (value: string) => Promise<void> | void;
+}
+
+export declare function DatePicker({ value, onChange, mode, variant, displayDateFormat, errorMsg, disableDatepicker, disabled, buttonVariant, customContainerStyles, popoverConfig, isError, showOutsideDays, ...props }: DatePickerProps): JSX_2.Element;
+
+declare interface DatePickerProps extends PropsSingle {
+    value?: Date | string;
+    onChange: (value?: Date | string) => void;
+    mode: 'single';
+    variant?: 'default' | 'form';
+    /**
+     * @default 'do LLL y'
+     * 'do LLL y' => 1st Jan 2021
+     * 'dd LLL y' => 01 Jan 2021
+     * 'yyyy-MM-dd' => 2021-01-01
+     * 'dd/MM/yyyy' => 01/01/2021
+     */
+    displayDateFormat?: 'do LLL y' | 'dd LLL y' | 'yyyy-MM-dd' | 'dd/MM/yyyy';
+    disableDatepicker?: boolean;
+    errorMsg?: string;
+    isError?: boolean;
+    buttonVariant?: BUTTON_VARIANT;
+    customContainerStyles?: React_2.CSSProperties;
+    popoverConfig?: {
+        placement?: Placement_2;
+    };
+    showOutsideDays?: boolean;
+    disabled?: Matcher | Matcher[];
+}
+
+declare enum DOCS_TYPE {
+    USER_DOCS = "user_document",
+    COMPANY_DOCS = "company_document",
+    IDENTIFICATION_DOC = "identification_document",
+    COMMENT_DOCS = "comment_document",
+    ORDER_DOC = "order_document",
+    SOFTWARE_DOCS = "software_document",
+    SOFTWARE_LOGO = "software_logo",
+    INVENTORY_DOCS = "inventory_document",
+    INVENTORY_DOCS_EQUIPMENT = "equipment",
+    INVENTORY_DOCS_FINANCE = "finance",
+    USER_OFFBOARDING_DOCS = "user_offboarding_document",
+    LEAVE_DOCS = "leave_document",
+    INTEGRATION_DOCS = "integration_document"
+}
+
+export declare function Drawer({ isOpen, onClose, children, title, subTitle, customHeader, customFooter, size, showBackdrop, showHeader, showFooter, buttons, footerAddon, headerClassName, contentClassName, footerClassName, showHeaderBorder, drawerPosition, customContainerStyles, }: DrawerProps): JSX_2.Element;
+
+export declare type DrawerFooterButtons = Array<{
+    variant?: BUTTON_V2_VARIANT;
+    onClick: () => void;
+    btnText: string;
+    btnType?: 'button' | 'submit' | 'reset';
+    btnSize?: BUTTON_V2_SIZE;
+    disabled?: boolean;
+    isLoading?: boolean;
+    loadingText?: string;
+    type?: BUTTON_V2_TYPE;
+}>;
+
+declare interface DrawerProps {
+    /**
+     * Drawer footer className
+     */
+    footerClassName?: string;
+    /**
+     * Drawer header className
+     */
+    headerClassName?: string;
+    /**
+     * Drawer content className
+     */
+    contentClassName?: string;
+    /**
+     * Drawer is open or not
+     */
+    isOpen: boolean;
+    /**
+     * Callback function when drawer is closed
+     */
+    onClose: () => void;
+    /**
+     * Drawer content
+     */
+    children: React_2.ReactNode;
+    /**
+     * Drawer title
+     */
+    title?: string;
+    /**
+     * Drawer subTitle
+     */
+    subTitle?: string;
+    /**
+     * Custom drawer header
+     */
+    customHeader?: React_2.ReactNode;
+    /**
+     * Custom drawer footer
+     */
+    customFooter?: React_2.ReactNode;
+    /**
+     * Drawer size
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
+    /**
+     * Show backdrop or not
+     */
+    showBackdrop?: boolean;
+    /**
+     * Show header or not
+     */
+    showHeader?: boolean;
+    /**
+     * Show footer or not
+     */
+    showFooter?: boolean;
+    /**
+     * footer buttons to show
+     */
+    buttons?: FooterButtons;
+    footerAddon?: React_2.ReactNode;
+    /**
+     * show header border or not
+     */
+    showHeaderBorder?: boolean;
+    /**
+     * Drawer position
+     */
+    drawerPosition?: 'left' | 'right';
+    customContainerStyles?: React_2.CSSProperties;
+}
+
+declare interface DrawerProps_2 {
+    /**
+     * Drawer footer className
+     */
+    footerClassName?: string;
+    /**
+     * Drawer header className
+     */
+    headerClassName?: string;
+    /**
+     * Drawer content className
+     */
+    contentClassName?: string;
+    /**
+     * Drawer is open or not
+     */
+    isOpen: boolean;
+    /**
+     * Callback function when drawer is closed
+     */
+    onClose: () => void;
+    /**
+     * Drawer content
+     */
+    children: React_2.ReactNode;
+    /**
+     * Drawer title
+     */
+    title?: string;
+    /**
+     * Drawer subTitle
+     */
+    subTitle?: string;
+    /**
+     * Custom drawer header
+     */
+    customHeader?: React_2.ReactNode;
+    /**
+     * Custom drawer footer
+     */
+    customFooter?: React_2.ReactNode;
+    /**
+     * Drawer size
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
+    /**
+     * Show backdrop or not
+     */
+    showBackdrop?: boolean;
+    /**
+     * Show header or not
+     */
+    showHeader?: boolean;
+    /**
+     * Show footer or not
+     */
+    showFooter?: boolean;
+    /**
+     * footer buttons to show
+     */
+    buttons?: DrawerFooterButtons;
+    footerAddon?: React_2.ReactNode;
+    /**
+     * Drawer position
+     */
+    drawerPosition?: 'left' | 'right';
+    customContainerStyles?: React_2.CSSProperties;
+}
+
+export declare function DrawerV2({ isOpen, onClose, children, title, subTitle, customHeader, customFooter, size, showBackdrop, showHeader, showFooter, buttons, footerAddon, headerClassName, contentClassName, footerClassName, drawerPosition, customContainerStyles, }: DrawerProps_2): JSX_2.Element;
+
+/**
+ * Represents an option in a dropdown menu for adornment.
+ *
+ * @interface DropdownOption
+ *
+ * @property {string} value - The value associated with the dropdown option.
+ * @property {string} label - The label displayed for the dropdown option.
+ *
+ * @example
+ * const options: DropdownOption[] = [
+ *   { value: '1', label: 'Option 1' },
+ *   { value: '2', label: 'Option 2' },
+ * ];
+ */
+declare interface DropdownOption {
+    value: string;
+    label: string;
+}
+
+/**
+ * Props for a dropdown adornment.
+ *
+ * @interface DropdownProps
+ * @extends {BaseInputAdornmentProps}
+ *
+ * @property {true} isDropdown - Indicates this adornment is a dropdown.
+ * @property {DropdownOption[]} options - List of options available in the dropdown.
+ * @property {(value: string) => void} onOptionSelect - Callback function when an option is selected.
+ * @property {boolean} [hideSearch] - Whether to hide the search bar within the dropdown.
+ * @property {boolean} [isLoading] - Whether the dropdown is currently loading options.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputLeftAdornment isDropdown options={options} onOptionSelect={handleSelect}>...</InputLeftAdornment>
+ *   <InputV2 />
+ * </InputGroupV2>
+ */
+declare interface DropdownProps extends BaseInputAdornmentProps {
+    isDropdown: true;
+    options: DropdownOption[];
+    onOptionSelect: (value: string) => void;
+    hideSearch?: boolean;
+    isLoading?: boolean;
+}
+
+/**
+ * adapts to parent's width and height
+ */
+export declare function EmptyState({ icon, title, desc, flexDir, btnText, onClick, customSvgClassName, }: EmptyStateProps): JSX_2.Element;
+
+declare interface EmptyStateProps {
+    icon: string;
+    title: string;
+    desc?: string;
+    flexDir?: 'row' | 'column';
+    btnText?: string;
+    onClick?: React_2.MouseEventHandler<HTMLButtonElement>;
+    customSvgStyles?: React_2.CSSProperties;
+    customSvgClassName?: string;
+}
+
+declare interface FileType {
+    details: {
+        ext: string;
+        key: string;
+        type: string;
+        file_name: string;
+        icon?: string;
+    };
+    doc_link: string;
+    file_name: string;
+}
+
+/**
+ * @param filters comes from an api, must follow the type definition strictly
+ * @param isLoading is fetching from api
+ * @param isError api threw error
+ * @param filterDispatch must be of @type (value) => dispatch({type,payload})
+ * this is used to sync the internal table filter state with the external zustand store of the consumer
+ * @param filterReset same type as above but is used to reset all the filters
+ *
+ *
+ */
+declare type FilterConfig = {
+    filters: FilterOptions[];
+    isLoading: boolean;
+    isError: boolean;
+    filterDispatch: (value: any) => void;
+    filterReset: (value: any) => void;
+};
+
+/**
+ * @param filters comes from an api, must follow the type definition strictly
+ * @param isLoading is fetching from api
+ * @param isError api threw error
+ * @param filterDispatch must be of @type (value) => dispatch({type,payload})
+ * this is used to sync the internal table filter state with the external zustand store of the consumer
+ * @param filterReset same type as above but is used to reset all the filters
+ * @param headerFilterIds this is used for the filters which should be in the table header itself, and not inside the filters drawer
+ *
+ *
+ */
+declare type FilterConfig_2 = {
+    filters?: TableFilters;
+    isLoading: boolean;
+    isError: boolean;
+    filterDispatch: (value: any) => void;
+    filterReset: (value: any) => void;
+    headerFilterIds?: string[];
+};
+
+declare type FilterOptions = {
+    id: string;
+    name: string;
+    key: string;
+    options: {
+        name: string;
+        value: string;
+        country_code?: string;
+        customName?: string;
+    }[];
+    config?: {
+        hideSearch?: boolean;
+        placeholder?: string;
+    };
+};
+
+declare type FilterOptions_2 = {
+    id: string;
+    name: string;
+    key: string;
+    options: {
+        name: string;
+        value: string;
+        country_code?: string;
+        customName?: string;
+    }[];
+    config?: {
+        hideSearch?: boolean;
+        placeholder?: string;
+        type?: string;
+    };
+};
+
+declare type FooterButtons = Array<{
+    variant?: BUTTON_VARIANT | BUTTON_V2_VARIANT;
+    onClick: () => void;
+    btnText: string;
+    btnType?: BUTTON_V2_TYPE | 'submit';
+    btnSize?: BUTTON_V2_SIZE;
+    disabled?: boolean;
+    isLoading?: boolean;
+    loadingText?: string;
+    icon?: string;
+}>;
+
+export declare const getProductIconFromType: (type?: string) => string;
+
+export declare interface GroupActionProps {
+    children: React_2.ReactNode;
+    variant?: BUTTON_V2_VARIANT;
+    disabled?: boolean;
+    menuItems: MenuItemV2[];
+    customData?: any;
+    size?: BUTTON_V2_SIZE;
+    actionsDropdownOptions?: {
+        setIsActive: React_2.Dispatch<React_2.SetStateAction<boolean>>;
+    };
+    positionerProps?: PositioningOptions;
+    isTable?: boolean;
+    customStyles?: {
+        customMenuStyles?: React_2.CSSProperties;
+        customButtonStyles?: React_2.CSSProperties;
+    };
+    onClick?: any;
+    isCustomTrigger?: boolean;
+    isSingleBtnTrigger?: boolean;
+}
+
+declare interface IconButtonV2TypeProps extends BaseButtonProps {
+    type: BUTTON_V2_TYPE.ICON_LEFT | BUTTON_V2_TYPE.ICON_RIGHT;
+    icon: React_2.ReactNode;
+    children: React_2.ReactNode;
+}
+
+declare interface IconOnlyButtonV2TypeProps extends BaseButtonProps {
+    type: BUTTON_V2_TYPE.ICON_ONLY;
+    icon: React_2.ReactNode;
+    children?: React_2.ReactNode;
+}
+
+declare interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    alt: string;
+}
+
+export declare function Input({ customClasses, customStyles, name, id, value, onChange, restprops, cols, errorMsg, disabled, rows, type, placeholder, onBlur, }: InputProps): JSX_2.Element;
+
+export declare namespace Input {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+
+/**
+ * Enum representing the different components within the input system.
+ * This can be used to identify and manage the different subcomponents
+ * of a more complex and nested input structure.
+ */
+declare enum INPUT_COMPONENTS {
+    INPUT = "input",
+    TEXTAREA = "textarea",
+    CONTROL = "control",
+    LABEL = "label",
+    GROUP = "group",
+    LEFT_ICON = "leftIcon",
+    RIGHT_ICON = "rightIcon",
+    LEFT_ADORNMENT = "leftAdornment",
+    RIGHT_ADORNMENT = "rightAdornment",
+    COUNT = "count",
+    NUMBER = "number",
+    NUMBER_ADORNMENT = "numberAdornment"
+}
+
+/**
+ * Type representing the possible props for input adornments, which can either be a dropdown or non actionable.
+ */
+declare type InputAdornmentProps = DropdownProps | NonDropdownProps;
+
+export declare function InputContainer({ children, customClassName, customStyles, size, }: InputContainerProps): JSX_2.Element;
+
+export declare namespace InputContainer {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+
+declare interface InputContainerProps {
+    /**
+     * Children of the input container
+     */
+    children: React.ReactNode;
+    /**
+     * Size of the input container
+     */
+    size?: 'sm' | 'md' | 'adapt';
+    /**
+     * Custom classes to be applied to the input container
+     */
+    customClassName?: string;
+    /**
+     * Custom styles to be applied to the input container
+     */
+    customStyles?: React.CSSProperties;
+}
+
+/**
+ * Props for the InputControl component, used as a wrapper to group multiple input-related components.
+ *
+ * @interface InputControlPropsV2
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ *
+ * @property {React.ReactNode} children - The elements that will be rendered inside the control.
+ *
+ * @example
+ * <InputControlV2>
+ *   <LabelV2>Username</LabelV2>
+ *   <InputV2
+ *   placeholder="Enter"
+ *   errorMsg="This field is required"
+ *  />
+ * </InputControlV2>
+ */
+declare interface InputControlPropsV2 extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+
+/**
+ * InputControlV2 is a wrapper component that provides a container for form control elements.
+ * It applies consistent styling to its children, typically used for grouping form elements like
+ * labels, inputs, and additional controls.
+ *
+ * @param {InputControlPropsV2} props - The properties for the InputControlV2 component.
+ * @param {string} [props.className=''] - Additional class names to apply to the control container.
+ * @param {React.ReactNode} props.children - The content to be rendered within the control container.
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props] - Additional HTML attributes to apply to the control container.
+ *
+ * @returns {JSX.Element} The rendered control container with the specified children.
+ *
+ * @example
+ * <InputControlV2>
+ *   <LabelV2>Username</LabelV2>
+ *   <InputV2
+ *   placeholder="Enter"
+ *   errorMsg="This field is required"
+ *  />
+ * </InputControlV2>
+ */
+export declare function InputControlV2({ className, children, ...props }: InputControlPropsV2): JSX_2.Element;
+
+export declare namespace InputControlV2 {
+    var displayName: INPUT_COMPONENTS;
+}
+
+/**
+ * InputCount is a specialized input component that allows users to increment
+ * or decrement a numeric value within a specified range. It includes buttons
+ * for incrementing and decrementing the value, and supports keyboard input for
+ * adjusting the count.
+ *
+ * @param {InputCountProps} props - The properties for the InputCount component.
+ * @param {(value: number) => void} props.onCountChange - Callback function called when the count value changes.
+ * @param {number} [props.min=-Infinity] - The minimum value that the count can be set to.
+ * @param {number} [props.max=Infinity] - The maximum value that the count can be set to.
+ * @param {number} [props.count=0] - The current count value.
+ * @param {string} [props.countContainerClassName] - Additional class names to apply to the container.
+ * @param {boolean} [props.disabled] - Whether the input is disabled.
+ * @param {React.InputHTMLAttributes<HTMLInputElement>} [props] - Additional HTML input attributes.
+ *
+ * @returns {JSX.Element} The rendered InputCount component.
+ *
+ * @example
+ * <InputCount
+ *   onCountChange={(value) => console.log(value)}
+ *   min={0}
+ *   max={10}
+ *   count={5}
+ *   disabled={false}
+ * />
+ */
+export declare function InputCount({ onCountChange, min, max, count, countContainerClassName, disabled, ...props }: InputCountProps): JSX_2.Element;
+
+export declare namespace InputCount {
+    var displayName: INPUT_COMPONENTS;
+}
+
+/**
+ * Props for an input field which can be use as counter i.e. product count.
+ *
+ * @interface InputCountProps
+ * @extends {InputV2Props}
+ *
+ * @property {(value: number) => void} onCountChange - Callback when the count changes.
+ * @property {never} [onChange] - `onChange` is disabled for this component; use `onCountChange`.
+ * @property {number} [min] - Minimum allowable value for the count (by default Infinity).
+ * @property {number} [max] - Maximum allowable value for the count (by default Infinity).
+ * @property {number} [count] - Current count value (enable for two way binding).
+ * @property {string} [countContainerClassName] - Additional className for the count container.
+ *
+ * @example
+ * <InputCount onCountChange={(value) => ...} count={10} min={0} max={100} />
+ */
+declare interface InputCountProps extends InputV2Props {
+    onCountChange: (value: number) => void;
+    onChange?: never;
+    min?: number;
+    max?: number;
+    count?: number;
+    countContainerClassName?: string;
+}
+
+declare interface InputDirectionAddonProps {
+    /**
+     * Children of the input addon
+     */
+    children: React_2.ReactNode;
+    /**
+     * to enable dropdown or not
+     */
+    isDropdown?: boolean;
+    /**
+     * dropdown options
+     */
+    dropdownOptions?: Array<{
+        label: string;
+        value: string;
+    }>;
+    /**
+     * handle dropdown option click
+     */
+    handleOptionClick?: (selectedOption: {
+        label: string;
+        value: string;
+    }) => void;
+    /**
+     * show dropdown search
+     */
+    showDropdownSearch?: boolean;
+}
+
+declare interface InputDirectionElementProps {
+    /**
+     * Children of the input element
+     */
+    children: React.ReactNode;
+}
+
+export declare function InputGroup({ children }: InputGroupProps): JSX_2.Element;
+
+export declare namespace InputGroup {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+
+declare interface InputGroupProps {
+    /**
+     * Children of the input group
+     */
+    children: React_2.ReactNode;
+}
+
+/**
+ * Props for the InputGroup component, which groups input icons and adornments elements together.
+ *
+ * @interface InputGroupPropsV2
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ *
+ * @property {React.ReactNode} children - The elements to be grouped together.
+ *
+ * @example
+ * <InputGroupV2>
+ *   <InputLeftAdornment>+</InputLeftAdornment>
+ *   <InputV2 />
+ *   <InputRightAdornment>-</InputRightAdornment>
+ * </InputGroupV2>
+ * @example
+ * with label
+ * <InputControlV2>
+ *   <LabelV2>Username</LabelV2>
+ *   <InputGroupV2>
+ *     <InputLeftAdornment>+</InputLeftAdornment>
+ *     <InputV2 />
+ *     <InputRightAdornment>-</InputRightAdornment>
+ *   </InputGroupV2>
+ * </InputControlV2>
+ */
+declare interface InputGroupPropsV2 extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+
+export declare function InputGroupV2({ className, children, ...props }: InputGroupPropsV2): JSX_2.Element;
+
+export declare namespace InputGroupV2 {
+    var displayName: INPUT_COMPONENTS;
+}
+
+/**
+ * Props for the InputIcon component, which is used to display an icon within an input field. It can be left, right or both.
+ *
+ * @interface InputIconProps
+ *
+ * @property {string} icon - The icon to display.
+ * @property {() => void} [onClick] - Optional click handler for the icon.
+ * @property {never} [iconStyles] - Used for internal styling when grouping it with multiple components. use className for styling icon if clickable.
+ * @property {boolean} [disabled] - Whether the icon should be disabled with input.
+ * @property {string} [className] - Additional classNames for the icon if it is clickable.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputLeftIcon icon={...} />
+ *   <InputV2 />
+ *   <InputRightIcon icon={...} />
+ * </InputGroupV2>
+ */
+declare interface InputIconProps {
+    icon: string;
+    onClick?: () => void;
+    iconStyles?: never;
+    disabled?: boolean;
+    className?: string;
+}
+
+export declare function InputLabel({ children, customClasses, customStyles, required, htmlFor, restprops, infoText, infoTextTooltipStyles, isDisabled, }: InputLabelProps): JSX_2.Element;
+
+export declare namespace InputLabel {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+
+declare interface InputLabelProps {
+    /**
+     * Children of the input label
+     */
+    children: React_2.ReactNode;
+    /**
+     * Custom classes to be applied to the input label
+     */
+    customClasses?: string[] | string;
+    /**
+     * Custom styles to be applied to the input label
+     */
+    customStyles?: Record<string, string>;
+    /**
+     * Whether the input is required
+     */
+    required?: boolean;
+    /**
+     * htmlFor attribute of the input label
+     */
+    htmlFor?: string;
+    /**
+     * Rest props to be applied to the input label
+     */
+    restprops?: any;
+    /**
+     * info text
+     */
+    infoText?: string;
+    /**
+     * info text tooltip styles
+     */
+    infoTextTooltipStyles?: React_2.CSSProperties;
+    /**
+     * Disabled state when component inactive
+     */
+    isDisabled?: boolean;
+}
+
+export declare function InputLeftAddon({ children, isDropdown, dropdownOptions, handleOptionClick, showDropdownSearch, }: InputDirectionAddonProps): JSX_2.Element;
+
+export declare namespace InputLeftAddon {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+
+/**
+ * Component for rendering an adornment on the left side of an input.
+ * It can either display static content or function as a dropdown trigger.
+ *
+ * @param {InputAdornmentProps} props - The properties for the InputLeftAdornment component.
+ * @param {React.ReactNode} props.children - The content to display inside the adornment.
+ * @param {boolean} [props.isLoading=false] - Indicates if the dropdown is in a loading state.
+ * @param {boolean} [props.disabled] - Whether the adornment is disabled.
+ * @param {boolean} [props.isDropdown] - Whether the adornment is a dropdown trigger.
+ * @param {DropdownOption[]} [props.options] - Options to display in the dropdown.
+ * @param {boolean} [props.hideSearch=false] - Whether to hide the search input in the dropdown.
+ * @param {(value: string) => void} [props.onOptionSelect] - Callback for when an option is selected.
+ *
+ * @returns {JSX.Element} The left adornment for an input field.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputV2 />
+ *   <InputLeftAdornment>...</InputLeftAdornment>
+ * </InputGroupV2>
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputLeftAdornment isDropdown options={options} onOptionSelect={handleSelect}>...</InputLeftAdornment>
+ *   <InputV2 />
+ * </InputGroupV2>
+ */
+export declare function InputLeftAdornment({ children, isLoading, disabled, isDropdown, options, hideSearch, onOptionSelect, }: InputAdornmentProps): JSX_2.Element;
+
+export declare namespace InputLeftAdornment {
+    var displayName: INPUT_COMPONENTS;
+}
+
+export declare function InputLeftElement({ children }: InputDirectionElementProps): JSX_2.Element;
+
+export declare namespace InputLeftElement {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+
+/**
+ * InputLeftIcon renders an icon on the left side of an input field.
+ * If `onClick` is provided, the icon is rendered as a button.
+ *
+ * @param {InputIconProps} props - The properties for the InputLeftIcon component.
+ * @param {string} props.icon - The SVG path for the icon to display.
+ * @param {() => void} [props.onClick] - Optional click handler for the icon. When provided, the icon is rendered as a button.
+ * @param {React.CSSProperties} [props.iconStyles] - Optional inline styles to apply to the icon.
+ * @param {boolean} [props.disabled=false] - Whether the icon or button is disabled.
+ * @param {string} [props.className] - Additional class names to apply to the icon container.
+ *
+ * @returns {JSX.Element} The rendered InputLeftIcon component.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputLeftIcon icon={...} />
+ *   <InputV2 />
+ * </InputGroupV2>
+ */
+export declare function InputLeftIcon({ icon, onClick, iconStyles, disabled, className, }: InputIconProps): JSX_2.Element;
+
+export declare namespace InputLeftIcon {
+    var displayName: INPUT_COMPONENTS;
+}
+
+/**
+ * InputNumber is a numeric input component with increment and decrement controls.
+ * It ensures that the value stays within the specified min and max bounds.
+ *
+ * @param {InputNumberProps} props - The properties for the InputNumber component.
+ * @param {(value: number) => void} props.onCountChange - Callback function that is called when the numeric value changes.
+ * @param {number} [props.min=-Infinity] - The minimum value allowed.
+ * @param {number} [props.max=Infinity] - The maximum value allowed.
+ * @param {number} [props.count=0] - The initial value of the input.
+ * @param {string} [props.countContainerClassName] - Additional class names for the container of the numeric input.
+ * @param {boolean} [props.disabled=false] - Whether the input and controls are disabled.
+ * @param {React.InputHTMLAttributes<HTMLInputElement>} props - Additional props are passed to the underlying input component.
+ *
+ * @returns {JSX.Element} The rendered InputNumber component.
+ *
+ * @example
+ * <InputNumber onCountChange={(value) => ...)} count={5} min={0} max={10} />
+ */
+export declare function InputNumber({ onCountChange, min, max, count, countContainerClassName, disabled, ...props }: InputNumberProps): JSX_2.Element;
+
+export declare namespace InputNumber {
+    var displayName: INPUT_COMPONENTS;
+}
+
+/**
+ * Props for an input field designed to accept numeric values.
+ *
+ * @interface InputNumberProps
+ * @extends {InputV2Props}
+ *
+ * @property {(value: number) => void} onCountChange - Callback when the numeric value changes.
+ * @property {never} [onChange] - `onChange` is disabled for this component; use `onCountChange`.
+ * @property {number} [min] - Minimum allowable value for the input (by default Infinity)
+ * @property {number} [max] - Maximum allowable value for the input (by default Infinity)
+ * @property {number} [count] - Current numeric value (enable for two way binding).
+ * @property {string} [countContainerClassName] -Additional className for the count container.
+ *
+ * @example
+ * <InputNumber onCountChange={(value) => ...)} count={5} min={0} max={10} />
+ */
+declare interface InputNumberProps extends InputV2Props {
+    onCountChange: (value: number) => void;
+    onChange?: never;
+    min?: number;
+    max?: number;
+    count?: number;
+    countContainerClassName?: string;
+}
+
+declare interface InputProps {
+    /**
+     * Custom classes to be applied to the input
+     */
+    customClasses?: string[] | string;
+    /**
+     * Custom styles to be applied to the input
+     */
+    customStyles?: Record<string, string>;
+    /**
+     * Type of the input
+     */
+    type?: HTMLInputTypeAttribute | 'textarea';
+    /**
+     * Placeholder of the input
+     */
+    placeholder?: string;
+    /**
+     * Name of the input
+     */
+    name?: string;
+    /**
+     * Id of the input
+     */
+    id?: string;
+    /**
+     * Value of the input
+     */
+    value?: string | number;
+    /**
+     * On change handler of the input
+     */
+    onChange?: (e: React_2.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, arg?: any) => void;
+    /**
+     * whether the input is disabled or not
+     */
+    disabled?: boolean;
+    /**
+     * Rest props of the input
+     */
+    restprops?: any;
+    /**
+     * Number of rows of the textarea
+     */
+    rows?: number;
+    /**
+     * Number of cols of the textarea
+     */
+    cols?: number;
+    /**
+     * Error message of the input
+     */
+    errorMsg?: string | false;
+    /** Multiple select? */
+    multiple?: boolean;
+    /** Blur event handler */
+    onBlur?: {
+        /** Classic React blur handler, keyed by input name */
+        (e: React_2.FocusEvent<any>): void;
+        /** Preact-like linkState. Will return a handleBlur function. */
+        <T = string | any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+    };
+}
+
+export declare function InputRightAddon({ children, isDropdown, dropdownOptions, handleOptionClick, showDropdownSearch, }: InputDirectionAddonProps): JSX_2.Element;
+
+export declare namespace InputRightAddon {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+
+/**
+ * Component for rendering an adornment on the right side of an input.
+ * It can either display static content or function as a dropdown trigger.
+ *
+ * @param {InputAdornmentProps} props - The properties for the InputRightAdornment component.
+ * @param {React.ReactNode} props.children - The content to display inside the adornment.
+ * @param {boolean} [props.isLoading=false] - Indicates if the dropdown is in a loading state.
+ * @param {boolean} [props.disabled] - Whether the adornment is disabled.
+ * @param {boolean} [props.isDropdown] - Whether the adornment is a dropdown trigger.
+ * @param {DropdownOption[]} [props.options] - Options to display in the dropdown.
+ * @param {boolean} [props.hideSearch=false] - Whether to hide the search input in the dropdown.
+ * @param {(value: string) => void} [props.onOptionSelect] - Callback for when an option is selected.
+ *
+ * @returns {JSX.Element} The right adornment for an input field.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputV2 />
+ *   <InputRightAdornment>...</InputRightAdornment>
+ * </InputGroupV2>
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputRightAdornment isDropdown options={options} onOptionSelect={handleSelect}>...</InputRightAdornment>
+ *   <InputV2 />
+ * </InputGroupV2>
+ */
+export declare function InputRightAdornment({ children, isLoading, disabled, isDropdown, options, hideSearch, onOptionSelect, }: InputAdornmentProps): JSX_2.Element;
+
+export declare namespace InputRightAdornment {
+    var displayName: INPUT_COMPONENTS;
+}
+
+export declare function InputRightElement({ children }: InputDirectionElementProps): JSX_2.Element;
+
+export declare namespace InputRightElement {
+    var displayName: Inputs;
+    var id: Inputs;
+}
+
+/**
+ * InputRightIcon renders an icon on the right side of an input field.
+ * If `onClick` is provided, the icon is rendered as a button.
+ *
+ * @param {InputIconProps} props - The properties for the InputRightIcon component.
+ * @param {string} props.icon - The SVG path for the icon to display.
+ * @param {() => void} [props.onClick] - Optional click handler for the icon. When provided, the icon is rendered as a button.
+ * @param {React.CSSProperties} [props.iconStyles] - Optional inline styles to apply to the icon.
+ * @param {boolean} [props.disabled=false] - Whether the icon or button is disabled.
+ * @param {string} [props.className] - Additional class names to apply to the icon container.
+ *
+ * @returns {JSX.Element} The rendered InputRightIcon component.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputV2 />
+ *   <InputRightIcon icon={...} />
+ * </InputGroupV2>
+ */
+export declare function InputRightIcon({ icon, onClick, iconStyles, disabled, className, }: InputIconProps): JSX_2.Element;
+
+export declare namespace InputRightIcon {
+    var displayName: INPUT_COMPONENTS;
+}
+
+declare enum Inputs {
+    INPUT_ADDON = "InputAddon",
+    INPUT_LEFT_ADDON = "InputLeftAddon",
+    INPUT_RIGHT_ADDON = "InputRightAddon",
+    INPUT_ELEMENT = "InputElement",
+    INPUT_LEFT_ELEMENT = "InputLeftElement",
+    INPUT_RIGHT_ELEMENT = "InputRightElement",
+    INPUT_CONTAINER = "InputContainer",
+    INPUT_LABEL = "InputLabel",
+    INPUT_GROUP = "InputGroup",
+    INPUT = "Input"
+}
+
+/**
+ * InputV2 component - A custom input component with extended functionality and built-in error handling.
+ *
+ * @param {InputV2Props} props - The props object containing configurations and attributes for the input element.
+ * @param {React.Ref<HTMLInputElement>} ref - A React ref that can be used to access the input element directly.
+ *
+ * @returns {JSX.Element} A JSX element representing the custom input field.
+ *
+ * @example
+ * <InputV2 placeholder="Enter your name" />
+ *
+ * @example
+ * <InputV2 errorMsg="Name is required" placeholder="Enter your name" />
+ * @example
+ * with formik
+ * <InputV2 {...formik.getFieldProps(key)} placeholder="Enter your name" />
+ */
+export declare const InputV2: React_2.ForwardRefExoticComponent<InputV2Props & React_2.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Props for the InputV2 component, which extends the standard HTML input element
+ * with additional styling and error handling.
+ *
+ * @interface InputV2Props
+ * @extends {React.InputHTMLAttributes<HTMLInputElement>}
+ *
+ * @property {string} [errorMsg] - Error message to display below the input if there is a validation error.
+ * @property {string} [containerClassName] - Additional class name(s) for the input container div.
+ * @property {never} [inputStyles] - Used for internal styling when grouping it with multiple components. use className for styling input.
+ * @property {never} [containerStyles] - Used for internal styling when grouping it with multiple components. use containerClassName for styling input container.
+ *
+ * @example
+ * <InputV2
+ *   placeholder="Enter"
+ *   errorMsg="This field is required"
+ * />
+ * @example
+ * with formik
+ * <InputV2
+ *   {...formik.getFieldProps(key)}
+ *   placeholder="Enter"
+ *   errorMsg="This field is required"
+ * />
+ */
+declare interface InputV2Props extends React.InputHTMLAttributes<HTMLInputElement> {
+    errorMsg?: string;
+    containerClassName?: string;
+    inputStyles?: never;
+    containerStyles?: never;
+}
+
+declare interface ITask {
+    module_id: string;
+    module_reference: string;
+    module_name: string;
+    form_link: string | null;
+    external_link: string | null;
+    static_module: boolean;
+    icon_url: string;
+    name: string;
+    date: string;
+    details: ITaskDetails[];
+    status: string;
+}
+
+declare interface ITaskDetails {
+    key: string;
+    value: string | ITaskObjectValue | FileType[] | null;
+}
+
+declare interface ITaskObjectValue {
+    first_name: string;
+    middle_name: string | null;
+    last_name: string | null;
+    profile_img_url: string;
+    work_email: string;
+}
+
+/**
+ * Props for the Label component, used to provide descriptive text for form inputs.
+ *
+ * @interface LabelPropsV2
+ * @extends {React.LabelHTMLAttributes<HTMLLabelElement>}
+ *
+ * @property {React.ReactNode} children - The text or elements inside the label.
+ * @property {string} [info] - Additional info to display, such as help text in tooltip.
+ * @property {boolean} [disabled] - Whether the associated input is disabled.
+ * @property {boolean} [required] - Whether the field is required (red * will be shown beside label).
+ * @property {Partial<TooltipV2Props>} [tooltipProps] - Props for the tooltip, if additional information is provided and want to customize tooltip styles.
+ *
+ * @example
+ * <LabelV2 info="Your full name">Name</LabelV2>
+ */
+declare interface LabelPropsV2 extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    children: React.ReactNode;
+    info?: string;
+    disabled?: boolean;
+    required?: boolean;
+    tooltipProps?: Partial<TooltipV2Props>;
+}
+
+/**
+ * LabelV2 is a label component that can display additional information via a tooltip,
+ * mark the field as required, and adjust styles based on the disabled state.
+ *
+ * @param {LabelPropsV2} props - The properties for the LabelV2 component.
+ * @param {string} [props.className=''] - Additional class names to apply to the label element.
+ * @param {string} [props.info=''] - Information text to be displayed in a tooltip. If provided, an info icon will appear next to the label.
+ * @param {boolean} [props.disabled=false] - Whether the label and its associated input are disabled.
+ * @param {boolean} [props.required=false] - Whether the associated input field is required. If true, an asterisk (*) will be displayed.
+ * @param {object} [props.tooltipProps={}] - Optional props to pass to the TooltipV2 component.
+ * @param {React.ReactNode} props.children - The content of the label, usually text.
+ * @returns {JSX.Element} The rendered LabelV2 component.
+ *
+ * @example
+ * <LabelV2 required info="This field is required">
+ *   Username
+ * </LabelV2>
+ */
+export declare function LabelV2({ className, info, disabled, required, tooltipProps, children, ...props }: LabelPropsV2): JSX_2.Element;
+
+export declare namespace LabelV2 {
+    var displayName: INPUT_COMPONENTS;
+}
+
+export declare function LayoutTabs({ tabs, defaultValue, tabClassName, onValueChange }: LayoutTabsProps): JSX_2.Element;
+
+declare interface LayoutTabsProps {
+    tabClassName?: string;
+    /**
+     * tabs to render
+     */
+    tabs: Array<{
+        label: string;
+        value: string;
+        content: React_2.ReactNode | string;
+    }>;
+    /**
+     * default value (initial tab to render)
+     */
+    defaultValue: string;
+    /**
+     * callback function when tab is changed
+     */
+    onValueChange?: (value: string) => void;
+}
+
+export declare function Loader({ containerStyle, loaderStyle, variant }: LoaderProps): JSX_2.Element;
+
+export declare enum LOADER_VARIANT {
+    RING = "ring",
+    DUAL_RING = "dual_ring",
+    RIPPLE = "ripple",
+    ELLIPSES = "ellipses",
+    ROLLER = "roller",
+    SPINNER = "spinner",
+    HOURGLASS = "hourglass",
+    GRID = "grid"
+}
+
+export declare type LoaderProps = {
+    containerStyle?: React_2.CSSProperties;
+    loaderStyle?: React_2.CSSProperties;
+    variant?: LOADER_VARIANT;
+};
+
+declare function MenuActionsDropdown({ menuItems, data, variant, isTable, }: MenuActionsDropdownProps): JSX_2.Element;
+
+export declare type MenuActionsDropdownProps = {
+    menuItems: MenuItem[];
+    data?: any;
+    variant?: 'regular' | 'small';
+    isTable?: boolean;
+};
+
+export declare interface MenuButtonProps {
+    children: React_2.ReactNode;
+    variant?: BUTTON_VARIANT;
+    disabled?: boolean;
+    menuItems: MenuItem[];
+    onClick?: React_2.MouseEventHandler<HTMLButtonElement>;
+    isCustomTrigger?: boolean;
+    isSingleBtnTrigger?: boolean;
+    customData?: any;
+    size?: 'sm' | 'md';
+    actionsDropdownOptions?: {
+        setIsActive: React_2.Dispatch<React_2.SetStateAction<boolean>>;
+    };
+    positionerProps?: PositioningOptions;
+    isTable?: boolean;
+}
+
+export declare type MenuItem = {
+    label: string;
+    iconSrc?: string;
+    onClick: any;
+    filterFn?: any;
+    disabled?: boolean;
+};
+
+export declare type MenuItemV2 = {
+    label: string;
+    iconSrc?: string;
+    onClick: any;
+    filterFn?: any;
+    disabled?: boolean;
+    customStyles?: React_2.CSSProperties;
+    customSvgClassName?: React_2.CSSProperties;
+};
+
+export declare function Modal({ isOpen, onClose, children, size, showOverlay, machineProps, }: ModalProps): JSX_2.Element;
+
+export declare function ModalBody({ children, api, customStyles }: ModalBodyProps): JSX_2.Element;
+
+declare interface ModalBodyProps {
+    /**
+     * Modal body children
+     */
+    children: React.ReactNode;
+    /**
+     * Zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+    /**
+     * custom styles
+     */
+    customStyles?: React.CSSProperties;
+}
+
+export declare function ModalContent({ children, api, size }: ModalContentProps): JSX_2.Element;
+
+declare interface ModalContentProps {
+    /**
+     * Modal content children
+     */
+    children: React_2.ReactNode;
+    /**
+     * Zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+    /**
+     * size of the modal
+     */
+    size?: 'sm' | 'md' | 'fullScreen';
+}
+
+export declare function ModalFooter({ children, api, buttons, showBorder }: ModalFooterProps): JSX_2.Element;
+
+declare interface ModalFooterProps {
+    /**
+     * Modal footer children
+     * if children is passed, default buttons will not be shown
+     * children acts like a custom footer
+     */
+    children?: React.ReactNode;
+    /**
+     * zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+    /**
+     * set of buttons to display
+     */
+    buttons: FooterButtons;
+    /**
+     * show border or not
+     */
+    showBorder?: boolean;
+}
+
+export declare function ModalHeader({ children, api, showCrossBtn, showBorder, }: ModalHeaderProps): JSX_2.Element;
+
+declare interface ModalHeaderProps {
+    /**
+     * Modal header children
+     */
+    children: React.ReactNode;
+    /**
+     * Zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+    /**
+     * Show cross button or not
+     */
+    showCrossBtn?: boolean;
+    /**
+     * Show border or not
+     */
+    showBorder?: boolean;
+}
+
+export declare function ModalOverlay({ api }: ModalOverlayProps): JSX_2.Element;
+
+declare interface ModalOverlayProps {
+    /**
+     * Zagjs modal API (no need to pass when using this component)
+     * will be inserted by default
+     */
+    api?: any;
+}
+
+declare type ModalProps = {
+    /**
+     * Modal is open or not
+     */
+    isOpen: boolean;
+    /**
+     * Modal close handler
+     */
+    onClose: () => void;
+    /**
+     * Modal content
+     */
+    children: React_2.ReactNode;
+    /**
+     * size of modal
+     */
+    size?: 'sm' | 'md' | 'fullScreen';
+    /**
+     * show overlay
+     */
+    showOverlay?: boolean;
+    /**
+     * Machine Props
+     */
+    machineProps?: dialog.Context | {};
+};
+
+/**
+ * Props for a non-dropdown adornment within an input field, such as an icon.
+ *
+ * @interface NonDropdownProps
+ * @extends {BaseInputAdornmentProps}
+ *
+ * @property {false} [isDropdown] - Indicates this adornment is not a dropdown.
+ * @property {never} [options] - Options are not applicable to non-dropdown adornments.
+ * @property {never} [hideSearch] - Search hiding is not applicable to non-dropdown adornments.
+ * @property {never} [onOptionSelect] - Option selection is not applicable to non-dropdown adornments.
+ * @property {never} [isLoading] - Loading state is not applicable to non-dropdown adornments.
+ *
+ * @example
+ * @example
+ *  <InputGroupV2>
+ *   <InputV2 />
+ *   <InputRightAdornment>...</InputRightAdornment>
+ * </InputGroupV2>
+ */
+declare interface NonDropdownProps extends BaseInputAdornmentProps {
+    isDropdown?: false;
+    options?: never;
+    hideSearch?: never;
+    onOptionSelect?: never;
+    isLoading?: never;
+}
+
+declare type Option_2 = OptionWithProfileImg | OptionWithIcon;
+export { Option_2 as Option }
+
+export declare type OptionBase = {
+    label: string;
+    value: string;
+    subLabel?: string;
+};
+
+declare type OptionType = {
+    label: string;
+    value: string;
+    __isNew__?: boolean;
+};
+
+export declare type OptionWithIcon = OptionBase & {
+    icon?: string;
+    profileImgUrl?: never;
+};
+
+export declare type OptionWithProfileImg = OptionBase & {
+    profileImgUrl?: string;
+    icon?: never;
+};
+
+declare interface OtherButtonV2TypeProps extends BaseButtonProps {
+    type?: BUTTON_V2_TYPE.BASIC | BUTTON_V2_TYPE.BUTTON | BUTTON_V2_TYPE.RESET;
+    icon?: React_2.ReactNode;
+    children: React_2.ReactNode;
+}
+
+export declare function Pill({ status, children }: PillProps): JSX_2.Element;
+
+export declare enum PILL_STATUS {
+    DEFAULT = "default",
+    NEUTRAL = "neutral",
+    POSITIVE = "positive",
+    WARNING = "warning",
+    NEGATIVE = "negative",
+    HIGHLIGHT = "highlight"
+}
+
+declare interface PillProps {
+    status?: PILL_STATUS;
+    children: React_2.ReactNode;
+}
+
+export declare function Popover({ children, placement, popoverProps, closeOnScroll, containerRef, }: PopoverProps): JSX_2.Element;
+
+export declare function PopoverCloseButton({ children, api, styles, className }: PopoverCloseButtonProps): JSX_2.Element;
+
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+declare interface PopoverCloseButtonProps {
+    /**
+     * The content of the close button.
+     */
+    children: React.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * The styles to apply to the PopoverCloseButton.
+     */
+    styles?: React.CSSProperties;
+    /**
+     * The className to apply to the PopoverCloseButton.
+     */
+    className?: string;
+}
+
+export declare function PopoverContent({ children, api, bg, styles, className, positionerStyles, }: PopoverContentProps): JSX_2.Element;
+
+declare interface PopoverContentProps {
+    /**
+     * The content of the PopoverContent.
+     */
+    children: React_2.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * The background color of the PopoverContent.
+     */
+    bg?: 'black' | 'gray' | string;
+    /**
+     * The styles to apply to the PopoverContent.
+     */
+    styles?: React_2.CSSProperties;
+    /**
+     * The className to apply to the PopoverContent.
+     */
+    className?: string;
+    /**
+     * The styles to apply to Popover positioner
+     */
+    positionerStyles?: React_2.CSSProperties;
+}
+
+export declare function PopoverDescription({ children, api, styles, className }: PopoverDescriptionProps): JSX_2.Element;
+
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+declare interface PopoverDescriptionProps {
+    /**
+     * The content of the PopoverDescription.
+     */
+    children: React.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * The styles to apply to the PopoverDescription.
+     */
+    styles?: React.CSSProperties;
+    /**
+     * The className to apply to the PopoverDescription.
+     */
+    className?: string;
+}
+
+declare type PopoverProps = {
+    /**
+     * Content of the trigger
+     */
+    children: React_2.ReactNode;
+    /**
+     * Placement of the popover
+     */
+    placement?: Placement;
+    /**
+     * Props to pass to the popover machine
+     */
+    popoverProps?: any;
+    /**
+     * close popover on scroll
+     */
+    closeOnScroll?: boolean;
+    /**
+     * when using closeOnScroll, its necessary to pass containerRef to track scroll movement of the container you want to close the popover with respect to.
+     */
+    containerRef?: React_2.RefObject<HTMLElement>;
+};
+
+export declare function PopoverTitle({ children, api, styles, className }: PopoverTitleProps): JSX_2.Element;
+
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+declare interface PopoverTitleProps {
+    /**
+     * The content of the PopoverTitle.
+     */
+    children: React.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * The styles to apply to the PopoverTitle.
+     */
+    styles?: React.CSSProperties;
+    /**
+     * The className to apply to the PopoverTitle.
+     */
+    className?: string;
+}
+
+export declare function PopoverTrigger({ children, api, openOnHover, styles, className, }: PopoverTriggerProps): JSX_2.Element;
+
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+declare interface PopoverTriggerProps {
+    /**
+     * The content of the PopoverTrigger.
+     */
+    children: React.ReactNode;
+    /**
+     * The popover API object.
+     */
+    api?: any;
+    /**
+     * Whether the popover should open on hover.
+     * @default true
+     * If set to false, the popover will only open on click.
+     */
+    openOnHover?: boolean;
+    /**
+     * The styles to apply to the PopoverTrigger.
+     */
+    styles?: React.CSSProperties;
+    /**
+     * The className to apply to the PopoverTrigger.
+     */
+    className?: string;
+}
+
+export declare function Progress({ steps, onCancelClick, onFinalStepClick, stepToShowSkipBtn, lastStepFooterContinueBtnText, showSkipBtn, showHeaderBtns, showFooter, lastStepHeaderContinueBtnText, allowNavigationOnStepClick, skipBtnText, jumpToStep, onSkipClick, }: ProgressProps): JSX_2.Element;
+
+declare type ProgressProps = {
+    /**
+     * steps to show
+     * if there isError is true, user won't be able to click on Continue or finish button
+     */
+    steps: {
+        label: string;
+        component: React_2.ReactNode;
+        isError: boolean;
+        onContinueClick?: Function;
+    }[];
+    /**
+     * handle cancel click
+     */
+    onCancelClick: () => void;
+    /**
+     * handle final step click
+     */
+    onFinalStepClick: () => void;
+    /**
+     * text to show on footer continue button when the step is last step
+     */
+    lastStepFooterContinueBtnText: string;
+    /**
+     * show skip button or not
+     */
+    showSkipBtn?: boolean;
+    /**
+     * show buttons on header
+     */
+    showHeaderBtns?: boolean;
+    /**
+     * show footer
+     */
+    showFooter?: boolean;
+    /**
+     * text to show on header continue button when the step is last step
+     */
+    lastStepHeaderContinueBtnText?: string;
+    /**
+     * allow navigation of steps when user click on certain step
+     */
+    allowNavigationOnStepClick?: boolean;
+    /**
+     * step to show skip button (counting starts from zero)
+     */
+    stepToShowSkipBtn?: number;
+    /**
+     * skip button text
+     */
+    skipBtnText?: string;
+    /**
+     * directly jump to particular step (index starts from 0)
+     */
+    jumpToStep?: number;
+    /**
+     * on skip click
+     */
+    onSkipClick?: () => void;
+};
+
+export declare function RadioGroup({ items, radioHeading, defaultValue, onChange, required, errorMsg, optionsContainerStyles, disabled, showSkeleton, }: RadioGroupProps): JSX_2.Element;
+
+declare interface RadioGroupProps {
+    /**
+     * heading for radio group
+     */
+    radioHeading?: string;
+    /**
+     * items to show in radio group
+     */
+    items: Array<{
+        label: {
+            heading: string | React_2.ReactNode;
+            subHeading?: string;
+        };
+        value: string;
+        tooltip?: {
+            txt: string;
+            trigger?: React_2.ReactNode;
+            placement?: string;
+        };
+    }>;
+    /**
+     * default value to be selected on first render
+     */
+    defaultValue?: string;
+    /**
+     * callback to be called on change of radio group
+     * @param value
+     *  value of selected radio
+     * */
+    onChange: (value: string) => void;
+    /**
+     * if radio group is required
+     * */
+    required?: boolean;
+    /**
+     * error msg to display
+     */
+    errorMsg?: string;
+    optionsContainerStyles?: React_2.CSSProperties;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+}
+
+export declare function Search({ id, search, setSearch, placeholder, clearIconClearFn, customStyles, disabled, }: SearchProps): JSX_2.Element;
+
+export declare interface SearchProps {
+    id: string;
+    search?: string;
+    setSearch?: React_2.Dispatch<React_2.SetStateAction<string>>;
+    placeholder?: string;
+    clearIconClearFn?: any;
+    customStyles?: {
+        customInputStyles?: React_2.CSSProperties;
+        customIconStyles?: React_2.CSSProperties;
+    };
+    disabled?: boolean;
+}
+
+/**
+ * SearchV2 is a customizable search input component that integrates with the `InputV2` component.
+ * It includes search and clear icons, and supports controlled and uncontrolled modes for managing the search input value.
+ *
+ * @param {SearchV2Props} props - The properties for the SearchV2 component.
+ * @param {string} [props.search=''] - The current search term value (used in uncontrolled mode).
+ * @param {React.Dispatch<React.SetStateAction<string>>} [props.setSearch] - Function to update the search term (used in controlled mode).
+ * @param {InputV2Props} [props] - Additional properties to pass to the `InputV2` component.
+ * @returns {JSX.Element} The rendered SearchV2 component.
+ *
+ * @example
+ * <SearchV2
+ *   search={searchTerm}
+ *   setSearch={setSearchTerm}
+ *   placeholder="Search..."
+ * />
+ */
+export declare function SearchV2({ search, setSearch, ...props }: SearchV2Props): JSX_2.Element;
+
+declare interface SearchV2Props extends InputV2Props {
+    search?: string;
+    setSearch?: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export declare function SegmentedControl({ items, defaultValue, handleOnChange }: SegmentedControlProps): JSX_2.Element;
+
+declare interface SegmentedControlProps {
+    /**
+     * items to show in segmented control
+     */
+    items: Array<{
+        label: string;
+        value: string;
+        component: React_2.ReactNode;
+    }>;
+    /**
+     * default value to be selected on first render
+     */
+    defaultValue?: string;
+    /**
+     * handle on change
+     * use this if you are controlling the behavior of segmented control from an external entity
+     */
+    handleOnChange?: (value: string) => void;
+}
+
+export declare function Select({ options, onChange, name, id, className, placeholder, selectStyles, defaultValue, formatGroupLabel, customContainerStyles, customErrorStyles, menuPlacement, errorMsg, extraprops, isDisabled, isSearchable, isMulti, isClearable, customValue, CustomDropdownIndicator, }: SelectProps): JSX_2.Element;
+
+export declare enum SELECT_VARIANT {
+    DEFAULT = "default",
+    USERS = "users",
+    CHECKBOX = "checkbox",
+    TAGS = "tags"
+}
+
+export declare type SelectActionMeta = ActionMeta<Option_2>;
+
+declare type SelectActionMeta_2 = ActionMeta<{
+    label: string;
+    value: string;
+}>;
+
+export declare function SelectAsync({ options, onChange, name, id, className, placeholder, selectStyles, defaultValue, formatGroupLabel, customContainerStyles, menuPlacement, errorMsg, extraProps, isDisabled, isSearchable, isMulti, isClearable, customValue, }: SelectAsyncProps): JSX_2.Element;
+
+declare interface SelectAsyncProps {
+    /**
+     * The options to be displayed in the select
+     * should atleast have {label: string, value: string}
+     */
+    options: (inputValue: string) => Promise<Array<{
+        label: string | '';
+        value: string | '';
+        profileImgUrl?: string | null;
+    }> | void>;
+    /**
+     * Handle change events on the select
+     */
+    onChange: (newValue: string | string[], actionMeta: SelectActionMeta_2) => void;
+    /**
+     * The name of the select
+     */
+    name?: string;
+    /**
+     * The id of the select
+     */
+    id?: string;
+    /**
+     * The className of the select
+     */
+    className?: string;
+    /**
+     * The placeholder of the select
+     */
+    placeholder?: string;
+    /**
+     * Whether the select is searchable
+     */
+    isSearchable?: boolean;
+    /**
+     * Whether multiple selection is possible
+     */
+    isMulti?: boolean;
+    /**
+     * Whether the select is clearable
+     */
+    isClearable?: boolean;
+    /**
+     * The styles of the select component
+     */
+    selectStyles?: StylesConfig<any>;
+    /**
+     * The default value of the select
+     */
+    defaultValue?: any;
+    /**
+     * Formats group labels in the menu as React components
+     */
+    formatGroupLabel?: (data: any) => React_2.ReactNode;
+    /**
+     * The custom styles of the select container
+     */
+    customContainerStyles?: React_2.CSSProperties;
+    /**
+     * Whether the select is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.
+     */
+    menuPlacement?: MenuPlacement;
+    /**
+     * The error message to be displayed
+     */
+    errorMsg?: string | string[] | false;
+    /**
+     * extra props to pass for select component
+     */
+    extraProps?: any;
+    customValue?: any;
+}
+
+export declare type SelectMultiValue = MultiValue<Option_2>;
+
+export declare function Selectors({ selectors }: SelectorsProps): JSX_2.Element;
+
+export declare interface SelectorsProps {
+    selectors: {
+        name: string;
+        onClick: any;
+    }[];
+}
+
+declare interface SelectProps {
+    /**
+     * The options to be displayed in the select
+     * should atleast have {label: string, value: string}
+     */
+    options: Array<{
+        label: string | '';
+        value: string | '';
+        profileImgUrl?: string;
+    }> | any;
+    /**
+     * Handle change events on the select
+     */
+    onChange: (newValue: string | string[], actionMeta: SelectActionMeta_2) => void;
+    /**
+     * The name of the select
+     */
+    name?: string;
+    /**
+     * The id of the select
+     */
+    id?: string;
+    /**
+     * The className of the select
+     */
+    className?: string;
+    /**
+     * The placeholder of the select
+     */
+    placeholder?: string;
+    /**
+     * Whether the select is searchable
+     */
+    isSearchable?: boolean;
+    /**
+     * Whether multiple selection is possible
+     */
+    isMulti?: boolean;
+    /**
+     * Whether the select is clearable
+     */
+    isClearable?: boolean;
+    /**
+     * The styles of the select component
+     */
+    selectStyles?: StylesConfig<any>;
+    /**
+     * The default value of the select
+     */
+    defaultValue?: {
+        label: string;
+        value: string;
+        profileImgUrl?: string;
+    };
+    /**
+     * Formats group labels in the menu as React components
+     */
+    formatGroupLabel?: (data: any) => React_2.ReactNode;
+    /**
+     * The custom styles of the select container
+     */
+    customContainerStyles?: React_2.CSSProperties;
+    customErrorStyles?: React_2.CSSProperties;
+    isDisabled?: boolean;
+    /**
+     * Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.
+     */
+    menuPlacement?: MenuPlacement;
+    /**
+     * The error message to be displayed
+     */
+    errorMsg?: string | false;
+    /**
+     * extra props to pass for select component
+     */
+    extraprops?: any;
+    /**
+     * props to add custom dropdown
+     */
+    CustomDropdownIndicator?: React_2.ReactNode;
+    customValue?: any;
+}
+
+export declare type SelectSingleValue = SingleValue<Option_2>;
+
+/**
+ * A custom select component based on react-select.
+ * @param props - The properties for the SelectV2 component:
+ *   - `options` (Array<Option>): An array of options to be displayed in the dropdown. Each option can include a label, value, and optional profile image or icon.
+ *   - `mainContainerClassName` (string, optional): A custom CSS class name to apply to the main container for additional styling.
+ *   - `variant` (SELECT_VARIANT, optional): Defines the variant of the select component (e.g., 'default', 'users', 'checkbox', 'tags') to control the styling and behavior.
+ *   - `errorMsg` (string, optional): An error message to display below the select component for validation purposes.
+ *   - `onChange` (function): A callback function that is triggered when the selected value(s) change. It receives the selected value(s) and action meta information.
+ *   - `customStyles` (StylesConfig<any>): custom styles for react select. it will override default styles
+ * @returns The SelectV2 component.
+ */
+export declare function SelectV2(props: SelectV2Props): JSX_2.Element;
+
+export declare interface SelectV2Props extends Props<any, boolean> {
+    options: Option_2[];
+    onChange: (value: string | string[], actionMeta: SelectActionMeta) => void;
+    mainContainerClassName?: string;
+    variant?: SELECT_VARIANT;
+    errorMsg?: string;
+    customStyles?: StylesConfig<any>;
+}
+
+export declare type SelectValue = SelectMultiValue | SelectSingleValue;
+
+export declare function Skeleton({ className, ...props }: SkeletonProps): JSX_2.Element;
+
+declare type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+
+export declare enum STATUS_MAP {
+    SUCCESS = "success",
+    INFO = "info",
+    ERROR = "error",
+    WARNING = "warning",
+    DEFAULT = "default"
+}
+
+export declare const statusMap: {
+    neutral: {
+        bg: string;
+        color: string;
+    };
+    default: {
+        bg: string;
+        color: string;
+    };
+    positive: {
+        bg: string;
+        color: string;
+    };
+    highlight: {
+        bg: string;
+        color: string;
+    };
+    warning: {
+        bg: string;
+        color: string;
+    };
+    negative: {
+        bg: string;
+        color: string;
+    };
+};
+
+export declare function SVG({ path, width, height, spanClassName, svgClassName, customSpanStyles, customSvgStyles, handleClick, }: SVGProps): JSX_2.Element;
+
+export declare type SVGProps = {
+    path: string;
+    width?: number;
+    height?: number;
+    spanClassName?: string;
+    svgClassName?: string;
+    customSvgStyles?: React.CSSProperties;
+    customSpanStyles?: React.CSSProperties;
+    handleClick?: (e: any) => void;
+};
+
+export declare function Switch({ isToggled, handleToggleChange, name, switchClassName, subText, size, disabled, title, }: SwitchProps): JSX_2.Element;
+
+declare type SwitchProps = {
+    isToggled: boolean | any;
+    handleToggleChange: (val: boolean) => void;
+    name: string;
+    subText?: string | React.ReactNode;
+    switchClassName?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    title?: string;
+};
+
+export declare const Tab: default_2.FC<TabProps>;
+
+export declare function Table({ data, loaderConfig, columns, filterConfig, sortConfig, rowSelectionConfig, actionsConfig, searchConfig, totalText, selectorConfig, paginationConfig, emptyStateConfig, headerText, infiniteScrollConfig, }: TableProps): JSX_2.Element;
+
+declare type TableCustomColumns = {
+    checked_state: Array<{
+        id: string;
+        label: string;
+        checked: boolean;
+    }>;
+    is_default: boolean;
+    table_name: string;
+};
+
+export declare function TableDeviceCell({ device, onClick }: TableDeviceCellProps): JSX_2.Element;
+
+declare interface TableDeviceCellProps {
+    device: any;
+    onClick: any;
+}
+
+declare type TableFilters = {
+    header?: FilterOptions_2[];
+    drawer?: FilterOptions_2[];
+};
+
+export declare function TablePagination({ paginationConfig }: TablePaginationProps): JSX_2.Element | null;
+
+declare interface TablePaginationProps {
+    paginationConfig: TableV3Props['paginationConfig'];
+}
+
+export declare interface TableProps {
+    data: any;
+    columns: any;
+    /**
+     * column for actions dropdown in the last row
+     */
+    actionsConfig?: {
+        isDropdownActions?: boolean;
+        menuItems?: {
+            label: string;
+            iconSrc?: string;
+            onClick: any;
+            filterFn?: any;
+            disabled?: boolean | ((data: any) => boolean);
+        }[];
+        key?: string;
+        customComp?: (data: any) => React_2.ReactNode | JSX.Element;
+    };
+    loaderConfig: {
+        text?: string;
+        isFetching: boolean;
+        isError: boolean;
+        errMsg?: string;
+    };
+    /**
+     * table search
+     */
+    searchConfig?: {
+        placeholder?: string;
+        search: string;
+        setSearch: any;
+    };
+    /**
+     * table sorting
+     * @param sortBy used for
+     */
+    sortConfig?: {
+        sortBy: string;
+        setSortBy: any;
+        sortOrd: 'asc' | 'desc' | '';
+        setSortOrd: any;
+        sortMap: Record<string, string>;
+    };
+    /**
+     * table filtering, data comes from an api
+     */
+    filterConfig?: FilterConfig;
+    totalText?: string;
+    /**
+     * Row checkbox or radio selection config
+     *
+     * @param rowIdKey: needed to keep the selected rows when search is being used server side https://tanstack.com/table/v8/docs/guide/row-selection#useful-row-ids
+     */
+    rowSelectionConfig?: {
+        isCheckbox?: boolean;
+        isRadio?: boolean;
+        actions?: {
+            icon: string;
+            text: string;
+            onClick: any;
+        }[];
+        setSelectedRows?: React_2.Dispatch<React_2.SetStateAction<any>>;
+        iconSrc?: string;
+        clearOnSearch?: boolean;
+        rowIdKey?: string;
+        rowSelection?: {};
+        setRowSelection?: React_2.Dispatch<React_2.SetStateAction<{}>>;
+    };
+    selectorConfig?: {
+        selectors: {
+            name: string;
+            onClick: any;
+        }[];
+    };
+    /**
+     * @deprecated use infiniteScrollConfig
+     */
+    paginationConfig?: {
+        metaData: {
+            total_items: number;
+            items_on_page: number;
+            page_no: number;
+        };
+        loader: React_2.ReactNode;
+        fetchNextPage: () => void;
+        height?: string;
+        scrollThreshold?: string | number;
+        scrollableTarget?: string;
+    };
+    /**
+     * Used for infinite scroll, all the properties comes from useInfiniteQuery
+     */
+    infiniteScrollConfig?: {
+        fetchNextPage: () => void;
+        isFetchingNextPage: boolean;
+    };
+    emptyStateConfig?: {
+        icon: string;
+        isCustom?: {
+            value: boolean;
+            component: React_2.ReactNode;
+        };
+        title: string;
+        desc: string;
+        btnText: string;
+        onClick: any;
+        columns: number;
+        emptySearchTitle?: string;
+    };
+    headerText?: string;
+}
+
+export declare function TableUserCell({ user, onClick, showCopy }: TableUserCellProps): JSX.Element | null;
+
+declare interface TableUserCellProps {
+    user: any;
+    onClick: any;
+    showCopy?: boolean;
+}
+
+export declare function TableV3({ data, loaderConfig, columns, filterConfig, sortConfig, rowSelectionConfig, actionsConfig, searchConfig, totalText, paginationConfig, emptyStateConfig, tableStyleConfig, customColumnConfig, exportConfig, }: TableV3Props): JSX_2.Element;
+
+export declare interface TableV3Props {
+    data: any;
+    columns: any;
+    /**
+     * column for actions dropdown in the last row
+     */
+    actionsConfig?: {
+        isDropdownActions?: boolean;
+        menuItems?: {
+            label: string;
+            iconSrc?: string;
+            onClick: any;
+            filterFn?: any;
+            disabled?: boolean | ((data: any) => boolean);
+        }[];
+    };
+    loaderConfig: {
+        text?: string;
+        isFetching: boolean;
+        isError: boolean;
+        errMsg?: string;
+    };
+    /**
+     * table search
+     */
+    searchConfig?: {
+        placeholder?: string;
+        search: string;
+        setSearch: any;
+    };
+    /**
+     * table sorting
+     * @param sortBy used for
+     */
+    sortConfig?: {
+        sortBy: string;
+        setSortBy: any;
+        sortOrd: 'asc' | 'desc' | '';
+        setSortOrd: any;
+        sortMap: Record<string, string>;
+    };
+    /**
+     * table filtering, data comes from an api
+     */
+    filterConfig?: FilterConfig_2;
+    totalText?: string;
+    /**
+     * Row checkbox or radio selection config
+     *
+     * @param rowIdKey: needed to keep the selected rows when search is being used server side https://tanstack.com/table/v8/docs/guide/row-selection#useful-row-ids
+     * @param entityName: singular format of entity name
+     */
+    rowSelectionConfig?: {
+        isCheckbox?: boolean;
+        isRadio?: boolean;
+        entityName: string;
+        actions?: {
+            icon: string;
+            text: string;
+            onClick: any;
+        }[];
+        setSelectedRows?: React_2.Dispatch<React_2.SetStateAction<any>>;
+        iconSrc?: string;
+        clearOnSearch?: boolean;
+        rowIdKey: string;
+        rowSelection?: {};
+        setRowSelection?: React_2.Dispatch<React_2.SetStateAction<{}>>;
+    };
+    paginationConfig?: {
+        metaData?: {
+            total_items: number;
+            items_on_page: number;
+            page_no: number;
+        };
+        page: number;
+        setPage: (page: number) => void;
+        limit: number;
+        setLimit: (limit: number) => void;
+    };
+    emptyStateConfig?: {
+        icon: string;
+        isCustom?: {
+            value: boolean;
+            component: React_2.ReactNode;
+        };
+        title: string;
+        desc: string;
+        btnText: string;
+        onClick: any;
+        columns: number;
+        emptySearchTitle?: string;
+    };
+    tableStyleConfig?: {
+        maxHeight?: string;
+        stickyIds?: string[];
+    };
+    /**
+     * custom columns
+     */
+    customColumnConfig?: {
+        description?: string;
+        columns?: TableCustomColumns;
+        isPending: boolean;
+        isError: boolean;
+        handleSaveColumns: (columns: any) => Promise<void>;
+    };
+    /**
+     * export config (csv)
+     */
+    exportConfig?: {
+        isPending: boolean;
+        isError: boolean;
+        handleExport: any;
+    };
+}
+
+export declare interface TabProps {
+    title: string;
+    eventKey: string;
+    isActive: boolean;
+    customClassName?: string;
+    customStyles?: default_2.CSSProperties;
+    children: default_2.ReactNode;
+    onClick: () => void;
+}
+
+export declare const Tabs: default_2.FC<TabsProps>;
+
+declare interface TabsProps {
+    id: string;
+    activeKey: string;
+    onSelect: (key: string) => void;
+    customClassName?: string;
+    customStyles?: default_2.CSSProperties;
+    children: ReactElement[];
+}
+
+export declare function Tag({ status, text, icon, customStyles }: TagProps): JSX_2.Element;
+
+declare interface TagProps {
+    text: string;
+    status: STATUS_MAP;
+    icon?: string;
+    customStyles?: React.CSSProperties;
+}
+
+export declare function TaskCards({ headers, data, isLoading, isError, emptyText, menuItems, paginationConfig, }: TaskCardsProps): JSX_2.Element;
+
+declare interface TaskCardsProps {
+    headers: string[];
+    data: ITask[];
+    isLoading?: boolean;
+    isError?: boolean;
+    emptyText?: string;
+    menuItems: MenuItemV2[][];
+    paginationConfig?: {
+        metaData?: {
+            total_items: number;
+            items_on_page: number;
+            page_no: number;
+        };
+        page: number;
+        setPage: (page: number) => void;
+        limit: number;
+        setLimit: (limit: number) => void;
+    };
+}
+
+/**
+ * TextareaV2 is a styled textarea component with optional error message display.
+ * It provides a flexible way to render a textarea with custom styles and error handling.
+ *
+ * @param {TextareaV2Props} props - The properties for the TextareaV2 component.
+ * @param {string} [props.errorMsg=''] - Error message to display below the textarea.
+ * @param {string} [props.containerClassName=''] - Additional CSS classes to apply to the container.
+ * @param {string} [props.className=''] - Additional CSS classes to apply to the textarea.
+ * @param {React.CSSProperties} [props.inputStyles={}] - Used for internal styling when grouping it with multiple components. use className for styling textarea.
+ * @param {React.CSSProperties} [props.containerStyles={}] -Used for internal styling when grouping it with multiple components. use containerClassName for styling textarea container.
+ * @param {React.TextareaHTMLAttributes<HTMLTextAreaElement>} [props] - Other standard textarea attributes.
+ * @param {React.Ref<HTMLTextAreaElement>} ref - Ref to the underlying textarea element.
+ * @returns {JSX.Element} The rendered TextareaV2 component.
+ *
+ * @example
+ * <TextareaV2
+ *   errorMsg="This field is required."
+ *   placeholder="Enter text..."
+ * />
+ */
+export declare const TextareaV2: React_2.ForwardRefExoticComponent<TextareaV2Props & React_2.RefAttributes<HTMLTextAreaElement>>;
+
+/**
+ * Props for the TextareaV2 component, which extends the standard HTML textarea element
+ * with additional styling and error handling.
+ *
+ * @interface InputV2Props
+ * @extends {React.TextareaHTMLAttributes<HTMLTextAreaElement>}
+ *
+ *
+ * @property {string} [errorMsg] - Error message to display below the textarea if there is a validation error.
+ * @property {string} [containerClassName] - Additional class name(s) for the textarea container div.
+ * @property {never} [inputStyles] - Used for internal styling when grouping it with multiple components. use className for styling textarea.
+ * @property {never} [containerStyles] - Used for internal styling when grouping it with multiple components. use containerClassName for styling textarea container.
+ *
+ * @example
+ * <TextareaV2
+ *   placeholder="Enter"
+ *   errorMsg="This field is required"
+ * />
+ * @example
+ * with formik
+ * <TextareaV2
+ *   {...formik.getFieldProps(key)}
+ *   placeholder="Enter"
+ *   errorMsg="This field is required"
+ * />
+ */
+declare interface TextareaV2Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    errorMsg?: string;
+    containerClassName?: string;
+    inputStyles?: never;
+    containerStyles?: never;
+}
+
+export declare function ToastCloseButton({ closeToast }: ToastCloseButtonProps): JSX_2.Element;
+
+declare type ToastCloseButtonProps = {
+    closeToast: (e: default_2.MouseEvent<HTMLElement, MouseEvent>) => void;
+};
+
+export declare const toastError: ToastType;
+
+export declare const toastInfo: ToastType;
+
+export declare const toastSuccess: ToastType;
+
+declare type ToastType = ({ msg, options }: {
+    msg: string | React_2.ReactElement;
+    options?: ToastOptions;
+}) => Id;
+
+export declare const toastWarning: ToastType;
+
+export declare function Tooltip({ children, openDelay, closeDelay, placement, }: TooltipProps): JSX_2.Element;
+
+export declare namespace Tooltip {
+    var Trigger: typeof TooltipTrigger;
+    var Content: typeof TooltipContent;
+}
+
+declare function TooltipContent({ children, api, bg, positionerStyles, containerStyles, }: TooltipContentProps): JSX_2.Element;
+
+/**
+ * @author Pratik Awaik <pratik@hybr1d.io>
+ */
+declare interface TooltipContentProps {
+    /**
+     * tooltip content children
+     */
+    children: React.ReactNode;
+    /**
+     * tooltip API object
+     */
+    api?: any;
+    /**
+     * content background
+     */
+    bg?: 'black' | 'gray' | string;
+    /**
+     * positioner styles
+     */
+    positionerStyles?: React.CSSProperties;
+    containerStyles?: React.CSSProperties;
+}
+
+declare interface TooltipProps {
+    /**
+     * tooltip children
+     */
+    children: React_2.ReactNode;
+    /**
+     * open tooltip after delay
+     */
+    openDelay?: number;
+    /**
+     * close tooltip after delay
+     */
+    closeDelay?: number;
+    /**
+     * placement of the tooltip
+     */
+    placement?: Placement;
+}
+
+declare function TooltipTrigger({ children, api, customStyles }: TooltipTriggerProps): JSX_2.Element;
+
+declare interface TooltipTriggerProps {
+    /**
+     * tooltip trigger
+     */
+    children: React.ReactNode;
+    /**
+     * The tooltip API object.
+     */
+    api?: any;
+    customStyles?: React.CSSProperties;
+}
+
+export declare function TooltipV2({ id, placement, trigger, content, variant, customStyle, portalId, portalClass, contentMaxLength, }: TooltipV2Props): JSX_2.Element;
+
+declare interface TooltipV2Props {
+    id: string;
+    placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    trigger: React_2.ReactNode;
+    content: string;
+    variant?: 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info';
+    customStyle?: React_2.CSSProperties;
+    opacity?: number;
+    portalId?: string;
+    portalClass?: string;
+    contentMaxLength?: number;
+}
+
+export declare function Upload({ getUploadDoc, setIsUploading, customComponent, fileUploadLimit, type, isMultiple, uploadFileLimit, singleFileClassName, fileContainerClassName, uploadBtnClassName, alignContent, showUploadIcon, additionalNode, disabled, addDocumentText, customUrl, beforeUploadHandler, extraSubtitleText, inventoryId, softwareId, preLoadedFiles, showFileList, acceptedFileTypes, error, addDocumentSubtitle, handleImageUpload, }: UploadProps): JSX_2.Element;
+
+declare enum UPLOAD_ALIGN_BTN_CONTENT {
+    LEFT = "flex-start",
+    CENTER = "center",
+    RIGHT = "flex-end"
+}
+
+declare type UploadFileType = {
+    id?: string;
+    ext: string;
+    type: string;
+    url: string;
+    metaData?: {
+        fileName: string;
+        key: string;
+    };
+    key: string;
+    fileName: string;
+    isUploaded: boolean;
+    size: string;
+    setIntervalFunction?: any;
+};
+
+declare interface UploadProps {
+    type: DOCS_TYPE;
+    disabled?: boolean;
+    getUploadDoc: (arg: any) => void;
+    setIsUploading?: (arg: any) => void;
+    customComponent?: React_2.ReactChild;
+    fileUploadLimit?: number;
+    isMultiple?: boolean;
+    singleFileClassName?: string;
+    fileContainerClassName?: string;
+    uploadFileLimit?: number;
+    uploadBtnClassName?: string;
+    alignContent?: UPLOAD_ALIGN_BTN_CONTENT;
+    showUploadIcon?: boolean;
+    additionalNode?: React_2.ReactElement;
+    addDocumentText?: string;
+    customUrl?: string;
+    beforeUploadHandler?: () => void;
+    inventoryId?: string | null;
+    softwareId?: string | null;
+    preLoadedFiles?: Array<UploadFileType>;
+    showFileList?: boolean;
+    acceptedFileTypes?: string;
+    extraSubtitleText?: string;
+    error?: string | null;
+    addDocumentSubtitle?: string;
+    handleImageUpload: (images: any[], type: DOCS_TYPE, key?: string, value?: string, customUrl?: string, inventoryId?: string | null, softwareId?: string | null) => Promise<UploadFileType[]>;
+}
+
+export declare const useBreadcrumbs: (breadcrumbs: Breadcrumb_2[]) => void;
+
+export declare const useBreadcrumbsStore: UseBoundStore<StoreApi<BreadcrumbsStore>>;
+
+export declare enum USER_CHIP_STATUS {
+    DEFAULT = "default",
+    NEUTRAL = "neutral",
+    POSITIVE = "positive",
+    WARNING = "warning",
+    ERROR = "error",
+    HIGHLIGHT = "highlight",
+    WHITE = "white"
+}
+
+export declare function UserChip({ status, selected, username, profileImgUrl, }: UserChipProps): JSX_2.Element;
+
+declare interface UserChipProps {
+    status?: USER_CHIP_STATUS;
+    selected?: boolean;
+    username: string;
+    profileImgUrl: string;
+}
+
+export { }
+
+
+declare namespace NumberAdornment {
+    var displayName: INPUT_COMPONENTS;
+}