@octoguide/mui-ui-toolkit 0.7.6 → 0.8.1

package/dist/index.mjs

@@ -1474,19 +1474,52 @@ function Avatar({ size = "md", ...props }) {
 }
 
 // src/components/ToggleButton/ToggleButton.tsx
+import { styled as styled7 } from "@mui/material/styles";
 import {
   ToggleButton as MuiToggleButton,
   ToggleButtonGroup as MuiToggleButtonGroup
 } from "@mui/material";
-import { jsx as jsx11 } from "react/jsx-runtime";
-function ToggleButton(props) {
-  return /* @__PURE__ */ jsx11(MuiToggleButton, { ...props });
-}
-ToggleButton.displayName = "ToolkitToggleButton";
-function ToggleButtonGroup(props) {
-  return /* @__PURE__ */ jsx11(MuiToggleButtonGroup, { ...props });
-}
+var ToggleButtonGroup = styled7(MuiToggleButtonGroup)(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.tokens.borderRadius.md,
+  backgroundColor: theme.palette.background.paper,
+  padding: theme.spacing(0.5),
+  "& .MuiToggleButtonGroup-grouped": {
+    border: "none",
+    borderRadius: `calc(${theme.tokens.borderRadius.md} - 2px)`,
+    "&:not(:first-of-type)": {
+      borderRadius: `calc(${theme.tokens.borderRadius.md} - 2px)`,
+      marginLeft: 0
+    },
+    "&:first-of-type": {
+      borderRadius: `calc(${theme.tokens.borderRadius.md} - 2px)`
+    }
+  }
+}));
 ToggleButtonGroup.displayName = "ToolkitToggleButtonGroup";
+var ToggleButton = styled7(MuiToggleButton)(({ theme }) => ({
+  fontFamily: theme.tokens.typography.fontFamilyBase,
+  fontSize: theme.tokens.typography.fontSizeMd,
+  fontWeight: theme.tokens.typography.fontWeightBold,
+  textTransform: "none",
+  color: theme.palette.text.primary,
+  lineHeight: 1.25,
+  transition: `background-color ${theme.tokens.transitions.durationBase} ease`,
+  "&:hover": {
+    backgroundColor: theme.tokens.colors.backgroundSubtle
+  },
+  "&.Mui-selected": {
+    backgroundColor: theme.tokens.colors.primary,
+    color: theme.tokens.colors.primaryContrast,
+    "&:hover": {
+      backgroundColor: theme.tokens.colors.primaryDark
+    }
+  },
+  "&.Mui-disabled": {
+    opacity: 0.4
+  }
+}));
+ToggleButton.displayName = "ToolkitToggleButton";
 
 // src/components/DatePicker/DatePicker.tsx
 import { useState as useState2 } from "react";
@@ -1546,77 +1579,77 @@ import DialogActions2 from "@mui/material/DialogActions";
 import Button2 from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import TextField3 from "@mui/material/TextField";
-import { styled as styled7 } from "@mui/material/styles";
-import { Fragment, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+import { styled as styled8 } from "@mui/material/styles";
+import { Fragment, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 function DateLocalizationProvider({ children }) {
-  return /* @__PURE__ */ jsx12(LocalizationProvider, { dateAdapter: AdapterDayjs, children });
+  return /* @__PURE__ */ jsx11(LocalizationProvider, { dateAdapter: AdapterDayjs, children });
 }
 DateLocalizationProvider.displayName = "ToolkitDateLocalizationProvider";
 function DatePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiDatePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiDatePicker, { ...props });
 }
 DatePicker.displayName = "ToolkitDatePicker";
 function DesktopDatePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiDesktopDatePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiDesktopDatePicker, { ...props });
 }
 DesktopDatePicker.displayName = "ToolkitDesktopDatePicker";
 function MobileDatePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiMobileDatePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiMobileDatePicker, { ...props });
 }
 MobileDatePicker.displayName = "ToolkitMobileDatePicker";
 function DateField(props) {
-  return /* @__PURE__ */ jsx12(MuiDateField, { ...props });
+  return /* @__PURE__ */ jsx11(MuiDateField, { ...props });
 }
 DateField.displayName = "ToolkitDateField";
 function StaticDatePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiStaticDatePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiStaticDatePicker, { ...props });
 }
 StaticDatePicker.displayName = "ToolkitStaticDatePicker";
 function TimePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiTimePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiTimePicker, { ...props });
 }
 TimePicker.displayName = "ToolkitTimePicker";
 function DesktopTimePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiDesktopTimePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiDesktopTimePicker, { ...props });
 }
 DesktopTimePicker.displayName = "ToolkitDesktopTimePicker";
 function MobileTimePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiMobileTimePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiMobileTimePicker, { ...props });
 }
 MobileTimePicker.displayName = "ToolkitMobileTimePicker";
 function TimeField(props) {
-  return /* @__PURE__ */ jsx12(MuiTimeField, { ...props });
+  return /* @__PURE__ */ jsx11(MuiTimeField, { ...props });
 }
 TimeField.displayName = "ToolkitTimeField";
 function StaticTimePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiStaticTimePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiStaticTimePicker, { ...props });
 }
 StaticTimePicker.displayName = "ToolkitStaticTimePicker";
 function DateTimePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiDateTimePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiDateTimePicker, { ...props });
 }
 DateTimePicker.displayName = "ToolkitDateTimePicker";
 function DesktopDateTimePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiDesktopDateTimePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiDesktopDateTimePicker, { ...props });
 }
 DesktopDateTimePicker.displayName = "ToolkitDesktopDateTimePicker";
 function MobileDateTimePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiMobileDateTimePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiMobileDateTimePicker, { ...props });
 }
 MobileDateTimePicker.displayName = "ToolkitMobileDateTimePicker";
 function DateTimeField(props) {
-  return /* @__PURE__ */ jsx12(MuiDateTimeField, { ...props });
+  return /* @__PURE__ */ jsx11(MuiDateTimeField, { ...props });
 }
 DateTimeField.displayName = "ToolkitDateTimeField";
 function StaticDateTimePicker(props) {
-  return /* @__PURE__ */ jsx12(MuiStaticDateTimePicker, { ...props });
+  return /* @__PURE__ */ jsx11(MuiStaticDateTimePicker, { ...props });
 }
 StaticDateTimePicker.displayName = "ToolkitStaticDateTimePicker";
 function DateCalendar(props) {
-  return /* @__PURE__ */ jsx12(MuiDateCalendar, { ...props });
+  return /* @__PURE__ */ jsx11(MuiDateCalendar, { ...props });
 }
 DateCalendar.displayName = "ToolkitDateCalendar";
-var RangeRow = styled7(Box)(({ theme }) => ({
+var RangeRow = styled8(Box)(({ theme }) => ({
   display: "flex",
   gap: theme.spacing(2),
   alignItems: "center"
@@ -1640,10 +1673,10 @@ function DateRangePickerInput({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx12(Button2, { variant: "contained", color: "inherit", disableElevation: true, onClick: handleOpen, children: buttonLabel }),
+    /* @__PURE__ */ jsx11(Button2, { variant: "contained", color: "inherit", disableElevation: true, onClick: handleOpen, children: buttonLabel }),
     /* @__PURE__ */ jsxs3(Dialog2, { open, onClose: handleCancel, maxWidth: "sm", fullWidth: true, children: [
-      /* @__PURE__ */ jsx12(DialogContent2, { children: /* @__PURE__ */ jsxs3(RangeRow, { children: [
-        /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx11(DialogContent2, { children: /* @__PURE__ */ jsxs3(RangeRow, { children: [
+        /* @__PURE__ */ jsx11(
           MuiDatePicker,
           {
             label: startLabel,
@@ -1652,7 +1685,7 @@ function DateRangePickerInput({
             slotProps: { textField: { fullWidth: true } }
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx11(
           MuiDatePicker,
           {
             label: endLabel,
@@ -1663,8 +1696,8 @@ function DateRangePickerInput({
         )
       ] }) }),
       /* @__PURE__ */ jsxs3(DialogActions2, { children: [
-        /* @__PURE__ */ jsx12(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
-        /* @__PURE__ */ jsx12(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
+        /* @__PURE__ */ jsx11(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
+        /* @__PURE__ */ jsx11(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
       ] })
     ] })
   ] });
@@ -1697,10 +1730,10 @@ function DateRangePickerCalendar({
     }
   };
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx12(Button2, { variant: "contained", color: "inherit", disableElevation: true, onClick: handleOpen, children: buttonLabel }),
+    /* @__PURE__ */ jsx11(Button2, { variant: "contained", color: "inherit", disableElevation: true, onClick: handleOpen, children: buttonLabel }),
     /* @__PURE__ */ jsxs3(Dialog2, { open, onClose: handleCancel, children: [
       /* @__PURE__ */ jsxs3(DialogContent2, { sx: { p: 1 }, children: [
-        /* @__PURE__ */ jsx12(Box, { sx: { mb: 1, px: 1 }, children: /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx11(Box, { sx: { mb: 1, px: 1 }, children: /* @__PURE__ */ jsx11(
           TextField3,
           {
             size: "small",
@@ -1710,7 +1743,7 @@ function DateRangePickerCalendar({
             fullWidth: true
           }
         ) }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx11(
           MuiDateCalendar,
           {
             value: selecting === "start" ? draft.start : draft.end,
@@ -1719,8 +1752,8 @@ function DateRangePickerCalendar({
         )
       ] }),
       /* @__PURE__ */ jsxs3(DialogActions2, { children: [
-        /* @__PURE__ */ jsx12(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
-        /* @__PURE__ */ jsx12(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
+        /* @__PURE__ */ jsx11(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
+        /* @__PURE__ */ jsx11(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
       ] })
     ] })
   ] });
@@ -1729,9 +1762,9 @@ DateRangePickerCalendar.displayName = "ToolkitDateRangePickerCalendar";
 
 // src/foundation/Grid/Grid.tsx
 import { Grid2 as MuiGrid2 } from "@mui/material";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Grid({ container, spacing, ...props }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx12(
     MuiGrid2,
     {
       container,
@@ -1746,9 +1779,9 @@ Grid.displayName = "ToolkitGrid";
 import React4 from "react";
 
 // src/components/IconText/IconText.styles.tsx
-import { styled as styled8 } from "@mui/material/styles";
+import { styled as styled9 } from "@mui/material/styles";
 import { SvgIcon as SvgIcon4 } from "@mui/material";
-var StyledIconTextRoot = styled8("div")(
+var StyledIconTextRoot = styled9("div")(
   ({ $inheritFontFamily }) => ({
     display: "flex",
     alignItems: "center",
@@ -1764,7 +1797,7 @@ var StyledIconTextRoot = styled8("div")(
     }
   })
 );
-var StyledIconTextSymbol = styled8(SvgIcon4, {
+var StyledIconTextSymbol = styled9(SvgIcon4, {
   shouldForwardProp: (prop) => prop !== "$position"
 })(({ theme, $position }) => ({
   flexShrink: 0,
@@ -1773,7 +1806,7 @@ var StyledIconTextSymbol = styled8(SvgIcon4, {
 }));
 
 // src/components/IconText/IconText.tsx
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var IconText = React4.forwardRef(
   function IconText2({
     symbol,
@@ -1783,14 +1816,14 @@ var IconText = React4.forwardRef(
     children,
     ...rest
   }, ref) {
-    const icon = /* @__PURE__ */ jsx14(
+    const icon = /* @__PURE__ */ jsx13(
       StyledIconTextSymbol,
       {
         $position: symbolPosition,
         viewBox: symbol.viewBox ?? "0 0 24 24",
         "aria-hidden": "true",
         ...symbolProps,
-        children: symbol.content && /* @__PURE__ */ jsx14("g", { dangerouslySetInnerHTML: { __html: symbol.content } })
+        children: symbol.content && /* @__PURE__ */ jsx13("g", { dangerouslySetInnerHTML: { __html: symbol.content } })
       }
     );
     return /* @__PURE__ */ jsxs4(
@@ -1815,8 +1848,8 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 // src/components/InternalLinkItem/InternalLinkItem.styles.tsx
 import Box2 from "@mui/material/Box";
-import { styled as styled9 } from "@mui/material/styles";
-var StyledWrapper = styled9("div")(({ theme }) => ({
+import { styled as styled10 } from "@mui/material/styles";
+var StyledWrapper = styled10("div")(({ theme }) => ({
   "& > a, & > div": {
     textDecoration: "none",
     color: theme.tokens.colors.textPrimary,
@@ -1825,7 +1858,7 @@ var StyledWrapper = styled9("div")(({ theme }) => ({
     }
   }
 }));
-var StyledListItemContainer = styled9(Box2)(({ theme }) => ({
+var StyledListItemContainer = styled10(Box2)(({ theme }) => ({
   width: "100%",
   minHeight: "66px",
   borderTop: `1px solid ${theme.tokens.colors.divider}`,
@@ -1868,19 +1901,19 @@ var StyledListItemContainer = styled9(Box2)(({ theme }) => ({
     outlineStyle: "solid"
   }
 }));
-var StyledLeftIconWrapper = styled9("span")({
+var StyledLeftIconWrapper = styled10("span")({
   display: "flex",
   paddingLeft: "4px"
 });
-var StyledRightIconWrapper = styled9("span")({
+var StyledRightIconWrapper = styled10("span")({
   display: "flex",
   paddingRight: "4px"
 });
-var StyledLabelContainer = styled9("div")({
+var StyledLabelContainer = styled10("div")({
   flex: 1,
   padding: "12px 8px"
 });
-var StyledLabel = styled9("p")(({ theme }) => ({
+var StyledLabel = styled10("p")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   fontSize: theme.tokens.typography.fontSizeLg,
   lineHeight: "20px",
@@ -1888,7 +1921,7 @@ var StyledLabel = styled9("p")(({ theme }) => ({
   margin: 0,
   textDecoration: "none"
 }));
-var StyledCaption = styled9("p")(({ theme }) => ({
+var StyledCaption = styled10("p")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   color: theme.tokens.colors.textSecondary,
   fontSize: theme.tokens.typography.fontSizeLg,
@@ -1899,7 +1932,7 @@ var StyledCaption = styled9("p")(({ theme }) => ({
 }));
 
 // src/components/InternalLinkItem/InternalLinkItem.tsx
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 function InternalLinkItem({
   link,
   icon,
@@ -1908,19 +1941,19 @@ function InternalLinkItem({
   component,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsx15(StyledWrapper, { "data-component-id": "internalLinkItem", children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx14(StyledWrapper, { "data-component-id": "internalLinkItem", children: /* @__PURE__ */ jsxs5(
     StyledListItemContainer,
     {
       component: component ?? "a",
       href: link,
       ...getCleanProps(restProps),
       children: [
-        icon && /* @__PURE__ */ jsx15(StyledLeftIconWrapper, { "data-testid": "icon_container", children: icon }),
+        icon && /* @__PURE__ */ jsx14(StyledLeftIconWrapper, { "data-testid": "icon_container", children: icon }),
         /* @__PURE__ */ jsxs5(StyledLabelContainer, { children: [
-          /* @__PURE__ */ jsx15(StyledLabel, { className: "itemLabel", children: label }),
-          caption && /* @__PURE__ */ jsx15(StyledCaption, { children: caption })
+          /* @__PURE__ */ jsx14(StyledLabel, { className: "itemLabel", children: label }),
+          caption && /* @__PURE__ */ jsx14(StyledCaption, { children: caption })
         ] }),
-        /* @__PURE__ */ jsx15(StyledRightIconWrapper, { className: "iconColor", "data-testid": "icon_action_container", children: /* @__PURE__ */ jsx15(ChevronRightIcon, { fontSize: "small" }) })
+        /* @__PURE__ */ jsx14(StyledRightIconWrapper, { className: "iconColor", "data-testid": "icon_action_container", children: /* @__PURE__ */ jsx14(ChevronRightIcon, { fontSize: "small" }) })
       ]
     }
   ) });
@@ -1934,8 +1967,8 @@ import SvgIcon5 from "@mui/material/SvgIcon";
 
 // src/components/Link/Link.styles.tsx
 import Box3 from "@mui/material/Box";
-import { styled as styled10, alpha as alpha2 } from "@mui/material/styles";
-var StyledScreenReaderOnly = styled10("span")({
+import { styled as styled11, alpha as alpha2 } from "@mui/material/styles";
+var StyledScreenReaderOnly = styled11("span")({
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -1946,7 +1979,7 @@ var StyledScreenReaderOnly = styled10("span")({
   whiteSpace: "nowrap",
   border: 0
 });
-var StyledIconSpan = styled10("span", {
+var StyledIconSpan = styled11("span", {
   shouldForwardProp: (prop) => prop !== "iconRight"
 })(({ iconRight }) => ({
   display: "inline-flex",
@@ -1954,7 +1987,7 @@ var StyledIconSpan = styled10("span", {
   paddingLeft: iconRight ? "4px" : void 0,
   paddingRight: iconRight ? void 0 : "4px"
 }));
-var StyledAnchor = styled10(Box3, {
+var StyledAnchor = styled11(Box3, {
   shouldForwardProp: (prop) => !["tint", "isOnDarkBg", "standalonelink", "iconRight"].includes(prop)
 })(({ theme, tint = "primary", isOnDarkBg, standalonelink, iconRight }) => {
   const resolvedTint = isOnDarkBg ? "white" : tint;
@@ -2013,14 +2046,14 @@ var StyledAnchor = styled10(Box3, {
 });
 
 // src/components/Link/Link.tsx
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var Variant = {
   standard: "standard",
   external: "external",
   file: "file"
 };
 function DocumentIcon() {
-  return /* @__PURE__ */ jsx16(SvgIcon5, { viewBox: "0 0 384 512", fontSize: "inherit", children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(SvgIcon5, { viewBox: "0 0 384 512", fontSize: "inherit", children: /* @__PURE__ */ jsx15(
     "path",
     {
       fillRule: "evenodd",
@@ -2069,9 +2102,9 @@ var Link = React5.forwardRef(function Link2({
       standalonelink: !!standalone,
       ref,
       children: [
-        Icon && /* @__PURE__ */ jsx16(StyledIconSpan, { iconRight, children: /* @__PURE__ */ jsx16(Icon, { fontSize: "inherit" }) }),
+        Icon && /* @__PURE__ */ jsx15(StyledIconSpan, { iconRight, children: /* @__PURE__ */ jsx15(Icon, { fontSize: "inherit" }) }),
         children,
-        variant === Variant.external && /* @__PURE__ */ jsx16(StyledScreenReaderOnly, { children: ", opens in a new tab" })
+        variant === Variant.external && /* @__PURE__ */ jsx15(StyledScreenReaderOnly, { children: ", opens in a new tab" })
       ]
     }
   );
@@ -2083,8 +2116,8 @@ import React6 from "react";
 
 // src/components/LogoLink/LogoLink.styles.tsx
 import Box4 from "@mui/material/Box";
-import { styled as styled11 } from "@mui/material/styles";
-var StyledLogoLink = styled11(Box4, {
+import { styled as styled12 } from "@mui/material/styles";
+var StyledLogoLink = styled12(Box4, {
   shouldForwardProp: (prop) => prop !== "isSmall"
 })(({ theme, isSmall }) => ({
   display: "inline-flex",
@@ -2101,7 +2134,7 @@ var StyledLogoLink = styled11(Box4, {
     color: theme.tokens.colors.primaryDark
   }
 }));
-var StyledLogoSpan = styled11("span")(({ theme }) => ({
+var StyledLogoSpan = styled12("span")(({ theme }) => ({
   padding: "0 10px 0 15px",
   backgroundColor: theme.tokens.colors.primary,
   height: "100%",
@@ -2119,9 +2152,9 @@ var StyledLogoSpan = styled11("span")(({ theme }) => ({
 }));
 
 // src/components/LogoLink/LogoLink.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var LogoLink = React6.forwardRef(function LogoLink2({ children, href = "/", isSmall, title = "Home", component, ...restProps }, ref) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(
     StyledLogoLink,
     {
       component: component ?? "a",
@@ -2131,7 +2164,7 @@ var LogoLink = React6.forwardRef(function LogoLink2({ children, href = "/", isSm
       "data-component-id": "LogoLink",
       ...getCleanProps(restProps),
       ref,
-      children: /* @__PURE__ */ jsx17(StyledLogoSpan, { children })
+      children: /* @__PURE__ */ jsx16(StyledLogoSpan, { children })
     }
   );
 });
@@ -2269,8 +2302,8 @@ var SELECT_ALL_OPTION = {
 };
 
 // src/components/MultiSelect/MultiSelect.styles.tsx
-import { styled as styled12, alpha as alpha3 } from "@mui/material/styles";
-var StyledMultiSelectContainer = styled12("div")(({ theme }) => ({
+import { styled as styled13, alpha as alpha3 } from "@mui/material/styles";
+var StyledMultiSelectContainer = styled13("div")(({ theme }) => ({
   display: "inline-block",
   position: "relative",
   width: "100%",
@@ -2279,7 +2312,7 @@ var StyledMultiSelectContainer = styled12("div")(({ theme }) => ({
   borderRadius: theme.tokens.borderRadius.md,
   fontFamily: theme.tokens.typography.fontFamilyBase
 }));
-var StyledSelectionContainerOutline = styled12("div")(
+var StyledSelectionContainerOutline = styled13("div")(
   ({ theme, isError }) => ({
     border: `1px solid ${isError ? theme.tokens.colors.error : theme.tokens.colors.border}`,
     borderRadius: theme.tokens.borderRadius.md,
@@ -2292,7 +2325,7 @@ var StyledSelectionContainerOutline = styled12("div")(
     zIndex: 0
   })
 );
-var StyledSelectionContainer = styled12("button")(
+var StyledSelectionContainer = styled13("button")(
   ({ theme, isError }) => ({
     display: "inline-flex",
     backgroundColor: theme.palette.background.paper,
@@ -2329,7 +2362,7 @@ var StyledSelectionContainer = styled12("button")(
     }
   })
 );
-var StyledSelectPlaceholder = styled12("span")(({ theme }) => ({
+var StyledSelectPlaceholder = styled13("span")(({ theme }) => ({
   fontSize: theme.tokens.typography.fontSizeLg,
   display: "inline-block",
   flexGrow: 1,
@@ -2337,13 +2370,13 @@ var StyledSelectPlaceholder = styled12("span")(({ theme }) => ({
   border: "none",
   outline: "none"
 }));
-var StyledPopperInner = styled12("div")(({ theme }) => ({
+var StyledPopperInner = styled13("div")(({ theme }) => ({
   width: "100%",
   overflow: "hidden",
   boxSizing: "border-box",
   zIndex: theme.zIndex.tooltip
 }));
-var StyledTransitionContainer = styled12("ul")(({ theme }) => ({
+var StyledTransitionContainer = styled13("ul")(({ theme }) => ({
   "&:focus": {
     outline: "1px solid transparent"
   },
@@ -2361,7 +2394,7 @@ var StyledTransitionContainer = styled12("ul")(({ theme }) => ({
   overflowY: "auto",
   backgroundColor: theme.palette.background.paper
 }));
-var StyledDropdownArrow = styled12("div")(() => ({
+var StyledDropdownArrow = styled13("div")(() => ({
   height: "24px",
   width: "24px",
   "& > svg": {
@@ -2370,7 +2403,7 @@ var StyledDropdownArrow = styled12("div")(() => ({
 }));
 
 // src/components/MultiSelect/MultiSelect.tsx
-import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var MultiSelect = ({
   options: initialOptions,
   placeholder,
@@ -2677,8 +2710,8 @@ var MultiSelect = ({
               "data-multi-select-trigger": true,
               "aria-haspopup": "tree",
               children: [
-                /* @__PURE__ */ jsx18(StyledSelectPlaceholder, { id: `${inputId}-selectPlaceholder`, children: placeholderLabel }),
-                /* @__PURE__ */ jsx18(StyledDropdownArrow, { children: /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx17(StyledSelectPlaceholder, { id: `${inputId}-selectPlaceholder`, children: placeholderLabel }),
+                /* @__PURE__ */ jsx17(StyledDropdownArrow, { children: /* @__PURE__ */ jsx17(
                   KeyboardArrowDownIcon,
                   {
                     sx: {
@@ -2687,11 +2720,11 @@ var MultiSelect = ({
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsx18("input", { name: inputId, type: "hidden", required, "aria-required": required })
+                /* @__PURE__ */ jsx17("input", { name: inputId, type: "hidden", required, "aria-required": required })
               ]
             }
           ),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx17(
             StyledSelectionContainerOutline,
             {
               "data-lose-focus": currentOptionIndex > -1,
@@ -2700,7 +2733,7 @@ var MultiSelect = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx17(
           Popper,
           {
             open,
@@ -2712,7 +2745,7 @@ var MultiSelect = ({
               { name: "preventOverflow", enabled: true },
               { name: "flip", options: { fallbackPlacements: ["bottom", "top", "bottom"] } }
             ],
-            children: /* @__PURE__ */ jsx18(StyledPopperInner, { children: /* @__PURE__ */ jsx18(Collapse, { in: open, timeout: TRANSITION_TIMEOUT, children: /* @__PURE__ */ jsxs7(
+            children: /* @__PURE__ */ jsx17(StyledPopperInner, { children: /* @__PURE__ */ jsx17(Collapse, { in: open, timeout: TRANSITION_TIMEOUT, children: /* @__PURE__ */ jsxs7(
               StyledTransitionContainer,
               {
                 role: "tree",
@@ -2743,8 +2776,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 jsx18 } 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__ */ jsx18(Box5, { sx: { display: "flex", gap: 1.5, justifyContent: "space-between", mb: 2.5 }, children: digits.map((digit, i) => /* @__PURE__ */ jsx18(
+    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";
@@ -2905,13 +3000,13 @@ function setA11yMessage(messageText, messageTone, messageRole, clearAfter = 5e3)
 }
 
 // src/components/PageSpinner/PageSpinner.styles.tsx
-import { styled as styled13 } from "@mui/material/styles";
+import { styled as styled14 } from "@mui/material/styles";
 import { alpha as alpha4 } from "@mui/material/styles";
 var PAGE_SPINNER_Z_INDEX = 1400;
-var StyledPageSpinnerRoot = styled13("div")(() => ({
+var StyledPageSpinnerRoot = styled14("div")(() => ({
   position: "relative"
 }));
-var StyledOverlay = styled13("div", {
+var StyledOverlay = styled14("div", {
   shouldForwardProp: (prop) => prop !== "$darkBg"
 })(({ theme, $darkBg = false }) => ({
   position: "fixed",
@@ -2919,7 +3014,7 @@ var StyledOverlay = styled13("div", {
   zIndex: PAGE_SPINNER_Z_INDEX,
   backgroundColor: $darkBg ? alpha4(theme.tokens.colors.textPrimary, 0.9) : alpha4(theme.palette.common.white, 0.9)
 }));
-var StyledSpinnerCentre = styled13("div")(() => ({
+var StyledSpinnerCentre = styled14("div")(() => ({
   position: "fixed",
   top: "50%",
   left: "50%",
@@ -2930,7 +3025,7 @@ var StyledSpinnerCentre = styled13("div")(() => ({
   alignItems: "center",
   gap: "16px"
 }));
-var StyledSpinnerMessage = styled13("p", {
+var StyledSpinnerMessage = styled14("p", {
   shouldForwardProp: (prop) => prop !== "$darkBg"
 })(({ theme, $darkBg = false }) => ({
   margin: 0,
@@ -2941,7 +3036,7 @@ var StyledSpinnerMessage = styled13("p", {
   color: $darkBg ? theme.palette.common.white : theme.tokens.colors.textPrimary,
   textAlign: "center"
 }));
-var StyledScreenReaderOnly2 = styled13("span")(() => ({
+var StyledScreenReaderOnly2 = styled14("span")(() => ({
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -2966,7 +3061,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();
@@ -3021,7 +3116,7 @@ import React9 from "react";
 import MuiPagination from "@mui/material/Pagination";
 
 // src/components/Pagination/Pagination.styles.tsx
-import { styled as styled14, alpha as alpha5 } from "@mui/material/styles";
+import { styled as styled15, alpha as alpha5 } from "@mui/material/styles";
 import MuiPaginationItem from "@mui/material/PaginationItem";
 function getColorValue(theme, color) {
   switch (color) {
@@ -3041,7 +3136,7 @@ function getColorValue(theme, color) {
       return theme.tokens.colors.textPrimary;
   }
 }
-var StyledPaginationItem = styled14(MuiPaginationItem, {
+var StyledPaginationItem = styled15(MuiPaginationItem, {
   shouldForwardProp: (prop) => prop !== "$variant" && prop !== "$color"
 })(({ theme, $variant, $color }) => {
   const colorValue = getColorValue(theme, $color);
@@ -3112,8 +3207,8 @@ Pagination.displayName = "ToolkitPagination";
 import React10 from "react";
 
 // src/components/Paragraph/Paragraph.styles.tsx
-import { styled as styled15 } from "@mui/material/styles";
-var StyledParagraph = styled15("p", {
+import { styled as styled16 } from "@mui/material/styles";
+var StyledParagraph = styled16("p", {
   shouldForwardProp: (prop) => prop !== "$variant" && prop !== "$isOnDarkBg"
 })(({ theme, $variant = "regular", $isOnDarkBg = false }) => ({
   margin: 0,
@@ -3172,8 +3267,8 @@ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import CancelIcon from "@mui/icons-material/Cancel";
 
 // src/components/Password/PasswordRule.styles.tsx
-import { styled as styled16 } from "@mui/material/styles";
-var StyledPasswordRule = styled16("div")(({ theme }) => ({
+import { styled as styled17 } from "@mui/material/styles";
+var StyledPasswordRule = styled17("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.tokens.spacing.xs,
@@ -3185,15 +3280,15 @@ var StyledPasswordRule = styled16("div")(({ theme }) => ({
     color: theme.tokens.colors.error
   }
 }));
-var StyledPasswordRuleIcon = styled16("span")({
+var StyledPasswordRuleIcon = styled17("span")({
   display: "inline-flex",
   alignItems: "center",
   flexShrink: 0
 });
-var StyledPasswordRuleText = styled16("span")(({ theme }) => ({
+var StyledPasswordRuleText = styled17("span")(({ theme }) => ({
   fontSize: theme.tokens.typography.fontSizeSm
 }));
-var StyledScreenReaderOnly3 = styled16("span")({
+var StyledScreenReaderOnly3 = styled17("span")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -3222,8 +3317,8 @@ var PasswordRule = ({ valid = false, rule = "", idx }) => /* @__PURE__ */ jsxs9(
 PasswordRule.displayName = "ToolkitPasswordRule";
 
 // src/components/Password/PasswordCriteria.styles.tsx
-import { styled as styled17 } from "@mui/material/styles";
-var StyledPasswordCriteriaContainer = styled17("div")(
+import { styled as styled18 } from "@mui/material/styles";
+var StyledPasswordCriteriaContainer = styled18("div")(
   ({ theme, $show }) => ({
     display: $show ? "block" : "none",
     position: "absolute",
@@ -3234,7 +3329,7 @@ var StyledPasswordCriteriaContainer = styled17("div")(
     marginTop: theme.tokens.spacing.xs
   })
 );
-var StyledPasswordRuleTitle = styled17("div")(({ theme }) => ({
+var StyledPasswordRuleTitle = styled18("div")(({ theme }) => ({
   color: theme.tokens.colors.textPrimary,
   fontSize: theme.tokens.typography.fontSizeSm,
   fontWeight: theme.tokens.typography.fontWeightMedium,
@@ -3280,11 +3375,11 @@ var PasswordCriteria = ({ show = false, value = "", id = "passwordCriteria" }) =
 PasswordCriteria.displayName = "ToolkitPasswordCriteria";
 
 // src/components/Password/Password.styles.tsx
-import { styled as styled18 } from "@mui/material/styles";
-var StyledPasswordRoot = styled18("div")({
+import { styled as styled19 } from "@mui/material/styles";
+var StyledPasswordRoot = styled19("div")({
   position: "relative"
 });
-var StyledPasswordInputWrapper = styled18("div")({
+var StyledPasswordInputWrapper = styled19("div")({
   display: "flex",
   position: "relative"
 });
@@ -3352,7 +3447,7 @@ Password.displayName = "ToolkitPassword";
 import React12 from "react";
 
 // src/components/Spinner/Spinner.styles.tsx
-import { styled as styled19, alpha as alpha6 } from "@mui/material/styles";
+import { styled as styled20, alpha as alpha6 } from "@mui/material/styles";
 var spinnerSizing = {
   xs: 20,
   sm: 24,
@@ -3360,7 +3455,7 @@ var spinnerSizing = {
   lg: 56,
   xl: 72
 };
-var StyledSpinnerContainer = styled19("div", {
+var StyledSpinnerContainer = styled20("div", {
   shouldForwardProp: (prop) => prop !== "$inline"
 })({}, ({ $inline }) => ({
   flex: "0 1 100%",
@@ -3368,7 +3463,7 @@ var StyledSpinnerContainer = styled19("div", {
   flexDirection: $inline ? "row" : "column",
   alignItems: "center"
 }));
-var StyledSpinnerIconContainer = styled19("div", {
+var StyledSpinnerIconContainer = styled20("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ $size }) => {
   const size = spinnerSizing[$size];
@@ -3378,7 +3473,7 @@ var StyledSpinnerIconContainer = styled19("div", {
     height: size
   };
 });
-var StyledSpinnerBackground = styled19("div", {
+var StyledSpinnerBackground = styled20("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ theme, $size, $darkBg }) => {
   const size = spinnerSizing[$size];
@@ -3392,7 +3487,7 @@ var StyledSpinnerBackground = styled19("div", {
     border: `${lineWidth}px solid ${borderColor}`
   };
 });
-var StyledSpinner = styled19("div", {
+var StyledSpinner = styled20("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ theme, $size, $darkBg }) => {
   const size = spinnerSizing[$size];
@@ -3415,7 +3510,7 @@ var StyledSpinner = styled19("div", {
     animation: `toolkit-spin ${animationSpeed} infinite linear`
   };
 });
-var StyledSpinnerMessage2 = styled19("span", {
+var StyledSpinnerMessage2 = styled20("span", {
   shouldForwardProp: (prop) => prop !== "$darkBg" && prop !== "$inline"
 })(({ theme, $darkBg, $inline }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
@@ -3424,7 +3519,7 @@ var StyledSpinnerMessage2 = styled19("span", {
   marginTop: $inline ? 0 : theme.spacing(1),
   marginLeft: $inline ? theme.spacing(1) : 0
 }));
-var StyledScreenReaderOnly4 = styled19("span")({
+var StyledScreenReaderOnly4 = styled20("span")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -3465,14 +3560,14 @@ Spinner.displayName = "ToolkitSpinner";
 import FormHelperText from "@mui/material/FormHelperText";
 
 // src/components/Toggle/Toggle.styles.tsx
-import { styled as styled20 } from "@mui/material/styles";
-var StyledFieldset = styled20("fieldset")(({ theme }) => ({
+import { styled as styled21 } from "@mui/material/styles";
+var StyledFieldset = styled21("fieldset")(({ theme }) => ({
   border: "none",
   margin: 0,
   padding: 0,
   minWidth: 0
 }));
-var StyledLegend = styled20("legend")(({ theme }) => ({
+var StyledLegend = styled21("legend")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   fontSize: theme.tokens.typography.fontSizeLg,
   fontWeight: theme.tokens.typography.fontWeightRegular,
@@ -3480,7 +3575,7 @@ var StyledLegend = styled20("legend")(({ theme }) => ({
   marginBottom: theme.spacing(1),
   padding: 0
 }));
-var StyledToggleWrapper = styled20("div")(({ theme }) => ({
+var StyledToggleWrapper = styled21("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   width: theme.spacing(15),
@@ -3489,7 +3584,7 @@ var StyledToggleWrapper = styled20("div")(({ theme }) => ({
   border: `1px solid ${theme.tokens.colors.border}`,
   borderRadius: theme.tokens.borderRadius.md
 }));
-var StyledSwitch = styled20("label", {
+var StyledSwitch = styled21("label", {
   shouldForwardProp: (prop) => prop !== "selected" && prop !== "controlType"
 })(({ theme, selected, controlType }) => ({
   position: "relative",
@@ -3660,12 +3755,12 @@ import {
   TablePagination as MuiTablePagination,
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { styled as styled21 } from "@mui/material/styles";
+import { styled as styled22 } from "@mui/material/styles";
 import { jsx as jsx27 } from "react/jsx-runtime";
-var StyledTableContainer = styled21(MuiTableContainer)(() => ({
+var StyledTableContainer = styled22(MuiTableContainer)(() => ({
   overflowX: "auto"
 }));
-var StyledHeadCell = styled21(MuiTableCell)(({ theme }) => ({
+var StyledHeadCell = styled22(MuiTableCell)(({ theme }) => ({
   fontWeight: theme.tokens.components.table.headerFontWeight,
   backgroundColor: theme.tokens.components.table.headerBackground,
   borderBottomWidth: theme.tokens.components.table.borderWidth,
@@ -3889,6 +3984,7 @@ export {
   MobileDateTimePicker,
   MobileTimePicker,
   MultiSelect,
+  OtpInput,
   Overline,
   PageSpinner,
   Pagination,