@octoguide/mui-ui-toolkit 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -2419,11 +2419,192 @@ var Paragraph = React8.forwardRef(
 );
 Paragraph.displayName = "ToolkitParagraph";
 
+// src/components/Password/Password.tsx
+import React9, { 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 }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.tokens.spacing.xs,
+  padding: `${theme.tokens.spacing.xs} 0`,
+  "&.PasswordRule--valid": {
+    color: theme.tokens.colors.success
+  },
+  "&.PasswordRule--invalid": {
+    color: theme.tokens.colors.error
+  }
+}));
+var StyledPasswordRuleIcon = styled13("span")({
+  display: "inline-flex",
+  alignItems: "center",
+  flexShrink: 0
+});
+var StyledPasswordRuleText = styled13("span")(({ theme }) => ({
+  fontSize: theme.tokens.typography.fontSizeSm
+}));
+var StyledScreenReaderOnly3 = styled13("span")({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+});
+
+// src/components/Password/PasswordRule.tsx
+import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+var PasswordRule = ({ valid = false, rule = "", idx }) => /* @__PURE__ */ jsxs6(
+  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" })
+    ]
+  }
+);
+PasswordRule.displayName = "ToolkitPasswordRule";
+
+// src/components/Password/PasswordCriteria.styles.tsx
+import { styled as styled14 } from "@mui/material/styles";
+var StyledPasswordCriteriaContainer = styled14("div")(
+  ({ theme, $show }) => ({
+    display: $show ? "block" : "none",
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    zIndex: theme.tokens.zIndex.dropdown,
+    marginTop: theme.tokens.spacing.xs
+  })
+);
+var StyledPasswordRuleTitle = styled14("div")(({ theme }) => ({
+  color: theme.tokens.colors.textPrimary,
+  fontSize: theme.tokens.typography.fontSizeSm,
+  fontWeight: theme.tokens.typography.fontWeightMedium,
+  padding: `${theme.tokens.spacing.xs} 0`,
+  borderBottom: `1px solid ${theme.tokens.colors.border}`,
+  marginBottom: theme.tokens.spacing.xs
+}));
+
+// src/components/Password/PasswordCriteria.tsx
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+var PasswordRules = [
+  { key: "minLength", rule: "Minimum 8 characters" },
+  { key: "lowercase", rule: "At least one lowercase letter" },
+  { key: "uppercase", rule: "At least one uppercase letter" },
+  { key: "digit", rule: "At least one number" },
+  { key: "special", rule: "At least one special character" }
+];
+var passwordValidator = (value) => ({
+  minLength: value.length >= 8,
+  lowercase: /[a-z]/.test(value),
+  uppercase: /[A-Z]/.test(value),
+  digit: /[0-9]/.test(value),
+  special: /[^A-Za-z0-9]/.test(value)
+});
+var PasswordCriteria = ({ show = false, value = "" }) => {
+  const validity = passwordValidator(value);
+  return /* @__PURE__ */ jsx20(
+    StyledPasswordCriteriaContainer,
+    {
+      $show: show,
+      "aria-hidden": !show,
+      id: "passwordCriteria",
+      "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))
+      ] })
+    }
+  );
+};
+PasswordCriteria.displayName = "ToolkitPasswordCriteria";
+
+// src/components/Password/Password.styles.tsx
+import { styled as styled15 } from "@mui/material/styles";
+var StyledPasswordRoot = styled15("div")({
+  position: "relative"
+});
+var StyledPasswordInputWrapper = styled15("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(
+  function Password2({
+    isInvalid,
+    value: initialValue,
+    label = "Password",
+    onBlur,
+    onChange,
+    ariaDescribedby,
+    ariaLabelledby,
+    className,
+    id,
+    ...rest
+  }, ref) {
+    const [value, setValue] = useState3(initialValue ?? "");
+    const [showCriteria, setShowCriteria] = useState3(false);
+    const handleFocus = () => {
+      setShowCriteria(true);
+    };
+    const handleBlur = (event) => {
+      setShowCriteria(false);
+      onBlur?.(event);
+    };
+    const handleChange = (event) => {
+      const newValue = event.target.value;
+      setValue(newValue);
+      const validity = passwordValidator(newValue);
+      const isCriteriaMet = Object.values(validity).every(Boolean);
+      onChange?.(event, isCriteriaMet);
+    };
+    const cleanRest = getCleanProps(rest);
+    return /* @__PURE__ */ jsxs8(StyledPasswordRoot, { className, ...cleanRest, children: [
+      /* @__PURE__ */ jsx21(StyledPasswordInputWrapper, { children: /* @__PURE__ */ jsx21(
+        TextField,
+        {
+          ref,
+          id,
+          label: ariaLabelledby ? void 0 : label,
+          type: "password",
+          showPasswordToggle: true,
+          value,
+          error: isInvalid,
+          "aria-describedby": ariaDescribedby ?? "passwordCriteria",
+          "aria-labelledby": ariaLabelledby,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onChange: handleChange
+        }
+      ) }),
+      /* @__PURE__ */ jsx21(PasswordCriteria, { show: showCriteria, value })
+    ] });
+  }
+);
+Password.displayName = "ToolkitPassword";
+
 // src/components/Spinner/Spinner.tsx
-import React9 from "react";
+import React10 from "react";
 
 // src/components/Spinner/Spinner.styles.tsx
-import { styled as styled13, alpha as alpha5 } from "@mui/material/styles";
+import { styled as styled16, alpha as alpha5 } from "@mui/material/styles";
 var spinnerSizing = {
   xs: 20,
   sm: 24,
@@ -2431,7 +2612,7 @@ var spinnerSizing = {
   lg: 56,
   xl: 72
 };
-var StyledSpinnerContainer = styled13("div", {
+var StyledSpinnerContainer = styled16("div", {
   shouldForwardProp: (prop) => prop !== "$inline"
 })({}, ({ $inline }) => ({
   flex: "0 1 100%",
@@ -2439,7 +2620,7 @@ var StyledSpinnerContainer = styled13("div", {
   flexDirection: $inline ? "row" : "column",
   alignItems: "center"
 }));
-var StyledSpinnerIconContainer = styled13("div", {
+var StyledSpinnerIconContainer = styled16("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ $size }) => {
   const size = spinnerSizing[$size];
@@ -2449,7 +2630,7 @@ var StyledSpinnerIconContainer = styled13("div", {
     height: size
   };
 });
-var StyledSpinnerBackground = styled13("div", {
+var StyledSpinnerBackground = styled16("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ theme, $size, $darkBg }) => {
   const size = spinnerSizing[$size];
@@ -2463,7 +2644,7 @@ var StyledSpinnerBackground = styled13("div", {
     border: `${lineWidth}px solid ${borderColor}`
   };
 });
-var StyledSpinner = styled13("div", {
+var StyledSpinner = styled16("div", {
   shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
 })(({ theme, $size, $darkBg }) => {
   const size = spinnerSizing[$size];
@@ -2486,7 +2667,7 @@ var StyledSpinner = styled13("div", {
     animation: `toolkit-spin ${animationSpeed} infinite linear`
   };
 });
-var StyledSpinnerMessage2 = styled13("span", {
+var StyledSpinnerMessage2 = styled16("span", {
   shouldForwardProp: (prop) => prop !== "$darkBg" && prop !== "$inline"
 })(({ theme, $darkBg, $inline }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
@@ -2495,7 +2676,7 @@ var StyledSpinnerMessage2 = styled13("span", {
   marginTop: $inline ? 0 : theme.spacing(1),
   marginLeft: $inline ? theme.spacing(1) : 0
 }));
-var StyledScreenReaderOnly3 = styled13("span")({
+var StyledScreenReaderOnly4 = styled16("span")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -2508,10 +2689,10 @@ var StyledScreenReaderOnly3 = styled13("span")({
 });
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
-var Spinner = React9.forwardRef(
+import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+var Spinner = React10.forwardRef(
   function Spinner2({ size = "sm", message, isOnDarkBg = false, srText, isInline = false, ...restProps }, ref) {
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs9(
       StyledSpinnerContainer,
       {
         ref,
@@ -2519,12 +2700,12 @@ var Spinner = React9.forwardRef(
         "data-component-id": "Spinner",
         ...getCleanProps(restProps),
         children: [
-          /* @__PURE__ */ jsxs6(StyledSpinnerIconContainer, { $size: size, "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx19(StyledSpinnerBackground, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx19(StyledSpinner, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" })
+          /* @__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" })
           ] }),
-          message && /* @__PURE__ */ jsx19(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
-          srText && /* @__PURE__ */ jsx19(StyledScreenReaderOnly3, { children: srText })
+          message && /* @__PURE__ */ jsx22(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
+          srText && /* @__PURE__ */ jsx22(StyledScreenReaderOnly4, { children: srText })
         ]
       }
     );
@@ -2536,14 +2717,14 @@ Spinner.displayName = "ToolkitSpinner";
 import FormHelperText from "@mui/material/FormHelperText";
 
 // src/components/Toggle/Toggle.styles.tsx
-import { styled as styled14 } from "@mui/material/styles";
-var StyledFieldset = styled14("fieldset")(({ theme }) => ({
+import { styled as styled17 } from "@mui/material/styles";
+var StyledFieldset = styled17("fieldset")(({ theme }) => ({
   border: "none",
   margin: 0,
   padding: 0,
   minWidth: 0
 }));
-var StyledLegend = styled14("legend")(({ theme }) => ({
+var StyledLegend = styled17("legend")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   fontSize: theme.tokens.typography.fontSizeLg,
   fontWeight: theme.tokens.typography.fontWeightRegular,
@@ -2551,7 +2732,7 @@ var StyledLegend = styled14("legend")(({ theme }) => ({
   marginBottom: theme.spacing(1),
   padding: 0
 }));
-var StyledToggleWrapper = styled14("div")(({ theme }) => ({
+var StyledToggleWrapper = styled17("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   width: theme.spacing(15),
@@ -2560,7 +2741,7 @@ var StyledToggleWrapper = styled14("div")(({ theme }) => ({
   border: `1px solid ${theme.tokens.colors.border}`,
   borderRadius: theme.tokens.borderRadius.md
 }));
-var StyledSwitch = styled14("label", {
+var StyledSwitch = styled17("label", {
   shouldForwardProp: (prop) => prop !== "selected" && prop !== "controlType"
 })(({ theme, selected, controlType }) => ({
   position: "relative",
@@ -2650,7 +2831,7 @@ var StyledSwitch = styled14("label", {
 }));
 
 // src/components/Toggle/Toggle.tsx
-import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 function Toggle({
   name,
   checked = false,
@@ -2661,18 +2842,18 @@ function Toggle({
   onBlur,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs7(StyledFieldset, { "data-component-id": "toggle", ...getCleanProps(restProps), children: [
-    label && /* @__PURE__ */ jsx20(StyledLegend, { children: label }),
-    description && /* @__PURE__ */ jsx20(FormHelperText, { children: description }),
-    /* @__PURE__ */ jsxs7(StyledToggleWrapper, { children: [
-      /* @__PURE__ */ jsxs7(
+  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(
         StyledSwitch,
         {
           htmlFor: `${name}off`,
           selected: !checked,
           controlType: "off",
           children: [
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx23(
               "input",
               {
                 checked: !checked,
@@ -2688,14 +2869,14 @@ function Toggle({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsxs10(
         StyledSwitch,
         {
           htmlFor: `${name}on`,
           selected: checked,
           controlType: "on",
           children: [
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx23(
               "input",
               {
                 checked,
@@ -2712,7 +2893,7 @@ function Toggle({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx20(FormHelperText, { error: true, children: error })
+    error && /* @__PURE__ */ jsx23(FormHelperText, { error: true, children: error })
   ] });
 }
 Toggle.displayName = "ToolkitToggle";
@@ -2728,37 +2909,37 @@ import {
   TablePagination as MuiTablePagination,
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { styled as styled15 } from "@mui/material/styles";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var StyledTableContainer = styled15(MuiTableContainer)(() => ({
+import { styled as styled18 } from "@mui/material/styles";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var StyledTableContainer = styled18(MuiTableContainer)(() => ({
   overflowX: "auto"
 }));
-var StyledHeadCell = styled15(MuiTableCell)(({ theme }) => ({
+var StyledHeadCell = styled18(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__ */ jsx21(MuiTable, { ...props });
+  return /* @__PURE__ */ jsx24(MuiTable, { ...props });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ jsx21(MuiTableHead, { ...props });
+  return /* @__PURE__ */ jsx24(MuiTableHead, { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx21(MuiTableBody, { ...props });
+  return /* @__PURE__ */ jsx24(MuiTableBody, { ...props });
 }
 function TableRow(props) {
-  return /* @__PURE__ */ jsx21(MuiTableRow, { ...props });
+  return /* @__PURE__ */ jsx24(MuiTableRow, { ...props });
 }
 function TableCell(props) {
-  return /* @__PURE__ */ jsx21(MuiTableCell, { ...props });
+  return /* @__PURE__ */ jsx24(MuiTableCell, { ...props });
 }
 function TableHeadCell(props) {
-  return /* @__PURE__ */ jsx21(StyledHeadCell, { component: "th", scope: "col", ...props });
+  return /* @__PURE__ */ jsx24(StyledHeadCell, { component: "th", scope: "col", ...props });
 }
 function TableContainer(props) {
-  return /* @__PURE__ */ jsx21(StyledTableContainer, { ...props });
+  return /* @__PURE__ */ jsx24(StyledTableContainer, { ...props });
 }
 var TablePagination = MuiTablePagination;
 var TableSortLabel = MuiTableSortLabel;
@@ -2771,144 +2952,144 @@ TableHeadCell.displayName = "ToolkitTableHeadCell";
 TableContainer.displayName = "ToolkitTableContainer";
 
 // src/foundation/H1/H1.tsx
-import React10 from "react";
+import React11 from "react";
 import { Typography } from "@mui/material";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var H1 = React10.forwardRef(
+import { jsx as jsx25 } from "react/jsx-runtime";
+var H1 = React11.forwardRef(
   function H12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx22(Typography, { ref, variant: "h1", color, ...props, children });
+    return /* @__PURE__ */ jsx25(Typography, { ref, variant: "h1", color, ...props, children });
   }
 );
 H1.displayName = "ToolkitH1";
 
 // src/foundation/H2/H2.tsx
-import React11 from "react";
+import React12 from "react";
 import { Typography as Typography2 } from "@mui/material";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var H2 = React11.forwardRef(
+import { jsx as jsx26 } from "react/jsx-runtime";
+var H2 = React12.forwardRef(
   function H22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx23(Typography2, { ref, variant: "h2", color, ...props, children });
+    return /* @__PURE__ */ jsx26(Typography2, { ref, variant: "h2", color, ...props, children });
   }
 );
 H2.displayName = "ToolkitH2";
 
 // src/foundation/H3/H3.tsx
-import React12 from "react";
+import React13 from "react";
 import { Typography as Typography3 } from "@mui/material";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var H3 = React12.forwardRef(
+import { jsx as jsx27 } from "react/jsx-runtime";
+var H3 = React13.forwardRef(
   function H32({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx24(Typography3, { ref, variant: "h3", color, ...props, children });
+    return /* @__PURE__ */ jsx27(Typography3, { ref, variant: "h3", color, ...props, children });
   }
 );
 H3.displayName = "ToolkitH3";
 
 // src/foundation/H4/H4.tsx
-import React13 from "react";
+import React14 from "react";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var H4 = React13.forwardRef(
+import { jsx as jsx28 } from "react/jsx-runtime";
+var H4 = React14.forwardRef(
   function H42({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx25(Typography4, { ref, variant: "h4", color, ...props, children });
+    return /* @__PURE__ */ jsx28(Typography4, { ref, variant: "h4", color, ...props, children });
   }
 );
 H4.displayName = "ToolkitH4";
 
 // src/foundation/H5/H5.tsx
-import React14 from "react";
+import React15 from "react";
 import { Typography as Typography5 } from "@mui/material";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var H5 = React14.forwardRef(
+import { jsx as jsx29 } from "react/jsx-runtime";
+var H5 = React15.forwardRef(
   function H52({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx26(Typography5, { ref, variant: "h5", color, ...props, children });
+    return /* @__PURE__ */ jsx29(Typography5, { ref, variant: "h5", color, ...props, children });
   }
 );
 H5.displayName = "ToolkitH5";
 
 // src/foundation/H6/H6.tsx
-import React15 from "react";
+import React16 from "react";
 import { Typography as Typography6 } from "@mui/material";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var H6 = React15.forwardRef(
+import { jsx as jsx30 } from "react/jsx-runtime";
+var H6 = React16.forwardRef(
   function H62({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx27(Typography6, { ref, variant: "h6", color, ...props, children });
+    return /* @__PURE__ */ jsx30(Typography6, { ref, variant: "h6", color, ...props, children });
   }
 );
 H6.displayName = "ToolkitH6";
 
 // src/foundation/Subtitle1/Subtitle1.tsx
-import React16 from "react";
+import React17 from "react";
 import { Typography as Typography7 } from "@mui/material";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var Subtitle1 = React16.forwardRef(
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Subtitle1 = React17.forwardRef(
   function Subtitle12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx28(Typography7, { ref, variant: "subtitle1", color, ...props, children });
+    return /* @__PURE__ */ jsx31(Typography7, { ref, variant: "subtitle1", color, ...props, children });
   }
 );
 Subtitle1.displayName = "ToolkitSubtitle1";
 
 // src/foundation/Subtitle2/Subtitle2.tsx
-import React17 from "react";
+import React18 from "react";
 import { Typography as Typography8 } from "@mui/material";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var Subtitle2 = React17.forwardRef(
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Subtitle2 = React18.forwardRef(
   function Subtitle22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx29(Typography8, { ref, variant: "subtitle2", color, ...props, children });
+    return /* @__PURE__ */ jsx32(Typography8, { ref, variant: "subtitle2", color, ...props, children });
   }
 );
 Subtitle2.displayName = "ToolkitSubtitle2";
 
 // src/foundation/Body1/Body1.tsx
-import React18 from "react";
+import React19 from "react";
 import { Typography as Typography9 } from "@mui/material";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var Body1 = React18.forwardRef(
+import { jsx as jsx33 } from "react/jsx-runtime";
+var Body1 = React19.forwardRef(
   function Body12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx30(Typography9, { ref, variant: "body1", color, ...props, children });
+    return /* @__PURE__ */ jsx33(Typography9, { ref, variant: "body1", color, ...props, children });
   }
 );
 Body1.displayName = "ToolkitBody1";
 
 // src/foundation/Body2/Body2.tsx
-import React19 from "react";
+import React20 from "react";
 import { Typography as Typography10 } from "@mui/material";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var Body2 = React19.forwardRef(
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Body2 = React20.forwardRef(
   function Body22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx31(Typography10, { ref, variant: "body2", color, ...props, children });
+    return /* @__PURE__ */ jsx34(Typography10, { ref, variant: "body2", color, ...props, children });
   }
 );
 Body2.displayName = "ToolkitBody2";
 
 // src/foundation/Caption/Caption.tsx
-import React20 from "react";
+import React21 from "react";
 import { Typography as Typography11 } from "@mui/material";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var Caption = React20.forwardRef(
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Caption = React21.forwardRef(
   function Caption2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx32(Typography11, { ref, variant: "caption", color, ...props, children });
+    return /* @__PURE__ */ jsx35(Typography11, { ref, variant: "caption", color, ...props, children });
   }
 );
 Caption.displayName = "ToolkitCaption";
 
 // src/foundation/Overline/Overline.tsx
-import React21 from "react";
+import React22 from "react";
 import { Typography as Typography12 } from "@mui/material";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Overline = React21.forwardRef(
+import { jsx as jsx36 } from "react/jsx-runtime";
+var Overline = React22.forwardRef(
   function Overline2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx33(Typography12, { ref, variant: "overline", color, ...props, children });
+    return /* @__PURE__ */ jsx36(Typography12, { ref, variant: "overline", color, ...props, children });
   }
 );
 Overline.displayName = "ToolkitOverline";
 
 // src/foundation/TypographyButton/TypographyButton.tsx
-import React22 from "react";
+import React23 from "react";
 import { Typography as Typography13 } from "@mui/material";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var TypographyButton = React22.forwardRef(
+import { jsx as jsx37 } from "react/jsx-runtime";
+var TypographyButton = React23.forwardRef(
   function TypographyButton2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx34(Typography13, { ref, variant: "button", color, ...props, children });
+    return /* @__PURE__ */ jsx37(Typography13, { ref, variant: "button", color, ...props, children });
   }
 );
 TypographyButton.displayName = "ToolkitTypographyButton";
@@ -2958,6 +3139,10 @@ export {
   PageSpinner,
   Pagination,
   Paragraph,
+  Password,
+  PasswordCriteria,
+  PasswordRule,
+  PasswordRules,
   Spinner,
   StandaloneAccordion,
   StaticDatePicker,
@@ -2985,6 +3170,7 @@ export {
   Variant,
   createMuiTheme,
   getThemeTokens,
+  passwordValidator,
   resolveThemeName,
   themeRegistry
 };