@undefine-ui/design-system 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,1551 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { SetStateAction, ElementType } from 'react';
+import { Breakpoint, Shadows, Components, Theme, 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 { BoxProps } from '@mui/material/Box';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { DataGridProps } from '@mui/x-data-grid';
+import { DropzoneOptions } from 'react-dropzone';
+import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
+import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { CheckboxProps } from '@mui/material/Checkbox';
+import { FormGroupProps } from '@mui/material/FormGroup';
+import { FormLabelProps } from '@mui/material/FormLabel';
+import { FormControlProps } from '@mui/material/FormControl';
+import { FormHelperTextProps } from '@mui/material/FormHelperText';
+import { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import { RadioProps } from '@mui/material/Radio';
+import { RadioGroupProps } from '@mui/material/RadioGroup';
+import { SwitchProps } from '@mui/material/Switch';
+import { TextFieldProps } from '@mui/material/TextField';
+
+declare const isEqual: (a: any, b: any) => boolean;
+declare const orderBy: <T>(array: T[], properties: (keyof T)[], orders?: ("asc" | "desc")[]) => T[];
+
+declare const paramCase: (str: string) => string;
+declare const snakeCase: (str: string) => string;
+declare const sentenceCase: (string: string) => string;
+
+interface FormatOptions extends Intl.NumberFormatOptions {
+}
+/**
+ * Formats a number according to the specified locale.
+ * Uses Intl.NumberFormat for locale-aware number formatting.
+ * If no locale is provided, the runtime's default locale is used.
+ * @param inputValue - The number or value convertible to a number to format.
+ * @param locale - Optional. A string with a BCP 47 language tag (e.g., "en-US", "de-DE").
+ * @param options - Optional Intl.NumberFormatOptions to customize formatting.
+ * @returns The formatted number string, or an empty string if the input is invalid.
+ */
+declare const fNumber: (inputValue: unknown, locale?: string, options?: FormatOptions) => string;
+/**
+ * Formats a number as currency according to the specified locale and currency code.
+ * Uses Intl.NumberFormat with 'currency' style.
+ * @param inputValue - The number or value convertible to a number to format as currency.
+ * @param currency - The ISO 4217 currency code (e.g., "USD", "EUR").
+ * @param locale - Optional. A string with a BCP 47 language tag (e.g., "en-US"). Defaults to runtime's locale.
+ * @param options - Optional Intl.NumberFormatOptions to customize formatting.
+ * @returns The formatted currency string, or an empty string if the input is invalid.
+ */
+declare const fCurrency: (inputValue: unknown, currency?: string, locale?: string, options?: FormatOptions) => string;
+/**
+ * Retrieves the currency symbol for a given currency code and locale.
+ * @param currency - The ISO 4217 currency code (e.g., "USD", "EUR").
+ * @param locale - Optional. A string with a BCP 47 language tag. Defaults to runtime's locale.
+ * @returns The currency symbol (e.g., "$", "£", "€") or null if it cannot be determined.
+ */
+declare const getCurrencySymbol: (currency: string, locale?: string) => string | null;
+/**
+ * Formats a number as a percentage according to the specified locale.
+ * The input value is divided by 100 before formatting.
+ * @param inputValue - The number to format as a percentage (e.g., 50 for 50%).
+ * @param locale - Optional. A string with a BCP 47 language tag. Defaults to runtime's locale.
+ * @param options - Optional Intl.NumberFormatOptions to customize formatting.
+ * @returns The formatted percentage string, or an empty string if the input is invalid.
+ */
+declare const fPercent: (inputValue: unknown, locale?: string, options?: FormatOptions) => string;
+/**
+ * Formats a number using compact notation (e.g., 1.2K, 5M) for a given locale.
+ * Converts the notation suffix (K, M, B, T) to lowercase.
+ * @param inputValue - The number or value convertible to a number to format.
+ * @param locale - Optional. A string with a BCP 47 language tag. Defaults to runtime's locale.
+ * @param options - Optional Intl.NumberFormatOptions to customize formatting.
+ * @returns The formatted number string with a compact, lowercase suffix, or an empty string if the input is invalid.
+ */
+declare const fShortenNumber: (inputValue: unknown, locale?: string, options?: FormatOptions) => string;
+/**
+ * Formats a number representing bytes into a human-readable data size string (e.g., "1.23 Kb", "4.56 Mb").
+ * @param inputValue - The number of bytes or a value convertible to a number.
+ * @returns The formatted data size string (e.g., "1.5 Kb", "10 Mb"), or "0 bytes" if the input is invalid or 0.
+ */
+declare const fData: (inputValue: unknown) => string;
+
+interface UseBooleanReturnType {
+    value: boolean;
+    onTrue: () => void;
+    onFalse: () => void;
+    onToggle: () => void;
+    setValue: React.Dispatch<React.SetStateAction<boolean>>;
+}
+declare const useBoolean: (defaultValue?: boolean) => UseBooleanReturnType;
+
+declare const STORAGE_KEY = "app-settings";
+type SettingsValueProps = {
+    colorScheme: 'light' | 'dark';
+    contrast: 'default' | 'hight';
+    primaryColor: 'default';
+    fontFamily: string;
+    navLayout: 'main' | 'mini';
+};
+declare const defaultSettings: SettingsValueProps;
+
+type SettingsContextProps = SettingsValueProps & {
+    onUpdate: (updateState: React.SetStateAction<SettingsValueProps>) => void;
+    onUpdateField: <K extends keyof SettingsValueProps>(name: K, updateValue: SettingsValueProps[K]) => void;
+    canReset: boolean;
+    onReset: VoidFunction;
+    openDrawer: boolean;
+    onToggleDrawer: VoidFunction;
+    onCloseDrawer: VoidFunction;
+};
+declare const SettingsContext: react.Context<SettingsContextProps>;
+declare const SettingsConsumer: react.Consumer<SettingsContextProps>;
+interface SettingsProviderProps {
+    children: React.ReactNode;
+    settings: SettingsValueProps;
+}
+declare const SettingsProvider: ({ children, settings }: SettingsProviderProps) => react_jsx_runtime.JSX.Element;
+
+declare const useSettings: () => SettingsContextProps;
+
+type ReturnType = boolean;
+type Query = 'up' | 'down' | 'between' | 'only';
+type Value = Breakpoint | number;
+declare const useResponsive: (query: Query, start?: Value, end?: Value) => ReturnType;
+declare const useWidth: () => "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
+
+declare const useLocalStorage: <T>(key: string, initialState: T) => {
+    state: T;
+    setState: (updateState: SetStateAction<T>) => void;
+    setField: <K extends keyof T>(name: K, updateValue: T[K]) => void;
+    resetState: () => void;
+    canReset: boolean;
+};
+declare const getStorage: <T>(key: string) => T | null;
+declare const setStorage: <T>(key: string, value: T) => void;
+declare const removeStorage: (key: string) => void;
+declare const LocalStorageAvailable: () => boolean;
+declare const LocalStorageGetItem: (key: string, defaultValue?: string) => string | undefined;
+
+type useEventListenerOptions = {
+    eventName: string;
+    handler: (event: Event) => void;
+    element?: React.RefObject<HTMLElement>;
+    options?: AddEventListenerOptions;
+};
+declare const useEventListener: ({ eventName, handler, element, options }: useEventListenerOptions) => void;
+
+declare const useCopyToClipboard: () => {
+    copy: (text: string) => Promise<boolean>;
+    copiedText: string;
+    isCopied: boolean;
+};
+
+interface RadiusOptions {
+    'radius-0': string;
+    'radius-2xs': string;
+    'radius-xs': string;
+    'radius-sm': string;
+    'radius-md': string;
+    'radius-lg': string;
+    'radius-xl': string;
+    'radius-2xl': string;
+    'radius-3xl': string;
+    'radius-4xl': string;
+    'radius-5xl': string;
+    'radius-pill': string;
+}
+declare function radius(baseRadius: number): RadiusOptions;
+
+declare function shadows(colorScheme: 'light' | 'dark'): Shadows;
+
+type ColorSchema = 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+declare const grey: {
+    [x: string]: string;
+};
+declare const primary: {
+    [x: string]: string;
+};
+declare const secondary: {
+    [x: string]: string;
+};
+declare const neutral: {
+    [x: string]: string;
+};
+declare const info: {
+    [x: string]: string;
+};
+declare const success: {
+    [x: string]: string;
+};
+declare const warning: {
+    [x: string]: string;
+};
+declare const error: {
+    [x: string]: string;
+};
+declare const common: {
+    [x: string]: string;
+};
+declare const text: {
+    light: {
+        [x: string]: string;
+    };
+    dark: {
+        [x: string]: string;
+    };
+};
+declare const background: {
+    light: {
+        [x: string]: string;
+    };
+    dark: {
+        [x: string]: string;
+    };
+};
+declare const surface: {
+    light: {
+        [x: string]: string;
+    };
+    dark: {
+        [x: string]: string;
+    };
+};
+declare const border: {
+    light: {
+        [x: string]: string;
+    };
+    dark: {
+        [x: string]: string;
+    };
+};
+declare const icon: {
+    light: {
+        [x: string]: string;
+    };
+    dark: {
+        [x: string]: string;
+    };
+};
+declare const baseAction: {
+    hover: string;
+    selected: string;
+    focus: string;
+    disabled: string;
+    disabledBackground: string;
+    hoverOpacity: number;
+    disabledOpacity: number;
+};
+declare const action: {
+    light: {
+        active: string;
+        hover: string;
+        selected: string;
+        focus: string;
+        disabled: string;
+        disabledBackground: string;
+        hoverOpacity: number;
+        disabledOpacity: number;
+    };
+    dark: {
+        active: string;
+        hover: string;
+        selected: string;
+        focus: string;
+        disabled: string;
+        disabledBackground: string;
+        hoverOpacity: number;
+        disabledOpacity: number;
+    };
+};
+declare const basePalette: {
+    primary: {
+        [x: string]: string;
+    };
+    secondary: {
+        [x: string]: string;
+    };
+    neutral: {
+        [x: string]: string;
+    };
+    info: {
+        [x: string]: string;
+    };
+    success: {
+        [x: string]: string;
+    };
+    warning: {
+        [x: string]: string;
+    };
+    error: {
+        [x: string]: string;
+    };
+    grey: {
+        [x: string]: string;
+    };
+    common: {
+        [x: string]: string;
+    };
+    divider: string;
+    action: {
+        light: {
+            active: string;
+            hover: string;
+            selected: string;
+            focus: string;
+            disabled: string;
+            disabledBackground: string;
+            hoverOpacity: number;
+            disabledOpacity: number;
+        };
+        dark: {
+            active: string;
+            hover: string;
+            selected: string;
+            focus: string;
+            disabled: string;
+            disabledBackground: string;
+            hoverOpacity: number;
+            disabledOpacity: number;
+        };
+    };
+};
+declare const lightPalette: {
+    text: {
+        [x: string]: string;
+    };
+    background: {
+        [x: string]: string;
+    };
+    surface: {
+        [x: string]: string;
+    };
+    border: {
+        [x: string]: string;
+    };
+    icon: {
+        [x: string]: string;
+    };
+    action: {
+        active: string;
+        hover: string;
+        selected: string;
+        focus: string;
+        disabled: string;
+        disabledBackground: string;
+        hoverOpacity: number;
+        disabledOpacity: number;
+    };
+    primary: {
+        [x: string]: string;
+    };
+    secondary: {
+        [x: string]: string;
+    };
+    neutral: {
+        [x: string]: string;
+    };
+    info: {
+        [x: string]: string;
+    };
+    success: {
+        [x: string]: string;
+    };
+    warning: {
+        [x: string]: string;
+    };
+    error: {
+        [x: string]: string;
+    };
+    grey: {
+        [x: string]: string;
+    };
+    common: {
+        [x: string]: string;
+    };
+    divider: string;
+};
+declare const darkPalette: {
+    text: {
+        [x: string]: string;
+    };
+    background: {
+        [x: string]: string;
+    };
+    surface: {
+        [x: string]: string;
+    };
+    border: {
+        [x: string]: string;
+    };
+    icon: {
+        [x: string]: string;
+    };
+    action: {
+        active: string;
+        hover: string;
+        selected: string;
+        focus: string;
+        disabled: string;
+        disabledBackground: string;
+        hoverOpacity: number;
+        disabledOpacity: number;
+    };
+    primary: {
+        [x: string]: string;
+    };
+    secondary: {
+        [x: string]: string;
+    };
+    neutral: {
+        [x: string]: string;
+    };
+    info: {
+        [x: string]: string;
+    };
+    success: {
+        [x: string]: string;
+    };
+    warning: {
+        [x: string]: string;
+    };
+    error: {
+        [x: string]: string;
+    };
+    grey: {
+        [x: string]: string;
+    };
+    common: {
+        [x: string]: string;
+    };
+    divider: string;
+};
+declare const colorSchemes: {
+    light: {
+        palette: {
+            text: {
+                [x: string]: string;
+            };
+            background: {
+                [x: string]: string;
+            };
+            surface: {
+                [x: string]: string;
+            };
+            border: {
+                [x: string]: string;
+            };
+            icon: {
+                [x: string]: string;
+            };
+            action: {
+                active: string;
+                hover: string;
+                selected: string;
+                focus: string;
+                disabled: string;
+                disabledBackground: string;
+                hoverOpacity: number;
+                disabledOpacity: number;
+            };
+            primary: {
+                [x: string]: string;
+            };
+            secondary: {
+                [x: string]: string;
+            };
+            neutral: {
+                [x: string]: string;
+            };
+            info: {
+                [x: string]: string;
+            };
+            success: {
+                [x: string]: string;
+            };
+            warning: {
+                [x: string]: string;
+            };
+            error: {
+                [x: string]: string;
+            };
+            grey: {
+                [x: string]: string;
+            };
+            common: {
+                [x: string]: string;
+            };
+            divider: string;
+        };
+    };
+    dark: {
+        palette: {
+            text: {
+                [x: string]: string;
+            };
+            background: {
+                [x: string]: string;
+            };
+            surface: {
+                [x: string]: string;
+            };
+            border: {
+                [x: string]: string;
+            };
+            icon: {
+                [x: string]: string;
+            };
+            action: {
+                active: string;
+                hover: string;
+                selected: string;
+                focus: string;
+                disabled: string;
+                disabledBackground: string;
+                hoverOpacity: number;
+                disabledOpacity: number;
+            };
+            primary: {
+                [x: string]: string;
+            };
+            secondary: {
+                [x: string]: string;
+            };
+            neutral: {
+                [x: string]: string;
+            };
+            info: {
+                [x: string]: string;
+            };
+            success: {
+                [x: string]: string;
+            };
+            warning: {
+                [x: string]: string;
+            };
+            error: {
+                [x: string]: string;
+            };
+            grey: {
+                [x: string]: string;
+            };
+            common: {
+                [x: string]: string;
+            };
+            divider: string;
+        };
+    };
+};
+
+declare const primaryFont: string;
+declare const secondaryFont: string;
+declare const tertiaryFont: string;
+declare const typography: {
+    fontFamily: string;
+    fontSecondaryFamily: string;
+    fontTertiaryFamily: string;
+    fontWeightLight: string;
+    fontWeightRegular: string;
+    fontWeightMedium: string;
+    fontWeightSemiBold: string;
+    fontWeightBold: string;
+    displayLarge: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    displaySmall: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    h1: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    h2: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    h3: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    h4: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    h5: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    h6: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    h7: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+    h8: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+    bodyXl: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+    bodyLg: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+    bodyMd: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+    bodySm: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+    bodyXs: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+    kpiValue: {
+        fontWeight: number;
+        lineHeight: number;
+        letterSpacing: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+    subtitle1: {
+        fontWeight: number;
+        lineHeight: number;
+        fontFamily: string;
+        fontSize: string;
+    };
+    subtitle2: {
+        fontWeight: number;
+        lineHeight: number;
+        fontFamily: string;
+        fontSize: string;
+    };
+    body1: {
+        lineHeight: number;
+        fontFamily: string;
+        fontSize: string;
+    };
+    body2: {
+        lineHeight: number;
+        fontFamily: string;
+        fontSize: string;
+    };
+    caption: {
+        lineHeight: number;
+        fontSize: string;
+    };
+    overline: {
+        fontWeight: number;
+        lineHeight: number;
+        fontSize: string;
+        textTransform: string;
+    };
+    button: {
+        fontWeight: number;
+        lineHeight: number;
+        fontSize: string;
+        textTransform: string;
+    };
+};
+
+declare const components: Components<Theme>;
+
+declare const breakpoints: () => {
+    values: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+};
+
+declare function createShadowColor(colorChannel: string): string;
+interface CustomShadowOptions {
+    'shadow-sm': string;
+    'shadow-md': string;
+    'shadow-lg': string;
+}
+declare function customShadows(colorScheme: 'light' | 'dark'): CustomShadowOptions;
+
+interface CustomSpacingOptions {
+    'spacing-0': string;
+    'spacing-2xs': string;
+    'spacing-xs': string;
+    'spacing-sm': string;
+    'spacing-md': string;
+    'spacing-lg': string;
+    'spacing-xl': string;
+    'spacing-2xl': string;
+    'spacing-3xl': string;
+    'spacing-4xl': string;
+    'spacing-5xl': string;
+    'spacing-6xl': string;
+}
+declare function customSpacing(baseSpacing: number): CustomSpacingOptions;
+
+interface DataTableProps extends Omit<DataGridProps, 'rows'> {
+    data: any[];
+    toggleFilters?: () => void;
+}
+declare const Table: (props: DataTableProps) => react_jsx_runtime.JSX.Element;
+
+interface TableNoRowsProps {
+    noRowsTitle?: React.ReactNode;
+}
+
+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;
+    }
+    interface ThemeOptions {
+        customShadows?: CustomShadowOptions;
+        radius?: RadiusOptions;
+        customSpacing?: CustomSpacingOptions;
+    }
+    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;
+    }
+}
+declare module '@mui/material/AvatarGroup' {
+    interface AvatarGroupPropsVariantOverrides {
+        compact: true;
+    }
+}
+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;
+    }
+}
+declare module '@mui/material/Badge' {
+    interface BadgePropsVariantOverrides {
+        alway: true;
+        busy: true;
+        online: true;
+        offline: true;
+        invisible: true;
+    }
+}
+declare module '@mui/material/Chip' {
+    interface ChipPropsVariantOverrides {
+        soft: true;
+    }
+    interface ChipPropsColorOverrides {
+        neutral: true;
+    }
+}
+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;
+    }
+}
+declare module '@mui/material/Radio' {
+    interface RadioPropsSizeOverrides {
+        large: true;
+    }
+}
+declare module '@mui/x-data-grid' {
+    interface NoRowsOverlayPropsOverrides extends TableNoRowsProps {
+    }
+    interface NoResultsOverlayPropsOverrides extends TableNoRowsProps {
+    }
+}
+declare module '@mui/material/PaginationItem' {
+    interface PaginationItemPropsColorOverrides {
+        info: true;
+        error: true;
+        success: true;
+        warning: true;
+    }
+    interface PaginationItemPropsVariantOverrides {
+        soft: true;
+    }
+}
+
+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;
+};
+/**
+ * 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;
+    };
+};
+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 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 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 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;
+}
+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<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";
+};
+declare const getInitColorSchemeScript: 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">;
+
+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 UserFill: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
+
+declare const EyeClosed: (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 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_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_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_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_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_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_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;
+}
+declare const Logo: ({ sx, isFull, isWhite, isBlack, disableLink, LinkComponent, href, ...rest }: LogoProps) => react_jsx_runtime.JSX.Element;
+
+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 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 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 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 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;
+    };
+}
+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;
+}
+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 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 RHFUpload: ({ name, multiple, helperText, ...rest }: RHFUploadProps) => react_jsx_runtime.JSX.Element;
+
+declare const Field: {
+    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;
+};
+
+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 RHFTextField: ({ name, helperText, type, slotProps, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
+
+interface CopyButtonProps {
+    text: string;
+    size?: 'small' | 'medium';
+}
+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;
+
+export { CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, 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, getCurrencySymbol, getInitColorSchemeScript, 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, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useEventListener, useLocalStorage, useResponsive, useSettings, useWidth, varAlpha, warning };