@undefine-ui/design-system 2.10.0 → 2.11.0

package/dist/index.js

@@ -4348,7 +4348,7 @@ var MuiTextField = {
         lineHeight: 1.153,
         position: "relative",
         fontSize: theme.typography.h8.fontSize,
-        fontWeight: theme.typography.fontWeightMedium,
+        fontWeight: `${theme.typography.fontWeightMedium} !important`,
         marginBottom: theme.spacing(1),
         color: `${theme.vars.palette.icon.black} !important`,
         // Focused state
@@ -4425,9 +4425,6 @@ var MuiTextField = {
             height: 20,
             color: theme.vars.palette.icon.black
           },
-          [`& .${inputBaseClasses.input}`]: {
-            paddingLeft: 0
-          },
           [`& .${inputAdornmentClasses.sizeSmall}`]: {
             svg: { width: 16, height: 16 }
           },
@@ -6709,22 +6706,223 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
   );
 };
 
-// src/components/HookForm/RHFTextField.tsx
+// src/components/HookForm/RHFOTPInput.tsx
 import { Controller as Controller3, useFormContext as useFormContext3 } from "react-hook-form";
+
+// src/components/OTPInput/index.tsx
+import { useRef as useRef4, useState as useState8 } from "react";
+import { useTheme as useTheme2 } 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 jsxs30 } from "react/jsx-runtime";
+var OTPInput = (props) => {
+  const { length = 6, onChange, onComplete, error: error2, helperText, containerProps, ...rest } = props;
+  const theme = useTheme2();
+  const [otp, setOtp] = useState8(Array(length).fill(""));
+  const inputsRef = useRef4([]);
+  const handleChange = (value, index) => {
+    if (!/^[0-9]$/.test(value) && value !== "") return;
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+    onChange?.(newOtp.join(""));
+    if (value && index < length - 1) {
+      inputsRef.current[index + 1]?.focus();
+    }
+    if (newOtp.every((val) => val !== "")) {
+      onComplete?.(newOtp.join(""));
+    }
+  };
+  const handleKeyDown = (event, index) => {
+    if (event.key === "Backspace") {
+      if (otp[index] === "") {
+        if (index > 0) {
+          inputsRef.current[index - 1]?.focus();
+          setOtp((prevOtp) => {
+            const newOtp = [...prevOtp];
+            newOtp[index - 1] = "";
+            return newOtp;
+          });
+        }
+      } else {
+        setOtp((prevOtp) => {
+          const newOtp = [...prevOtp];
+          newOtp[index] = "";
+          return newOtp;
+        });
+      }
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      if (index > 0) {
+        inputsRef.current[index - 1]?.focus();
+      }
+    } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      if (index < length - 1) {
+        inputsRef.current[index + 1]?.focus();
+      }
+    }
+  };
+  const handlePaste = (event) => {
+    event.preventDefault();
+    const pasteData = event.clipboardData.getData("text");
+    if (!/^\d+$/.test(pasteData)) return;
+    const newOtp = [...otp];
+    for (let i = 0; i < length; i++) {
+      if (pasteData[i]) {
+        newOtp[i] = pasteData[i];
+      } else {
+        newOtp[i] = "";
+      }
+    }
+    setOtp(newOtp);
+    onChange?.(newOtp.join(""));
+    const filled = newOtp.filter((otp2) => otp2 !== "");
+    inputsRef.current[filled.length]?.focus();
+    if (newOtp.every((val) => val !== "")) {
+      inputsRef.current[filled.length - 1]?.focus();
+      onComplete?.(newOtp.join(""));
+    }
+  };
+  return /* @__PURE__ */ jsxs30(Fragment, { children: [
+    /* @__PURE__ */ jsx53(Box13, { display: "flex", justifyContent: "center", ...containerProps, children: otp.map((_, index) => /* @__PURE__ */ jsx53(
+      Box13,
+      {
+        display: "flex",
+        alignItems: "center",
+        sx: {
+          "&:not(:last-of-type)": {
+            mr: 1.5
+          }
+        },
+        children: /* @__PURE__ */ jsx53(
+          TextField,
+          {
+            size: "medium",
+            value: otp[index],
+            onChange: (e) => handleChange(e.target.value, index),
+            onKeyDown: (e) => handleKeyDown(e, index),
+            onPaste: handlePaste,
+            inputRef: (el) => inputsRef.current[index] = el,
+            error: error2,
+            slotProps: {
+              htmlInput: {
+                maxLength: 1,
+                inputMode: "numeric",
+                autoComplete: "one-time-code"
+              }
+            },
+            sx: {
+              [`& .${inputBaseClasses3.root}`]: {
+                borderRadius: theme.radius["radius-lg"],
+                backgroundColor: "transparent",
+                border: `1px solid ${theme.vars.palette.border.default}`,
+                transition: theme.transitions.create(
+                  ["background-color", "border-color", "box-shadow"],
+                  {
+                    duration: theme.transitions.duration.short
+                  }
+                ),
+                // Remove default underline
+                "&::before, &::after": {
+                  display: "none"
+                },
+                // Hover state
+                "&:hover": {
+                  backgroundColor: "transparent",
+                  borderColor: theme.vars.palette.border.default
+                },
+                // Focus state
+                [`&.${inputBaseClasses3.focused}`]: {
+                  backgroundColor: theme.vars.palette.common.white,
+                  border: `1px solid ${theme.vars.palette.border.default}`,
+                  boxShadow: `0 0 0 2px ${varAlpha(theme.vars.palette.primary["300Channel"], 1)}`
+                },
+                // Error state
+                [`&.${inputBaseClasses3.error}`]: {
+                  backgroundColor: theme.vars.palette.error[100],
+                  borderColor: theme.vars.palette.error[300],
+                  "&:hover": {
+                    backgroundColor: theme.vars.palette.error[100],
+                    borderColor: theme.vars.palette.error[300]
+                  },
+                  [`&.${inputBaseClasses3.focused}`]: {
+                    backgroundColor: theme.vars.palette.error[100],
+                    border: `1px solid ${theme.vars.palette.border.default}`,
+                    boxShadow: `0 0 0 2px ${varAlpha(theme.vars.palette.error["300Channel"], 1)}`
+                  }
+                },
+                // Disabled state
+                [`&.${inputBaseClasses3.disabled}`]: {
+                  backgroundColor: theme.vars.palette.surface.disable,
+                  borderColor: theme.vars.palette.surface.disable,
+                  color: theme.vars.palette.text.disabled,
+                  "&:hover": {
+                    backgroundColor: theme.vars.palette.surface.disable,
+                    borderColor: theme.vars.palette.surface.disable
+                  }
+                }
+              },
+              "& .MuiFilledInput-input": {
+                padding: "0px !important",
+                borderRadius: theme.radius["radius-lg"],
+                fontWeight: 600,
+                width: { xs: 44 },
+                height: { xs: 44 },
+                textAlign: "center"
+              },
+              ...rest.sx
+            }
+          }
+        )
+      },
+      index
+    )) }),
+    error2 && /* @__PURE__ */ jsx53(FormHelperText3, { sx: { color: "error.main" }, children: helperText })
+  ] });
+};
+var OTPInput_default = OTPInput;
+
+// src/components/HookForm/RHFOTPInput.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+var RHFOTPInput = ({ name, length = 6, helperText, ...rest }) => {
+  const { control, setValue } = useFormContext3();
+  return /* @__PURE__ */ jsx54(
+    Controller3,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx54(
+        OTPInput_default,
+        {
+          length,
+          onChange: field.onChange,
+          onComplete: (otp) => setValue(name, otp),
+          error: Boolean(error2),
+          helperText: error2?.message ?? helperText,
+          ...rest
+        }
+      )
+    }
+  );
+};
+
+// src/components/HookForm/RHFTextField.tsx
+import { Controller as Controller4, useFormContext as useFormContext4 } from "react-hook-form";
 import IconButton3 from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
-import TextField from "@mui/material/TextField";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import TextField2 from "@mui/material/TextField";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
-  const { control } = useFormContext3();
+  const { control } = useFormContext4();
   const passwordVisibility = useBoolean();
-  return /* @__PURE__ */ jsx53(
-    Controller3,
+  return /* @__PURE__ */ jsx55(
+    Controller4,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx53(
-        TextField,
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx55(
+        TextField2,
         {
           ...field,
           fullWidth: true,
@@ -6744,7 +6942,7 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
             input: {
               ...slotProps?.input,
               ...type === "password" && {
-                endAdornment: /* @__PURE__ */ jsx53(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx53(IconButton3, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ jsx53(
+                endAdornment: /* @__PURE__ */ jsx55(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx55(IconButton3, { edge: "end", onClick: passwordVisibility.onToggle, children: /* @__PURE__ */ jsx55(
                   Icon,
                   {
                     icon: passwordVisibility.value ? "EyeClosed" : "Eye",
@@ -6762,7 +6960,7 @@ var RHFTextField = ({ name, helperText, type, slotProps, ...rest }) => {
 };
 
 // src/components/HookForm/RHFRadioGroup.tsx
-import { Controller as Controller4, useFormContext as useFormContext4 } from "react-hook-form";
+import { Controller as Controller5, useFormContext as useFormContext5 } from "react-hook-form";
 import Stack5 from "@mui/material/Stack";
 import Typography4 from "@mui/material/Typography";
 import Radio from "@mui/material/Radio";
@@ -6770,8 +6968,8 @@ 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 FormHelperText3 from "@mui/material/FormHelperText";
-import { jsx as jsx54, jsxs as jsxs30 } from "react/jsx-runtime";
+import FormHelperText4 from "@mui/material/FormHelperText";
+import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
 var RHFRadioGroup = ({
   name,
   label,
@@ -6780,16 +6978,16 @@ var RHFRadioGroup = ({
   slotProps,
   ...other
 }) => {
-  const { control } = useFormContext4();
+  const { control } = useFormContext5();
   const labelledby = `${name}-radio-buttons-group-label`;
   const ariaLabel = (val) => `Radio ${val}`;
-  return /* @__PURE__ */ jsx54(
-    Controller4,
+  return /* @__PURE__ */ jsx56(
+    Controller5,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs30(FormControl2, { component: "fieldset", sx: slotProps?.wrap, children: [
-        label && /* @__PURE__ */ jsx54(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs31(FormControl2, { component: "fieldset", sx: slotProps?.wrap, children: [
+        label && /* @__PURE__ */ jsx56(
           FormLabel2,
           {
             id: labelledby,
@@ -6799,11 +6997,11 @@ var RHFRadioGroup = ({
             children: label
           }
         ),
-        /* @__PURE__ */ jsx54(RadioGroup, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx56(RadioGroup, { ...field, "aria-labelledby": labelledby, ...other, children: options.map((option) => /* @__PURE__ */ jsx56(
           FormControlLabel2,
           {
             value: option.value,
-            control: /* @__PURE__ */ jsx54(
+            control: /* @__PURE__ */ jsx56(
               Radio,
               {
                 ...slotProps?.radio,
@@ -6815,9 +7013,9 @@ var RHFRadioGroup = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ jsxs30(Stack5, { children: [
-              /* @__PURE__ */ jsx54(Typography4, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-              option?.description && /* @__PURE__ */ jsx54(Typography4, { variant: "body2", color: "textBody", children: option?.description })
+            label: /* @__PURE__ */ jsxs31(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 })
             ] }),
             sx: {
               alignItems: option?.description ? "flex-start" : "center"
@@ -6825,17 +7023,17 @@ var RHFRadioGroup = ({
           },
           option.value
         )) }),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx54(FormHelperText3, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ jsx56(FormHelperText4, { error: !!error2, sx: { mx: 0 }, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
 };
 
 // src/components/HookForm/RHFAutocomplete.tsx
-import { Controller as Controller5, useFormContext as useFormContext5 } from "react-hook-form";
-import TextField2 from "@mui/material/TextField";
+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 jsx55 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var RHFAutocomplete = ({
   name,
   label,
@@ -6845,13 +7043,13 @@ var RHFAutocomplete = ({
   handleChange,
   ...other
 }) => {
-  const { control, setValue } = useFormContext5();
-  return /* @__PURE__ */ jsx55(
-    Controller5,
+  const { control, setValue } = useFormContext6();
+  return /* @__PURE__ */ jsx57(
+    Controller6,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx55(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsx57(
         Autocomplete,
         {
           ...field,
@@ -6860,8 +7058,8 @@ var RHFAutocomplete = ({
             setValue(name, newValue, { shouldValidate: true });
             handleChange?.(newValue);
           },
-          renderInput: (params) => /* @__PURE__ */ jsx55(
-            TextField2,
+          renderInput: (params) => /* @__PURE__ */ jsx57(
+            TextField3,
             {
               label,
               placeholder,
@@ -6879,17 +7077,17 @@ var RHFAutocomplete = ({
 };
 
 // src/components/HookForm/RHFCheckbox.tsx
-import { Controller as Controller6, useFormContext as useFormContext6 } from "react-hook-form";
+import { Controller as Controller7, useFormContext as useFormContext7 } from "react-hook-form";
 import Stack6 from "@mui/material/Stack";
-import Box13 from "@mui/material/Box";
+import Box14 from "@mui/material/Box";
 import Typography5 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 FormHelperText4 from "@mui/material/FormHelperText";
+import FormHelperText5 from "@mui/material/FormHelperText";
 import FormControlLabel3 from "@mui/material/FormControlLabel";
-import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
 var RHFCheckbox = ({
   name,
   description,
@@ -6899,18 +7097,18 @@ var RHFCheckbox = ({
   slotProps,
   ...other
 }) => {
-  const { control } = useFormContext6();
+  const { control } = useFormContext7();
   const baseAriaLabel = `Checkbox for ${name}`;
-  return /* @__PURE__ */ jsx56(
-    Controller6,
+  return /* @__PURE__ */ jsx58(
+    Controller7,
     {
       name,
       control,
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs31(Box13, { sx: slotProps?.wrap, children: [
-        /* @__PURE__ */ jsx56(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs32(Box14, { sx: slotProps?.wrap, children: [
+        /* @__PURE__ */ jsx58(
           FormControlLabel3,
           {
-            control: /* @__PURE__ */ jsx56(
+            control: /* @__PURE__ */ jsx58(
               Checkbox,
               {
                 ...field,
@@ -6925,9 +7123,9 @@ var RHFCheckbox = ({
                 }
               }
             ),
-            label: /* @__PURE__ */ jsxs31(Stack6, { children: [
-              /* @__PURE__ */ jsx56(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
-              description && /* @__PURE__ */ jsx56(Typography5, { variant: "body2", color: "textBody", children: description })
+            label: /* @__PURE__ */ jsxs32(Stack6, { children: [
+              /* @__PURE__ */ jsx58(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: label }),
+              description && /* @__PURE__ */ jsx58(Typography5, { variant: "body2", color: "textBody", children: description })
             ] }),
             sx: {
               alignItems: description ? "flex-start" : "center",
@@ -6936,7 +7134,7 @@ var RHFCheckbox = ({
             ...other
           }
         ),
-        (!!error2 || helperText) && /* @__PURE__ */ jsx56(FormHelperText4, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
+        (!!error2 || helperText) && /* @__PURE__ */ jsx58(FormHelperText5, { error: !!error2, ...slotProps?.formHelperText, children: error2 ? error2?.message : helperText })
       ] })
     }
   );
@@ -6950,15 +7148,15 @@ var RHFMultiCheckbox = ({
   row,
   ...other
 }) => {
-  const { control } = useFormContext6();
+  const { control } = useFormContext7();
   const getSelected = (currentValues, optionValue) => currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
-  return /* @__PURE__ */ jsx56(
-    Controller6,
+  return /* @__PURE__ */ jsx58(
+    Controller7,
     {
       name,
       control,
       defaultValue: [],
-      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs31(
+      render: ({ field, fieldState: { error: error2 } }) => /* @__PURE__ */ jsxs32(
         FormControl3,
         {
           component: "fieldset",
@@ -6966,7 +7164,7 @@ var RHFMultiCheckbox = ({
           sx: slotProps?.formControl?.sx,
           ...slotProps?.formControl,
           children: [
-            label && /* @__PURE__ */ jsx56(
+            label && /* @__PURE__ */ jsx58(
               FormLabel3,
               {
                 component: "legend",
@@ -6975,12 +7173,12 @@ var RHFMultiCheckbox = ({
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx56(FormGroup2, { row, ...other, children: options.map((option) => {
+            /* @__PURE__ */ jsx58(FormGroup2, { row, ...other, children: options.map((option) => {
               const itemAriaLabel = option.label || `Option ${option.value}`;
-              return /* @__PURE__ */ jsx56(
+              return /* @__PURE__ */ jsx58(
                 FormControlLabel3,
                 {
-                  control: /* @__PURE__ */ jsx56(
+                  control: /* @__PURE__ */ jsx58(
                     Checkbox,
                     {
                       checked: (field.value || []).includes(option.value),
@@ -6998,9 +7196,9 @@ var RHFMultiCheckbox = ({
                       }
                     }
                   ),
-                  label: /* @__PURE__ */ jsxs31(Stack6, { children: [
-                    /* @__PURE__ */ jsx56(Typography5, { variant: "bodyMd", color: "textHeader", fontWeight: 500, children: option.label }),
-                    option?.description && /* @__PURE__ */ jsx56(Typography5, { variant: "body2", color: "textBody", children: option?.description })
+                  label: /* @__PURE__ */ jsxs32(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 })
                   ] }),
                   sx: {
                     alignItems: option?.description ? "flex-start" : "center"
@@ -7009,8 +7207,8 @@ var RHFMultiCheckbox = ({
                 option.value
               );
             }) }),
-            (!!error2 || helperText) && /* @__PURE__ */ jsx56(
-              FormHelperText4,
+            (!!error2 || helperText) && /* @__PURE__ */ jsx58(
+              FormHelperText5,
               {
                 sx: { mx: 0, ...slotProps?.formHelperText?.sx },
                 ...slotProps?.formHelperText,
@@ -7026,6 +7224,7 @@ var RHFMultiCheckbox = ({
 
 // src/components/HookForm/fields.ts
 var Field = {
+  OTP: RHFOTPInput,
   Switch: RHFSwitch,
   Upload: RHFUpload,
   Text: RHFTextField,
@@ -7038,29 +7237,29 @@ var Field = {
 // src/components/CopyButton/index.tsx
 import Tooltip from "@mui/material/Tooltip";
 import IconButton4 from "@mui/material/IconButton";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var CopyButton = ({ text: text2, size = "small" }) => {
   const { copy, isCopied } = useCopyToClipboard();
-  return /* @__PURE__ */ jsx57(Tooltip, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(Tooltip, { title: isCopied ? "Copied" : "Copy", children: /* @__PURE__ */ jsx59(
     IconButton4,
     {
       size,
       onClick: () => copy(text2),
       "aria-label": "copy token",
       sx: { color: "icon.black" },
-      children: /* @__PURE__ */ jsx57(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ jsx59(Icon, { icon: isCopied ? "ClipboardCheck" : "Copy", sx: { width: 20, height: 20 } })
     }
   ) });
 };
 
 // src/components/LoadingScreen/index.tsx
 import Portal from "@mui/material/Portal";
-import Box14 from "@mui/material/Box";
+import Box15 from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var LoadingScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx58(
-    Box14,
+  const content = /* @__PURE__ */ jsx60(
+    Box15,
     {
       sx: {
         px: 5,
@@ -7073,17 +7272,17 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx58(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
+      children: /* @__PURE__ */ jsx60(LinearProgress, { color: "primary", sx: { width: 1, maxWidth: 360 } })
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx58(Portal, { children: content });
+    return /* @__PURE__ */ jsx60(Portal, { children: content });
   }
   return content;
 };
 var SplashScreen = ({ portal, sx, ...rest }) => {
-  const content = /* @__PURE__ */ jsx58(
-    Box14,
+  const content = /* @__PURE__ */ jsx60(
+    Box15,
     {
       sx: {
         right: 0,
@@ -7099,11 +7298,11 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx58(AnimatedLogo, {})
+      children: /* @__PURE__ */ jsx60(AnimatedLogo, {})
     }
   );
   if (portal) {
-    return /* @__PURE__ */ jsx58(Portal, { children: content });
+    return /* @__PURE__ */ jsx60(Portal, { children: content });
   }
   return content;
 };
@@ -7134,10 +7333,12 @@ export {
   NavArrowDown,
   NavArrowLeft,
   NavArrowRight,
+  OTPInput,
   RHFAutocomplete,
   RHFCheckbox,
   RHFMultiCheckbox,
   RHFMultiSwitch,
+  RHFOTPInput,
   RHFRadioGroup,
   RHFSwitch,
   RHFTextField,