@thebuoyant-tsdev/mui-ts-library 3.33.1 → 3.35.0

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

@@ -13,11 +13,12 @@ type KanbanBoardCardDialogProps = {
     state: KanbanDialogState | null;
     columns: KanbanColumn[];
     t: Required<KanbanBoardTranslation>;
+    showSubtasks: boolean;
     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 declare function KanbanBoardCardDialog({ state, columns, t, showSubtasks, onSave, onDelete, onClose, onRequestDelete }: KanbanBoardCardDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,120 +1,216 @@
-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";
+import { Box as e, Button as t, Checkbox as n, Dialog as r, DialogActions as i, DialogContent as a, DialogContentText as o, DialogTitle as s, FormControlLabel as c, IconButton as l, InputAdornment as u, MenuItem as d, Stack as f, TextField as p, Typography as m } from "@mui/material";
+import { useState as h } from "react";
+import g from "@mui/icons-material/Add";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import b from "@mui/icons-material/Close";
+import x 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 ? {
+function S({ state: S, columns: C, t: w, showSubtasks: T, onSave: E, onDelete: D, onClose: O, onRequestDelete: k }) {
+	let A = S?.mode === "add", j = S?.mode === "edit", M = S?.mode === "delete", N = j ? S.task : null, P = M ? S.task : null, F = A ? S.columnId : null, [I, L] = h(() => j && N ? { ...N } : A && F ? {
 		id: "",
 		title: "",
-		status: E
+		status: F
 	} : {
 		id: "",
 		title: "",
-		status: h[0]?.id ?? ""
-	});
-	function k() {
-		let e = D.title.trim();
-		e && _({
-			...D,
+		status: C[0]?.id ?? ""
+	}), [R, z] = h("");
+	function B() {
+		let e = R.trim();
+		if (!e) return;
+		let t = {
+			id: crypto.randomUUID(),
+			title: e,
+			done: !1
+		};
+		L((e) => ({
+			...e,
+			subtasks: [...e.subtasks ?? [], t]
+		})), z("");
+	}
+	function V(e) {
+		L((t) => ({
+			...t,
+			subtasks: t.subtasks?.map((t) => t.id === e ? {
+				...t,
+				done: !t.done
+			} : t)
+		}));
+	}
+	function H(e) {
+		L((t) => ({
+			...t,
+			subtasks: t.subtasks?.filter((t) => t.id !== e)
+		}));
+	}
+	function U() {
+		let e = I.title.trim();
+		e && E({
+			...I,
 			title: e,
-			id: S ? D.id : crypto.randomUUID()
+			id: j ? I.id : crypto.randomUUID()
 		});
 	}
-	function A(e, t) {
-		O((n) => ({
+	function W(e, t) {
+		L((n) => ({
 			...n,
 			[e]: t
 		}));
 	}
-	let j = x ? g.dialogAddTitle : S ? g.dialogEditTitle : g.dialogDeleteTitle;
-	return /* @__PURE__ */ f(t, {
-		open: !!m,
-		onClose: y,
+	let G = A ? w.dialogAddTitle : j ? w.dialogEditTitle : w.dialogDeleteTitle;
+	return /* @__PURE__ */ y(r, {
+		open: !!S,
+		onClose: O,
 		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, {
+		children: [/* @__PURE__ */ v(s, { children: G }), M && P ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(a, { children: /* @__PURE__ */ v(o, { children: w.dialogDeleteConfirm.replace("{title}", P.title) }) }), /* @__PURE__ */ y(i, { children: [/* @__PURE__ */ v(t, {
+			onClick: O,
+			children: w.dialogCancel
+		}), /* @__PURE__ */ v(t, {
 			color: "error",
-			startIcon: /* @__PURE__ */ d(p, {}),
-			onClick: () => v(T.id),
-			children: g.dialogDelete
-		})] })] }) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(r, { children: /* @__PURE__ */ f(s, {
+			startIcon: /* @__PURE__ */ v(x, {}),
+			onClick: () => D(P.id),
+			children: w.dialogDelete
+		})] })] }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(a, { children: /* @__PURE__ */ y(f, {
 			spacing: 2,
 			sx: { pt: .5 },
 			children: [
-				/* @__PURE__ */ d(c, {
-					label: g.dialogFieldTitle,
-					value: D.title,
-					onChange: (e) => A("title", e.target.value),
+				/* @__PURE__ */ v(p, {
+					label: w.dialogFieldTitle,
+					value: I.title,
+					onChange: (e) => W("title", e.target.value),
 					required: !0,
 					fullWidth: !0,
 					size: "small",
 					autoFocus: !0,
-					onKeyDown: (e) => e.key === "Enter" && k()
+					onKeyDown: (e) => e.key === "Enter" && U()
 				}),
-				/* @__PURE__ */ d(c, {
-					label: g.dialogFieldDescription,
-					value: D.description ?? "",
-					onChange: (e) => A("description", e.target.value || void 0),
+				/* @__PURE__ */ v(p, {
+					label: w.dialogFieldDescription,
+					value: I.description ?? "",
+					onChange: (e) => W("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),
+				/* @__PURE__ */ v(p, {
+					label: w.dialogFieldAssignee,
+					value: I.assignee ?? "",
+					onChange: (e) => W("assignee", e.target.value || void 0),
 					fullWidth: !0,
 					size: "small"
 				}),
-				/* @__PURE__ */ d(c, {
-					label: g.dialogFieldDueDate,
+				/* @__PURE__ */ v(p, {
+					label: w.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),
+					value: I.dueDate ? I.dueDate.toISOString().split("T")[0] : "",
+					onChange: (e) => W("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, {
+				/* @__PURE__ */ v(p, {
 					select: !0,
-					label: g.dialogFieldStatus,
-					value: D.status,
-					onChange: (e) => A("status", e.target.value),
+					label: w.dialogFieldStatus,
+					value: I.status,
+					onChange: (e) => W("status", e.target.value),
 					fullWidth: !0,
 					size: "small",
-					children: h.map((e) => /* @__PURE__ */ d(o, {
+					children: C.map((e) => /* @__PURE__ */ v(d, {
 						value: e.id,
 						children: e.label
 					}, e.id))
-				})
+				}),
+				T && /* @__PURE__ */ y(e, { children: [
+					/* @__PURE__ */ v(m, {
+						variant: "caption",
+						color: "text.secondary",
+						sx: {
+							display: "block",
+							mb: .5
+						},
+						children: w.dialogFieldSubtasks
+					}),
+					/* @__PURE__ */ v(f, {
+						spacing: .25,
+						children: (I.subtasks ?? []).map((t) => /* @__PURE__ */ y(e, {
+							sx: {
+								display: "flex",
+								alignItems: "center"
+							},
+							children: [/* @__PURE__ */ v(c, {
+								sx: {
+									flex: 1,
+									m: 0
+								},
+								control: /* @__PURE__ */ v(n, {
+									size: "small",
+									checked: t.done,
+									onChange: () => V(t.id),
+									sx: { p: .5 }
+								}),
+								label: /* @__PURE__ */ v(m, {
+									variant: "body2",
+									sx: {
+										textDecoration: t.done ? "line-through" : "none",
+										color: t.done ? "text.disabled" : "text.primary"
+									},
+									children: t.title
+								})
+							}), /* @__PURE__ */ v(l, {
+								size: "small",
+								onClick: () => H(t.id),
+								"aria-label": `Remove ${t.title}`,
+								children: /* @__PURE__ */ v(b, { fontSize: "small" })
+							})]
+						}, t.id))
+					}),
+					/* @__PURE__ */ v(p, {
+						size: "small",
+						placeholder: w.dialogSubtaskAdd,
+						value: R,
+						onChange: (e) => z(e.target.value),
+						onKeyDown: (e) => {
+							e.key === "Enter" && (e.preventDefault(), B());
+						},
+						fullWidth: !0,
+						sx: { mt: 1 },
+						slotProps: { input: { endAdornment: /* @__PURE__ */ v(u, {
+							position: "end",
+							children: /* @__PURE__ */ v(l, {
+								size: "small",
+								onClick: B,
+								disabled: !R.trim(),
+								"aria-label": w.dialogSubtaskAdd,
+								children: /* @__PURE__ */ v(g, { fontSize: "small" })
+							})
+						}) } }
+					})
+				] })
 			]
-		}) }), /* @__PURE__ */ f(n, {
-			sx: { justifyContent: S ? "space-between" : "flex-end" },
-			children: [S && w && /* @__PURE__ */ d(e, {
+		}) }), /* @__PURE__ */ y(i, {
+			sx: { justifyContent: j ? "space-between" : "flex-end" },
+			children: [j && N && /* @__PURE__ */ v(t, {
 				color: "error",
-				startIcon: /* @__PURE__ */ d(p, {}),
-				onClick: () => b(w),
-				children: g.dialogDelete
-			}), /* @__PURE__ */ f(s, {
+				startIcon: /* @__PURE__ */ v(x, {}),
+				onClick: () => k(N),
+				children: w.dialogDelete
+			}), /* @__PURE__ */ y(f, {
 				direction: "row",
 				spacing: 1,
-				children: [/* @__PURE__ */ d(e, {
-					onClick: y,
-					children: g.dialogCancel
-				}), /* @__PURE__ */ d(e, {
+				children: [/* @__PURE__ */ v(t, {
+					onClick: O,
+					children: w.dialogCancel
+				}), /* @__PURE__ */ v(t, {
 					variant: "contained",
-					onClick: k,
-					disabled: !D.title.trim(),
-					children: g.dialogSave
+					onClick: U,
+					disabled: !I.title.trim(),
+					children: w.dialogSave
 				})]
 			})]
 		})] })]
 	});
 }
 //#endregion
-export { m as KanbanBoardCardDialog };
+export { S as KanbanBoardCardDialog };

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

@@ -8,11 +8,12 @@ type KanbanBoardColumnProps = {
     showAssignee: boolean;
     showDueDate: boolean;
     showDueDateWarning: boolean;
+    showSubtasks: boolean;
     chipVariant: "outlined" | "filled";
     t: Required<KanbanBoardTranslation>;
     enableBuiltinDialogs: boolean;
     onCardClick: (task: KanbanTask) => void;
     onAddClick: (columnId: string) => void;
 };
-export declare function KanbanBoardColumn({ column, tasks, totalCount, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, enableBuiltinDialogs, onCardClick, onAddClick, }: KanbanBoardColumnProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoardColumn({ column, tasks, totalCount, showPriority, showAssignee, showDueDate, showDueDateWarning, showSubtasks, chipVariant, t, enableBuiltinDialogs, onCardClick, onAddClick, }: KanbanBoardColumnProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,12 +3,12 @@ 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";
+import l from "@mui/icons-material/Add";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/kanban-board/KanbanBoardColumn.tsx
-function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee: g, showDueDate: _, showDueDateWarning: v, chipVariant: y, t: b, enableBuiltinDialogs: x, onCardClick: S, onAddClick: C }) {
-	let { setNodeRef: w, isOver: T } = n({ id: f.id }), E = f.wipLimit !== void 0 && m > f.wipLimit, D = f.wipLimit === void 0 ? `${p.length}` : `${p.length} / ${f.wipLimit}`, O = f.color ?? "primary.main";
-	return /* @__PURE__ */ u(a, {
+function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee: g, showDueDate: _, showDueDateWarning: v, showSubtasks: y, chipVariant: b, t: x, enableBuiltinDialogs: S, onCardClick: C, onAddClick: w }) {
+	let { setNodeRef: T, isOver: E } = n({ id: f.id }), D = f.wipLimit !== void 0 && m > f.wipLimit, O = f.wipLimit === void 0 ? `${p.length}` : `${p.length} / ${f.wipLimit}`, k = f.color ?? "primary.main";
+	return /* @__PURE__ */ d(a, {
 		className: e.column,
 		sx: {
 			display: "flex",
@@ -23,7 +23,7 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 			borderColor: "divider"
 		},
 		children: [
-			/* @__PURE__ */ u(a, {
+			/* @__PURE__ */ d(a, {
 				className: e.columnHeader,
 				sx: {
 					px: 2,
@@ -36,7 +36,7 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 					borderTop: `3px solid ${f.color ?? "transparent"}`,
 					bgcolor: (e) => e.palette.mode === "dark" ? "grey.800" : "grey.300"
 				},
-				children: [/* @__PURE__ */ l(c, {
+				children: [/* @__PURE__ */ u(c, {
 					className: e.columnTitle,
 					variant: "subtitle2",
 					sx: {
@@ -44,15 +44,15 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 						fontWeight: 700
 					},
 					children: f.label
-				}), /* @__PURE__ */ l(s, {
+				}), /* @__PURE__ */ u(s, {
 					className: e.columnCount,
-					label: D,
+					label: O,
 					size: "small",
-					color: E ? "error" : "default",
+					color: D ? "error" : "default",
 					sx: {
 						height: 20,
 						fontSize: "0.7rem",
-						...!E && f.color && {
+						...!D && f.color && {
 							bgcolor: f.color,
 							color: "#fff"
 						}
@@ -60,11 +60,11 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 					"aria-label": `${p.length} cards${f.wipLimit ? ` of ${f.wipLimit} limit` : ""}${p.length === m ? "" : ` (${m} total)`}`
 				})]
 			}),
-			/* @__PURE__ */ l(r, {
+			/* @__PURE__ */ u(r, {
 				items: p.map((e) => e.id),
 				strategy: i,
-				children: /* @__PURE__ */ u(a, {
-					ref: w,
+				children: /* @__PURE__ */ d(a, {
+					ref: T,
 					className: e.columnBody,
 					sx: {
 						flex: 1,
@@ -73,10 +73,10 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 						"&::-webkit-scrollbar": { display: "none" },
 						p: 1,
 						minHeight: 80,
-						bgcolor: (e) => T ? e.palette.action.selected : e.palette.mode === "dark" ? e.palette.grey[900] : e.palette.grey[100],
+						bgcolor: (e) => E ? 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 && !T && /* @__PURE__ */ l(c, {
+					children: [p.length === 0 && !E && /* @__PURE__ */ u(c, {
 						variant: "caption",
 						color: "text.disabled",
 						sx: {
@@ -84,36 +84,38 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 							textAlign: "center",
 							mt: 2
 						},
-						children: b.noCardsLabel
-					}), p.map((e) => /* @__PURE__ */ l(t, {
+						children: x.noCardsLabel
+					}), p.map((e) => /* @__PURE__ */ u(t, {
 						task: e,
 						showPriority: h,
 						showAssignee: g,
 						showDueDate: _,
 						showDueDateWarning: v,
-						chipVariant: y,
-						t: b,
-						onCardClick: S
+						showSubtasks: y,
+						enableBuiltinDialogs: S,
+						chipVariant: b,
+						t: x,
+						onCardClick: C
 					}, e.id))]
 				})
 			}),
-			x && /* @__PURE__ */ l(a, {
+			S && /* @__PURE__ */ u(a, {
 				sx: {
 					p: 1,
 					borderTop: "1px solid",
 					borderColor: "divider"
 				},
-				children: /* @__PURE__ */ l(o, {
+				children: /* @__PURE__ */ u(o, {
 					className: e.addButton,
-					startIcon: /* @__PURE__ */ l(d, {}),
+					startIcon: /* @__PURE__ */ u(l, {}),
 					size: "small",
 					fullWidth: !0,
-					onClick: () => C(f.id),
+					onClick: () => w(f.id),
 					sx: {
 						justifyContent: "flex-start",
-						color: O,
+						color: k,
 						border: "1px dashed",
-						borderColor: O,
+						borderColor: k,
 						borderRadius: 1,
 						py: .75,
 						fontWeight: 600,
@@ -123,7 +125,7 @@ function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee:
 							borderStyle: "dashed"
 						}
 					},
-					children: b.addCardLabel
+					children: x.addCardLabel
 				})
 			})
 		]

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

@@ -46,4 +46,12 @@ export declare const kanbanBoardClasses: {
     readonly cardPriorityDot: "MuiTsKanbanBoard-cardPriorityDot";
     /** The "+ Add card" button at the bottom of each column. */
     readonly addButton: "MuiTsKanbanBoard-addButton";
+    /** The wrapper Box around the built-in search field (`showSearchField={true}`). */
+    readonly searchFieldWrapper: "MuiTsKanbanBoard-searchFieldWrapper";
+    /** The built-in search TextField (`showSearchField={true}`). */
+    readonly searchField: "MuiTsKanbanBoard-searchField";
+    /** The subtask progress row at the bottom of a card (bar + "N / M ✓" label). */
+    readonly cardSubtasks: "MuiTsKanbanBoard-cardSubtasks";
+    /** The LinearProgress bar inside the subtask row. */
+    readonly cardSubtasksBar: "MuiTsKanbanBoard-cardSubtasksBar";
 };

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

@@ -13,7 +13,11 @@ var e = {
 	cardAssignee: "MuiTsKanbanBoard-cardAssignee",
 	cardDueDate: "MuiTsKanbanBoard-cardDueDate",
 	cardPriorityDot: "MuiTsKanbanBoard-cardPriorityDot",
-	addButton: "MuiTsKanbanBoard-addButton"
+	addButton: "MuiTsKanbanBoard-addButton",
+	searchFieldWrapper: "MuiTsKanbanBoard-searchFieldWrapper",
+	searchField: "MuiTsKanbanBoard-searchField",
+	cardSubtasks: "MuiTsKanbanBoard-cardSubtasks",
+	cardSubtasksBar: "MuiTsKanbanBoard-cardSubtasksBar"
 };
 //#endregion
 export { e as kanbanBoardClasses };

package/dist/components/rich-text-editor/RichTextEditorEmojiPicker.js

@@ -1,11 +1,11 @@
 import { EMOJI_CATEGORIES as e } from "./util/emojis.js";
-import { Box as t, InputAdornment as n, Popover as r, TextField as i, Typography as a } from "@mui/material";
-import { useMemo as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import u from "@mui/icons-material/Search";
+import t from "@mui/icons-material/Search";
+import { Box as n, InputAdornment as r, Popover as i, TextField as a, Typography as o } from "@mui/material";
+import { useMemo as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/rich-text-editor/RichTextEditorEmojiPicker.tsx
 function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
-	let [g, _] = s(""), v = o(() => {
+	let [g, _] = c(""), v = s(() => {
 		let t = g.trim().toLowerCase();
 		return t ? e.map((e) => ({
 			...e,
@@ -18,7 +18,7 @@ function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
 	function b() {
 		p(), _("");
 	}
-	return /* @__PURE__ */ l(r, {
+	return /* @__PURE__ */ u(i, {
 		open: f,
 		anchorEl: d,
 		onClose: b,
@@ -36,32 +36,32 @@ function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
 			display: "flex",
 			flexDirection: "column"
 		} } },
-		children: [/* @__PURE__ */ c(t, {
+		children: [/* @__PURE__ */ l(n, {
 			sx: {
 				p: 1,
 				borderBottom: 1,
 				borderColor: "divider"
 			},
-			children: /* @__PURE__ */ c(i, {
+			children: /* @__PURE__ */ l(a, {
 				autoFocus: !0,
 				fullWidth: !0,
 				size: "small",
 				placeholder: h.emojiSearchPlaceholder,
 				value: g,
 				onChange: (e) => _(e.target.value),
-				slotProps: { input: { startAdornment: /* @__PURE__ */ c(n, {
+				slotProps: { input: { startAdornment: /* @__PURE__ */ l(r, {
 					position: "start",
-					children: /* @__PURE__ */ c(u, { fontSize: "small" })
+					children: /* @__PURE__ */ l(t, { fontSize: "small" })
 				}) } }
 			})
-		}), /* @__PURE__ */ l(t, {
+		}), /* @__PURE__ */ u(n, {
 			sx: {
 				overflowY: "auto",
 				flex: 1,
 				px: 1,
 				pb: 1
 			},
-			children: [v.map((e) => /* @__PURE__ */ l(t, { children: [/* @__PURE__ */ c(a, {
+			children: [v.map((e) => /* @__PURE__ */ u(n, { children: [/* @__PURE__ */ l(o, {
 				variant: "caption",
 				sx: {
 					display: "block",
@@ -71,13 +71,13 @@ function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
 					px: .5
 				},
 				children: e.label
-			}), /* @__PURE__ */ c(t, {
+			}), /* @__PURE__ */ l(n, {
 				sx: {
 					display: "flex",
 					flexWrap: "wrap",
 					gap: .25
 				},
-				children: e.emojis.map((e) => /* @__PURE__ */ c(t, {
+				children: e.emojis.map((e) => /* @__PURE__ */ l(n, {
 					component: "button",
 					title: e.name,
 					"aria-label": e.name,
@@ -94,7 +94,7 @@ function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
 					},
 					children: e.emoji
 				}, e.emoji))
-			})] }, e.label)), v.length === 0 && /* @__PURE__ */ c(a, {
+			})] }, e.label)), v.length === 0 && /* @__PURE__ */ l(o, {
 				variant: "body2",
 				color: "text.secondary",
 				sx: {