@undefine-ui/design-system 2.13.0 → 2.14.1

package/dist/index.js

@@ -5682,8 +5682,10 @@ var getBackgroundDefault = (contrast) => {
 // src/theme/create-theme.ts
 var createTheme = (settings) => {
   const initialTheme = {
+    cssVariables: true,
     colorSchemes,
     breakpoints,
+    defaultColorScheme: settings.colorScheme,
     colorSchemeSelector: "data-mui-color-scheme",
     shadows: shadows(settings.colorScheme),
     customShadows: customShadows(settings.colorScheme),
@@ -5727,20 +5729,10 @@ var shouldSkipGeneratingVar = (keys) => {
 };
 
 // src/theme/color-scheme-script.tsx
-import InitColorSchemeScript from "@mui/material/InitColorSchemeScript";
-import { jsx as jsx38 } from "react/jsx-runtime";
 var schemeConfig = {
   modeStorageKey: "theme-mode",
   defaultMode: defaultSettings.colorScheme
 };
-var getInitColorSchemeScript = /* @__PURE__ */ jsx38(
-  InitColorSchemeScript,
-  {
-    modeStorageKey: schemeConfig.modeStorageKey,
-    colorSchemeNode: schemeConfig.defaultMode
-  },
-  schemeConfig.modeStorageKey
-);
 
 // src/theme/ThemeProvider.tsx
 import CssBaseline from "@mui/material/CssBaseline";
@@ -5756,7 +5748,7 @@ import "@fontsource/geist/500.css";
 import "@fontsource/geist/600.css";
 import "@fontsource/geist/700.css";
 import "./satoshi-4X3TX4PE.css";
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var ThemeProvider = ({ children }) => {
   const settings = useSettings();
   const theme = createTheme(settings);
@@ -5767,7 +5759,7 @@ var ThemeProvider = ({ children }) => {
       defaultMode: schemeConfig.defaultMode,
       modeStorageKey: schemeConfig.modeStorageKey,
       children: [
-        /* @__PURE__ */ jsx39(CssBaseline, {}),
+        /* @__PURE__ */ jsx38(CssBaseline, {}),
         children
       ]
     }
@@ -5777,7 +5769,7 @@ var ThemeProvider = ({ children }) => {
 // src/components/Logo/index.tsx
 import Link from "@mui/material/Link";
 import Box2 from "@mui/material/Box";
-import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 var LOGO_MAP = {
   full: {
     black: "https://res.cloudinary.com/dvbtbsinu/image/upload/v1763077834/define-agency/logos/logo-black-full_mjngwu.png",
@@ -5805,7 +5797,7 @@ var Logo = ({
   const type = isFull ? "full" : "single";
   const color = isWhite ? "white" : isBlack ? "black" : "default";
   const logoImg = src ?? LOGO_MAP[type][color];
-  const logo = /* @__PURE__ */ jsx40(
+  const logo = /* @__PURE__ */ jsx39(
     Box2,
     {
       component: "img",
@@ -5818,7 +5810,7 @@ var Logo = ({
   if (disableLink) {
     return logo;
   }
-  return /* @__PURE__ */ jsx40(Link, { component: LinkComponent, href, sx: { display: "contents" }, children: logo });
+  return /* @__PURE__ */ jsx39(Link, { component: LinkComponent, href, sx: { display: "contents" }, children: logo });
 };
 var AnimatedLogo = () => {
   return /* @__PURE__ */ jsxs22(
@@ -5830,7 +5822,7 @@ var AnimatedLogo = () => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx40("style", { children: `
+        /* @__PURE__ */ jsx39("style", { children: `
           @keyframes fadeIn {
             from {
               opacity: 0;
@@ -5891,7 +5883,7 @@ var AnimatedLogo = () => {
             transform-origin: center;
           }
         ` }),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx39(
           "rect",
           {
             className: "background-rect",
@@ -5902,7 +5894,7 @@ var AnimatedLogo = () => {
             fill: "white"
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx39(
           "path",
           {
             className: "bars",
@@ -5910,7 +5902,7 @@ var AnimatedLogo = () => {
             fill: "#5E30EB"
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx39(
           "path",
           {
             className: "d-letter",
@@ -5930,7 +5922,7 @@ import { DataGrid } from "@mui/x-data-grid";
 // src/components/Table/components/TableNoRows.tsx
 import Box3 from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var StyledGridOverlay = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -5940,7 +5932,7 @@ var StyledGridOverlay = styled("div")(({ theme }) => ({
   height: "100%"
 }));
 var TableNoRows = ({ noRowsTitle = "No Rows" }) => {
-  return /* @__PURE__ */ jsx41(StyledGridOverlay, { children: /* @__PURE__ */ jsx41(Box3, { sx: { mt: 1 }, children: noRowsTitle }) });
+  return /* @__PURE__ */ jsx40(StyledGridOverlay, { children: /* @__PURE__ */ jsx40(Box3, { sx: { mt: 1 }, children: noRowsTitle }) });
 };
 var TableNoRows_default = TableNoRows;
 
@@ -5957,7 +5949,7 @@ import {
   gridRowCountSelector,
   gridPageCountSelector
 } from "@mui/x-data-grid";
-import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 var TablePagination = () => {
   const apiRef = useGridApiContext();
   const page = useGridSelector(apiRef, gridPageSelector);
@@ -5982,7 +5974,7 @@ var TablePagination = () => {
             alignItems: { xs: "flex-start", md: "center" },
             spacing: 2,
             children: [
-              /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx41(
                 Pagination,
                 {
                   size: "medium",
@@ -5994,10 +5986,10 @@ var TablePagination = () => {
                   showFirstButton: true,
                   showLastButton: true,
                   onChange: (_, value) => apiRef.current.setPage(value - 1),
-                  renderItem: (item) => /* @__PURE__ */ jsx42(PaginationItem, { ...item })
+                  renderItem: (item) => /* @__PURE__ */ jsx41(PaginationItem, { ...item })
                 }
               ),
-              /* @__PURE__ */ jsx42(Stack, { direction: "row", alignItems: "center", spacing: 1, children: /* @__PURE__ */ jsxs23(Typography, { variant: "body2", color: "text.secondary", children: [
+              /* @__PURE__ */ jsx41(Stack, { direction: "row", alignItems: "center", spacing: 1, children: /* @__PURE__ */ jsxs23(Typography, { variant: "body2", color: "text.secondary", children: [
                 pageSize,
                 " Items per page"
               ] }) })
@@ -6014,10 +6006,10 @@ var TablePagination = () => {
 };
 
 // src/components/Table/Table.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Table = (props) => {
   const { data, showToolbar = false, ...rest } = props;
-  return /* @__PURE__ */ jsx43(Box4, { children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx42(Box4, { children: /* @__PURE__ */ jsx42(
     DataGrid,
     {
       rowHeight: 64,
@@ -6069,7 +6061,7 @@ var imageClasses = {
 };
 
 // src/components/Image/index.tsx
-import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 var Image = forwardRef(function Image2(props, ref) {
   const {
     src,
@@ -6183,7 +6175,7 @@ var Image = forwardRef(function Image2(props, ref) {
       },
       ...rest,
       children: [
-        showLoader && (loadingIndicator ?? /* @__PURE__ */ jsx44(
+        showLoader && (loadingIndicator ?? /* @__PURE__ */ jsx43(
           Skeleton,
           {
             animation: "wave",
@@ -6198,7 +6190,7 @@ var Image = forwardRef(function Image2(props, ref) {
             }
           }
         )),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx43(
           Box5,
           {
             ref: setRefs,
@@ -6227,7 +6219,7 @@ var Image = forwardRef(function Image2(props, ref) {
             }
           }
         ),
-        withOverlay && !showError && /* @__PURE__ */ jsx44(
+        withOverlay && !showError && /* @__PURE__ */ jsx43(
           Box5,
           {
             className: imageClasses.overlay,
@@ -6239,7 +6231,7 @@ var Image = forwardRef(function Image2(props, ref) {
             children: overlay
           }
         ),
-        showError && (renderError ?? /* @__PURE__ */ jsx44(
+        showError && (renderError ?? /* @__PURE__ */ jsx43(
           Box5,
           {
             className: imageClasses.overlay,
@@ -6272,7 +6264,7 @@ import FormHelperText from "@mui/material/FormHelperText";
 // src/components/Upload/components/Placeholder.tsx
 import Stack2 from "@mui/material/Stack";
 import Box6 from "@mui/material/Box";
-import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
 var UploadPlaceholder = ({ hasError, ...rest }) => {
   return /* @__PURE__ */ jsxs25(
     Box6,
@@ -6285,7 +6277,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx44(
           Icon,
           {
             icon: "CloudUpload",
@@ -6299,7 +6291,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
         /* @__PURE__ */ jsxs25(Stack2, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
           /* @__PURE__ */ jsxs25(Box6, { sx: { typography: "h8" }, children: [
             "Drag files here or",
-            /* @__PURE__ */ jsx45(
+            /* @__PURE__ */ jsx44(
               Box6,
               {
                 component: "span",
@@ -6367,12 +6359,12 @@ var fileData = (file) => {
 };
 
 // src/components/Upload/components/RejectionFiles.tsx
-import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 var RejectionFiles = ({ files }) => {
   if (!files.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx45(
     Paper,
     {
       variant: "outlined",
@@ -6406,7 +6398,7 @@ var RejectionFiles = ({ files }) => {
 // src/components/Upload/components/UploadProgress.tsx
 import Box8 from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
-import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
 var UploadProgress = ({ progress: progress2 = 20 }) => {
   return /* @__PURE__ */ jsxs27(
     Box8,
@@ -6420,7 +6412,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
       },
       children: [
         /* @__PURE__ */ jsxs27(Box8, { sx: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx46(
             CircularProgress,
             {
               variant: "determinate",
@@ -6433,7 +6425,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx46(
             CircularProgress,
             {
               variant: "determinate",
@@ -6445,7 +6437,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx46(
             Box8,
             {
               sx: {
@@ -6458,11 +6450,11 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ jsx47(Box8, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
+              children: /* @__PURE__ */ jsx46(Box8, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx47(Box8, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
+        /* @__PURE__ */ jsx46(Box8, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
       ]
     }
   );
@@ -6476,11 +6468,11 @@ import IconButton2 from "@mui/material/IconButton";
 // src/components/Upload/components/SingleFilePreview.tsx
 import Box9 from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var SingleFilePreview = ({ file }) => {
   const fileName = typeof file === "string" ? file : file.name;
   const previewUrl = typeof file === "string" ? file : URL.createObjectURL(file);
-  const renderImg = /* @__PURE__ */ jsx48(
+  const renderImg = /* @__PURE__ */ jsx47(
     Box9,
     {
       component: "img",
@@ -6494,7 +6486,7 @@ var SingleFilePreview = ({ file }) => {
       }
     }
   );
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     Box9,
     {
       sx: {
@@ -6510,7 +6502,7 @@ var SingleFilePreview = ({ file }) => {
   );
 };
 var DeleteButton = ({ sx, ...rest }) => {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     IconButton,
     {
       size: "small",
@@ -6529,13 +6521,13 @@ var DeleteButton = ({ sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx48(Icon, { icon: "XMark", sx: { width: 18, height: 18 } })
+      children: /* @__PURE__ */ jsx47(Icon, { icon: "XMark", sx: { width: 18, height: 18 } })
     }
   );
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
 var MultiFilePreview = ({ files, onRemove }) => {
   const scrollRef = useRef5(null);
   const handleScroll = (direction) => {
@@ -6550,7 +6542,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
   };
   const showNavigation = files.length > 2;
   return /* @__PURE__ */ jsxs28(Box10, { sx: { position: "relative", width: 1 }, children: [
-    showNavigation && /* @__PURE__ */ jsx49(
+    showNavigation && /* @__PURE__ */ jsx48(
       IconButton2,
       {
         size: "small",
@@ -6567,10 +6559,10 @@ var MultiFilePreview = ({ files, onRemove }) => {
             bgcolor: (theme) => varAlpha(theme.vars.palette.common.whiteChannel, 1)
           }
         },
-        children: /* @__PURE__ */ jsx49(Icon, { icon: "NavArrowLeft", width: 20 })
+        children: /* @__PURE__ */ jsx48(Icon, { icon: "NavArrowLeft", width: 20 })
       }
     ),
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx48(
       Box10,
       {
         ref: scrollRef,
@@ -6601,7 +6593,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
                 flexShrink: 0
               },
               children: [
-                /* @__PURE__ */ jsx49(
+                /* @__PURE__ */ jsx48(
                   Box10,
                   {
                     component: "img",
@@ -6615,7 +6607,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
                     }
                   }
                 ),
-                onRemove && /* @__PURE__ */ jsx49(
+                onRemove && /* @__PURE__ */ jsx48(
                   DeleteButton,
                   {
                     onClick: (e) => {
@@ -6631,7 +6623,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
         })
       }
     ),
-    showNavigation && /* @__PURE__ */ jsx49(
+    showNavigation && /* @__PURE__ */ jsx48(
       IconButton2,
       {
         size: "small",
@@ -6648,14 +6640,14 @@ var MultiFilePreview = ({ files, onRemove }) => {
             bgcolor: (theme) => varAlpha(theme.vars.palette.common.whiteChannel, 1)
           }
         },
-        children: /* @__PURE__ */ jsx49(Icon, { icon: "NavArrowRight", width: 20 })
+        children: /* @__PURE__ */ jsx48(Icon, { icon: "NavArrowRight", width: 20 })
       }
     )
   ] });
 };
 
 // src/components/Upload/Upload.tsx
-import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 var Upload = ({
   sx,
   value,
@@ -6682,15 +6674,15 @@ var Upload = ({
   const hasError = isDragReject || !!error2;
   const renderContent = () => {
     if (isUploading) {
-      return /* @__PURE__ */ jsx50(UploadProgress, { progress: uploadProgress });
+      return /* @__PURE__ */ jsx49(UploadProgress, { progress: uploadProgress });
     }
     if (hasFile) {
-      return /* @__PURE__ */ jsx50(SingleFilePreview, { file: value });
+      return /* @__PURE__ */ jsx49(SingleFilePreview, { file: value });
     }
     if (hasFiles) {
-      return /* @__PURE__ */ jsx50(MultiFilePreview, { files: value, onRemove });
+      return /* @__PURE__ */ jsx49(MultiFilePreview, { files: value, onRemove });
     }
-    return /* @__PURE__ */ jsx50(UploadPlaceholder, { hasError });
+    return /* @__PURE__ */ jsx49(UploadPlaceholder, { hasError });
   };
   const shouldShowDropzone = !hasFile && !hasFiles && !isUploading;
   return /* @__PURE__ */ jsxs29(Box11, { sx: { width: 1, position: "relative", ...sx }, children: [
@@ -6733,37 +6725,37 @@ var Upload = ({
           }
         },
         children: [
-          shouldShowDropzone && /* @__PURE__ */ jsx50("input", { ...getInputProps() }),
+          shouldShowDropzone && /* @__PURE__ */ jsx49("input", { ...getInputProps() }),
           renderContent()
         ]
       }
     ),
-    hasFile && !isUploading && /* @__PURE__ */ jsx50(DeleteButton, { onClick: onDelete }),
+    hasFile && !isUploading && /* @__PURE__ */ jsx49(DeleteButton, { onClick: onDelete }),
     hasFiles && /* @__PURE__ */ jsxs29(Stack3, { direction: "row", spacing: 2, sx: { mt: 2 }, children: [
-      onRemoveAll && /* @__PURE__ */ jsx50(
+      onRemoveAll && /* @__PURE__ */ jsx49(
         Button,
         {
           variant: "outlined",
           color: "inherit",
           size: "small",
           onClick: onRemoveAll,
-          startIcon: /* @__PURE__ */ jsx50(Icon, { icon: "Trash", sx: { width: 14, height: 14 } }),
+          startIcon: /* @__PURE__ */ jsx49(Icon, { icon: "Trash", sx: { width: 14, height: 14 } }),
           children: "Remove all"
         }
       ),
-      onUpload && /* @__PURE__ */ jsx50(
+      onUpload && /* @__PURE__ */ jsx49(
         Button,
         {
           variant: "contained",
           size: "small",
           onClick: onUpload,
-          startIcon: /* @__PURE__ */ jsx50(Icon, { icon: "CloudUpload", sx: { width: 14, height: 14 } }),
+          startIcon: /* @__PURE__ */ jsx49(Icon, { icon: "CloudUpload", sx: { width: 14, height: 14 } }),
           children: "Upload files"
         }
       )
     ] }),
-    helperText && /* @__PURE__ */ jsx50(FormHelperText, { error: !!error2, sx: { color: "text.body", fontWeight: 500, mt: 1 }, children: helperText }),
-    /* @__PURE__ */ jsx50(RejectionFiles, { files: [...fileRejections] })
+    helperText && /* @__PURE__ */ jsx49(FormHelperText, { error: !!error2, sx: { color: "text.body", fontWeight: 500, mt: 1 }, children: helperText }),
+    /* @__PURE__ */ jsx49(RejectionFiles, { files: [...fileRejections] })
   ] });
 };
 
@@ -6772,14 +6764,14 @@ import {
   FormProvider as RHFForm
 } from "react-hook-form";
 import Box12 from "@mui/material/Box";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var Form = ({
   children,
   onSubmit,
   methods,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx51(RHFForm, { ...methods, children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx50(RHFForm, { ...methods, children: /* @__PURE__ */ jsx50(
     Box12,
     {
       component: "form",
@@ -6808,7 +6800,7 @@ import FormLabel from "@mui/material/FormLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText2 from "@mui/material/FormHelperText";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 var RHFSwitch = ({
   name,
   description,
@@ -6820,16 +6812,16 @@ var RHFSwitch = ({
 }) => {
   const { control } = useFormContext();
   const baseAriaLabel = `Switch ${name}`;
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx51(
     Controller,
     {
       name,
       control,
       render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs30(Box13, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx51(
           FormControlLabel,
           {
-            control: /* @__PURE__ */ jsx52(
+            control: /* @__PURE__ */ jsx51(
               Switch,
               {
                 ...field,
@@ -6845,8 +6837,8 @@ var RHFSwitch = ({
               }
             ),
             label: /* @__PURE__ */ jsxs30(Stack4, { children: [
-              /* @__PURE__ */ jsx52(Typography3, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
-              description && /* @__PURE__ */ jsx52(Typography3, { variant: "body2", color: "textBody", children: description })
+              /* @__PURE__ */ jsx51(Typography3, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
+              description && /* @__PURE__ */ jsx51(Typography3, { variant: "body2", color: "textBody", children: description })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -6855,7 +6847,7 @@ var RHFSwitch = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx52(
+        (!!error2 || helperText) && /* @__PURE__ */ jsx51(
           FormHelperText2,
           {
             error: !!error2,
@@ -6878,7 +6870,7 @@ var RHFMultiSwitch = ({
 }) => {
   const { control } = useFormContext();
   const getSelected = (currentValues, optionValue) => currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx51(
     Controller,
     {
       name,
@@ -6890,7 +6882,7 @@ var RHFMultiSwitch = ({
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ jsx52(
+            label && /* @__PURE__ */ jsx51(
               FormLabel,
               {
                 component: "legend",
@@ -6899,12 +6891,12 @@ var RHFMultiSwitch = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx52(FormGroup, { ...other, children: options.map((option) => {
+            /* @__PURE__ */ jsx51(FormGroup, { ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ jsx52(
+              return /* @__PURE__ */ jsx51(
                 FormControlLabel,
                 {
-                  control: /* @__PURE__ */ jsx52(
+                  control: /* @__PURE__ */ jsx51(
                     Switch,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -6927,7 +6919,7 @@ var RHFMultiSwitch = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ jsx52(FormHelperText2, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+            (!!error2 || helperText) && /* @__PURE__ */ jsx51(FormHelperText2, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
           ]
         }
       )
@@ -6937,10 +6929,10 @@ var RHFMultiSwitch = ({
 
 // src/components/HookForm/RHFUpload.tsx
 import { Controller as Controller2, useFormContext as useFormContext2 } from "react-hook-form";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
   const { control, setValue } = useFormContext2();
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx52(
     Controller2,
     {
       name,
@@ -6968,7 +6960,7 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
         const onRemoveAll = () => {
           setValue(name, [], { shouldValidate: true });
         };
-        return /* @__PURE__ */ jsx53(
+        return /* @__PURE__ */ jsx52(
           Upload,
           {
             multiple,
@@ -6998,7 +6990,7 @@ import Box14 from "@mui/material/Box";
 import FormHelperText3 from "@mui/material/FormHelperText";
 import { inputBaseClasses as inputBaseClasses3 } from "@mui/material/InputBase";
 import TextField from "@mui/material/TextField";
-import { Fragment, jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
 var OTPInput = (props) => {
   const { length = 6, onChange, onComplete, error: error2, helperText, containerProps, ...rest } = props;
   const theme = useTheme2();
@@ -7067,18 +7059,17 @@ var OTPInput = (props) => {
     }
   };
   return /* @__PURE__ */ jsxs31(Fragment, { children: [
-    /* @__PURE__ */ jsx54(Box14, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx53(Box14, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ jsx53(
       Box14,
       {
         display: "flex",
         alignItems: "center",
         sx: {
-          width: "100%",
           "&:not(:last-of-type)": {
             mr: 1.5
           }
         },
-        children: /* @__PURE__ */ jsx54(
+        children: /* @__PURE__ */ jsx53(
           TextField,
           {
             size: "medium",
@@ -7161,21 +7152,21 @@ var OTPInput = (props) => {
       },
       index
     )) }),
-    error2 && /* @__PURE__ */ jsx54(FormHelperText3, { sx: { color: "error.main" }, children: helperText })
+    error2 && /* @__PURE__ */ jsx53(FormHelperText3, { sx: { color: "error.main" }, children: helperText })
   ] });
 };
 var OTPInput_default = OTPInput;
 
 // src/components/HookForm/RHFOTPInput.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var RHFOTPInput = ({ name, length = 6, helperText, ...rest }) => {
   const { control, setValue } = useFormContext3();
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx54(
     Controller3,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx55(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx54(
         OTPInput_default,
         {
           length,
@@ -7195,16 +7186,16 @@ import { Controller as Controller4, useFormContext as useFormContext4 } from "re
 import IconButton3 from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField2 from "@mui/material/TextField";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
   const { control } = useFormContext4();
   const passwordVisibility = useBoolean();
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx55(
     Controller4,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx56(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx55(
         TextField2,
         {
           ...field,
@@ -7225,7 +7216,7 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
             input: {
               ...slotProps?.input,
               ...type === "password" && {
-                endAdornment: /* @__PURE__ */ jsx56(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx56(IconButton3, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ jsx56(
+                endAdornment: /* @__PURE__ */ jsx55(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx55(IconButton3, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ jsx55(
                   Icon,
                   {
                     icon: passwordVisibility.value ? "EyeClosed" : "Eye",
@@ -7252,7 +7243,7 @@ import FormLabel2 from "@mui/material/FormLabel";
 import RadioGroup from "@mui/material/RadioGroup";
 import FormControl2 from "@mui/material/FormControl";
 import FormHelperText4 from "@mui/material/FormHelperText";
-import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs32 } from "react/jsx-runtime";
 var RHFRadioGroup = ({
   name,
   label,
@@ -7264,13 +7255,13 @@ var RHFRadioGroup = ({
   const { control } = useFormContext5();
   const labelledby = `${name}-radio-buttons-group-label`;
   const ariaLabel = (val) => `Radio ${val}`;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx56(
     Controller5,
     {
       name,
       control,
       render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs32(FormControl2, { component: "fieldset", sx: slotProps?.wrap, children: [
-        label && /* @__PURE__ */ jsx57(
+        label && /* @__PURE__ */ jsx56(
           FormLabel2,
           {
             id: labelledby,
@@ -7280,11 +7271,11 @@ var RHFRadioGroup = ({
             children: label
           }
         ),
-        /* @__PURE__ */ jsx57(RadioGroup, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx56(RadioGroup, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ jsx56(
           FormControlLabel2,
           {
             value: option.value,
-            control: /* @__PURE__ */ jsx57(
+            control: /* @__PURE__ */ jsx56(
               Radio,
               {
                 ...slotProps?.radio,
@@ -7297,8 +7288,8 @@ var RHFRadioGroup = ({
               }
             ),
             label: /* @__PURE__ */ jsxs32(Stack5, { children: [
-              /* @__PURE__ */ jsx57(Typography4, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-              option?.description && /* @__PURE__ */ jsx57(Typography4, { variant: "body2", color: "textBody", children: option?.description })
+              /* @__PURE__ */ jsx56(Typography4, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
+              option?.description && /* @__PURE__ */ jsx56(Typography4, { variant: "body2", color: "textBody", children: option?.description })
             ] }),
             sx: {
               alignItems: option?.description ? "flex-start" : "center"
@@ -7306,7 +7297,7 @@ var RHFRadioGroup = ({
           },
           option.value
         )) }),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx57(FormHelperText4, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ jsx56(FormHelperText4, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -7316,7 +7307,7 @@ var RHFRadioGroup = ({
 import { Controller as Controller6, useFormContext as useFormContext6 } from "react-hook-form";
 import TextField3 from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var RHFAutocomplete = ({
   name,
   label,
@@ -7327,12 +7318,12 @@ var RHFAutocomplete = ({
   ...other
 }) => {
   const { control, setValue } = useFormContext6();
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx57(
     Controller6,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx58(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx57(
         Autocomplete,
         {
           ...field,
@@ -7341,7 +7332,7 @@ var RHFAutocomplete = ({
             setValue(name, newValue, { shouldValidate: true });
             handleChange?.(newValue);
           },
-          renderInput: (params) => /* @__PURE__ */ jsx58(
+          renderInput: (params) => /* @__PURE__ */ jsx57(
             TextField3,
             {
               label,
@@ -7370,7 +7361,7 @@ import FormLabel3 from "@mui/material/FormLabel";
 import FormControl3 from "@mui/material/FormControl";
 import FormHelperText5 from "@mui/material/FormHelperText";
 import FormControlLabel3 from "@mui/material/FormControlLabel";
-import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 var RHFCheckbox = ({
   name,
   description,
@@ -7382,16 +7373,16 @@ var RHFCheckbox = ({
 }) => {
   const { control } = useFormContext7();
   const baseAriaLabel = `Checkbox for ${name}`;
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx58(
     Controller7,
     {
       name,
       control,
       render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs33(Box15, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx58(
           FormControlLabel3,
           {
-            control: /* @__PURE__ */ jsx59(
+            control: /* @__PURE__ */ jsx58(
               Checkbox,
               {
                 ...field,
@@ -7407,8 +7398,8 @@ var RHFCheckbox = ({
               }
             ),
             label: /* @__PURE__ */ jsxs33(Stack6, { children: [
-              /* @__PURE__ */ jsx59(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
-              description && /* @__PURE__ */ jsx59(Typography5, { variant: "body2", color: "textBody", children: description })
+              /* @__PURE__ */ jsx58(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
+              description && /* @__PURE__ */ jsx58(Typography5, { variant: "body2", color: "textBody", children: description })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -7417,7 +7408,7 @@ var RHFCheckbox = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx59(FormHelperText5, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ jsx58(FormHelperText5, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -7433,7 +7424,7 @@ var RHFMultiCheckbox = ({
 }) => {
   const { control } = useFormContext7();
   const getSelected = (currentValues, optionValue) => currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx58(
     Controller7,
     {
       name,
@@ -7447,7 +7438,7 @@ var RHFMultiCheckbox = ({
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ jsx59(
+            label && /* @__PURE__ */ jsx58(
               FormLabel3,
               {
                 component: "legend",
@@ -7456,12 +7447,12 @@ var RHFMultiCheckbox = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx59(FormGroup2, { row, ...other, children: options.map((option) => {
+            /* @__PURE__ */ jsx58(FormGroup2, { row, ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ jsx59(
+              return /* @__PURE__ */ jsx58(
                 FormControlLabel3,
                 {
-                  control: /* @__PURE__ */ jsx59(
+                  control: /* @__PURE__ */ jsx58(
                     Checkbox,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -7480,8 +7471,8 @@ var RHFMultiCheckbox = ({
                     }
                   ),
                   label: /* @__PURE__ */ jsxs33(Stack6, { children: [
-                    /* @__PURE__ */ jsx59(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-                    option?.description && /* @__PURE__ */ jsx59(Typography5, { variant: "body2", color: "textBody", children: option?.description })
+                    /* @__PURE__ */ jsx58(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
+                    option?.description && /* @__PURE__ */ jsx58(Typography5, { variant: "body2", color: "textBody", children: option?.description })
                   ] }),
                   sx: {
                     alignItems: option?.description ? "flex-start" : "center"
@@ -7490,7 +7481,7 @@ var RHFMultiCheckbox = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ jsx59(
+            (!!error2 || helperText) && /* @__PURE__ */ jsx58(
               FormHelperText5,
               {
                 sx: { mx: 0, ...slotProps?.formHelperText?.sx },
@@ -7520,17 +7511,17 @@ var Field = {
 // src/components/CopyButton/index.tsx
 import Tooltip from "@mui/material/Tooltip";
 import IconButton4 from "@mui/material/IconButton";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var CopyButton = ({ text: text2, size = "small" }) => {
   const { copy, isCopied } = useCopyToClipboard();
-  return /* @__PURE__ */ jsx60(Tooltip, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx59(Tooltip, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx59(
     IconButton4,
     {
       size,
       onClick: () => copy(text2),
       "aria-label": "copy token",
       sx: { color: "icon.black" },
-      children: /* @__PURE__ */ jsx60(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ jsx59(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
     }
   ) });
 };
@@ -7539,9 +7530,9 @@ var CopyButton = ({ text: text2, size = "small" }) => {
 import Portal from "@mui/material/Portal";
 import Box16 from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var LoadingScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx61(
+  const content = /* @__PURE__ */ jsx60(
     Box16,
     {
       sx: {
@@ -7555,16 +7546,16 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx61(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
+      children: /* @__PURE__ */ jsx60(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx61(Portal, { children: content });
+    return /* @__PURE__ */ jsx60(Portal, { children: content });
   }
   return content;
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx61(
+  const content = /* @__PURE__ */ jsx60(
     Box16,
     {
       sx: {
@@ -7581,11 +7572,11 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx61(AnimatedLogo, {})
+      children: /* @__PURE__ */ jsx60(AnimatedLogo, {})
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx61(Portal, { children: content });
+    return /* @__PURE__ */ jsx60(Portal, { children: content });
   }
   return content;
 };
@@ -7672,7 +7663,6 @@ export {
   fShortenNumber,
   formatFullname,
   getCurrencySymbol,
-  getInitColorSchemeScript,
   getInitials,
   getStorage,
   grey,