@octoguide/mui-ui-toolkit 0.7.6 → 0.8.0

package/dist/index.mjs

@@ -2743,8 +2743,70 @@ var MultiSelect = ({
 };
 MultiSelect.displayName = "ToolkitMultiSelect";
 
+// src/components/OtpInput/OtpInput.tsx
+import { useRef as useRef2, useCallback as useCallback4 } from "react";
+import Box5 from "@mui/material/Box";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var OTP_LENGTH = 6;
+var OtpInput = ({ value, onChange, error, disabled }) => {
+  const inputRefs = useRef2([]);
+  const digits = Array.from({ length: OTP_LENGTH }, (_, i) => value[i] ?? "");
+  const handleChange = useCallback4(
+    (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 = useCallback4(
+    (index, e) => {
+      if (e.key === "Backspace" && !digits[index] && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+      }
+    },
+    [digits]
+  );
+  const handlePaste = useCallback4(
+    (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__ */ jsx19(Box5, { sx: { display: "flex", gap: 1.5, justifyContent: "space-between", mb: 2.5 }, children: digits.map((digit, i) => /* @__PURE__ */ jsx19(
+    OutlinedInput,
+    {
+      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
-import React8, { useEffect as useEffect3, useRef as useRef2 } from "react";
+import React8, { useEffect as useEffect3, useRef as useRef3 } from "react";
 import Portal from "@mui/material/Portal";
 import CircularProgress3 from "@mui/material/CircularProgress";
 import { useForkRef } from "@mui/material/utils";
@@ -2954,7 +3016,7 @@ var StyledScreenReaderOnly2 = styled13("span")(() => ({
 }));
 
 // src/components/PageSpinner/PageSpinner.tsx
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var ARIA_REANNOUNCE_INTERVAL = 3e4;
 var PageSpinner = React8.forwardRef(
   function PageSpinner2({
@@ -2966,7 +3028,7 @@ var PageSpinner = React8.forwardRef(
     messageTone = "assertive",
     ...restProps
   }, ref) {
-    const internalRef = useRef2(null);
+    const internalRef = useRef3(null);
     const mergedRef = useForkRef(ref, internalRef);
     useEffect3(() => {
       const blockKeyDown = (e) => e.preventDefault();
@@ -2988,7 +3050,7 @@ var PageSpinner = React8.forwardRef(
         backgroundScrollTether(false);
       };
     }, [message, rootNode, messageTone]);
-    return /* @__PURE__ */ jsx19(Portal, { container: rootNode, children: /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsx20(Portal, { container: rootNode, children: /* @__PURE__ */ jsxs8(
       StyledPageSpinnerRoot,
       {
         "data-component-id": "PageSpinner",
@@ -2996,9 +3058,9 @@ var PageSpinner = React8.forwardRef(
         ref: mergedRef,
         ...getCleanProps(restProps),
         children: [
-          /* @__PURE__ */ jsx19(StyledOverlay, { $darkBg: isOnDarkBg }),
+          /* @__PURE__ */ jsx20(StyledOverlay, { $darkBg: isOnDarkBg }),
           /* @__PURE__ */ jsxs8(StyledSpinnerCentre, { children: [
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20(
               CircularProgress3,
               {
                 size: 60,
@@ -3006,8 +3068,8 @@ var PageSpinner = React8.forwardRef(
                 "aria-hidden": "true"
               }
             ),
-            customMessageLayout ?? /* @__PURE__ */ jsx19(StyledSpinnerMessage, { $darkBg: isOnDarkBg, children: message }),
-            srText && /* @__PURE__ */ jsx19(StyledScreenReaderOnly2, { children: srText })
+            customMessageLayout ?? /* @__PURE__ */ jsx20(StyledSpinnerMessage, { $darkBg: isOnDarkBg, children: message }),
+            srText && /* @__PURE__ */ jsx20(StyledScreenReaderOnly2, { children: srText })
           ] })
         ]
       }
@@ -3084,15 +3146,15 @@ var StyledPaginationItem = styled14(MuiPaginationItem, {
 });
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Pagination = React9.forwardRef(
   function Pagination2({ variant = "text", shape = "circular", color = "default", ...restProps }, ref) {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       MuiPagination,
       {
         ref,
         "data-component-id": "Pagination",
-        renderItem: (item) => /* @__PURE__ */ jsx20(
+        renderItem: (item) => /* @__PURE__ */ jsx21(
           StyledPaginationItem,
           {
             $variant: variant,
@@ -3146,10 +3208,10 @@ var StyledParagraph = styled15("p", {
 }));
 
 // src/components/Paragraph/Paragraph.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Paragraph = React10.forwardRef(
   function Paragraph2({ children, variant = "regular", isOnDarkBg = false, ...restProps }, ref) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       StyledParagraph,
       {
         $variant: variant,
@@ -3206,16 +3268,16 @@ var StyledScreenReaderOnly3 = styled16("span")({
 });
 
 // src/components/Password/PasswordRule.tsx
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 var PasswordRule = ({ valid = false, rule = "", idx }) => /* @__PURE__ */ jsxs9(
   StyledPasswordRule,
   {
     className: valid ? "PasswordRule--valid" : "PasswordRule--invalid",
     "data-testid": `password-rule-${idx}`,
     children: [
-      /* @__PURE__ */ jsx22(StyledPasswordRuleIcon, { children: valid ? /* @__PURE__ */ jsx22(CheckCircleIcon, { fontSize: "small", "aria-hidden": "true" }) : /* @__PURE__ */ jsx22(CancelIcon, { fontSize: "small", "aria-hidden": "true" }) }),
-      /* @__PURE__ */ jsx22(StyledPasswordRuleText, { children: rule }),
-      /* @__PURE__ */ jsx22(StyledScreenReaderOnly3, { children: valid ? "supplied" : "not supplied" })
+      /* @__PURE__ */ jsx23(StyledPasswordRuleIcon, { children: valid ? /* @__PURE__ */ jsx23(CheckCircleIcon, { fontSize: "small", "aria-hidden": "true" }) : /* @__PURE__ */ jsx23(CancelIcon, { fontSize: "small", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx23(StyledPasswordRuleText, { children: rule }),
+      /* @__PURE__ */ jsx23(StyledScreenReaderOnly3, { children: valid ? "supplied" : "not supplied" })
     ]
   }
 );
@@ -3244,7 +3306,7 @@ var StyledPasswordRuleTitle = styled17("div")(({ theme }) => ({
 }));
 
 // src/components/Password/PasswordCriteria.tsx
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
 var PasswordRules = [
   { key: "minLength", rule: "Minimum 8 characters" },
   { key: "lowercase", rule: "At least one lowercase letter" },
@@ -3261,7 +3323,7 @@ var passwordValidator = (value) => ({
 });
 var PasswordCriteria = ({ show = false, value = "", id = "passwordCriteria" }) => {
   const validity = passwordValidator(value);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     StyledPasswordCriteriaContainer,
     {
       $show: show,
@@ -3271,8 +3333,8 @@ var PasswordCriteria = ({ show = false, value = "", id = "passwordCriteria" }) =
       role: "status",
       "aria-live": "polite",
       children: /* @__PURE__ */ jsxs10(Card, { compact: true, children: [
-        /* @__PURE__ */ jsx23(StyledPasswordRuleTitle, { children: "Password must contain:" }),
-        PasswordRules.map((item, idx) => /* @__PURE__ */ jsx23(PasswordRule, { valid: validity[item.key], rule: item.rule, idx }, item.key))
+        /* @__PURE__ */ jsx24(StyledPasswordRuleTitle, { children: "Password must contain:" }),
+        PasswordRules.map((item, idx) => /* @__PURE__ */ jsx24(PasswordRule, { valid: validity[item.key], rule: item.rule, idx }, item.key))
       ] })
     }
   );
@@ -3290,7 +3352,7 @@ var StyledPasswordInputWrapper = styled18("div")({
 });
 
 // src/components/Password/Password.tsx
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 var Password = React11.forwardRef(
   function Password2({
     isInvalid,
@@ -3323,7 +3385,7 @@ var Password = React11.forwardRef(
     const criteriaId = id ? `${id}-criteria` : "passwordCriteria";
     const cleanRest = getCleanProps(rest);
     return /* @__PURE__ */ jsxs11(StyledPasswordRoot, { className, ...cleanRest, children: [
-      /* @__PURE__ */ jsx24(StyledPasswordInputWrapper, { children: /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx25(StyledPasswordInputWrapper, { children: /* @__PURE__ */ jsx25(
         TextField,
         {
           ref,
@@ -3342,7 +3404,7 @@ var Password = React11.forwardRef(
           onChange: handleChange
         }
       ) }),
-      /* @__PURE__ */ jsx24(PasswordCriteria, { show: showCriteria, value, id: criteriaId })
+      /* @__PURE__ */ jsx25(PasswordCriteria, { show: showCriteria, value, id: criteriaId })
     ] });
   }
 );
@@ -3437,7 +3499,7 @@ var StyledScreenReaderOnly4 = styled19("span")({
 });
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 var Spinner = React12.forwardRef(
   function Spinner2({ size = "sm", message, isOnDarkBg = false, srText, isInline = false, ...restProps }, ref) {
     return /* @__PURE__ */ jsxs12(
@@ -3449,11 +3511,11 @@ var Spinner = React12.forwardRef(
         ...getCleanProps(restProps),
         children: [
           /* @__PURE__ */ jsxs12(StyledSpinnerIconContainer, { $size: size, "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx25(StyledSpinnerBackground, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx25(StyledSpinner, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" })
+            /* @__PURE__ */ jsx26(StyledSpinnerBackground, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx26(StyledSpinner, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" })
           ] }),
-          message && /* @__PURE__ */ jsx25(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
-          srText && /* @__PURE__ */ jsx25(StyledScreenReaderOnly4, { children: srText })
+          message && /* @__PURE__ */ jsx26(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
+          srText && /* @__PURE__ */ jsx26(StyledScreenReaderOnly4, { children: srText })
         ]
       }
     );
@@ -3579,7 +3641,7 @@ var StyledSwitch = styled20("label", {
 }));
 
 // src/components/Toggle/Toggle.tsx
-import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 function Toggle({
   name,
   checked = false,
@@ -3592,8 +3654,8 @@ function Toggle({
 }) {
   const testId = restProps["data-testid"];
   return /* @__PURE__ */ jsxs13(StyledFieldset, { "data-component-id": "toggle", ...getCleanProps(restProps), children: [
-    label && /* @__PURE__ */ jsx26(StyledLegend, { children: label }),
-    description && /* @__PURE__ */ jsx26(FormHelperText, { children: description }),
+    label && /* @__PURE__ */ jsx27(StyledLegend, { children: label }),
+    description && /* @__PURE__ */ jsx27(FormHelperText, { children: description }),
     /* @__PURE__ */ jsxs13(StyledToggleWrapper, { children: [
       /* @__PURE__ */ jsxs13(
         StyledSwitch,
@@ -3603,7 +3665,7 @@ function Toggle({
           controlType: "off",
           "data-testid": testId ? `${testId}-off` : void 0,
           children: [
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx27(
               "input",
               {
                 checked: !checked,
@@ -3627,7 +3689,7 @@ function Toggle({
           controlType: "on",
           "data-testid": testId ? `${testId}-on` : void 0,
           children: [
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx27(
               "input",
               {
                 checked,
@@ -3644,7 +3706,7 @@ function Toggle({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx26(FormHelperText, { error: true, children: error })
+    error && /* @__PURE__ */ jsx27(FormHelperText, { error: true, children: error })
   ] });
 }
 Toggle.displayName = "ToolkitToggle";
@@ -3661,7 +3723,7 @@ import {
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
 import { styled as styled21 } from "@mui/material/styles";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var StyledTableContainer = styled21(MuiTableContainer)(() => ({
   overflowX: "auto"
 }));
@@ -3672,25 +3734,25 @@ var StyledHeadCell = styled21(MuiTableCell)(({ theme }) => ({
   borderBottomColor: theme.tokens.components.table.borderColor
 }));
 function Table(props) {
-  return /* @__PURE__ */ jsx27(MuiTable, { ...props });
+  return /* @__PURE__ */ jsx28(MuiTable, { ...props });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ jsx27(MuiTableHead, { ...props });
+  return /* @__PURE__ */ jsx28(MuiTableHead, { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx27(MuiTableBody, { ...props });
+  return /* @__PURE__ */ jsx28(MuiTableBody, { ...props });
 }
 function TableRow(props) {
-  return /* @__PURE__ */ jsx27(MuiTableRow, { ...props });
+  return /* @__PURE__ */ jsx28(MuiTableRow, { ...props });
 }
 function TableCell(props) {
-  return /* @__PURE__ */ jsx27(MuiTableCell, { ...props });
+  return /* @__PURE__ */ jsx28(MuiTableCell, { ...props });
 }
 function TableHeadCell(props) {
-  return /* @__PURE__ */ jsx27(StyledHeadCell, { component: "th", scope: "col", ...props });
+  return /* @__PURE__ */ jsx28(StyledHeadCell, { component: "th", scope: "col", ...props });
 }
 function TableContainer(props) {
-  return /* @__PURE__ */ jsx27(StyledTableContainer, { ...props });
+  return /* @__PURE__ */ jsx28(StyledTableContainer, { ...props });
 }
 var TablePagination = MuiTablePagination;
 var TableSortLabel = MuiTableSortLabel;
@@ -3705,10 +3767,10 @@ TableContainer.displayName = "ToolkitTableContainer";
 // src/foundation/H1/H1.tsx
 import React13 from "react";
 import { Typography } from "@mui/material";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var H1 = React13.forwardRef(
   function H12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx28(Typography, { ref, variant: "h1", color, ...props, children });
+    return /* @__PURE__ */ jsx29(Typography, { ref, variant: "h1", color, ...props, children });
   }
 );
 H1.displayName = "ToolkitH1";
@@ -3716,10 +3778,10 @@ H1.displayName = "ToolkitH1";
 // src/foundation/H2/H2.tsx
 import React14 from "react";
 import { Typography as Typography2 } from "@mui/material";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var H2 = React14.forwardRef(
   function H22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx29(Typography2, { ref, variant: "h2", color, ...props, children });
+    return /* @__PURE__ */ jsx30(Typography2, { ref, variant: "h2", color, ...props, children });
   }
 );
 H2.displayName = "ToolkitH2";
@@ -3727,10 +3789,10 @@ H2.displayName = "ToolkitH2";
 // src/foundation/H3/H3.tsx
 import React15 from "react";
 import { Typography as Typography3 } from "@mui/material";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var H3 = React15.forwardRef(
   function H32({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx30(Typography3, { ref, variant: "h3", color, ...props, children });
+    return /* @__PURE__ */ jsx31(Typography3, { ref, variant: "h3", color, ...props, children });
   }
 );
 H3.displayName = "ToolkitH3";
@@ -3738,10 +3800,10 @@ H3.displayName = "ToolkitH3";
 // src/foundation/H4/H4.tsx
 import React16 from "react";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var H4 = React16.forwardRef(
   function H42({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx31(Typography4, { ref, variant: "h4", color, ...props, children });
+    return /* @__PURE__ */ jsx32(Typography4, { ref, variant: "h4", color, ...props, children });
   }
 );
 H4.displayName = "ToolkitH4";
@@ -3749,10 +3811,10 @@ H4.displayName = "ToolkitH4";
 // src/foundation/H5/H5.tsx
 import React17 from "react";
 import { Typography as Typography5 } from "@mui/material";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var H5 = React17.forwardRef(
   function H52({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx32(Typography5, { ref, variant: "h5", color, ...props, children });
+    return /* @__PURE__ */ jsx33(Typography5, { ref, variant: "h5", color, ...props, children });
   }
 );
 H5.displayName = "ToolkitH5";
@@ -3760,10 +3822,10 @@ H5.displayName = "ToolkitH5";
 // src/foundation/H6/H6.tsx
 import React18 from "react";
 import { Typography as Typography6 } from "@mui/material";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var H6 = React18.forwardRef(
   function H62({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx33(Typography6, { ref, variant: "h6", color, ...props, children });
+    return /* @__PURE__ */ jsx34(Typography6, { ref, variant: "h6", color, ...props, children });
   }
 );
 H6.displayName = "ToolkitH6";
@@ -3771,10 +3833,10 @@ H6.displayName = "ToolkitH6";
 // src/foundation/Subtitle1/Subtitle1.tsx
 import React19 from "react";
 import { Typography as Typography7 } from "@mui/material";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Subtitle1 = React19.forwardRef(
   function Subtitle12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx34(Typography7, { ref, variant: "subtitle1", color, ...props, children });
+    return /* @__PURE__ */ jsx35(Typography7, { ref, variant: "subtitle1", color, ...props, children });
   }
 );
 Subtitle1.displayName = "ToolkitSubtitle1";
@@ -3782,10 +3844,10 @@ Subtitle1.displayName = "ToolkitSubtitle1";
 // src/foundation/Subtitle2/Subtitle2.tsx
 import React20 from "react";
 import { Typography as Typography8 } from "@mui/material";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Subtitle2 = React20.forwardRef(
   function Subtitle22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx35(Typography8, { ref, variant: "subtitle2", color, ...props, children });
+    return /* @__PURE__ */ jsx36(Typography8, { ref, variant: "subtitle2", color, ...props, children });
   }
 );
 Subtitle2.displayName = "ToolkitSubtitle2";
@@ -3793,10 +3855,10 @@ Subtitle2.displayName = "ToolkitSubtitle2";
 // src/foundation/Body1/Body1.tsx
 import React21 from "react";
 import { Typography as Typography9 } from "@mui/material";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var Body1 = React21.forwardRef(
   function Body12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx36(Typography9, { ref, variant: "body1", color, ...props, children });
+    return /* @__PURE__ */ jsx37(Typography9, { ref, variant: "body1", color, ...props, children });
   }
 );
 Body1.displayName = "ToolkitBody1";
@@ -3804,10 +3866,10 @@ Body1.displayName = "ToolkitBody1";
 // src/foundation/Body2/Body2.tsx
 import React22 from "react";
 import { Typography as Typography10 } from "@mui/material";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var Body2 = React22.forwardRef(
   function Body22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx37(Typography10, { ref, variant: "body2", color, ...props, children });
+    return /* @__PURE__ */ jsx38(Typography10, { ref, variant: "body2", color, ...props, children });
   }
 );
 Body2.displayName = "ToolkitBody2";
@@ -3815,10 +3877,10 @@ Body2.displayName = "ToolkitBody2";
 // src/foundation/Caption/Caption.tsx
 import React23 from "react";
 import { Typography as Typography11 } from "@mui/material";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Caption = React23.forwardRef(
   function Caption2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx38(Typography11, { ref, variant: "caption", color, ...props, children });
+    return /* @__PURE__ */ jsx39(Typography11, { ref, variant: "caption", color, ...props, children });
   }
 );
 Caption.displayName = "ToolkitCaption";
@@ -3826,10 +3888,10 @@ Caption.displayName = "ToolkitCaption";
 // src/foundation/Overline/Overline.tsx
 import React24 from "react";
 import { Typography as Typography12 } from "@mui/material";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Overline = React24.forwardRef(
   function Overline2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx39(Typography12, { ref, variant: "overline", color, ...props, children });
+    return /* @__PURE__ */ jsx40(Typography12, { ref, variant: "overline", color, ...props, children });
   }
 );
 Overline.displayName = "ToolkitOverline";
@@ -3837,10 +3899,10 @@ Overline.displayName = "ToolkitOverline";
 // src/foundation/TypographyButton/TypographyButton.tsx
 import React25 from "react";
 import { Typography as Typography13 } from "@mui/material";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var TypographyButton = React25.forwardRef(
   function TypographyButton2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx40(Typography13, { ref, variant: "button", color, ...props, children });
+    return /* @__PURE__ */ jsx41(Typography13, { ref, variant: "button", color, ...props, children });
   }
 );
 TypographyButton.displayName = "ToolkitTypographyButton";
@@ -3889,6 +3951,7 @@ export {
   MobileDateTimePicker,
   MobileTimePicker,
   MultiSelect,
+  OtpInput,
   Overline,
   PageSpinner,
   Pagination,