@thebuoyant-tsdev/mui-ts-library 3.20.0 → 3.21.0

package/README.de.md

@@ -475,6 +475,13 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/). In der Praxis b
 
 ## Changelog
 
+### [3.21.0] — 2026-07-09
+
+**Hinzugefügt**
+- `TagSelection`: neue Prop `chipVariant?: 'filled' | 'outlined'` (Standard: `'filled'`) — steuert die MUI-Chip-Variante für alle Tag-Chips im Auswahl-Bereich und im Autocomplete-Dropdown. Consumer mit eigenem Design-System, das `outlined`-Chips bevorzugt, müssen keine Styles mehr manuell überschreiben. Siehe [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) für Details.
+
+---
+
 ### [3.20.0] — 2026-07-09
 
 **Hinzugefügt**

package/README.md

@@ -475,6 +475,13 @@ This project follows [Semantic Versioning](https://semver.org/). In practice:
 
 ## Changelog
 
+### [3.21.0] — 2026-07-09
+
+**Added**
+- `TagSelection`: new `chipVariant?: 'filled' | 'outlined'` prop (default: `'filled'`) — controls the MUI Chip variant for all tag chips in the selected-tags area and in the autocomplete dropdown. Consumers with a design system that prefers `outlined` chips no longer need to override styles manually. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
 ### [3.20.0] — 2026-07-09
 
 **Added**

package/dist/components/tag-selection/TagSelection.d.ts

@@ -1,2 +1,2 @@
 import type { TagSelectionProps } from "./TagSelection.types";
-export declare function TagSelection({ tags, showSelectedTags, showSelectedTagsLabel, showAutoComplete, translation, inputSize, chipSize, disabled, loading, maxTags, allowCreate, maxVisibleChips, popoverPlacement, listboxMaxHeight, searchDebounceMs, serverSideFilter, onTagSelect, onTagDelete, onTagsChange, onSearchChange, onTagCreate, }: TagSelectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagSelection({ tags, showSelectedTags, showSelectedTagsLabel, showAutoComplete, translation, inputSize, chipSize, chipVariant, disabled, loading, maxTags, allowCreate, maxVisibleChips, popoverPlacement, listboxMaxHeight, searchDebounceMs, serverSideFilter, onTagSelect, onTagDelete, onTagsChange, onSearchChange, onTagCreate, }: TagSelectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -13,101 +13,104 @@ function g(e) {
 	if (!t) throw Error("TagSelectionStoreContext is missing.");
 	return m(t, e);
 }
-function _({ tags: e, showSelectedTags: r = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, inputSize: l = "medium", chipSize: m = "small", disabled: h = !1, loading: _ = !1, maxTags: v, allowCreate: y = !1, maxVisibleChips: b, popoverPlacement: x = "bottom", listboxMaxHeight: S, searchDebounceMs: C, serverSideFilter: w = !1, translation: T, onTagSelect: E, onTagDelete: D, onTagsChange: O, onSearchChange: k, onTagCreate: A }) {
-	let j = g((e) => e.tags), M = g((e) => e.searchValue), N = g((e) => e.setTags), P = g((e) => e.setSearchValue), F = g((e) => e.selectTag), I = g((e) => e.deleteTag), L = g((e) => e.addTag);
+function _({ tags: e, showSelectedTags: r = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, inputSize: l = "medium", chipSize: m = "small", chipVariant: h = "filled", disabled: _ = !1, loading: v = !1, maxTags: y, allowCreate: b = !1, maxVisibleChips: x, popoverPlacement: S = "bottom", listboxMaxHeight: C, searchDebounceMs: w, serverSideFilter: T = !1, translation: E, onTagSelect: D, onTagDelete: O, onTagsChange: k, onSearchChange: A, onTagCreate: j }) {
+	let M = g((e) => e.tags), N = g((e) => e.searchValue), P = g((e) => e.setTags), F = g((e) => e.setSearchValue), I = g((e) => e.selectTag), L = g((e) => e.deleteTag), R = g((e) => e.addTag);
 	o(() => {
-		N(e);
-	}, [e, N]);
-	let R = s(() => j.filter((e) => e.selected).sort((e, t) => e.label.localeCompare(t.label)), [j]), z = s(() => j.filter((e) => !e.selected && !e.disabled).sort((e, t) => e.label.localeCompare(t.label)), [j]), B = v !== void 0 && R.length >= v, V = (e) => {
-		O && O(e.filter((e) => e.selected), e);
-	}, H = (e) => {
+		P(e);
+	}, [e, P]);
+	let z = s(() => M.filter((e) => e.selected).sort((e, t) => e.label.localeCompare(t.label)), [M]), B = s(() => M.filter((e) => !e.selected && !e.disabled).sort((e, t) => e.label.localeCompare(t.label)), [M]), V = y !== void 0 && z.length >= y, H = (e) => {
+		k && k(e.filter((e) => e.selected), e);
+	}, U = (e) => {
 		if (e.disabled || e.selected) return;
-		F(e.id);
-		let t = j.map((t) => t.id === e.id ? {
+		I(e.id);
+		let t = M.map((t) => t.id === e.id ? {
 			...t,
 			selected: !0
 		} : t), n = t.filter((e) => e.selected), r = t.find((t) => t.id === e.id);
-		r && E && E(r, n, t), V(t);
-	}, U = (e) => {
-		I(e.id);
-		let t = j.map((t) => t.id === e.id ? {
+		r && D && D(r, n, t), H(t);
+	}, W = (e) => {
+		L(e.id);
+		let t = M.map((t) => t.id === e.id ? {
 			...t,
 			selected: !1
 		} : t), n = t.filter((e) => e.selected), r = t.find((t) => t.id === e.id);
-		r && D && D(r, n, t), V(t);
-	}, W = c(null);
+		r && O && O(r, n, t), H(t);
+	}, G = c(null);
 	return o(() => () => {
-		W.current && clearTimeout(W.current);
+		G.current && clearTimeout(G.current);
 	}, []), /* @__PURE__ */ f(u, {
 		sx: { width: "100%" },
 		children: /* @__PURE__ */ p(d, { children: [r && /* @__PURE__ */ f(n, {
-			selectedTags: R,
-			translation: T,
-			onTagDelete: U,
+			selectedTags: z,
+			translation: E,
+			onTagDelete: W,
 			showSelectedTagsLabel: i,
 			chipSize: m,
-			disabled: h,
-			maxVisibleChips: b,
-			popoverPlacement: x
+			chipVariant: h,
+			disabled: _,
+			maxVisibleChips: x,
+			popoverPlacement: S
 		}), a && /* @__PURE__ */ f(t, {
-			availableTags: z,
-			searchValue: M,
-			translation: T,
+			availableTags: B,
+			searchValue: N,
+			translation: E,
 			onSearchChange: (e) => {
-				if (P(e), k) {
-					if (W.current &&= (clearTimeout(W.current), null), !C) {
-						k(e);
+				if (F(e), A) {
+					if (G.current &&= (clearTimeout(G.current), null), !w) {
+						A(e);
 						return;
 					}
-					W.current = setTimeout(() => {
-						k(e), W.current = null;
-					}, C);
+					G.current = setTimeout(() => {
+						A(e), G.current = null;
+					}, w);
 				}
 			},
-			onTagSelect: H,
+			onTagSelect: U,
 			onTagCreate: (e) => {
-				L(e), V([...j, e]), A && A(e);
+				R(e), H([...M, e]), j && j(e);
 			},
 			inputSize: l,
 			chipSize: m,
-			disabled: h,
-			loading: _,
-			isMaxReached: B,
-			allowCreate: y,
-			listboxMaxHeight: S,
-			serverSideFilter: w
+			chipVariant: h,
+			disabled: _,
+			loading: v,
+			isMaxReached: V,
+			allowCreate: b,
+			listboxMaxHeight: C,
+			serverSideFilter: T
 		})] })
 	});
 }
-function v({ tags: t, showSelectedTags: n = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, translation: o, inputSize: s = "medium", chipSize: c = "small", disabled: u = !1, loading: d = !1, maxTags: p, allowCreate: m = !1, maxVisibleChips: g, popoverPlacement: v = "bottom", listboxMaxHeight: y, searchDebounceMs: b, serverSideFilter: x = !1, onTagSelect: S, onTagDelete: C, onTagsChange: w, onSearchChange: T, onTagCreate: E }) {
-	let D = {
+function v({ tags: t, showSelectedTags: n = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, translation: o, inputSize: s = "medium", chipSize: c = "small", chipVariant: u = "filled", disabled: d = !1, loading: p = !1, maxTags: m, allowCreate: g = !1, maxVisibleChips: v, popoverPlacement: y = "bottom", listboxMaxHeight: b, searchDebounceMs: x, serverSideFilter: S = !1, onTagSelect: C, onTagDelete: w, onTagsChange: T, onSearchChange: E, onTagCreate: D }) {
+	let O = {
 		...r,
 		...o
-	}, [O] = l(() => e(t));
+	}, [k] = l(() => e(t));
 	return /* @__PURE__ */ f(h.Provider, {
-		value: O,
+		value: k,
 		children: /* @__PURE__ */ f(_, {
 			tags: t,
 			showSelectedTags: n,
 			showSelectedTagsLabel: i,
 			showAutoComplete: a,
-			translation: D,
+			translation: O,
 			inputSize: s,
 			chipSize: c,
-			disabled: u,
-			loading: d,
-			maxTags: p,
-			allowCreate: m,
-			maxVisibleChips: g,
-			popoverPlacement: v,
-			listboxMaxHeight: y,
-			searchDebounceMs: b,
-			serverSideFilter: x,
-			onTagSelect: S,
-			onTagDelete: C,
-			onTagsChange: w,
-			onSearchChange: T,
-			onTagCreate: E
+			chipVariant: u,
+			disabled: d,
+			loading: p,
+			maxTags: m,
+			allowCreate: g,
+			maxVisibleChips: v,
+			popoverPlacement: y,
+			listboxMaxHeight: b,
+			searchDebounceMs: x,
+			serverSideFilter: S,
+			onTagSelect: C,
+			onTagDelete: w,
+			onTagsChange: T,
+			onSearchChange: E,
+			onTagCreate: D
 		})
 	});
 }

package/dist/components/tag-selection/TagSelection.types.d.ts

@@ -29,6 +29,12 @@ export declare const DEFAULT_TAG_SELECTION_TRANSLATION: Required<TagSelectionTra
 export type TagSelectionProps = {
     allowCreate?: boolean;
     chipSize?: "small" | "medium";
+    /** Controls the MUI Chip variant for selected tag chips and autocomplete option chips.
+     * Useful for consumers with a custom design system that prefer `outlined` chips.
+     * Default: `'filled'`.
+     * @since 3.21.0
+     */
+    chipVariant?: "filled" | "outlined";
     disabled?: boolean;
     inputSize?: "small" | "medium";
     listboxMaxHeight?: number;

package/dist/components/tag-selection/TagSelectionAutocomplete.d.ts

@@ -2,6 +2,7 @@ import type { TagSelectionItem, TagSelectionTranslation } from "./TagSelection.t
 type TagSelectionAutocompleteProps = {
     inputSize: "medium" | "small";
     chipSize: "medium" | "small";
+    chipVariant: "filled" | "outlined";
     availableTags: TagSelectionItem[];
     searchValue: string;
     translation: Required<TagSelectionTranslation>;
@@ -15,5 +16,5 @@ type TagSelectionAutocompleteProps = {
     listboxMaxHeight?: number;
     serverSideFilter?: boolean;
 };
-export declare function TagSelectionAutocomplete({ availableTags, searchValue, translation, onSearchChange, onTagSelect, onTagCreate, inputSize, chipSize, disabled, loading, isMaxReached, allowCreate, listboxMaxHeight, serverSideFilter, }: TagSelectionAutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagSelectionAutocomplete({ availableTags, searchValue, translation, onSearchChange, onTagSelect, onTagCreate, inputSize, chipSize, chipVariant, disabled, loading, isMaxReached, allowCreate, listboxMaxHeight, serverSideFilter, }: TagSelectionAutocompleteProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

package/dist/components/tag-selection/TagSelectionChip.d.ts

@@ -4,7 +4,8 @@ type TagSelectionChipProps = {
     onDelete?: (tag: TagSelectionItem) => void;
     onClick?: (tag: TagSelectionItem) => void;
     chipSize: "small" | "medium";
+    chipVariant: "filled" | "outlined";
     disabled?: boolean;
 };
-export declare function TagSelectionChip({ tag, onDelete, onClick, chipSize, disabled, }: TagSelectionChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagSelectionChip({ tag, onDelete, onClick, chipSize, chipVariant, disabled, }: TagSelectionChipProps): import("react/jsx-runtime").JSX.Element;
 export {};