@undefine-ui/design-system 2.12.0 → 2.14.0

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,
@@ -6056,20 +6048,226 @@ var Table = (props) => {
   ) });
 };
 
+// src/components/Image/index.tsx
+import { useRef as useRef4, useState as useState9, useEffect as useEffect5, forwardRef } from "react";
+import Box5 from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+
+// src/components/Image/classes.ts
+var imageClasses = {
+  root: "undefine__image__root",
+  wrapper: "undefine__image__wrapper",
+  overlay: "undefine__image__overlay"
+};
+
+// src/components/Image/index.tsx
+import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+var Image = 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 = useRef4(null);
+  const [status, setStatus] = useState9(lazy ? "idle" : "loading");
+  const [currentSrc, setCurrentSrc] = useState9(lazy ? void 0 : src);
+  const [currentSrcSet, setCurrentSrcSet] = useState9(lazy ? void 0 : srcSet);
+  const [hasTriedFallback, setHasTriedFallback] = useState9(false);
+  const setRefs = (node) => {
+    imageRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  useEffect5(() => {
+    setStatus(lazy ? "idle" : "loading");
+    setCurrentSrc(lazy ? void 0 : src);
+    setCurrentSrcSet(lazy ? void 0 : srcSet);
+    setHasTriedFallback(false);
+  }, [lazy, src, srcSet]);
+  useEffect5(() => {
+    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__ */ jsxs24(
+    Box5,
+    {
+      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__ */ jsx43(
+          Skeleton,
+          {
+            animation: "wave",
+            variant: "rectangular",
+            className: imageClasses.overlay,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              width: 1,
+              height: 1,
+              borderRadius: 1
+            }
+          }
+        )),
+        /* @__PURE__ */ jsx43(
+          Box5,
+          {
+            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__ */ jsx43(
+          Box5,
+          {
+            className: imageClasses.overlay,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none"
+            },
+            children: overlay
+          }
+        ),
+        showError && (renderError ?? /* @__PURE__ */ jsx43(
+          Box5,
+          {
+            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
 import { useDropzone } from "react-dropzone";
-import Box10 from "@mui/material/Box";
+import Box11 from "@mui/material/Box";
 import Stack3 from "@mui/material/Stack";
 import Button from "@mui/material/Button";
 import FormHelperText from "@mui/material/FormHelperText";
 
 // src/components/Upload/components/Placeholder.tsx
 import Stack2 from "@mui/material/Stack";
-import Box5 from "@mui/material/Box";
-import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+import Box6 from "@mui/material/Box";
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
 var UploadPlaceholder = ({ hasError, ...rest }) => {
-  return /* @__PURE__ */ jsxs24(
-    Box5,
+  return /* @__PURE__ */ jsxs25(
+    Box6,
     {
       sx: {
         display: "flex",
@@ -6090,11 +6288,11 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
             }
           }
         ),
-        /* @__PURE__ */ jsxs24(Stack2, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
-          /* @__PURE__ */ jsxs24(Box5, { sx: { typography: "h8" }, children: [
+        /* @__PURE__ */ jsxs25(Stack2, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
+          /* @__PURE__ */ jsxs25(Box6, { sx: { typography: "h8" }, children: [
             "Drag files here or",
             /* @__PURE__ */ jsx44(
-              Box5,
+              Box6,
               {
                 component: "span",
                 sx: {
@@ -6106,8 +6304,8 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24(
-            Box5,
+          /* @__PURE__ */ jsxs25(
+            Box6,
             {
               sx: {
                 typography: "bodyMd",
@@ -6128,7 +6326,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
 };
 
 // src/components/Upload/components/RejectionFiles.tsx
-import Box6 from "@mui/material/Box";
+import Box7 from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import Typography2 from "@mui/material/Typography";
 
@@ -6161,7 +6359,7 @@ var fileData = (file) => {
 };
 
 // src/components/Upload/components/RejectionFiles.tsx
-import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 var RejectionFiles = ({ files }) => {
   if (!files.length) {
     return null;
@@ -6181,13 +6379,13 @@ var RejectionFiles = ({ files }) => {
       },
       children: files.map(({ file, errors }) => {
         const { path, size } = fileData(file);
-        return /* @__PURE__ */ jsxs25(Box6, { sx: { my: 1 }, children: [
-          /* @__PURE__ */ jsxs25(Typography2, { variant: "subtitle2", noWrap: true, children: [
+        return /* @__PURE__ */ jsxs26(Box7, { sx: { my: 1 }, children: [
+          /* @__PURE__ */ jsxs26(Typography2, { variant: "subtitle2", noWrap: true, children: [
             path,
             " - ",
             size ? fData(size) : ""
           ] }),
-          errors.map((error2) => /* @__PURE__ */ jsxs25(Box6, { component: "span", sx: { typography: "caption" }, children: [
+          errors.map((error2) => /* @__PURE__ */ jsxs26(Box7, { component: "span", sx: { typography: "caption" }, children: [
             "- ",
             error2.message
           ] }, error2.code))
@@ -6198,12 +6396,12 @@ var RejectionFiles = ({ files }) => {
 };
 
 // src/components/Upload/components/UploadProgress.tsx
-import Box7 from "@mui/material/Box";
+import Box8 from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
-import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
 var UploadProgress = ({ progress: progress2 = 20 }) => {
-  return /* @__PURE__ */ jsxs26(
-    Box7,
+  return /* @__PURE__ */ jsxs27(
+    Box8,
     {
       sx: {
         display: "flex",
@@ -6213,7 +6411,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
         height: "100%"
       },
       children: [
-        /* @__PURE__ */ jsxs26(Box7, { sx: { position: "relative", display: "inline-flex" }, children: [
+        /* @__PURE__ */ jsxs27(Box8, { sx: { position: "relative", display: "inline-flex" }, children: [
           /* @__PURE__ */ jsx46(
             CircularProgress,
             {
@@ -6240,7 +6438,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
             }
           ),
           /* @__PURE__ */ jsx46(
-            Box7,
+            Box8,
             {
               sx: {
                 top: 0,
@@ -6252,30 +6450,30 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ jsx46(Box7, { 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__ */ jsx46(Box7, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
+        /* @__PURE__ */ jsx46(Box8, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
       ]
     }
   );
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-import { useRef as useRef4 } from "react";
-import Box9 from "@mui/material/Box";
+import { useRef as useRef5 } from "react";
+import Box10 from "@mui/material/Box";
 import IconButton2 from "@mui/material/IconButton";
 
 // src/components/Upload/components/SingleFilePreview.tsx
-import Box8 from "@mui/material/Box";
+import Box9 from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 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__ */ jsx47(
-    Box8,
+    Box9,
     {
       component: "img",
       alt: fileName,
@@ -6289,7 +6487,7 @@ var SingleFilePreview = ({ file }) => {
     }
   );
   return /* @__PURE__ */ jsx47(
-    Box8,
+    Box9,
     {
       sx: {
         p: 1,
@@ -6329,9 +6527,9 @@ var DeleteButton = ({ sx, ...rest }) => {
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
 var MultiFilePreview = ({ files, onRemove }) => {
-  const scrollRef = useRef4(null);
+  const scrollRef = useRef5(null);
   const handleScroll = (direction) => {
     if (scrollRef.current) {
       const scrollAmount = 300;
@@ -6343,7 +6541,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
     }
   };
   const showNavigation = files.length > 2;
-  return /* @__PURE__ */ jsxs27(Box9, { sx: { position: "relative", width: 1 }, children: [
+  return /* @__PURE__ */ jsxs28(Box10, { sx: { position: "relative", width: 1 }, children: [
     showNavigation && /* @__PURE__ */ jsx48(
       IconButton2,
       {
@@ -6365,7 +6563,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
       }
     ),
     /* @__PURE__ */ jsx48(
-      Box9,
+      Box10,
       {
         ref: scrollRef,
         sx: {
@@ -6383,8 +6581,8 @@ var MultiFilePreview = ({ files, onRemove }) => {
         children: files.map((file, index) => {
           const fileName = typeof file === "string" ? file : file.name;
           const previewUrl = typeof file === "string" ? file : URL.createObjectURL(file);
-          return /* @__PURE__ */ jsxs27(
-            Box9,
+          return /* @__PURE__ */ jsxs28(
+            Box10,
             {
               sx: {
                 position: "relative",
@@ -6396,7 +6594,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
               },
               children: [
                 /* @__PURE__ */ jsx48(
-                  Box9,
+                  Box10,
                   {
                     component: "img",
                     alt: fileName,
@@ -6449,7 +6647,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
 };
 
 // src/components/Upload/Upload.tsx
-import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 var Upload = ({
   sx,
   value,
@@ -6487,9 +6685,9 @@ var Upload = ({
     return /* @__PURE__ */ jsx49(UploadPlaceholder, { hasError });
   };
   const shouldShowDropzone = !hasFile && !hasFiles && !isUploading;
-  return /* @__PURE__ */ jsxs28(Box10, { sx: { width: 1, position: "relative", ...sx }, children: [
-    /* @__PURE__ */ jsxs28(
-      Box10,
+  return /* @__PURE__ */ jsxs29(Box11, { sx: { width: 1, position: "relative", ...sx }, children: [
+    /* @__PURE__ */ jsxs29(
+      Box11,
       {
         ...shouldShowDropzone ? getRootProps() : {},
         sx: {
@@ -6533,7 +6731,7 @@ var Upload = ({
       }
     ),
     hasFile && !isUploading && /* @__PURE__ */ jsx49(DeleteButton, { onClick: onDelete }),
-    hasFiles && /* @__PURE__ */ jsxs28(Stack3, { direction: "row", spacing: 2, sx: { mt: 2 }, children: [
+    hasFiles && /* @__PURE__ */ jsxs29(Stack3, { direction: "row", spacing: 2, sx: { mt: 2 }, children: [
       onRemoveAll && /* @__PURE__ */ jsx49(
         Button,
         {
@@ -6565,7 +6763,7 @@ var Upload = ({
 import {
   FormProvider as RHFForm
 } from "react-hook-form";
-import Box11 from "@mui/material/Box";
+import Box12 from "@mui/material/Box";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var Form = ({
   children,
@@ -6574,7 +6772,7 @@ var Form = ({
   ...rest
 }) => {
   return /* @__PURE__ */ jsx50(RHFForm, { ...methods, children: /* @__PURE__ */ jsx50(
-    Box11,
+    Box12,
     {
       component: "form",
       onSubmit: (e) => {
@@ -6594,7 +6792,7 @@ var Form = ({
 // src/components/HookForm/RHFSwitch.tsx
 import { Controller, useFormContext } from "react-hook-form";
 import Stack4 from "@mui/material/Stack";
-import Box12 from "@mui/material/Box";
+import Box13 from "@mui/material/Box";
 import Typography3 from "@mui/material/Typography";
 import Switch from "@mui/material/Switch";
 import FormGroup from "@mui/material/FormGroup";
@@ -6602,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 jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 var RHFSwitch = ({
   name,
   description,
@@ -6619,7 +6817,7 @@ var RHFSwitch = ({
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs29(Box12, { sx: slotProps?.wrap, children: [
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs30(Box13, { sx: slotProps?.wrap, children: [
         /* @__PURE__ */ jsx51(
           FormControlLabel,
           {
@@ -6638,7 +6836,7 @@ var RHFSwitch = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ jsxs29(Stack4, { children: [
+            label: /* @__PURE__ */ jsxs30(Stack4, { children: [
               /* @__PURE__ */ jsx51(Typography3, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
               description && /* @__PURE__ */ jsx51(Typography3, { variant: "body2", color: "textBody", children: description })
             ] }),
@@ -6677,7 +6875,7 @@ var RHFMultiSwitch = ({
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs29(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs30(
         FormControl,
         {
           component: "fieldset",
@@ -6786,18 +6984,18 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
 import { Controller as Controller3, useFormContext as useFormContext3 } from "react-hook-form";
 
 // src/components/OTPInput/index.tsx
-import { useRef as useRef5, useState as useState9 } from "react";
+import { useRef as useRef6, useState as useState10 } from "react";
 import { useTheme as useTheme2 } from "@mui/material/styles";
-import Box13 from "@mui/material/Box";
+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 jsx53, jsxs as jsxs30 } 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();
-  const [otp, setOtp] = useState9(Array(length).fill(""));
-  const inputsRef = useRef5([]);
+  const [otp, setOtp] = useState10(Array(length).fill(""));
+  const inputsRef = useRef6([]);
   const handleChange = (value, index) => {
     if (!/^[0-9]$/.test(value) && value !== "") return;
     const newOtp = [...otp];
@@ -6860,13 +7058,14 @@ var OTPInput = (props) => {
       onComplete?.(newOtp.join(""));
     }
   };
-  return /* @__PURE__ */ jsxs30(Fragment, { children: [
-    /* @__PURE__ */ jsx53(Box13, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ jsx53(
-      Box13,
+  return /* @__PURE__ */ jsxs31(Fragment, { children: [
+    /* @__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
           }
@@ -7045,7 +7244,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 jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs32 } from "react/jsx-runtime";
 var RHFRadioGroup = ({
   name,
   label,
@@ -7062,7 +7261,7 @@ var RHFRadioGroup = ({
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs31(FormControl2, { component: "fieldset", sx: slotProps?.wrap, children: [
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs32(FormControl2, { component: "fieldset", sx: slotProps?.wrap, children: [
         label && /* @__PURE__ */ jsx56(
           FormLabel2,
           {
@@ -7089,7 +7288,7 @@ var RHFRadioGroup = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ jsxs31(Stack5, { children: [
+            label: /* @__PURE__ */ jsxs32(Stack5, { children: [
               /* @__PURE__ */ jsx56(Typography4, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
               option?.description && /* @__PURE__ */ jsx56(Typography4, { variant: "body2", color: "textBody", children: option?.description })
             ] }),
@@ -7155,7 +7354,7 @@ var RHFAutocomplete = ({
 // src/components/HookForm/RHFCheckbox.tsx
 import { Controller as Controller7, useFormContext as useFormContext7 } from "react-hook-form";
 import Stack6 from "@mui/material/Stack";
-import Box14 from "@mui/material/Box";
+import Box15 from "@mui/material/Box";
 import Typography5 from "@mui/material/Typography";
 import Checkbox from "@mui/material/Checkbox";
 import FormGroup2 from "@mui/material/FormGroup";
@@ -7163,7 +7362,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 jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 var RHFCheckbox = ({
   name,
   description,
@@ -7180,7 +7379,7 @@ var RHFCheckbox = ({
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs32(Box14, { sx: slotProps?.wrap, children: [
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs33(Box15, { sx: slotProps?.wrap, children: [
         /* @__PURE__ */ jsx58(
           FormControlLabel3,
           {
@@ -7199,7 +7398,7 @@ var RHFCheckbox = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ jsxs32(Stack6, { children: [
+            label: /* @__PURE__ */ jsxs33(Stack6, { children: [
               /* @__PURE__ */ jsx58(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
               description && /* @__PURE__ */ jsx58(Typography5, { variant: "body2", color: "textBody", children: description })
             ] }),
@@ -7232,7 +7431,7 @@ var RHFMultiCheckbox = ({
       name,
       control,
       defaultValue: [],
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs32(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs33(
         FormControl3,
         {
           component: "fieldset",
@@ -7272,7 +7471,7 @@ var RHFMultiCheckbox = ({
                       }
                     }
                   ),
-                  label: /* @__PURE__ */ jsxs32(Stack6, { children: [
+                  label: /* @__PURE__ */ jsxs33(Stack6, { children: [
                     /* @__PURE__ */ jsx58(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
                     option?.description && /* @__PURE__ */ jsx58(Typography5, { variant: "body2", color: "textBody", children: option?.description })
                   ] }),
@@ -7330,12 +7529,12 @@ var CopyButton = ({ text: text2, size = "small" }) => {
 
 // src/components/LoadingScreen/index.tsx
 import Portal from "@mui/material/Portal";
-import Box15 from "@mui/material/Box";
+import Box16 from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var LoadingScreen = ({ portal, sx, ...rest }) => {
   const content = /* @__PURE__ */ jsx60(
-    Box15,
+    Box16,
     {
       sx: {
         px: 5,
@@ -7358,7 +7557,7 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
   const content = /* @__PURE__ */ jsx60(
-    Box15,
+    Box16,
     {
       sx: {
         right: 0,
@@ -7397,6 +7596,7 @@ export {
   Field,
   Form,
   Icon,
+  Image,
   InfoCircleFill,
   InfoCircleOutline,
   KeyCommand,
@@ -7464,7 +7664,6 @@ export {
   fShortenNumber,
   formatFullname,
   getCurrencySymbol,
-  getInitColorSchemeScript,
   getInitials,
   getStorage,
   grey,