@undefine-ui/design-system 2.14.1 → 2.15.0

package/dist/index.js

@@ -1338,6 +1338,18 @@ function shadows(colorScheme) {
 }
 
 // src/theme/core/components/list.ts
+var MuiList = {
+  /** **************************************
+   * STYLE
+   *************************************** */
+  styleOverrides: {
+    root: ({ theme }) => ({
+      '&[role="listbox"]': {
+        padding: theme.spacing(0, 1)
+      }
+    })
+  }
+};
 var MuiListSubheader = {
   /** **************************************
    * STYLE
@@ -1390,6 +1402,7 @@ var MuiListItemText = {
   styleOverrides: { root: { margin: 0 }, multiline: { margin: 0 } }
 };
 var list = {
+  MuiList,
   MuiListSubheader,
   MuiListItemIcon,
   MuiListItemAvatar,
@@ -1398,6 +1411,12 @@ var list = {
 
 // src/theme/core/components/card.ts
 var MuiCard = {
+  /** **************************************
+   * DEFAULT PROPS
+   ***************************************  */
+  defaultProps: {
+    variant: "outlined"
+  },
   /** **************************************
    * STYLE
    *************************************** */
@@ -1405,12 +1424,12 @@ var MuiCard = {
     root: ({ theme, ownerState }) => ({
       position: "relative",
       boxShadow: theme.customShadows["shadow-sm"],
-      borderRadius: Number(theme.shape.borderRadius) * 2,
+      borderRadius: theme.radius["radius-md"],
       zIndex: 0,
       // Fix Safari overflow: hidden with border radius
       ...ownerState.variant === "outlined" && {
         boxShadow: "none",
-        borderColor: varAlpha(theme.palette.grey["200Channel"])
+        borderColor: theme.vars.palette.border.mute
       }
     })
   }
@@ -3616,7 +3635,7 @@ var MuiButton = {
    *************************************** */
   defaultProps: {
     color: "primary",
-    variant: "outlined",
+    variant: "contained",
     disableElevation: true,
     disableRipple: true,
     loadingIndicator: /* @__PURE__ */ jsx33(Icon, { icon: "Loader" })
@@ -4700,12 +4719,11 @@ var MuiPagination = {
      */
     outlined: ({ ownerState, theme }) => ({
       [`& .${paginationItemClasses.root}`]: {
-        borderColor: varAlpha(theme.vars.palette.grey["500Channel"], 0.24),
+        borderColor: theme.vars.palette.border.mute,
+        borderRadius: theme.radius["radius-sm"],
         [`&.${paginationItemClasses.selected}`]: {
-          borderColor: "currentColor",
-          fontWeight: theme.typography.fontWeightSemiBold,
           ...ownerState.color === "standard" && {
-            backgroundColor: varAlpha(theme.vars.palette.grey["500Channel"], 0.08)
+            backgroundColor: theme.vars.palette.neutral[200]
           }
         }
       }
@@ -4799,30 +4817,42 @@ var MuiDataGrid = {
   styleOverrides: {
     root: ({ theme }) => ({
       "--unstable_DataGrid-radius": 0,
-      "--DataGrid-rowBorderColor": theme.vars.palette.divider,
-      "--DataGrid-containerBackground": theme.vars.palette.background.neutral,
+      "--DataGrid-rowBorderColor": theme.vars.palette.border.mute,
+      "--DataGrid-containerBackground": theme.vars.palette.neutral[50],
       "--unstable_DataGrid-headWeight": theme.typography.fontWeightSemiBold,
       borderWidth: 0,
       scrollbarWidth: "thin",
       scrollbarColor: `${varAlpha(theme.vars.palette.text.disableChannel, 0.4)} ${varAlpha(theme.vars.palette.text.disableChannel, 0.08)}`,
-      "& .MuiDataGrid-filler > div": { borderTopStyle: "dashed" },
-      "& .MuiDataGrid-topContainer::after": { height: 0 }
+      "& .MuiDataGrid-filler > div": { borderTopStyle: "solid" },
+      "& .MuiDataGrid-topContainer::after": { height: 0 },
+      minHeight: 320
     }),
     withBorderColor: { borderColor: "var(--DataGrid-rowBorderColor)" },
     /**
      * Column
      */
+    columnHeaders: ({ theme }) => ({
+      height: theme.spacing(5)
+    }),
     columnHeader: ({ theme }) => ({
-      fontSize: 14,
-      color: theme.vars.palette.text.secondary,
+      ...theme.typography.body2,
+      color: theme.vars.palette.text.body,
+      backgroundColor: theme.vars.palette.neutral[50],
+      height: theme.spacing(5),
       "&--sorted": { color: theme.vars.palette.text.primary }
     }),
-    columnSeparator: { color: "var(--DataGrid-rowBorderColor)" },
+    columnHeaderTitle: ({ theme }) => ({
+      fontWeight: theme.typography.fontWeightMedium
+    }),
+    columnSeparator: { color: "var(--DataGrid-rowBorderColor)", visibility: "hidden" },
     /**
      * Row, Cell
      */
     cell: ({ theme }) => ({
-      borderTopStyle: "dashed",
+      fontSize: theme.typography.pxToRem(14),
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.vars.palette.text.header,
+      borderTopStyle: "solid",
       "&--editing": {
         boxShadow: "none",
         backgroundColor: varAlpha(theme.vars.palette.primary.mainChannel, 0.08)
@@ -4882,13 +4912,8 @@ var MuiDataGrid = {
     /**
      * Footer
      */
-    footerContainer: { minHeight: "auto", borderTopStyle: "dashed" },
+    footerContainer: { minHeight: "auto", borderTopStyle: "solid" },
     selectedRowCount: { display: "none", whiteSpace: "nowrap" },
-    overlay: ({ theme }) => ({
-      [`& .${circularProgressClasses.root}`]: {
-        color: theme.vars.palette.text.primary
-      }
-    }),
     /**
      * Column panel
      */
@@ -4927,6 +4952,12 @@ var MuiDataGrid = {
         backgroundColor: varAlpha(theme.vars.palette.grey["500Channel"], 0.16),
         [`& .${svgIconClasses2.root}`]: { width: 16, height: 16 }
       }
+    }),
+    /** Overlay */
+    overlay: ({ theme }) => ({
+      [`& .${circularProgressClasses.root}`]: {
+        color: theme.vars.palette.text.primary
+      }
     })
   }
 };
@@ -5241,7 +5272,7 @@ var MuiAutocomplete = {
       ...paper({ theme, dropdown: true })
     }),
     listbox: ({ theme }) => ({
-      padding: 0,
+      padding: theme.spacing(0, 1),
       [`& .${autocompleteClasses3.option}`]: {
         ...menuItem(theme)
       }
@@ -5575,7 +5606,7 @@ var breakpoints = () => ({
     sm: 600,
     md: 900,
     lg: 1200,
-    xl: 1536
+    xl: 1400
   }
 });
 
@@ -5916,29 +5947,103 @@ var AnimatedLogo = () => {
 };
 
 // src/components/Table/Table.tsx
-import Box4 from "@mui/material/Box";
 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 jsx40 } from "react/jsx-runtime";
+
+// src/components/EmptyContent/index.tsx
+import Box3 from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+var EmptyContent = ({
+  sx,
+  imgUrl,
+  action: action2,
+  filled,
+  slotProps,
+  description,
+  title = "No data",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs23(
+    Stack,
+    {
+      flexGrow: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      sx: {
+        px: 3,
+        height: 1,
+        ...filled && {
+          borderRadius: (theme) => theme.radius["radius-lg"],
+          bgcolor: (theme) => theme.vars.palette.neutral[50],
+          border: (theme) => `dashed 1px ${theme.vars.palette.border.default}`
+        },
+        ...sx
+      },
+      ...rest,
+      children: [
+        imgUrl && /* @__PURE__ */ jsx40(
+          Box3,
+          {
+            component: "img",
+            alt: "empty content",
+            src: imgUrl,
+            sx: { width: 1, maxWidth: 160, ...slotProps?.img, mb: 2 }
+          }
+        ),
+        title && /* @__PURE__ */ jsx40(
+          Typography,
+          {
+            variant: filled ? "h7" : "h6",
+            sx: {
+              mb: 0.5,
+              textAlign: "center",
+              fontWeight: 500,
+              ...slotProps?.title,
+              color: "text.header"
+            },
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx40(
+          Typography,
+          {
+            variant: "h8",
+            sx: {
+              mb: 3,
+              textAlign: "center",
+              color: "text.body",
+              ...slotProps?.description
+            },
+            children: description
+          }
+        ),
+        action2 && action2
+      ]
+    }
+  );
+};
+
+// src/components/Table/components/TableNoRows.tsx
+import { jsx as jsx41 } from "react/jsx-runtime";
 var StyledGridOverlay = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: theme.spacing(3),
+  padding: theme.spacing(1.5, 3, 3),
+  width: "100%",
   height: "100%"
 }));
-var TableNoRows = ({ noRowsTitle = "No Rows" }) => {
-  return /* @__PURE__ */ jsx40(StyledGridOverlay, { children: /* @__PURE__ */ jsx40(Box3, { sx: { mt: 1 }, children: noRowsTitle }) });
+var TableNoRows = (props) => {
+  return /* @__PURE__ */ jsx41(StyledGridOverlay, { children: /* @__PURE__ */ jsx41(EmptyContent, { ...props, sx: { width: "100%" } }) });
 };
 var TableNoRows_default = TableNoRows;
 
 // src/components/Table/components/TablePagination.tsx
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
+import Stack2 from "@mui/material/Stack";
+import Button from "@mui/material/Button";
+import { useTheme as useTheme2 } from "@mui/material/styles";
+import Typography2 from "@mui/material/Typography";
 import Pagination from "@mui/material/Pagination";
 import PaginationItem from "@mui/material/PaginationItem";
 import {
@@ -5946,20 +6051,17 @@ import {
   gridPageSelector,
   useGridApiContext,
   gridPageSizeSelector,
-  gridRowCountSelector,
   gridPageCountSelector
 } from "@mui/x-data-grid";
-import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
 var TablePagination = () => {
+  const theme = useTheme2();
   const apiRef = useGridApiContext();
   const page = useGridSelector(apiRef, gridPageSelector);
   const pageCount = useGridSelector(apiRef, gridPageCountSelector);
   const pageSize = useGridSelector(apiRef, gridPageSizeSelector);
-  const rowCount = useGridSelector(apiRef, gridRowCountSelector);
-  const from = page * pageSize + 1;
-  const to = Math.min((page + 1) * pageSize, rowCount);
-  return /* @__PURE__ */ jsxs23(
-    Stack,
+  return /* @__PURE__ */ jsxs24(
+    Stack2,
     {
       direction: "row",
       alignItems: { xs: "flex-end", md: "center" },
@@ -5967,38 +6069,62 @@ var TablePagination = () => {
       width: 1,
       p: 1.5,
       children: [
-        /* @__PURE__ */ jsxs23(
-          Stack,
+        /* @__PURE__ */ jsx42(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: /* @__PURE__ */ jsxs24(
+          Typography2,
+          {
+            variant: "h8",
+            color: "text.header",
+            fontFamily: theme.typography.fontSecondaryFamily,
+            children: [
+              pageSize,
+              " rows per page"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx42(
+          Stack2,
           {
             direction: { xs: "column", md: "row" },
             alignItems: { xs: "flex-start", md: "center" },
             spacing: 2,
-            children: [
-              /* @__PURE__ */ jsx41(
-                Pagination,
-                {
-                  size: "medium",
-                  variant: "outlined",
-                  shape: "rounded",
-                  page: page + 1,
-                  count: pageCount,
-                  siblingCount: 1,
-                  showFirstButton: true,
-                  showLastButton: true,
-                  onChange: (_, value) => apiRef.current.setPage(value - 1),
-                  renderItem: (item) => /* @__PURE__ */ jsx41(PaginationItem, { ...item })
-                }
-              ),
-              /* @__PURE__ */ jsx41(Stack, { direction: "row", alignItems: "center", spacing: 1, children: /* @__PURE__ */ jsxs23(Typography, { variant: "body2", color: "text.secondary", children: [
-                pageSize,
-                " Items per page"
-              ] }) })
-            ]
+            children: /* @__PURE__ */ jsx42(
+              Pagination,
+              {
+                size: "medium",
+                variant: "outlined",
+                shape: "rounded",
+                page: page + 1,
+                count: pageCount,
+                siblingCount: 1,
+                hideNextButton: true,
+                hidePrevButton: true,
+                onChange: (_, value) => apiRef.current.setPage(value - 1),
+                renderItem: (item) => /* @__PURE__ */ jsx42(PaginationItem, { ...item })
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsxs23(Typography, { variant: "body2", color: "text.secondary", children: [
-          `${from} \u2013 ${to} of ${rowCount !== -1 ? rowCount : `more than ${to}`} items`,
-          " "
+        /* @__PURE__ */ jsxs24(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ jsx42(
+            Button,
+            {
+              color: "inherit",
+              variant: page === 0 ? "contained" : "outlined",
+              disabled: page === 0,
+              onClick: () => apiRef.current.setPage(page - 1),
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsx42(
+            Button,
+            {
+              color: "inherit",
+              variant: page >= pageCount - 1 ? "contained" : "outlined",
+              disabled: page >= pageCount - 1,
+              onClick: () => apiRef.current.setPage(page + 1),
+              children: "Next"
+            }
+          )
         ] })
       ]
     }
@@ -6006,29 +6132,35 @@ var TablePagination = () => {
 };
 
 // src/components/Table/Table.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var Table = (props) => {
-  const { data, showToolbar = false, ...rest } = props;
-  return /* @__PURE__ */ jsx42(Box4, { children: /* @__PURE__ */ jsx42(
+  const { data, showFooter = true, sx, ...rest } = props;
+  const isEmpty = data.length === 0;
+  return /* @__PURE__ */ jsx43(
     DataGrid,
     {
-      rowHeight: 64,
+      rowHeight: 56,
       rows: data,
       pagination: true,
-      showToolbar,
       disableColumnFilter: true,
+      disableColumnSelector: true,
+      disableColumnSorting: true,
+      disableColumnMenu: true,
       slots: {
         pagination: TablePagination,
+        noRowsOverlay: TableNoRows_default,
         noResultsOverlay: TableNoRows_default,
-        // noRowsOverlay: TableNoRows,
         ...rest.slots
       },
       slotProps: {
-        noResultsOverlay: {
-          title: "No Results"
-        },
         noRowsOverlay: {
-          title: "No Results"
+          filled: true,
+          title: "No booking data yet",
+          description: "Try adjusting your search or filter to find what you are looking for."
+        },
+        noResultsOverlay: {
+          title: "No booking data yet",
+          description: "Try adjusting your search or filter to find what you are looking for."
         },
         loadingOverlay: {
           variant: "skeleton"
@@ -6043,14 +6175,21 @@ var Table = (props) => {
         }
       },
       disableRowSelectionOnClick: true,
+      pageSizeOptions: [5, 10, 25, 50, 75, 100],
+      sx: {
+        "& .MuiDataGrid-footerContainer": {
+          display: !isEmpty && showFooter ? "flex" : "none"
+        },
+        ...sx
+      },
       ...rest
     }
-  ) });
+  );
 };
 
 // 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 Box4 from "@mui/material/Box";
 import Skeleton from "@mui/material/Skeleton";
 
 // src/components/Image/classes.ts
@@ -6061,7 +6200,7 @@ var imageClasses = {
 };
 
 // src/components/Image/index.tsx
-import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
 var Image = forwardRef(function Image2(props, ref) {
   const {
     src,
@@ -6160,8 +6299,8 @@ var Image = forwardRef(function Image2(props, ref) {
   const showLoader = status === "idle" || status === "loading";
   const showError = status === "error";
   const loadingAttr = lazy ? "lazy" : imgLoading ?? "eager";
-  return /* @__PURE__ */ jsxs24(
-    Box5,
+  return /* @__PURE__ */ jsxs25(
+    Box4,
     {
       className: imageClasses.root.concat(className ? ` ${className}` : ""),
       sx: {
@@ -6175,7 +6314,7 @@ var Image = forwardRef(function Image2(props, ref) {
       },
       ...rest,
       children: [
-        showLoader && (loadingIndicator ?? /* @__PURE__ */ jsx43(
+        showLoader && (loadingIndicator ?? /* @__PURE__ */ jsx44(
           Skeleton,
           {
             animation: "wave",
@@ -6190,8 +6329,8 @@ var Image = forwardRef(function Image2(props, ref) {
             }
           }
         )),
-        /* @__PURE__ */ jsx43(
-          Box5,
+        /* @__PURE__ */ jsx44(
+          Box4,
           {
             ref: setRefs,
             component: "img",
@@ -6219,8 +6358,8 @@ var Image = forwardRef(function Image2(props, ref) {
             }
           }
         ),
-        withOverlay && !showError && /* @__PURE__ */ jsx43(
-          Box5,
+        withOverlay && !showError && /* @__PURE__ */ jsx44(
+          Box4,
           {
             className: imageClasses.overlay,
             sx: {
@@ -6231,8 +6370,8 @@ var Image = forwardRef(function Image2(props, ref) {
             children: overlay
           }
         ),
-        showError && (renderError ?? /* @__PURE__ */ jsx43(
-          Box5,
+        showError && (renderError ?? /* @__PURE__ */ jsx44(
+          Box4,
           {
             className: imageClasses.overlay,
             sx: {
@@ -6256,18 +6395,18 @@ var Image = forwardRef(function Image2(props, ref) {
 
 // src/components/Upload/Upload.tsx
 import { useDropzone } from "react-dropzone";
-import Box11 from "@mui/material/Box";
-import Stack3 from "@mui/material/Stack";
-import Button from "@mui/material/Button";
+import Box10 from "@mui/material/Box";
+import Stack4 from "@mui/material/Stack";
+import Button2 from "@mui/material/Button";
 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 jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+import Stack3 from "@mui/material/Stack";
+import Box5 from "@mui/material/Box";
+import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 var UploadPlaceholder = ({ hasError, ...rest }) => {
-  return /* @__PURE__ */ jsxs25(
-    Box6,
+  return /* @__PURE__ */ jsxs26(
+    Box5,
     {
       sx: {
         display: "flex",
@@ -6277,7 +6416,7 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           Icon,
           {
             icon: "CloudUpload",
@@ -6288,11 +6427,11 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
             }
           }
         ),
-        /* @__PURE__ */ jsxs25(Stack2, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
-          /* @__PURE__ */ jsxs25(Box6, { sx: { typography: "h8" }, children: [
+        /* @__PURE__ */ jsxs26(Stack3, { spacing: 1, sx: { textAlign: "center", mt: 2 }, children: [
+          /* @__PURE__ */ jsxs26(Box5, { sx: { typography: "h8" }, children: [
             "Drag files here or",
-            /* @__PURE__ */ jsx44(
-              Box6,
+            /* @__PURE__ */ jsx45(
+              Box5,
               {
                 component: "span",
                 sx: {
@@ -6304,8 +6443,8 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs25(
-            Box6,
+          /* @__PURE__ */ jsxs26(
+            Box5,
             {
               sx: {
                 typography: "bodyMd",
@@ -6326,9 +6465,9 @@ var UploadPlaceholder = ({ hasError, ...rest }) => {
 };
 
 // src/components/Upload/components/RejectionFiles.tsx
-import Box7 from "@mui/material/Box";
+import Box6 from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
-import Typography2 from "@mui/material/Typography";
+import Typography3 from "@mui/material/Typography";
 
 // src/components/Upload/utils.tsx
 var fileTypeByUrl = (fileUrl = "") => {
@@ -6359,12 +6498,12 @@ var fileData = (file) => {
 };
 
 // src/components/Upload/components/RejectionFiles.tsx
-import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
 var RejectionFiles = ({ files }) => {
   if (!files.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     Paper,
     {
       variant: "outlined",
@@ -6379,13 +6518,13 @@ var RejectionFiles = ({ files }) => {
       },
       children: files.map(({ file, errors }) => {
         const { path, size } = fileData(file);
-        return /* @__PURE__ */ jsxs26(Box7, { sx: { my: 1 }, children: [
-          /* @__PURE__ */ jsxs26(Typography2, { variant: "subtitle2", noWrap: true, children: [
+        return /* @__PURE__ */ jsxs27(Box6, { sx: { my: 1 }, children: [
+          /* @__PURE__ */ jsxs27(Typography3, { variant: "subtitle2", noWrap: true, children: [
             path,
             " - ",
             size ? fData(size) : ""
           ] }),
-          errors.map((error2) => /* @__PURE__ */ jsxs26(Box7, { component: "span", sx: { typography: "caption" }, children: [
+          errors.map((error2) => /* @__PURE__ */ jsxs27(Box6, { component: "span", sx: { typography: "caption" }, children: [
             "- ",
             error2.message
           ] }, error2.code))
@@ -6396,12 +6535,12 @@ var RejectionFiles = ({ files }) => {
 };
 
 // src/components/Upload/components/UploadProgress.tsx
-import Box8 from "@mui/material/Box";
+import Box7 from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
-import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
 var UploadProgress = ({ progress: progress2 = 20 }) => {
-  return /* @__PURE__ */ jsxs27(
-    Box8,
+  return /* @__PURE__ */ jsxs28(
+    Box7,
     {
       sx: {
         display: "flex",
@@ -6411,8 +6550,8 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
         height: "100%"
       },
       children: [
-        /* @__PURE__ */ jsxs27(Box8, { sx: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsxs28(Box7, { sx: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ jsx47(
             CircularProgress,
             {
               variant: "determinate",
@@ -6425,7 +6564,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx47(
             CircularProgress,
             {
               variant: "determinate",
@@ -6437,8 +6576,8 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx46(
-            Box8,
+          /* @__PURE__ */ jsx47(
+            Box7,
             {
               sx: {
                 top: 0,
@@ -6450,11 +6589,11 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ jsx46(Box8, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
+              children: /* @__PURE__ */ jsx47(Box7, { sx: { typography: "h6", color: "common.black" }, children: `${Math.round(progress2)}` })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx46(Box8, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
+        /* @__PURE__ */ jsx47(Box7, { sx: { mt: 2, typography: "h6" }, children: "Uploading" })
       ]
     }
   );
@@ -6462,18 +6601,18 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
 
 // src/components/Upload/components/MultiFilePreview.tsx
 import { useRef as useRef5 } from "react";
-import Box10 from "@mui/material/Box";
+import Box9 from "@mui/material/Box";
 import IconButton2 from "@mui/material/IconButton";
 
 // src/components/Upload/components/SingleFilePreview.tsx
-import Box9 from "@mui/material/Box";
+import Box8 from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } 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(
-    Box9,
+  const renderImg = /* @__PURE__ */ jsx48(
+    Box8,
     {
       component: "img",
       alt: fileName,
@@ -6486,8 +6625,8 @@ var SingleFilePreview = ({ file }) => {
       }
     }
   );
-  return /* @__PURE__ */ jsx47(
-    Box9,
+  return /* @__PURE__ */ jsx48(
+    Box8,
     {
       sx: {
         p: 1,
@@ -6502,7 +6641,7 @@ var SingleFilePreview = ({ file }) => {
   );
 };
 var DeleteButton = ({ sx, ...rest }) => {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     IconButton,
     {
       size: "small",
@@ -6521,13 +6660,13 @@ var DeleteButton = ({ sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx47(Icon, { icon: "XMark", sx: { width: 18, height: 18 } })
+      children: /* @__PURE__ */ jsx48(Icon, { icon: "XMark", sx: { width: 18, height: 18 } })
     }
   );
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 var MultiFilePreview = ({ files, onRemove }) => {
   const scrollRef = useRef5(null);
   const handleScroll = (direction) => {
@@ -6541,8 +6680,8 @@ var MultiFilePreview = ({ files, onRemove }) => {
     }
   };
   const showNavigation = files.length > 2;
-  return /* @__PURE__ */ jsxs28(Box10, { sx: { position: "relative", width: 1 }, children: [
-    showNavigation && /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs29(Box9, { sx: { position: "relative", width: 1 }, children: [
+    showNavigation && /* @__PURE__ */ jsx49(
       IconButton2,
       {
         size: "small",
@@ -6559,11 +6698,11 @@ var MultiFilePreview = ({ files, onRemove }) => {
             bgcolor: (theme) => varAlpha(theme.vars.palette.common.whiteChannel, 1)
           }
         },
-        children: /* @__PURE__ */ jsx48(Icon, { icon: "NavArrowLeft", width: 20 })
+        children: /* @__PURE__ */ jsx49(Icon, { icon: "NavArrowLeft", width: 20 })
       }
     ),
-    /* @__PURE__ */ jsx48(
-      Box10,
+    /* @__PURE__ */ jsx49(
+      Box9,
       {
         ref: scrollRef,
         sx: {
@@ -6581,8 +6720,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__ */ jsxs28(
-            Box10,
+          return /* @__PURE__ */ jsxs29(
+            Box9,
             {
               sx: {
                 position: "relative",
@@ -6593,8 +6732,8 @@ var MultiFilePreview = ({ files, onRemove }) => {
                 flexShrink: 0
               },
               children: [
-                /* @__PURE__ */ jsx48(
-                  Box10,
+                /* @__PURE__ */ jsx49(
+                  Box9,
                   {
                     component: "img",
                     alt: fileName,
@@ -6607,7 +6746,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
                     }
                   }
                 ),
-                onRemove && /* @__PURE__ */ jsx48(
+                onRemove && /* @__PURE__ */ jsx49(
                   DeleteButton,
                   {
                     onClick: (e) => {
@@ -6623,7 +6762,7 @@ var MultiFilePreview = ({ files, onRemove }) => {
         })
       }
     ),
-    showNavigation && /* @__PURE__ */ jsx48(
+    showNavigation && /* @__PURE__ */ jsx49(
       IconButton2,
       {
         size: "small",
@@ -6640,14 +6779,14 @@ var MultiFilePreview = ({ files, onRemove }) => {
             bgcolor: (theme) => varAlpha(theme.vars.palette.common.whiteChannel, 1)
           }
         },
-        children: /* @__PURE__ */ jsx48(Icon, { icon: "NavArrowRight", width: 20 })
+        children: /* @__PURE__ */ jsx49(Icon, { icon: "NavArrowRight", width: 20 })
       }
     )
   ] });
 };
 
 // src/components/Upload/Upload.tsx
-import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
 var Upload = ({
   sx,
   value,
@@ -6674,20 +6813,20 @@ var Upload = ({
   const hasError = isDragReject || !!error2;
   const renderContent = () => {
     if (isUploading) {
-      return /* @__PURE__ */ jsx49(UploadProgress, { progress: uploadProgress });
+      return /* @__PURE__ */ jsx50(UploadProgress, { progress: uploadProgress });
     }
     if (hasFile) {
-      return /* @__PURE__ */ jsx49(SingleFilePreview, { file: value });
+      return /* @__PURE__ */ jsx50(SingleFilePreview, { file: value });
     }
     if (hasFiles) {
-      return /* @__PURE__ */ jsx49(MultiFilePreview, { files: value, onRemove });
+      return /* @__PURE__ */ jsx50(MultiFilePreview, { files: value, onRemove });
     }
-    return /* @__PURE__ */ jsx49(UploadPlaceholder, { hasError });
+    return /* @__PURE__ */ jsx50(UploadPlaceholder, { hasError });
   };
   const shouldShowDropzone = !hasFile && !hasFiles && !isUploading;
-  return /* @__PURE__ */ jsxs29(Box11, { sx: { width: 1, position: "relative", ...sx }, children: [
-    /* @__PURE__ */ jsxs29(
-      Box11,
+  return /* @__PURE__ */ jsxs30(Box10, { sx: { width: 1, position: "relative", ...sx }, children: [
+    /* @__PURE__ */ jsxs30(
+      Box10,
       {
         ...shouldShowDropzone ? getRootProps() : {},
         sx: {
@@ -6725,37 +6864,37 @@ var Upload = ({
           }
         },
         children: [
-          shouldShowDropzone && /* @__PURE__ */ jsx49("input", { ...getInputProps() }),
+          shouldShowDropzone && /* @__PURE__ */ jsx50("input", { ...getInputProps() }),
           renderContent()
         ]
       }
     ),
-    hasFile && !isUploading && /* @__PURE__ */ jsx49(DeleteButton, { onClick: onDelete }),
-    hasFiles && /* @__PURE__ */ jsxs29(Stack3, { direction: "row", spacing: 2, sx: { mt: 2 }, children: [
-      onRemoveAll && /* @__PURE__ */ jsx49(
-        Button,
+    hasFile && !isUploading && /* @__PURE__ */ jsx50(DeleteButton, { onClick: onDelete }),
+    hasFiles && /* @__PURE__ */ jsxs30(Stack4, { direction: "row", spacing: 2, sx: { mt: 2 }, children: [
+      onRemoveAll && /* @__PURE__ */ jsx50(
+        Button2,
         {
           variant: "outlined",
           color: "inherit",
           size: "small",
           onClick: onRemoveAll,
-          startIcon: /* @__PURE__ */ jsx49(Icon, { icon: "Trash", sx: { width: 14, height: 14 } }),
+          startIcon: /* @__PURE__ */ jsx50(Icon, { icon: "Trash", sx: { width: 14, height: 14 } }),
           children: "Remove all"
         }
       ),
-      onUpload && /* @__PURE__ */ jsx49(
-        Button,
+      onUpload && /* @__PURE__ */ jsx50(
+        Button2,
         {
           variant: "contained",
           size: "small",
           onClick: onUpload,
-          startIcon: /* @__PURE__ */ jsx49(Icon, { icon: "CloudUpload", sx: { width: 14, height: 14 } }),
+          startIcon: /* @__PURE__ */ jsx50(Icon, { icon: "CloudUpload", sx: { width: 14, height: 14 } }),
           children: "Upload files"
         }
       )
     ] }),
-    helperText && /* @__PURE__ */ jsx49(FormHelperText, { error: !!error2, sx: { color: "text.body", fontWeight: 500, mt: 1 }, children: helperText }),
-    /* @__PURE__ */ jsx49(RejectionFiles, { files: [...fileRejections] })
+    helperText && /* @__PURE__ */ jsx50(FormHelperText, { error: !!error2, sx: { color: "text.body", fontWeight: 500, mt: 1 }, children: helperText }),
+    /* @__PURE__ */ jsx50(RejectionFiles, { files: [...fileRejections] })
   ] });
 };
 
@@ -6763,16 +6902,16 @@ var Upload = ({
 import {
   FormProvider as RHFForm
 } from "react-hook-form";
-import Box12 from "@mui/material/Box";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import Box11 from "@mui/material/Box";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var Form = ({
   children,
   onSubmit,
   methods,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx50(RHFForm, { ...methods, children: /* @__PURE__ */ jsx50(
-    Box12,
+  return /* @__PURE__ */ jsx51(RHFForm, { ...methods, children: /* @__PURE__ */ jsx51(
+    Box11,
     {
       component: "form",
       onSubmit: (e) => {
@@ -6791,16 +6930,16 @@ var Form = ({
 
 // src/components/HookForm/RHFSwitch.tsx
 import { Controller, useFormContext } from "react-hook-form";
-import Stack4 from "@mui/material/Stack";
-import Box13 from "@mui/material/Box";
-import Typography3 from "@mui/material/Typography";
+import Stack5 from "@mui/material/Stack";
+import Box12 from "@mui/material/Box";
+import Typography4 from "@mui/material/Typography";
 import Switch from "@mui/material/Switch";
 import FormGroup from "@mui/material/FormGroup";
 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 jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 var RHFSwitch = ({
   name,
   description,
@@ -6812,16 +6951,16 @@ var RHFSwitch = ({
 }) => {
   const { control } = useFormContext();
   const baseAriaLabel = `Switch ${name}`;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs30(Box13, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ jsx51(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs31(Box12, { sx: slotProps?.wrap, children: [
+        /* @__PURE__ */ jsx52(
           FormControlLabel,
           {
-            control: /* @__PURE__ */ jsx51(
+            control: /* @__PURE__ */ jsx52(
               Switch,
               {
                 ...field,
@@ -6836,9 +6975,9 @@ var RHFSwitch = ({
                 }
               }
             ),
-            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 })
+            label: /* @__PURE__ */ jsxs31(Stack5, { children: [
+              /* @__PURE__ */ jsx52(Typography4, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
+              description && /* @__PURE__ */ jsx52(Typography4, { variant: "body2", color: "textBody", children: description })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -6847,7 +6986,7 @@ var RHFSwitch = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx51(
+        (!!error2 || helperText) && /* @__PURE__ */ jsx52(
           FormHelperText2,
           {
             error: !!error2,
@@ -6870,19 +7009,19 @@ var RHFMultiSwitch = ({
 }) => {
   const { control } = useFormContext();
   const getSelected = (currentValues, optionValue) => currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     Controller,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs30(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs31(
         FormControl,
         {
           component: "fieldset",
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ jsx51(
+            label && /* @__PURE__ */ jsx52(
               FormLabel,
               {
                 component: "legend",
@@ -6891,12 +7030,12 @@ var RHFMultiSwitch = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx51(FormGroup, { ...other, children: options.map((option) => {
+            /* @__PURE__ */ jsx52(FormGroup, { ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ jsx51(
+              return /* @__PURE__ */ jsx52(
                 FormControlLabel,
                 {
-                  control: /* @__PURE__ */ jsx51(
+                  control: /* @__PURE__ */ jsx52(
                     Switch,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -6919,7 +7058,7 @@ var RHFMultiSwitch = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ jsx51(FormHelperText2, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+            (!!error2 || helperText) && /* @__PURE__ */ jsx52(FormHelperText2, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
           ]
         }
       )
@@ -6929,10 +7068,10 @@ var RHFMultiSwitch = ({
 
 // src/components/HookForm/RHFUpload.tsx
 import { Controller as Controller2, useFormContext as useFormContext2 } from "react-hook-form";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
   const { control, setValue } = useFormContext2();
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     Controller2,
     {
       name,
@@ -6960,7 +7099,7 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
         const onRemoveAll = () => {
           setValue(name, [], { shouldValidate: true });
         };
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx53(
           Upload,
           {
             multiple,
@@ -6985,15 +7124,15 @@ import { Controller as Controller3, useFormContext as useFormContext3 } from "re
 
 // src/components/OTPInput/index.tsx
 import { useRef as useRef6, useState as useState10 } from "react";
-import { useTheme as useTheme2 } from "@mui/material/styles";
-import Box14 from "@mui/material/Box";
+import { useTheme as useTheme3 } from "@mui/material/styles";
+import Box13 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 jsxs31 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
 var OTPInput = (props) => {
   const { length = 6, onChange, onComplete, error: error2, helperText, containerProps, ...rest } = props;
-  const theme = useTheme2();
+  const theme = useTheme3();
   const [otp, setOtp] = useState10(Array(length).fill(""));
   const inputsRef = useRef6([]);
   const handleChange = (value, index) => {
@@ -7058,9 +7197,9 @@ var OTPInput = (props) => {
       onComplete?.(newOtp.join(""));
     }
   };
-  return /* @__PURE__ */ jsxs31(Fragment, { children: [
-    /* @__PURE__ */ jsx53(Box14, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ jsx53(
-      Box14,
+  return /* @__PURE__ */ jsxs32(Fragment, { children: [
+    /* @__PURE__ */ jsx54(Box13, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ jsx54(
+      Box13,
       {
         display: "flex",
         alignItems: "center",
@@ -7069,7 +7208,7 @@ var OTPInput = (props) => {
             mr: 1.5
           }
         },
-        children: /* @__PURE__ */ jsx53(
+        children: /* @__PURE__ */ jsx54(
           TextField,
           {
             size: "medium",
@@ -7152,21 +7291,21 @@ var OTPInput = (props) => {
       },
       index
     )) }),
-    error2 && /* @__PURE__ */ jsx53(FormHelperText3, { sx: { color: "error.main" }, children: helperText })
+    error2 && /* @__PURE__ */ jsx54(FormHelperText3, { sx: { color: "error.main" }, children: helperText })
   ] });
 };
 var OTPInput_default = OTPInput;
 
 // src/components/HookForm/RHFOTPInput.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var RHFOTPInput = ({ name, length = 6, helperText, ...rest }) => {
   const { control, setValue } = useFormContext3();
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     Controller3,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx54(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx55(
         OTPInput_default,
         {
           length,
@@ -7186,16 +7325,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 jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
   const { control } = useFormContext4();
   const passwordVisibility = useBoolean();
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     Controller4,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx55(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx56(
         TextField2,
         {
           ...field,
@@ -7216,7 +7355,7 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
             input: {
               ...slotProps?.input,
               ...type === "password" && {
-                endAdornment: /* @__PURE__ */ jsx55(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx55(IconButton3, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ jsx55(
+                endAdornment: /* @__PURE__ */ jsx56(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx56(IconButton3, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ jsx56(
                   Icon,
                   {
                     icon: passwordVisibility.value ? "EyeClosed" : "Eye",
@@ -7235,15 +7374,15 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
 
 // src/components/HookForm/RHFRadioGroup.tsx
 import { Controller as Controller5, useFormContext as useFormContext5 } from "react-hook-form";
-import Stack5 from "@mui/material/Stack";
-import Typography4 from "@mui/material/Typography";
+import Stack6 from "@mui/material/Stack";
+import Typography5 from "@mui/material/Typography";
 import Radio from "@mui/material/Radio";
 import FormControlLabel2 from "@mui/material/FormControlLabel";
 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 jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs33 } from "react/jsx-runtime";
 var RHFRadioGroup = ({
   name,
   label,
@@ -7255,13 +7394,13 @@ var RHFRadioGroup = ({
   const { control } = useFormContext5();
   const labelledby = `${name}-radio-buttons-group-label`;
   const ariaLabel = (val) => `Radio ${val}`;
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Controller5,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs32(FormControl2, { component: "fieldset", sx: slotProps?.wrap, children: [
-        label && /* @__PURE__ */ jsx56(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs33(FormControl2, { component: "fieldset", sx: slotProps?.wrap, children: [
+        label && /* @__PURE__ */ jsx57(
           FormLabel2,
           {
             id: labelledby,
@@ -7271,11 +7410,11 @@ var RHFRadioGroup = ({
             children: label
           }
         ),
-        /* @__PURE__ */ jsx56(RadioGroup, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx57(RadioGroup, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ jsx57(
           FormControlLabel2,
           {
             value: option.value,
-            control: /* @__PURE__ */ jsx56(
+            control: /* @__PURE__ */ jsx57(
               Radio,
               {
                 ...slotProps?.radio,
@@ -7287,9 +7426,9 @@ var RHFRadioGroup = ({
                 }
               }
             ),
-            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 })
+            label: /* @__PURE__ */ jsxs33(Stack6, { children: [
+              /* @__PURE__ */ jsx57(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
+              option?.description && /* @__PURE__ */ jsx57(Typography5, { variant: "body2", color: "textBody", children: option?.description })
             ] }),
             sx: {
               alignItems: option?.description ? "flex-start" : "center"
@@ -7297,7 +7436,7 @@ var RHFRadioGroup = ({
           },
           option.value
         )) }),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx56(FormHelperText4, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ jsx57(FormHelperText4, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -7307,7 +7446,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 jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var RHFAutocomplete = ({
   name,
   label,
@@ -7318,12 +7457,12 @@ var RHFAutocomplete = ({
   ...other
 }) => {
   const { control, setValue } = useFormContext6();
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Controller6,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx57(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx58(
         Autocomplete,
         {
           ...field,
@@ -7332,7 +7471,7 @@ var RHFAutocomplete = ({
             setValue(name, newValue, { shouldValidate: true });
             handleChange?.(newValue);
           },
-          renderInput: (params) => /* @__PURE__ */ jsx57(
+          renderInput: (params) => /* @__PURE__ */ jsx58(
             TextField3,
             {
               label,
@@ -7352,16 +7491,16 @@ 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 Box15 from "@mui/material/Box";
-import Typography5 from "@mui/material/Typography";
+import Stack7 from "@mui/material/Stack";
+import Box14 from "@mui/material/Box";
+import Typography6 from "@mui/material/Typography";
 import Checkbox from "@mui/material/Checkbox";
 import FormGroup2 from "@mui/material/FormGroup";
 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 jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
 var RHFCheckbox = ({
   name,
   description,
@@ -7373,16 +7512,16 @@ var RHFCheckbox = ({
 }) => {
   const { control } = useFormContext7();
   const baseAriaLabel = `Checkbox for ${name}`;
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Controller7,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs33(Box15, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ jsx58(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs34(Box14, { sx: slotProps?.wrap, children: [
+        /* @__PURE__ */ jsx59(
           FormControlLabel3,
           {
-            control: /* @__PURE__ */ jsx58(
+            control: /* @__PURE__ */ jsx59(
               Checkbox,
               {
                 ...field,
@@ -7397,9 +7536,9 @@ var RHFCheckbox = ({
                 }
               }
             ),
-            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 })
+            label: /* @__PURE__ */ jsxs34(Stack7, { children: [
+              /* @__PURE__ */ jsx59(Typography6, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
+              description && /* @__PURE__ */ jsx59(Typography6, { variant: "body2", color: "textBody", children: description })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -7408,7 +7547,7 @@ var RHFCheckbox = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx58(FormHelperText5, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ jsx59(FormHelperText5, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -7424,13 +7563,13 @@ var RHFMultiCheckbox = ({
 }) => {
   const { control } = useFormContext7();
   const getSelected = (currentValues, optionValue) => currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Controller7,
     {
       name,
       control,
       defaultValue: [],
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs33(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs34(
         FormControl3,
         {
           component: "fieldset",
@@ -7438,7 +7577,7 @@ var RHFMultiCheckbox = ({
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ jsx58(
+            label && /* @__PURE__ */ jsx59(
               FormLabel3,
               {
                 component: "legend",
@@ -7447,12 +7586,12 @@ var RHFMultiCheckbox = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx58(FormGroup2, { row, ...other, children: options.map((option) => {
+            /* @__PURE__ */ jsx59(FormGroup2, { row, ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ jsx58(
+              return /* @__PURE__ */ jsx59(
                 FormControlLabel3,
                 {
-                  control: /* @__PURE__ */ jsx58(
+                  control: /* @__PURE__ */ jsx59(
                     Checkbox,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -7470,9 +7609,9 @@ var RHFMultiCheckbox = ({
                       }
                     }
                   ),
-                  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 })
+                  label: /* @__PURE__ */ jsxs34(Stack7, { children: [
+                    /* @__PURE__ */ jsx59(Typography6, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
+                    option?.description && /* @__PURE__ */ jsx59(Typography6, { variant: "body2", color: "textBody", children: option?.description })
                   ] }),
                   sx: {
                     alignItems: option?.description ? "flex-start" : "center"
@@ -7481,7 +7620,7 @@ var RHFMultiCheckbox = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ jsx58(
+            (!!error2 || helperText) && /* @__PURE__ */ jsx59(
               FormHelperText5,
               {
                 sx: { mx: 0, ...slotProps?.formHelperText?.sx },
@@ -7511,29 +7650,29 @@ var Field = {
 // src/components/CopyButton/index.tsx
 import Tooltip from "@mui/material/Tooltip";
 import IconButton4 from "@mui/material/IconButton";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var CopyButton = ({ text: text2, size = "small" }) => {
   const { copy, isCopied } = useCopyToClipboard();
-  return /* @__PURE__ */ jsx59(Tooltip, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(Tooltip, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx60(
     IconButton4,
     {
       size,
       onClick: () => copy(text2),
       "aria-label": "copy token",
       sx: { color: "icon.black" },
-      children: /* @__PURE__ */ jsx59(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ jsx60(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
     }
   ) });
 };
 
 // src/components/LoadingScreen/index.tsx
 import Portal from "@mui/material/Portal";
-import Box16 from "@mui/material/Box";
+import Box15 from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var LoadingScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx60(
-    Box16,
+  const content = /* @__PURE__ */ jsx61(
+    Box15,
     {
       sx: {
         px: 5,
@@ -7546,17 +7685,17 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx60(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
+      children: /* @__PURE__ */ jsx61(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx60(Portal, { children: content });
+    return /* @__PURE__ */ jsx61(Portal, { children: content });
   }
   return content;
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx60(
-    Box16,
+  const content = /* @__PURE__ */ jsx61(
+    Box15,
     {
       sx: {
         right: 0,
@@ -7572,11 +7711,11 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx60(AnimatedLogo, {})
+      children: /* @__PURE__ */ jsx61(AnimatedLogo, {})
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx60(Portal, { children: content });
+    return /* @__PURE__ */ jsx61(Portal, { children: content });
   }
   return content;
 };
@@ -7590,6 +7729,7 @@ export {
   CloudUpload,
   Copy,
   CopyButton,
+  EmptyContent,
   Eye,
   EyeClosed,
   Field,