@undefine-ui/design-system 2.14.1 → 2.15.0

package/dist/index.d.cts

@@ -1,10 +1,12 @@
 import * as react from 'react';
 import { SetStateAction, ElementType, CSSProperties, ReactNode, SyntheticEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Breakpoint, Shadows, Components, Theme, CssVarsTheme, SxProps as SxProps$1 } from '@mui/material/styles';
-import * as _mui_material from '@mui/material';
-import { SxProps, Theme as Theme$1 } from '@mui/material';
+import { Breakpoint, Shadows, Components, Theme, SxProps, CssVarsTheme } from '@mui/material/styles';
 import { BoxProps } from '@mui/material/Box';
+import { StackProps } from '@mui/material/Stack';
+import { TypographyProps } from '@mui/material/Typography';
+import * as _mui_material from '@mui/material';
+import { SxProps as SxProps$1, Theme as Theme$1 } from '@mui/material';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import { DataGridProps } from '@mui/x-data-grid';
 import { DropzoneOptions } from 'react-dropzone';
@@ -1100,902 +1102,912 @@ interface CustomSpacingOptions {
 }
 declare function customSpacing(baseSpacing: number): CustomSpacingOptions;
 
+declare const Eye: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const Copy: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const Trash: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const XMark: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const Loader: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const Search: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const Settings: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const UserFill: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const EyeClosed: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const KeyCommand: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const XMarkSolid: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const CloudUpload: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const UserOutline: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const RadioSelect: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const RadioDefault: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const NavArrowDown: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const NavArrowLeft: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const NavArrowRight: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const ClipboardCheck: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const CheckboxSelect: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const InfoCircleFill: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const CheckboxDefault: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const BellNotification: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const InfoCircleOutline: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const LongArrowUpLeftSolid: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const CheckboxIndeterminate: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const Icons_BellNotification: typeof BellNotification;
+declare const Icons_CheckboxDefault: typeof CheckboxDefault;
+declare const Icons_CheckboxIndeterminate: typeof CheckboxIndeterminate;
+declare const Icons_CheckboxSelect: typeof CheckboxSelect;
+declare const Icons_ClipboardCheck: typeof ClipboardCheck;
+declare const Icons_CloudUpload: typeof CloudUpload;
+declare const Icons_Copy: typeof Copy;
+declare const Icons_Eye: typeof Eye;
+declare const Icons_EyeClosed: typeof EyeClosed;
+declare const Icons_InfoCircleFill: typeof InfoCircleFill;
+declare const Icons_InfoCircleOutline: typeof InfoCircleOutline;
+declare const Icons_KeyCommand: typeof KeyCommand;
+declare const Icons_Loader: typeof Loader;
+declare const Icons_LongArrowUpLeftSolid: typeof LongArrowUpLeftSolid;
+declare const Icons_NavArrowDown: typeof NavArrowDown;
+declare const Icons_NavArrowLeft: typeof NavArrowLeft;
+declare const Icons_NavArrowRight: typeof NavArrowRight;
+declare const Icons_RadioDefault: typeof RadioDefault;
+declare const Icons_RadioSelect: typeof RadioSelect;
+declare const Icons_Search: typeof Search;
+declare const Icons_Settings: typeof Settings;
+declare const Icons_Trash: typeof Trash;
+declare const Icons_UserFill: typeof UserFill;
+declare const Icons_UserOutline: typeof UserOutline;
+declare const Icons_XMark: typeof XMark;
+declare const Icons_XMarkSolid: typeof XMarkSolid;
+declare namespace Icons {
+  export { Icons_BellNotification as BellNotification, Icons_CheckboxDefault as CheckboxDefault, Icons_CheckboxIndeterminate as CheckboxIndeterminate, Icons_CheckboxSelect as CheckboxSelect, Icons_ClipboardCheck as ClipboardCheck, Icons_CloudUpload as CloudUpload, Icons_Copy as Copy, Icons_Eye as Eye, Icons_EyeClosed as EyeClosed, Icons_InfoCircleFill as InfoCircleFill, Icons_InfoCircleOutline as InfoCircleOutline, Icons_KeyCommand as KeyCommand, Icons_Loader as Loader, Icons_LongArrowUpLeftSolid as LongArrowUpLeftSolid, Icons_NavArrowDown as NavArrowDown, Icons_NavArrowLeft as NavArrowLeft, Icons_NavArrowRight as NavArrowRight, Icons_RadioDefault as RadioDefault, Icons_RadioSelect as RadioSelect, Icons_Search as Search, Icons_Settings as Settings, Icons_Trash as Trash, Icons_UserFill as UserFill, Icons_UserOutline as UserOutline, Icons_XMark as XMark, Icons_XMarkSolid as XMarkSolid };
+}
+
+type IconType = keyof typeof Icons;
+
+type IconProps = BoxProps & {
+    icon: IconType;
+};
+declare const Icon: ({ icon, className, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const iconClasses: {
+    root: string;
+};
+
+interface LogoProps extends BoxProps {
+    disableLink?: boolean;
+    isFull?: boolean;
+    isWhite?: boolean;
+    isBlack?: boolean;
+    href?: string;
+    LinkComponent?: ElementType;
+    src?: string;
+    alt?: string;
+}
+declare const Logo: ({ sx, isFull, isWhite, isBlack, disableLink, LinkComponent, href, src, alt, ...rest }: LogoProps) => react_jsx_runtime.JSX.Element;
+declare const AnimatedLogo: () => react_jsx_runtime.JSX.Element;
+
 interface DataTableProps extends Omit<DataGridProps, 'rows'> {
     data: any[];
-    toggleFilters?: () => void;
+    showFooter?: boolean;
 }
 declare const Table: (props: DataTableProps) => react_jsx_runtime.JSX.Element;
 
-interface TableNoRowsProps {
-    noRowsTitle?: React.ReactNode;
+interface EmptyContentProps extends StackProps {
+    title?: string;
+    imgUrl?: string;
+    filled?: boolean;
+    description?: string;
+    action?: React.ReactNode;
+    slotProps?: {
+        img?: BoxProps['sx'];
+        title?: TypographyProps['sx'];
+        description?: TypographyProps['sx'];
+    };
 }
+declare const EmptyContent: ({ sx, imgUrl, action, filled, slotProps, description, title, ...rest }: EmptyContentProps) => react_jsx_runtime.JSX.Element;
 
 declare const TablePagination: () => react_jsx_runtime.JSX.Element;
 
-type GreyColorVariants = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | 'A100' | 'A200' | 'A400' | 'A700';
-type GreyChannelSuffix = {
-    [K in GreyColorVariants as `${K}Channel`]: string;
-};
-declare module '@mui/material/styles' {
-    interface TypeBackground {
-        neutral: string;
-    }
-    interface Color extends GreyChannelSuffix {
-    }
-    interface CommonColors {
-        whiteChannel: string;
-        blackChannel: string;
-    }
-    interface CssVarsPalette {
-        neutral: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-            light: string;
-            main: string;
-            dark: string;
-            contrastText: string;
-            '50Channel': string;
-            '100Channel': string;
-            '200Channel': string;
-            '300Channel': string;
-            '400Channel': string;
-            '500Channel': string;
-            '600Channel': string;
-            '700Channel': string;
-            '800Channel': string;
-            '900Channel': string;
-            '950Channel': string;
-            lightChannel: string;
-            mainChannel: string;
-            darkChannel: string;
-        };
-        surface: {
-            page: string;
-            subtle: string;
-            primary: string;
-            secondary: string;
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-            disable: string;
-            pageChannel: string;
-            subtleChannel: string;
-            primaryChannel: string;
-            secondaryChannel: string;
-            infoChannel: string;
-            successChannel: string;
-            warningChannel: string;
-            errorChannel: string;
-            disableChannel: string;
-        };
-        border: {
-            default: string;
-            focus: string;
-            subtle: string;
-            primary: string;
-            secondary: string;
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-            mute: string;
-            defaultChannel: string;
-            focusChannel: string;
-            subtleChannel: string;
-            primaryChannel: string;
-            secondaryChannel: string;
-            infoChannel: string;
-            successChannel: string;
-            warningChannel: string;
-            errorChannel: string;
-            muteChannel: string;
-        };
-        icon: {
-            white: string;
-            black: string;
-            secondary: string;
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-            disable: string;
-            whiteChannel: string;
-            blackChannel: string;
-            primaryChannel: string;
-            secondaryChannel: string;
-            infoChannel: string;
-            successChannel: string;
-            warningChannel: string;
-            errorChannel: string;
-            disableChannel: string;
-        };
-    }
-    interface SimplePaletteColorOptions {
-        50?: string;
-        100?: string;
-        200?: string;
-        300?: string;
-        400?: string;
-        500?: string;
-        600?: string;
-        700?: string;
-        800?: string;
-        900?: string;
-        950?: string;
-    }
-    interface PaletteColor {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    }
-    interface PaletteColorChannel {
-        '50Channel': string;
-        '100Channel': string;
-        '200Channel': string;
-        '300Channel': string;
-        '400Channel': string;
-        '500Channel': string;
-        '600Channel': string;
-        '700Channel': string;
-        '800Channel': string;
-        '900Channel': string;
-        '950Channel': string;
-    }
-    interface TypeText {
-        header: string;
-        body: string;
-        placeholder: string;
-        action: string;
-        disable: string;
-        info: string;
-        hyperlinks: string;
-        success: string;
-        warning: string;
-        error: string;
-        headerChannel: string;
-        bodyChannel: string;
-        placeholderChannel: string;
-        actionChannel: string;
-        disableChannel: string;
-        infoChannel: string;
-        hyperlinksChannel: string;
-        successChannel: string;
-        warningChannel: string;
-        errorChannel: string;
-    }
-    interface Theme {
-        customShadows: CustomShadowOptions;
-        radius: RadiusOptions;
-        customSpacing: CustomSpacingOptions;
-        vars: NonNullable<CssVarsTheme['vars']>;
-    }
-    interface ThemeOptions {
-        customShadows?: CustomShadowOptions;
-        radius?: RadiusOptions;
-        customSpacing?: CustomSpacingOptions;
-        vars?: CssVarsTheme['vars'];
-    }
-    interface TypographyVariants {
-        fontSecondaryFamily: React.CSSProperties['fontFamily'];
-        fontTertiaryFamily: React.CSSProperties['fontFamily'];
-        fontWeightSemiBold: React.CSSProperties['fontWeight'];
-        displayLarge: React.CSSProperties;
-        displaySmall: React.CSSProperties;
-        h7: React.CSSProperties;
-        h8: React.CSSProperties;
-        bodyXl: React.CSSProperties;
-        bodyLg: React.CSSProperties;
-        bodyMd: React.CSSProperties;
-        bodySm: React.CSSProperties;
-        bodyXs: React.CSSProperties;
-        kpiValue: React.CSSProperties;
-    }
-    interface BreakpointOverrides {
-        '2xl': true;
-    }
-}
-declare module '@mui/material/Avatar' {
-    interface AvatarPropsVariantOverrides {
-        userSm: true;
-        userMd: true;
-        userLg: true;
-        brandXs: true;
-        brandSm: true;
-        brandMd: true;
-        brandLg: true;
-        brandInitialXs: true;
-        brandInitialSm: true;
-        brandInitialMd: true;
-        brandInitialLg: true;
-    }
+type ImageStatus = 'idle' | 'loading' | 'loaded' | 'error';
+interface ImageProps extends Omit<BoxProps, 'component' | 'children' | 'position'> {
+    src: string;
+    alt: string;
+    /**
+     * Load the image only when it enters the viewport.
+     * Defaults to true.
+     */
+    lazy?: boolean;
+    /**
+     * Fallback URL used when the main source fails to load.
+     */
+    fallbackSrc?: string;
+    /**
+     * Responsive image sources for different screen sizes/resolutions.
+     * Example: "image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w"
+     */
+    srcSet?: string;
+    /**
+     * Sizes attribute for responsive images. Defines which image size to use at different viewport widths.
+     * Example: "(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
+     */
+    sizes?: string;
+    /**
+     * Aspect ratio (e.g. "16 / 9" or 1.5) applied to the wrapper to avoid layout shift.
+     */
+    aspectRatio?: number | string;
+    /**
+     * Controls object-fit of the underlying image. Defaults to "cover".
+     */
+    fit?: CSSProperties['objectFit'];
+    /**
+     * Controls object-position of the underlying image. Defaults to "center".
+     */
+    position?: CSSProperties['objectPosition'];
+    /**
+     * Optional overlay content rendered above the image.
+     */
+    overlay?: ReactNode;
+    /**
+     * Enables overlay even when overlay content is not provided.
+     */
+    withOverlay?: boolean;
+    /**
+     * Custom loading indicator shown before the image is loaded.
+     */
+    loadingIndicator?: ReactNode;
+    /**
+     * Custom error fallback content when both src and fallbackSrc fail.
+     */
+    renderError?: ReactNode;
+    /**
+     * Additional styles for the underlying image element.
+     */
+    imgSx?: BoxProps['sx'];
+    /**
+     * Additional props for the underlying image element.
+     */
+    imgProps?: Omit<BoxProps<'img'>, 'component' | 'sx' | 'ref' | 'src' | 'alt' | 'children'>;
+    /**
+     * Root margin passed to the IntersectionObserver. Defaults to "200px".
+     */
+    observerMargin?: string;
+    /**
+     * Callback fired when the image fails to load.
+     */
+    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
 }
-declare module '@mui/material/AvatarGroup' {
-    interface AvatarGroupPropsVariantOverrides {
-        compact: true;
-    }
+
+declare const Image: react.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & react.RefAttributes<HTMLImageElement>>;
+
+interface UploadProps extends DropzoneOptions {
+    error?: boolean;
+    sx?: SxProps<Theme>;
+    placeholder?: React.ReactNode;
+    helperText?: React.ReactNode;
+    disableMultiple?: boolean;
+    value?: File | string | null | Array<File | string>;
+    onDelete?: VoidFunction;
+    onUpload?: VoidFunction;
+    onRemove?: (file: File | string) => void;
+    onRemoveAll?: VoidFunction;
+    isUploading?: boolean;
+    uploadProgress?: number;
 }
-declare module '@mui/material/Button' {
-    interface ButtonPropsVariantOverrides {
-        primary: true;
-        secondary: true;
-        tertiary: true;
-    }
-    interface ButtonPropsColorOverrides {
-        neutral: true;
-    }
+
+declare const Upload: ({ sx, value, error, disabled, onDelete, onUpload, onRemove, helperText, onRemoveAll, uploadProgress, isUploading, multiple, ...rest }: UploadProps) => react_jsx_runtime.JSX.Element;
+
+interface FormProps<T extends FieldValues> extends Omit<BoxProps, 'onSubmit'> {
+    children: React.ReactNode;
+    methods: UseFormReturn<T>;
+    onSubmit?: SubmitHandler<T>;
 }
-declare module '@mui/material/ButtonGroup' {
-    interface ButtonGroupPropsVariantOverrides {
-        primary: true;
-        secondary: true;
-        tertiary: true;
-    }
+declare const Form: <T extends FieldValues>({ children, onSubmit, methods, ...rest }: FormProps<T>) => react_jsx_runtime.JSX.Element;
+
+interface RHFAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> extends AutocompleteProps<T, Multiple, DisableClearable, FreeSolo> {
+    name: string;
+    label?: string;
+    required?: boolean;
+    placeholder?: string;
+    helperText?: React.ReactNode;
+    handleChange?: (val: any) => void;
 }
-declare module '@mui/material/Fab' {
-    interface FabPropsVariantOverrides {
-        outlined: true;
-        outlinedExtended: true;
-        soft: true;
-        softExtended: true;
-    }
+declare const RHFAutocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ name, label, required, placeholder, helperText, handleChange, ...other }: Omit<RHFAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput">) => react_jsx_runtime.JSX.Element;
+
+interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'name' | 'control' | 'slotProps'> {
+    name: string;
+    description?: string;
+    helperText?: React.ReactNode;
+    slotProps?: {
+        wrap?: BoxProps['sx'];
+        checkbox?: CheckboxProps;
+        formLabel?: FormLabelProps;
+        formHelperText?: FormHelperTextProps;
+    };
 }
-declare module '@mui/material/Badge' {
-    interface BadgePropsVariantOverrides {
-        alway: true;
-        busy: true;
-        online: true;
-        offline: true;
-        invisible: true;
-    }
+declare const RHFCheckbox: ({ name, description, helperText, label, sx, slotProps, ...other }: RHFCheckboxProps) => react_jsx_runtime.JSX.Element;
+interface RHFMultiCheckboxOption {
+    label: string;
+    value: string | number;
+    description?: string;
 }
-declare module '@mui/material/Badge' {
-    interface BadgePropsVariantOverrides {
-        alway: true;
-        busy: true;
-        online: true;
-        offline: true;
-        invisible: true;
-    }
+interface RHFMultiCheckboxProps extends Omit<FormGroupProps, 'children'> {
+    name: string;
+    label?: string;
+    options: RHFMultiCheckboxOption[];
+    helperText?: React.ReactNode;
+    row?: boolean;
+    slotProps?: {
+        formControl?: FormControlProps;
+        checkbox?: CheckboxProps;
+        formLabel?: FormLabelProps;
+        formHelperText?: FormHelperTextProps;
+    };
 }
-declare module '@mui/material/Chip' {
-    interface ChipPropsVariantOverrides {
-        soft: true;
-    }
-    interface ChipPropsColorOverrides {
-        neutral: true;
-    }
+declare const RHFMultiCheckbox: ({ name, label, options, slotProps, helperText, row, ...other }: RHFMultiCheckboxProps) => react_jsx_runtime.JSX.Element;
+
+interface RHFRadioGroupOption {
+    label: string;
+    value: string | number;
+    description?: string;
 }
-declare module '@mui/material/Pagination' {
-    interface PaginationPropsVariantOverrides {
-        soft: true;
-    }
-    interface PaginationPropsColorOverrides {
-        info: true;
-        success: true;
-        warning: true;
-        error: true;
-    }
-}
-declare module '@mui/material/Slider' {
-    interface SliderPropsColorOverrides {
-        inherit: true;
-    }
-}
-declare module '@mui/material/TextField' {
-    interface TextFieldPropsSizeOverrides {
-        large: true;
-        xl: true;
-    }
-}
-declare module '@mui/material/ToggleButton' {
-    interface ToggleButtonPropsColorOverrides {
-        neutral: true;
-    }
-}
-declare module '@mui/material/Typography' {
-    interface TypographyPropsVariantOverrides {
-        displayLarge: true;
-        displaySmall: true;
-        h7: true;
-        h8: true;
-        bodyXl: true;
-        bodyLg: true;
-        bodyMd: true;
-        bodySm: true;
-        bodyXs: true;
-        kpiValue: true;
-    }
-}
-declare module '@mui/material/Checkbox' {
-    interface CheckboxPropsSizeOverrides {
-        large: true;
-    }
-}
-declare module '@mui/material/Switch' {
-    interface SwitchPropsSizeOverrides {
-        large: true;
-    }
+interface RHFRadioGroupProps extends Omit<RadioGroupProps, 'name' | 'control'> {
+    name: string;
+    label?: string;
+    options: RHFRadioGroupOption[];
+    description?: string;
+    helperText?: React.ReactNode;
+    slotProps?: {
+        wrap?: FormControlProps['sx'];
+        radio?: RadioProps;
+        formLabel?: FormLabelProps;
+        formHelperText?: FormHelperTextProps;
+    };
 }
-declare module '@mui/material/Radio' {
-    interface RadioPropsSizeOverrides {
-        large: true;
-    }
+declare const RHFRadioGroup: ({ name, label, options, helperText, slotProps, ...other }: RHFRadioGroupProps) => react_jsx_runtime.JSX.Element;
+
+interface RHFUploadProps extends Omit<UploadProps, 'value'> {
+    name: string;
+    multiple?: boolean;
 }
-declare module '@mui/x-data-grid' {
-    interface NoRowsOverlayPropsOverrides extends TableNoRowsProps {
-    }
-    interface NoResultsOverlayPropsOverrides extends TableNoRowsProps {
-    }
+declare const RHFUpload: ({ name, multiple, helperText, ...rest }: RHFUploadProps) => react_jsx_runtime.JSX.Element;
+
+interface OTPInputProps extends Omit<TextFieldProps, 'onChange'> {
+    length?: number;
+    onChange?: (otp: string) => void;
+    onComplete?: (otp: string) => void;
+    containerProps?: BoxProps;
 }
-declare module '@mui/material/PaginationItem' {
-    interface PaginationItemPropsColorOverrides {
-        info: true;
-        error: true;
-        success: true;
-        warning: true;
-    }
-    interface PaginationItemPropsVariantOverrides {
-        soft: true;
-    }
+declare const OTPInput: (props: OTPInputProps) => react_jsx_runtime.JSX.Element;
+
+interface RHFOTPInputProps extends Omit<OTPInputProps, 'name'> {
+    name: string;
 }
+declare const RHFOTPInput: ({ name, length, helperText, ...rest }: RHFOTPInputProps) => react_jsx_runtime.JSX.Element;
 
-declare const stylesMode: {
-    light: string;
-    dark: string;
-};
-declare const mediaQueries: {
-    upXs: string;
-    upSm: string;
-    upMd: string;
-    upLg: string;
-    upXl: string;
-};
-/**
- * Set font family
- */
-declare const setFont: (fontName: string) => string;
-/**
- * Converts rem to px
- */
-declare const remToPx: (value: string) => number;
-/**
- * Converts px to rem
- */
-declare const pxToRem: (value: number) => string;
-/**
- * Responsive font sizes
- */
-declare const responsiveFontSizes: ({ sm, md, lg }: {
-    sm: number;
-    md: number;
-    lg: number;
-}) => {
-    [mediaQueries.upSm]: {
-        fontSize: string;
-    };
-    [mediaQueries.upMd]: {
-        fontSize: string;
-    };
-    [mediaQueries.upLg]: {
-        fontSize: string;
-    };
-};
-/**
- * Converts a hex color to RGB channels
- */
-declare const hexToRgbChannel: (hex: string) => string;
-/**
- * Converts a hex color to RGB channels
- */
-declare const createPaletteChannel: (hexPalette: Record<string, string>) => {
-    [x: string]: string;
+declare const Field: {
+    OTP: ({ name, length, helperText, ...rest }: RHFOTPInputProps) => react_jsx_runtime.JSX.Element;
+    Switch: ({ name, description, helperText, label, sx, slotProps, ...other }: Omit<_mui_material.FormControlLabelProps, "name" | "control"> & {
+        name: string;
+        description?: string;
+        helperText?: React.ReactNode;
+        slotProps?: {
+            wrap?: _mui_material.BoxProps["sx"];
+            switch?: _mui_material.SwitchProps;
+            formHelperText?: _mui_material.FormHelperTextProps;
+        };
+    }) => react_jsx_runtime.JSX.Element;
+    Upload: ({ name, multiple, helperText, ...rest }: RHFUploadProps) => react_jsx_runtime.JSX.Element;
+    Text: ({ name, helperText, type, slotProps, ...rest }: _mui_material.TextFieldProps) => react_jsx_runtime.JSX.Element;
+    Radio: ({ name, label, options, helperText, slotProps, ...other }: RHFRadioGroupProps) => react_jsx_runtime.JSX.Element;
+    Checkbox: ({ name, description, helperText, label, sx, slotProps, ...other }: RHFCheckboxProps) => react_jsx_runtime.JSX.Element;
+    Autocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ name, label, required, placeholder, helperText, handleChange, ...other }: Omit<RHFAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput">) => react_jsx_runtime.JSX.Element;
+    MultiCheckbox: ({ name, label, options, slotProps, helperText, row, ...other }: RHFMultiCheckboxProps) => react_jsx_runtime.JSX.Element;
 };
-/**
- * Color with alpha channel
- */
-declare const varAlpha: (color: string, opacity?: number) => string;
 
-/**
- * Usage:
- * ...hideScrollX,
- * ...hideScrollY,
- */
-declare const hideScrollX: {
-    msOverflowStyle: string;
-    scrollbarWidth: string;
-    overflowX: string;
-    '&::-webkit-scrollbar': {
-        display: string;
+type RHFSwitchProps = Omit<FormControlLabelProps, 'name' | 'control'> & {
+    name: string;
+    description?: string;
+    helperText?: React.ReactNode;
+    slotProps?: {
+        wrap?: BoxProps['sx'];
+        switch?: SwitchProps;
+        formHelperText?: FormHelperTextProps;
     };
 };
-declare const hideScrollY: {
-    msOverflowStyle: string;
-    scrollbarWidth: string;
-    overflowY: string;
-    '&::-webkit-scrollbar': {
-        display: string;
+declare const RHFSwitch: ({ name, description, helperText, label, sx, slotProps, ...other }: RHFSwitchProps) => react_jsx_runtime.JSX.Element;
+interface RHFMultiSwitchOption {
+    label: string;
+    value: string | number;
+}
+interface RHFMultiSwitchProps extends Omit<FormGroupProps, 'children'> {
+    name: string;
+    label?: string;
+    options: RHFMultiSwitchOption[];
+    helperText?: React.ReactNode;
+    row?: boolean;
+    slotProps?: {
+        formControl?: FormControlProps;
+        switch?: SwitchProps;
+        formLabel?: FormLabelProps;
+        formHelperText?: FormHelperTextProps;
     };
-};
-/**
- * Usage:
- * ...textGradient(`to right, ${theme.vars.palette.text.primary}, ${alpha(theme.vars.palette.text.primary, 0.2)}`
- */
-declare const textGradient: (color: string) => {
-    background: string;
-    WebkitBackgroundClip: string;
-    WebkitTextFillColor: string;
-    backgroundClip: string;
-    textFillColor: string;
-    color: string;
-};
-/**
- * Usage:
- * ...borderGradient({ color: `to right, ${theme.vars.palette.text.primary}, ${alpha(theme.vars.palette.text.primary, 0.2)}`, padding: '4px' }),
- */
-interface BorderGradientProps {
-    color?: string;
-    padding?: string;
 }
-declare const borderGradient: (props: BorderGradientProps) => {
-    background?: string | undefined;
-    inset: number;
-    width: string;
-    content: string;
-    height: string;
-    margin: string;
-    position: string;
-    borderRadius: string;
-    padding: string;
-    mask: string;
-    WebkitMask: string;
-    maskComposite: string;
-    WebkitMaskComposite: string;
-};
-/**
- * Usage:
- * ...bgGradient({ color: `to right, ${theme.vars.palette.grey[900]} 25%, ${varAlpha(theme.vars.palette.primary.darkerChannel, 0.88)}`, imgUrl: '/assets/background/overlay.png' }),
- */
-interface BgGradientProps {
-    color?: string;
-    imgUrl?: string;
+declare const RHFMultiSwitch: ({ name, label, options, helperText, slotProps, ...other }: RHFMultiSwitchProps) => react_jsx_runtime.JSX.Element;
+
+declare const RHFTextField: ({ name, helperText, type, slotProps, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
+
+interface CopyButtonProps {
+    text: string;
+    size?: 'small' | 'medium';
 }
-declare function bgGradient({ color, imgUrl }: BgGradientProps): {
-    background: string;
-    backgroundSize: string;
-    backgroundRepeat: string;
-    backgroundPosition: string;
-} | {
-    background: string;
-    backgroundSize?: undefined;
-    backgroundRepeat?: undefined;
-    backgroundPosition?: undefined;
+declare const CopyButton: ({ text, size }: CopyButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface LoadingScreenProps extends BoxProps {
+    portal?: boolean;
+}
+declare const LoadingScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
+declare const SplashScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
+
+type GreyColorVariants = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | 'A100' | 'A200' | 'A400' | 'A700';
+type GreyChannelSuffix = {
+    [K in GreyColorVariants as `${K}Channel`]: string;
 };
-/**
- * Usage:
- * ...bgBlur({ color: `varAlpha(theme.vars.palette.surface.paperChannel, 0.8)`, imgUrl: '/assets/background/overlay.png', blur: 6 }),
- */
-interface BgBlurProps {
-    color?: string;
-    blur?: number;
-    imgUrl?: string;
+declare module '@mui/material/styles' {
+    interface TypeBackground {
+        neutral: string;
+    }
+    interface Color extends GreyChannelSuffix {
+    }
+    interface CommonColors {
+        whiteChannel: string;
+        blackChannel: string;
+    }
+    interface CssVarsPalette {
+        neutral: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+            light: string;
+            main: string;
+            dark: string;
+            contrastText: string;
+            '50Channel': string;
+            '100Channel': string;
+            '200Channel': string;
+            '300Channel': string;
+            '400Channel': string;
+            '500Channel': string;
+            '600Channel': string;
+            '700Channel': string;
+            '800Channel': string;
+            '900Channel': string;
+            '950Channel': string;
+            lightChannel: string;
+            mainChannel: string;
+            darkChannel: string;
+        };
+        surface: {
+            page: string;
+            subtle: string;
+            primary: string;
+            secondary: string;
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+            disable: string;
+            pageChannel: string;
+            subtleChannel: string;
+            primaryChannel: string;
+            secondaryChannel: string;
+            infoChannel: string;
+            successChannel: string;
+            warningChannel: string;
+            errorChannel: string;
+            disableChannel: string;
+        };
+        border: {
+            default: string;
+            focus: string;
+            subtle: string;
+            primary: string;
+            secondary: string;
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+            mute: string;
+            defaultChannel: string;
+            focusChannel: string;
+            subtleChannel: string;
+            primaryChannel: string;
+            secondaryChannel: string;
+            infoChannel: string;
+            successChannel: string;
+            warningChannel: string;
+            errorChannel: string;
+            muteChannel: string;
+        };
+        icon: {
+            white: string;
+            black: string;
+            secondary: string;
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+            disable: string;
+            whiteChannel: string;
+            blackChannel: string;
+            primaryChannel: string;
+            secondaryChannel: string;
+            infoChannel: string;
+            successChannel: string;
+            warningChannel: string;
+            errorChannel: string;
+            disableChannel: string;
+        };
+    }
+    interface SimplePaletteColorOptions {
+        50?: string;
+        100?: string;
+        200?: string;
+        300?: string;
+        400?: string;
+        500?: string;
+        600?: string;
+        700?: string;
+        800?: string;
+        900?: string;
+        950?: string;
+    }
+    interface PaletteColor {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    }
+    interface PaletteColorChannel {
+        '50Channel': string;
+        '100Channel': string;
+        '200Channel': string;
+        '300Channel': string;
+        '400Channel': string;
+        '500Channel': string;
+        '600Channel': string;
+        '700Channel': string;
+        '800Channel': string;
+        '900Channel': string;
+        '950Channel': string;
+    }
+    interface TypeText {
+        header: string;
+        body: string;
+        placeholder: string;
+        action: string;
+        disable: string;
+        info: string;
+        hyperlinks: string;
+        success: string;
+        warning: string;
+        error: string;
+        headerChannel: string;
+        bodyChannel: string;
+        placeholderChannel: string;
+        actionChannel: string;
+        disableChannel: string;
+        infoChannel: string;
+        hyperlinksChannel: string;
+        successChannel: string;
+        warningChannel: string;
+        errorChannel: string;
+    }
+    interface Theme {
+        customShadows: CustomShadowOptions;
+        radius: RadiusOptions;
+        customSpacing: CustomSpacingOptions;
+        vars: NonNullable<CssVarsTheme['vars']>;
+    }
+    interface ThemeOptions {
+        customShadows?: CustomShadowOptions;
+        radius?: RadiusOptions;
+        customSpacing?: CustomSpacingOptions;
+        vars?: CssVarsTheme['vars'];
+    }
+    interface TypographyVariants {
+        fontSecondaryFamily: React.CSSProperties['fontFamily'];
+        fontTertiaryFamily: React.CSSProperties['fontFamily'];
+        fontWeightSemiBold: React.CSSProperties['fontWeight'];
+        displayLarge: React.CSSProperties;
+        displaySmall: React.CSSProperties;
+        h7: React.CSSProperties;
+        h8: React.CSSProperties;
+        bodyXl: React.CSSProperties;
+        bodyLg: React.CSSProperties;
+        bodyMd: React.CSSProperties;
+        bodySm: React.CSSProperties;
+        bodyXs: React.CSSProperties;
+        kpiValue: React.CSSProperties;
+    }
+    interface BreakpointOverrides {
+        '2xl': true;
+    }
 }
-declare const bgBlur: ({ color, blur, imgUrl }: BgBlurProps) => SxProps<Theme$1>;
-/**
- * Usage:
- * ...maxLine({ line: 2, persistent: theme.typography.caption }),
- */
-interface Persistent {
-    fontSize?: string | number;
-    lineHeight?: string | number;
-    [key: string]: any;
+declare module '@mui/material/Avatar' {
+    interface AvatarPropsVariantOverrides {
+        userSm: true;
+        userMd: true;
+        userLg: true;
+        brandXs: true;
+        brandSm: true;
+        brandMd: true;
+        brandLg: true;
+        brandInitialXs: true;
+        brandInitialSm: true;
+        brandInitialMd: true;
+        brandInitialLg: true;
+    }
 }
-interface MaxLineProps {
-    line: number;
-    persistent?: Persistent;
+declare module '@mui/material/AvatarGroup' {
+    interface AvatarGroupPropsVariantOverrides {
+        compact: true;
+    }
 }
-declare const maxLine: ({ line, persistent }: MaxLineProps) => {
-    overflow: string;
-    display: string;
-    textOverflow: string;
-    WebkitLineClamp: number;
-    WebkitBoxOrient: string;
-};
-/**
- * Usage:
- * ...paper({ theme, color: varAlpha(theme.vars.palette.surface.pageChannel, 0.9), dropdown: true }),
- */
-declare function paper({ theme, color, dropdown }: {
-    theme: Theme$1;
-    color?: string;
-    dropdown?: boolean;
-}): SxProps<Theme$1>;
-/**
- * Usage:
- * ...menuItem(theme)
- */
-declare const menuItem: (theme: Theme$1) => SxProps<Theme$1>;
-
-declare const createTheme: (settings: SettingsValueProps) => Theme;
-
-declare const schemeConfig: {
-    modeStorageKey: string;
-    defaultMode: "light" | "dark";
-};
-
-/**
- * [1] settings @primaryColor
- * [2] settings @contrast
- */
-declare const updateCoreWithSettings: (theme: Theme, settings: SettingsValueProps) => Theme;
-declare const updateComponentsWithSettings: (settings: SettingsValueProps) => Pick<Theme, "components">;
-
-type ThemeProviderProps = {
-    children: React.ReactNode;
-};
-declare const ThemeProvider: ({ children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
-
-declare const Eye: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const Copy: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const Trash: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const XMark: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const Loader: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const Search: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const Settings: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const UserFill: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const EyeClosed: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const KeyCommand: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const XMarkSolid: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const CloudUpload: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const UserOutline: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const RadioSelect: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const RadioDefault: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const NavArrowDown: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const NavArrowLeft: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const NavArrowRight: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const ClipboardCheck: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const CheckboxSelect: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const InfoCircleFill: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const CheckboxDefault: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const BellNotification: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const InfoCircleOutline: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const LongArrowUpLeftSolid: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const CheckboxIndeterminate: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
-
-declare const Icons_BellNotification: typeof BellNotification;
-declare const Icons_CheckboxDefault: typeof CheckboxDefault;
-declare const Icons_CheckboxIndeterminate: typeof CheckboxIndeterminate;
-declare const Icons_CheckboxSelect: typeof CheckboxSelect;
-declare const Icons_ClipboardCheck: typeof ClipboardCheck;
-declare const Icons_CloudUpload: typeof CloudUpload;
-declare const Icons_Copy: typeof Copy;
-declare const Icons_Eye: typeof Eye;
-declare const Icons_EyeClosed: typeof EyeClosed;
-declare const Icons_InfoCircleFill: typeof InfoCircleFill;
-declare const Icons_InfoCircleOutline: typeof InfoCircleOutline;
-declare const Icons_KeyCommand: typeof KeyCommand;
-declare const Icons_Loader: typeof Loader;
-declare const Icons_LongArrowUpLeftSolid: typeof LongArrowUpLeftSolid;
-declare const Icons_NavArrowDown: typeof NavArrowDown;
-declare const Icons_NavArrowLeft: typeof NavArrowLeft;
-declare const Icons_NavArrowRight: typeof NavArrowRight;
-declare const Icons_RadioDefault: typeof RadioDefault;
-declare const Icons_RadioSelect: typeof RadioSelect;
-declare const Icons_Search: typeof Search;
-declare const Icons_Settings: typeof Settings;
-declare const Icons_Trash: typeof Trash;
-declare const Icons_UserFill: typeof UserFill;
-declare const Icons_UserOutline: typeof UserOutline;
-declare const Icons_XMark: typeof XMark;
-declare const Icons_XMarkSolid: typeof XMarkSolid;
-declare namespace Icons {
-  export { Icons_BellNotification as BellNotification, Icons_CheckboxDefault as CheckboxDefault, Icons_CheckboxIndeterminate as CheckboxIndeterminate, Icons_CheckboxSelect as CheckboxSelect, Icons_ClipboardCheck as ClipboardCheck, Icons_CloudUpload as CloudUpload, Icons_Copy as Copy, Icons_Eye as Eye, Icons_EyeClosed as EyeClosed, Icons_InfoCircleFill as InfoCircleFill, Icons_InfoCircleOutline as InfoCircleOutline, Icons_KeyCommand as KeyCommand, Icons_Loader as Loader, Icons_LongArrowUpLeftSolid as LongArrowUpLeftSolid, Icons_NavArrowDown as NavArrowDown, Icons_NavArrowLeft as NavArrowLeft, Icons_NavArrowRight as NavArrowRight, Icons_RadioDefault as RadioDefault, Icons_RadioSelect as RadioSelect, Icons_Search as Search, Icons_Settings as Settings, Icons_Trash as Trash, Icons_UserFill as UserFill, Icons_UserOutline as UserOutline, Icons_XMark as XMark, Icons_XMarkSolid as XMarkSolid };
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        tertiary: true;
+    }
+    interface ButtonPropsColorOverrides {
+        neutral: true;
+    }
+}
+declare module '@mui/material/ButtonGroup' {
+    interface ButtonGroupPropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        tertiary: true;
+    }
+}
+declare module '@mui/material/Fab' {
+    interface FabPropsVariantOverrides {
+        outlined: true;
+        outlinedExtended: true;
+        soft: true;
+        softExtended: true;
+    }
+}
+declare module '@mui/material/Badge' {
+    interface BadgePropsVariantOverrides {
+        alway: true;
+        busy: true;
+        online: true;
+        offline: true;
+        invisible: true;
+    }
 }
-
-type IconType = keyof typeof Icons;
-
-type IconProps = BoxProps & {
-    icon: IconType;
-};
-declare const Icon: ({ icon, className, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
-
-declare const iconClasses: {
-    root: string;
-};
-
-interface LogoProps extends BoxProps {
-    disableLink?: boolean;
-    isFull?: boolean;
-    isWhite?: boolean;
-    isBlack?: boolean;
-    href?: string;
-    LinkComponent?: ElementType;
-    src?: string;
-    alt?: string;
+declare module '@mui/material/Badge' {
+    interface BadgePropsVariantOverrides {
+        alway: true;
+        busy: true;
+        online: true;
+        offline: true;
+        invisible: true;
+    }
 }
-declare const Logo: ({ sx, isFull, isWhite, isBlack, disableLink, LinkComponent, href, src, alt, ...rest }: LogoProps) => react_jsx_runtime.JSX.Element;
-declare const AnimatedLogo: () => react_jsx_runtime.JSX.Element;
-
-type ImageStatus = 'idle' | 'loading' | 'loaded' | 'error';
-interface ImageProps extends Omit<BoxProps, 'component' | 'children' | 'position'> {
-    src: string;
-    alt: string;
-    /**
-     * Load the image only when it enters the viewport.
-     * Defaults to true.
-     */
-    lazy?: boolean;
-    /**
-     * Fallback URL used when the main source fails to load.
-     */
-    fallbackSrc?: string;
-    /**
-     * Responsive image sources for different screen sizes/resolutions.
-     * Example: "image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w"
-     */
-    srcSet?: string;
-    /**
-     * Sizes attribute for responsive images. Defines which image size to use at different viewport widths.
-     * Example: "(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
-     */
-    sizes?: string;
-    /**
-     * Aspect ratio (e.g. "16 / 9" or 1.5) applied to the wrapper to avoid layout shift.
-     */
-    aspectRatio?: number | string;
-    /**
-     * Controls object-fit of the underlying image. Defaults to "cover".
-     */
-    fit?: CSSProperties['objectFit'];
-    /**
-     * Controls object-position of the underlying image. Defaults to "center".
-     */
-    position?: CSSProperties['objectPosition'];
-    /**
-     * Optional overlay content rendered above the image.
-     */
-    overlay?: ReactNode;
-    /**
-     * Enables overlay even when overlay content is not provided.
-     */
-    withOverlay?: boolean;
-    /**
-     * Custom loading indicator shown before the image is loaded.
-     */
-    loadingIndicator?: ReactNode;
-    /**
-     * Custom error fallback content when both src and fallbackSrc fail.
-     */
-    renderError?: ReactNode;
-    /**
-     * Additional styles for the underlying image element.
-     */
-    imgSx?: BoxProps['sx'];
-    /**
-     * Additional props for the underlying image element.
-     */
-    imgProps?: Omit<BoxProps<'img'>, 'component' | 'sx' | 'ref' | 'src' | 'alt' | 'children'>;
-    /**
-     * Root margin passed to the IntersectionObserver. Defaults to "200px".
-     */
-    observerMargin?: string;
-    /**
-     * Callback fired when the image fails to load.
-     */
-    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
+declare module '@mui/material/Chip' {
+    interface ChipPropsVariantOverrides {
+        soft: true;
+    }
+    interface ChipPropsColorOverrides {
+        neutral: true;
+    }
 }
-
-declare const Image: react.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & react.RefAttributes<HTMLImageElement>>;
-
-interface UploadProps extends DropzoneOptions {
-    error?: boolean;
-    sx?: SxProps$1<Theme>;
-    placeholder?: React.ReactNode;
-    helperText?: React.ReactNode;
-    disableMultiple?: boolean;
-    value?: File | string | null | Array<File | string>;
-    onDelete?: VoidFunction;
-    onUpload?: VoidFunction;
-    onRemove?: (file: File | string) => void;
-    onRemoveAll?: VoidFunction;
-    isUploading?: boolean;
-    uploadProgress?: number;
+declare module '@mui/material/Pagination' {
+    interface PaginationPropsVariantOverrides {
+        soft: true;
+    }
+    interface PaginationPropsColorOverrides {
+        info: true;
+        success: true;
+        warning: true;
+        error: true;
+    }
 }
-
-declare const Upload: ({ sx, value, error, disabled, onDelete, onUpload, onRemove, helperText, onRemoveAll, uploadProgress, isUploading, multiple, ...rest }: UploadProps) => react_jsx_runtime.JSX.Element;
-
-interface FormProps<T extends FieldValues> extends Omit<BoxProps, 'onSubmit'> {
-    children: React.ReactNode;
-    methods: UseFormReturn<T>;
-    onSubmit?: SubmitHandler<T>;
+declare module '@mui/material/Slider' {
+    interface SliderPropsColorOverrides {
+        inherit: true;
+    }
 }
-declare const Form: <T extends FieldValues>({ children, onSubmit, methods, ...rest }: FormProps<T>) => react_jsx_runtime.JSX.Element;
-
-interface RHFAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> extends AutocompleteProps<T, Multiple, DisableClearable, FreeSolo> {
-    name: string;
-    label?: string;
-    required?: boolean;
-    placeholder?: string;
-    helperText?: React.ReactNode;
-    handleChange?: (val: any) => void;
+declare module '@mui/material/TextField' {
+    interface TextFieldPropsSizeOverrides {
+        large: true;
+        xl: true;
+    }
+}
+declare module '@mui/material/ToggleButton' {
+    interface ToggleButtonPropsColorOverrides {
+        neutral: true;
+    }
+}
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        displayLarge: true;
+        displaySmall: true;
+        h7: true;
+        h8: true;
+        bodyXl: true;
+        bodyLg: true;
+        bodyMd: true;
+        bodySm: true;
+        bodyXs: true;
+        kpiValue: true;
+    }
+}
+declare module '@mui/material/Checkbox' {
+    interface CheckboxPropsSizeOverrides {
+        large: true;
+    }
+}
+declare module '@mui/material/Switch' {
+    interface SwitchPropsSizeOverrides {
+        large: true;
+    }
+}
+declare module '@mui/material/Radio' {
+    interface RadioPropsSizeOverrides {
+        large: true;
+    }
+}
+declare module '@mui/x-data-grid' {
+    interface NoRowsOverlayPropsOverrides extends EmptyContentProps {
+    }
+    interface NoResultsOverlayPropsOverrides extends EmptyContentProps {
+    }
+}
+declare module '@mui/material/PaginationItem' {
+    interface PaginationItemPropsColorOverrides {
+        info: true;
+        error: true;
+        success: true;
+        warning: true;
+    }
+    interface PaginationItemPropsVariantOverrides {
+        soft: true;
+    }
 }
-declare const RHFAutocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ name, label, required, placeholder, helperText, handleChange, ...other }: Omit<RHFAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput">) => react_jsx_runtime.JSX.Element;
 
-interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'name' | 'control' | 'slotProps'> {
-    name: string;
-    description?: string;
-    helperText?: React.ReactNode;
-    slotProps?: {
-        wrap?: BoxProps['sx'];
-        checkbox?: CheckboxProps;
-        formLabel?: FormLabelProps;
-        formHelperText?: FormHelperTextProps;
+declare const stylesMode: {
+    light: string;
+    dark: string;
+};
+declare const mediaQueries: {
+    upXs: string;
+    upSm: string;
+    upMd: string;
+    upLg: string;
+    upXl: string;
+};
+/**
+ * Set font family
+ */
+declare const setFont: (fontName: string) => string;
+/**
+ * Converts rem to px
+ */
+declare const remToPx: (value: string) => number;
+/**
+ * Converts px to rem
+ */
+declare const pxToRem: (value: number) => string;
+/**
+ * Responsive font sizes
+ */
+declare const responsiveFontSizes: ({ sm, md, lg }: {
+    sm: number;
+    md: number;
+    lg: number;
+}) => {
+    [mediaQueries.upSm]: {
+        fontSize: string;
+    };
+    [mediaQueries.upMd]: {
+        fontSize: string;
     };
-}
-declare const RHFCheckbox: ({ name, description, helperText, label, sx, slotProps, ...other }: RHFCheckboxProps) => react_jsx_runtime.JSX.Element;
-interface RHFMultiCheckboxOption {
-    label: string;
-    value: string | number;
-    description?: string;
-}
-interface RHFMultiCheckboxProps extends Omit<FormGroupProps, 'children'> {
-    name: string;
-    label?: string;
-    options: RHFMultiCheckboxOption[];
-    helperText?: React.ReactNode;
-    row?: boolean;
-    slotProps?: {
-        formControl?: FormControlProps;
-        checkbox?: CheckboxProps;
-        formLabel?: FormLabelProps;
-        formHelperText?: FormHelperTextProps;
+    [mediaQueries.upLg]: {
+        fontSize: string;
     };
-}
-declare const RHFMultiCheckbox: ({ name, label, options, slotProps, helperText, row, ...other }: RHFMultiCheckboxProps) => react_jsx_runtime.JSX.Element;
+};
+/**
+ * Converts a hex color to RGB channels
+ */
+declare const hexToRgbChannel: (hex: string) => string;
+/**
+ * Converts a hex color to RGB channels
+ */
+declare const createPaletteChannel: (hexPalette: Record<string, string>) => {
+    [x: string]: string;
+};
+/**
+ * Color with alpha channel
+ */
+declare const varAlpha: (color: string, opacity?: number) => string;
 
-interface RHFRadioGroupOption {
-    label: string;
-    value: string | number;
-    description?: string;
-}
-interface RHFRadioGroupProps extends Omit<RadioGroupProps, 'name' | 'control'> {
-    name: string;
-    label?: string;
-    options: RHFRadioGroupOption[];
-    description?: string;
-    helperText?: React.ReactNode;
-    slotProps?: {
-        wrap?: FormControlProps['sx'];
-        radio?: RadioProps;
-        formLabel?: FormLabelProps;
-        formHelperText?: FormHelperTextProps;
+/**
+ * Usage:
+ * ...hideScrollX,
+ * ...hideScrollY,
+ */
+declare const hideScrollX: {
+    msOverflowStyle: string;
+    scrollbarWidth: string;
+    overflowX: string;
+    '&::-webkit-scrollbar': {
+        display: string;
+    };
+};
+declare const hideScrollY: {
+    msOverflowStyle: string;
+    scrollbarWidth: string;
+    overflowY: string;
+    '&::-webkit-scrollbar': {
+        display: string;
     };
+};
+/**
+ * Usage:
+ * ...textGradient(`to right, ${theme.vars.palette.text.primary}, ${alpha(theme.vars.palette.text.primary, 0.2)}`
+ */
+declare const textGradient: (color: string) => {
+    background: string;
+    WebkitBackgroundClip: string;
+    WebkitTextFillColor: string;
+    backgroundClip: string;
+    textFillColor: string;
+    color: string;
+};
+/**
+ * Usage:
+ * ...borderGradient({ color: `to right, ${theme.vars.palette.text.primary}, ${alpha(theme.vars.palette.text.primary, 0.2)}`, padding: '4px' }),
+ */
+interface BorderGradientProps {
+    color?: string;
+    padding?: string;
 }
-declare const RHFRadioGroup: ({ name, label, options, helperText, slotProps, ...other }: RHFRadioGroupProps) => react_jsx_runtime.JSX.Element;
-
-interface RHFUploadProps extends Omit<UploadProps, 'value'> {
-    name: string;
-    multiple?: boolean;
+declare const borderGradient: (props: BorderGradientProps) => {
+    background?: string | undefined;
+    inset: number;
+    width: string;
+    content: string;
+    height: string;
+    margin: string;
+    position: string;
+    borderRadius: string;
+    padding: string;
+    mask: string;
+    WebkitMask: string;
+    maskComposite: string;
+    WebkitMaskComposite: string;
+};
+/**
+ * Usage:
+ * ...bgGradient({ color: `to right, ${theme.vars.palette.grey[900]} 25%, ${varAlpha(theme.vars.palette.primary.darkerChannel, 0.88)}`, imgUrl: '/assets/background/overlay.png' }),
+ */
+interface BgGradientProps {
+    color?: string;
+    imgUrl?: string;
 }
-declare const RHFUpload: ({ name, multiple, helperText, ...rest }: RHFUploadProps) => react_jsx_runtime.JSX.Element;
-
-interface OTPInputProps extends Omit<TextFieldProps, 'onChange'> {
-    length?: number;
-    onChange?: (otp: string) => void;
-    onComplete?: (otp: string) => void;
-    containerProps?: BoxProps;
+declare function bgGradient({ color, imgUrl }: BgGradientProps): {
+    background: string;
+    backgroundSize: string;
+    backgroundRepeat: string;
+    backgroundPosition: string;
+} | {
+    background: string;
+    backgroundSize?: undefined;
+    backgroundRepeat?: undefined;
+    backgroundPosition?: undefined;
+};
+/**
+ * Usage:
+ * ...bgBlur({ color: `varAlpha(theme.vars.palette.surface.paperChannel, 0.8)`, imgUrl: '/assets/background/overlay.png', blur: 6 }),
+ */
+interface BgBlurProps {
+    color?: string;
+    blur?: number;
+    imgUrl?: string;
 }
-declare const OTPInput: (props: OTPInputProps) => react_jsx_runtime.JSX.Element;
-
-interface RHFOTPInputProps extends Omit<OTPInputProps, 'name'> {
-    name: string;
+declare const bgBlur: ({ color, blur, imgUrl }: BgBlurProps) => SxProps$1<Theme$1>;
+/**
+ * Usage:
+ * ...maxLine({ line: 2, persistent: theme.typography.caption }),
+ */
+interface Persistent {
+    fontSize?: string | number;
+    lineHeight?: string | number;
+    [key: string]: any;
 }
-declare const RHFOTPInput: ({ name, length, helperText, ...rest }: RHFOTPInputProps) => react_jsx_runtime.JSX.Element;
-
-declare const Field: {
-    OTP: ({ name, length, helperText, ...rest }: RHFOTPInputProps) => react_jsx_runtime.JSX.Element;
-    Switch: ({ name, description, helperText, label, sx, slotProps, ...other }: Omit<_mui_material.FormControlLabelProps, "name" | "control"> & {
-        name: string;
-        description?: string;
-        helperText?: React.ReactNode;
-        slotProps?: {
-            wrap?: _mui_material.BoxProps["sx"];
-            switch?: _mui_material.SwitchProps;
-            formHelperText?: _mui_material.FormHelperTextProps;
-        };
-    }) => react_jsx_runtime.JSX.Element;
-    Upload: ({ name, multiple, helperText, ...rest }: RHFUploadProps) => react_jsx_runtime.JSX.Element;
-    Text: ({ name, helperText, type, slotProps, ...rest }: _mui_material.TextFieldProps) => react_jsx_runtime.JSX.Element;
-    Radio: ({ name, label, options, helperText, slotProps, ...other }: RHFRadioGroupProps) => react_jsx_runtime.JSX.Element;
-    Checkbox: ({ name, description, helperText, label, sx, slotProps, ...other }: RHFCheckboxProps) => react_jsx_runtime.JSX.Element;
-    Autocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ name, label, required, placeholder, helperText, handleChange, ...other }: Omit<RHFAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput">) => react_jsx_runtime.JSX.Element;
-    MultiCheckbox: ({ name, label, options, slotProps, helperText, row, ...other }: RHFMultiCheckboxProps) => react_jsx_runtime.JSX.Element;
+interface MaxLineProps {
+    line: number;
+    persistent?: Persistent;
+}
+declare const maxLine: ({ line, persistent }: MaxLineProps) => {
+    overflow: string;
+    display: string;
+    textOverflow: string;
+    WebkitLineClamp: number;
+    WebkitBoxOrient: string;
 };
+/**
+ * Usage:
+ * ...paper({ theme, color: varAlpha(theme.vars.palette.surface.pageChannel, 0.9), dropdown: true }),
+ */
+declare function paper({ theme, color, dropdown }: {
+    theme: Theme$1;
+    color?: string;
+    dropdown?: boolean;
+}): SxProps$1<Theme$1>;
+/**
+ * Usage:
+ * ...menuItem(theme)
+ */
+declare const menuItem: (theme: Theme$1) => SxProps$1<Theme$1>;
 
-type RHFSwitchProps = Omit<FormControlLabelProps, 'name' | 'control'> & {
-    name: string;
-    description?: string;
-    helperText?: React.ReactNode;
-    slotProps?: {
-        wrap?: BoxProps['sx'];
-        switch?: SwitchProps;
-        formHelperText?: FormHelperTextProps;
-    };
-};
-declare const RHFSwitch: ({ name, description, helperText, label, sx, slotProps, ...other }: RHFSwitchProps) => react_jsx_runtime.JSX.Element;
-interface RHFMultiSwitchOption {
-    label: string;
-    value: string | number;
-}
-interface RHFMultiSwitchProps extends Omit<FormGroupProps, 'children'> {
-    name: string;
-    label?: string;
-    options: RHFMultiSwitchOption[];
-    helperText?: React.ReactNode;
-    row?: boolean;
-    slotProps?: {
-        formControl?: FormControlProps;
-        switch?: SwitchProps;
-        formLabel?: FormLabelProps;
-        formHelperText?: FormHelperTextProps;
-    };
-}
-declare const RHFMultiSwitch: ({ name, label, options, helperText, slotProps, ...other }: RHFMultiSwitchProps) => react_jsx_runtime.JSX.Element;
+declare const createTheme: (settings: SettingsValueProps) => Theme;
 
-declare const RHFTextField: ({ name, helperText, type, slotProps, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
+declare const schemeConfig: {
+    modeStorageKey: string;
+    defaultMode: "light" | "dark";
+};
 
-interface CopyButtonProps {
-    text: string;
-    size?: 'small' | 'medium';
-}
-declare const CopyButton: ({ text, size }: CopyButtonProps) => react_jsx_runtime.JSX.Element;
+/**
+ * [1] settings @primaryColor
+ * [2] settings @contrast
+ */
+declare const updateCoreWithSettings: (theme: Theme, settings: SettingsValueProps) => Theme;
+declare const updateComponentsWithSettings: (settings: SettingsValueProps) => Pick<Theme, "components">;
 
-interface LoadingScreenProps extends BoxProps {
-    portal?: boolean;
-}
-declare const LoadingScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
-declare const SplashScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
+type ThemeProviderProps = {
+    children: React.ReactNode;
+};
+declare const ThemeProvider: ({ children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedLogo, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, Image, type ImageProps, type ImageStatus, InfoCircleFill, InfoCircleOutline, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };
+export { AnimatedLogo, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, EmptyContent, type EmptyContentProps, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, Image, type ImageProps, type ImageStatus, InfoCircleFill, InfoCircleOutline, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };