freemium-ui 2.0.0-beta.0 → 2.0.0-beta.2

package/lib/index.d.ts

@@ -1,833 +1,1155 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default, { Dispatch, SetStateAction, MutableRefObject } from 'react';
+import { CheckboxProps as CheckboxProps$1 } from '@radix-ui/react-checkbox';
 import { UseSelectProps, UseComboboxProps } from 'downshift';
 import { LabelProps } from '@radix-ui/react-label';
-import styleInject from '/Users/basembulingam/Files/Code Repo/freemium-ui/node_modules/style-inject/dist/style-inject.es.js';
 import { DateInput3Props, DateRangeInput3Props } from '@blueprintjs/datetime2';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { RadioGroupContextValue } from '@radix-ui/react-radio-group';
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+import { CoreOptions } from '@tanstack/react-table';
 import { TabsProps as TabsProps$1 } from '@radix-ui/react-tabs';
 import { TooltipProviderProps, TooltipProps as TooltipProps$1, TooltipArrowProps } from '@radix-ui/react-tooltip';
 import { TransitionProps as TransitionProps$1 } from 'react-transition-group/Transition';
 export { TransitionStatus } from 'react-transition-group/Transition';
 
 type LevelType = 'warning' | 'success' | 'error' | 'info';
+
 type AlertData = {
-    message: string;
-    linkText?: string;
-    href?: string;
+  message: string;
+  linkText?: string;
+  href?: string;
 };
+
 interface AlertProps {
-    /**
-     * How large should the button be?
-     */
-    data?: AlertData;
-    level: LevelType;
-    canDismiss?: boolean;
-    timeout?: number;
-    overideClassName?: string;
-    /**
-     * The children or label
-     */
-    children?: React.ReactNode | string;
-    onClose?: () => any;
-    onDisappear?: () => any;
+  /**
+   * data to be displayed in the alert
+   */
+  data?: AlertData;
+  /**
+   * Level of the alert
+   */
+  level: LevelType;
+  /**
+   * Whether the alert can be dismissed
+   */
+  canDismiss?: boolean;
+  /**
+   * Timeout for the alert to disappear
+   */
+  timeout?: number;
+  /**
+   * Class name to be overriden
+   */
+  overideClassName?: string;
+  /**
+   * Children to be displayed in the alert
+   */
+  children?: React.ReactNode | string;
+  /**
+   * Function to be called when the alert is closed
+   */
+  onClose?: () => any;
+  /**
+   * Function to be called when the alert is dismissed
+   */
+  onDisappear?: () => any;
 }
 
-/**
- * Primary UI component for user interaction
- */
-declare const Alert: ({ canDismiss, onClose, children, level, onDisappear, data, timeout, overideClassName, }: AlertProps) => react_jsx_runtime.JSX.Element | null;
-
 type ButtonSizeKey = 'mini' | 'normal' | 'large';
 type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link';
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * How large should the button be?
-     */
-    size?: ButtonSizeKey;
-    /**
-     * Which variant the button should be
-     */
-    variant?: 'primary' | 'secondary' | 'danger' | 'link';
-    /**
-     * The children or label
-     */
-    children?: React.ReactNode | string;
-    /**
-     * Is the button loading
-     */
-    loading?: boolean;
-    /**
-     * Is the button inline
-     */
-    inline?: boolean;
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * The size of the button
+   */
+  size?: ButtonSizeKey;
+  /**
+   * The variant of the button
+   */
+  variant?: 'primary' | 'secondary' | 'danger' | 'link';
+  /**
+   * The children to be displayed in the button
+   */
+  children?: React.ReactNode | string;
+  /**
+   * Whether the button is loading
+   */
+  loading?: boolean;
+  /**
+   * Whether the button is inline
+   */
+  inline?: boolean;
 }
 
-/**
- * Primary UI component for user interaction
- */
-declare const Button: ({ size, variant, children, loading, inline, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
-
-interface CheckboxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * The position of the tooltip
-     */
-    isRequired?: boolean;
-    isErrored?: boolean;
-    label?: string;
+interface CheckboxProps extends CheckboxProps$1 {
+  /**
+   * Whether the checkbox is required
+   */
+  isRequired?: boolean;
+  /**
+   * Whether the checkbox is errored
+   */
+  isErrored?: boolean;
+  /**
+   * Label for the checkbox
+   */
+  label?: string;
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Checkbox: ({ isRequired, isErrored, label, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
 
 interface ConfirmationProps {
-    /**
-     * Is the button inline
-     */
-    isOpen?: boolean;
-    /**
-     * Is the button inline
-     */
-    confirmButtonDisabled?: boolean;
-    /**
-     * Is the button inline
-     */
-    cancelButtonDisabled?: boolean;
-    /**
-     * Is the button inline
-     */
-    title?: string;
-    /**
-     * Is the button inline
-     */
-    description?: string;
-    /**
-     * Is the button inline
-     */
-    width?: string;
-    /**
-     * How large should the button be?
-     */
-    onDismiss?: (type: 'overlay' | 'button') => void;
-    /**
-     * How large should the button be?
-     */
-    onConfirm?: () => void;
-    /**
-     * Which variant the button should be
-     */
-    confirmButtonText?: string;
-    /**
-     * Which variant the button should be
-     */
-    cancelButtonText?: string;
-    /**
-     * The children or label
-     */
-    bodyStyles?: React__default.CSSProperties;
-    /**
-     * The children or label
-     */
-    contentStyles?: React__default.CSSProperties;
-    /**
-     * The children or label
-     */
-    footerStyles?: React__default.CSSProperties;
+  /**
+   * Is the confirmation open
+   */
+  isOpen?: boolean;
+  /**
+   * Is the confirm button disabled
+   */
+  confirmButtonDisabled?: boolean;
+  /**
+   * Is the cancel button disabled
+   */
+  cancelButtonDisabled?: boolean;
+  /**
+   * Title of the confirmation
+   */
+  title?: string;
+  /**
+   * Description of the confirmation
+   */
+  description?: string;
+  /**
+   * Width of the confirmation
+   */
+  width?: string;
+  /**
+   * Function to be called when the confirmation is dismissed
+   */
+  onDismiss?: (type: 'overlay' | 'button') => void;
+  /**
+   * Function to be called when the confirmation is confirmed
+   */
+  onConfirm?: () => void;
+  /**
+   * Confirm button text
+   */
+  confirmButtonText?: string;
+  /**
+   * Cancel button text
+   */
+  cancelButtonText?: string;
+  /**
+   * Styles for the overlay
+   */
+  bodyStyles?: React.CSSProperties;
+  /**
+   * Styles for the content
+   */
+  contentStyles?: React.CSSProperties;
+  /**
+   * Styles for the footer
+   */
+  footerStyles?: React.CSSProperties;
+}
+
+type DrawerSizeType =
+  | 'default'
+  | 'medium'
+  | 'small'
+  | 'large'
+  | 'x-large';
+
+type DrawerPlacement = 'left' | 'right';
+
+interface DrawerProps {
+  /**
+   * The children to be displayed in the drawer
+   */
+  children?: React.ReactNode | string;
+  /**
+   * Whether the drawer is open
+   */
+  isOpen?: boolean;
+  /**
+   * The placement of the drawer
+   */
+  placement?: DrawerPlacement;
+  /**
+   * The size of the drawer
+   */
+  size?: DrawerSizeType;
+  /**
+   * Whether the drawer is full height
+   */
+  isFullHeight?: boolean;
+  /**
+   * Should the drawer close when clicking outside
+   */
+  clickOutToClose?: boolean;
+  /**
+   * Should we hide the dismiss icon
+   */
+  hideDismissIcon?: boolean;
+  /**
+   * Custom class to be added to the drawer
+   */
+  customClass?: string;
+  /**
+   * Function to be called when the drawer is dismissed
+   */
+  onDismiss?: () => void;
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Confirmation: ({ isOpen, title, description, onConfirm, onDismiss, cancelButtonText, cancelButtonDisabled, confirmButtonDisabled, confirmButtonText, bodyStyles, contentStyles, footerStyles, width, }: ConfirmationProps) => react_jsx_runtime.JSX.Element;
-
-declare const useConfirmation: (initialVisible?: boolean) => {
-    visible: boolean;
-    setVisible: Dispatch<SetStateAction<boolean>>;
-    currentRef: MutableRefObject<boolean>;
-    bindings: {
-        isOpen: boolean;
-        onDismiss: () => void;
-    };
-};
 
 type DropdownTypes = 'button' | 'input';
-type DefaultDropdownItem$1 = {};
-interface DropdownProps<T extends DefaultDropdownItem$1> {
-    items?: Array<T>;
-    itemIdentifier?: string;
-    defaultSelectedItem?: T | null;
-    onChange?: (item?: T | null) => void;
-    itemToString: (item: T | null) => string;
-    itemToStringListItem?: (item: T | null) => string;
-    /**
-     * Which type of the dropdown should be
-     */
-    type: DropdownTypes;
-    /**
-     * Is the dropdown readonly
-     */
-    readOnly?: boolean;
-    /**
-     * Is the dropdown disabled
-     */
-    disabled?: boolean;
-    /**
-     * Is the dropdown disabled
-     */
-    name?: string;
-    width?: string;
-    filterKey?: string;
-    getCustomMessage?: (inoutValue: string) => string;
-    emptyItemsText?: string;
-    hideClear?: boolean;
-    errorText?: string;
-    className?: string;
-    style?: React__default.CSSProperties;
-    isErrored?: boolean;
-    isRequired?: boolean;
-    isMenuLoading?: boolean;
-    onCustomValueAdd?: (item: {
-        inputValue: string;
-        customValues: boolean;
-    }) => void;
-    customValues?: boolean;
-    id?: string;
-    label?: string;
-    placeholder?: string;
-    useSelectProps?: UseSelectProps<T>;
-    useComboboxProps?: UseComboboxProps<T>;
+
+type DefaultDropdownItem = {
+  id: string | number;
+  name?: string;
+  disabled?: boolean;
+  [key: string]: any;
+};
+
+interface DropdownProps<
+  T extends DefaultDropdownItem = DefaultDropdownItem,
+> {
+  /**
+   * The items to be displayed in the dropdown
+   */
+  items?: Array<T>;
+  /**
+   * The identifier for the items
+   */
+  itemIdentifier?: string;
+  /**
+   * The selected item
+   */
+  defaultSelectedItem?: T | null;
+  /**
+   * Function to be called when the selected item changes
+   */
+  onChange?: (item?: T | null) => void;
+  /**
+   * Fuction to give the string representation of the item
+   */
+  itemToString: (item: T | null, type?: 'list-item' | 'display') => string;
+  /**
+   * The type of the dropdown
+   */
+  type: DropdownTypes;
+  /**
+   * Is the dropdown read only
+   */
+  readOnly?: boolean;
+  /**
+   * Whether disabled select
+   */
+  disabled?: boolean;
+  /**
+   * The name of the dropdown
+   */
+  name?: string;
+  /**
+   * The width of the dropdown
+   */
+  width?: string;
+  /**
+   * The key to be used for filtering
+   */
+  filterKey?: string;
+  /**
+   *
+   */
+  getCustomMessage?: (inoutValue: string) => string;
+  /**
+   *
+   */
+  emptyItemsText?: string;
+  /**
+   *
+   */
+  hideClear?: boolean;
+  /**
+   *
+   */
+  errorText?: string;
+  /**
+   *
+   */
+  className?: string;
+  /**
+   *
+   */
+  style?: React.CSSProperties;
+  /**
+   *
+   */
+  isErrored?: boolean;
+  /**
+   *
+   */
+  isRequired?: boolean;
+  /**
+   *
+   */
+  isMenuLoading?: boolean;
+  /**
+   *
+   */
+  onCustomValueAdd?: (item: {
+    inputValue: string;
+    customValues: boolean;
+  }) => void;
+  /**
+   *
+   */
+  customValues?: boolean;
+  /**
+   *
+   */
+  id?: string;
+  /**
+   *
+   */
+  label?: string;
+  /**
+   *
+   */
+  placeholder?: string;
+  /**
+   *
+   */
+  useSelectProps?: UseSelectProps<T>;
+  /**
+   *
+   */
+  useComboboxProps?: UseComboboxProps<T>;
 }
-declare const Dropdown: <T extends DefaultDropdownItem$1>(props: DropdownProps<T>) => react_jsx_runtime.JSX.Element;
-/**
- * Primary UI component for user interaction
- */
-declare const DropdownButton: <T extends DefaultDropdownItem$1>({ itemIdentifier, label, id, items, onChange, placeholder, readOnly, disabled, isRequired, itemToString, itemToStringListItem, name, width, className, style, useSelectProps, defaultSelectedItem, isErrored, isMenuLoading, errorText, }: DropdownProps<T>) => react_jsx_runtime.JSX.Element;
-/**
- * Primary UI component for user interaction
- */
-declare const DropdownInput: <T extends DefaultDropdownItem$1>({ itemIdentifier, label, id, items, placeholder, readOnly, disabled, isRequired, hideClear, itemToString, name, filterKey, width, customValues, onCustomValueAdd, emptyItemsText, getCustomMessage, onChange, useComboboxProps, isErrored, errorText, defaultSelectedItem, isMenuLoading, }: DropdownProps<T>) => react_jsx_runtime.JSX.Element;
 
 interface CommonProps {
-    /**
-     * Is this a required field?
-     */
-    isRequired?: boolean;
-    /**
-     * Is this a error field?
-     */
-    isErrored?: boolean;
-    /**
-     * Error text to be shown
-     */
-    errorText?: string;
-    /**
-     * Id of the button
-     */
-    id?: string;
-    /**
-     * Id of the button
-     */
-    label?: string;
-    /**
-     * Label of the button
-     */
-    inline?: boolean;
-    maxLength?: number;
-    showCount?: boolean;
-    inputStyle?: React__default.CSSProperties;
-    startLabel?: React__default.ReactNode | any;
-    startAdornment?: React__default.ReactNode | any;
-    endLabel?: React__default.ReactNode | any;
-    endAdornment?: React__default.ReactNode | any;
-    labelProps?: LabelProps;
-    containerProps?: React__default.HTMLAttributes<HTMLDivElement>;
+  /**
+   * Is this a required field?
+   */
+  isRequired?: boolean;
+  /**
+   * Is this a error field?
+   */
+  isErrored?: boolean;
+  /**
+   * Error text to be shown
+   */
+  errorText?: string;
+  /**
+   * Id of the button
+   */
+  id?: string;
+  /**
+   * Id of the button
+   */
+  label?: string;
+  /**
+   * Label of the button
+   */
+  inline?: boolean;
+  /**
+   * The max length of the input
+   */
+  maxLength?: number;
+  /**
+   * Whether to show character count
+   */
+  showCount?: boolean;
+  inputStyle?: React.CSSProperties;
+  startLabel?: React.ReactNode | any;
+  startAdornment?: React.ReactNode | any;
+  endLabel?: React.ReactNode | any;
+  endAdornment?: React.ReactNode | any;
+  labelProps?: LabelProps;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
-interface InputProps extends CommonProps, React__default.InputHTMLAttributes<HTMLInputElement> {
-    ref?: React__default.Ref<HTMLInputElement>;
+
+interface InputProps
+  extends CommonProps,
+    React.InputHTMLAttributes<HTMLInputElement> {
+  ref?: React.Ref<HTMLInputElement>;
 }
-interface TextAreaProps extends CommonProps, React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    ref?: React__default.Ref<HTMLTextAreaElement>;
+
+interface TextAreaProps
+  extends CommonProps,
+    React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  ref?: React.Ref<HTMLTextAreaElement>;
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Input: ({ label, inline, startLabel, startAdornment, endLabel, endAdornment, isRequired, isErrored, showCount, inputStyle, style, errorText, ref, maxLength, labelProps, containerProps, ...props }: InputProps) => react_jsx_runtime.JSX.Element;
-/**
- * Primary UI component for user interaction
- */
-declare const TextArea: ({ label, inline, startLabel, startAdornment, endLabel, endAdornment, isRequired, isErrored, showCount, inputStyle, style, errorText, ref, maxLength, ...props }: TextAreaProps) => react_jsx_runtime.JSX.Element;
-
-declare const Loader: (props: LoaderPropTypes) => react_jsx_runtime.JSX.Element;
+
 type Sizes = 'mini' | 'small' | 'medium' | 'big';
 type Speeds = 'slow' | 'medium' | 'fast';
+
 type LoaderPropTypes = {
-    size?: Sizes;
-    speed?: Speeds;
+  /**
+   * Size of Select input
+   */
+  size?: Sizes;
+  /**
+   * Speed of Select input
+   */
+  speed?: Speeds;
+};
+
+interface MenuItemProps {
+  id: string;
+  name: string;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+type MenuProps<T extends MenuItemProps = MenuItemProps> = {
+  /**
+   * value of menu
+   */
+  value?: T;
+  /**
+   * Called when a menu item is selected
+   */
+  onSelect?: (option: T) => void;
+  closeMenuCallback?: () => void;
+  /**
+   * options for menu button
+   */
+  options?: Array<T>;
+  /**
+   * The children or label
+   */
+  trigger: React.ReactNode | string;
+  /**
+   * Is the button inline
+   * @deprecated
+   */
+  highlightedIndex?: number | null;
+  /**
+   * id Accessor of menu
+   */
+  idAccessor?: string;
+  /**
+   * name Accessor of menu
+   */
+  nameAccessor?: string;
+  /**
+   * Is the button inline
+   */
+  isOpen?: boolean;
+  /**
+   * should show the Arrow?
+   */
+  showArrow?: boolean;
 };
 
 type ModalAlignType = 'top' | 'center' | 'bottom';
 type ModalPositionType = 'left' | 'center' | 'right';
-type ModalSizeType = 'default' | 'medium' | 'small' | 'large' | 'x-large';
+type ModalSizeType =
+  | 'default'
+  | 'medium'
+  | 'small'
+  | 'large'
+  | 'x-large';
+
 interface ModalProps {
-    /**
-     * The children or label
-     */
-    children?: React__default.ReactNode | string;
-    /**
-     * Is the button inline
-     */
-    isOpen?: boolean;
-    /**
-     * Is the button inline
-     */
-    fullWidth?: boolean;
-    /**
-     * Is the button inline
-     */
-    align?: ModalAlignType;
-    /**
-     * Is the button inline
-     */
-    position?: ModalPositionType;
-    /**
-     * Is the button inline
-     */
-    size?: ModalSizeType;
-    /**
-     * How large should the button be?
-     */
-    onDismiss?: () => void;
-    /**
-     * The children or label
-     */
-    customClass?: string;
-    /**
-     * The children or label
-     */
-    customModalContentStyles?: React__default.CSSProperties;
+  /**
+   * The children or label
+   */
+  children?: React.ReactNode | string;
+  /**
+   * Is the button inline
+   */
+  isOpen?: boolean;
+  /**
+   * Is the button inline
+   */
+  fullWidth?: boolean;
+  /**
+   * Is the button inline
+   */
+  align?: ModalAlignType;
+  /**
+   * Is the button inline
+   */
+  position?: ModalPositionType;
+  /**
+   * Is the button inline
+   */
+  size?: ModalSizeType;
+  /**
+   * How large should the button be?
+   */
+  onDismiss?: () => void;
+  /**
+   * The children or label
+   */
+  customClass?: string;
+  /**
+   * The children or label
+   */
+  customModalContentStyles?: React.CSSProperties;
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Modal: ({ isOpen, children, align, customClass, fullWidth, customModalContentStyles, onDismiss, position, size, }: ModalProps) => react_jsx_runtime.JSX.Element;
-
-declare const useModal: (initialVisible?: boolean) => {
-    visible: boolean;
-    setVisible: Dispatch<SetStateAction<boolean>>;
-    currentRef: MutableRefObject<boolean>;
-    bindings: {
-        isOpen: boolean;
-        onDismiss: () => void;
-    };
-};
 
-type DefaultDropdownItem = {};
-interface MultiSelectDropdownProps<T extends DefaultDropdownItem> {
-    items?: Array<T>;
-    itemIdentifier?: string;
-    defaultSelectedItem?: T | null;
-    onChange?: (item?: T | null) => void;
-    itemToString: (item: T | null) => string;
-    /**
-     * Is the dropdown readonly
-     */
-    readOnly?: boolean;
-    /**
-     * Is the dropdown disabled
-     */
-    disabled?: boolean;
-    /**
-     * Is the dropdown disabled
-     */
-    name?: string;
-    width?: string;
-    filterKey?: string;
-    getCustomMessage?: (inoutValue: string) => string;
-    emptyItemsText?: string;
-    hideClear?: boolean;
-    errorText?: string;
-    isErrored?: boolean;
-    isRequired?: boolean;
-    isMenuLoading?: boolean;
-    handleInputChange?: (inputValue: string) => void;
-    onCustomValueAdd?: (item: {
-        inputValue: string;
-        customValues: boolean;
-    }) => void;
-    customValues?: boolean;
-    id?: string;
-    label?: string;
-    placeholder?: string;
-    useSelectProps?: UseSelectProps<T>;
-    useComboboxProps?: UseComboboxProps<T>;
-}
-/**
- * Primary UI component for user interaction
- */
-declare const MultiSelectDropdown: <T extends DefaultDropdownItem>({ itemIdentifier, label, id, items, onChange, placeholder, readOnly, disabled, isRequired, itemToString, name, filterKey, width, useSelectProps, emptyItemsText, getCustomMessage, onCustomValueAdd, customValues, hideClear, defaultSelectedItem, handleInputChange, isErrored, isMenuLoading, errorText, }: MultiSelectDropdownProps<T>) => react_jsx_runtime.JSX.Element;
+type DefaultMultiSelectDropdownItem = {};
 
-var css_248z = ".rdp{\n  --rdp-cell-size:40px;\n  --rdp-caption-font-size:18px;\n  --rdp-accent-color:#0000ff;\n  --rdp-background-color:#e7edff;\n  --rdp-accent-color-dark:#3003e1;\n  --rdp-background-color-dark:#180270;\n  --rdp-outline:2px solid var(--rdp-accent-color);\n  --rdp-outline-selected:3px solid var(--rdp-accent-color);\n  --rdp-selected-color:#fff;\n  margin:1em;\n}\n.rdp-vhidden{\n  box-sizing:border-box;\n  padding:0;\n  margin:0;\n  background:transparent;\n  border:0;\n  -moz-appearance:none;\n  -webkit-appearance:none;\n  appearance:none;\n  position:absolute !important;\n  top:0;\n  width:1px !important;\n  height:1px !important;\n  padding:0 !important;\n  overflow:hidden !important;\n  clip:rect(1px, 1px, 1px, 1px) !important;\n  border:0 !important;\n}\n.rdp-button_reset{\n  appearance:none;\n  position:relative;\n  margin:0;\n  padding:0;\n  cursor:default;\n  color:inherit;\n  background:none;\n  font:inherit;\n  -moz-appearance:none;\n  -webkit-appearance:none;\n}\n\n.rdp-button_reset:focus-visible{\n  outline:none;\n}\n\n.rdp-button{\n  border:2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected){\n  opacity:0.25;\n}\n\n.rdp-button:not([disabled]){\n  cursor:pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]){\n  color:inherit;\n  background-color:var(--rdp-background-color);\n  border:var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected){\n  background-color:var(--rdp-background-color);\n}\n\n.rdp-months{\n  display:flex;\n}\n\n.rdp-month{\n  margin:0 1em;\n}\n\n.rdp-month:first-child{\n  margin-left:0;\n}\n\n.rdp-month:last-child{\n  margin-right:0;\n}\n\n.rdp-table{\n  margin:0;\n  max-width:calc(var(--rdp-cell-size) * 7);\n  border-collapse:collapse;\n}\n\n.rdp-with_weeknumber .rdp-table{\n  max-width:calc(var(--rdp-cell-size) * 8);\n  border-collapse:collapse;\n}\n\n.rdp-caption{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  padding:0;\n  text-align:left;\n}\n\n.rdp-multiple_months .rdp-caption{\n  position:relative;\n  display:block;\n  text-align:center;\n}\n\n.rdp-caption_dropdowns{\n  position:relative;\n  display:inline-flex;\n}\n\n.rdp-caption_label{\n  position:relative;\n  z-index:1;\n  display:inline-flex;\n  align-items:center;\n  margin:0;\n  padding:0 0.25em;\n  white-space:nowrap;\n  color:currentColor;\n  border:0;\n  border:2px solid transparent;\n  font-family:inherit;\n  font-size:var(--rdp-caption-font-size);\n  font-weight:bold;\n}\n\n.rdp-nav{\n  white-space:nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav{\n  position:absolute;\n  top:50%;\n  left:0;\n  transform:translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav{\n  position:absolute;\n  top:50%;\n  right:0;\n  transform:translateY(-50%);\n}\n\n.rdp-nav_button{\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  width:var(--rdp-cell-size);\n  height:var(--rdp-cell-size);\n  padding:0.25em;\n  border-radius:100%;\n}\n.rdp-dropdown_year,\n.rdp-dropdown_month{\n  position:relative;\n  display:inline-flex;\n  align-items:center;\n}\n\n.rdp-dropdown{\n  -webkit-appearance:none;\n     -moz-appearance:none;\n          appearance:none;\n  position:absolute;\n  z-index:2;\n  top:0;\n  bottom:0;\n  left:0;\n  width:100%;\n  margin:0;\n  padding:0;\n  cursor:inherit;\n  opacity:0;\n  border:none;\n  background-color:transparent;\n  font-family:inherit;\n  font-size:inherit;\n  line-height:inherit;\n}\n\n.rdp-dropdown[disabled]{\n  opacity:unset;\n  color:unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label{\n  background-color:var(--rdp-background-color);\n  border:var(--rdp-outline);\n  border-radius:6px;\n}\n\n.rdp-dropdown_icon{\n  margin:0 0 0 5px;\n}\n\n.rdp-head{\n  border:0;\n}\n\n.rdp-head_row,\n.rdp-row{\n  height:100%;\n}\n\n.rdp-head_cell{\n  vertical-align:middle;\n  font-size:0.75em;\n  font-weight:700;\n  text-align:center;\n  height:100%;\n  height:var(--rdp-cell-size);\n  padding:0;\n  text-transform:uppercase;\n}\n\n.rdp-tbody{\n  border:0;\n}\n\n.rdp-tfoot{\n  margin:0.5em;\n}\n\n.rdp-cell{\n  width:var(--rdp-cell-size);\n  height:100%;\n  height:var(--rdp-cell-size);\n  padding:0;\n  text-align:center;\n}\n\n.rdp-weeknumber{\n  font-size:0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day{\n  display:flex;\n  overflow:hidden;\n  align-items:center;\n  justify-content:center;\n  box-sizing:border-box;\n  width:var(--rdp-cell-size);\n  max-width:var(--rdp-cell-size);\n  height:var(--rdp-cell-size);\n  margin:0;\n  border:2px solid transparent;\n  border-radius:100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside){\n  font-weight:bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover{\n  color:var(--rdp-selected-color);\n  opacity:1;\n  background-color:var(--rdp-accent-color);\n}\n\n.rdp-day_outside{\n  opacity:0.5;\n}\n\n.rdp-day_selected:focus-visible{\n  outline:var(--rdp-outline);\n  outline-offset:2px;\n  z-index:1;\n}\n\n.rdp:not([dir=rtl]) .rdp-day_range_start:not(.rdp-day_range_end){\n  border-top-right-radius:0;\n  border-bottom-right-radius:0;\n}\n\n.rdp:not([dir=rtl]) .rdp-day_range_end:not(.rdp-day_range_start){\n  border-top-left-radius:0;\n  border-bottom-left-radius:0;\n}\n\n.rdp[dir=rtl] .rdp-day_range_start:not(.rdp-day_range_end){\n  border-top-left-radius:0;\n  border-bottom-left-radius:0;\n}\n\n.rdp[dir=rtl] .rdp-day_range_end:not(.rdp-day_range_start){\n  border-top-right-radius:0;\n  border-bottom-right-radius:0;\n}\n\n.rdp-day_range_end.rdp-day_range_start{\n  border-radius:100%;\n}\n\n.rdp-day_range_middle{\n  border-radius:0;\n}\n\n\n.bp5-datepicker-content .rdp{\n  --rdp-cell-size:30px;\n  --rdp-accent-color:#2d72d2;\n  --rdp-background-color:#ffffff;\n  --rdp-accent-color-dark:#215db0;\n  --rdp-background-color-dark:#2f343c;\n  --rdp-outline:2px solid var(--rdp-accent-color);\n  --rdp-outline-selected:2px solid rgba(0, 0, 0, 75%);\n  margin:0;\n  min-width:auto;\n}\n.bp5-datepicker .rdp{\n  display:inline-block;\n  min-width:210px;\n  position:relative;\n  vertical-align:top;\n}\n.bp5-datepicker .rdp:focus{\n  outline:none;\n}\n.bp5-datepicker .rdp-month{\n  display:flex;\n  flex-direction:column;\n  margin:0 5px;\n  -webkit-user-select:none;\n     -moz-user-select:none;\n      -ms-user-select:none;\n          user-select:none;\n}\n.bp5-datepicker .rdp-month + .bp5-datepicker .rdp-month{\n  margin-left:10px;\n}\n.bp5-datepicker .rdp-caption{\n  border-bottom:solid 1px rgba(17, 20, 24, 0.15);\n  padding-bottom:5px;\n}\n.bp5-datepicker .rdp-table{\n  align-self:center;\n}\n.bp5-datepicker .rdp-head_cell{\n  font-size:inherit;\n  font-weight:600;\n  padding-top:5px;\n  text-decoration:none;\n  text-transform:none;\n}\n.bp5-datepicker .rdp-weeknumber{\n  color:#5f6b7c;\n}\n.bp5-datepicker .rdp-day{\n  border-radius:2px;\n}\n.bp5-datepicker .rdp-day.rdp-day_outside{\n  color:rgba(95, 107, 124, 0.6);\n}\n.bp5-datepicker .rdp-day.rdp-day_today{\n  font-weight:400;\n}\n.bp5-datepicker .rdp-day:not([disabled]):not(.rdp-day_selected):hover, .bp5-datepicker .rdp-day:not([disabled]):not(.rdp-day_selected):focus{\n  background:rgba(143, 153, 168, 0.15);\n  color:#1c2127;\n}\n.bp5-datepicker .rdp-day:not([disabled]):not(.rdp-day_selected):active{\n  background:rgba(143, 153, 168, 0.3);\n}\n.bp5-datepicker .rdp-day.rdp-day_disabled{\n  background:none;\n  color:rgba(95, 107, 124, 0.6);\n  cursor:not-allowed;\n}\n.bp5-datepicker .rdp-day.rdp-day_selected{\n  background-color:#2d72d2;\n  border-radius:2px;\n  color:#ffffff;\n}\n.bp5-datepicker .rdp-day.rdp-day_selected:hover{\n  background-color:#215db0;\n  color:#ffffff;\n}\n.bp5-datepicker .rdp-day.rdp-day_selected:active{\n  background-color:#184a90;\n}\n.bp5-datepicker.bp5-datepicker-highlight-current-day .rdp-day.rdp-day_today{\n  border:1px solid rgba(17, 20, 24, 0.15);\n}\n.bp5-datepicker.bp5-datepicker-reverse-month-and-year .rdp-caption_dropdowns{\n  flex-direction:row-reverse;\n}\n\n.bp5-datepicker-content{\n  align-items:center;\n  display:flex;\n  flex-direction:column;\n  gap:5px;\n}\n.bp5-datepicker-content > .bp5-divider{\n  margin:0;\n  width:calc(100% - 10px);\n}\n\n.bp5-datepicker-month-select select, .bp5-datepicker-year-select select{\n  font-weight:600;\n  padding-left:5px;\n  padding-right:16px;\n}\n.bp5-datepicker-month-select select + .bp5-icon, .bp5-datepicker-year-select select + .bp5-icon{\n  right:2px;\n}\n\n.bp5-datepicker-footer{\n  display:flex;\n  justify-content:space-between;\n  width:100%;\n}\n\n.bp5-dark .bp5-datepicker{\n  background:#2f343c;\n}\n.bp5-dark .bp5-datepicker .rdp-week-number{\n  color:#abb3bf;\n}\n.bp5-dark .bp5-datepicker .rdp-day.rdp-day_outside{\n  color:rgba(171, 179, 191, 0.6);\n}\n.bp5-dark .bp5-datepicker .rdp-day:not([disabled]):not(.rdp-day_selected):hover, .bp5-dark .bp5-datepicker .rdp-day:not([disabled]):not(.rdp-day_selected):focus{\n  background:rgba(143, 153, 168, 0.15);\n  color:#ffffff;\n}\n.bp5-dark .bp5-datepicker .rdp-day:not([disabled]):not(.rdp-day_selected):active{\n  background:rgba(143, 153, 168, 0.3);\n}\n.bp5-dark .bp5-datepicker .rdp-day.rdp-day_selected{\n  background-color:#2d72d2;\n}\n.bp5-dark .bp5-datepicker .rdp-day.rdp-day_selected:hover{\n  background-color:#215db0;\n}\n.bp5-dark .bp5-datepicker .rdp-day.rdp-day_selected:active{\n  background-color:#184a90;\n}\n.bp5-dark .bp5-datepicker .rdp-day.rdp-day_disabled{\n  background:none;\n  color:rgba(171, 179, 191, 0.6);\n}\n.bp5-dark .bp5-datepicker.bp5-datepicker-highlight-current-day .rdp-day.rdp-day_today{\n  border:1px solid rgba(255, 255, 255, 0.2);\n}\n.bp5-dark .bp5-datepicker .bp5-datepicker-footer{\n  border-top-color:rgba(17, 20, 24, 0.4);\n}\n\n.bp5-datepicker-timepicker-wrapper{\n  align-items:center;\n  display:flex;\n  flex-direction:column;\n}\n.bp5-datepicker-timepicker-wrapper .bp5-timepicker-arrow-row:empty + .bp5-timepicker-input-row{\n  margin:5px 0;\n}\n.bp5-datepicker-caption.rdp-caption{\n  display:flex;\n  flex-direction:row;\n  justify-content:space-between;\n  margin:0;\n}\n.bp5-datepicker-caption.rdp-caption > *{\n  flex-grow:0;\n  flex-shrink:0;\n}\n.bp5-datepicker-caption.rdp-caption > .bp5-fill{\n  flex-grow:1;\n  flex-shrink:1;\n}\n.bp5-datepicker-caption.rdp-caption .bp5-html-select select{\n  font-weight:600;\n  padding-left:5px;\n  padding-right:16px;\n}\n.bp5-datepicker-caption.rdp-caption .bp5-html-select select + .bp5-icon{\n  right:2px;\n}\n.bp5-datepicker-caption.rdp-caption + .bp5-divider{\n  margin:0;\n}\n.bp5-datepicker-caption.rdp-caption .bp5-datepicker-nav-button-hidden{\n  visibility:hidden;\n}\n\n.bp5-datepicker-month-select{\n  flex-shrink:1;\n}\n\n.bp5-datepicker-year-select{\n  flex-shrink:1;\n  min-width:60px;\n}\n\n.bp5-datepicker-caption-measure{\n  font-weight:600;\n  padding-left:5px;\n}\n.bp5-daterangepicker{\n}\n.bp5-daterangepicker.bp5-daterangepicker-contiguous .rdp{\n  min-width:220px;\n}\n.bp5-daterangepicker.bp5-daterangepicker-single-month .rdp{\n  min-width:210px;\n}\n.bp5-daterangepicker .rdp.rdp-multiple_months .rdp-caption{\n  display:flex;\n  flex-direction:row;\n  justify-content:space-between;\n}\n.bp5-daterangepicker .rdp.rdp-multiple_months .rdp-caption > *{\n  flex-grow:0;\n  flex-shrink:0;\n}\n.bp5-daterangepicker .rdp.rdp-multiple_months .rdp-caption > .bp5-fill{\n  flex-grow:1;\n  flex-shrink:1;\n}\n.bp5-daterangepicker .rdp.rdp-multiple_months .rdp-caption_start .rdp-caption{\n  flex-direction:row-reverse;\n}\n.bp5-daterangepicker .rdp.rdp-multiple_months .rdp-caption_start .rdp-caption::before{\n  content:\"\";\n  height:30px;\n  width:30px;\n}\n.bp5-daterangepicker .rdp.rdp-multiple_months .rdp-caption_end .rdp-caption{\n  flex-direction:row;\n}\n.bp5-daterangepicker .rdp.rdp-multiple_months .rdp-caption_end .rdp-caption::before{\n  content:\"\";\n  height:30px;\n  width:30px;\n}\n.bp5-daterangepicker .rdp.rdp-multiple_months .rdp-nav{\n  left:initial;\n  position:initial;\n  top:initial;\n  transform:none;\n}\n.bp5-daterangepicker.bp5-datepicker .rdp-day_outside{\n  visibility:hidden;\n}\n.bp5-daterangepicker.bp5-datepicker .rdp-day_hovered:not(.rdp-day_selected){\n  border-radius:0;\n  color:#215db0;\n}\n.bp5-daterangepicker.bp5-datepicker .rdp-day_hovered:not(.rdp-day_selected):not(.rdp-day_range_start):not(.rdp-day_range_middle):not(.rdp-day_range_end){\n  background-color:rgba(45, 114, 210, 0.1);\n}\n.bp5-daterangepicker.bp5-datepicker .rdp-day_range_middle{\n  background-color:rgba(45, 114, 210, 0.1);\n  border-radius:0;\n  color:#215db0;\n}\n.bp5-daterangepicker.bp5-datepicker .rdp-day_range_middle:hover{\n  background-color:rgba(45, 114, 210, 0.2);\n  color:#215db0;\n}\n.bp5-daterangepicker.bp5-datepicker .rdp-day_range_start:not(.rdp-day_range_end):not(.rdp-day_hovered_end){\n  border-bottom-right-radius:0;\n  border-top-right-radius:0;\n}\n.bp5-daterangepicker.bp5-datepicker .rdp-day_range_end:not(.rdp-day_range_start):not(.rdp_day_hovered_start){\n  border-bottom-left-radius:0;\n  border-top-left-radius:0;\n}\n.bp5-daterangepicker.bp5-datepicker .rdp-day_hovered_start:not(.rdp-day_hovered_end){\n  border-bottom-right-radius:0;\n  border-top-right-radius:0;\n}\n.bp5-daterangepicker.bp5-datepicker .rdp-day_hovered_end:not(.rdp-day_hovered_start){\n  border-bottom-left-radius:0;\n  border-top-left-radius:0;\n}\n.bp5-daterangepicker.bp5-datepicker-highlight-current-day .rdp-day.rdp-day_today{\n  border:1px solid rgba(17, 20, 24, 0.15);\n}\n.bp5-daterangepicker.bp5-daterangepicker-reverse-month-and-year.bp5-daterangepicker-contiguous .rdp-caption_dropdowns{\n  flex-direction:row-reverse;\n}\n\n.bp5-daterangepicker-timepickers.bp5-daterangepicker-timepickers-stacked{\n  align-items:center;\n  flex-direction:column;\n}\n\n.bp5-dark .bp5-daterangepicker.bp5-datepicker .rdp-day_hovered{\n  color:#f6f7f9;\n}\n.bp5-dark .bp5-daterangepicker.bp5-datepicker .rdp-day_hovered:not(.rdp-day_selected):not(.rdp-day_range_start):not(.rdp-day_range_middle):not(.rdp-day_range_end){\n  background-color:rgba(45, 114, 210, 0.2);\n}\n.bp5-dark .bp5-daterangepicker.bp5-datepicker .rdp-day_range_middle{\n  background-color:rgba(45, 114, 210, 0.2);\n  color:#f6f7f9;\n}\n.bp5-dark .bp5-daterangepicker.bp5-datepicker .rdp-day_range_middle:hover{\n  background-color:rgba(45, 114, 210, 0.4);\n}\n.bp5-dark .bp5-daterangepicker.bp5-datepicker-highlight-current-day .rdp-day.rdp-day_today{\n  border:1px solid rgba(255, 255, 255, 0.2);\n}";
-styleInject(css_248z);
+interface MultiSelectDropdownProps<
+  T extends DefaultMultiSelectDropdownItem,
+> {
+  /**
+   *  dropdown item content
+   */
+  items?: Array<T>;
+  /**
+   * Id of the item
+   */
+  itemIdentifier?: string;
+  /**
+   * default selected item of dropdown
+   */
+  defaultSelectedItem?: T | null;
+  /**
+   * Called when select an option or input value change
+   */
+  onChange?: (item?: T | null) => void;
+  itemToString: (item: T | null) => string;
+  /**
+   * Is the dropdown readonly
+   */
+  readOnly?: boolean;
+  /**
+   * Whether disabled select
+   */
+  disabled?: boolean;
+  /**
+   * name of the drowpdown
+   */
+  name?: string;
+  /**
+   * width of the multi select drowpdown
+   */
+  width?: string;
+
+  filterKey?: string;
+  getCustomMessage?: (inoutValue: string) => string;
+  /**
+   * Empty items text box
+   */
+  emptyItemsText?: string;
+  /**
+   * Whether to allow hide or clear when click
+   */
+  hideClear?: boolean;
+  /**
+   * Error text to be shown
+   */
+  errorText?: string;
+  /**
+   * Is this a error field?
+   */
+  isErrored?: boolean;
+  /**
+   * Is this a required field?
+   */
+  isRequired?: boolean;
+  /**
+   * Is menu loading?
+   */
+  isMenuLoading?: boolean;
+  handleInputChange?: (inputValue: string) => void;
+  onCustomValueAdd?: (item: {
+    inputValue: string;
+    customValues: boolean;
+  }) => void;
+  /**
+   * Is this custom value
+   */
+  customValues?: boolean;
+  /**
+   * id of the drowpdown
+   */
+  id?: string;
+  /**
+   * label for the drowpdown
+   */
+  label?: string;
+  placeholder?: string;
+  useSelectProps?: UseSelectProps<T>;
+  useComboboxProps?: UseComboboxProps<T>;
+}
 
 type DefaultProps = {
-    isRequired?: boolean;
-    isErrored?: boolean;
-    errorText?: string;
-    id?: string;
-    name?: string;
-    label?: string;
-    placeholder?: string;
-    disabled?: boolean;
+  /**
+   * Is this a required field?
+   */
+  isRequired?: boolean;
+  /**
+   * Is this a error field?
+   */
+  isErrored?: boolean;
+  /**
+   * Error text to be shown
+   */
+  errorText?: string;
+  /**
+   * Id of the date picker
+   */
+  id?: string;
+  /**
+   * name of the date picker
+   */
+  name?: string;
+  /**
+   * label for the picker
+   */
+  label?: string;
+  placeholder?: string;
+  /**
+   * Whether disabled select
+   */
+
+  disabled?: boolean;
 };
-type DatePickerProps = DefaultProps & Partial<DateInput3Props> & {
+
+type DatePickerProps = DefaultProps &
+  Partial<DateInput3Props> & {
     displayFormat?: string;
-};
-type DateRangePickerProps = DefaultProps & Partial<DateRangeInput3Props> & {
+    // showFooter?: boolean;
+  };
+
+type DateRangePickerProps = DefaultProps &
+  Partial<DateRangeInput3Props> & {
     displayFormat?: string;
-};
-type DateTimePickerProps = DefaultProps & Partial<DateInput3Props> & {
+    // showFooter?: boolean;
+  };
+
+type DateTimePickerProps = DefaultProps &
+  Partial<DateInput3Props> & {
     displayFormat?: string;
-};
-type DateTimeRangePickerProps = DefaultProps & Partial<DateRangeInput3Props> & {
+    // showFooter?: boolean;
+  };
+
+type DateTimeRangePickerProps = DefaultProps &
+  Partial<DateRangeInput3Props> & {
     displayFormat?: string;
-};
+    // showFooter?: boolean;
+  };
 
-declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
+type Origin = {
+  vertical?: 'top' | 'center' | 'bottom';
+  horizontal?: 'left' | 'center' | 'right';
+};
 
-declare const DateTimePicker: (props: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
+interface PopoverProps {
+  /**
+   * How large should the button be?
+   */
+  onClose?: (event?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  /**
+   * Which variant the button should be
+   */
+  id?: string;
+  /**
+   * The children or label
+   */
+  trigger: React.ReactNode | string;
+  /**
+   * The children or label
+   */
+  children?: React.ReactNode | string;
+  /**
+   * Is the button inline
+   */
+  hoverOutToClose?: boolean;
+  /**
+   * Is the button inline
+   */
+  hoverToOpen?: boolean;
 
-declare const DateRangePicker: (props: DateRangePickerProps) => react_jsx_runtime.JSX.Element;
+  /**
+   * Is the button inline
+   */
+  arrow?: boolean;
+  /**
+   * Is the button inline
+   */
+  avoidCollisions?: boolean;
+  /**
+   * Is the button inline
+   */
+  side?: RadixPopover.PopperContentProps['side'];
+  /**
+   * Is the button inline
+   */
+  align?: RadixPopover.PopperContentProps['align'];
+  /**
+   * Is the button inline
+   * @deprecated
+   */
+  anchorOrigin?: Origin;
+  /**
+   * Is the button inline
+   * * @deprecated
+   */
+  transformOrigin?: Origin;
+  /**
+   * Is the button inline
+   * * @deprecated
+   */
+  clickOutToClose?: boolean;
+  /**
+   * Is the button inline
+   * * @deprecated
+   */
+  autoCloseDuration?: number;
+}
 
-declare const DateTimeRangePicker: (props: DateTimeRangePickerProps) => react_jsx_runtime.JSX.Element;
+type RadioProps = {
+  /**
+   * Is the Radio button selected
+   */
+  selected?: boolean;
+  /**
+   * Function to be called when the selected item changes
+   */
+  onChange?: RadioGroupContextValue['onValueChange'];
+  /**
+   * Whether disabled select
+   */
+  disabled?: boolean;
+  /**
+   * label for the radio button
+   */
+  label?: string;
+  /**
+   * The class name of radio button
+   */
 
-type Origin = {
-    vertical?: 'top' | 'center' | 'bottom';
-    horizontal?: 'left' | 'center' | 'right';
+  className?: string;
+  /**
+   * Id of the button
+   */
+  id?: string;
 };
-interface PopoverProps {
-    /**
-     * How large should the button be?
-     */
-    onClose?: (event?: React__default.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /**
-     * Which variant the button should be
-     */
-    id?: string;
-    /**
-     * The children or label
-     */
-    trigger: React__default.ReactNode | string;
-    /**
-     * The children or label
-     */
-    children?: React__default.ReactNode | string;
-    /**
-     * Is the button inline
-     */
-    hoverOutToClose?: boolean;
-    /**
-     * Is the button inline
-     */
-    hoverToOpen?: boolean;
-    /**
-     * Is the button inline
-     */
-    arrow?: boolean;
-    /**
-     * Is the button inline
-     */
-    avoidCollisions?: boolean;
-    /**
-     * Is the button inline
-     */
-    side?: RadixPopover.PopperContentProps['side'];
-    /**
-     * Is the button inline
-     */
-    align?: RadixPopover.PopperContentProps['align'];
-    /**
-     * Is the button inline
-     * @deprecated
-     */
-    anchorOrigin?: Origin;
-    /**
-     * Is the button inline
-     * * @deprecated
-     */
-    transformOrigin?: Origin;
-    /**
-     * Is the button inline
-     * * @deprecated
-     */
-    clickOutToClose?: boolean;
-    /**
-     * Is the button inline
-     * * @deprecated
-     */
-    autoCloseDuration?: number;
-}
-/**
- * Primary UI component for user interaction
- */
-declare const Popover: ({ children, trigger, arrow, hoverOutToClose, align, hoverToOpen, avoidCollisions, side: s, anchorOrigin, autoCloseDuration, clickOutToClose, transformOrigin, }: PopoverProps) => react_jsx_runtime.JSX.Element;
 
 interface RadioItemProps {
-    id: string;
-    name: string;
-    hide?: boolean;
-    disabled?: boolean;
-    [key: string]: any;
+  id: string;
+  name: string;
+  hide?: boolean;
+  disabled?: boolean;
+  [key: string]: any;
 }
+
 type RadioGroupProps<T extends RadioItemProps = RadioItemProps> = {
-    options?: Array<T>;
-    idAccessor?: string;
-    defaultValue?: string;
-    value?: RadioGroupContextValue['value'];
-    onChange?: RadioGroupContextValue['onValueChange'];
-    nameAccessor?: string;
-    label?: string;
-    className?: string;
-    id?: string;
+  /**
+   * Select options
+   */
+  options?: Array<T>;
+  /**
+   * Id accessor of radio button
+   */
+  idAccessor?: string;
+  /**
+   * The default value
+   */
+  defaultValue?: string;
+  /**
+   * Value of radio button
+   */
+  value?: RadioGroupContextValue['value'];
+  /**
+   * Function to be called when the selected item changes
+   */
+  onChange?: RadioGroupContextValue['onValueChange'];
+  /**
+   * Name accesssor of radio button
+   */
+  nameAccessor?: string;
+  /**
+   * The description of the content
+   */
+  label?: string;
+  /**
+   * class Name of Radio button
+   */
+  className?: string;
+  /**
+   * Id of the button
+   */
+  id?: string;
+};
+
+type ReorderItemType = {
+  id: string | number;
+  [key: string]: any;
+};
+
+type ReorderProps<T extends ReorderItemType = ReorderItemType> = {
+  /**
+   * Items of reorder
+   */
+  items: T[];
+  /**
+   * Class name of reorder
+   */
+  className?: string;
+  /**
+   * Whether disabled select
+   */
+  disabled?: boolean;
+  /**
+   * should show the Dragger?
+   */
+  showDragger?: boolean;
+  customFilter?: (item: T) => boolean;
+  onReorder?: (items: T[]) => void;
+  customRender: (
+    item: T,
+    index: number,
+    listeners?: DraggableSyntheticListeners,
+  ) => React.ReactNode;
 };
-/**
- * Primary UI component for user interaction
- */
-declare const RadioGroup: ({ options, defaultValue, idAccessor, nameAccessor, onChange, className, id, label, value, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+
+type RowData = unknown | object | any[];
+
+interface TableProps<T extends RowData> {
+  /**
+   * How large should the button be?
+   */
+  data: CoreOptions<T>['data'];
+  columns: CoreOptions<T>['columns'];
+  showFooter?: boolean;
+  // count: number;
+  // pageSize: number;
+  // pageIndex?: number;
+  // columnOrder?: string[];
+  // hiddenColumns?: string[];
+  // selectedRowIds?: Record<string, boolean>;
+  // disableSelectMenuOptionIds?: string[];
+  // hideSelectMenuOptionIds?: string[];
+  // selectMenuOptions?: MenuItemProps[];
+  // selectMenuOptionsHandler?: (option: MenuItemProps) => void;
+  // setPageIndex?: (
+  //   pageIndex: number,
+  // ) => void | React.Dispatch<React.SetStateAction<number>>;
+  // setSelectedRowIds?: (
+  //   selectedRowIds: Record<string, boolean>,
+  // ) => void | React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+  // onRowClick?: (row: Row, column: ColumnInstance) => void;
+  // onNextPageClick?: () => void;
+  // onPreviousPageClick?: () => void;
+  // rowPropGetter?: (row: Row) => TableCommonProps;
+  // cellPropGetter?: (cell: Cell) => TableCommonProps;
+  // rowMenuOptions?: (rowData?: any) => MenuItemProps[];
+  // onSelectAllRows?: (checked: boolean) => void;
+  // onRowSelect?: (row: Row, checked: boolean) => void;
+  // onMenuOptionSelect?: (optionId: string, row: any) => void;
+  // tableOptions?: Partial<TableOptions<any>> &
+  //   UseRowSelectOptions<any> &
+  //   UsePaginationOptions<any>;
+  // enableNextPage?: boolean;
+  // enablePreviousPage?: boolean;
+  // isLoading?: boolean;
+  // isFetching?: boolean;
+  // hideActions?: boolean;
+  // hideFilters?: boolean;
+  // hideTableOnEmpty?: boolean;
+  // disableSelectMenuOptions?: boolean;
+  // disableRowSelect?: boolean;
+  // hideTopPagination?: boolean;
+  // showTableOnLoading?: boolean;
+  // indeterminateCount?: boolean;
+  // hideSelectAllInTable?: boolean;
+  // hideBottomPagination?: boolean;
+  // hideLoaderOnTopPagination?: boolean;
+  // dataKey?: string;
+  // loaderStyles?: React.CSSProperties;
+  // infoComponent?: React.ReactElement;
+  // actionComponent?: React.ReactElement;
+  // filterComponent?: React.ReactElement;
+  // headerComponent?: React.ReactElement;
+  // emptyComponent?: React.ReactElement;
+  // loadingComponent?: React.ReactElement;
+}
 
 interface TabsItemProps {
-    id: string;
-    name: string;
-    hide?: boolean;
-    disabled?: boolean;
-    [key: string]: any;
+  id: string;
+  name: string;
+  hide?: boolean;
+  disabled?: boolean;
+  [key: string]: any;
 }
+
 type TabsProps<T extends TabsItemProps = TabsItemProps> = {
-    options?: Array<T>;
-    renderTabsContent?: (tabOption: T) => React__default.ReactNode;
-    idAccessor?: string;
-    nameAccessor?: string;
-    ref?: React__default.RefObject<HTMLDivElement>;
-    value?: TabsProps$1['value'];
-    defaultValue?: TabsProps$1['defaultValue'];
-    onChange?: TabsProps$1['onValueChange'];
+  /**
+   * options for Tabs
+   */
+  options?: Array<T>;
+  renderTabsContent?: (tabOption: T) => React.ReactNode;
+  /**
+   * Id accessor of tabes
+   */
+  idAccessor?: string;
+  /**
+   * Name accessor of tabes
+   */
+  nameAccessor?: string;
+  ref?: React.RefObject<HTMLDivElement>;
+  /**
+   * value for tabs
+   */
+  value?: TabsProps$1['value'];
+  /**
+   * default value of tabes
+   */
+  defaultValue?: TabsProps$1['defaultValue'];
+  /**
+   * Function to be called when the selected item changes
+   */
+
+  onChange?: TabsProps$1['onValueChange'];
 };
-/**
- * Primary UI component for user interaction
- */
-declare const Tabs: ({ options, idAccessor, nameAccessor, onChange, defaultValue, renderTabsContent, value, }: TabsProps) => react_jsx_runtime.JSX.Element;
-
-interface TagProps extends React__default.HTMLAttributes<HTMLSpanElement> {
-    children?: React__default.ReactNode;
-    iconProps?: React__default.HTMLAttributes<HTMLDivElement>;
+
+interface TagProps {
+  /**
+   * State of the tag
+   */
+  state?: 'error' | 'default' | 'transparent';
+  /**
+   * Show border around the tag
+   */
+  showBorder?: boolean;
+  /**
+   * Image source for the avatar
+   */
+  avatarImgSrc?: string;
+  /**
+   * Image alt for the avatar
+   */
+  avatarImgAlt?: string;
+  /**
+   * Text for the avatar
+   */
+  avatarText?: string;
+  /**
+   * Function to be called when the tag is closed
+   */
+  onClose?: () => void;
+  /**
+   * Children of the tag
+   */
+  children?: React.ReactNode;
+  /**
+   * Props for the icon
+   */
+  iconProps?: React.HTMLAttributes<HTMLButtonElement>;
 }
-declare const Tag: ({ children, iconProps, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
-
-type BreakpointKeys = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type UiUnits = 'px' | 'rem' | 'em' | '%';
-type TypographyType = {
-    fontFamily: string;
-    fontSize: string;
-    fontWeight: number;
-    lineHeight: string | number;
-    letterSpacing: number;
-};
-type BaseColorVariantType = {
-    mildest: string;
-    mild: string;
-    main: string;
-};
-type ColorVariantType = BaseColorVariantType & {
-    bold: string;
-};
-type SemanticTypes = 'success' | 'warning' | 'error' | 'info' | 'highlight';
-type FuiTheme = {
-    breakpoints: {
-        keys: BreakpointKeys[];
-        values: Record<BreakpointKeys, number>;
-        unit: UiUnits;
-    };
-    colors: {
-        text: {
-            brand: string;
-            primary: string;
-            secondary: string;
-            disabled: string;
-            placeholder: string;
-            error: string;
-            inverse: string;
-            semantic: Record<SemanticTypes, string>;
-        };
-        icon: {
-            primary: string;
-            selected: string;
-            disabled: string;
-            inverse: string;
-            semantic: Record<SemanticTypes, string>;
-        };
-        fill: {
-            base: string;
-            container: string;
-            surface: string;
-            inverse: string;
-            brand: string;
-            semantic: Record<SemanticTypes, ColorVariantType>;
-        };
-        boundary: {
-            border: {
-                main: string;
-                mildest: string;
-            };
-            divider: string;
-            brand: string;
-            semantic: Record<SemanticTypes, BaseColorVariantType>;
-        };
-        shadow: string;
-        scrim: string;
-    };
-    shadows: string[];
-    transitions: {
-        easing: {
-            easeInOut: string;
-            easeOut: string;
-            easeIn: string;
-            sharp: string;
-        };
-        duration: {
-            shortest: number;
-            shorter: number;
-            short: number;
-            standard: number;
-            complex: number;
-            enteringScreen: number;
-            leavingScreen: number;
-        };
-    };
-    zIndex: {
-        mobileStepper: number;
-        fab: number;
-        speedDial: number;
-        appBar: number;
-        drawer: number;
-        modal: number;
-        snackbar: number;
-        tooltip: number;
-    };
-    typography: {
-        primary: TypographyType;
-        secondary: TypographyType;
-        h1: TypographyType;
-        h2: TypographyType;
-        h3: TypographyType;
-        h4: TypographyType;
-        h5: TypographyType;
-        h6: TypographyType;
-        body: TypographyType;
-        subtitle: TypographyType;
-        caption: TypographyType;
-        info: TypographyType;
-    };
-    components: {
-        button: {
-            variants: Record<ButtonVariant, {
-                from: string;
-                to: string;
-                color: string;
-                aBgColor: string;
-                dColor: string;
-                hoverColor: string;
-                borderColor: string;
-                aBorderColor: string;
-                dBorderColor: string;
-                dFrom: string;
-                dTo: string;
-            }>;
-            sizes: Record<ButtonSizeKey, {
-                height: string;
-                lineHeight: string;
-                fontSize: string;
-            }>;
-        };
-        tooltip: {
-            bgColor: string;
-            textColor: string;
-            fontSize: string;
-            fontWeight: number;
-            lineHeight: string;
-        };
-        input: {
-            border: {
-                normal: string;
-                hover: string;
-                active: string;
-                disabled: string;
-                error: string;
-            };
-            bgColor: string;
-            dBgColor: string;
-        };
-        dropdown: {
-            hilightColor: string;
-            hoverColor: string;
-            addColor: string;
-        };
-        loader: {
-            color: string;
-        };
-        tag: {
-            background: {
-                normal: string;
-                hover: string;
-                active: string;
-                disabled: string;
-                error: string;
-            };
-            color: {
-                normal: string;
-                hover: string;
-                active: string;
-                disabled: string;
-                error: string;
-            };
-            border: {
-                normal: string;
-                hover: string;
-                active: string;
-                disabled: string;
-                error: string;
-            };
-            actionButton: {
-                background: {
-                    normal: string;
-                    hover: string;
-                    active: string;
-                    disabled: string;
-                    error: string;
-                };
-                color: {
-                    normal: string;
-                    hover: string;
-                    active: string;
-                    disabled: string;
-                    error: string;
-                };
-            };
-        };
-        toggle: {
-            bg: string;
-            onBg: string;
-            offBg: string;
-            dOnBg: string;
-            dOffBg: string;
-            onHover: string;
-            offHover: string;
-        };
-        checkbox: {
-            bg: string;
-            border: string;
-            fill: string;
-        };
-    };
-};
 
 type ThemeProviderType<Theme> = React.ComponentType<{
-    children: React.ReactNode;
-    theme: Theme;
+  children: React.ReactNode;
+  theme: Theme;
 }>;
-declare const ThemeProvider: ThemeProviderType<FuiTheme>;
-declare const useTheme: () => FuiTheme;
 
-declare const ToastContainer: () => React__default.ReactPortal | null;
+type ToastTypes = 'success' | 'warning' | 'error' | 'info';
+
+interface ToastType {
+  /**
+   * How large should the button be?
+   */
+  text?: string;
+  /**
+   * How large should the button be?
+   */
+  type?: ToastTypes;
+  /**
+   * How large should the button be?
+   */
+  delay?: number;
+  /**
+   * How large should the button be?
+   */
+  customIcon?: React.ReactNode;
+  /**
+   * How large should the button be?
+   */
+  fixed?: boolean;
+  /**
+   * How large should the button be?
+   */
+  showProgress?: boolean;
+  // actions?: Array<ToastAction>;
+}
+
+type ToastWithID = ToastType & {
+  id: string;
+};
+
+type ToastItemProps = ToastWithID & {
+  index: number;
+};
+
+type UpdateToastsFunction<T> = (
+  fn: (toasts: Array<T>) => Array<T>,
+) => void;
+
+interface ToastContextType {
+  toasts: Array<ToastWithID>;
+  windowState: 'focus' | 'blur';
+  addToast: (toast: ToastType) => void;
+  updateToasts: (fn: (oldToasts: ToastWithID[]) => ToastWithID[]) => void;
+}
 
 type ToggleSizes = 'sm' | 'md' | 'lg';
-interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * The position of the tooltip
-     */
-    on?: boolean;
-    handleChange?: (on: boolean) => void;
-    size?: ToggleSizes;
-    hasIcon?: boolean;
-    thumbProps?: React.HTMLAttributes<HTMLSpanElement>;
-    isRequired?: boolean;
-    isErrored?: boolean;
+
+interface ToggleProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * The position of the tooltip
+   */
+  on?: boolean;
+  handleChange?: (on: boolean) => void;
+  /**
+   * Is the button inline
+   */
+  size?: ToggleSizes;
+  /**
+   * Is hasIcon enabled?
+   */
+  hasIcon?: boolean;
+  thumbProps?: React.HTMLAttributes<HTMLSpanElement>;
+  /**
+   * Is this a required field?
+   */
+  isRequired?: boolean;
+  /**
+   * Is this a error field?
+   */
+  isErrored?: boolean;
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Toggle: ({ handleChange, hasIcon, on, isErrored, isRequired, size, thumbProps, ...rest }: ToggleProps) => react_jsx_runtime.JSX.Element;
 
-type Position = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+type Position =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end';
+
 type Side = 'top' | 'right' | 'bottom' | 'left';
 type Align = 'start' | 'end' | 'center';
+
 interface TooltipProps {
-    /**
-     * HTML to be rendered in the tooltip
-     */
-    html?: React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>;
-    /**
-     * String to be rendered in the tooltip
-     */
-    label?: string;
-    /**
-     * The position of the tooltip
-     */
-    position: Position;
-    delay?: number;
-    arrow?: boolean;
-    disabled?: boolean;
-    className?: string;
-    style?: React$1.CSSProperties;
-    replaceChild?: boolean;
-    tabIndex?: number;
-    children?: React$1.ReactNode | string | null;
-    providerProps?: TooltipProviderProps;
-    rootProps?: TooltipProps$1;
-    arrowProps?: TooltipArrowProps;
+  /**
+   * HTML to be rendered in the tooltip
+   */
+  html?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+  /**
+   * String to be rendered in the tooltip
+   */
+  label?: string;
+  /**
+   * The position of the tooltip
+   */
+  position: Position;
+  delay?: number;
+  /**
+   * Whether to show the arrow,
+   */
+  arrow?: boolean;
+  /**
+   * Whether disabled select
+   */
+  disabled?: boolean;
+  /**
+   * Class name of tooltip
+   */
+  className?: string;
+  style?: React.CSSProperties;
+  /**
+   * The children or label
+   */
+  replaceChild?: boolean;
+  tabIndex?: number;
+  children?: React.ReactNode | string | null;
+  providerProps?: TooltipProviderProps;
+  rootProps?: TooltipProps$1;
+  arrowProps?: TooltipArrowProps;
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Tooltip: ({ position, label, html, style, children, className, disabled, delay, arrow, replaceChild, providerProps, rootProps, }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
-type BaseProps = Pick<TransitionProps$1, 'in' | 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'unmountOnExit' | 'timeout'>;
+type BaseProps = Pick<
+  TransitionProps$1,
+  | 'in'
+  | 'onEnter'
+  | 'onEntering'
+  | 'onEntered'
+  | 'onExit'
+  | 'onExiting'
+  | 'onExited'
+  | 'unmountOnExit'
+  | 'timeout'
+>;
+
 interface TransitionProps extends BaseProps {
-    transition?: string;
-    children: (styles: React$1.CSSProperties) => React$1.ReactNode;
-    styles: TransitionStyles;
+  transition?: string;
+  children: (styles: React.CSSProperties) => React.ReactNode;
+  styles: TransitionStyles;
 }
+
 type TransitionStyleState = 'init' | 'entered' | 'exiting';
+
 type TransitionStyles = {
-    [K in TransitionStyleState]?: React$1.CSSProperties;
+  [K in TransitionStyleState]?: React.CSSProperties;
 };
 
-declare function Transition(props: TransitionProps): react_jsx_runtime.JSX.Element;
 
-type FadeProps = Omit<TransitionProps, 'styles' | 'timeout'> & {
-    timeout?: number;
-};
-declare function Fade(props: FadeProps): react_jsx_runtime.JSX.Element;
+type SlidePlacement = 'left' | 'right' | 'bottom' | 'top';
 
-type Placement = 'left' | 'right' | 'bottom' | 'top';
 type SlideProps = Omit<TransitionProps, 'styles' | 'timeout'> & {
-    /** The direction to slide drawer from */
-    placement?: Placement;
-    /** The transition timeout */
-    timeout?: number;
+  /** The direction to slide drawer from */
+  placement?: SlidePlacement;
+  /** The transition timeout */
+  timeout?: number;
+};
+
+type FadeProps = Omit<TransitionProps, 'styles' | 'timeout'> & {
+  timeout?: number;
 };
-declare function Slide(props: SlideProps): react_jsx_runtime.JSX.Element;
-
-interface SlideFadeProps extends Omit<TransitionProps, 'styles' | 'timeout'> {
-    /**
-     * The initial offset to slide from
-     */
-    initialOffset?: string;
-    /**
-     * The transition timeout
-     */
-    timeout?: number;
+
+interface SlideFadeProps
+  extends Omit<TransitionProps, 'styles' | 'timeout'> {
+  /**
+   * The initial offset to slide from
+   */
+  initialOffset?: string;
+  /**
+   * The transition timeout
+   */
+  timeout?: number;
+}
+
+type TypographyWeightType = 'regular' | 'bold' | 'semi-bold';
+
+type TypographyVariantType =
+  | 'primary'
+  | 'secondary'
+  | 'heading'
+  | 'heading1'
+  | 'heading2'
+  | 'heading3'
+  | 'heading4'
+  | 'caption';
+
+interface TypographyProps
+  extends React.HtmlHTMLAttributes<HTMLSpanElement> {
+  /**
+   * The children or label
+   */
+  children?: React.ReactNode | string;
+  variant?: TypographyVariantType;
+  weight?: TypographyWeightType;
 }
-declare const SlideFade: (props: SlideFadeProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, type Align, type BaseProps, Button, type ButtonProps, type ButtonSizeKey, type ButtonVariant, Checkbox, type CheckboxProps, Confirmation, type ConfirmationProps, DatePicker, DateRangePicker, DateTimePicker, DateTimeRangePicker, Dropdown, DropdownButton, DropdownInput, type DropdownProps, type DropdownTypes, Fade, type FadeProps, Input, type LevelType, Loader, Modal, type ModalAlignType, type ModalPositionType, type ModalProps, type ModalSizeType, MultiSelectDropdown, type MultiSelectDropdownProps, Popover, type PopoverProps, type Position, RadioGroup, type RadioItemProps, type Side, Slide, SlideFade, type SlideFadeProps, type SlideProps, Tabs, type TabsItemProps, Tag, TextArea, ThemeProvider, ToastContainer, Toggle, type ToggleProps, type ToggleSizes, Tooltip, type TooltipProps, Transition, type TransitionProps, type TransitionStyleState, type TransitionStyles, useConfirmation, useModal, useTheme };
+export type { AlertProps, Align, BaseProps, ButtonProps, ButtonSizeKey, ButtonVariant, CheckboxProps, ConfirmationProps, DatePickerProps, DateRangePickerProps, DateTimePickerProps, DateTimeRangePickerProps, DefaultDropdownItem, DefaultMultiSelectDropdownItem, DefaultProps, DrawerPlacement, DrawerProps, DrawerSizeType, DropdownProps, DropdownTypes, FadeProps, InputProps, LevelType, LoaderPropTypes, MenuItemProps, MenuProps, ModalAlignType, ModalPositionType, ModalProps, ModalSizeType, MultiSelectDropdownProps, Origin, PopoverProps, Position, RadioGroupProps, RadioItemProps, RadioProps, ReorderItemType, ReorderProps, RowData, Side, Sizes, SlideFadeProps, SlidePlacement, SlideProps, Speeds, TableProps, TabsItemProps, TabsProps, TagProps, TextAreaProps, ThemeProviderType, ToastContextType, ToastItemProps, ToastType, ToastTypes, ToastWithID, ToggleProps, ToggleSizes, TooltipProps, TransitionProps, TransitionStyleState, TransitionStyles, TypographyProps, TypographyVariantType, TypographyWeightType, UpdateToastsFunction };