freemium-ui 1.0.334 → 2.0.0-beta.0

package/lib/index.d.ts

@@ -0,0 +1,833 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { Dispatch, SetStateAction, MutableRefObject } from 'react';
+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 { 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;
+};
+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;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 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;
+}
+/**
+ * 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;
+}
+/**
+ * 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>;
+}
+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>;
+}
+interface InputProps extends CommonProps, React__default.InputHTMLAttributes<HTMLInputElement> {
+    ref?: React__default.Ref<HTMLInputElement>;
+}
+interface TextAreaProps extends CommonProps, React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    ref?: React__default.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;
+};
+
+type ModalAlignType = 'top' | 'center' | 'bottom';
+type ModalPositionType = 'left' | 'center' | 'right';
+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;
+}
+/**
+ * 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;
+
+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);
+
+type DefaultProps = {
+    isRequired?: boolean;
+    isErrored?: boolean;
+    errorText?: string;
+    id?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+};
+type DatePickerProps = DefaultProps & Partial<DateInput3Props> & {
+    displayFormat?: string;
+};
+type DateRangePickerProps = DefaultProps & Partial<DateRangeInput3Props> & {
+    displayFormat?: string;
+};
+type DateTimePickerProps = DefaultProps & Partial<DateInput3Props> & {
+    displayFormat?: string;
+};
+type DateTimeRangePickerProps = DefaultProps & Partial<DateRangeInput3Props> & {
+    displayFormat?: string;
+};
+
+declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
+
+declare const DateTimePicker: (props: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
+
+declare const DateRangePicker: (props: DateRangePickerProps) => react_jsx_runtime.JSX.Element;
+
+declare const DateTimeRangePicker: (props: DateTimeRangePickerProps) => react_jsx_runtime.JSX.Element;
+
+type Origin = {
+    vertical?: 'top' | 'center' | 'bottom';
+    horizontal?: 'left' | 'center' | 'right';
+};
+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;
+}
+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;
+};
+/**
+ * Primary UI component for user interaction
+ */
+declare const RadioGroup: ({ options, defaultValue, idAccessor, nameAccessor, onChange, className, id, label, value, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+
+interface TabsItemProps {
+    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'];
+};
+/**
+ * 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>;
+}
+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;
+}>;
+declare const ThemeProvider: ThemeProviderType<FuiTheme>;
+declare const useTheme: () => FuiTheme;
+
+declare const ToastContainer: () => React__default.ReactPortal | null;
+
+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;
+}
+/**
+ * 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 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;
+}
+/**
+ * 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'>;
+interface TransitionProps extends BaseProps {
+    transition?: string;
+    children: (styles: React$1.CSSProperties) => React$1.ReactNode;
+    styles: TransitionStyles;
+}
+type TransitionStyleState = 'init' | 'entered' | 'exiting';
+type TransitionStyles = {
+    [K in TransitionStyleState]?: React$1.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 Placement = 'left' | 'right' | 'bottom' | 'top';
+type SlideProps = Omit<TransitionProps, 'styles' | 'timeout'> & {
+    /** The direction to slide drawer from */
+    placement?: Placement;
+    /** The transition 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;
+}
+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 };