@octoguide/mui-ui-toolkit 0.7.6 → 0.8.0

package/dist/index.js

@@ -74,6 +74,7 @@ __export(index_exports, {
   MobileDateTimePicker: () => MobileDateTimePicker,
   MobileTimePicker: () => MobileTimePicker,
   MultiSelect: () => MultiSelect,
+  OtpInput: () => OtpInput,
   Overline: () => Overline,
   PageSpinner: () => PageSpinner,
   Pagination: () => Pagination,
@@ -2805,8 +2806,70 @@ var MultiSelect = ({
 };
 MultiSelect.displayName = "ToolkitMultiSelect";
 
+// src/components/OtpInput/OtpInput.tsx
+var import_react10 = require("react");
+var import_Box5 = __toESM(require("@mui/material/Box"));
+var import_OutlinedInput = __toESM(require("@mui/material/OutlinedInput"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var OTP_LENGTH = 6;
+var OtpInput = ({ value, onChange, error, disabled }) => {
+  const inputRefs = (0, import_react10.useRef)([]);
+  const digits = Array.from({ length: OTP_LENGTH }, (_, i) => value[i] ?? "");
+  const handleChange = (0, import_react10.useCallback)(
+    (index, char) => {
+      const digit = char.replace(/\D/g, "").slice(-1);
+      const next = digits.map((d, i) => i === index ? digit : d).join("");
+      onChange(next);
+      if (digit && index < OTP_LENGTH - 1) inputRefs.current[index + 1]?.focus();
+    },
+    [digits, onChange]
+  );
+  const handleKeyDown = (0, import_react10.useCallback)(
+    (index, e) => {
+      if (e.key === "Backspace" && !digits[index] && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+      }
+    },
+    [digits]
+  );
+  const handlePaste = (0, import_react10.useCallback)(
+    (e) => {
+      const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
+      if (pasted) {
+        onChange(pasted.padEnd(OTP_LENGTH, "").slice(0, OTP_LENGTH));
+        inputRefs.current[Math.min(pasted.length, OTP_LENGTH - 1)]?.focus();
+      }
+      e.preventDefault();
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box5.default, { sx: { display: "flex", gap: 1.5, justifyContent: "space-between", mb: 2.5 }, children: digits.map((digit, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_OutlinedInput.default,
+    {
+      inputRef: (el) => {
+        inputRefs.current[i] = el;
+      },
+      value: digit,
+      onChange: (e) => handleChange(i, e.target.value),
+      onKeyDown: (e) => handleKeyDown(i, e),
+      onPaste: handlePaste,
+      placeholder: "-",
+      disabled,
+      inputProps: {
+        maxLength: 1,
+        autoComplete: "one-time-code",
+        style: { textAlign: "center", fontSize: "1.25rem", padding: "12px 0" }
+      },
+      error,
+      sx: { width: 48, "& .MuiOutlinedInput-notchedOutline": { borderRadius: 1.5 } }
+    },
+    i
+  )) });
+};
+OtpInput.displayName = "ToolkitOtpInput";
+
 // src/components/PageSpinner/PageSpinner.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_Portal = __toESM(require("@mui/material/Portal"));
 var import_CircularProgress2 = __toESM(require("@mui/material/CircularProgress"));
 var import_utils = require("@mui/material/utils");
@@ -3016,9 +3079,9 @@ var StyledScreenReaderOnly2 = (0, import_styles14.styled)("span")(() => ({
 }));
 
 // src/components/PageSpinner/PageSpinner.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ARIA_REANNOUNCE_INTERVAL = 3e4;
-var PageSpinner = import_react10.default.forwardRef(
+var PageSpinner = import_react11.default.forwardRef(
   function PageSpinner2({
     message = "Processing, please wait",
     customMessageLayout,
@@ -3028,14 +3091,14 @@ var PageSpinner = import_react10.default.forwardRef(
     messageTone = "assertive",
     ...restProps
   }, ref) {
-    const internalRef = (0, import_react10.useRef)(null);
+    const internalRef = (0, import_react11.useRef)(null);
     const mergedRef = (0, import_utils.useForkRef)(ref, internalRef);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       const blockKeyDown = (e) => e.preventDefault();
       document.addEventListener("keydown", blockKeyDown);
       return () => document.removeEventListener("keydown", blockKeyDown);
     }, [rootNode]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       const ariaRole = messageTone === "polite" ? "status" : "alert";
       setA11yMessage(message, messageTone, ariaRole);
       const interval = setInterval(() => {
@@ -3050,7 +3113,7 @@ var PageSpinner = import_react10.default.forwardRef(
         backgroundScrollTether(false);
       };
     }, [message, rootNode, messageTone]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Portal.default, { container: rootNode, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Portal.default, { container: rootNode, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       StyledPageSpinnerRoot,
       {
         "data-component-id": "PageSpinner",
@@ -3058,9 +3121,9 @@ var PageSpinner = import_react10.default.forwardRef(
         ref: mergedRef,
         ...getCleanProps(restProps),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledOverlay, { $darkBg: isOnDarkBg }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StyledSpinnerCentre, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledOverlay, { $darkBg: isOnDarkBg }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(StyledSpinnerCentre, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               import_CircularProgress2.default,
               {
                 size: 60,
@@ -3068,8 +3131,8 @@ var PageSpinner = import_react10.default.forwardRef(
                 "aria-hidden": "true"
               }
             ),
-            customMessageLayout ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledSpinnerMessage, { $darkBg: isOnDarkBg, children: message }),
-            srText && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledScreenReaderOnly2, { children: srText })
+            customMessageLayout ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledSpinnerMessage, { $darkBg: isOnDarkBg, children: message }),
+            srText && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledScreenReaderOnly2, { children: srText })
           ] })
         ]
       }
@@ -3079,7 +3142,7 @@ var PageSpinner = import_react10.default.forwardRef(
 PageSpinner.displayName = "ToolkitPageSpinner";
 
 // src/components/Pagination/Pagination.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_Pagination = __toESM(require("@mui/material/Pagination"));
 
 // src/components/Pagination/Pagination.styles.tsx
@@ -3146,15 +3209,15 @@ var StyledPaginationItem = (0, import_styles16.styled)(import_PaginationItem.def
 });
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Pagination = import_react11.default.forwardRef(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Pagination = import_react12.default.forwardRef(
   function Pagination2({ variant = "text", shape = "circular", color = "default", ...restProps }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_Pagination.default,
       {
         ref,
         "data-component-id": "Pagination",
-        renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           StyledPaginationItem,
           {
             $variant: variant,
@@ -3171,7 +3234,7 @@ var Pagination = import_react11.default.forwardRef(
 Pagination.displayName = "ToolkitPagination";
 
 // src/components/Paragraph/Paragraph.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/components/Paragraph/Paragraph.styles.tsx
 var import_styles17 = require("@mui/material/styles");
@@ -3208,10 +3271,10 @@ var StyledParagraph = (0, import_styles17.styled)("p", {
 }));
 
 // src/components/Paragraph/Paragraph.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Paragraph = import_react12.default.forwardRef(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Paragraph = import_react13.default.forwardRef(
   function Paragraph2({ children, variant = "regular", isOnDarkBg = false, ...restProps }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       StyledParagraph,
       {
         $variant: variant,
@@ -3227,7 +3290,7 @@ var Paragraph = import_react12.default.forwardRef(
 Paragraph.displayName = "ToolkitParagraph";
 
 // src/components/Password/Password.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/components/Password/PasswordRule.tsx
 var import_CheckCircle = __toESM(require("@mui/icons-material/CheckCircle"));
@@ -3268,16 +3331,16 @@ var StyledScreenReaderOnly3 = (0, import_styles18.styled)("span")({
 });
 
 // src/components/Password/PasswordRule.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var PasswordRule = ({ valid = false, rule = "", idx }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var PasswordRule = ({ valid = false, rule = "", idx }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
   StyledPasswordRule,
   {
     className: valid ? "PasswordRule--valid" : "PasswordRule--invalid",
     "data-testid": `password-rule-${idx}`,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledPasswordRuleIcon, { children: valid ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_CheckCircle.default, { fontSize: "small", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Cancel.default, { fontSize: "small", "aria-hidden": "true" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledPasswordRuleText, { children: rule }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledScreenReaderOnly3, { children: valid ? "supplied" : "not supplied" })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledPasswordRuleIcon, { children: valid ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_CheckCircle.default, { fontSize: "small", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_Cancel.default, { fontSize: "small", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledPasswordRuleText, { children: rule }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledScreenReaderOnly3, { children: valid ? "supplied" : "not supplied" })
     ]
   }
 );
@@ -3306,7 +3369,7 @@ var StyledPasswordRuleTitle = (0, import_styles19.styled)("div")(({ theme }) =>
 }));
 
 // src/components/Password/PasswordCriteria.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var PasswordRules = [
   { key: "minLength", rule: "Minimum 8 characters" },
   { key: "lowercase", rule: "At least one lowercase letter" },
@@ -3323,7 +3386,7 @@ var passwordValidator = (value) => ({
 });
 var PasswordCriteria = ({ show = false, value = "", id = "passwordCriteria" }) => {
   const validity = passwordValidator(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     StyledPasswordCriteriaContainer,
     {
       $show: show,
@@ -3332,9 +3395,9 @@ var PasswordCriteria = ({ show = false, value = "", id = "passwordCriteria" }) =
       "data-testid": "password-criteria",
       role: "status",
       "aria-live": "polite",
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Card, { compact: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledPasswordRuleTitle, { children: "Password must contain:" }),
-        PasswordRules.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PasswordRule, { valid: validity[item.key], rule: item.rule, idx }, item.key))
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Card, { compact: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledPasswordRuleTitle, { children: "Password must contain:" }),
+        PasswordRules.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PasswordRule, { valid: validity[item.key], rule: item.rule, idx }, item.key))
       ] })
     }
   );
@@ -3352,8 +3415,8 @@ var StyledPasswordInputWrapper = (0, import_styles20.styled)("div")({
 });
 
 // src/components/Password/Password.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Password = import_react13.default.forwardRef(
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Password = import_react14.default.forwardRef(
   function Password2({
     isInvalid,
     value: initialValue,
@@ -3366,8 +3429,8 @@ var Password = import_react13.default.forwardRef(
     id,
     ...rest
   }, ref) {
-    const [value, setValue] = (0, import_react13.useState)(initialValue ?? "");
-    const [showCriteria, setShowCriteria] = (0, import_react13.useState)(false);
+    const [value, setValue] = (0, import_react14.useState)(initialValue ?? "");
+    const [showCriteria, setShowCriteria] = (0, import_react14.useState)(false);
     const handleFocus = () => {
       setShowCriteria(true);
     };
@@ -3384,8 +3447,8 @@ var Password = import_react13.default.forwardRef(
     };
     const criteriaId = id ? `${id}-criteria` : "passwordCriteria";
     const cleanRest = getCleanProps(rest);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(StyledPasswordRoot, { className, ...cleanRest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledPasswordInputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(StyledPasswordRoot, { className, ...cleanRest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledPasswordInputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         TextField,
         {
           ref,
@@ -3404,14 +3467,14 @@ var Password = import_react13.default.forwardRef(
           onChange: handleChange
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PasswordCriteria, { show: showCriteria, value, id: criteriaId })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PasswordCriteria, { show: showCriteria, value, id: criteriaId })
     ] });
   }
 );
 Password.displayName = "ToolkitPassword";
 
 // src/components/Spinner/Spinner.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/components/Spinner/Spinner.styles.tsx
 var import_styles21 = require("@mui/material/styles");
@@ -3499,10 +3562,10 @@ var StyledScreenReaderOnly4 = (0, import_styles21.styled)("span")({
 });
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Spinner = import_react14.default.forwardRef(
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Spinner = import_react15.default.forwardRef(
   function Spinner2({ size = "sm", message, isOnDarkBg = false, srText, isInline = false, ...restProps }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       StyledSpinnerContainer,
       {
         ref,
@@ -3510,12 +3573,12 @@ var Spinner = import_react14.default.forwardRef(
         "data-component-id": "Spinner",
         ...getCleanProps(restProps),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(StyledSpinnerIconContainer, { $size: size, "aria-hidden": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledSpinnerBackground, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledSpinner, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledSpinnerIconContainer, { $size: size, "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledSpinnerBackground, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledSpinner, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" })
           ] }),
-          message && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
-          srText && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledScreenReaderOnly4, { children: srText })
+          message && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
+          srText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledScreenReaderOnly4, { children: srText })
         ]
       }
     );
@@ -3641,7 +3704,7 @@ var StyledSwitch = (0, import_styles22.styled)("label", {
 }));
 
 // src/components/Toggle/Toggle.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Toggle({
   name,
   checked = false,
@@ -3653,11 +3716,11 @@ function Toggle({
   ...restProps
 }) {
   const testId = restProps["data-testid"];
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledFieldset, { "data-component-id": "toggle", ...getCleanProps(restProps), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledLegend, { children: label }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_FormHelperText.default, { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledToggleWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(StyledFieldset, { "data-component-id": "toggle", ...getCleanProps(restProps), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledLegend, { children: label }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_FormHelperText.default, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(StyledToggleWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         StyledSwitch,
         {
           htmlFor: `${name}off`,
@@ -3665,7 +3728,7 @@ function Toggle({
           controlType: "off",
           "data-testid": testId ? `${testId}-off` : void 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "input",
               {
                 checked: !checked,
@@ -3681,7 +3744,7 @@ function Toggle({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         StyledSwitch,
         {
           htmlFor: `${name}on`,
@@ -3689,7 +3752,7 @@ function Toggle({
           controlType: "on",
           "data-testid": testId ? `${testId}-on` : void 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "input",
               {
                 checked,
@@ -3706,7 +3769,7 @@ function Toggle({
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_FormHelperText.default, { error: true, children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_FormHelperText.default, { error: true, children: error })
   ] });
 }
 Toggle.displayName = "ToolkitToggle";
@@ -3714,7 +3777,7 @@ Toggle.displayName = "ToolkitToggle";
 // src/components/Table/Table.tsx
 var import_material11 = require("@mui/material");
 var import_styles23 = require("@mui/material/styles");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var StyledTableContainer = (0, import_styles23.styled)(import_material11.TableContainer)(() => ({
   overflowX: "auto"
 }));
@@ -3725,25 +3788,25 @@ var StyledHeadCell = (0, import_styles23.styled)(import_material11.TableCell)(({
   borderBottomColor: theme.tokens.components.table.borderColor
 }));
 function Table(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material11.Table, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material11.Table, { ...props });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material11.TableHead, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material11.TableHead, { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material11.TableBody, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material11.TableBody, { ...props });
 }
 function TableRow(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material11.TableRow, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material11.TableRow, { ...props });
 }
 function TableCell(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material11.TableCell, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material11.TableCell, { ...props });
 }
 function TableHeadCell(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledHeadCell, { component: "th", scope: "col", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledHeadCell, { component: "th", scope: "col", ...props });
 }
 function TableContainer(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledTableContainer, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledTableContainer, { ...props });
 }
 var TablePagination = import_material11.TablePagination;
 var TableSortLabel = import_material11.TableSortLabel;
@@ -3756,144 +3819,144 @@ TableHeadCell.displayName = "ToolkitTableHeadCell";
 TableContainer.displayName = "ToolkitTableContainer";
 
 // src/foundation/H1/H1.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_material12 = require("@mui/material");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var H1 = import_react15.default.forwardRef(
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var H1 = import_react16.default.forwardRef(
   function H12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material12.Typography, { ref, variant: "h1", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material12.Typography, { ref, variant: "h1", color, ...props, children });
   }
 );
 H1.displayName = "ToolkitH1";
 
 // src/foundation/H2/H2.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_material13 = require("@mui/material");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var H2 = import_react16.default.forwardRef(
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var H2 = import_react17.default.forwardRef(
   function H22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material13.Typography, { ref, variant: "h2", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material13.Typography, { ref, variant: "h2", color, ...props, children });
   }
 );
 H2.displayName = "ToolkitH2";
 
 // src/foundation/H3/H3.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_material14 = require("@mui/material");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var H3 = import_react17.default.forwardRef(
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var H3 = import_react18.default.forwardRef(
   function H32({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material14.Typography, { ref, variant: "h3", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material14.Typography, { ref, variant: "h3", color, ...props, children });
   }
 );
 H3.displayName = "ToolkitH3";
 
 // src/foundation/H4/H4.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_material15 = require("@mui/material");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var H4 = import_react18.default.forwardRef(
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var H4 = import_react19.default.forwardRef(
   function H42({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material15.Typography, { ref, variant: "h4", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material15.Typography, { ref, variant: "h4", color, ...props, children });
   }
 );
 H4.displayName = "ToolkitH4";
 
 // src/foundation/H5/H5.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_material16 = require("@mui/material");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var H5 = import_react19.default.forwardRef(
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var H5 = import_react20.default.forwardRef(
   function H52({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material16.Typography, { ref, variant: "h5", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material16.Typography, { ref, variant: "h5", color, ...props, children });
   }
 );
 H5.displayName = "ToolkitH5";
 
 // src/foundation/H6/H6.tsx
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_material17 = require("@mui/material");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var H6 = import_react20.default.forwardRef(
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var H6 = import_react21.default.forwardRef(
   function H62({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material17.Typography, { ref, variant: "h6", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material17.Typography, { ref, variant: "h6", color, ...props, children });
   }
 );
 H6.displayName = "ToolkitH6";
 
 // src/foundation/Subtitle1/Subtitle1.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_material18 = require("@mui/material");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Subtitle1 = import_react21.default.forwardRef(
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Subtitle1 = import_react22.default.forwardRef(
   function Subtitle12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material18.Typography, { ref, variant: "subtitle1", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material18.Typography, { ref, variant: "subtitle1", color, ...props, children });
   }
 );
 Subtitle1.displayName = "ToolkitSubtitle1";
 
 // src/foundation/Subtitle2/Subtitle2.tsx
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_material19 = require("@mui/material");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var Subtitle2 = import_react22.default.forwardRef(
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Subtitle2 = import_react23.default.forwardRef(
   function Subtitle22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material19.Typography, { ref, variant: "subtitle2", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material19.Typography, { ref, variant: "subtitle2", color, ...props, children });
   }
 );
 Subtitle2.displayName = "ToolkitSubtitle2";
 
 // src/foundation/Body1/Body1.tsx
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_material20 = require("@mui/material");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var Body1 = import_react23.default.forwardRef(
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var Body1 = import_react24.default.forwardRef(
   function Body12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material20.Typography, { ref, variant: "body1", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material20.Typography, { ref, variant: "body1", color, ...props, children });
   }
 );
 Body1.displayName = "ToolkitBody1";
 
 // src/foundation/Body2/Body2.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_material21 = require("@mui/material");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Body2 = import_react24.default.forwardRef(
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Body2 = import_react25.default.forwardRef(
   function Body22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material21.Typography, { ref, variant: "body2", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material21.Typography, { ref, variant: "body2", color, ...props, children });
   }
 );
 Body2.displayName = "ToolkitBody2";
 
 // src/foundation/Caption/Caption.tsx
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_material22 = require("@mui/material");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var Caption = import_react25.default.forwardRef(
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Caption = import_react26.default.forwardRef(
   function Caption2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material22.Typography, { ref, variant: "caption", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material22.Typography, { ref, variant: "caption", color, ...props, children });
   }
 );
 Caption.displayName = "ToolkitCaption";
 
 // src/foundation/Overline/Overline.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_material23 = require("@mui/material");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var Overline = import_react26.default.forwardRef(
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var Overline = import_react27.default.forwardRef(
   function Overline2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material23.Typography, { ref, variant: "overline", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material23.Typography, { ref, variant: "overline", color, ...props, children });
   }
 );
 Overline.displayName = "ToolkitOverline";
 
 // src/foundation/TypographyButton/TypographyButton.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_material24 = require("@mui/material");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var TypographyButton = import_react27.default.forwardRef(
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var TypographyButton = import_react28.default.forwardRef(
   function TypographyButton2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material24.Typography, { ref, variant: "button", color, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material24.Typography, { ref, variant: "button", color, ...props, children });
   }
 );
 TypographyButton.displayName = "ToolkitTypographyButton";
@@ -3943,6 +4006,7 @@ TypographyButton.displayName = "ToolkitTypographyButton";
   MobileDateTimePicker,
   MobileTimePicker,
   MultiSelect,
+  OtpInput,
   Overline,
   PageSpinner,
   Pagination,