@thebuoyant-tsdev/mui-ts-library 3.22.0 → 3.24.1

package/dist/components/color-picker/ColorPicker.types.d.ts

@@ -38,8 +38,10 @@ export type ColorPickerProps = {
     onChange: (hex: string, info: ColorPickerColorInfo) => void;
     /** Fires once per "gesture" instead of continuously: on pointer-up after a drag, on blur after typing, or immediately for atomic actions (swatch click, eyedropper). Same dual-callback pattern as MUI's own `Slider` — use this instead of debouncing `onChange` yourself for expensive side effects (persisting to a backend, etc.). */
     onChangeCommitted?: (hex: string, info: ColorPickerColorInfo) => void;
-    /** Initial display format for the value field — uncontrolled after mount (default: 'hex'). */
+    /** Initial display format — uncontrolled after mount (default: `'hex'`). Ignored when `format` is set. */
     defaultFormat?: ColorPickerFormat;
+    /** Controlled display format. When set, the parent owns the active format — combine with `onFormatChange` to update it. When omitted, falls back to `defaultFormat` (uncontrolled). @since 3.23.0 */
+    format?: ColorPickerFormat;
     /** Fires when the user switches the display format via the dropdown. */
     onFormatChange?: (format: ColorPickerFormat) => void;
     /** Shows the alpha slider and opacity field (default: true). */

package/dist/components/color-picker/colorPickerClasses.d.ts

@@ -0,0 +1,35 @@
+/**
+ * CSS class names for every named slot in the ColorPicker component.
+ *
+ * Use these to style individual parts of the component without relying on
+ * MUI's internal class names, which can change between versions.
+ *
+ * @example
+ * ```css
+ * .MuiTsColorPicker-root { border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
+ * .MuiTsColorPicker-swatch:hover { transform: scale(1.2); }
+ * .MuiTsColorPicker-root.MuiTs-disabled { pointer-events: none; }
+ * ```
+ */
+export declare const colorPickerClasses: {
+    /** The outermost wrapper element. Also receives `MuiTs-disabled` when `disabled={true}`. */
+    readonly root: "MuiTsColorPicker-root";
+    /** The 2D gradient area used to pick saturation and brightness. */
+    readonly gradientArea: "MuiTsColorPicker-gradientArea";
+    /** The draggable circle (thumb) inside the gradient area. */
+    readonly gradientThumb: "MuiTsColorPicker-gradientThumb";
+    /** The row containing the eyedropper button and the hue/alpha sliders (when `showSliderSection={true}`). */
+    readonly sliderSection: "MuiTsColorPicker-sliderSection";
+    /** The horizontal hue slider bar. */
+    readonly hueSlider: "MuiTsColorPicker-hueSlider";
+    /** The horizontal alpha (opacity) slider bar (when `showAlpha={true}`). */
+    readonly alphaSlider: "MuiTsColorPicker-alphaSlider";
+    /** The row containing the format dropdown and hex/RGB/HSL input fields (when `showInputSection={true}`). */
+    readonly inputSection: "MuiTsColorPicker-inputSection";
+    /** The saved-colors section wrapper (when `savedColors` is non-empty). */
+    readonly savedColors: "MuiTsColorPicker-savedColors";
+    /** The flex row that wraps all swatch buttons. */
+    readonly swatchList: "MuiTsColorPicker-swatchList";
+    /** Each individual saved-color swatch button. */
+    readonly swatch: "MuiTsColorPicker-swatch";
+};

package/dist/components/color-picker/colorPickerClasses.js

@@ -0,0 +1,15 @@
+//#region src/components/color-picker/colorPickerClasses.ts
+var e = {
+	root: "MuiTsColorPicker-root",
+	gradientArea: "MuiTsColorPicker-gradientArea",
+	gradientThumb: "MuiTsColorPicker-gradientThumb",
+	sliderSection: "MuiTsColorPicker-sliderSection",
+	hueSlider: "MuiTsColorPicker-hueSlider",
+	alphaSlider: "MuiTsColorPicker-alphaSlider",
+	inputSection: "MuiTsColorPicker-inputSection",
+	savedColors: "MuiTsColorPicker-savedColors",
+	swatchList: "MuiTsColorPicker-swatchList",
+	swatch: "MuiTsColorPicker-swatch"
+};
+//#endregion
+export { e as colorPickerClasses };

package/dist/components/password-strength-meter/PasswordStrengthBar.d.ts

@@ -4,11 +4,12 @@ type PasswordStrengthBarProps = {
     ariaLabel: string;
     /** When true, renders 4 separate animated segments instead of a single bar. */
     segments?: boolean;
+    className?: string;
 };
 /**
  * Visuelle Fortschrittsleiste für die Passwortstärke.
  * role="progressbar" macht die Anzeige für Screenreader zugänglich —
  * ohne aria-Attribute wäre sie für assistive Technologien unsichtbar.
  */
-export declare function PasswordStrengthBar({ percent, color, ariaLabel, segments }: PasswordStrengthBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordStrengthBar({ percent, color, ariaLabel, segments, className }: PasswordStrengthBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/password-strength-meter/PasswordStrengthBar.js

@@ -1,7 +1,7 @@
 import { Box as e } from "@mui/material";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/password-strength-meter/PasswordStrengthBar.tsx
-function n({ percent: n, color: r, ariaLabel: i, segments: a = !1 }) {
+function n({ percent: n, color: r, ariaLabel: i, segments: a = !1, className: o }) {
 	if (a) {
 		let a = Math.round(n / 25);
 		return /* @__PURE__ */ t(e, {
@@ -10,6 +10,7 @@ function n({ percent: n, color: r, ariaLabel: i, segments: a = !1 }) {
 			"aria-valuenow": n,
 			"aria-valuemin": 0,
 			"aria-valuemax": 100,
+			className: o,
 			sx: {
 				width: "100%",
 				display: "flex",
@@ -41,6 +42,7 @@ function n({ percent: n, color: r, ariaLabel: i, segments: a = !1 }) {
 		"aria-valuenow": n,
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
+		className: o,
 		sx: {
 			width: "100%",
 			height: "8px",

package/dist/components/password-strength-meter/PasswordStrengthMeter.js

@@ -1,21 +1,23 @@
-import { useTimedFlag as e } from "../shared/useTimedFlag.js";
-import { scorePassword as t } from "./util/password-strength.util.js";
-import { PasswordStrengthBar as n } from "./PasswordStrengthBar.js";
-import { DEFAULT_CHECK_COLORS as r, DEFAULT_METER_COLORS as i, DEFAULT_PASSWORD_TRANSLATIONS as a } from "./PasswordStrengthMeter.types.js";
-import { useId as o, useMemo as s, useState as c } from "react";
-import { Box as ee, Button as te, FormControl as l, FormHelperText as u, IconButton as d, InputAdornment as f, InputLabel as p, OutlinedInput as m, Stack as h, Tooltip as g, Typography as _ } from "@mui/material";
+import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
+import { passwordStrengthMeterClasses as t } from "./passwordStrengthMeterClasses.js";
+import { useTimedFlag as n } from "../shared/useTimedFlag.js";
+import { scorePassword as r } from "./util/password-strength.util.js";
+import { PasswordStrengthBar as i } from "./PasswordStrengthBar.js";
+import { DEFAULT_CHECK_COLORS as a, DEFAULT_METER_COLORS as o, DEFAULT_PASSWORD_TRANSLATIONS as s } from "./PasswordStrengthMeter.types.js";
+import { useId as ee, useMemo as te, useState as c } from "react";
+import { Box as ne, Button as re, FormControl as l, FormHelperText as u, IconButton as d, InputAdornment as f, InputLabel as p, OutlinedInput as m, Stack as h, Tooltip as g, Typography as _ } from "@mui/material";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import ne from "@mui/icons-material/ContentCopy";
-import re from "@mui/icons-material/Check";
-import ie from "@mui/icons-material/AutoFixHigh";
+import ie from "@mui/icons-material/ContentCopy";
+import ae from "@mui/icons-material/Check";
+import oe from "@mui/icons-material/AutoFixHigh";
 import b from "@mui/icons-material/CheckCircleOutlined";
 import x from "@mui/icons-material/ErrorOutlined";
-import ae from "@mui/icons-material/CheckCircle";
-import oe from "@mui/icons-material/Cancel";
+import se from "@mui/icons-material/CheckCircle";
+import ce from "@mui/icons-material/Cancel";
 import S from "@mui/icons-material/Visibility";
 import C from "@mui/icons-material/VisibilityOff";
 //#region src/components/password-strength-meter/PasswordStrengthMeter.tsx
-function se(e) {
+function le(e) {
 	let t = [];
 	e.upper && t.push("ABCDEFGHIJKLMNOPQRSTUVWXYZ"), e.lower && t.push("abcdefghijklmnopqrstuvwxyz"), e.numbers && t.push("0123456789"), e.symbols && t.push("!@#$%^&*()-_=+[]{}|;:,.<>?"), t.length === 0 && t.push("abcdefghijklmnopqrstuvwxyz");
 	let n = t.join(""), r = Math.max(e.length, t.length), i = new Uint32Array(Math.max(0, r - t.length));
@@ -27,7 +29,7 @@ function se(e) {
 	}
 	return s.join("");
 }
-function w({ label: e, fulfilled: t, checkColors: n }) {
+function w({ label: e, fulfilled: n, checkColors: r }) {
 	return /* @__PURE__ */ y(h, {
 		direction: "row",
 		sx: {
@@ -35,261 +37,280 @@ function w({ label: e, fulfilled: t, checkColors: n }) {
 			mb: .25
 		},
 		spacing: .5,
+		className: t.requirementItem,
 		children: [/* @__PURE__ */ v(_, {
 			variant: "caption",
 			children: e
-		}), t ? /* @__PURE__ */ v(b, {
+		}), n ? /* @__PURE__ */ v(b, {
 			"data-testid": "psm-req-success",
 			style: {
 				fontSize: 16,
-				color: n.success
+				color: r.success
 			}
 		}) : /* @__PURE__ */ v(x, {
 			"data-testid": "psm-req-failure",
 			style: {
 				fontSize: 16,
-				color: n.failure
+				color: r.failure
 			}
 		})]
 	});
 }
-function T({ value: b, confirmValue: x, name: T, inputRef: ce, disabled: E = !1, error: le = !1, helperText: D, autoComplete: ue, customRequirements: de, generatorOptions: O, showConfirmField: k = !1, showPasswordAdornment: A = !0, showMeter: j = !0, showPasswordGenerator: fe = !1, showSegmentedBar: pe = !1, showSummary: me = !0, showCopyButton: M = !1, inputSize: N = "medium", translation: he, meterColors: ge, passwordMinLength: P = 8, checkColors: F = r, onPasswordChange: I, onConfirmChange: _e, onPasswordGenerated: ve }) {
+function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1, error: D = !1, helperText: O, autoComplete: de, customRequirements: fe, generatorOptions: k, showConfirmField: A = !1, showPasswordAdornment: j = !0, showMeter: pe = !0, showPasswordGenerator: me = !1, showSegmentedBar: he = !1, showSummary: ge = !0, showCopyButton: M = !1, inputSize: N = "medium", translation: _e, meterColors: ve, passwordMinLength: P = 8, checkColors: F = a, onPasswordChange: I, onConfirmChange: ye, onPasswordGenerated: be }) {
 	let L = {
-		...a,
-		...he
+		...s,
+		..._e
 	}, R = {
-		...i,
-		...ge
-	}, z = o(), B = `${z}-password`, [V, H] = c(!1), [U, ye] = c(!1), [be, W] = c(""), [xe, G] = c(""), [K, Se] = e(), q = b === void 0 ? be : b, J = x === void 0 ? xe : x, Y = k && J.length > 0, X = Y && q === J, Z = s(() => t(q, P), [q, P]), Ce = () => {
+		...o,
+		...ve
+	}, z = ee(), B = `${z}-password`, [V, H] = c(!1), [U, xe] = c(!1), [Se, W] = c(""), [Ce, G] = c(""), [K, we] = n(), q = b === void 0 ? Se : b, J = x === void 0 ? Ce : x, Y = A && J.length > 0, X = Y && q === J, Z = te(() => r(q, P), [q, P]), Te = () => {
 		H((e) => !e);
 	}, Q = (e) => {
 		e.preventDefault();
 	}, $ = (e) => {
 		e.preventDefault();
-	};
-	return /* @__PURE__ */ y(h, { children: [
-		/* @__PURE__ */ y(l, {
-			variant: "outlined",
-			fullWidth: !0,
-			error: le,
-			children: [
-				/* @__PURE__ */ v(p, {
-					htmlFor: B,
-					size: N,
-					children: L.label
-				}),
-				/* @__PURE__ */ v(m, {
-					id: B,
-					type: V ? "text" : "password",
-					fullWidth: !0,
-					size: N,
-					value: q,
-					onChange: (e) => {
-						let n = e.target.value;
-						b === void 0 && W(n), I && I(n, t(n, P));
-					},
-					disabled: E,
-					inputRef: ce,
-					inputProps: {
-						"data-testid": "psm-input",
-						name: T,
-						autoComplete: ue
-					},
-					endAdornment: A || M && q.length > 0 ? /* @__PURE__ */ y(f, {
-						position: "end",
-						children: [M && q.length > 0 && /* @__PURE__ */ v(g, {
-							title: K ? L.copiedLabel : L.copyPasswordLabel,
-							arrow: !0,
-							children: /* @__PURE__ */ v("span", { children: /* @__PURE__ */ v(d, {
-								"data-testid": "psm-copy",
+	}, Ee = (e) => {
+		let t = e.target.value;
+		b === void 0 && W(t), I && I(t, r(t, P));
+	}, De = (e) => {
+		let t = e.target.value;
+		x === void 0 && G(t), ye?.(t, t === q);
+	}, Oe = () => {
+		let e = le({
+			length: k?.length ?? Math.max(16, P),
+			upper: k?.upper ?? !0,
+			lower: k?.lower ?? !0,
+			numbers: k?.numbers ?? !0,
+			symbols: k?.symbols ?? !0
+		});
+		b === void 0 && W(e), x === void 0 && G(""), I?.(e, r(e, P)), be?.(e), H(!0);
+	}, ke = () => {
+		navigator.clipboard.writeText(q).then(() => {
+			we();
+		});
+	}, Ae = (e) => {
+		switch (e.meterStatus) {
+			case "weak": return R.weak;
+			case "ok": return R.ok;
+			case "good": return R.good;
+			case "very good": return R.veryGood;
+			default: return "transparent";
+		}
+	}, je = [
+		t.strengthBar,
+		Z.meterStatus === "weak" && t.strengthBarWeak,
+		Z.meterStatus === "ok" && t.strengthBarOk,
+		Z.meterStatus === "good" && t.strengthBarGood,
+		Z.meterStatus === "very good" && t.strengthBarVeryGood
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ y(h, {
+		className: [
+			t.root,
+			E && e.disabled,
+			D && e.error
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ y(l, {
+				variant: "outlined",
+				fullWidth: !0,
+				error: D,
+				className: t.input,
+				children: [
+					/* @__PURE__ */ v(p, {
+						htmlFor: B,
+						size: N,
+						children: L.label
+					}),
+					/* @__PURE__ */ v(m, {
+						id: B,
+						type: V ? "text" : "password",
+						fullWidth: !0,
+						size: N,
+						value: q,
+						onChange: Ee,
+						disabled: E,
+						inputRef: ue,
+						inputProps: {
+							"data-testid": "psm-input",
+							name: T,
+							autoComplete: de
+						},
+						endAdornment: j || M && q.length > 0 ? /* @__PURE__ */ y(f, {
+							position: "end",
+							children: [M && q.length > 0 && /* @__PURE__ */ v(g, {
+								title: K ? L.copiedLabel : L.copyPasswordLabel,
+								arrow: !0,
+								children: /* @__PURE__ */ v("span", { children: /* @__PURE__ */ v(d, {
+									"data-testid": "psm-copy",
+									disabled: E,
+									"aria-label": K ? L.copiedLabel : L.copyPasswordLabel,
+									onClick: ke,
+									onMouseDown: Q,
+									onMouseUp: $,
+									edge: j ? !1 : "end",
+									children: K ? /* @__PURE__ */ v(ae, {
+										fontSize: "small",
+										color: "success"
+									}) : /* @__PURE__ */ v(ie, { fontSize: "small" })
+								}) })
+							}), j && /* @__PURE__ */ v(d, {
+								"data-testid": "psm-toggle",
 								disabled: E,
-								"aria-label": K ? L.copiedLabel : L.copyPasswordLabel,
-								onClick: () => {
-									navigator.clipboard.writeText(q).then(() => {
-										Se();
-									});
-								},
+								"aria-label": V ? L.hidePasswordLabel : L.showPasswordLabel,
+								onClick: Te,
 								onMouseDown: Q,
 								onMouseUp: $,
-								edge: A ? !1 : "end",
-								children: K ? /* @__PURE__ */ v(re, {
-									fontSize: "small",
-									color: "success"
-								}) : /* @__PURE__ */ v(ne, { fontSize: "small" })
-							}) })
-						}), A && /* @__PURE__ */ v(d, {
-							"data-testid": "psm-toggle",
-							disabled: E,
-							"aria-label": V ? L.hidePasswordLabel : L.showPasswordLabel,
-							onClick: Ce,
-							onMouseDown: Q,
-							onMouseUp: $,
-							edge: "end",
-							children: v(V ? C : S, {})
-						})]
-					}) : null,
-					label: L.label
-				}),
-				D && /* @__PURE__ */ v(u, { children: D })
-			]
-		}),
-		fe && /* @__PURE__ */ v(g, {
-			title: L.generatePasswordLabel,
-			arrow: !0,
-			children: /* @__PURE__ */ v("span", { children: /* @__PURE__ */ v(te, {
-				"data-testid": "psm-generate",
-				size: "small",
-				variant: "text",
-				startIcon: /* @__PURE__ */ v(ie, { fontSize: "small" }),
-				disabled: E,
-				onClick: () => {
-					let e = se({
-						length: O?.length ?? Math.max(16, P),
-						upper: O?.upper ?? !0,
-						lower: O?.lower ?? !0,
-						numbers: O?.numbers ?? !0,
-						symbols: O?.symbols ?? !0
-					});
-					b === void 0 && W(e), x === void 0 && G(""), I?.(e, t(e, P)), ve?.(e), H(!0);
-				},
-				sx: {
-					mt: .5,
-					alignSelf: "flex-start",
-					textTransform: "none"
-				},
-				children: L.generatePasswordLabel
-			}) })
-		}),
-		k && /* @__PURE__ */ y(l, {
-			variant: "outlined",
-			fullWidth: !0,
-			error: Y && !X,
-			sx: { mt: 1 },
-			children: [
-				/* @__PURE__ */ v(p, {
-					htmlFor: `${z}-confirm`,
-					size: N,
-					children: L.confirmLabel
-				}),
-				/* @__PURE__ */ v(m, {
-					id: `${z}-confirm`,
-					type: U ? "text" : "password",
-					fullWidth: !0,
-					size: N,
-					value: J,
-					onChange: (e) => {
-						let t = e.target.value;
-						x === void 0 && G(t), _e?.(t, t === q);
-					},
+								edge: "end",
+								children: v(V ? C : S, {})
+							})]
+						}) : null,
+						label: L.label
+					}),
+					O && /* @__PURE__ */ v(u, { children: O })
+				]
+			}),
+			me && /* @__PURE__ */ v(g, {
+				title: L.generatePasswordLabel,
+				arrow: !0,
+				children: /* @__PURE__ */ v("span", { children: /* @__PURE__ */ v(re, {
+					"data-testid": "psm-generate",
+					size: "small",
+					variant: "text",
+					startIcon: /* @__PURE__ */ v(oe, { fontSize: "small" }),
 					disabled: E,
-					inputProps: { "data-testid": "psm-confirm-input" },
-					endAdornment: /* @__PURE__ */ y(f, {
-						position: "end",
-						children: [Y && (X ? /* @__PURE__ */ v(ae, {
-							"data-testid": "psm-confirm-match",
-							sx: {
-								color: F.success,
-								mr: .5
-							},
-							fontSize: "small"
-						}) : /* @__PURE__ */ v(oe, {
-							"data-testid": "psm-confirm-mismatch",
-							sx: {
-								color: F.failure,
-								mr: .5
-							},
-							fontSize: "small"
-						})), /* @__PURE__ */ v(d, {
-							size: "small",
-							disabled: E,
-							onClick: () => ye((e) => !e),
-							onMouseDown: (e) => e.preventDefault(),
-							edge: "end",
-							"aria-label": U ? L.hidePasswordLabel : L.showPasswordLabel,
-							children: v(U ? C : S, {})
-						})]
+					onClick: Oe,
+					className: t.generatorButton,
+					sx: {
+						mt: .5,
+						alignSelf: "flex-start",
+						textTransform: "none"
+					},
+					children: L.generatePasswordLabel
+				}) })
+			}),
+			A && /* @__PURE__ */ y(l, {
+				variant: "outlined",
+				fullWidth: !0,
+				error: Y && !X,
+				sx: { mt: 1 },
+				className: t.confirmInput,
+				children: [
+					/* @__PURE__ */ v(p, {
+						htmlFor: `${z}-confirm`,
+						size: N,
+						children: L.confirmLabel
 					}),
-					label: L.confirmLabel
-				}),
-				Y && /* @__PURE__ */ v(u, {
-					sx: { color: X ? F.success : F.failure },
-					children: X ? L.confirmMatchLabel : L.confirmMismatchLabel
-				})
-			]
-		}),
-		j && /* @__PURE__ */ v(n, {
-			percent: Z.percent,
-			color: ((e) => {
-				switch (e.meterStatus) {
-					case "weak": return R.weak;
-					case "ok": return R.ok;
-					case "good": return R.good;
-					case "very good": return R.veryGood;
-					default: return "transparent";
-				}
-			})(Z),
-			ariaLabel: L.meterAriaLabel,
-			segments: pe
-		}),
-		me && /* @__PURE__ */ y(ee, {
-			"data-testid": "psm-summary",
-			sx: {
-				mt: .5,
-				p: .5
-			},
-			children: [/* @__PURE__ */ v(_, {
-				variant: "caption",
-				gutterBottom: !0,
+					/* @__PURE__ */ v(m, {
+						id: `${z}-confirm`,
+						type: U ? "text" : "password",
+						fullWidth: !0,
+						size: N,
+						value: J,
+						onChange: De,
+						disabled: E,
+						inputProps: { "data-testid": "psm-confirm-input" },
+						endAdornment: /* @__PURE__ */ y(f, {
+							position: "end",
+							children: [Y && (X ? /* @__PURE__ */ v(se, {
+								"data-testid": "psm-confirm-match",
+								sx: {
+									color: F.success,
+									mr: .5
+								},
+								fontSize: "small"
+							}) : /* @__PURE__ */ v(ce, {
+								"data-testid": "psm-confirm-mismatch",
+								sx: {
+									color: F.failure,
+									mr: .5
+								},
+								fontSize: "small"
+							})), /* @__PURE__ */ v(d, {
+								size: "small",
+								disabled: E,
+								onClick: () => xe((e) => !e),
+								onMouseDown: (e) => e.preventDefault(),
+								edge: "end",
+								"aria-label": U ? L.hidePasswordLabel : L.showPasswordLabel,
+								children: v(U ? C : S, {})
+							})]
+						}),
+						label: L.confirmLabel
+					}),
+					Y && /* @__PURE__ */ v(u, {
+						sx: { color: X ? F.success : F.failure },
+						children: X ? L.confirmMatchLabel : L.confirmMismatchLabel
+					})
+				]
+			}),
+			pe && /* @__PURE__ */ v(i, {
+				percent: Z.percent,
+				color: Ae(Z),
+				ariaLabel: L.meterAriaLabel,
+				segments: he,
+				className: je
+			}),
+			ge && /* @__PURE__ */ y(ne, {
+				"data-testid": "psm-summary",
 				sx: {
-					display: "block",
-					fontSize: 14
+					mt: .5,
+					p: .5
 				},
-				children: L.summaryHeaderLabel
-			}), /* @__PURE__ */ y(h, {
-				direction: "row",
-				spacing: 6,
-				children: [/* @__PURE__ */ y(h, {
-					direction: "column",
-					children: [
-						/* @__PURE__ */ v(w, {
-							label: L.summaryMinChars.replace("{n}", String(P)),
-							fulfilled: Z.length >= P,
-							checkColors: F
-						}),
-						/* @__PURE__ */ v(w, {
-							label: L.summaryCapitalLetter,
-							fulfilled: Z.hasUpper,
-							checkColors: F
-						}),
-						/* @__PURE__ */ v(w, {
-							label: L.summaryLowerCaseLetter,
-							fulfilled: Z.hasLower,
-							checkColors: F
-						})
-					]
+				className: t.summary,
+				children: [/* @__PURE__ */ v(_, {
+					variant: "caption",
+					gutterBottom: !0,
+					sx: {
+						display: "block",
+						fontSize: 14
+					},
+					children: L.summaryHeaderLabel
 				}), /* @__PURE__ */ y(h, {
-					direction: "column",
-					children: [
-						/* @__PURE__ */ v(w, {
-							label: L.summaryNumber,
-							fulfilled: Z.hasDigit,
-							checkColors: F
-						}),
-						/* @__PURE__ */ v(w, {
-							label: L.summarySpecialChar,
-							fulfilled: Z.hasSymbol,
-							checkColors: F
-						}),
-						de?.map((e, t) => /* @__PURE__ */ v(w, {
-							label: e.label,
-							fulfilled: typeof e.fulfilled == "function" ? e.fulfilled(q) : e.fulfilled,
-							checkColors: F
-						}, t))
-					]
+					direction: "row",
+					spacing: 6,
+					children: [/* @__PURE__ */ y(h, {
+						direction: "column",
+						children: [
+							/* @__PURE__ */ v(w, {
+								label: L.summaryMinChars.replace("{n}", String(P)),
+								fulfilled: Z.length >= P,
+								checkColors: F
+							}),
+							/* @__PURE__ */ v(w, {
+								label: L.summaryCapitalLetter,
+								fulfilled: Z.hasUpper,
+								checkColors: F
+							}),
+							/* @__PURE__ */ v(w, {
+								label: L.summaryLowerCaseLetter,
+								fulfilled: Z.hasLower,
+								checkColors: F
+							})
+						]
+					}), /* @__PURE__ */ y(h, {
+						direction: "column",
+						children: [
+							/* @__PURE__ */ v(w, {
+								label: L.summaryNumber,
+								fulfilled: Z.hasDigit,
+								checkColors: F
+							}),
+							/* @__PURE__ */ v(w, {
+								label: L.summarySpecialChar,
+								fulfilled: Z.hasSymbol,
+								checkColors: F
+							}),
+							fe?.map((e, t) => /* @__PURE__ */ v(w, {
+								label: e.label,
+								fulfilled: typeof e.fulfilled == "function" ? e.fulfilled(q) : e.fulfilled,
+								checkColors: F
+							}, t))
+						]
+					})]
 				})]
-			})]
-		})
-	] });
+			})
+		]
+	});
 }
 //#endregion
 export { T as PasswordStrengthMeter };