@undefine-ui/design-system 2.12.0 → 2.14.0

package/dist/index.cjs

@@ -44,6 +44,7 @@ __export(index_exports, {
   Field: () => Field,
   Form: () => Form,
   Icon: () => Icon,
+  Image: () => Image,
   InfoCircleFill: () => InfoCircleFill,
   InfoCircleOutline: () => InfoCircleOutline,
   KeyCommand: () => KeyCommand,
@@ -111,7 +112,6 @@ __export(index_exports, {
   fShortenNumber: () => fShortenNumber,
   formatFullname: () => formatFullname,
   getCurrencySymbol: () => getCurrencySymbol,
-  getInitColorSchemeScript: () => getInitColorSchemeScript,
   getInitials: () => getInitials,
   getStorage: () => getStorage,
   grey: () => grey,
@@ -5850,8 +5850,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),
@@ -5895,20 +5897,10 @@ var shouldSkipGeneratingVar = (keys) => {
 };
 
 // src/theme/color-scheme-script.tsx
-var import_InitColorSchemeScript = __toESM(require("@mui/material/InitColorSchemeScript"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
 var schemeConfig = {
   modeStorageKey: "theme-mode",
   defaultMode: defaultSettings.colorScheme
 };
-var getInitColorSchemeScript = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-  import_InitColorSchemeScript.default,
-  {
-    modeStorageKey: schemeConfig.modeStorageKey,
-    colorSchemeNode: schemeConfig.defaultMode
-  },
-  schemeConfig.modeStorageKey
-);
 
 // src/theme/ThemeProvider.tsx
 var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"), 1);
@@ -5924,18 +5916,18 @@ var import__8 = require("@fontsource/geist/500.css");
 var import__9 = require("@fontsource/geist/600.css");
 var import__10 = require("@fontsource/geist/700.css");
 var import_satoshi = require("./satoshi-4X3TX4PE.css");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var ThemeProvider = ({ children }) => {
   const settings = useSettings();
   const theme = createTheme(settings);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     import_styles31.ThemeProvider,
     {
       theme,
       defaultMode: schemeConfig.defaultMode,
       modeStorageKey: schemeConfig.modeStorageKey,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_CssBaseline.default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_CssBaseline.default, {}),
         children
       ]
     }
@@ -5945,7 +5937,7 @@ var ThemeProvider = ({ children }) => {
 // src/components/Logo/index.tsx
 var import_Link = __toESM(require("@mui/material/Link"), 1);
 var import_Box2 = __toESM(require("@mui/material/Box"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var LOGO_MAP = {
   full: {
     black: "https://res.cloudinary.com/dvbtbsinu/image/upload/v1763077834/define-agency/logos/logo-black-full_mjngwu.png",
@@ -5973,7 +5965,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__ */ (0, import_jsx_runtime40.jsx)(
+  const logo = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     import_Box2.default,
     {
       component: "img",
@@ -5986,10 +5978,10 @@ var Logo = ({
   if (disableLink) {
     return logo;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Link.default, { component: LinkComponent, href, sx: { display: "contents" }, children: logo });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_Link.default, { component: LinkComponent, href, sx: { display: "contents" }, children: logo });
 };
 var AnimatedLogo = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "svg",
     {
       width: "120",
@@ -5998,7 +5990,7 @@ var AnimatedLogo = () => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("style", { children: `
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("style", { children: `
           @keyframes fadeIn {
             from {
               opacity: 0;
@@ -6059,7 +6051,7 @@ var AnimatedLogo = () => {
             transform-origin: center;
           }
         ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "rect",
           {
             className: "background-rect",
@@ -6070,7 +6062,7 @@ var AnimatedLogo = () => {
             fill: "white"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "path",
           {
             className: "bars",
@@ -6078,7 +6070,7 @@ var AnimatedLogo = () => {
             fill: "#5E30EB"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "path",
           {
             className: "d-letter",
@@ -6098,7 +6090,7 @@ var import_x_data_grid2 = require("@mui/x-data-grid");
 // src/components/Table/components/TableNoRows.tsx
 var import_Box3 = __toESM(require("@mui/material/Box"), 1);
 var import_styles32 = require("@mui/material/styles");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var StyledGridOverlay = (0, import_styles32.styled)("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -6108,7 +6100,7 @@ var StyledGridOverlay = (0, import_styles32.styled)("div")(({ theme }) => ({
   height: "100%"
 }));
 var TableNoRows = ({ noRowsTitle = "No Rows" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StyledGridOverlay, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_Box3.default, { sx: { mt: 1 }, children: noRowsTitle }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StyledGridOverlay, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Box3.default, { sx: { mt: 1 }, children: noRowsTitle }) });
 };
 var TableNoRows_default = TableNoRows;
 
@@ -6118,7 +6110,7 @@ var import_Typography2 = __toESM(require("@mui/material/Typography"), 1);
 var import_Pagination = __toESM(require("@mui/material/Pagination"), 1);
 var import_PaginationItem2 = __toESM(require("@mui/material/PaginationItem"), 1);
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var TablePagination = () => {
   const apiRef = (0, import_x_data_grid.useGridApiContext)();
   const page = (0, import_x_data_grid.useGridSelector)(apiRef, import_x_data_grid.gridPageSelector);
@@ -6127,7 +6119,7 @@ var TablePagination = () => {
   const rowCount = (0, import_x_data_grid.useGridSelector)(apiRef, import_x_data_grid.gridRowCountSelector);
   const from = page * pageSize + 1;
   const to = Math.min((page + 1) * pageSize, rowCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     import_Stack.default,
     {
       direction: "row",
@@ -6136,14 +6128,14 @@ var TablePagination = () => {
       width: 1,
       p: 1.5,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           import_Stack.default,
           {
             direction: { xs: "column", md: "row" },
             alignItems: { xs: "flex-start", md: "center" },
             spacing: 2,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 import_Pagination.default,
                 {
                   size: "medium",
@@ -6155,17 +6147,17 @@ var TablePagination = () => {
                   showFirstButton: true,
                   showLastButton: true,
                   onChange: (_, value) => apiRef.current.setPage(value - 1),
-                  renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_PaginationItem2.default, { ...item })
+                  renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_PaginationItem2.default, { ...item })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Stack.default, { direction: "row", alignItems: "center", spacing: 1, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Typography2.default, { variant: "body2", color: "text.secondary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_Stack.default, { direction: "row", alignItems: "center", spacing: 1, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Typography2.default, { variant: "body2", color: "text.secondary", children: [
                 pageSize,
                 " Items per page"
               ] }) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Typography2.default, { variant: "body2", color: "text.secondary", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Typography2.default, { variant: "body2", color: "text.secondary", children: [
           `${from} \u2013 ${to} of ${rowCount !== -1 ? rowCount : `more than ${to}`} items`,
           " "
         ] })
@@ -6175,10 +6167,10 @@ var TablePagination = () => {
 };
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Table = (props) => {
   const { data, showToolbar = false, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_Box4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Box4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_x_data_grid2.DataGrid,
     {
       rowHeight: 64,
@@ -6217,20 +6209,226 @@ var Table = (props) => {
   ) });
 };
 
+// src/components/Image/index.tsx
+var import_react12 = require("react");
+var import_Box5 = __toESM(require("@mui/material/Box"), 1);
+var import_Skeleton = __toESM(require("@mui/material/Skeleton"), 1);
+
+// src/components/Image/classes.ts
+var imageClasses = {
+  root: "undefine__image__root",
+  wrapper: "undefine__image__wrapper",
+  overlay: "undefine__image__overlay"
+};
+
+// src/components/Image/index.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var Image = (0, import_react12.forwardRef)(function Image2(props, ref) {
+  const {
+    src,
+    alt,
+    lazy = true,
+    fallbackSrc,
+    srcSet,
+    sizes: sizes2,
+    aspectRatio,
+    fit = "cover",
+    position = "center",
+    overlay,
+    withOverlay = !!overlay,
+    loadingIndicator,
+    renderError,
+    observerMargin = "200px",
+    className,
+    sx,
+    onLoad,
+    onError,
+    imgSx,
+    imgProps,
+    ...rest
+  } = props;
+  const imageRef = (0, import_react12.useRef)(null);
+  const [status, setStatus] = (0, import_react12.useState)(lazy ? "idle" : "loading");
+  const [currentSrc, setCurrentSrc] = (0, import_react12.useState)(lazy ? void 0 : src);
+  const [currentSrcSet, setCurrentSrcSet] = (0, import_react12.useState)(lazy ? void 0 : srcSet);
+  const [hasTriedFallback, setHasTriedFallback] = (0, import_react12.useState)(false);
+  const setRefs = (node) => {
+    imageRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  (0, import_react12.useEffect)(() => {
+    setStatus(lazy ? "idle" : "loading");
+    setCurrentSrc(lazy ? void 0 : src);
+    setCurrentSrcSet(lazy ? void 0 : srcSet);
+    setHasTriedFallback(false);
+  }, [lazy, src, srcSet]);
+  (0, import_react12.useEffect)(() => {
+    if (!lazy) {
+      return;
+    }
+    if (typeof IntersectionObserver === "undefined") {
+      setCurrentSrc(src);
+      setCurrentSrcSet(srcSet);
+      setStatus("loading");
+      return;
+    }
+    const target = imageRef.current;
+    if (!target) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setCurrentSrc(src);
+            setCurrentSrcSet(srcSet);
+            setStatus("loading");
+            observer.disconnect();
+          }
+        });
+      },
+      { rootMargin: observerMargin, threshold: 0.2 }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [lazy, observerMargin, src, srcSet]);
+  const {
+    onLoad: imgOnLoad,
+    onError: imgOnError,
+    loading: imgLoading,
+    ...restImgProps
+  } = imgProps ?? {};
+  const handleLoad = (event) => {
+    setStatus("loaded");
+    imgOnLoad?.(event);
+    onLoad?.(event);
+  };
+  const handleError = (event) => {
+    if (fallbackSrc && !hasTriedFallback) {
+      setHasTriedFallback(true);
+      setCurrentSrc(fallbackSrc);
+      setStatus("loading");
+      return;
+    }
+    setStatus("error");
+    imgOnError?.(event);
+    onError?.(event);
+  };
+  const showLoader = status === "idle" || status === "loading";
+  const showError = status === "error";
+  const loadingAttr = lazy ? "lazy" : imgLoading ?? "eager";
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    import_Box5.default,
+    {
+      className: imageClasses.root.concat(className ? ` ${className}` : ""),
+      sx: {
+        position: "relative",
+        display: "block",
+        width: 1,
+        lineHeight: 0,
+        overflow: aspectRatio ? "hidden" : void 0,
+        ...aspectRatio && { aspectRatio },
+        ...sx
+      },
+      ...rest,
+      children: [
+        showLoader && (loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_Skeleton.default,
+          {
+            animation: "wave",
+            variant: "rectangular",
+            className: imageClasses.overlay,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              width: 1,
+              height: 1,
+              borderRadius: 1
+            }
+          }
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_Box5.default,
+          {
+            ref: setRefs,
+            component: "img",
+            className: imageClasses.wrapper,
+            src: currentSrc,
+            srcSet: currentSrcSet,
+            sizes: sizes2,
+            alt,
+            loading: loadingAttr,
+            onLoad: handleLoad,
+            onError: handleError,
+            ...restImgProps,
+            sx: {
+              width: 1,
+              height: aspectRatio ? "100%" : "auto",
+              display: "block",
+              objectFit: fit,
+              objectPosition: position,
+              opacity: status === "loaded" ? 1 : 0,
+              transition: (theme) => theme.transitions.create("opacity", {
+                duration: theme.transitions.duration.shorter
+              }),
+              ...aspectRatio && { position: "absolute", inset: 0 },
+              ...imgSx
+            }
+          }
+        ),
+        withOverlay && !showError && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_Box5.default,
+          {
+            className: imageClasses.overlay,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none"
+            },
+            children: overlay
+          }
+        ),
+        showError && (renderError ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_Box5.default,
+          {
+            className: imageClasses.overlay,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              bgcolor: (theme) => theme.vars.palette.grey[200],
+              color: (theme) => theme.vars.palette.text.secondary,
+              fontSize: 12,
+              letterSpacing: 0.2
+            },
+            children: "Image unavailable"
+          }
+        ))
+      ]
+    }
+  );
+});
+
 // src/components/Upload/Upload.tsx
 var import_react_dropzone = require("react-dropzone");
-var import_Box10 = __toESM(require("@mui/material/Box"), 1);
+var import_Box11 = __toESM(require("@mui/material/Box"), 1);
 var import_Stack3 = __toESM(require("@mui/material/Stack"), 1);
 var import_Button3 = __toESM(require("@mui/material/Button"), 1);
 var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"), 1);
 
 // src/components/Upload/components/Placeholder.tsx
 var import_Stack2 = __toESM(require("@mui/material/Stack"), 1);
-var import_Box5 = __toESM(require("@mui/material/Box"), 1);
+var import_Box6 = __toESM(require("@mui/material/Box"), 1);
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var UploadPlaceholder = ({ hasError, ...rest }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-    import_Box5.default,
+    import_Box6.default,
     {
       sx: {
         display: "flex",
@@ -6252,10 +6450,10 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack2.default, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Box5.default, { sx: { typography: "h8" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Box6.default, { sx: { typography: "h8" }, children: [
             "Drag files here or",
             /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-              import_Box5.default,
+              import_Box6.default,
               {
                 component: "span",
                 sx: {
@@ -6268,7 +6466,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-            import_Box5.default,
+            import_Box6.default,
             {
               sx: {
                 typography: "bodyMd",
@@ -6289,7 +6487,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
 };
 
 // src/components/Upload/components/RejectionFiles.tsx
-var import_Box6 = __toESM(require("@mui/material/Box"), 1);
+var import_Box7 = __toESM(require("@mui/material/Box"), 1);
 var import_Paper2 = __toESM(require("@mui/material/Paper"), 1);
 var import_Typography3 = __toESM(require("@mui/material/Typography"), 1);
 
@@ -6342,13 +6540,13 @@ var RejectionFiles = ({ files }) => {
       },
       children: files.map(({ file, errors }) => {
         const { path, size } = fileData(file);
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box6.default, { sx: { my: 1 }, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box7.default, { sx: { my: 1 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Typography3.default, { variant: "subtitle2", noWrap: true, children: [
             path,
             " - ",
             size ? fData(size) : ""
           ] }),
-          errors.map((error2) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box6.default, { component: "span", sx: { typography: "caption" }, children: [
+          errors.map((error2) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box7.default, { component: "span", sx: { typography: "caption" }, children: [
             "- ",
             error2.message
           ] }, error2.code))
@@ -6359,12 +6557,12 @@ var RejectionFiles = ({ files }) => {
 };
 
 // src/components/Upload/components/UploadProgress.tsx
-var import_Box7 = __toESM(require("@mui/material/Box"), 1);
+var import_Box8 = __toESM(require("@mui/material/Box"), 1);
 var import_CircularProgress2 = __toESM(require("@mui/material/CircularProgress"), 1);
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var UploadProgress = ({ progress: progress2 = 20 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-    import_Box7.default,
+    import_Box8.default,
     {
       sx: {
         display: "flex",
@@ -6374,7 +6572,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
         height: "100%"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_Box7.default, { sx: { position: "relative", display: "inline-flex" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_Box8.default, { sx: { position: "relative", display: "inline-flex" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             import_CircularProgress2.default,
             {
@@ -6401,7 +6599,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            import_Box7.default,
+            import_Box8.default,
             {
               sx: {
                 top: 0,
@@ -6413,30 +6611,30 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Box7.default, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Box8.default, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Box7.default, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Box8.default, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
       ]
     }
   );
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-var import_react12 = require("react");
-var import_Box9 = __toESM(require("@mui/material/Box"), 1);
+var import_react13 = require("react");
+var import_Box10 = __toESM(require("@mui/material/Box"), 1);
 var import_IconButton3 = __toESM(require("@mui/material/IconButton"), 1);
 
 // src/components/Upload/components/SingleFilePreview.tsx
-var import_Box8 = __toESM(require("@mui/material/Box"), 1);
+var import_Box9 = __toESM(require("@mui/material/Box"), 1);
 var import_IconButton2 = __toESM(require("@mui/material/IconButton"), 1);
 var import_jsx_runtime47 = require("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__ */ (0, import_jsx_runtime47.jsx)(
-    import_Box8.default,
+    import_Box9.default,
     {
       component: "img",
       alt: fileName,
@@ -6450,7 +6648,7 @@ var SingleFilePreview = ({ file }) => {
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    import_Box8.default,
+    import_Box9.default,
     {
       sx: {
         p: 1,
@@ -6492,7 +6690,7 @@ var DeleteButton = ({ sx, ...rest }) => {
 // src/components/Upload/components/MultiFilePreview.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var MultiFilePreview = ({ files, onRemove }) => {
-  const scrollRef = (0, import_react12.useRef)(null);
+  const scrollRef = (0, import_react13.useRef)(null);
   const handleScroll = (direction) => {
     if (scrollRef.current) {
       const scrollAmount = 300;
@@ -6504,7 +6702,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
     }
   };
   const showNavigation = files.length > 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_Box9.default, { sx: { position: "relative", width: 1 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_Box10.default, { sx: { position: "relative", width: 1 }, children: [
     showNavigation && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       import_IconButton3.default,
       {
@@ -6526,7 +6724,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      import_Box9.default,
+      import_Box10.default,
       {
         ref: scrollRef,
         sx: {
@@ -6545,7 +6743,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
           const fileName = typeof file === "string" ? file : file.name;
           const previewUrl = typeof file === "string" ? file : URL.createObjectURL(file);
           return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-            import_Box9.default,
+            import_Box10.default,
             {
               sx: {
                 position: "relative",
@@ -6557,7 +6755,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  import_Box9.default,
+                  import_Box10.default,
                   {
                     component: "img",
                     alt: fileName,
@@ -6648,9 +6846,9 @@ var Upload = ({
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(UploadPlaceholder, { hasError });
   };
   const shouldShowDropzone = !hasFile && !hasFiles && !isUploading;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_Box10.default, { sx: { width: 1, position: "relative", ...sx }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_Box11.default, { sx: { width: 1, position: "relative", ...sx }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      import_Box10.default,
+      import_Box11.default,
       {
         ...shouldShowDropzone ? getRootProps() : {},
         sx: {
@@ -6724,7 +6922,7 @@ var Upload = ({
 
 // src/components/HookForm/Form.tsx
 var import_react_hook_form = require("react-hook-form");
-var import_Box11 = __toESM(require("@mui/material/Box"), 1);
+var import_Box12 = __toESM(require("@mui/material/Box"), 1);
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var Form = ({
   children,
@@ -6733,7 +6931,7 @@ var Form = ({
   ...rest
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_Box11.default,
+    import_Box12.default,
     {
       component: "form",
       onSubmit: (e) => {
@@ -6753,7 +6951,7 @@ var Form = ({
 // src/components/HookForm/RHFSwitch.tsx
 var import_react_hook_form2 = require("react-hook-form");
 var import_Stack4 = __toESM(require("@mui/material/Stack"), 1);
-var import_Box12 = __toESM(require("@mui/material/Box"), 1);
+var import_Box13 = __toESM(require("@mui/material/Box"), 1);
 var import_Typography4 = __toESM(require("@mui/material/Typography"), 1);
 var import_Switch2 = __toESM(require("@mui/material/Switch"), 1);
 var import_FormGroup = __toESM(require("@mui/material/FormGroup"), 1);
@@ -6778,7 +6976,7 @@ var RHFSwitch = ({
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_Box12.default, { sx: slotProps?.wrap, children: [
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_Box13.default, { sx: slotProps?.wrap, children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           import_FormControlLabel2.default,
           {
@@ -6945,9 +7143,9 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
 var import_react_hook_form4 = require("react-hook-form");
 
 // src/components/OTPInput/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_styles37 = require("@mui/material/styles");
-var import_Box13 = __toESM(require("@mui/material/Box"), 1);
+var import_Box14 = __toESM(require("@mui/material/Box"), 1);
 var import_FormHelperText3 = __toESM(require("@mui/material/FormHelperText"), 1);
 var import_InputBase3 = require("@mui/material/InputBase");
 var import_TextField2 = __toESM(require("@mui/material/TextField"), 1);
@@ -6955,8 +7153,8 @@ var import_jsx_runtime53 = require("react/jsx-runtime");
 var OTPInput = (props) => {
   const { length = 6, onChange, onComplete, error: error2, helperText, containerProps, ...rest } = props;
   const theme = (0, import_styles37.useTheme)();
-  const [otp, setOtp] = (0, import_react13.useState)(Array(length).fill(""));
-  const inputsRef = (0, import_react13.useRef)([]);
+  const [otp, setOtp] = (0, import_react14.useState)(Array(length).fill(""));
+  const inputsRef = (0, import_react14.useRef)([]);
   const handleChange = (value, index) => {
     if (!/^[0-9]$/.test(value) && value !== "") return;
     const newOtp = [...otp];
@@ -7020,12 +7218,13 @@ var OTPInput = (props) => {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Box13.default, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      import_Box13.default,
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Box14.default, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      import_Box14.default,
       {
         display: "flex",
         alignItems: "center",
         sx: {
+          width: "100%",
           "&:not(:last-of-type)": {
             mr: 1.5
           }
@@ -7314,7 +7513,7 @@ var RHFAutocomplete = ({
 // src/components/HookForm/RHFCheckbox.tsx
 var import_react_hook_form8 = require("react-hook-form");
 var import_Stack6 = __toESM(require("@mui/material/Stack"), 1);
-var import_Box14 = __toESM(require("@mui/material/Box"), 1);
+var import_Box15 = __toESM(require("@mui/material/Box"), 1);
 var import_Typography6 = __toESM(require("@mui/material/Typography"), 1);
 var import_Checkbox3 = __toESM(require("@mui/material/Checkbox"), 1);
 var import_FormGroup2 = __toESM(require("@mui/material/FormGroup"), 1);
@@ -7339,7 +7538,7 @@ var RHFCheckbox = ({
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_Box14.default, { sx: slotProps?.wrap, children: [
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_Box15.default, { sx: slotProps?.wrap, children: [
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           import_FormControlLabel4.default,
           {
@@ -7489,12 +7688,12 @@ var CopyButton = ({ text: text2, size = "small" }) => {
 
 // src/components/LoadingScreen/index.tsx
 var import_Portal = __toESM(require("@mui/material/Portal"), 1);
-var import_Box15 = __toESM(require("@mui/material/Box"), 1);
+var import_Box16 = __toESM(require("@mui/material/Box"), 1);
 var import_LinearProgress = __toESM(require("@mui/material/LinearProgress"), 1);
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var LoadingScreen = ({ portal, sx, ...rest }) => {
   const content = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    import_Box15.default,
+    import_Box16.default,
     {
       sx: {
         px: 5,
@@ -7517,7 +7716,7 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
   const content = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    import_Box15.default,
+    import_Box16.default,
     {
       sx: {
         right: 0,
@@ -7557,6 +7756,7 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   Field,
   Form,
   Icon,
+  Image,
   InfoCircleFill,
   InfoCircleOutline,
   KeyCommand,
@@ -7624,7 +7824,6 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   fShortenNumber,
   formatFullname,
   getCurrencySymbol,
-  getInitColorSchemeScript,
   getInitials,
   getStorage,
   grey,