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

package/dist/components/tag-selection/TagSelection.js

@@ -4,23 +4,23 @@ import { createTagSelectionStore as n } from "./TagSelection.store.js";
 import { TagSelectionAutocomplete as r } from "./TagSelectionAutocomplete.js";
 import { TagSelectionSelectedTags as i } from "./TagSelectionSelectedTags.js";
 import { DEFAULT_TAG_SELECTION_TRANSLATION as a } from "./TagSelection.types.js";
-import { createContext as o, useContext as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import { Box as f, Stack as p } from "@mui/material";
+import { Box as o, Stack as s } from "@mui/material";
+import { createContext as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import { useStore as g } from "zustand";
 //#region src/components/tag-selection/TagSelection.tsx
-var _ = o(null);
+var _ = c(null);
 function v(e) {
-	let t = s(_);
+	let t = l(_);
 	if (!t) throw Error("TagSelectionStoreContext is missing.");
 	return g(t, e);
 }
-function y({ tags: n, showSelectedTags: a = !0, showSelectedTagsLabel: o = !0, showAutoComplete: s = !0, inputSize: d = "medium", chipSize: g = "small", chipVariant: _ = "filled", disabled: y = !1, loading: b = !1, maxTags: x, allowCreate: S = !1, maxVisibleChips: C, popoverPlacement: w = "bottom", listboxMaxHeight: T, searchDebounceMs: E, serverSideFilter: D = !1, translation: O, onTagSelect: k, onTagDelete: A, onTagsChange: j, onSearchChange: M, onTagCreate: N }) {
+function y({ tags: n, showSelectedTags: a = !0, showSelectedTagsLabel: c = !0, showAutoComplete: l = !0, inputSize: p = "medium", chipSize: g = "small", chipVariant: _ = "filled", disabled: y = !1, loading: b = !1, maxTags: x, allowCreate: S = !1, maxVisibleChips: C, popoverPlacement: w = "bottom", listboxMaxHeight: T, searchDebounceMs: E, serverSideFilter: D = !1, translation: O, onTagSelect: k, onTagDelete: A, onTagsChange: j, onSearchChange: M, onTagCreate: N }) {
 	let P = v((e) => e.tags), F = v((e) => e.searchValue), I = v((e) => e.setTags), L = v((e) => e.setSearchValue), R = v((e) => e.selectTag), z = v((e) => e.deleteTag), B = v((e) => e.addTag);
-	c(() => {
+	u(() => {
 		I(n);
 	}, [n, I]);
-	let V = l(() => P.filter((e) => e.selected).sort((e, t) => e.label.localeCompare(t.label)), [P]), H = l(() => P.filter((e) => !e.selected && !e.disabled).sort((e, t) => e.label.localeCompare(t.label)), [P]), U = x !== void 0 && V.length >= x, W = (e) => {
+	let V = d(() => P.filter((e) => e.selected).sort((e, t) => e.label.localeCompare(t.label)), [P]), H = d(() => P.filter((e) => !e.selected && !e.disabled).sort((e, t) => e.label.localeCompare(t.label)), [P]), U = x !== void 0 && V.length >= x, W = (e) => {
 		j && j(e.filter((e) => e.selected), e);
 	}, G = (e) => {
 		if (e.disabled || e.selected) return;
@@ -37,23 +37,23 @@ function y({ tags: n, showSelectedTags: a = !0, showSelectedTagsLabel: o = !0, s
 			selected: !1
 		} : t), n = t.filter((e) => e.selected), r = t.find((t) => t.id === e.id);
 		r && A && A(r, n, t), W(t);
-	}, q = u(null);
-	return c(() => () => {
+	}, q = f(null);
+	return u(() => () => {
 		q.current && clearTimeout(q.current);
-	}, []), /* @__PURE__ */ m(f, {
+	}, []), /* @__PURE__ */ m(o, {
 		sx: { width: "100%" },
 		className: [t.root, y && e.disabled].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ h(p, { children: [a && /* @__PURE__ */ m(i, {
+		children: /* @__PURE__ */ h(s, { children: [a && /* @__PURE__ */ m(i, {
 			selectedTags: V,
 			translation: O,
 			onTagDelete: K,
-			showSelectedTagsLabel: o,
+			showSelectedTagsLabel: c,
 			chipSize: g,
 			chipVariant: _,
 			disabled: y,
 			maxVisibleChips: C,
 			popoverPlacement: w
-		}), s && /* @__PURE__ */ m(r, {
+		}), l && /* @__PURE__ */ m(r, {
 			availableTags: H,
 			searchValue: F,
 			translation: O,
@@ -72,7 +72,7 @@ function y({ tags: n, showSelectedTags: a = !0, showSelectedTagsLabel: o = !0, s
 			onTagCreate: (e) => {
 				B(e), W([...P, e]), N && N(e);
 			},
-			inputSize: d,
+			inputSize: p,
 			chipSize: g,
 			chipVariant: _,
 			disabled: y,
@@ -84,11 +84,11 @@ function y({ tags: n, showSelectedTags: a = !0, showSelectedTagsLabel: o = !0, s
 		})] })
 	});
 }
-function b({ tags: e, showSelectedTags: t = !0, showSelectedTagsLabel: r = !0, showAutoComplete: i = !0, translation: o, inputSize: s = "medium", chipSize: c = "small", chipVariant: l = "filled", disabled: u = !1, loading: f = !1, maxTags: p, allowCreate: h = !1, maxVisibleChips: g, popoverPlacement: v = "bottom", listboxMaxHeight: b, searchDebounceMs: x, serverSideFilter: S = !1, onTagSelect: C, onTagDelete: w, onTagsChange: T, onSearchChange: E, onTagCreate: D }) {
+function b({ tags: e, showSelectedTags: t = !0, showSelectedTagsLabel: r = !0, showAutoComplete: i = !0, translation: o, inputSize: s = "medium", chipSize: c = "small", chipVariant: l = "filled", disabled: u = !1, loading: d = !1, maxTags: f, allowCreate: h = !1, maxVisibleChips: g, popoverPlacement: v = "bottom", listboxMaxHeight: b, searchDebounceMs: x, serverSideFilter: S = !1, onTagSelect: C, onTagDelete: w, onTagsChange: T, onSearchChange: E, onTagCreate: D }) {
 	let O = {
 		...a,
 		...o
-	}, [k] = d(() => n(e));
+	}, [k] = p(() => n(e));
 	return /* @__PURE__ */ m(_.Provider, {
 		value: k,
 		children: /* @__PURE__ */ m(y, {
@@ -101,8 +101,8 @@ function b({ tags: e, showSelectedTags: t = !0, showSelectedTagsLabel: r = !0, s
 			chipSize: c,
 			chipVariant: l,
 			disabled: u,
-			loading: f,
-			maxTags: p,
+			loading: d,
+			maxTags: f,
 			allowCreate: h,
 			maxVisibleChips: g,
 			popoverPlacement: v,

package/dist/components/tag-selection/TagSelectionAutocomplete.js

@@ -1,11 +1,11 @@
 import { tagSelectionClasses as e } from "./tagSelectionClasses.js";
-import { useState as t } from "react";
-import { Autocomplete as n, Box as r, Chip as i, IconButton as a, Stack as o, Switch as s, TextField as c, Tooltip as l, Typography as u } from "@mui/material";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import m from "@mui/icons-material/Check";
-import ee from "@mui/icons-material/Close";
+import { Autocomplete as t, Box as n, Chip as r, IconButton as i, Stack as a, Switch as ee, TextField as o, Tooltip as s, Typography 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/Check";
+import m from "@mui/icons-material/Close";
 //#region src/components/tag-selection/TagSelectionAutocomplete.tsx
-var h = [
+var te = [
 	"default",
 	"primary",
 	"secondary",
@@ -13,7 +13,7 @@ var h = [
 	"info",
 	"success",
 	"warning"
-], g = [
+], h = [
 	"#f44336",
 	"#e91e63",
 	"#9c27b0",
@@ -35,26 +35,26 @@ var h = [
 	"#607d8b",
 	"#000000"
 ];
-function _(e) {
+function g(e) {
 	return /^#[0-9A-Fa-f]{6}$/.test(e);
 }
-function v(e) {
+function _(e) {
 	let t = parseInt(e.slice(1, 3), 16), n = parseInt(e.slice(3, 5), 16), r = parseInt(e.slice(5, 7), 16);
 	return (.299 * t + .587 * n + .114 * r) / 255 > .5 ? "#000000" : "#ffffff";
 }
-function y(e, t) {
+function v(e, t) {
 	let n = t.trim();
 	if (!n) return e;
 	let r = e.toLowerCase().indexOf(n.toLowerCase());
-	return r === -1 ? e : /* @__PURE__ */ p(d, { children: [
+	return r === -1 ? e : /* @__PURE__ */ f(u, { children: [
 		e.slice(0, r),
-		/* @__PURE__ */ f("strong", { children: e.slice(r, r + n.length) }),
+		/* @__PURE__ */ d("strong", { children: e.slice(r, r + n.length) }),
 		e.slice(r + n.length)
 	] });
 }
-function b({ color: e, selected: t, onClick: n }) {
-	return /* @__PURE__ */ f(r, {
-		onClick: n,
+function y({ color: e, selected: t, onClick: r }) {
+	return /* @__PURE__ */ d(n, {
+		onClick: r,
 		sx: {
 			width: 24,
 			height: 24,
@@ -75,15 +75,15 @@ function b({ color: e, selected: t, onClick: n }) {
 		}
 	});
 }
-function x({ value: e, onChange: t, disabled: n = !1 }) {
-	return /* @__PURE__ */ f(c, {
+function b({ value: e, onChange: t, disabled: r = !1 }) {
+	return /* @__PURE__ */ d(o, {
 		size: "small",
 		fullWidth: !0,
 		value: e,
 		onChange: (e) => t(e.target.value),
 		placeholder: "#rrggbb",
-		disabled: n,
-		error: !n && e.length > 1 && !_(e),
+		disabled: r,
+		error: !r && e.length > 1 && !g(e),
 		sx: {
 			"& .MuiInputBase-root": { height: 28 },
 			"& .MuiInputBase-input": {
@@ -93,145 +93,145 @@ function x({ value: e, onChange: t, disabled: n = !1 }) {
 				fontFamily: "monospace"
 			}
 		},
-		slotProps: { input: { startAdornment: /* @__PURE__ */ f(r, { sx: {
+		slotProps: { input: { startAdornment: /* @__PURE__ */ d(n, { sx: {
 			width: 12,
 			height: 12,
 			borderRadius: .25,
 			flexShrink: 0,
 			mr: .5,
-			backgroundColor: _(e) ? e : "action.disabledBackground",
+			backgroundColor: g(e) ? e : "action.disabledBackground",
 			border: "1px solid",
 			borderColor: "divider"
 		} }) } }
 	});
 }
-function S({ availableTags: S, searchValue: C, translation: w, onSearchChange: T, onTagSelect: te, onTagCreate: ne, inputSize: re = "medium", chipSize: E = "medium", chipVariant: ie = "filled", disabled: D = !1, loading: O = !1, isMaxReached: k = !1, allowCreate: ae = !1, listboxMaxHeight: A, serverSideFilter: j = !1 }) {
-	let [M, N] = t("default"), [P, F] = t(null), [I, L] = t(null), [R, z] = t(!0), [B, V] = t(!1), [H, U] = t(!1), [W, G] = t("#1976d2"), [K, q] = t("#ffffff"), J = D || k, Y = P !== null, oe = j ? S : S.filter((e) => e.label.toLowerCase().includes(C.trim().toLowerCase())), X = ae && C.trim() !== "" && oe.length === 0, se = H && !X, Z = Y ? R ? v(P) : I ?? "#000000" : void 0, Q = () => {
-		if (J) return;
-		let e = C.trim(), t = e.toLowerCase().replace(/\s+/g, "-");
-		ne?.(Y && P ? {
+function x({ availableTags: x, searchValue: S, translation: C, onSearchChange: w, onTagSelect: T, onTagCreate: ne, inputSize: re = "medium", chipSize: E = "medium", chipVariant: ie = "filled", disabled: D = !1, loading: ae = !1, isMaxReached: O = !1, allowCreate: oe = !1, listboxMaxHeight: k, serverSideFilter: A = !1 }) {
+	let [j, M] = l("default"), [N, P] = l(null), [F, I] = l(null), [L, R] = l(!0), [z, B] = l(!1), [V, H] = l(!1), [U, W] = l("#1976d2"), [G, K] = l("#ffffff"), q = D || O, J = N !== null, se = A ? x : x.filter((e) => e.label.toLowerCase().includes(S.trim().toLowerCase())), Y = oe && S.trim() !== "" && se.length === 0, ce = V && !Y, X = J ? L ? _(N) : F ?? "#000000" : void 0, Z = () => {
+		if (q) return;
+		let e = S.trim(), t = e.toLowerCase().replace(/\s+/g, "-");
+		ne?.(J && N ? {
 			id: t,
 			label: e,
 			selected: !0,
 			color: "default",
-			backgroundColor: P,
-			foregroundColor: Z
+			backgroundColor: N,
+			foregroundColor: X
 		} : {
 			id: t,
 			label: e,
 			selected: !0,
-			color: M
-		}), N("default"), F(null), L(null), z(!0), V(!1), T("");
-	}, ce = () => {
-		T(""), N("default"), F(null), L(null), z(!0), V(!1);
+			color: j
+		}), M("default"), P(null), I(null), R(!0), B(!1), w("");
+	}, Q = () => {
+		w(""), M("default"), P(null), I(null), R(!0), B(!1);
 	}, le = (e) => {
-		F(e), G(e), N("default");
+		P(e), W(e), M("default");
 	}, ue = (e) => {
-		G(e), _(e) && (F(e), N("default"));
+		W(e), g(e) && (P(e), M("default"));
 	}, de = (e) => {
-		L(e), q(e);
+		I(e), K(e);
 	}, fe = (e) => {
-		q(e), _(e) && L(e);
+		K(e), g(e) && I(e);
 	}, pe = (e) => {
-		if (z(e), e) L(null);
-		else if (P) {
-			let e = v(P);
-			L(e), q(e);
+		if (R(e), e) I(null);
+		else if (N) {
+			let e = _(N);
+			I(e), K(e);
 		}
 	}, $ = (e) => e.preventDefault();
-	return /* @__PURE__ */ p(r, {
+	return /* @__PURE__ */ f(n, {
 		sx: { mb: 2 },
 		className: e.autocomplete,
-		children: [/* @__PURE__ */ f(n, {
-			options: S,
-			filterOptions: j ? (e) => e : void 0,
+		children: [/* @__PURE__ */ d(t, {
+			options: x,
+			filterOptions: A ? (e) => e : void 0,
 			value: null,
-			open: se,
+			open: ce,
 			onOpen: () => {
-				X || U(!0);
+				Y || H(!0);
 			},
-			onClose: () => U(!1),
+			onClose: () => H(!1),
 			size: re,
-			disabled: J,
-			loading: O,
+			disabled: q,
+			loading: ae,
 			getOptionLabel: (e) => e.label,
-			inputValue: C,
+			inputValue: S,
 			onInputChange: (e, t, n) => {
-				n === "input" && T(t);
+				n === "input" && w(t);
 			},
 			onChange: (e, t) => {
-				t && te(t);
+				t && T(t);
 			},
 			slotProps: { listbox: { sx: {
 				display: "flex",
 				flexWrap: "wrap",
 				gap: 1,
 				padding: 1,
-				...A !== void 0 && {
-					maxHeight: A,
+				...k !== void 0 && {
+					maxHeight: k,
 					overflowY: "auto"
 				}
 			} } },
-			renderInput: (e) => /* @__PURE__ */ f(c, {
+			renderInput: (e) => /* @__PURE__ */ d(o, {
 				...e,
-				label: w.autoCompleteLabel,
-				placeholder: w.placeholder,
-				helperText: k && !D ? w.maxTagsReachedText : void 0,
+				label: C.autoCompleteLabel,
+				placeholder: C.placeholder,
+				helperText: O && !D ? C.maxTagsReachedText : void 0,
 				onKeyDown: (e) => {
-					X && !J && e.key === "Enter" && (e.preventDefault(), Q());
+					Y && !q && e.key === "Enter" && (e.preventDefault(), Z());
 				},
 				slotProps: {
 					...e.slotProps,
 					input: {
 						...e.slotProps?.input,
-						endAdornment: /* @__PURE__ */ p(d, { children: [X && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(a, {
+						endAdornment: /* @__PURE__ */ f(u, { children: [Y && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(i, {
 							size: "small",
 							sx: { color: "success.main" },
 							onMouseDown: $,
-							onClick: Q,
-							disabled: J,
-							"aria-label": w.confirmCreateLabel,
-							children: /* @__PURE__ */ f(m, { fontSize: "small" })
-						}), /* @__PURE__ */ f(a, {
+							onClick: Z,
+							disabled: q,
+							"aria-label": C.confirmCreateLabel,
+							children: /* @__PURE__ */ d(p, { fontSize: "small" })
+						}), /* @__PURE__ */ d(i, {
 							size: "small",
 							onMouseDown: $,
-							onClick: ce,
-							"aria-label": w.cancelCreateLabel,
-							children: /* @__PURE__ */ f(ee, { fontSize: "small" })
+							onClick: Q,
+							"aria-label": C.cancelCreateLabel,
+							children: /* @__PURE__ */ d(m, { fontSize: "small" })
 						})] }), e.slotProps?.input?.endAdornment] })
 					}
 				}
 			}),
-			renderOption: ({ key: t, ...n }, r) => {
-				let a = !!(r.foregroundColor || r.backgroundColor);
-				return /* @__PURE__ */ f("li", {
+			renderOption: ({ key: t, ...n }, i) => {
+				let a = !!(i.foregroundColor || i.backgroundColor);
+				return /* @__PURE__ */ d("li", {
 					...n,
 					style: {
 						width: "auto",
 						padding: 0,
 						margin: 0
 					},
-					children: /* @__PURE__ */ f(i, {
+					children: /* @__PURE__ */ d(r, {
 						size: E,
 						variant: ie,
-						label: y(r.label, C),
-						color: a ? void 0 : r.color ?? "default",
+						label: v(i.label, S),
+						color: a ? void 0 : i.color ?? "default",
 						className: e.option,
 						sx: a ? {
-							color: r.foregroundColor ?? "inherit",
-							backgroundColor: r.backgroundColor ?? "transparent"
+							color: i.foregroundColor ?? "inherit",
+							backgroundColor: i.backgroundColor ?? "transparent"
 						} : void 0
 					})
 				}, t);
 			},
 			isOptionEqualToValue: (e, t) => e.id === t.id,
-			noOptionsText: w.noAvailableTagsText,
-			loadingText: w.loadingText
-		}), X && /* @__PURE__ */ p(r, {
+			noOptionsText: C.noAvailableTagsText,
+			loadingText: C.loadingText
+		}), Y && /* @__PURE__ */ f(n, {
 			sx: { position: "relative" },
 			onMouseDown: $,
 			className: e.createPanel,
-			children: [/* @__PURE__ */ p(o, {
+			children: [/* @__PURE__ */ f(a, {
 				direction: "row",
 				sx: {
 					mt: .5,
@@ -239,33 +239,33 @@ function S({ availableTags: S, searchValue: C, translation: w, onSearchChange: T
 					gap: .5,
 					alignItems: "center"
 				},
-				children: [h.map((e) => /* @__PURE__ */ f(i, {
+				children: [te.map((e) => /* @__PURE__ */ d(r, {
 					size: E,
 					color: e,
 					label: e,
-					variant: !Y && M === e ? "filled" : "outlined",
+					variant: !J && j === e ? "filled" : "outlined",
 					onClick: () => {
-						N(e), F(null), L(null), V(!1);
+						M(e), P(null), I(null), B(!1);
 					},
 					clickable: !0
-				}, e)), /* @__PURE__ */ f(l, {
-					title: w.colorPickerLabel,
-					children: /* @__PURE__ */ f(i, {
+				}, e)), /* @__PURE__ */ d(s, {
+					title: C.colorPickerLabel,
+					children: /* @__PURE__ */ d(r, {
 						size: E,
-						label: Y ? P : "···",
+						label: J ? N : "···",
 						variant: "outlined",
 						onClick: () => {
-							V((e) => !e), P && G(P), I && q(I);
+							B((e) => !e), N && W(N), F && K(F);
 						},
 						sx: (e) => ({
 							cursor: "pointer",
 							fontFamily: "monospace",
 							fontSize: "0.7rem",
-							...Y ? {
-								backgroundColor: P,
-								color: Z,
+							...J ? {
+								backgroundColor: N,
+								color: X,
 								border: "1.5px solid transparent",
-								backgroundImage: `linear-gradient(${P}, ${P}), linear-gradient(90deg, #f44336, #ff9800, #ffeb3b, #4caf50, #2196f3, #9c27b0)`,
+								backgroundImage: `linear-gradient(${N}, ${N}), linear-gradient(90deg, #f44336, #ff9800, #ffeb3b, #4caf50, #2196f3, #9c27b0)`,
 								backgroundOrigin: "border-box",
 								backgroundClip: "padding-box, border-box"
 							} : {
@@ -278,7 +278,7 @@ function S({ availableTags: S, searchValue: C, translation: w, onSearchChange: T
 						clickable: !0
 					})
 				})]
-			}), B && /* @__PURE__ */ f(r, {
+			}), z && /* @__PURE__ */ d(n, {
 				sx: {
 					position: "absolute",
 					top: "calc(100% + 4px)",
@@ -292,13 +292,13 @@ function S({ availableTags: S, searchValue: C, translation: w, onSearchChange: T
 					p: 1.25,
 					width: "max-content"
 				},
-				children: /* @__PURE__ */ p(r, {
+				children: /* @__PURE__ */ f(n, {
 					sx: {
 						display: "grid",
 						gridTemplateColumns: "auto auto",
 						gap: 2
 					},
-					children: [/* @__PURE__ */ p(r, { children: [/* @__PURE__ */ f(u, {
+					children: [/* @__PURE__ */ f(n, { children: [/* @__PURE__ */ d(c, {
 						variant: "caption",
 						sx: {
 							fontWeight: 700,
@@ -306,29 +306,29 @@ function S({ availableTags: S, searchValue: C, translation: w, onSearchChange: T
 							display: "block",
 							mb: .5
 						},
-						children: w.backgroundColorLabel
-					}), /* @__PURE__ */ p(r, {
+						children: C.backgroundColorLabel
+					}), /* @__PURE__ */ f(n, {
 						sx: {
 							display: "grid",
 							gridTemplateColumns: "repeat(5, 24px)",
 							gap: .5
 						},
-						children: [g.map((e) => /* @__PURE__ */ f(b, {
+						children: [h.map((e) => /* @__PURE__ */ d(y, {
 							color: e,
-							selected: P === e,
+							selected: N === e,
 							onClick: () => le(e)
-						}, e)), /* @__PURE__ */ f(r, {
+						}, e)), /* @__PURE__ */ d(n, {
 							sx: {
 								gridColumn: "span 5",
 								mt: .25
 							},
-							children: /* @__PURE__ */ f(x, {
-								value: W,
+							children: /* @__PURE__ */ d(b, {
+								value: U,
 								onChange: ue
 							})
 						})]
-					})] }), /* @__PURE__ */ p(r, { children: [
-						/* @__PURE__ */ f(u, {
+					})] }), /* @__PURE__ */ f(n, { children: [
+						/* @__PURE__ */ d(c, {
 							variant: "caption",
 							sx: {
 								fontWeight: 700,
@@ -336,34 +336,34 @@ function S({ availableTags: S, searchValue: C, translation: w, onSearchChange: T
 								display: "block",
 								mb: .5
 							},
-							children: w.textColorLabel
+							children: C.textColorLabel
 						}),
-						/* @__PURE__ */ p(r, {
+						/* @__PURE__ */ f(n, {
 							sx: {
 								display: "grid",
 								gridTemplateColumns: "repeat(5, 24px)",
 								gap: .5,
-								opacity: R ? .3 : 1,
-								pointerEvents: R ? "none" : "auto",
+								opacity: L ? .3 : 1,
+								pointerEvents: L ? "none" : "auto",
 								transition: "opacity 0.15s"
 							},
-							children: [g.map((e) => /* @__PURE__ */ f(b, {
+							children: [h.map((e) => /* @__PURE__ */ d(y, {
 								color: e,
-								selected: I === e,
+								selected: F === e,
 								onClick: () => de(e)
-							}, e)), /* @__PURE__ */ f(r, {
+							}, e)), /* @__PURE__ */ d(n, {
 								sx: {
 									gridColumn: "span 5",
 									mt: .25
 								},
-								children: /* @__PURE__ */ f(x, {
-									value: R ? Z ?? "#000000" : K,
+								children: /* @__PURE__ */ d(b, {
+									value: L ? X ?? "#000000" : G,
 									onChange: fe,
-									disabled: R
+									disabled: L
 								})
 							})]
 						}),
-						/* @__PURE__ */ p(o, {
+						/* @__PURE__ */ f(a, {
 							direction: "row",
 							sx: {
 								width: "100%",
@@ -372,13 +372,13 @@ function S({ availableTags: S, searchValue: C, translation: w, onSearchChange: T
 								gap: .5,
 								mt: .25
 							},
-							children: [/* @__PURE__ */ f(u, {
+							children: [/* @__PURE__ */ d(c, {
 								variant: "caption",
 								color: "text.secondary",
-								children: w.autoTextColorLabel
-							}), /* @__PURE__ */ f(s, {
+								children: C.autoTextColorLabel
+							}), /* @__PURE__ */ d(ee, {
 								size: "small",
-								checked: R,
+								checked: L,
 								onChange: (e) => pe(e.target.checked)
 							})]
 						})
@@ -389,4 +389,4 @@ function S({ availableTags: S, searchValue: C, translation: w, onSearchChange: T
 	});
 }
 //#endregion
-export { S as TagSelectionAutocomplete };
+export { x as TagSelectionAutocomplete };

package/dist/components/tag-selection/TagSelectionSelectedTags.js

@@ -1,11 +1,11 @@
 import { tagSelectionClasses as e } from "./tagSelectionClasses.js";
 import { TagSelectionChip as t } from "./TagSelectionChip.js";
-import { useState as n } from "react";
-import { Box as r, Chip as i, Popover as a, Stack as o, Typography as s } from "@mui/material";
+import { Box as n, Chip as r, Popover as i, Stack as a, Typography as o } from "@mui/material";
+import { useState as s } from "react";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/tag-selection/TagSelectionSelectedTags.tsx
 function d({ selectedTags: d, translation: f, onTagDelete: p, showSelectedTagsLabel: m, chipSize: h = "medium", chipVariant: g = "filled", disabled: _ = !1, maxVisibleChips: v, popoverPlacement: y = "bottom" }) {
-	let [b, x] = n(null), S = v === void 0 ? d : d.slice(0, v), C = v === void 0 ? [] : d.slice(v), w = !!b && C.length > 0, T = y === "top" ? {
+	let [b, x] = s(null), S = v === void 0 ? d : d.slice(0, v), C = v === void 0 ? [] : d.slice(v), w = !!b && C.length > 0, T = y === "top" ? {
 		vertical: "top",
 		horizontal: "left"
 	} : {
@@ -18,19 +18,19 @@ function d({ selectedTags: d, translation: f, onTagDelete: p, showSelectedTagsLa
 		vertical: "top",
 		horizontal: "left"
 	};
-	return /* @__PURE__ */ u(r, {
+	return /* @__PURE__ */ u(n, {
 		sx: { mb: 2 },
 		className: e.selectedTags,
-		children: [m && /* @__PURE__ */ l(s, {
+		children: [m && /* @__PURE__ */ l(o, {
 			variant: "subtitle2",
 			gutterBottom: !0,
 			className: e.selectedTagsLabel,
 			children: f.selectedTagsLabel
-		}), d.length === 0 ? /* @__PURE__ */ l(s, {
+		}), d.length === 0 ? /* @__PURE__ */ l(o, {
 			variant: "body2",
 			color: "text.secondary",
 			children: f.noSelectedTagsText
-		}) : /* @__PURE__ */ u(o, {
+		}) : /* @__PURE__ */ u(a, {
 			direction: "row",
 			sx: {
 				flexWrap: "wrap",
@@ -43,20 +43,20 @@ function d({ selectedTags: d, translation: f, onTagDelete: p, showSelectedTagsLa
 				chipSize: h,
 				chipVariant: g,
 				disabled: _
-			}, e.id)), C.length > 0 && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(i, {
+			}, e.id)), C.length > 0 && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(r, {
 				size: h,
 				label: `+${C.length}`,
 				variant: "outlined",
 				clickable: !0,
 				onClick: (e) => x(e.currentTarget),
 				className: e.overflowChip
-			}), /* @__PURE__ */ l(a, {
+			}), /* @__PURE__ */ l(i, {
 				open: w,
 				anchorEl: b,
 				onClose: () => x(null),
 				anchorOrigin: T,
 				transformOrigin: E,
-				children: /* @__PURE__ */ l(r, {
+				children: /* @__PURE__ */ l(n, {
 					sx: {
 						p: 1,
 						display: "flex",