@octoguide/mui-ui-toolkit 0.6.0 → 0.7.1

package/dist/index.mjs

@@ -503,9 +503,10 @@ function resolveThemeName() {
 
 // src/themes/createMuiTheme.ts
 import { createTheme, alpha, darken } from "@mui/material/styles";
-function createMuiTheme(tokens) {
+function createMuiTheme(tokens, darkMode = false) {
   return createTheme({
     palette: {
+      mode: darkMode ? "dark" : "light",
       primary: {
         main: tokens.colors.primary,
         dark: tokens.colors.primaryDark,
@@ -523,9 +524,9 @@ function createMuiTheme(tokens) {
       error: { main: tokens.colors.error },
       info: { main: tokens.colors.info },
       background: {
-        default: tokens.colors.background,
-        paper: tokens.colors.backgroundPaper,
-        subtle: tokens.colors.backgroundSubtle
+        default: darkMode ? "#0d0d0d" : tokens.colors.background,
+        paper: darkMode ? "#1a1a1a" : tokens.colors.backgroundPaper,
+        subtle: darkMode ? "#2a2a2a" : tokens.colors.backgroundSubtle
       },
       border: tokens.colors.border,
       text: {
@@ -684,14 +685,14 @@ function createMuiTheme(tokens) {
       },
       MuiTextField: {
         styleOverrides: {
-          root: {
+          root: ({ theme }) => ({
             "& .MuiOutlinedInput-root": {
               borderRadius: tokens.components.input.borderRadius,
-              backgroundColor: tokens.components.input.background,
+              backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.paper : tokens.components.input.background,
               minHeight: tokens.components.input.minHeight,
               "& fieldset": {
                 borderWidth: tokens.components.input.borderWidth,
-                borderColor: tokens.colors.border
+                borderColor: theme.palette.mode === "dark" ? theme.palette.divider : tokens.colors.border
               },
               "&:hover fieldset": {
                 borderColor: tokens.colors.primary
@@ -701,7 +702,7 @@ function createMuiTheme(tokens) {
                 borderColor: tokens.colors.borderFocus
               },
               "&.Mui-disabled": {
-                backgroundColor: tokens.components.input.backgroundDisabled
+                backgroundColor: theme.palette.mode === "dark" ? theme.palette.action.disabledBackground : tokens.components.input.backgroundDisabled
               }
             },
             "& .MuiInputLabel-root": {
@@ -710,17 +711,17 @@ function createMuiTheme(tokens) {
             "& .MuiFormHelperText-root": {
               fontSize: tokens.components.input.helperFontSize
             }
-          }
+          })
         }
       },
       MuiCard: {
         styleOverrides: {
-          root: {
+          root: ({ theme }) => ({
             borderRadius: tokens.components.card.borderRadius,
-            backgroundColor: tokens.components.card.background,
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.paper : tokens.components.card.background,
             boxShadow: tokens.shadows.sm,
-            border: `${tokens.components.card.borderWidth} solid ${tokens.colors.divider}`
-          }
+            border: `${tokens.components.card.borderWidth} solid ${theme.palette.divider}`
+          })
         }
       },
       MuiCardContent: {
@@ -804,11 +805,11 @@ function createMuiTheme(tokens) {
       },
       MuiDialog: {
         styleOverrides: {
-          paper: {
+          paper: ({ theme }) => ({
             borderRadius: tokens.components.dialog.borderRadius,
-            backgroundColor: tokens.components.dialog.background,
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.paper : tokens.components.dialog.background,
             maxWidth: tokens.components.dialog.maxWidth
-          }
+          })
         }
       },
       MuiDialogContent: {
@@ -820,26 +821,27 @@ function createMuiTheme(tokens) {
       },
       MuiTableCell: {
         styleOverrides: {
-          root: {
+          root: ({ theme }) => ({
             paddingLeft: tokens.components.table.cellPaddingX,
             paddingRight: tokens.components.table.cellPaddingX,
             paddingTop: tokens.components.table.cellPaddingY,
             paddingBottom: tokens.components.table.cellPaddingY,
-            borderBottom: `${tokens.components.table.borderWidth} solid ${tokens.components.table.borderColor}`
-          },
-          head: {
+            borderBottom: `${tokens.components.table.borderWidth} solid ${theme.palette.mode === "dark" ? theme.palette.divider : tokens.components.table.borderColor}`
+          }),
+          head: ({ theme }) => ({
             fontWeight: tokens.components.table.headerFontWeight,
-            backgroundColor: tokens.components.table.headerBackground
-          }
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : tokens.components.table.headerBackground,
+            color: theme.palette.text.secondary
+          })
         }
       },
       MuiTableRow: {
         styleOverrides: {
-          root: {
+          root: ({ theme }) => ({
             "&:hover": {
-              backgroundColor: tokens.components.table.rowHoverBackground
+              backgroundColor: theme.palette.mode === "dark" ? theme.palette.action.hover : tokens.components.table.rowHoverBackground
             }
-          }
+          })
         }
       },
       MuiAvatar: {
@@ -1088,11 +1090,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function ToolkitThemeProvider({
   theme,
   children,
-  injectCssBaseline = true
+  injectCssBaseline = true,
+  darkMode = false
 }) {
   const themeName = theme ?? resolveThemeName();
   const tokens = getThemeTokens(themeName);
-  const muiTheme = createMuiTheme(tokens);
+  const muiTheme = createMuiTheme(tokens, darkMode);
   return /* @__PURE__ */ jsxs(MuiThemeProvider, { theme: muiTheme, children: [
     injectCssBaseline && /* @__PURE__ */ jsx(CssBaseline, {}),
     children
@@ -1671,13 +1674,81 @@ function Grid({ container, spacing, ...props }) {
 }
 Grid.displayName = "ToolkitGrid";
 
+// src/components/IconText/IconText.tsx
+import React4 from "react";
+
+// src/components/IconText/IconText.styles.tsx
+import { styled as styled7 } from "@mui/material/styles";
+import { SvgIcon as SvgIcon4 } from "@mui/material";
+var StyledIconTextRoot = styled7("div")(
+  ({ $inheritFontFamily }) => ({
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: "inherit",
+    color: "inherit",
+    fontSize: "inherit",
+    fontWeight: "inherit",
+    textAlign: "inherit",
+    textTransform: "inherit",
+    ...$inheritFontFamily && {
+      fontFamily: "inherit",
+      lineHeight: "inherit"
+    }
+  })
+);
+var StyledIconTextSymbol = styled7(SvgIcon4, {
+  shouldForwardProp: (prop) => prop !== "$position"
+})(({ theme, $position }) => ({
+  flexShrink: 0,
+  marginRight: $position === "front" ? theme.spacing(1) : 0,
+  marginLeft: $position === "end" ? theme.spacing(1) : 0
+}));
+
+// src/components/IconText/IconText.tsx
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+var IconText = React4.forwardRef(
+  function IconText2({
+    symbol,
+    symbolPosition = "front",
+    symbolProps,
+    inheritFontFamily = false,
+    children,
+    ...rest
+  }, ref) {
+    const icon = /* @__PURE__ */ jsx13(
+      StyledIconTextSymbol,
+      {
+        $position: symbolPosition,
+        viewBox: symbol.viewBox ?? "0 0 24 24",
+        "aria-hidden": "true",
+        ...symbolProps,
+        children: symbol.content && /* @__PURE__ */ jsx13("g", { dangerouslySetInnerHTML: { __html: symbol.content } })
+      }
+    );
+    return /* @__PURE__ */ jsxs3(
+      StyledIconTextRoot,
+      {
+        ref,
+        $inheritFontFamily: inheritFontFamily,
+        ...getCleanProps(rest),
+        children: [
+          symbolPosition === "front" && icon,
+          children,
+          symbolPosition === "end" && icon
+        ]
+      }
+    );
+  }
+);
+IconText.displayName = "ToolkitIconText";
+
 // src/components/InternalLinkItem/InternalLinkItem.tsx
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 // src/components/InternalLinkItem/InternalLinkItem.styles.tsx
 import Box2 from "@mui/material/Box";
-import { styled as styled7 } from "@mui/material/styles";
-var StyledWrapper = styled7("div")(({ theme }) => ({
+import { styled as styled8 } from "@mui/material/styles";
+var StyledWrapper = styled8("div")(({ theme }) => ({
   "& > a, & > div": {
     textDecoration: "none",
     color: theme.tokens.colors.textPrimary,
@@ -1686,7 +1757,7 @@ var StyledWrapper = styled7("div")(({ theme }) => ({
     }
   }
 }));
-var StyledListItemContainer = styled7(Box2)(({ theme }) => ({
+var StyledListItemContainer = styled8(Box2)(({ theme }) => ({
   width: "100%",
   minHeight: "66px",
   borderTop: `1px solid ${theme.tokens.colors.divider}`,
@@ -1729,19 +1800,19 @@ var StyledListItemContainer = styled7(Box2)(({ theme }) => ({
     outlineStyle: "solid"
   }
 }));
-var StyledLeftIconWrapper = styled7("span")({
+var StyledLeftIconWrapper = styled8("span")({
   display: "flex",
   paddingLeft: "4px"
 });
-var StyledRightIconWrapper = styled7("span")({
+var StyledRightIconWrapper = styled8("span")({
   display: "flex",
   paddingRight: "4px"
 });
-var StyledLabelContainer = styled7("div")({
+var StyledLabelContainer = styled8("div")({
   flex: 1,
   padding: "12px 8px"
 });
-var StyledLabel = styled7("p")(({ theme }) => ({
+var StyledLabel = styled8("p")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   fontSize: theme.tokens.typography.fontSizeLg,
   lineHeight: "20px",
@@ -1749,7 +1820,7 @@ var StyledLabel = styled7("p")(({ theme }) => ({
   margin: 0,
   textDecoration: "none"
 }));
-var StyledCaption = styled7("p")(({ theme }) => ({
+var StyledCaption = styled8("p")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   color: theme.tokens.colors.textSecondary,
   fontSize: theme.tokens.typography.fontSizeLg,
@@ -1760,7 +1831,7 @@ var StyledCaption = styled7("p")(({ theme }) => ({
 }));
 
 // src/components/InternalLinkItem/InternalLinkItem.tsx
-import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 function InternalLinkItem({
   link,
   icon,
@@ -1769,19 +1840,19 @@ function InternalLinkItem({
   component,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsx13(StyledWrapper, { "data-component-id": "internalLinkItem", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx14(StyledWrapper, { "data-component-id": "internalLinkItem", children: /* @__PURE__ */ jsxs4(
     StyledListItemContainer,
     {
       component: component ?? "a",
       href: link,
       ...getCleanProps(restProps),
       children: [
-        icon && /* @__PURE__ */ jsx13(StyledLeftIconWrapper, { "data-testid": "icon_container", children: icon }),
-        /* @__PURE__ */ jsxs3(StyledLabelContainer, { children: [
-          /* @__PURE__ */ jsx13(StyledLabel, { className: "itemLabel", children: label }),
-          caption && /* @__PURE__ */ jsx13(StyledCaption, { children: caption })
+        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 })
         ] }),
-        /* @__PURE__ */ jsx13(StyledRightIconWrapper, { className: "iconColor", "data-testid": "icon_action_container", children: /* @__PURE__ */ jsx13(ChevronRightIcon, { fontSize: "small" }) })
+        /* @__PURE__ */ jsx14(StyledRightIconWrapper, { className: "iconColor", "data-testid": "icon_action_container", children: /* @__PURE__ */ jsx14(ChevronRightIcon, { fontSize: "small" }) })
       ]
     }
   ) });
@@ -1789,14 +1860,14 @@ function InternalLinkItem({
 InternalLinkItem.displayName = "ToolkitInternalLinkItem";
 
 // src/components/Link/Link.tsx
-import React4 from "react";
+import React5 from "react";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import SvgIcon4 from "@mui/material/SvgIcon";
+import SvgIcon5 from "@mui/material/SvgIcon";
 
 // src/components/Link/Link.styles.tsx
 import Box3 from "@mui/material/Box";
-import { styled as styled8, alpha as alpha2 } from "@mui/material/styles";
-var StyledScreenReaderOnly = styled8("span")({
+import { styled as styled9, alpha as alpha2 } from "@mui/material/styles";
+var StyledScreenReaderOnly = styled9("span")({
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -1807,17 +1878,17 @@ var StyledScreenReaderOnly = styled8("span")({
   whiteSpace: "nowrap",
   border: 0
 });
-var StyledIconSpan = styled8("span", {
-  shouldForwardProp: (prop) => prop !== "iconright"
-})(({ iconright }) => ({
+var StyledIconSpan = styled9("span", {
+  shouldForwardProp: (prop) => prop !== "iconRight"
+})(({ iconRight }) => ({
   display: "inline-flex",
   alignItems: "center",
-  paddingLeft: iconright ? "4px" : void 0,
-  paddingRight: iconright ? void 0 : "4px"
+  paddingLeft: iconRight ? "4px" : void 0,
+  paddingRight: iconRight ? void 0 : "4px"
 }));
-var StyledAnchor = styled8(Box3, {
-  shouldForwardProp: (prop) => !["tint", "isOnDarkBg", "standalonelink", "iconright"].includes(prop)
-})(({ theme, tint = "primary", isOnDarkBg, standalonelink, iconright }) => {
+var StyledAnchor = styled9(Box3, {
+  shouldForwardProp: (prop) => !["tint", "isOnDarkBg", "standalonelink", "iconRight"].includes(prop)
+})(({ theme, tint = "primary", isOnDarkBg, standalonelink, iconRight }) => {
   const resolvedTint = isOnDarkBg ? "white" : tint;
   const baseColors = {
     primary: theme.tokens.colors.primary,
@@ -1836,7 +1907,7 @@ var StyledAnchor = styled8(Box3, {
   return {
     display: "inline-flex",
     alignItems: "center",
-    flexDirection: iconright ? "row-reverse" : void 0,
+    flexDirection: iconRight ? "row-reverse" : void 0,
     verticalAlign: "bottom",
     fontFamily: theme.tokens.typography.fontFamilyBase,
     textDecoration: "underline",
@@ -1874,14 +1945,14 @@ var StyledAnchor = styled8(Box3, {
 });
 
 // src/components/Link/Link.tsx
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var Variant = {
   standard: "standard",
   external: "external",
   file: "file"
 };
 function DocumentIcon() {
-  return /* @__PURE__ */ jsx14(SvgIcon4, { viewBox: "0 0 384 512", fontSize: "inherit", children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(SvgIcon5, { viewBox: "0 0 384 512", fontSize: "inherit", children: /* @__PURE__ */ jsx15(
     "path",
     {
       fillRule: "evenodd",
@@ -1899,7 +1970,7 @@ function getIcon(variant, icon) {
       return icon;
   }
 }
-var Link = React4.forwardRef(function Link2({
+var Link = React5.forwardRef(function Link2({
   children,
   variant = "standard",
   icon,
@@ -1914,9 +1985,9 @@ var Link = React4.forwardRef(function Link2({
 }, ref) {
   const Icon = getIcon(variant, icon);
   const target = variant !== Variant.standard ? "_blank" : targetProp;
-  const iconright = variant === Variant.external ? true : !!iconToRight;
+  const iconRight = variant === Variant.external ? true : !!iconToRight;
   const urlProp = component ? { to: href } : { href };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     StyledAnchor,
     {
       component: component ?? "a",
@@ -1926,13 +1997,13 @@ var Link = React4.forwardRef(function Link2({
       tint: color,
       isOnDarkBg,
       target,
-      iconright,
+      iconRight,
       standalonelink: !!standalone,
       ref,
       children: [
-        Icon && /* @__PURE__ */ jsx14(StyledIconSpan, { iconright, children: /* @__PURE__ */ jsx14(Icon, { fontSize: "inherit" }) }),
+        Icon && /* @__PURE__ */ jsx15(StyledIconSpan, { iconRight, children: /* @__PURE__ */ jsx15(Icon, { fontSize: "inherit" }) }),
         children,
-        variant === Variant.external && /* @__PURE__ */ jsx14(StyledScreenReaderOnly, { children: ", opens in a new tab" })
+        variant === Variant.external && /* @__PURE__ */ jsx15(StyledScreenReaderOnly, { children: ", opens in a new tab" })
       ]
     }
   );
@@ -1940,12 +2011,12 @@ var Link = React4.forwardRef(function Link2({
 Link.displayName = "ToolkitLink";
 
 // src/components/LogoLink/LogoLink.tsx
-import React5 from "react";
+import React6 from "react";
 
 // src/components/LogoLink/LogoLink.styles.tsx
 import Box4 from "@mui/material/Box";
-import { styled as styled9 } from "@mui/material/styles";
-var StyledLogoLink = styled9(Box4, {
+import { styled as styled10 } from "@mui/material/styles";
+var StyledLogoLink = styled10(Box4, {
   shouldForwardProp: (prop) => prop !== "isSmall"
 })(({ theme, isSmall }) => ({
   display: "inline-flex",
@@ -1962,7 +2033,7 @@ var StyledLogoLink = styled9(Box4, {
     color: theme.tokens.colors.primaryDark
   }
 }));
-var StyledLogoSpan = styled9("span")(({ theme }) => ({
+var StyledLogoSpan = styled10("span")(({ theme }) => ({
   padding: "0 10px 0 15px",
   backgroundColor: theme.tokens.colors.primary,
   height: "100%",
@@ -1980,9 +2051,9 @@ var StyledLogoSpan = styled9("span")(({ theme }) => ({
 }));
 
 // src/components/LogoLink/LogoLink.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var LogoLink = React5.forwardRef(function LogoLink2({ children, href = "/", isSmall, title = "Home", component, ...restProps }, ref) {
-  return /* @__PURE__ */ jsx15(
+import { jsx as jsx16 } from "react/jsx-runtime";
+var LogoLink = React6.forwardRef(function LogoLink2({ children, href = "/", isSmall, title = "Home", component, ...restProps }, ref) {
+  return /* @__PURE__ */ jsx16(
     StyledLogoLink,
     {
       component: component ?? "a",
@@ -1992,14 +2063,14 @@ var LogoLink = React5.forwardRef(function LogoLink2({ children, href = "/", isSm
       "data-component-id": "LogoLink",
       ...getCleanProps(restProps),
       ref,
-      children: /* @__PURE__ */ jsx15(StyledLogoSpan, { children })
+      children: /* @__PURE__ */ jsx16(StyledLogoSpan, { children })
     }
   );
 });
 LogoLink.displayName = "ToolkitLogoLink";
 
 // src/components/PageSpinner/PageSpinner.tsx
-import React6, { useEffect, useRef } from "react";
+import React7, { useEffect, useRef } from "react";
 import Portal from "@mui/material/Portal";
 import CircularProgress3 from "@mui/material/CircularProgress";
 import { useForkRef } from "@mui/material/utils";
@@ -2160,13 +2231,13 @@ function setA11yMessage(messageText, messageTone, messageRole, clearAfter = 5e3)
 }
 
 // src/components/PageSpinner/PageSpinner.styles.tsx
-import { styled as styled10 } from "@mui/material/styles";
+import { styled as styled11 } from "@mui/material/styles";
 import { alpha as alpha3 } from "@mui/material/styles";
 var PAGE_SPINNER_Z_INDEX = 1400;
-var StyledPageSpinnerRoot = styled10("div")(() => ({
+var StyledPageSpinnerRoot = styled11("div")(() => ({
   position: "relative"
 }));
-var StyledOverlay = styled10("div", {
+var StyledOverlay = styled11("div", {
   shouldForwardProp: (prop) => prop !== "$darkBg"
 })(({ theme, $darkBg = false }) => ({
   position: "fixed",
@@ -2174,7 +2245,7 @@ var StyledOverlay = styled10("div", {
   zIndex: PAGE_SPINNER_Z_INDEX,
   backgroundColor: $darkBg ? alpha3(theme.tokens.colors.textPrimary, 0.9) : alpha3(theme.palette.common.white, 0.9)
 }));
-var StyledSpinnerCentre = styled10("div")(() => ({
+var StyledSpinnerCentre = styled11("div")(() => ({
   position: "fixed",
   top: "50%",
   left: "50%",
@@ -2185,7 +2256,7 @@ var StyledSpinnerCentre = styled10("div")(() => ({
   alignItems: "center",
   gap: "16px"
 }));
-var StyledSpinnerMessage = styled10("p", {
+var StyledSpinnerMessage = styled11("p", {
   shouldForwardProp: (prop) => prop !== "$darkBg"
 })(({ theme, $darkBg = false }) => ({
   margin: 0,
@@ -2196,7 +2267,7 @@ var StyledSpinnerMessage = styled10("p", {
   color: $darkBg ? theme.palette.common.white : theme.tokens.colors.textPrimary,
   textAlign: "center"
 }));
-var StyledScreenReaderOnly2 = styled10("span")(() => ({
+var StyledScreenReaderOnly2 = styled11("span")(() => ({
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -2209,9 +2280,9 @@ var StyledScreenReaderOnly2 = styled10("span")(() => ({
 }));
 
 // src/components/PageSpinner/PageSpinner.tsx
-import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
 var ARIA_REANNOUNCE_INTERVAL = 3e4;
-var PageSpinner = React6.forwardRef(
+var PageSpinner = React7.forwardRef(
   function PageSpinner2({
     message = "Processing, please wait",
     customMessageLayout,
@@ -2243,7 +2314,7 @@ var PageSpinner = React6.forwardRef(
         backgroundScrollTether(false);
       };
     }, [message, rootNode, messageTone]);
-    return /* @__PURE__ */ jsx16(Portal, { container: rootNode, children: /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsx17(Portal, { container: rootNode, children: /* @__PURE__ */ jsxs6(
       StyledPageSpinnerRoot,
       {
         "data-component-id": "PageSpinner",
@@ -2251,9 +2322,9 @@ var PageSpinner = React6.forwardRef(
         ref: mergedRef,
         ...getCleanProps(restProps),
         children: [
-          /* @__PURE__ */ jsx16(StyledOverlay, { $darkBg: isOnDarkBg }),
-          /* @__PURE__ */ jsxs5(StyledSpinnerCentre, { children: [
-            /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(StyledOverlay, { $darkBg: isOnDarkBg }),
+          /* @__PURE__ */ jsxs6(StyledSpinnerCentre, { children: [
+            /* @__PURE__ */ jsx17(
               CircularProgress3,
               {
                 size: 60,
@@ -2261,8 +2332,8 @@ var PageSpinner = React6.forwardRef(
                 "aria-hidden": "true"
               }
             ),
-            customMessageLayout ?? /* @__PURE__ */ jsx16(StyledSpinnerMessage, { $darkBg: isOnDarkBg, children: message }),
-            srText && /* @__PURE__ */ jsx16(StyledScreenReaderOnly2, { children: srText })
+            customMessageLayout ?? /* @__PURE__ */ jsx17(StyledSpinnerMessage, { $darkBg: isOnDarkBg, children: message }),
+            srText && /* @__PURE__ */ jsx17(StyledScreenReaderOnly2, { children: srText })
           ] })
         ]
       }
@@ -2272,11 +2343,11 @@ var PageSpinner = React6.forwardRef(
 PageSpinner.displayName = "ToolkitPageSpinner";
 
 // src/components/Pagination/Pagination.tsx
-import React7 from "react";
+import React8 from "react";
 import MuiPagination from "@mui/material/Pagination";
 
 // src/components/Pagination/Pagination.styles.tsx
-import { styled as styled11, alpha as alpha4 } from "@mui/material/styles";
+import { styled as styled12, alpha as alpha4 } from "@mui/material/styles";
 import MuiPaginationItem from "@mui/material/PaginationItem";
 function getColorValue(theme, color) {
   switch (color) {
@@ -2296,7 +2367,7 @@ function getColorValue(theme, color) {
       return theme.tokens.colors.textPrimary;
   }
 }
-var StyledPaginationItem = styled11(MuiPaginationItem, {
+var StyledPaginationItem = styled12(MuiPaginationItem, {
   shouldForwardProp: (prop) => prop !== "$variant" && prop !== "$color"
 })(({ theme, $variant, $color }) => {
   const colorValue = getColorValue(theme, $color);
@@ -2339,15 +2410,15 @@ var StyledPaginationItem = styled11(MuiPaginationItem, {
 });
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Pagination = React7.forwardRef(
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Pagination = React8.forwardRef(
   function Pagination2({ variant = "text", shape = "circular", color = "default", ...restProps }, ref) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       MuiPagination,
       {
         ref,
         "data-component-id": "Pagination",
-        renderItem: (item) => /* @__PURE__ */ jsx17(
+        renderItem: (item) => /* @__PURE__ */ jsx18(
           StyledPaginationItem,
           {
             $variant: variant,
@@ -2364,11 +2435,11 @@ var Pagination = React7.forwardRef(
 Pagination.displayName = "ToolkitPagination";
 
 // src/components/Paragraph/Paragraph.tsx
-import React8 from "react";
+import React9 from "react";
 
 // src/components/Paragraph/Paragraph.styles.tsx
-import { styled as styled12 } from "@mui/material/styles";
-var StyledParagraph = styled12("p", {
+import { styled as styled13 } from "@mui/material/styles";
+var StyledParagraph = styled13("p", {
   shouldForwardProp: (prop) => prop !== "$variant" && prop !== "$isOnDarkBg"
 })(({ theme, $variant = "regular", $isOnDarkBg = false }) => ({
   margin: 0,
@@ -2401,10 +2472,10 @@ var StyledParagraph = styled12("p", {
 }));
 
 // src/components/Paragraph/Paragraph.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Paragraph = React8.forwardRef(
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Paragraph = React9.forwardRef(
   function Paragraph2({ children, variant = "regular", isOnDarkBg = false, ...restProps }, ref) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       StyledParagraph,
       {
         $variant: variant,
@@ -2420,15 +2491,15 @@ var Paragraph = React8.forwardRef(
 Paragraph.displayName = "ToolkitParagraph";
 
 // src/components/Password/Password.tsx
-import React9, { useState as useState3 } from "react";
+import React10, { useState as useState3 } 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 styled13 } from "@mui/material/styles";
-var StyledPasswordRule = styled13("div")(({ theme }) => ({
+import { styled as styled14 } from "@mui/material/styles";
+var StyledPasswordRule = styled14("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.tokens.spacing.xs,
@@ -2440,15 +2511,15 @@ var StyledPasswordRule = styled13("div")(({ theme }) => ({
     color: theme.tokens.colors.error
   }
 }));
-var StyledPasswordRuleIcon = styled13("span")({
+var StyledPasswordRuleIcon = styled14("span")({
   display: "inline-flex",
   alignItems: "center",
   flexShrink: 0
 });
-var StyledPasswordRuleText = styled13("span")(({ theme }) => ({
+var StyledPasswordRuleText = styled14("span")(({ theme }) => ({
   fontSize: theme.tokens.typography.fontSizeSm
 }));
-var StyledScreenReaderOnly3 = styled13("span")({
+var StyledScreenReaderOnly3 = styled14("span")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -2461,24 +2532,24 @@ var StyledScreenReaderOnly3 = styled13("span")({
 });
 
 // src/components/Password/PasswordRule.tsx
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
-var PasswordRule = ({ valid = false, rule = "", idx }) => /* @__PURE__ */ jsxs6(
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+var PasswordRule = ({ valid = false, rule = "", idx }) => /* @__PURE__ */ jsxs7(
   StyledPasswordRule,
   {
     className: valid ? "PasswordRule--valid" : "PasswordRule--invalid",
     "data-testid": `password-rule-${idx}`,
     children: [
-      /* @__PURE__ */ jsx19(StyledPasswordRuleIcon, { children: valid ? /* @__PURE__ */ jsx19(CheckCircleIcon, { fontSize: "small", "aria-hidden": "true" }) : /* @__PURE__ */ jsx19(CancelIcon, { fontSize: "small", "aria-hidden": "true" }) }),
-      /* @__PURE__ */ jsx19(StyledPasswordRuleText, { children: rule }),
-      /* @__PURE__ */ jsx19(StyledScreenReaderOnly3, { children: valid ? "supplied" : "not supplied" })
+      /* @__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" })
     ]
   }
 );
 PasswordRule.displayName = "ToolkitPasswordRule";
 
 // src/components/Password/PasswordCriteria.styles.tsx
-import { styled as styled14 } from "@mui/material/styles";
-var StyledPasswordCriteriaContainer = styled14("div")(
+import { styled as styled15 } from "@mui/material/styles";
+var StyledPasswordCriteriaContainer = styled15("div")(
   ({ theme, $show }) => ({
     display: $show ? "block" : "none",
     position: "absolute",
@@ -2489,7 +2560,7 @@ var StyledPasswordCriteriaContainer = styled14("div")(
     marginTop: theme.tokens.spacing.xs
   })
 );
-var StyledPasswordRuleTitle = styled14("div")(({ theme }) => ({
+var StyledPasswordRuleTitle = styled15("div")(({ theme }) => ({
   color: theme.tokens.colors.textPrimary,
   fontSize: theme.tokens.typography.fontSizeSm,
   fontWeight: theme.tokens.typography.fontWeightMedium,
@@ -2499,7 +2570,7 @@ var StyledPasswordRuleTitle = styled14("div")(({ theme }) => ({
 }));
 
 // src/components/Password/PasswordCriteria.tsx
-import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 var PasswordRules = [
   { key: "minLength", rule: "Minimum 8 characters" },
   { key: "lowercase", rule: "At least one lowercase letter" },
@@ -2514,20 +2585,20 @@ var passwordValidator = (value) => ({
   digit: /[0-9]/.test(value),
   special: /[^A-Za-z0-9]/.test(value)
 });
-var PasswordCriteria = ({ show = false, value = "" }) => {
+var PasswordCriteria = ({ show = false, value = "", id = "passwordCriteria" }) => {
   const validity = passwordValidator(value);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     StyledPasswordCriteriaContainer,
     {
       $show: show,
       "aria-hidden": !show,
-      id: "passwordCriteria",
+      id,
       "data-testid": "password-criteria",
       role: "status",
       "aria-live": "polite",
-      children: /* @__PURE__ */ jsxs7(Card, { compact: true, children: [
-        /* @__PURE__ */ jsx20(StyledPasswordRuleTitle, { children: "Password must contain:" }),
-        PasswordRules.map((item, idx) => /* @__PURE__ */ jsx20(PasswordRule, { valid: validity[item.key], rule: item.rule, idx }, item.key))
+      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))
       ] })
     }
   );
@@ -2535,18 +2606,18 @@ var PasswordCriteria = ({ show = false, value = "" }) => {
 PasswordCriteria.displayName = "ToolkitPasswordCriteria";
 
 // src/components/Password/Password.styles.tsx
-import { styled as styled15 } from "@mui/material/styles";
-var StyledPasswordRoot = styled15("div")({
+import { styled as styled16 } from "@mui/material/styles";
+var StyledPasswordRoot = styled16("div")({
   position: "relative"
 });
-var StyledPasswordInputWrapper = styled15("div")({
+var StyledPasswordInputWrapper = styled16("div")({
   display: "flex",
   position: "relative"
 });
 
 // src/components/Password/Password.tsx
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
-var Password = React9.forwardRef(
+import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+var Password = React10.forwardRef(
   function Password2({
     isInvalid,
     value: initialValue,
@@ -2575,9 +2646,10 @@ var Password = React9.forwardRef(
       const isCriteriaMet = Object.values(validity).every(Boolean);
       onChange?.(event, isCriteriaMet);
     };
+    const criteriaId = id ? `${id}-criteria` : "passwordCriteria";
     const cleanRest = getCleanProps(rest);
-    return /* @__PURE__ */ jsxs8(StyledPasswordRoot, { className, ...cleanRest, children: [
-      /* @__PURE__ */ jsx21(StyledPasswordInputWrapper, { children: /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsxs9(StyledPasswordRoot, { className, ...cleanRest, children: [
+      /* @__PURE__ */ jsx22(StyledPasswordInputWrapper, { children: /* @__PURE__ */ jsx22(
         TextField,
         {
           ref,
@@ -2587,24 +2659,26 @@ var Password = React9.forwardRef(
           showPasswordToggle: true,
           value,
           error: isInvalid,
-          "aria-describedby": ariaDescribedby ?? "passwordCriteria",
-          "aria-labelledby": ariaLabelledby,
+          inputProps: {
+            "aria-describedby": ariaDescribedby ?? criteriaId,
+            "aria-labelledby": ariaLabelledby
+          },
           onFocus: handleFocus,
           onBlur: handleBlur,
           onChange: handleChange
         }
       ) }),
-      /* @__PURE__ */ jsx21(PasswordCriteria, { show: showCriteria, value })
+      /* @__PURE__ */ jsx22(PasswordCriteria, { show: showCriteria, value, id: criteriaId })
     ] });
   }
 );
 Password.displayName = "ToolkitPassword";
 
 // src/components/Spinner/Spinner.tsx
-import React10 from "react";
+import React11 from "react";
 
 // src/components/Spinner/Spinner.styles.tsx
-import { styled as styled16, alpha as alpha5 } from "@mui/material/styles";
+import { styled as styled17, alpha as alpha5 } from "@mui/material/styles";
 var spinnerSizing = {
   xs: 20,
   sm: 24,
@@ -2612,7 +2686,7 @@ var spinnerSizing = {
   lg: 56,
   xl: 72
 };
-var StyledSpinnerContainer = styled16("div", {
+var StyledSpinnerContainer = styled17("div", {
   shouldForwardProp: (prop) => prop !== "$inline"
 })({}, ({ $inline }) => ({
   flex: "0 1 100%",
@@ -2620,7 +2694,7 @@ var StyledSpinnerContainer = styled16("div", {
   flexDirection: $inline ? "row" : "column",
   alignItems: "center"
 }));
-var StyledSpinnerIconContainer = styled16("div", {
+var StyledSpinnerIconContainer = styled17("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ $size }) => {
   const size = spinnerSizing[$size];
@@ -2630,7 +2704,7 @@ var StyledSpinnerIconContainer = styled16("div", {
     height: size
   };
 });
-var StyledSpinnerBackground = styled16("div", {
+var StyledSpinnerBackground = styled17("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ theme, $size, $darkBg }) => {
   const size = spinnerSizing[$size];
@@ -2644,7 +2718,7 @@ var StyledSpinnerBackground = styled16("div", {
     border: `${lineWidth}px solid ${borderColor}`
   };
 });
-var StyledSpinner = styled16("div", {
+var StyledSpinner = styled17("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ theme, $size, $darkBg }) => {
   const size = spinnerSizing[$size];
@@ -2667,7 +2741,7 @@ var StyledSpinner = styled16("div", {
     animation: `toolkit-spin ${animationSpeed} infinite linear`
   };
 });
-var StyledSpinnerMessage2 = styled16("span", {
+var StyledSpinnerMessage2 = styled17("span", {
   shouldForwardProp: (prop) => prop !== "$darkBg" && prop !== "$inline"
 })(({ theme, $darkBg, $inline }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
@@ -2676,7 +2750,7 @@ var StyledSpinnerMessage2 = styled16("span", {
   marginTop: $inline ? 0 : theme.spacing(1),
   marginLeft: $inline ? theme.spacing(1) : 0
 }));
-var StyledScreenReaderOnly4 = styled16("span")({
+var StyledScreenReaderOnly4 = styled17("span")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -2689,10 +2763,10 @@ var StyledScreenReaderOnly4 = styled16("span")({
 });
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
-var Spinner = React10.forwardRef(
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+var Spinner = React11.forwardRef(
   function Spinner2({ size = "sm", message, isOnDarkBg = false, srText, isInline = false, ...restProps }, ref) {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       StyledSpinnerContainer,
       {
         ref,
@@ -2700,12 +2774,12 @@ var Spinner = React10.forwardRef(
         "data-component-id": "Spinner",
         ...getCleanProps(restProps),
         children: [
-          /* @__PURE__ */ jsxs9(StyledSpinnerIconContainer, { $size: size, "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx22(StyledSpinnerBackground, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx22(StyledSpinner, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" })
+          /* @__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" })
           ] }),
-          message && /* @__PURE__ */ jsx22(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
-          srText && /* @__PURE__ */ jsx22(StyledScreenReaderOnly4, { children: srText })
+          message && /* @__PURE__ */ jsx23(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
+          srText && /* @__PURE__ */ jsx23(StyledScreenReaderOnly4, { children: srText })
         ]
       }
     );
@@ -2717,14 +2791,14 @@ Spinner.displayName = "ToolkitSpinner";
 import FormHelperText from "@mui/material/FormHelperText";
 
 // src/components/Toggle/Toggle.styles.tsx
-import { styled as styled17 } from "@mui/material/styles";
-var StyledFieldset = styled17("fieldset")(({ theme }) => ({
+import { styled as styled18 } from "@mui/material/styles";
+var StyledFieldset = styled18("fieldset")(({ theme }) => ({
   border: "none",
   margin: 0,
   padding: 0,
   minWidth: 0
 }));
-var StyledLegend = styled17("legend")(({ theme }) => ({
+var StyledLegend = styled18("legend")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   fontSize: theme.tokens.typography.fontSizeLg,
   fontWeight: theme.tokens.typography.fontWeightRegular,
@@ -2732,7 +2806,7 @@ var StyledLegend = styled17("legend")(({ theme }) => ({
   marginBottom: theme.spacing(1),
   padding: 0
 }));
-var StyledToggleWrapper = styled17("div")(({ theme }) => ({
+var StyledToggleWrapper = styled18("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   width: theme.spacing(15),
@@ -2741,7 +2815,7 @@ var StyledToggleWrapper = styled17("div")(({ theme }) => ({
   border: `1px solid ${theme.tokens.colors.border}`,
   borderRadius: theme.tokens.borderRadius.md
 }));
-var StyledSwitch = styled17("label", {
+var StyledSwitch = styled18("label", {
   shouldForwardProp: (prop) => prop !== "selected" && prop !== "controlType"
 })(({ theme, selected, controlType }) => ({
   position: "relative",
@@ -2831,7 +2905,7 @@ var StyledSwitch = styled17("label", {
 }));
 
 // src/components/Toggle/Toggle.tsx
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 function Toggle({
   name,
   checked = false,
@@ -2842,18 +2916,18 @@ function Toggle({
   onBlur,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs10(StyledFieldset, { "data-component-id": "toggle", ...getCleanProps(restProps), children: [
-    label && /* @__PURE__ */ jsx23(StyledLegend, { children: label }),
-    description && /* @__PURE__ */ jsx23(FormHelperText, { children: description }),
-    /* @__PURE__ */ jsxs10(StyledToggleWrapper, { children: [
-      /* @__PURE__ */ jsxs10(
+  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(
         StyledSwitch,
         {
           htmlFor: `${name}off`,
           selected: !checked,
           controlType: "off",
           children: [
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(
               "input",
               {
                 checked: !checked,
@@ -2869,14 +2943,14 @@ function Toggle({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11(
         StyledSwitch,
         {
           htmlFor: `${name}on`,
           selected: checked,
           controlType: "on",
           children: [
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(
               "input",
               {
                 checked,
@@ -2893,7 +2967,7 @@ function Toggle({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx23(FormHelperText, { error: true, children: error })
+    error && /* @__PURE__ */ jsx24(FormHelperText, { error: true, children: error })
   ] });
 }
 Toggle.displayName = "ToolkitToggle";
@@ -2909,37 +2983,37 @@ import {
   TablePagination as MuiTablePagination,
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { styled as styled18 } from "@mui/material/styles";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var StyledTableContainer = styled18(MuiTableContainer)(() => ({
+import { styled as styled19 } from "@mui/material/styles";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var StyledTableContainer = styled19(MuiTableContainer)(() => ({
   overflowX: "auto"
 }));
-var StyledHeadCell = styled18(MuiTableCell)(({ theme }) => ({
+var StyledHeadCell = styled19(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__ */ jsx24(MuiTable, { ...props });
+  return /* @__PURE__ */ jsx25(MuiTable, { ...props });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ jsx24(MuiTableHead, { ...props });
+  return /* @__PURE__ */ jsx25(MuiTableHead, { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx24(MuiTableBody, { ...props });
+  return /* @__PURE__ */ jsx25(MuiTableBody, { ...props });
 }
 function TableRow(props) {
-  return /* @__PURE__ */ jsx24(MuiTableRow, { ...props });
+  return /* @__PURE__ */ jsx25(MuiTableRow, { ...props });
 }
 function TableCell(props) {
-  return /* @__PURE__ */ jsx24(MuiTableCell, { ...props });
+  return /* @__PURE__ */ jsx25(MuiTableCell, { ...props });
 }
 function TableHeadCell(props) {
-  return /* @__PURE__ */ jsx24(StyledHeadCell, { component: "th", scope: "col", ...props });
+  return /* @__PURE__ */ jsx25(StyledHeadCell, { component: "th", scope: "col", ...props });
 }
 function TableContainer(props) {
-  return /* @__PURE__ */ jsx24(StyledTableContainer, { ...props });
+  return /* @__PURE__ */ jsx25(StyledTableContainer, { ...props });
 }
 var TablePagination = MuiTablePagination;
 var TableSortLabel = MuiTableSortLabel;
@@ -2952,144 +3026,144 @@ TableHeadCell.displayName = "ToolkitTableHeadCell";
 TableContainer.displayName = "ToolkitTableContainer";
 
 // src/foundation/H1/H1.tsx
-import React11 from "react";
+import React12 from "react";
 import { Typography } from "@mui/material";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var H1 = React11.forwardRef(
+import { jsx as jsx26 } from "react/jsx-runtime";
+var H1 = React12.forwardRef(
   function H12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx25(Typography, { ref, variant: "h1", color, ...props, children });
+    return /* @__PURE__ */ jsx26(Typography, { ref, variant: "h1", color, ...props, children });
   }
 );
 H1.displayName = "ToolkitH1";
 
 // src/foundation/H2/H2.tsx
-import React12 from "react";
+import React13 from "react";
 import { Typography as Typography2 } from "@mui/material";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var H2 = React12.forwardRef(
+import { jsx as jsx27 } from "react/jsx-runtime";
+var H2 = React13.forwardRef(
   function H22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx26(Typography2, { ref, variant: "h2", color, ...props, children });
+    return /* @__PURE__ */ jsx27(Typography2, { ref, variant: "h2", color, ...props, children });
   }
 );
 H2.displayName = "ToolkitH2";
 
 // src/foundation/H3/H3.tsx
-import React13 from "react";
+import React14 from "react";
 import { Typography as Typography3 } from "@mui/material";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var H3 = React13.forwardRef(
+import { jsx as jsx28 } from "react/jsx-runtime";
+var H3 = React14.forwardRef(
   function H32({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx27(Typography3, { ref, variant: "h3", color, ...props, children });
+    return /* @__PURE__ */ jsx28(Typography3, { ref, variant: "h3", color, ...props, children });
   }
 );
 H3.displayName = "ToolkitH3";
 
 // src/foundation/H4/H4.tsx
-import React14 from "react";
+import React15 from "react";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var H4 = React14.forwardRef(
+import { jsx as jsx29 } from "react/jsx-runtime";
+var H4 = React15.forwardRef(
   function H42({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx28(Typography4, { ref, variant: "h4", color, ...props, children });
+    return /* @__PURE__ */ jsx29(Typography4, { ref, variant: "h4", color, ...props, children });
   }
 );
 H4.displayName = "ToolkitH4";
 
 // src/foundation/H5/H5.tsx
-import React15 from "react";
+import React16 from "react";
 import { Typography as Typography5 } from "@mui/material";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var H5 = React15.forwardRef(
+import { jsx as jsx30 } from "react/jsx-runtime";
+var H5 = React16.forwardRef(
   function H52({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx29(Typography5, { ref, variant: "h5", color, ...props, children });
+    return /* @__PURE__ */ jsx30(Typography5, { ref, variant: "h5", color, ...props, children });
   }
 );
 H5.displayName = "ToolkitH5";
 
 // src/foundation/H6/H6.tsx
-import React16 from "react";
+import React17 from "react";
 import { Typography as Typography6 } from "@mui/material";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var H6 = React16.forwardRef(
+import { jsx as jsx31 } from "react/jsx-runtime";
+var H6 = React17.forwardRef(
   function H62({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx30(Typography6, { ref, variant: "h6", color, ...props, children });
+    return /* @__PURE__ */ jsx31(Typography6, { ref, variant: "h6", color, ...props, children });
   }
 );
 H6.displayName = "ToolkitH6";
 
 // src/foundation/Subtitle1/Subtitle1.tsx
-import React17 from "react";
+import React18 from "react";
 import { Typography as Typography7 } from "@mui/material";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var Subtitle1 = React17.forwardRef(
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Subtitle1 = React18.forwardRef(
   function Subtitle12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx31(Typography7, { ref, variant: "subtitle1", color, ...props, children });
+    return /* @__PURE__ */ jsx32(Typography7, { ref, variant: "subtitle1", color, ...props, children });
   }
 );
 Subtitle1.displayName = "ToolkitSubtitle1";
 
 // src/foundation/Subtitle2/Subtitle2.tsx
-import React18 from "react";
+import React19 from "react";
 import { Typography as Typography8 } from "@mui/material";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var Subtitle2 = React18.forwardRef(
+import { jsx as jsx33 } from "react/jsx-runtime";
+var Subtitle2 = React19.forwardRef(
   function Subtitle22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx32(Typography8, { ref, variant: "subtitle2", color, ...props, children });
+    return /* @__PURE__ */ jsx33(Typography8, { ref, variant: "subtitle2", color, ...props, children });
   }
 );
 Subtitle2.displayName = "ToolkitSubtitle2";
 
 // src/foundation/Body1/Body1.tsx
-import React19 from "react";
+import React20 from "react";
 import { Typography as Typography9 } from "@mui/material";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Body1 = React19.forwardRef(
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Body1 = React20.forwardRef(
   function Body12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx33(Typography9, { ref, variant: "body1", color, ...props, children });
+    return /* @__PURE__ */ jsx34(Typography9, { ref, variant: "body1", color, ...props, children });
   }
 );
 Body1.displayName = "ToolkitBody1";
 
 // src/foundation/Body2/Body2.tsx
-import React20 from "react";
+import React21 from "react";
 import { Typography as Typography10 } from "@mui/material";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var Body2 = React20.forwardRef(
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Body2 = React21.forwardRef(
   function Body22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx34(Typography10, { ref, variant: "body2", color, ...props, children });
+    return /* @__PURE__ */ jsx35(Typography10, { ref, variant: "body2", color, ...props, children });
   }
 );
 Body2.displayName = "ToolkitBody2";
 
 // src/foundation/Caption/Caption.tsx
-import React21 from "react";
+import React22 from "react";
 import { Typography as Typography11 } from "@mui/material";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var Caption = React21.forwardRef(
+import { jsx as jsx36 } from "react/jsx-runtime";
+var Caption = React22.forwardRef(
   function Caption2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx35(Typography11, { ref, variant: "caption", color, ...props, children });
+    return /* @__PURE__ */ jsx36(Typography11, { ref, variant: "caption", color, ...props, children });
   }
 );
 Caption.displayName = "ToolkitCaption";
 
 // src/foundation/Overline/Overline.tsx
-import React22 from "react";
+import React23 from "react";
 import { Typography as Typography12 } from "@mui/material";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var Overline = React22.forwardRef(
+import { jsx as jsx37 } from "react/jsx-runtime";
+var Overline = React23.forwardRef(
   function Overline2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx36(Typography12, { ref, variant: "overline", color, ...props, children });
+    return /* @__PURE__ */ jsx37(Typography12, { ref, variant: "overline", color, ...props, children });
   }
 );
 Overline.displayName = "ToolkitOverline";
 
 // src/foundation/TypographyButton/TypographyButton.tsx
-import React23 from "react";
+import React24 from "react";
 import { Typography as Typography13 } from "@mui/material";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var TypographyButton = React23.forwardRef(
+import { jsx as jsx38 } from "react/jsx-runtime";
+var TypographyButton = React24.forwardRef(
   function TypographyButton2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx37(Typography13, { ref, variant: "button", color, ...props, children });
+    return /* @__PURE__ */ jsx38(Typography13, { ref, variant: "button", color, ...props, children });
   }
 );
 TypographyButton.displayName = "ToolkitTypographyButton";
@@ -3129,6 +3203,7 @@ export {
   H4,
   H5,
   H6,
+  IconText,
   InternalLinkItem,
   Link,
   LogoLink,