@octoguide/mui-ui-toolkit 0.7.4 → 0.7.6

package/dist/index.mjs

@@ -1256,11 +1256,77 @@ function Button({ loading, disabled, children, ...props }) {
 }
 Button.displayName = "ToolkitButton";
 
+// src/components/ConfirmDialog/ConfirmDialog.tsx
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import MuiButton2 from "@mui/material/Button";
+
+// src/components/ConfirmDialog/ConfirmDialog.styles.tsx
+import { styled as styled3 } from "@mui/material/styles";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContentText from "@mui/material/DialogContentText";
+var StyledDialogTitle = styled3(DialogTitle, {
+  shouldForwardProp: (prop) => prop !== "$darkBg"
+})(({ theme, $darkBg }) => ({
+  color: $darkBg ? theme.palette.common.white : theme.tokens.colors.textPrimary
+}));
+var StyledDialogContentText = styled3(DialogContentText, {
+  shouldForwardProp: (prop) => prop !== "$darkBg"
+})(({ theme, $darkBg }) => ({
+  color: $darkBg ? theme.palette.common.white : theme.tokens.colors.textSecondary
+}));
+
+// src/components/ConfirmDialog/ConfirmDialog.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  severity,
+  loading = false,
+  onConfirm,
+  onClose,
+  isOnDarkBg = false
+}) {
+  const confirmColor = severity === "danger" ? "error" : severity === "warning" ? "warning" : "primary";
+  return /* @__PURE__ */ jsxs2(
+    Dialog,
+    {
+      open,
+      onClose: loading ? void 0 : onClose,
+      "data-component-id": "ConfirmDialog",
+      maxWidth: "xs",
+      fullWidth: true,
+      children: [
+        /* @__PURE__ */ jsx5(StyledDialogTitle, { $darkBg: isOnDarkBg, children: title }),
+        description && /* @__PURE__ */ jsx5(DialogContent, { children: /* @__PURE__ */ jsx5(StyledDialogContentText, { $darkBg: isOnDarkBg, children: description }) }),
+        /* @__PURE__ */ jsxs2(DialogActions, { sx: { px: 3, pb: 2, gap: 1 }, children: [
+          /* @__PURE__ */ jsx5(MuiButton2, { variant: "text", onClick: onClose, disabled: loading, children: cancelLabel }),
+          /* @__PURE__ */ jsx5(
+            Button,
+            {
+              variant: "contained",
+              color: confirmColor,
+              loading,
+              onClick: onConfirm,
+              children: confirmLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+ConfirmDialog.displayName = "ToolkitConfirmDialog";
+
 // src/components/Chip/Chip.tsx
 import { Chip as MuiChip, SvgIcon as SvgIcon2 } from "@mui/material";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function CircleXIcon(props) {
-  return /* @__PURE__ */ jsx5(SvgIcon2, { ...props, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(SvgIcon2, { ...props, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
     "path",
     {
       fill: "currentColor",
@@ -1271,12 +1337,12 @@ function CircleXIcon(props) {
   ) });
 }
 function Chip({ deleteIcon, onDelete, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     MuiChip,
     {
       ...props,
       onDelete,
-      deleteIcon: onDelete ? deleteIcon ?? /* @__PURE__ */ jsx5(CircleXIcon, {}) : void 0
+      deleteIcon: onDelete ? deleteIcon ?? /* @__PURE__ */ jsx6(CircleXIcon, {}) : void 0
     }
   );
 }
@@ -1289,9 +1355,9 @@ import {
   CardHeader as MuiCardHeader,
   CardActions as MuiCardActions
 } from "@mui/material";
-import { styled as styled3 } from "@mui/material/styles";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var StyledCard = styled3(MuiCard, {
+import { styled as styled4 } from "@mui/material/styles";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var StyledCard = styled4(MuiCard, {
   shouldForwardProp: (prop) => prop !== "compact"
 })(({ theme, compact }) => ({
   padding: compact ? theme.tokens.components.card.paddingCompact : theme.tokens.components.card.padding,
@@ -1306,7 +1372,7 @@ var StyledCard = styled3(MuiCard, {
   }
 }));
 function Card({ compact, children, ...props }) {
-  return /* @__PURE__ */ jsx6(StyledCard, { compact, ...props, children });
+  return /* @__PURE__ */ jsx7(StyledCard, { compact, ...props, children });
 }
 var CardContent = MuiCardContent;
 var CardHeader = MuiCardHeader;
@@ -1319,11 +1385,11 @@ import {
   AlertTitle as MuiAlertTitle,
   SvgIcon as SvgIcon3
 } from "@mui/material";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var InfoIcon = /* @__PURE__ */ jsx7(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-10 5.75a.75.75 0 0 0 .75-.75v-6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75M12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2", clipRule: "evenodd" }) });
-var SuccessIcon = /* @__PURE__ */ jsx7(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-5.97-3.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0", clipRule: "evenodd" }) });
-var WarningIcon = /* @__PURE__ */ jsx7(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.312 10.762C8.23 5.587 9.689 3 12 3c2.31 0 3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022zM12 7.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2", clipRule: "evenodd" }) });
-var ErrorIcon = /* @__PURE__ */ jsx7(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { fill: "currentColor", fillRule: "evenodd", d: "M7.843 3.802C9.872 2.601 10.886 2 12 2c1.114 0 2.128.6 4.157 1.802l.686.406c2.029 1.202 3.043 1.803 3.6 2.792c.557.99.557 2.19.557 4.594v.812c0 2.403 0 3.605-.557 4.594c-.557.99-1.571 1.59-3.6 2.791l-.686.407C14.128 21.399 13.114 22 12 22c-1.114 0-2.128-.6-4.157-1.802l-.686-.407c-2.029-1.2-3.043-1.802-3.6-2.791C3 16.01 3 14.81 3 12.406v-.812C3 9.19 3 7.989 3.557 7c.557-.99 1.571-1.59 3.6-2.792zM13 16a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-1-9.75a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75", clipRule: "evenodd" }) });
+import { jsx as jsx8 } from "react/jsx-runtime";
+var InfoIcon = /* @__PURE__ */ jsx8(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-10 5.75a.75.75 0 0 0 .75-.75v-6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75M12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2", clipRule: "evenodd" }) });
+var SuccessIcon = /* @__PURE__ */ jsx8(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-5.97-3.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0", clipRule: "evenodd" }) });
+var WarningIcon = /* @__PURE__ */ jsx8(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.312 10.762C8.23 5.587 9.689 3 12 3c2.31 0 3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022zM12 7.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2", clipRule: "evenodd" }) });
+var ErrorIcon = /* @__PURE__ */ jsx8(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { fill: "currentColor", fillRule: "evenodd", d: "M7.843 3.802C9.872 2.601 10.886 2 12 2c1.114 0 2.128.6 4.157 1.802l.686.406c2.029 1.202 3.043 1.803 3.6 2.792c.557.99.557 2.19.557 4.594v.812c0 2.403 0 3.605-.557 4.594c-.557.99-1.571 1.59-3.6 2.791l-.686.407C14.128 21.399 13.114 22 12 22c-1.114 0-2.128-.6-4.157-1.802l-.686-.407c-2.029-1.2-3.043-1.802-3.6-2.791C3 16.01 3 14.81 3 12.406v-.812C3 9.19 3 7.989 3.557 7c.557-.99 1.571-1.59 3.6-2.792zM13 16a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-1-9.75a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75", clipRule: "evenodd" }) });
 var defaultIconMapping = {
   info: InfoIcon,
   success: SuccessIcon,
@@ -1331,10 +1397,10 @@ var defaultIconMapping = {
   error: ErrorIcon
 };
 function Alert({ iconMapping, ...props }) {
-  return /* @__PURE__ */ jsx7(MuiAlert, { iconMapping: { ...defaultIconMapping, ...iconMapping }, ...props });
+  return /* @__PURE__ */ jsx8(MuiAlert, { iconMapping: { ...defaultIconMapping, ...iconMapping }, ...props });
 }
 function AlertTitle(props) {
-  return /* @__PURE__ */ jsx7(MuiAlertTitle, { ...props });
+  return /* @__PURE__ */ jsx8(MuiAlertTitle, { ...props });
 }
 Alert.displayName = "ToolkitAlert";
 AlertTitle.displayName = "ToolkitAlertTitle";
@@ -1345,10 +1411,10 @@ import {
   AccordionSummary as MuiAccordionSummary,
   AccordionDetails as MuiAccordionDetails
 } from "@mui/material";
-import { styled as styled4 } from "@mui/material/styles";
+import { styled as styled5 } from "@mui/material/styles";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var StandaloneAccordion = styled4(MuiAccordion)(({ theme }) => ({
+import { jsx as jsx9 } from "react/jsx-runtime";
+var StandaloneAccordion = styled5(MuiAccordion)(({ theme }) => ({
   borderRadius: `${theme.tokens.components.accordion.standaloneRadius} !important`,
   backgroundColor: theme.tokens.components.accordion.standaloneBackground,
   boxShadow: "none",
@@ -1365,13 +1431,13 @@ var StandaloneAccordion = styled4(MuiAccordion)(({ theme }) => ({
   }
 }));
 function Accordion(props) {
-  return /* @__PURE__ */ jsx8(MuiAccordion, { ...props });
+  return /* @__PURE__ */ jsx9(MuiAccordion, { ...props });
 }
 function AccordionSummary({ expandIcon, ...props }) {
-  return /* @__PURE__ */ jsx8(MuiAccordionSummary, { expandIcon: expandIcon ?? /* @__PURE__ */ jsx8(ExpandMoreIcon, {}), ...props });
+  return /* @__PURE__ */ jsx9(MuiAccordionSummary, { expandIcon: expandIcon ?? /* @__PURE__ */ jsx9(ExpandMoreIcon, {}), ...props });
 }
 function AccordionDetails(props) {
-  return /* @__PURE__ */ jsx8(MuiAccordionDetails, { ...props });
+  return /* @__PURE__ */ jsx9(MuiAccordionDetails, { ...props });
 }
 Accordion.displayName = "ToolkitAccordion";
 AccordionSummary.displayName = "ToolkitAccordionSummary";
@@ -1380,9 +1446,9 @@ StandaloneAccordion.displayName = "ToolkitStandaloneAccordion";
 
 // src/components/Avatar/Avatar.tsx
 import MuiAvatar from "@mui/material/Avatar";
-import { styled as styled5 } from "@mui/material/styles";
+import { styled as styled6 } from "@mui/material/styles";
 import { default as default2 } from "@mui/material/AvatarGroup";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function getDimension(avatar, size) {
   const map = {
     xs: avatar.sizeXs,
@@ -1394,7 +1460,7 @@ function getDimension(avatar, size) {
   };
   return map[size];
 }
-var StyledAvatar = styled5(MuiAvatar, {
+var StyledAvatar = styled6(MuiAvatar, {
   shouldForwardProp: (prop) => prop !== "size"
 })(({ theme, size = "md" }) => {
   const dimension = getDimension(theme.tokens.components.avatar, size);
@@ -1404,7 +1470,7 @@ var StyledAvatar = styled5(MuiAvatar, {
   };
 });
 function Avatar({ size = "md", ...props }) {
-  return /* @__PURE__ */ jsx9(StyledAvatar, { size, ...props });
+  return /* @__PURE__ */ jsx10(StyledAvatar, { size, ...props });
 }
 
 // src/components/ToggleButton/ToggleButton.tsx
@@ -1412,13 +1478,13 @@ import {
   ToggleButton as MuiToggleButton,
   ToggleButtonGroup as MuiToggleButtonGroup
 } from "@mui/material";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function ToggleButton(props) {
-  return /* @__PURE__ */ jsx10(MuiToggleButton, { ...props });
+  return /* @__PURE__ */ jsx11(MuiToggleButton, { ...props });
 }
 ToggleButton.displayName = "ToolkitToggleButton";
 function ToggleButtonGroup(props) {
-  return /* @__PURE__ */ jsx10(MuiToggleButtonGroup, { ...props });
+  return /* @__PURE__ */ jsx11(MuiToggleButtonGroup, { ...props });
 }
 ToggleButtonGroup.displayName = "ToolkitToggleButtonGroup";
 
@@ -1474,83 +1540,83 @@ import {
 import {
   DateCalendar as MuiDateCalendar
 } from "@mui/x-date-pickers/DateCalendar";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogActions from "@mui/material/DialogActions";
+import Dialog2 from "@mui/material/Dialog";
+import DialogContent2 from "@mui/material/DialogContent";
+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 styled6 } from "@mui/material/styles";
-import { Fragment, jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+import { styled as styled7 } from "@mui/material/styles";
+import { Fragment, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
 function DateLocalizationProvider({ children }) {
-  return /* @__PURE__ */ jsx11(LocalizationProvider, { dateAdapter: AdapterDayjs, children });
+  return /* @__PURE__ */ jsx12(LocalizationProvider, { dateAdapter: AdapterDayjs, children });
 }
 DateLocalizationProvider.displayName = "ToolkitDateLocalizationProvider";
 function DatePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiDatePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiDatePicker, { ...props });
 }
 DatePicker.displayName = "ToolkitDatePicker";
 function DesktopDatePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiDesktopDatePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiDesktopDatePicker, { ...props });
 }
 DesktopDatePicker.displayName = "ToolkitDesktopDatePicker";
 function MobileDatePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiMobileDatePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiMobileDatePicker, { ...props });
 }
 MobileDatePicker.displayName = "ToolkitMobileDatePicker";
 function DateField(props) {
-  return /* @__PURE__ */ jsx11(MuiDateField, { ...props });
+  return /* @__PURE__ */ jsx12(MuiDateField, { ...props });
 }
 DateField.displayName = "ToolkitDateField";
 function StaticDatePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiStaticDatePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiStaticDatePicker, { ...props });
 }
 StaticDatePicker.displayName = "ToolkitStaticDatePicker";
 function TimePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiTimePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiTimePicker, { ...props });
 }
 TimePicker.displayName = "ToolkitTimePicker";
 function DesktopTimePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiDesktopTimePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiDesktopTimePicker, { ...props });
 }
 DesktopTimePicker.displayName = "ToolkitDesktopTimePicker";
 function MobileTimePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiMobileTimePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiMobileTimePicker, { ...props });
 }
 MobileTimePicker.displayName = "ToolkitMobileTimePicker";
 function TimeField(props) {
-  return /* @__PURE__ */ jsx11(MuiTimeField, { ...props });
+  return /* @__PURE__ */ jsx12(MuiTimeField, { ...props });
 }
 TimeField.displayName = "ToolkitTimeField";
 function StaticTimePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiStaticTimePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiStaticTimePicker, { ...props });
 }
 StaticTimePicker.displayName = "ToolkitStaticTimePicker";
 function DateTimePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiDateTimePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiDateTimePicker, { ...props });
 }
 DateTimePicker.displayName = "ToolkitDateTimePicker";
 function DesktopDateTimePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiDesktopDateTimePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiDesktopDateTimePicker, { ...props });
 }
 DesktopDateTimePicker.displayName = "ToolkitDesktopDateTimePicker";
 function MobileDateTimePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiMobileDateTimePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiMobileDateTimePicker, { ...props });
 }
 MobileDateTimePicker.displayName = "ToolkitMobileDateTimePicker";
 function DateTimeField(props) {
-  return /* @__PURE__ */ jsx11(MuiDateTimeField, { ...props });
+  return /* @__PURE__ */ jsx12(MuiDateTimeField, { ...props });
 }
 DateTimeField.displayName = "ToolkitDateTimeField";
 function StaticDateTimePicker(props) {
-  return /* @__PURE__ */ jsx11(MuiStaticDateTimePicker, { ...props });
+  return /* @__PURE__ */ jsx12(MuiStaticDateTimePicker, { ...props });
 }
 StaticDateTimePicker.displayName = "ToolkitStaticDateTimePicker";
 function DateCalendar(props) {
-  return /* @__PURE__ */ jsx11(MuiDateCalendar, { ...props });
+  return /* @__PURE__ */ jsx12(MuiDateCalendar, { ...props });
 }
 DateCalendar.displayName = "ToolkitDateCalendar";
-var RangeRow = styled6(Box)(({ theme }) => ({
+var RangeRow = styled7(Box)(({ theme }) => ({
   display: "flex",
   gap: theme.spacing(2),
   alignItems: "center"
@@ -1573,11 +1639,11 @@ function DateRangePickerInput({
     onChange(draft);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx11(Button2, { variant: "contained", color: "inherit", disableElevation: true, onClick: handleOpen, children: buttonLabel }),
-    /* @__PURE__ */ jsxs2(Dialog, { open, onClose: handleCancel, maxWidth: "sm", fullWidth: true, children: [
-      /* @__PURE__ */ jsx11(DialogContent, { children: /* @__PURE__ */ jsxs2(RangeRow, { children: [
-        /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx12(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(
           MuiDatePicker,
           {
             label: startLabel,
@@ -1586,7 +1652,7 @@ function DateRangePickerInput({
             slotProps: { textField: { fullWidth: true } }
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           MuiDatePicker,
           {
             label: endLabel,
@@ -1596,9 +1662,9 @@ function DateRangePickerInput({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs2(DialogActions, { children: [
-        /* @__PURE__ */ jsx11(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
-        /* @__PURE__ */ jsx11(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
+      /* @__PURE__ */ jsxs3(DialogActions2, { children: [
+        /* @__PURE__ */ jsx12(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
+        /* @__PURE__ */ jsx12(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
       ] })
     ] })
   ] });
@@ -1630,11 +1696,11 @@ function DateRangePickerCalendar({
       setDraft((prev) => ({ ...prev, end: date }));
     }
   };
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx11(Button2, { variant: "contained", color: "inherit", disableElevation: true, onClick: handleOpen, children: buttonLabel }),
-    /* @__PURE__ */ jsxs2(Dialog, { open, onClose: handleCancel, children: [
-      /* @__PURE__ */ jsxs2(DialogContent, { sx: { p: 1 }, children: [
-        /* @__PURE__ */ jsx11(Box, { sx: { mb: 1, px: 1 }, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx12(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(
           TextField3,
           {
             size: "small",
@@ -1644,7 +1710,7 @@ function DateRangePickerCalendar({
             fullWidth: true
           }
         ) }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           MuiDateCalendar,
           {
             value: selecting === "start" ? draft.start : draft.end,
@@ -1652,9 +1718,9 @@ function DateRangePickerCalendar({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs2(DialogActions, { children: [
-        /* @__PURE__ */ jsx11(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
-        /* @__PURE__ */ jsx11(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
+      /* @__PURE__ */ jsxs3(DialogActions2, { children: [
+        /* @__PURE__ */ jsx12(Button2, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
+        /* @__PURE__ */ jsx12(Button2, { onClick: handleOk, color: "inherit", children: "OK" })
       ] })
     ] })
   ] });
@@ -1663,9 +1729,9 @@ DateRangePickerCalendar.displayName = "ToolkitDateRangePickerCalendar";
 
 // src/foundation/Grid/Grid.tsx
 import { Grid2 as MuiGrid2 } from "@mui/material";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Grid({ container, spacing, ...props }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     MuiGrid2,
     {
       container,
@@ -1680,9 +1746,9 @@ Grid.displayName = "ToolkitGrid";
 import React4 from "react";
 
 // src/components/IconText/IconText.styles.tsx
-import { styled as styled7 } from "@mui/material/styles";
+import { styled as styled8 } from "@mui/material/styles";
 import { SvgIcon as SvgIcon4 } from "@mui/material";
-var StyledIconTextRoot = styled7("div")(
+var StyledIconTextRoot = styled8("div")(
   ({ $inheritFontFamily }) => ({
     display: "flex",
     alignItems: "center",
@@ -1698,7 +1764,7 @@ var StyledIconTextRoot = styled7("div")(
     }
   })
 );
-var StyledIconTextSymbol = styled7(SvgIcon4, {
+var StyledIconTextSymbol = styled8(SvgIcon4, {
   shouldForwardProp: (prop) => prop !== "$position"
 })(({ theme, $position }) => ({
   flexShrink: 0,
@@ -1707,7 +1773,7 @@ var StyledIconTextSymbol = styled7(SvgIcon4, {
 }));
 
 // src/components/IconText/IconText.tsx
-import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var IconText = React4.forwardRef(
   function IconText2({
     symbol,
@@ -1717,17 +1783,17 @@ var IconText = React4.forwardRef(
     children,
     ...rest
   }, ref) {
-    const icon = /* @__PURE__ */ jsx13(
+    const icon = /* @__PURE__ */ jsx14(
       StyledIconTextSymbol,
       {
         $position: symbolPosition,
         viewBox: symbol.viewBox ?? "0 0 24 24",
         "aria-hidden": "true",
         ...symbolProps,
-        children: symbol.content && /* @__PURE__ */ jsx13("g", { dangerouslySetInnerHTML: { __html: symbol.content } })
+        children: symbol.content && /* @__PURE__ */ jsx14("g", { dangerouslySetInnerHTML: { __html: symbol.content } })
       }
     );
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       StyledIconTextRoot,
       {
         ref,
@@ -1749,8 +1815,8 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 // src/components/InternalLinkItem/InternalLinkItem.styles.tsx
 import Box2 from "@mui/material/Box";
-import { styled as styled8 } from "@mui/material/styles";
-var StyledWrapper = styled8("div")(({ theme }) => ({
+import { styled as styled9 } from "@mui/material/styles";
+var StyledWrapper = styled9("div")(({ theme }) => ({
   "& > a, & > div": {
     textDecoration: "none",
     color: theme.tokens.colors.textPrimary,
@@ -1759,7 +1825,7 @@ var StyledWrapper = styled8("div")(({ theme }) => ({
     }
   }
 }));
-var StyledListItemContainer = styled8(Box2)(({ theme }) => ({
+var StyledListItemContainer = styled9(Box2)(({ theme }) => ({
   width: "100%",
   minHeight: "66px",
   borderTop: `1px solid ${theme.tokens.colors.divider}`,
@@ -1802,19 +1868,19 @@ var StyledListItemContainer = styled8(Box2)(({ theme }) => ({
     outlineStyle: "solid"
   }
 }));
-var StyledLeftIconWrapper = styled8("span")({
+var StyledLeftIconWrapper = styled9("span")({
   display: "flex",
   paddingLeft: "4px"
 });
-var StyledRightIconWrapper = styled8("span")({
+var StyledRightIconWrapper = styled9("span")({
   display: "flex",
   paddingRight: "4px"
 });
-var StyledLabelContainer = styled8("div")({
+var StyledLabelContainer = styled9("div")({
   flex: 1,
   padding: "12px 8px"
 });
-var StyledLabel = styled8("p")(({ theme }) => ({
+var StyledLabel = styled9("p")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   fontSize: theme.tokens.typography.fontSizeLg,
   lineHeight: "20px",
@@ -1822,7 +1888,7 @@ var StyledLabel = styled8("p")(({ theme }) => ({
   margin: 0,
   textDecoration: "none"
 }));
-var StyledCaption = styled8("p")(({ theme }) => ({
+var StyledCaption = styled9("p")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   color: theme.tokens.colors.textSecondary,
   fontSize: theme.tokens.typography.fontSizeLg,
@@ -1833,7 +1899,7 @@ var StyledCaption = styled8("p")(({ theme }) => ({
 }));
 
 // src/components/InternalLinkItem/InternalLinkItem.tsx
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 function InternalLinkItem({
   link,
   icon,
@@ -1842,19 +1908,19 @@ function InternalLinkItem({
   component,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsx14(StyledWrapper, { "data-component-id": "internalLinkItem", children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx15(StyledWrapper, { "data-component-id": "internalLinkItem", children: /* @__PURE__ */ jsxs5(
     StyledListItemContainer,
     {
       component: component ?? "a",
       href: link,
       ...getCleanProps(restProps),
       children: [
-        icon && /* @__PURE__ */ jsx14(StyledLeftIconWrapper, { "data-testid": "icon_container", children: icon }),
-        /* @__PURE__ */ jsxs4(StyledLabelContainer, { children: [
-          /* @__PURE__ */ jsx14(StyledLabel, { className: "itemLabel", children: label }),
-          caption && /* @__PURE__ */ jsx14(StyledCaption, { children: caption })
+        icon && /* @__PURE__ */ jsx15(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(StyledRightIconWrapper, { className: "iconColor", "data-testid": "icon_action_container", children: /* @__PURE__ */ jsx14(ChevronRightIcon, { fontSize: "small" }) })
+        /* @__PURE__ */ jsx15(StyledRightIconWrapper, { className: "iconColor", "data-testid": "icon_action_container", children: /* @__PURE__ */ jsx15(ChevronRightIcon, { fontSize: "small" }) })
       ]
     }
   ) });
@@ -1868,8 +1934,8 @@ import SvgIcon5 from "@mui/material/SvgIcon";
 
 // src/components/Link/Link.styles.tsx
 import Box3 from "@mui/material/Box";
-import { styled as styled9, alpha as alpha2 } from "@mui/material/styles";
-var StyledScreenReaderOnly = styled9("span")({
+import { styled as styled10, alpha as alpha2 } from "@mui/material/styles";
+var StyledScreenReaderOnly = styled10("span")({
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -1880,7 +1946,7 @@ var StyledScreenReaderOnly = styled9("span")({
   whiteSpace: "nowrap",
   border: 0
 });
-var StyledIconSpan = styled9("span", {
+var StyledIconSpan = styled10("span", {
   shouldForwardProp: (prop) => prop !== "iconRight"
 })(({ iconRight }) => ({
   display: "inline-flex",
@@ -1888,7 +1954,7 @@ var StyledIconSpan = styled9("span", {
   paddingLeft: iconRight ? "4px" : void 0,
   paddingRight: iconRight ? void 0 : "4px"
 }));
-var StyledAnchor = styled9(Box3, {
+var StyledAnchor = styled10(Box3, {
   shouldForwardProp: (prop) => !["tint", "isOnDarkBg", "standalonelink", "iconRight"].includes(prop)
 })(({ theme, tint = "primary", isOnDarkBg, standalonelink, iconRight }) => {
   const resolvedTint = isOnDarkBg ? "white" : tint;
@@ -1947,14 +2013,14 @@ var StyledAnchor = styled9(Box3, {
 });
 
 // src/components/Link/Link.tsx
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var Variant = {
   standard: "standard",
   external: "external",
   file: "file"
 };
 function DocumentIcon() {
-  return /* @__PURE__ */ jsx15(SvgIcon5, { viewBox: "0 0 384 512", fontSize: "inherit", children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(SvgIcon5, { viewBox: "0 0 384 512", fontSize: "inherit", children: /* @__PURE__ */ jsx16(
     "path",
     {
       fillRule: "evenodd",
@@ -1989,7 +2055,7 @@ var Link = React5.forwardRef(function Link2({
   const target = variant !== Variant.standard ? "_blank" : targetProp;
   const iconRight = variant === Variant.external ? true : !!iconToRight;
   const urlProp = component ? { to: href } : { href };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     StyledAnchor,
     {
       component: component ?? "a",
@@ -2003,9 +2069,9 @@ var Link = React5.forwardRef(function Link2({
       standalonelink: !!standalone,
       ref,
       children: [
-        Icon && /* @__PURE__ */ jsx15(StyledIconSpan, { iconRight, children: /* @__PURE__ */ jsx15(Icon, { fontSize: "inherit" }) }),
+        Icon && /* @__PURE__ */ jsx16(StyledIconSpan, { iconRight, children: /* @__PURE__ */ jsx16(Icon, { fontSize: "inherit" }) }),
         children,
-        variant === Variant.external && /* @__PURE__ */ jsx15(StyledScreenReaderOnly, { children: ", opens in a new tab" })
+        variant === Variant.external && /* @__PURE__ */ jsx16(StyledScreenReaderOnly, { children: ", opens in a new tab" })
       ]
     }
   );
@@ -2017,8 +2083,8 @@ import React6 from "react";
 
 // src/components/LogoLink/LogoLink.styles.tsx
 import Box4 from "@mui/material/Box";
-import { styled as styled10 } from "@mui/material/styles";
-var StyledLogoLink = styled10(Box4, {
+import { styled as styled11 } from "@mui/material/styles";
+var StyledLogoLink = styled11(Box4, {
   shouldForwardProp: (prop) => prop !== "isSmall"
 })(({ theme, isSmall }) => ({
   display: "inline-flex",
@@ -2035,7 +2101,7 @@ var StyledLogoLink = styled10(Box4, {
     color: theme.tokens.colors.primaryDark
   }
 }));
-var StyledLogoSpan = styled10("span")(({ theme }) => ({
+var StyledLogoSpan = styled11("span")(({ theme }) => ({
   padding: "0 10px 0 15px",
   backgroundColor: theme.tokens.colors.primary,
   height: "100%",
@@ -2053,9 +2119,9 @@ var StyledLogoSpan = styled10("span")(({ theme }) => ({
 }));
 
 // src/components/LogoLink/LogoLink.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var LogoLink = React6.forwardRef(function LogoLink2({ children, href = "/", isSmall, title = "Home", component, ...restProps }, ref) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     StyledLogoLink,
     {
       component: component ?? "a",
@@ -2065,14 +2131,620 @@ var LogoLink = React6.forwardRef(function LogoLink2({ children, href = "/", isSm
       "data-component-id": "LogoLink",
       ...getCleanProps(restProps),
       ref,
-      children: /* @__PURE__ */ jsx16(StyledLogoSpan, { children })
+      children: /* @__PURE__ */ jsx17(StyledLogoSpan, { children })
     }
   );
 });
 LogoLink.displayName = "ToolkitLogoLink";
 
+// src/components/MultiSelect/MultiSelect.tsx
+import React7, { useRef, useMemo, useState as useState3, useEffect as useEffect2, useCallback as useCallback3, useLayoutEffect } from "react";
+import Popper from "@mui/material/Popper";
+import Collapse from "@mui/material/Collapse";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+
+// src/utils/focus.ts
+var focus = (element, forceFocus) => {
+  if (!element) return;
+  if (forceFocus) element.setAttribute("tabindex", "-1");
+  element.focus();
+};
+
+// src/hooks/useClickOutside.ts
+import { useEffect, useCallback } from "react";
+
+// src/utils/eventPath.ts
+var getParents = (node, memo = []) => {
+  const parentNode = node.parentNode;
+  if (!parentNode) return memo;
+  return getParents(parentNode, memo.concat([parentNode]));
+};
+var eventPath = (event) => {
+  let path = event.composedPath?.() || event.path;
+  const target = event.target;
+  if (path != null) {
+    path = path.indexOf(window) < 0 ? path.concat([window]) : path;
+    return path;
+  }
+  if (target === window) return [window];
+  return [target].concat(getParents(target)).concat([window]);
+};
+
+// src/hooks/useClickOutside.ts
+function useClickOutside(ref, callback, subscribe = true) {
+  const handleClick = useCallback(
+    (event) => {
+      const target = event.target && event.target.shadowRoot ? eventPath(event)[0] : event.target;
+      if (ref.current && !ref.current.contains(target)) {
+        callback();
+      }
+    },
+    [ref, callback]
+  );
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (subscribe) {
+      document.addEventListener("mousedown", handleClick);
+      document.addEventListener("touchstart", handleClick);
+    } else {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("touchstart", handleClick);
+    }
+  }, [subscribe, handleClick]);
+  useEffect(() => {
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("touchstart", handleClick);
+    };
+  }, [handleClick]);
+  return { handleClick };
+}
+var useClickOutside_default = useClickOutside;
+
+// src/hooks/useMergeRefs.ts
+import { useCallback as useCallback2 } from "react";
+var assignRef = (ref, value) => {
+  if (ref == null) return;
+  if (typeof ref === "function") {
+    ref(value);
+  } else {
+    try {
+      ref.current = value;
+    } catch (error) {
+      throw new Error(`Cannot assign value "${value}" to ref "${ref}"`);
+    }
+  }
+};
+var useMergeRefs = (...refs) => {
+  return useCallback2((node) => {
+    for (const ref of refs) {
+      assignRef(ref, node);
+    }
+  }, refs);
+};
+
+// src/components/MultiSelect/MultiSelect.utils.ts
+var scrollToRef = (ref) => {
+  const node = ref.current;
+  if (!node || !node.parentNode) return;
+  const parent = node.parentNode;
+  parent.scrollTop = node.offsetTop - parent.offsetHeight / 2 + node.offsetHeight / 2;
+};
+var getInputElement = (node) => {
+  if (!node.ref.current) return null;
+  return node.ref.current.querySelector("input");
+};
+var getNextOption = (nextIndex, multiSelectOptions) => {
+  const isEndOfList = nextIndex > multiSelectOptions.length - 1;
+  return multiSelectOptions[isEndOfList ? multiSelectOptions.length - 1 : nextIndex];
+};
+var getPreviousOption = (previousIndex, multiSelectOptions) => {
+  const isStartOfList = previousIndex < 0;
+  return multiSelectOptions[isStartOfList ? 0 : previousIndex];
+};
+var getPlural = (selection, placeholderLabel) => {
+  return selection.length > 1 ? placeholderLabel.plural : placeholderLabel.singular;
+};
+var isInViewPort = (ref, offset = 0) => {
+  if (typeof window === "undefined") return null;
+  const node = ref.current;
+  if (!node) return false;
+  const top = node.getBoundingClientRect().top;
+  return top + offset >= 0 && top - offset <= window.innerHeight;
+};
+
+// src/components/MultiSelect/MultiSelect.constants.ts
+var ENTER_KEY = "Enter";
+var ARROW_DOWN_KEY = "ArrowDown";
+var ARROW_UP_KEY = "ArrowUp";
+var TAB_KEY = "Tab";
+var SPACE_KEY = " ";
+var ESCAPE_KEY = "Escape";
+var HOME_KEY = "Home";
+var END_KEY = "End";
+var TRANSITION_TIMEOUT = 250;
+var SELECT_ALL_OPTION = {
+  value: "Select all",
+  label: "Select all"
+};
+
+// src/components/MultiSelect/MultiSelect.styles.tsx
+import { styled as styled12, alpha as alpha3 } from "@mui/material/styles";
+var StyledMultiSelectContainer = styled12("div")(({ theme }) => ({
+  display: "inline-block",
+  position: "relative",
+  width: "100%",
+  outline: "none",
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.tokens.borderRadius.md,
+  fontFamily: theme.tokens.typography.fontFamilyBase
+}));
+var StyledSelectionContainerOutline = styled12("div")(
+  ({ theme, isError }) => ({
+    border: `1px solid ${isError ? theme.tokens.colors.error : theme.tokens.colors.border}`,
+    borderRadius: theme.tokens.borderRadius.md,
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    background: "none",
+    zIndex: 0
+  })
+);
+var StyledSelectionContainer = styled12("button")(
+  ({ theme, isError }) => ({
+    display: "inline-flex",
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    width: "100%",
+    alignItems: "center",
+    flexWrap: "wrap",
+    border: "none",
+    textAlign: "left",
+    cursor: "default",
+    padding: theme.spacing(1.5),
+    position: "relative",
+    zIndex: 1,
+    overflow: "hidden",
+    borderRadius: theme.tokens.borderRadius.md,
+    transition: "background-color 0.2s ease",
+    backgroundClip: "content-box",
+    "&:focus": {
+      outline: "none"
+    },
+    '&:focus:not([data-lose-focus="true"])': {
+      boxShadow: `${alpha3(theme.palette.text.primary, 0.65)} 0 0 0 3px`,
+      outlineColor: "transparent",
+      outlineStyle: "solid",
+      borderColor: theme.palette.text.primary,
+      outlineOffset: "-2px",
+      borderRadius: theme.tokens.borderRadius.md
+    },
+    '&:not(:disabled), &[type="button"]:not(:disabled)': {
+      cursor: "default"
+    },
+    ...isError && {
+      boxShadow: `${alpha3(theme.tokens.colors.error, 0.65)} 0 0 0 3px`
+    }
+  })
+);
+var StyledSelectPlaceholder = styled12("span")(({ theme }) => ({
+  fontSize: theme.tokens.typography.fontSizeLg,
+  display: "inline-block",
+  flexGrow: 1,
+  width: "auto",
+  border: "none",
+  outline: "none"
+}));
+var StyledPopperInner = styled12("div")(({ theme }) => ({
+  width: "100%",
+  overflow: "hidden",
+  boxSizing: "border-box",
+  zIndex: theme.zIndex.tooltip
+}));
+var StyledTransitionContainer = styled12("ul")(({ theme }) => ({
+  "&:focus": {
+    outline: "1px solid transparent"
+  },
+  pointerEvents: "all",
+  width: "100%",
+  padding: 0,
+  listStyle: "none",
+  display: "block",
+  cursor: "default",
+  border: `1px solid ${theme.tokens.colors.border}`,
+  borderRadius: theme.tokens.borderRadius.md,
+  boxShadow: "0 0 8px 0 rgba(0, 0, 0, 0.2)",
+  marginTop: theme.spacing(1.25),
+  maxHeight: "218px",
+  overflowY: "auto",
+  backgroundColor: theme.palette.background.paper
+}));
+var StyledDropdownArrow = styled12("div")(() => ({
+  height: "24px",
+  width: "24px",
+  "& > svg": {
+    transition: "0.2s linear transform"
+  }
+}));
+
+// src/components/MultiSelect/MultiSelect.tsx
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+var MultiSelect = ({
+  options: initialOptions,
+  placeholder,
+  preSelectedOptions,
+  renderOption,
+  onChange,
+  label,
+  inputId,
+  hasError,
+  hasDescription,
+  hasSelectAll = true,
+  hasTooltip,
+  required,
+  selectButtonRef: providedRef,
+  onBlur,
+  onFocus,
+  onClick,
+  onKeyUp,
+  onKeyDown,
+  onTouchStart,
+  onTouchEnd,
+  ...restProps
+}) => {
+  const isPortfolio = placeholder.singular === "portfolio";
+  const portfolioPlaceholder = `No ${placeholder.singular} selected`;
+  const [open, setOpen] = useState3(false);
+  const [selection, setSelection] = useState3([]);
+  const [currentOptionIndex, setCurrentOptionIndex] = useState3(-1);
+  const [isError, setIsError] = useState3(false);
+  const [placeholderLabel, setPlaceholderLabel] = useState3(
+    isPortfolio ? portfolioPlaceholder : `Select ${placeholder.plural}`
+  );
+  const [selectAllChecked, setSelectAllChecked] = useState3(false);
+  const multiSelectContainerRef = useRef(null);
+  const triggerWrapperRef = useRef(null);
+  const internalSelectBtnRef = useRef(null);
+  const selectButtonRef = useMergeRefs(providedRef, internalSelectBtnRef);
+  const listRef = useRef(null);
+  const optionRefsMap = useRef(/* @__PURE__ */ new Map());
+  const multiSelectOptions = useMemo(() => {
+    const rawOptions = [...initialOptions];
+    if (hasSelectAll) rawOptions.unshift(SELECT_ALL_OPTION);
+    const result = rawOptions.map((option, index) => {
+      if (!optionRefsMap.current.has(option.value)) {
+        optionRefsMap.current.set(option.value, React7.createRef());
+      }
+      return {
+        original: option,
+        index,
+        ref: optionRefsMap.current.get(option.value),
+        value: option.value,
+        label: option.value === SELECT_ALL_OPTION.value && hasSelectAll ? `${SELECT_ALL_OPTION.label} ${placeholder.plural}` : option.label
+      };
+    });
+    const currentValues = new Set(result.map((o) => o.value));
+    for (const key of optionRefsMap.current.keys()) {
+      if (!currentValues.has(key)) optionRefsMap.current.delete(key);
+    }
+    return result;
+  }, [initialOptions, hasSelectAll, placeholder.plural]);
+  const initialOptionElements = useMemo(
+    () => hasSelectAll ? multiSelectOptions.slice(1) : [...multiSelectOptions],
+    [multiSelectOptions, hasSelectAll]
+  );
+  const areAllOptionsChecked = useCallback3(() => {
+    return selection.length === initialOptions.length;
+  }, [initialOptions, selection]);
+  useEffect2(() => {
+    setIsError(!!hasError);
+  }, [hasError]);
+  useEffect2(() => {
+    if (open) {
+      setCurrentOptionIndex(0);
+      setTimeout(() => {
+        focus(listRef.current, true);
+      }, TRANSITION_TIMEOUT);
+    }
+  }, [open]);
+  useEffect2(() => {
+    multiSelectOptions.forEach((option) => {
+      const selected = selection.some((select) => option.index === select.index);
+      const input = getInputElement(option);
+      if (input) input.checked = selected;
+    });
+    if (hasSelectAll) {
+      const selectAllInput = getInputElement(multiSelectOptions[0]);
+      if (selectAllInput) selectAllInput.checked = areAllOptionsChecked();
+    }
+    if (!open) {
+      scrollToRef(multiSelectOptions[0].ref);
+      setCurrentOptionIndex(-1);
+    }
+  }, [areAllOptionsChecked, selection, currentOptionIndex, open, hasSelectAll]);
+  useEffect2(() => {
+    const newSelection = [];
+    if (preSelectedOptions && preSelectedOptions.length) {
+      preSelectedOptions.forEach((option) => {
+        const match = multiSelectOptions.find(
+          (multiSelectOption) => multiSelectOption.value === option.value
+        );
+        if (match) newSelection.push(match);
+      });
+      setSelection(newSelection);
+    } else {
+      setSelection([]);
+    }
+    if (hasSelectAll) {
+      setSelectAllChecked(initialOptions.length === newSelection.length);
+    }
+  }, [preSelectedOptions, hasSelectAll]);
+  useEffect2(() => {
+    if (selection.length && selection.length === initialOptions.length) {
+      setPlaceholderLabel(`All ${getPlural(selection, placeholder)} selected`);
+    } else {
+      const placeholderState = selection.length ? `${selection.length} ${getPlural(selection, placeholder)} selected` : isPortfolio ? portfolioPlaceholder : `Select ${placeholder.plural}`;
+      setPlaceholderLabel(placeholderState);
+    }
+  }, [selection, placeholder]);
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      const firstNode = multiSelectOptions[0].ref;
+      const scrollToFirstNode = !isInViewPort(firstNode) && open && currentOptionIndex === 0;
+      if (scrollToFirstNode && firstNode.current) {
+        firstNode.current.scrollIntoView({ behavior: "smooth" });
+      }
+    }, TRANSITION_TIMEOUT);
+  }, [open, currentOptionIndex]);
+  useClickOutside_default(multiSelectContainerRef, () => {
+    if (open) setOpen(false);
+  });
+  const handleClickSelectButton = () => setOpen(!open);
+  const addOrRemoveOptions = (newSelection, option) => {
+    if (selection.some((item) => item.index === option.index)) {
+      const index = newSelection.findIndex((item) => item.index === option.index);
+      if (index > -1) newSelection.splice(index, 1);
+    } else {
+      newSelection.push(option);
+    }
+    return newSelection;
+  };
+  const handleSelectOption = (event, option) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (option.value !== SELECT_ALL_OPTION.value) {
+      const newSelection = selection.length > 0 ? [...selection] : [];
+      setSelection(addOrRemoveOptions(newSelection, option));
+      setCurrentOptionIndex(option.index);
+      if (hasSelectAll) {
+        setSelectAllChecked(initialOptions.length === newSelection.length);
+      }
+      if (onChange) {
+        onChange(newSelection.map((item) => item.original));
+      }
+    } else if (hasSelectAll) {
+      setSelectAllChecked(!selectAllChecked);
+      handleSelectAll();
+    }
+  };
+  const handleSelectAll = () => {
+    const selectionState = selectAllChecked ? [] : initialOptionElements;
+    setSelection(selectionState);
+    setCurrentOptionIndex(0);
+    if (onChange) {
+      onChange(selectionState.map((item) => item.original));
+    }
+  };
+  const handleTabKey = () => {
+    if (open) {
+      setOpen(false);
+      focus(internalSelectBtnRef.current, false);
+    }
+  };
+  const handleArrowDownKey = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!open) setOpen(true);
+    if (currentOptionIndex < 0) {
+      setCurrentOptionIndex(0);
+      scrollToRef(multiSelectOptions[0].ref);
+    } else if (currentOptionIndex < multiSelectOptions.length - 1) {
+      const nextIndex = currentOptionIndex + 1;
+      const nextOption = getNextOption(nextIndex, multiSelectOptions);
+      setCurrentOptionIndex(nextIndex);
+      focus(listRef.current, true);
+      scrollToRef(nextOption.ref);
+    }
+  };
+  const handleArrowUpKey = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!open) setOpen(true);
+    if (currentOptionIndex > 0) {
+      const previousIndex = currentOptionIndex - 1;
+      const previousOption = getPreviousOption(previousIndex, multiSelectOptions);
+      setCurrentOptionIndex(previousIndex);
+      focus(listRef.current, true);
+      scrollToRef(previousOption.ref);
+    }
+  };
+  const handleHomeKey = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setCurrentOptionIndex(0);
+    focus(listRef.current, true);
+    scrollToRef(multiSelectOptions[0].ref);
+  };
+  const handleEndKey = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const endIndex = multiSelectOptions.length - 1;
+    setCurrentOptionIndex(endIndex);
+    focus(listRef.current, true);
+    scrollToRef(multiSelectOptions[endIndex].ref);
+  };
+  const handleKeyDown = (event) => {
+    if (onKeyDown) onKeyDown(event);
+    switch (event.key) {
+      case TAB_KEY:
+        handleTabKey();
+        break;
+      case ARROW_DOWN_KEY:
+        handleArrowDownKey(event);
+        break;
+      case ARROW_UP_KEY:
+        handleArrowUpKey(event);
+        break;
+      case HOME_KEY:
+        handleHomeKey(event);
+        break;
+      case END_KEY:
+        handleEndKey(event);
+        break;
+      case ESCAPE_KEY:
+        setOpen(false);
+        focus(internalSelectBtnRef.current, false);
+        break;
+      default:
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (onKeyUp) onKeyUp(event);
+    switch (event.key) {
+      case SPACE_KEY:
+      case ENTER_KEY:
+        handleEnterOrSpaceKey(event);
+        break;
+      default:
+        break;
+    }
+  };
+  const handleEnterOrSpaceKey = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const currentOption = multiSelectOptions[currentOptionIndex];
+    if (!open) setOpen(true);
+    if (currentOption && event.key) {
+      handleSelectOption(event, currentOption);
+    }
+  };
+  let describedBy = isError ? `${inputId}-error ` : "";
+  describedBy += hasDescription ? `${inputId}-description ` : "";
+  describedBy += hasTooltip ? `${inputId}-tooltip-available` : "";
+  const isChecked = (option) => selection.some((item) => item.index === option.index);
+  const fieldAriaLabel = required ? label : `${label} (Optional)`;
+  const handleBlur = (e) => {
+    if (!open && onBlur) onBlur(e);
+  };
+  return /* @__PURE__ */ jsxs7(
+    StyledMultiSelectContainer,
+    {
+      tabIndex: -1,
+      ref: multiSelectContainerRef,
+      onBlur: handleBlur,
+      onFocus,
+      onTouchStart,
+      onTouchEnd,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onClick: (e) => {
+        if (!open) {
+          onClick && onClick(e);
+          focus(internalSelectBtnRef.current, false);
+        }
+      },
+      ...getCleanProps(restProps),
+      children: [
+        /* @__PURE__ */ jsxs7("div", { ref: triggerWrapperRef, style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxs7(
+            StyledSelectionContainer,
+            {
+              id: `multi-accounts-dropdown-toggle-button-${inputId}`,
+              type: "button",
+              isError,
+              ref: selectButtonRef,
+              onClick: handleClickSelectButton,
+              "data-lose-focus": currentOptionIndex > -1,
+              "data-select-trigger": true,
+              "aria-label": fieldAriaLabel,
+              "aria-describedby": describedBy.trim() || void 0,
+              "aria-expanded": open,
+              "data-multi-select-trigger": true,
+              "aria-haspopup": "tree",
+              children: [
+                /* @__PURE__ */ jsx18(StyledSelectPlaceholder, { id: `${inputId}-selectPlaceholder`, children: placeholderLabel }),
+                /* @__PURE__ */ jsx18(StyledDropdownArrow, { children: /* @__PURE__ */ jsx18(
+                  KeyboardArrowDownIcon,
+                  {
+                    sx: {
+                      transition: "0.2s linear transform",
+                      transform: open ? "rotateZ(-180deg)" : "rotateZ(0deg)"
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx18("input", { name: inputId, type: "hidden", required, "aria-required": required })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx18(
+            StyledSelectionContainerOutline,
+            {
+              "data-lose-focus": currentOptionIndex > -1,
+              isError,
+              "aria-hidden": true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx18(
+          Popper,
+          {
+            open,
+            anchorEl: triggerWrapperRef.current,
+            placement: "bottom-start",
+            disablePortal: true,
+            style: { width: "100%", zIndex: 1500 },
+            modifiers: [
+              { 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(
+              StyledTransitionContainer,
+              {
+                role: "tree",
+                "aria-activedescendant": `${inputId}-option-${currentOptionIndex}`,
+                "data-component-id": `${inputId}-multiSelectPopper`,
+                ref: listRef,
+                tabIndex: -1,
+                onFocus: (e) => e.stopPropagation(),
+                children: [
+                  hasSelectAll && renderOption(
+                    multiSelectOptions[0],
+                    currentOptionIndex,
+                    handleSelectOption,
+                    selectAllChecked,
+                    inputId
+                  ),
+                  initialOptionElements.map(
+                    (option) => renderOption(option, currentOptionIndex, handleSelectOption, isChecked(option), inputId)
+                  )
+                ]
+              }
+            ) }) })
+          }
+        )
+      ]
+    }
+  );
+};
+MultiSelect.displayName = "ToolkitMultiSelect";
+
 // src/components/PageSpinner/PageSpinner.tsx
-import React7, { useEffect, useRef } from "react";
+import React8, { useEffect as useEffect3, useRef as useRef2 } from "react";
 import Portal from "@mui/material/Portal";
 import CircularProgress3 from "@mui/material/CircularProgress";
 import { useForkRef } from "@mui/material/utils";
@@ -2233,21 +2905,21 @@ function setA11yMessage(messageText, messageTone, messageRole, clearAfter = 5e3)
 }
 
 // src/components/PageSpinner/PageSpinner.styles.tsx
-import { styled as styled11 } from "@mui/material/styles";
-import { alpha as alpha3 } from "@mui/material/styles";
+import { styled as styled13 } from "@mui/material/styles";
+import { alpha as alpha4 } from "@mui/material/styles";
 var PAGE_SPINNER_Z_INDEX = 1400;
-var StyledPageSpinnerRoot = styled11("div")(() => ({
+var StyledPageSpinnerRoot = styled13("div")(() => ({
   position: "relative"
 }));
-var StyledOverlay = styled11("div", {
+var StyledOverlay = styled13("div", {
   shouldForwardProp: (prop) => prop !== "$darkBg"
 })(({ theme, $darkBg = false }) => ({
   position: "fixed",
   inset: 0,
   zIndex: PAGE_SPINNER_Z_INDEX,
-  backgroundColor: $darkBg ? alpha3(theme.tokens.colors.textPrimary, 0.9) : alpha3(theme.palette.common.white, 0.9)
+  backgroundColor: $darkBg ? alpha4(theme.tokens.colors.textPrimary, 0.9) : alpha4(theme.palette.common.white, 0.9)
 }));
-var StyledSpinnerCentre = styled11("div")(() => ({
+var StyledSpinnerCentre = styled13("div")(() => ({
   position: "fixed",
   top: "50%",
   left: "50%",
@@ -2258,7 +2930,7 @@ var StyledSpinnerCentre = styled11("div")(() => ({
   alignItems: "center",
   gap: "16px"
 }));
-var StyledSpinnerMessage = styled11("p", {
+var StyledSpinnerMessage = styled13("p", {
   shouldForwardProp: (prop) => prop !== "$darkBg"
 })(({ theme, $darkBg = false }) => ({
   margin: 0,
@@ -2269,7 +2941,7 @@ var StyledSpinnerMessage = styled11("p", {
   color: $darkBg ? theme.palette.common.white : theme.tokens.colors.textPrimary,
   textAlign: "center"
 }));
-var StyledScreenReaderOnly2 = styled11("span")(() => ({
+var StyledScreenReaderOnly2 = styled13("span")(() => ({
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -2282,9 +2954,9 @@ var StyledScreenReaderOnly2 = styled11("span")(() => ({
 }));
 
 // src/components/PageSpinner/PageSpinner.tsx
-import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 var ARIA_REANNOUNCE_INTERVAL = 3e4;
-var PageSpinner = React7.forwardRef(
+var PageSpinner = React8.forwardRef(
   function PageSpinner2({
     message = "Processing, please wait",
     customMessageLayout,
@@ -2294,14 +2966,14 @@ var PageSpinner = React7.forwardRef(
     messageTone = "assertive",
     ...restProps
   }, ref) {
-    const internalRef = useRef(null);
+    const internalRef = useRef2(null);
     const mergedRef = useForkRef(ref, internalRef);
-    useEffect(() => {
+    useEffect3(() => {
       const blockKeyDown = (e) => e.preventDefault();
       document.addEventListener("keydown", blockKeyDown);
       return () => document.removeEventListener("keydown", blockKeyDown);
     }, [rootNode]);
-    useEffect(() => {
+    useEffect3(() => {
       const ariaRole = messageTone === "polite" ? "status" : "alert";
       setA11yMessage(message, messageTone, ariaRole);
       const interval = setInterval(() => {
@@ -2316,7 +2988,7 @@ var PageSpinner = React7.forwardRef(
         backgroundScrollTether(false);
       };
     }, [message, rootNode, messageTone]);
-    return /* @__PURE__ */ jsx17(Portal, { container: rootNode, children: /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsx19(Portal, { container: rootNode, children: /* @__PURE__ */ jsxs8(
       StyledPageSpinnerRoot,
       {
         "data-component-id": "PageSpinner",
@@ -2324,9 +2996,9 @@ var PageSpinner = React7.forwardRef(
         ref: mergedRef,
         ...getCleanProps(restProps),
         children: [
-          /* @__PURE__ */ jsx17(StyledOverlay, { $darkBg: isOnDarkBg }),
-          /* @__PURE__ */ jsxs6(StyledSpinnerCentre, { children: [
-            /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx19(StyledOverlay, { $darkBg: isOnDarkBg }),
+          /* @__PURE__ */ jsxs8(StyledSpinnerCentre, { children: [
+            /* @__PURE__ */ jsx19(
               CircularProgress3,
               {
                 size: 60,
@@ -2334,8 +3006,8 @@ var PageSpinner = React7.forwardRef(
                 "aria-hidden": "true"
               }
             ),
-            customMessageLayout ?? /* @__PURE__ */ jsx17(StyledSpinnerMessage, { $darkBg: isOnDarkBg, children: message }),
-            srText && /* @__PURE__ */ jsx17(StyledScreenReaderOnly2, { children: srText })
+            customMessageLayout ?? /* @__PURE__ */ jsx19(StyledSpinnerMessage, { $darkBg: isOnDarkBg, children: message }),
+            srText && /* @__PURE__ */ jsx19(StyledScreenReaderOnly2, { children: srText })
           ] })
         ]
       }
@@ -2345,11 +3017,11 @@ var PageSpinner = React7.forwardRef(
 PageSpinner.displayName = "ToolkitPageSpinner";
 
 // src/components/Pagination/Pagination.tsx
-import React8 from "react";
+import React9 from "react";
 import MuiPagination from "@mui/material/Pagination";
 
 // src/components/Pagination/Pagination.styles.tsx
-import { styled as styled12, alpha as alpha4 } from "@mui/material/styles";
+import { styled as styled14, alpha as alpha5 } from "@mui/material/styles";
 import MuiPaginationItem from "@mui/material/PaginationItem";
 function getColorValue(theme, color) {
   switch (color) {
@@ -2369,58 +3041,58 @@ function getColorValue(theme, color) {
       return theme.tokens.colors.textPrimary;
   }
 }
-var StyledPaginationItem = styled12(MuiPaginationItem, {
+var StyledPaginationItem = styled14(MuiPaginationItem, {
   shouldForwardProp: (prop) => prop !== "$variant" && prop !== "$color"
 })(({ theme, $variant, $color }) => {
   const colorValue = getColorValue(theme, $color);
   if ($variant === "text") {
     return {
       "&.Mui-selected": {
-        backgroundColor: alpha4(colorValue, 0.08),
+        backgroundColor: alpha5(colorValue, 0.08),
         color: colorValue,
         "&:hover": {
-          backgroundColor: alpha4(colorValue, 0.16)
+          backgroundColor: alpha5(colorValue, 0.16)
         }
       }
     };
   }
   if ($variant === "outlined") {
     return {
-      border: `1px solid ${alpha4(colorValue, 0.24)}`,
+      border: `1px solid ${alpha5(colorValue, 0.24)}`,
       "&.Mui-selected": {
-        border: `1px solid ${alpha4(colorValue, 0.8)}`,
+        border: `1px solid ${alpha5(colorValue, 0.8)}`,
         color: colorValue,
-        backgroundColor: alpha4(colorValue, 0.08),
+        backgroundColor: alpha5(colorValue, 0.08),
         "&:hover": {
-          backgroundColor: alpha4(colorValue, 0.16)
+          backgroundColor: alpha5(colorValue, 0.16)
         }
       }
     };
   }
   return {
     "&.Mui-selected": {
-      backgroundColor: alpha4(colorValue, 0.16),
+      backgroundColor: alpha5(colorValue, 0.16),
       color: colorValue,
       "&:hover": {
-        backgroundColor: alpha4(colorValue, 0.32)
+        backgroundColor: alpha5(colorValue, 0.32)
       }
     },
     "&:hover": {
-      backgroundColor: alpha4(colorValue, 0.08)
+      backgroundColor: alpha5(colorValue, 0.08)
     }
   };
 });
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Pagination = React8.forwardRef(
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Pagination = React9.forwardRef(
   function Pagination2({ variant = "text", shape = "circular", color = "default", ...restProps }, ref) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(
       MuiPagination,
       {
         ref,
         "data-component-id": "Pagination",
-        renderItem: (item) => /* @__PURE__ */ jsx18(
+        renderItem: (item) => /* @__PURE__ */ jsx20(
           StyledPaginationItem,
           {
             $variant: variant,
@@ -2437,11 +3109,11 @@ var Pagination = React8.forwardRef(
 Pagination.displayName = "ToolkitPagination";
 
 // src/components/Paragraph/Paragraph.tsx
-import React9 from "react";
+import React10 from "react";
 
 // src/components/Paragraph/Paragraph.styles.tsx
-import { styled as styled13 } from "@mui/material/styles";
-var StyledParagraph = styled13("p", {
+import { styled as styled15 } from "@mui/material/styles";
+var StyledParagraph = styled15("p", {
   shouldForwardProp: (prop) => prop !== "$variant" && prop !== "$isOnDarkBg"
 })(({ theme, $variant = "regular", $isOnDarkBg = false }) => ({
   margin: 0,
@@ -2474,10 +3146,10 @@ var StyledParagraph = styled13("p", {
 }));
 
 // src/components/Paragraph/Paragraph.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var Paragraph = React9.forwardRef(
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Paragraph = React10.forwardRef(
   function Paragraph2({ children, variant = "regular", isOnDarkBg = false, ...restProps }, ref) {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx21(
       StyledParagraph,
       {
         $variant: variant,
@@ -2493,15 +3165,15 @@ var Paragraph = React9.forwardRef(
 Paragraph.displayName = "ToolkitParagraph";
 
 // src/components/Password/Password.tsx
-import React10, { useState as useState3 } from "react";
+import React11, { useState as useState4 } from "react";
 
 // src/components/Password/PasswordRule.tsx
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import CancelIcon from "@mui/icons-material/Cancel";
 
 // src/components/Password/PasswordRule.styles.tsx
-import { styled as styled14 } from "@mui/material/styles";
-var StyledPasswordRule = styled14("div")(({ theme }) => ({
+import { styled as styled16 } from "@mui/material/styles";
+var StyledPasswordRule = styled16("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.tokens.spacing.xs,
@@ -2513,15 +3185,15 @@ var StyledPasswordRule = styled14("div")(({ theme }) => ({
     color: theme.tokens.colors.error
   }
 }));
-var StyledPasswordRuleIcon = styled14("span")({
+var StyledPasswordRuleIcon = styled16("span")({
   display: "inline-flex",
   alignItems: "center",
   flexShrink: 0
 });
-var StyledPasswordRuleText = styled14("span")(({ theme }) => ({
+var StyledPasswordRuleText = styled16("span")(({ theme }) => ({
   fontSize: theme.tokens.typography.fontSizeSm
 }));
-var StyledScreenReaderOnly3 = styled14("span")({
+var StyledScreenReaderOnly3 = styled16("span")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -2534,24 +3206,24 @@ var StyledScreenReaderOnly3 = styled14("span")({
 });
 
 // src/components/Password/PasswordRule.tsx
-import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
-var PasswordRule = ({ valid = false, rule = "", idx }) => /* @__PURE__ */ jsxs7(
+import { jsx as jsx22, 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__ */ jsx20(StyledPasswordRuleIcon, { children: valid ? /* @__PURE__ */ jsx20(CheckCircleIcon, { fontSize: "small", "aria-hidden": "true" }) : /* @__PURE__ */ jsx20(CancelIcon, { fontSize: "small", "aria-hidden": "true" }) }),
-      /* @__PURE__ */ jsx20(StyledPasswordRuleText, { children: rule }),
-      /* @__PURE__ */ jsx20(StyledScreenReaderOnly3, { children: valid ? "supplied" : "not supplied" })
+      /* @__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" })
     ]
   }
 );
 PasswordRule.displayName = "ToolkitPasswordRule";
 
 // src/components/Password/PasswordCriteria.styles.tsx
-import { styled as styled15 } from "@mui/material/styles";
-var StyledPasswordCriteriaContainer = styled15("div")(
+import { styled as styled17 } from "@mui/material/styles";
+var StyledPasswordCriteriaContainer = styled17("div")(
   ({ theme, $show }) => ({
     display: $show ? "block" : "none",
     position: "absolute",
@@ -2562,7 +3234,7 @@ var StyledPasswordCriteriaContainer = styled15("div")(
     marginTop: theme.tokens.spacing.xs
   })
 );
-var StyledPasswordRuleTitle = styled15("div")(({ theme }) => ({
+var StyledPasswordRuleTitle = styled17("div")(({ theme }) => ({
   color: theme.tokens.colors.textPrimary,
   fontSize: theme.tokens.typography.fontSizeSm,
   fontWeight: theme.tokens.typography.fontWeightMedium,
@@ -2572,7 +3244,7 @@ var StyledPasswordRuleTitle = styled15("div")(({ theme }) => ({
 }));
 
 // src/components/Password/PasswordCriteria.tsx
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var PasswordRules = [
   { key: "minLength", rule: "Minimum 8 characters" },
   { key: "lowercase", rule: "At least one lowercase letter" },
@@ -2589,7 +3261,7 @@ var passwordValidator = (value) => ({
 });
 var PasswordCriteria = ({ show = false, value = "", id = "passwordCriteria" }) => {
   const validity = passwordValidator(value);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     StyledPasswordCriteriaContainer,
     {
       $show: show,
@@ -2598,9 +3270,9 @@ var PasswordCriteria = ({ show = false, value = "", id = "passwordCriteria" }) =
       "data-testid": "password-criteria",
       role: "status",
       "aria-live": "polite",
-      children: /* @__PURE__ */ jsxs8(Card, { compact: true, children: [
-        /* @__PURE__ */ jsx21(StyledPasswordRuleTitle, { children: "Password must contain:" }),
-        PasswordRules.map((item, idx) => /* @__PURE__ */ jsx21(PasswordRule, { valid: validity[item.key], rule: item.rule, idx }, item.key))
+      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))
       ] })
     }
   );
@@ -2608,18 +3280,18 @@ var PasswordCriteria = ({ show = false, value = "", id = "passwordCriteria" }) =
 PasswordCriteria.displayName = "ToolkitPasswordCriteria";
 
 // src/components/Password/Password.styles.tsx
-import { styled as styled16 } from "@mui/material/styles";
-var StyledPasswordRoot = styled16("div")({
+import { styled as styled18 } from "@mui/material/styles";
+var StyledPasswordRoot = styled18("div")({
   position: "relative"
 });
-var StyledPasswordInputWrapper = styled16("div")({
+var StyledPasswordInputWrapper = styled18("div")({
   display: "flex",
   position: "relative"
 });
 
 // src/components/Password/Password.tsx
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
-var Password = React10.forwardRef(
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+var Password = React11.forwardRef(
   function Password2({
     isInvalid,
     value: initialValue,
@@ -2632,8 +3304,8 @@ var Password = React10.forwardRef(
     id,
     ...rest
   }, ref) {
-    const [value, setValue] = useState3(initialValue ?? "");
-    const [showCriteria, setShowCriteria] = useState3(false);
+    const [value, setValue] = useState4(initialValue ?? "");
+    const [showCriteria, setShowCriteria] = useState4(false);
     const handleFocus = () => {
       setShowCriteria(true);
     };
@@ -2650,8 +3322,8 @@ var Password = React10.forwardRef(
     };
     const criteriaId = id ? `${id}-criteria` : "passwordCriteria";
     const cleanRest = getCleanProps(rest);
-    return /* @__PURE__ */ jsxs9(StyledPasswordRoot, { className, ...cleanRest, children: [
-      /* @__PURE__ */ jsx22(StyledPasswordInputWrapper, { children: /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsxs11(StyledPasswordRoot, { className, ...cleanRest, children: [
+      /* @__PURE__ */ jsx24(StyledPasswordInputWrapper, { children: /* @__PURE__ */ jsx24(
         TextField,
         {
           ref,
@@ -2670,17 +3342,17 @@ var Password = React10.forwardRef(
           onChange: handleChange
         }
       ) }),
-      /* @__PURE__ */ jsx22(PasswordCriteria, { show: showCriteria, value, id: criteriaId })
+      /* @__PURE__ */ jsx24(PasswordCriteria, { show: showCriteria, value, id: criteriaId })
     ] });
   }
 );
 Password.displayName = "ToolkitPassword";
 
 // src/components/Spinner/Spinner.tsx
-import React11 from "react";
+import React12 from "react";
 
 // src/components/Spinner/Spinner.styles.tsx
-import { styled as styled17, alpha as alpha5 } from "@mui/material/styles";
+import { styled as styled19, alpha as alpha6 } from "@mui/material/styles";
 var spinnerSizing = {
   xs: 20,
   sm: 24,
@@ -2688,7 +3360,7 @@ var spinnerSizing = {
   lg: 56,
   xl: 72
 };
-var StyledSpinnerContainer = styled17("div", {
+var StyledSpinnerContainer = styled19("div", {
   shouldForwardProp: (prop) => prop !== "$inline"
 })({}, ({ $inline }) => ({
   flex: "0 1 100%",
@@ -2696,7 +3368,7 @@ var StyledSpinnerContainer = styled17("div", {
   flexDirection: $inline ? "row" : "column",
   alignItems: "center"
 }));
-var StyledSpinnerIconContainer = styled17("div", {
+var StyledSpinnerIconContainer = styled19("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ $size }) => {
   const size = spinnerSizing[$size];
@@ -2706,12 +3378,12 @@ var StyledSpinnerIconContainer = styled17("div", {
     height: size
   };
 });
-var StyledSpinnerBackground = styled17("div", {
+var StyledSpinnerBackground = styled19("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ theme, $size, $darkBg }) => {
   const size = spinnerSizing[$size];
   const lineWidth = Math.round(size / 12);
-  const borderColor = $darkBg ? alpha5(theme.palette.common.white, 0.2) : alpha5(theme.tokens.colors.textPrimary, 0.1);
+  const borderColor = $darkBg ? alpha6(theme.palette.common.white, 0.2) : alpha6(theme.tokens.colors.textPrimary, 0.1);
   return {
     position: "absolute",
     width: size,
@@ -2720,7 +3392,7 @@ var StyledSpinnerBackground = styled17("div", {
     border: `${lineWidth}px solid ${borderColor}`
   };
 });
-var StyledSpinner = styled17("div", {
+var StyledSpinner = styled19("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ theme, $size, $darkBg }) => {
   const size = spinnerSizing[$size];
@@ -2743,7 +3415,7 @@ var StyledSpinner = styled17("div", {
     animation: `toolkit-spin ${animationSpeed} infinite linear`
   };
 });
-var StyledSpinnerMessage2 = styled17("span", {
+var StyledSpinnerMessage2 = styled19("span", {
   shouldForwardProp: (prop) => prop !== "$darkBg" && prop !== "$inline"
 })(({ theme, $darkBg, $inline }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
@@ -2752,7 +3424,7 @@ var StyledSpinnerMessage2 = styled17("span", {
   marginTop: $inline ? 0 : theme.spacing(1),
   marginLeft: $inline ? theme.spacing(1) : 0
 }));
-var StyledScreenReaderOnly4 = styled17("span")({
+var StyledScreenReaderOnly4 = styled19("span")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -2765,10 +3437,10 @@ var StyledScreenReaderOnly4 = styled17("span")({
 });
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
-var Spinner = React11.forwardRef(
+import { jsx as jsx25, 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__ */ jsxs10(
+    return /* @__PURE__ */ jsxs12(
       StyledSpinnerContainer,
       {
         ref,
@@ -2776,12 +3448,12 @@ var Spinner = React11.forwardRef(
         "data-component-id": "Spinner",
         ...getCleanProps(restProps),
         children: [
-          /* @__PURE__ */ jsxs10(StyledSpinnerIconContainer, { $size: size, "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx23(StyledSpinnerBackground, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx23(StyledSpinner, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" })
+          /* @__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" })
           ] }),
-          message && /* @__PURE__ */ jsx23(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
-          srText && /* @__PURE__ */ jsx23(StyledScreenReaderOnly4, { children: srText })
+          message && /* @__PURE__ */ jsx25(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
+          srText && /* @__PURE__ */ jsx25(StyledScreenReaderOnly4, { children: srText })
         ]
       }
     );
@@ -2793,14 +3465,14 @@ Spinner.displayName = "ToolkitSpinner";
 import FormHelperText from "@mui/material/FormHelperText";
 
 // src/components/Toggle/Toggle.styles.tsx
-import { styled as styled18 } from "@mui/material/styles";
-var StyledFieldset = styled18("fieldset")(({ theme }) => ({
+import { styled as styled20 } from "@mui/material/styles";
+var StyledFieldset = styled20("fieldset")(({ theme }) => ({
   border: "none",
   margin: 0,
   padding: 0,
   minWidth: 0
 }));
-var StyledLegend = styled18("legend")(({ theme }) => ({
+var StyledLegend = styled20("legend")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   fontSize: theme.tokens.typography.fontSizeLg,
   fontWeight: theme.tokens.typography.fontWeightRegular,
@@ -2808,7 +3480,7 @@ var StyledLegend = styled18("legend")(({ theme }) => ({
   marginBottom: theme.spacing(1),
   padding: 0
 }));
-var StyledToggleWrapper = styled18("div")(({ theme }) => ({
+var StyledToggleWrapper = styled20("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   width: theme.spacing(15),
@@ -2817,7 +3489,7 @@ var StyledToggleWrapper = styled18("div")(({ theme }) => ({
   border: `1px solid ${theme.tokens.colors.border}`,
   borderRadius: theme.tokens.borderRadius.md
 }));
-var StyledSwitch = styled18("label", {
+var StyledSwitch = styled20("label", {
   shouldForwardProp: (prop) => prop !== "selected" && prop !== "controlType"
 })(({ theme, selected, controlType }) => ({
   position: "relative",
@@ -2907,7 +3579,7 @@ var StyledSwitch = styled18("label", {
 }));
 
 // src/components/Toggle/Toggle.tsx
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 function Toggle({
   name,
   checked = false,
@@ -2918,18 +3590,20 @@ function Toggle({
   onBlur,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs11(StyledFieldset, { "data-component-id": "toggle", ...getCleanProps(restProps), children: [
-    label && /* @__PURE__ */ jsx24(StyledLegend, { children: label }),
-    description && /* @__PURE__ */ jsx24(FormHelperText, { children: description }),
-    /* @__PURE__ */ jsxs11(StyledToggleWrapper, { children: [
-      /* @__PURE__ */ jsxs11(
+  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 }),
+    /* @__PURE__ */ jsxs13(StyledToggleWrapper, { children: [
+      /* @__PURE__ */ jsxs13(
         StyledSwitch,
         {
           htmlFor: `${name}off`,
           selected: !checked,
           controlType: "off",
+          "data-testid": testId ? `${testId}-off` : void 0,
           children: [
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx26(
               "input",
               {
                 checked: !checked,
@@ -2945,14 +3619,15 @@ function Toggle({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs13(
         StyledSwitch,
         {
           htmlFor: `${name}on`,
           selected: checked,
           controlType: "on",
+          "data-testid": testId ? `${testId}-on` : void 0,
           children: [
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx26(
               "input",
               {
                 checked,
@@ -2969,7 +3644,7 @@ function Toggle({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx24(FormHelperText, { error: true, children: error })
+    error && /* @__PURE__ */ jsx26(FormHelperText, { error: true, children: error })
   ] });
 }
 Toggle.displayName = "ToolkitToggle";
@@ -2985,37 +3660,37 @@ import {
   TablePagination as MuiTablePagination,
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { styled as styled19 } from "@mui/material/styles";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var StyledTableContainer = styled19(MuiTableContainer)(() => ({
+import { styled as styled21 } from "@mui/material/styles";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var StyledTableContainer = styled21(MuiTableContainer)(() => ({
   overflowX: "auto"
 }));
-var StyledHeadCell = styled19(MuiTableCell)(({ theme }) => ({
+var StyledHeadCell = styled21(MuiTableCell)(({ theme }) => ({
   fontWeight: theme.tokens.components.table.headerFontWeight,
   backgroundColor: theme.tokens.components.table.headerBackground,
   borderBottomWidth: theme.tokens.components.table.borderWidth,
   borderBottomColor: theme.tokens.components.table.borderColor
 }));
 function Table(props) {
-  return /* @__PURE__ */ jsx25(MuiTable, { ...props });
+  return /* @__PURE__ */ jsx27(MuiTable, { ...props });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ jsx25(MuiTableHead, { ...props });
+  return /* @__PURE__ */ jsx27(MuiTableHead, { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx25(MuiTableBody, { ...props });
+  return /* @__PURE__ */ jsx27(MuiTableBody, { ...props });
 }
 function TableRow(props) {
-  return /* @__PURE__ */ jsx25(MuiTableRow, { ...props });
+  return /* @__PURE__ */ jsx27(MuiTableRow, { ...props });
 }
 function TableCell(props) {
-  return /* @__PURE__ */ jsx25(MuiTableCell, { ...props });
+  return /* @__PURE__ */ jsx27(MuiTableCell, { ...props });
 }
 function TableHeadCell(props) {
-  return /* @__PURE__ */ jsx25(StyledHeadCell, { component: "th", scope: "col", ...props });
+  return /* @__PURE__ */ jsx27(StyledHeadCell, { component: "th", scope: "col", ...props });
 }
 function TableContainer(props) {
-  return /* @__PURE__ */ jsx25(StyledTableContainer, { ...props });
+  return /* @__PURE__ */ jsx27(StyledTableContainer, { ...props });
 }
 var TablePagination = MuiTablePagination;
 var TableSortLabel = MuiTableSortLabel;
@@ -3028,144 +3703,144 @@ TableHeadCell.displayName = "ToolkitTableHeadCell";
 TableContainer.displayName = "ToolkitTableContainer";
 
 // src/foundation/H1/H1.tsx
-import React12 from "react";
+import React13 from "react";
 import { Typography } from "@mui/material";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var H1 = React12.forwardRef(
+import { jsx as jsx28 } from "react/jsx-runtime";
+var H1 = React13.forwardRef(
   function H12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx26(Typography, { ref, variant: "h1", color, ...props, children });
+    return /* @__PURE__ */ jsx28(Typography, { ref, variant: "h1", color, ...props, children });
   }
 );
 H1.displayName = "ToolkitH1";
 
 // src/foundation/H2/H2.tsx
-import React13 from "react";
+import React14 from "react";
 import { Typography as Typography2 } from "@mui/material";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var H2 = React13.forwardRef(
+import { jsx as jsx29 } from "react/jsx-runtime";
+var H2 = React14.forwardRef(
   function H22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx27(Typography2, { ref, variant: "h2", color, ...props, children });
+    return /* @__PURE__ */ jsx29(Typography2, { ref, variant: "h2", color, ...props, children });
   }
 );
 H2.displayName = "ToolkitH2";
 
 // src/foundation/H3/H3.tsx
-import React14 from "react";
+import React15 from "react";
 import { Typography as Typography3 } from "@mui/material";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var H3 = React14.forwardRef(
+import { jsx as jsx30 } from "react/jsx-runtime";
+var H3 = React15.forwardRef(
   function H32({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx28(Typography3, { ref, variant: "h3", color, ...props, children });
+    return /* @__PURE__ */ jsx30(Typography3, { ref, variant: "h3", color, ...props, children });
   }
 );
 H3.displayName = "ToolkitH3";
 
 // src/foundation/H4/H4.tsx
-import React15 from "react";
+import React16 from "react";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var H4 = React15.forwardRef(
+import { jsx as jsx31 } from "react/jsx-runtime";
+var H4 = React16.forwardRef(
   function H42({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx29(Typography4, { ref, variant: "h4", color, ...props, children });
+    return /* @__PURE__ */ jsx31(Typography4, { ref, variant: "h4", color, ...props, children });
   }
 );
 H4.displayName = "ToolkitH4";
 
 // src/foundation/H5/H5.tsx
-import React16 from "react";
+import React17 from "react";
 import { Typography as Typography5 } from "@mui/material";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var H5 = React16.forwardRef(
+import { jsx as jsx32 } from "react/jsx-runtime";
+var H5 = React17.forwardRef(
   function H52({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx30(Typography5, { ref, variant: "h5", color, ...props, children });
+    return /* @__PURE__ */ jsx32(Typography5, { ref, variant: "h5", color, ...props, children });
   }
 );
 H5.displayName = "ToolkitH5";
 
 // src/foundation/H6/H6.tsx
-import React17 from "react";
+import React18 from "react";
 import { Typography as Typography6 } from "@mui/material";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var H6 = React17.forwardRef(
+import { jsx as jsx33 } from "react/jsx-runtime";
+var H6 = React18.forwardRef(
   function H62({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx31(Typography6, { ref, variant: "h6", color, ...props, children });
+    return /* @__PURE__ */ jsx33(Typography6, { ref, variant: "h6", color, ...props, children });
   }
 );
 H6.displayName = "ToolkitH6";
 
 // src/foundation/Subtitle1/Subtitle1.tsx
-import React18 from "react";
+import React19 from "react";
 import { Typography as Typography7 } from "@mui/material";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var Subtitle1 = React18.forwardRef(
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Subtitle1 = React19.forwardRef(
   function Subtitle12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx32(Typography7, { ref, variant: "subtitle1", color, ...props, children });
+    return /* @__PURE__ */ jsx34(Typography7, { ref, variant: "subtitle1", color, ...props, children });
   }
 );
 Subtitle1.displayName = "ToolkitSubtitle1";
 
 // src/foundation/Subtitle2/Subtitle2.tsx
-import React19 from "react";
+import React20 from "react";
 import { Typography as Typography8 } from "@mui/material";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Subtitle2 = React19.forwardRef(
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Subtitle2 = React20.forwardRef(
   function Subtitle22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx33(Typography8, { ref, variant: "subtitle2", color, ...props, children });
+    return /* @__PURE__ */ jsx35(Typography8, { ref, variant: "subtitle2", color, ...props, children });
   }
 );
 Subtitle2.displayName = "ToolkitSubtitle2";
 
 // src/foundation/Body1/Body1.tsx
-import React20 from "react";
+import React21 from "react";
 import { Typography as Typography9 } from "@mui/material";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var Body1 = React20.forwardRef(
+import { jsx as jsx36 } from "react/jsx-runtime";
+var Body1 = React21.forwardRef(
   function Body12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx34(Typography9, { ref, variant: "body1", color, ...props, children });
+    return /* @__PURE__ */ jsx36(Typography9, { ref, variant: "body1", color, ...props, children });
   }
 );
 Body1.displayName = "ToolkitBody1";
 
 // src/foundation/Body2/Body2.tsx
-import React21 from "react";
+import React22 from "react";
 import { Typography as Typography10 } from "@mui/material";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var Body2 = React21.forwardRef(
+import { jsx as jsx37 } from "react/jsx-runtime";
+var Body2 = React22.forwardRef(
   function Body22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx35(Typography10, { ref, variant: "body2", color, ...props, children });
+    return /* @__PURE__ */ jsx37(Typography10, { ref, variant: "body2", color, ...props, children });
   }
 );
 Body2.displayName = "ToolkitBody2";
 
 // src/foundation/Caption/Caption.tsx
-import React22 from "react";
+import React23 from "react";
 import { Typography as Typography11 } from "@mui/material";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var Caption = React22.forwardRef(
+import { jsx as jsx38 } from "react/jsx-runtime";
+var Caption = React23.forwardRef(
   function Caption2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx36(Typography11, { ref, variant: "caption", color, ...props, children });
+    return /* @__PURE__ */ jsx38(Typography11, { ref, variant: "caption", color, ...props, children });
   }
 );
 Caption.displayName = "ToolkitCaption";
 
 // src/foundation/Overline/Overline.tsx
-import React23 from "react";
+import React24 from "react";
 import { Typography as Typography12 } from "@mui/material";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var Overline = React23.forwardRef(
+import { jsx as jsx39 } from "react/jsx-runtime";
+var Overline = React24.forwardRef(
   function Overline2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx37(Typography12, { ref, variant: "overline", color, ...props, children });
+    return /* @__PURE__ */ jsx39(Typography12, { ref, variant: "overline", color, ...props, children });
   }
 );
 Overline.displayName = "ToolkitOverline";
 
 // src/foundation/TypographyButton/TypographyButton.tsx
-import React24 from "react";
+import React25 from "react";
 import { Typography as Typography13 } from "@mui/material";
-import { jsx as jsx38 } from "react/jsx-runtime";
-var TypographyButton = React24.forwardRef(
+import { jsx as jsx40 } from "react/jsx-runtime";
+var TypographyButton = React25.forwardRef(
   function TypographyButton2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx38(Typography13, { ref, variant: "button", color, ...props, children });
+    return /* @__PURE__ */ jsx40(Typography13, { ref, variant: "button", color, ...props, children });
   }
 );
 TypographyButton.displayName = "ToolkitTypographyButton";
@@ -3187,6 +3862,7 @@ export {
   CardContent,
   CardHeader,
   Chip,
+  ConfirmDialog,
   DateCalendar,
   DateField,
   DateLocalizationProvider,
@@ -3212,6 +3888,7 @@ export {
   MobileDatePicker,
   MobileDateTimePicker,
   MobileTimePicker,
+  MultiSelect,
   Overline,
   PageSpinner,
   Pagination,