@thebuoyant-tsdev/mui-ts-library 3.29.1 → 3.30.0

package/dist/components/kanban-board/KanbanBoardCard.js

@@ -0,0 +1,104 @@
+import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
+import { kanbanBoardClasses as t } from "./kanbanBoardClasses.js";
+import { useSortable as n } from "@dnd-kit/sortable";
+import { Box as r, Card as i, CardActionArea as a, CardContent as o, Chip as s, Typography as c } from "@mui/material";
+import { CSS as l } from "@dnd-kit/utilities";
+import u from "@mui/icons-material/CalendarToday";
+import d from "@mui/icons-material/Person";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/kanban-board/KanbanBoardCard.tsx
+var m = {
+	fontSize: "0.7rem",
+	height: 22,
+	"& .MuiChip-icon": {
+		fontSize: "0.75rem",
+		width: "0.75rem",
+		height: "0.75rem",
+		ml: "8px",
+		mr: "4px"
+	},
+	"& .MuiChip-label": {
+		pl: "2px",
+		pr: "10px"
+	}
+};
+function h({ task: h, showAssignee: g, showDueDate: _, chipVariant: v, t: y, onCardClick: b, isOverlay: x = !1 }) {
+	let { attributes: S, listeners: C, setNodeRef: w, transform: T, transition: E, isDragging: D } = n({
+		id: h.id,
+		disabled: x
+	}), O = x ? { cursor: "grabbing" } : {
+		transform: l.Transform.toString(T),
+		transition: E,
+		opacity: +!D,
+		cursor: "grab"
+	}, k = g && !!h.assignee || _ && !!h.dueDate, A = h.dueDate ? h.dueDate.toLocaleDateString(void 0, {
+		day: "2-digit",
+		month: "short",
+		year: "numeric"
+	}) : null;
+	return /* @__PURE__ */ f(i, {
+		ref: x ? void 0 : w,
+		style: O,
+		className: [t.card, D && e.selected].filter(Boolean).join(" "),
+		sx: {
+			mb: 1,
+			borderLeft: h.color ? `4px solid ${h.color}` : void 0,
+			userSelect: "none",
+			bgcolor: (e) => e.palette.mode === "dark" ? "grey.800" : "background.paper",
+			"&:active": { cursor: "grabbing" }
+		},
+		...x ? {} : {
+			...S,
+			...C
+		},
+		onClick: () => !D && b(h),
+		"aria-label": h.title,
+		children: /* @__PURE__ */ f(a, {
+			component: "div",
+			sx: { cursor: "inherit" },
+			children: /* @__PURE__ */ p(o, {
+				sx: {
+					p: 1.5,
+					"&:last-child": { pb: 1.5 }
+				},
+				children: [/* @__PURE__ */ f(c, {
+					className: t.cardTitle,
+					variant: "body2",
+					sx: {
+						mb: +!!k,
+						lineHeight: 1.4,
+						fontWeight: 600
+					},
+					children: h.title
+				}), k && /* @__PURE__ */ p(r, {
+					className: t.cardMeta,
+					sx: {
+						display: "flex",
+						gap: .75,
+						flexWrap: "wrap",
+						alignItems: "center"
+					},
+					children: [g && h.assignee && /* @__PURE__ */ f(s, {
+						className: t.cardAssignee,
+						icon: /* @__PURE__ */ f(d, {}),
+						label: h.assignee,
+						size: "small",
+						variant: v,
+						"aria-label": `${y.dialogFieldAssignee}: ${h.assignee}`,
+						sx: m
+					}), _ && A && /* @__PURE__ */ f(s, {
+						className: t.cardDueDate,
+						icon: /* @__PURE__ */ f(u, {}),
+						label: A,
+						size: "small",
+						variant: v,
+						"aria-label": `${y.dialogFieldDueDate}: ${A}`,
+						sx: m
+					})]
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { h as KanbanBoardCard };

package/dist/components/kanban-board/KanbanBoardCardDialog.d.ts

@@ -0,0 +1,23 @@
+import type { KanbanBoardTranslation, KanbanColumn, KanbanTask } from "./KanbanBoard.types";
+export type KanbanDialogState = {
+    mode: "add";
+    columnId: string;
+} | {
+    mode: "edit";
+    task: KanbanTask;
+} | {
+    mode: "delete";
+    task: KanbanTask;
+};
+type KanbanBoardCardDialogProps = {
+    state: KanbanDialogState | null;
+    columns: KanbanColumn[];
+    t: Required<KanbanBoardTranslation>;
+    onSave: (task: KanbanTask) => void;
+    onDelete: (taskId: string) => void;
+    onClose: () => void;
+    /** Switch from edit to delete confirmation — handled in parent. */
+    onRequestDelete: (task: KanbanTask) => void;
+};
+export declare function KanbanBoardCardDialog({ state, columns, t, onSave, onDelete, onClose, onRequestDelete }: KanbanBoardCardDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/kanban-board/KanbanBoardCardDialog.js

@@ -0,0 +1,120 @@
+import { Button as e, Dialog as t, DialogActions as n, DialogContent as r, DialogContentText as i, DialogTitle as a, MenuItem as o, Stack as s, TextField as c } from "@mui/material";
+import { useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "@mui/icons-material/Delete";
+//#region src/components/kanban-board/KanbanBoardCardDialog.tsx
+function m({ state: m, columns: h, t: g, onSave: _, onDelete: v, onClose: y, onRequestDelete: b }) {
+	let x = m?.mode === "add", S = m?.mode === "edit", C = m?.mode === "delete", w = S ? m.task : null, T = C ? m.task : null, E = x ? m.columnId : null, [D, O] = l(() => S && w ? { ...w } : x && E ? {
+		id: "",
+		title: "",
+		status: E
+	} : {
+		id: "",
+		title: "",
+		status: h[0]?.id ?? ""
+	});
+	function k() {
+		let e = D.title.trim();
+		e && _({
+			...D,
+			title: e,
+			id: S ? D.id : crypto.randomUUID()
+		});
+	}
+	function A(e, t) {
+		O((n) => ({
+			...n,
+			[e]: t
+		}));
+	}
+	let j = x ? g.dialogAddTitle : S ? g.dialogEditTitle : g.dialogDeleteTitle;
+	return /* @__PURE__ */ f(t, {
+		open: !!m,
+		onClose: y,
+		maxWidth: "xs",
+		fullWidth: !0,
+		children: [/* @__PURE__ */ d(a, { children: j }), C && T ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(r, { children: /* @__PURE__ */ d(i, { children: g.dialogDeleteConfirm.replace("{title}", T.title) }) }), /* @__PURE__ */ f(n, { children: [/* @__PURE__ */ d(e, {
+			onClick: y,
+			children: g.dialogCancel
+		}), /* @__PURE__ */ d(e, {
+			color: "error",
+			startIcon: /* @__PURE__ */ d(p, {}),
+			onClick: () => v(T.id),
+			children: g.dialogDelete
+		})] })] }) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(r, { children: /* @__PURE__ */ f(s, {
+			spacing: 2,
+			sx: { pt: .5 },
+			children: [
+				/* @__PURE__ */ d(c, {
+					label: g.dialogFieldTitle,
+					value: D.title,
+					onChange: (e) => A("title", e.target.value),
+					required: !0,
+					fullWidth: !0,
+					size: "small",
+					autoFocus: !0,
+					onKeyDown: (e) => e.key === "Enter" && k()
+				}),
+				/* @__PURE__ */ d(c, {
+					label: g.dialogFieldDescription,
+					value: D.description ?? "",
+					onChange: (e) => A("description", e.target.value || void 0),
+					fullWidth: !0,
+					size: "small",
+					multiline: !0,
+					rows: 3
+				}),
+				/* @__PURE__ */ d(c, {
+					label: g.dialogFieldAssignee,
+					value: D.assignee ?? "",
+					onChange: (e) => A("assignee", e.target.value || void 0),
+					fullWidth: !0,
+					size: "small"
+				}),
+				/* @__PURE__ */ d(c, {
+					label: g.dialogFieldDueDate,
+					type: "date",
+					value: D.dueDate ? D.dueDate.toISOString().split("T")[0] : "",
+					onChange: (e) => A("dueDate", e.target.value ? /* @__PURE__ */ new Date(e.target.value + "T00:00:00") : void 0),
+					fullWidth: !0,
+					size: "small",
+					slotProps: { inputLabel: { shrink: !0 } }
+				}),
+				/* @__PURE__ */ d(c, {
+					select: !0,
+					label: g.dialogFieldStatus,
+					value: D.status,
+					onChange: (e) => A("status", e.target.value),
+					fullWidth: !0,
+					size: "small",
+					children: h.map((e) => /* @__PURE__ */ d(o, {
+						value: e.id,
+						children: e.label
+					}, e.id))
+				})
+			]
+		}) }), /* @__PURE__ */ f(n, {
+			sx: { justifyContent: S ? "space-between" : "flex-end" },
+			children: [S && w && /* @__PURE__ */ d(e, {
+				color: "error",
+				startIcon: /* @__PURE__ */ d(p, {}),
+				onClick: () => b(w),
+				children: g.dialogDelete
+			}), /* @__PURE__ */ f(s, {
+				direction: "row",
+				spacing: 1,
+				children: [/* @__PURE__ */ d(e, {
+					onClick: y,
+					children: g.dialogCancel
+				}), /* @__PURE__ */ d(e, {
+					variant: "contained",
+					onClick: k,
+					disabled: !D.title.trim(),
+					children: g.dialogSave
+				})]
+			})]
+		})] })]
+	});
+}
+//#endregion
+export { m as KanbanBoardCardDialog };

package/dist/components/kanban-board/KanbanBoardColumn.d.ts

@@ -0,0 +1,14 @@
+import type { KanbanBoardTranslation, KanbanColumn, KanbanTask } from "./KanbanBoard.types";
+type KanbanBoardColumnProps = {
+    column: KanbanColumn;
+    tasks: KanbanTask[];
+    showAssignee: boolean;
+    showDueDate: boolean;
+    chipVariant: "outlined" | "filled";
+    t: Required<KanbanBoardTranslation>;
+    enableBuiltinDialogs: boolean;
+    onCardClick: (task: KanbanTask) => void;
+    onAddClick: (columnId: string) => void;
+};
+export declare function KanbanBoardColumn({ column, tasks, showAssignee, showDueDate, chipVariant, t, enableBuiltinDialogs, onCardClick, onAddClick, }: KanbanBoardColumnProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/kanban-board/KanbanBoardColumn.js

@@ -0,0 +1,129 @@
+import { kanbanBoardClasses as e } from "./kanbanBoardClasses.js";
+import { KanbanBoardCard as t } from "./KanbanBoardCard.js";
+import { useDroppable as n } from "@dnd-kit/core";
+import { SortableContext as r, verticalListSortingStrategy as i } from "@dnd-kit/sortable";
+import { Box as a, Button as o, Chip as s, Typography as c } from "@mui/material";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "@mui/icons-material/Add";
+//#region src/components/kanban-board/KanbanBoardColumn.tsx
+function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant: g, t: _, enableBuiltinDialogs: v, onCardClick: y, onAddClick: b }) {
+	let { setNodeRef: x, isOver: S } = n({ id: f.id }), C = f.wipLimit !== void 0 && p.length > f.wipLimit, w = f.wipLimit === void 0 ? `${p.length}` : `${p.length} / ${f.wipLimit}`, T = f.color ?? "primary.main";
+	return /* @__PURE__ */ u(a, {
+		className: e.column,
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			minWidth: 240,
+			maxWidth: 320,
+			flex: "1 1 240px",
+			bgcolor: "background.paper",
+			borderRadius: 2,
+			overflow: "hidden",
+			border: "1px solid",
+			borderColor: "divider"
+		},
+		children: [
+			/* @__PURE__ */ u(a, {
+				className: e.columnHeader,
+				sx: {
+					px: 2,
+					py: 1.25,
+					display: "flex",
+					alignItems: "center",
+					gap: 1,
+					borderBottom: "1px solid",
+					borderColor: "divider",
+					borderTop: `3px solid ${f.color ?? "transparent"}`,
+					bgcolor: (e) => e.palette.mode === "dark" ? "grey.800" : "grey.300"
+				},
+				children: [/* @__PURE__ */ l(c, {
+					className: e.columnTitle,
+					variant: "subtitle2",
+					sx: {
+						flex: 1,
+						fontWeight: 700
+					},
+					children: f.label
+				}), /* @__PURE__ */ l(s, {
+					className: e.columnCount,
+					label: w,
+					size: "small",
+					color: C ? "error" : "default",
+					sx: {
+						height: 20,
+						fontSize: "0.7rem",
+						...!C && f.color && {
+							bgcolor: f.color,
+							color: "#fff"
+						}
+					},
+					"aria-label": `${p.length} cards${f.wipLimit ? ` of ${f.wipLimit} limit` : ""}`
+				})]
+			}),
+			/* @__PURE__ */ l(r, {
+				items: p.map((e) => e.id),
+				strategy: i,
+				children: /* @__PURE__ */ u(a, {
+					ref: x,
+					className: e.columnBody,
+					sx: {
+						flex: 1,
+						overflowY: "auto",
+						p: 1,
+						minHeight: 80,
+						bgcolor: (e) => S ? e.palette.action.selected : e.palette.mode === "dark" ? e.palette.grey[900] : e.palette.grey[100],
+						transition: "background-color 0.15s"
+					},
+					children: [p.length === 0 && !S && /* @__PURE__ */ l(c, {
+						variant: "caption",
+						color: "text.disabled",
+						sx: {
+							display: "block",
+							textAlign: "center",
+							mt: 2
+						},
+						children: _.noCardsLabel
+					}), p.map((e) => /* @__PURE__ */ l(t, {
+						task: e,
+						showAssignee: m,
+						showDueDate: h,
+						chipVariant: g,
+						t: _,
+						onCardClick: y
+					}, e.id))]
+				})
+			}),
+			v && /* @__PURE__ */ l(a, {
+				sx: {
+					p: 1,
+					borderTop: "1px solid",
+					borderColor: "divider"
+				},
+				children: /* @__PURE__ */ l(o, {
+					className: e.addButton,
+					startIcon: /* @__PURE__ */ l(d, {}),
+					size: "small",
+					fullWidth: !0,
+					onClick: () => b(f.id),
+					sx: {
+						justifyContent: "flex-start",
+						color: T,
+						border: "1px dashed",
+						borderColor: T,
+						borderRadius: 1,
+						py: .75,
+						fontWeight: 600,
+						letterSpacing: .5,
+						"&:hover": {
+							bgcolor: "action.hover",
+							borderStyle: "dashed"
+						}
+					},
+					children: _.addCardLabel
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { f as KanbanBoardColumn };

package/dist/components/kanban-board/kanbanBoardClasses.d.ts

@@ -0,0 +1,47 @@
+/**
+ * CSS class names for every named slot in the KanbanBoard component.
+ *
+ * Use these to style individual parts of the component without relying on
+ * MUI's internal class names, which can change between versions.
+ *
+ * The root element also receives shared state classes from `muiTsStateClasses`:
+ * - `MuiTs-disabled` — when the board is disabled (future prop)
+ *
+ * Individual cards receive:
+ * - `MuiTs-selected` — while the card is being dragged
+ *
+ * @example
+ * ```css
+ * .MuiTsKanbanBoard-column { min-width: 280px; }
+ * .MuiTsKanbanBoard-card.MuiTs-selected { box-shadow: 0 8px 24px rgba(0,0,0,.2); }
+ * .MuiTsKanbanBoard-columnHeader { border-radius: 0; }
+ * ```
+ */
+export declare const kanbanBoardClasses: {
+    /** The outermost wrapper element. */
+    readonly root: "MuiTsKanbanBoard-root";
+    /** The horizontal flex row that contains all columns. */
+    readonly columns: "MuiTsKanbanBoard-columns";
+    /** One column (wrapper for header + body + add button). */
+    readonly column: "MuiTsKanbanBoard-column";
+    /** The colored top bar of a column containing title and card count. */
+    readonly columnHeader: "MuiTsKanbanBoard-columnHeader";
+    /** The column title text inside the header. */
+    readonly columnTitle: "MuiTsKanbanBoard-columnTitle";
+    /** The "{count} / {wipLimit}" badge inside the header. */
+    readonly columnCount: "MuiTsKanbanBoard-columnCount";
+    /** The scrollable area that holds the cards. */
+    readonly columnBody: "MuiTsKanbanBoard-columnBody";
+    /** One card. Also receives `MuiTs-selected` while being dragged. */
+    readonly card: "MuiTsKanbanBoard-card";
+    /** The card title text. */
+    readonly cardTitle: "MuiTsKanbanBoard-cardTitle";
+    /** The row below the title that holds assignee and due date. */
+    readonly cardMeta: "MuiTsKanbanBoard-cardMeta";
+    /** The assignee label on a card. */
+    readonly cardAssignee: "MuiTsKanbanBoard-cardAssignee";
+    /** The due date label on a card. */
+    readonly cardDueDate: "MuiTsKanbanBoard-cardDueDate";
+    /** The "+ Add card" button at the bottom of each column. */
+    readonly addButton: "MuiTsKanbanBoard-addButton";
+};

package/dist/components/kanban-board/kanbanBoardClasses.js

@@ -0,0 +1,18 @@
+//#region src/components/kanban-board/kanbanBoardClasses.ts
+var e = {
+	root: "MuiTsKanbanBoard-root",
+	columns: "MuiTsKanbanBoard-columns",
+	column: "MuiTsKanbanBoard-column",
+	columnHeader: "MuiTsKanbanBoard-columnHeader",
+	columnTitle: "MuiTsKanbanBoard-columnTitle",
+	columnCount: "MuiTsKanbanBoard-columnCount",
+	columnBody: "MuiTsKanbanBoard-columnBody",
+	card: "MuiTsKanbanBoard-card",
+	cardTitle: "MuiTsKanbanBoard-cardTitle",
+	cardMeta: "MuiTsKanbanBoard-cardMeta",
+	cardAssignee: "MuiTsKanbanBoard-cardAssignee",
+	cardDueDate: "MuiTsKanbanBoard-cardDueDate",
+	addButton: "MuiTsKanbanBoard-addButton"
+};
+//#endregion
+export { e as kanbanBoardClasses };

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

@@ -4,8 +4,8 @@ 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 { Box as ee, Button as te, FormControl as c, FormHelperText as l, IconButton as u, InputAdornment as d, InputLabel as f, OutlinedInput as p, Stack as m, Tooltip as h, Typography as g } from "@mui/material";
+import { useId as ne, useMemo as re, useState as _ } from "react";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
 import ie from "@mui/icons-material/ContentCopy";
 import ae from "@mui/icons-material/Check";
@@ -30,7 +30,7 @@ function le(e) {
 	return s.join("");
 }
 function w({ label: e, fulfilled: n, checkColors: r }) {
-	return /* @__PURE__ */ y(h, {
+	return /* @__PURE__ */ y(m, {
 		direction: "row",
 		sx: {
 			alignItems: "center",
@@ -38,7 +38,7 @@ function w({ label: e, fulfilled: n, checkColors: r }) {
 		},
 		spacing: .5,
 		className: t.requirementItem,
-		children: [/* @__PURE__ */ v(_, {
+		children: [/* @__PURE__ */ v(g, {
 			variant: "caption",
 			children: e
 		}), n ? /* @__PURE__ */ v(b, {
@@ -63,7 +63,7 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 	}, R = {
 		...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 = () => {
+	}, z = ne(), B = `${z}-password`, [V, H] = _(!1), [U, xe] = _(!1), [Se, W] = _(""), [Ce, G] = _(""), [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 = re(() => r(q, P), [q, P]), Te = () => {
 		H((e) => !e);
 	}, Q = (e) => {
 		e.preventDefault();
@@ -103,25 +103,25 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 		Z.meterStatus === "good" && t.strengthBarGood,
 		Z.meterStatus === "very good" && t.strengthBarVeryGood
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ y(h, {
+	return /* @__PURE__ */ y(m, {
 		className: [
 			t.root,
 			E && e.disabled,
 			D && e.error
 		].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ y(l, {
+			/* @__PURE__ */ y(c, {
 				variant: "outlined",
 				fullWidth: !0,
 				error: D,
 				className: t.input,
 				children: [
-					/* @__PURE__ */ v(p, {
+					/* @__PURE__ */ v(f, {
 						htmlFor: B,
 						size: N,
 						children: L.label
 					}),
-					/* @__PURE__ */ v(m, {
+					/* @__PURE__ */ v(p, {
 						id: B,
 						type: V ? "text" : "password",
 						fullWidth: !0,
@@ -135,12 +135,12 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 							name: T,
 							autoComplete: de
 						},
-						endAdornment: j || M && q.length > 0 ? /* @__PURE__ */ y(f, {
+						endAdornment: j || M && q.length > 0 ? /* @__PURE__ */ y(d, {
 							position: "end",
-							children: [M && q.length > 0 && /* @__PURE__ */ v(g, {
+							children: [M && q.length > 0 && /* @__PURE__ */ v(h, {
 								title: K ? L.copiedLabel : L.copyPasswordLabel,
 								arrow: !0,
-								children: /* @__PURE__ */ v("span", { children: /* @__PURE__ */ v(d, {
+								children: /* @__PURE__ */ v("span", { children: /* @__PURE__ */ v(u, {
 									"data-testid": "psm-copy",
 									disabled: E,
 									"aria-label": K ? L.copiedLabel : L.copyPasswordLabel,
@@ -153,7 +153,7 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 										color: "success"
 									}) : /* @__PURE__ */ v(ie, { fontSize: "small" })
 								}) })
-							}), j && /* @__PURE__ */ v(d, {
+							}), j && /* @__PURE__ */ v(u, {
 								"data-testid": "psm-toggle",
 								disabled: E,
 								"aria-label": V ? L.hidePasswordLabel : L.showPasswordLabel,
@@ -166,13 +166,13 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 						}) : null,
 						label: L.label
 					}),
-					O && /* @__PURE__ */ v(u, { children: O })
+					O && /* @__PURE__ */ v(l, { children: O })
 				]
 			}),
-			me && /* @__PURE__ */ v(g, {
+			me && /* @__PURE__ */ v(h, {
 				title: L.generatePasswordLabel,
 				arrow: !0,
-				children: /* @__PURE__ */ v("span", { children: /* @__PURE__ */ v(re, {
+				children: /* @__PURE__ */ v("span", { children: /* @__PURE__ */ v(te, {
 					"data-testid": "psm-generate",
 					size: "small",
 					variant: "text",
@@ -188,19 +188,19 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 					children: L.generatePasswordLabel
 				}) })
 			}),
-			A && /* @__PURE__ */ y(l, {
+			A && /* @__PURE__ */ y(c, {
 				variant: "outlined",
 				fullWidth: !0,
 				error: Y && !X,
 				sx: { mt: 1 },
 				className: t.confirmInput,
 				children: [
-					/* @__PURE__ */ v(p, {
+					/* @__PURE__ */ v(f, {
 						htmlFor: `${z}-confirm`,
 						size: N,
 						children: L.confirmLabel
 					}),
-					/* @__PURE__ */ v(m, {
+					/* @__PURE__ */ v(p, {
 						id: `${z}-confirm`,
 						type: U ? "text" : "password",
 						fullWidth: !0,
@@ -209,7 +209,7 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 						onChange: De,
 						disabled: E,
 						inputProps: { "data-testid": "psm-confirm-input" },
-						endAdornment: /* @__PURE__ */ y(f, {
+						endAdornment: /* @__PURE__ */ y(d, {
 							position: "end",
 							children: [Y && (X ? /* @__PURE__ */ v(se, {
 								"data-testid": "psm-confirm-match",
@@ -225,7 +225,7 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 									mr: .5
 								},
 								fontSize: "small"
-							})), /* @__PURE__ */ v(d, {
+							})), /* @__PURE__ */ v(u, {
 								size: "small",
 								disabled: E,
 								onClick: () => xe((e) => !e),
@@ -237,7 +237,7 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 						}),
 						label: L.confirmLabel
 					}),
-					Y && /* @__PURE__ */ v(u, {
+					Y && /* @__PURE__ */ v(l, {
 						sx: { color: X ? F.success : F.failure },
 						children: X ? L.confirmMatchLabel : L.confirmMismatchLabel
 					})
@@ -250,14 +250,14 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 				segments: he,
 				className: je
 			}),
-			ge && /* @__PURE__ */ y(ne, {
+			ge && /* @__PURE__ */ y(ee, {
 				"data-testid": "psm-summary",
 				sx: {
 					mt: .5,
 					p: .5
 				},
 				className: t.summary,
-				children: [/* @__PURE__ */ v(_, {
+				children: [/* @__PURE__ */ v(g, {
 					variant: "caption",
 					gutterBottom: !0,
 					sx: {
@@ -265,10 +265,10 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 						fontSize: 14
 					},
 					children: L.summaryHeaderLabel
-				}), /* @__PURE__ */ y(h, {
+				}), /* @__PURE__ */ y(m, {
 					direction: "row",
 					spacing: 6,
-					children: [/* @__PURE__ */ y(h, {
+					children: [/* @__PURE__ */ y(m, {
 						direction: "column",
 						children: [
 							/* @__PURE__ */ v(w, {
@@ -287,7 +287,7 @@ function T({ value: b, confirmValue: x, name: T, inputRef: ue, disabled: E = !1,
 								checkColors: F
 							})
 						]
-					}), /* @__PURE__ */ y(h, {
+					}), /* @__PURE__ */ y(m, {
 						direction: "column",
 						children: [
 							/* @__PURE__ */ v(w, {