@solostylist/ui-kit 1.0.210 → 1.0.211

package/dist/s-accordion/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-accordion-xci0j8Cs.js";
+import { t as e } from "../s-accordion-DkA0dsLD.js";
 export { e as SAccordion, e as default };

package/dist/s-accordion/s-accordion.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-accordion-xci0j8Cs.js";
+import { t as e } from "../s-accordion-DkA0dsLD.js";
 export { e as SAccordion, e as default };

package/dist/{s-accordion-xci0j8Cs.js → s-accordion-DkA0dsLD.js}

@@ -10,7 +10,7 @@ import { _ as p, c as m, g as h, m as g, s as _, t as v } from "./useSlot-TsaoJM
 import { a as y, n as b, t as x } from "./Paper-BqlfdEtj.js";
 import { t as S } from "./useControlled-DZYTbMHD.js";
 import { t as C } from "./Typography-BXFTm80G.js";
-import { t as w } from "./ExpandMore-Bbs9v71g.js";
+import { t as w } from "./ExpandMore-BOF9F55V.js";
 import * as T from "react";
 import "react";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";

package/dist/s-avatar/s-avatar.d.ts

@@ -1,3 +1,4 @@
+import { PropsWithChildren } from 'react';
 import { AvatarProps } from '@mui/material';
 /**
  * Props interface for SAvatar component
@@ -15,7 +16,7 @@ export interface SAvatarProps {
     avatarProps?: AvatarProps;
 }
 export declare const SAvatar: {
-    ({ avatar, name, showName, size, avatarProps }: SAvatarProps): import("react/jsx-runtime").JSX.Element;
+    ({ avatar, name, showName, size, avatarProps, children }: PropsWithChildren<SAvatarProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default SAvatar;

package/dist/s-avatar/s-avatar.js

@@ -2,7 +2,7 @@ import e from "../s-lazy-image/s-lazy-image.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { Avatar as r, Box as i, Typography as a } from "@mui/material";
 //#region lib/s-avatar/s-avatar.tsx
-var o = ({ avatar: o, name: s, showName: c = !1, size: l = 40, avatarProps: u }) => /* @__PURE__ */ n(i, {
+var o = ({ avatar: o, name: s, showName: c = !1, size: l = 40, avatarProps: u, children: d }) => /* @__PURE__ */ n(i, {
 	display: "flex",
 	alignItems: "center",
 	gap: 2,
@@ -13,14 +13,14 @@ var o = ({ avatar: o, name: s, showName: c = !1, size: l = 40, avatarProps: u })
 			fontSize: 16
 		},
 		...u,
-		children: o ? /* @__PURE__ */ t(e, {
+		children: d ?? (o ? /* @__PURE__ */ t(e, {
 			src: o,
 			alt: s ?? "Avatar",
 			width: l,
 			height: l,
 			variant: "circular",
 			style: { borderRadius: "50%" }
-		}) : s?.[0] ?? "A"
+		}) : s?.[0] ?? "A")
 	}), c && /* @__PURE__ */ t(a, {
 		variant: "body1",
 		fontSize: 20,

package/dist/s-chat-input/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-chat-input-BrBZtzoF.js";
+import { t as e } from "../s-chat-input-BXwhUdvm.js";
 export { e as SChatInput, e as default };

package/dist/s-chat-input/s-chat-input.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-chat-input-BrBZtzoF.js";
+import { t as e } from "../s-chat-input-BXwhUdvm.js";
 export { e as SChatInput, e as default };

package/dist/{s-chat-input-BrBZtzoF.js → s-chat-input-BXwhUdvm.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./createSvgIcon-CMGRw0Lo.js";
 import { t } from "./ArrowUpward-BPZzNgi2.js";
 import { t as n } from "./Close-owIfEKhu.js";
-import { t as r } from "./s-text-field-D5F4wewz.js";
+import { t as r } from "./s-text-field-D1IehXqm.js";
 import { SIconButton as i } from "./s-icon-button/s-icon-button.js";
 import { SFileIcon as a } from "./s-file-icon/s-file-icon.js";
 import { forwardRef as o, useEffect as s, useId as c, useState as l } from "react";

package/dist/s-chat-message/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-chat-message-CVks-zAy.js";
+import { t as e } from "../s-chat-message-DU6sQjxx.js";
 export { e as SChatMessage, e as default };

package/dist/s-chat-message/s-chat-message.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-chat-message-CVks-zAy.js";
+import { t as e } from "../s-chat-message-DU6sQjxx.js";
 export { e as SChatMessage, e as default };

package/dist/{s-chat-message-CVks-zAy.js → s-chat-message-DU6sQjxx.js}

@@ -1,6 +1,6 @@
 import { n as e, r as t } from "./utils-CKGB5_56.js";
 import { t as n } from "./createSvgIcon-CMGRw0Lo.js";
-import { t as r } from "./Download-DnNUuuOa.js";
+import { t as r } from "./Download-Dg9NBUSj.js";
 import i from "./s-lazy-image/s-lazy-image.js";
 import { SSkeleton as a } from "./s-skeleton/s-skeleton.js";
 import { SAvatar as o } from "./s-avatar/s-avatar.js";

package/dist/s-chips/index.js

@@ -1,2 +1,3 @@
-import { SChips as e } from "./s-chips.js";
+import "../createTheme-hnicUJQa.js";
+import { t as e } from "../s-chips-CosD17ng.js";
 export { e as SChips, e as default };

package/dist/s-chips/s-chips.d.ts

@@ -1,4 +1,7 @@
 import * as React from 'react';
+export type SChipColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+export type SChipVariant = 'filled' | 'outlined';
+export type SChipSize = 'small' | 'medium';
 /**
  * Props interface for SChips component
  */
@@ -11,9 +14,21 @@ export interface SChipsProps {
     onClick?: (tag: string) => void;
     /** Text used in overflow chip (default: 'keywords') */
     overflowText?: string;
+    /** Color applied to all chips */
+    color?: SChipColor;
+    /** Visual variant applied to all chips */
+    variant?: SChipVariant;
+    /** Size applied to all chips */
+    size?: SChipSize;
+    /** Spacing between chips in pixels. Default: 8 */
+    gap?: number;
+    /** Array of selected chip labels. Controls which chips appear selected (for filter chips). */
+    selectedChips?: string[];
+    /** Callback fired when chip selection is toggled. Use with selectedChips for controlled filter chip behavior. */
+    onSelectionChange?: (selected: string[]) => void;
 }
 export declare const SChips: {
-    ({ chips, overflow, onClick, overflowText, }: SChipsProps): React.JSX.Element;
+    ({ chips, overflow, onClick, overflowText, color, variant, size, gap, selectedChips, onSelectionChange, }: SChipsProps): React.JSX.Element;
     displayName: string;
 };
 export default SChips;

package/dist/s-chips/s-chips.js

@@ -1,92 +1,3 @@
-import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Box as o, Chip as s, Tooltip as c } from "@mui/material";
-//#region lib/s-chips/s-chips.tsx
-var l = ({ chips: l, overflow: u = !0, onClick: d, overflowText: f = "keywords" }) => {
-	let p = n(null), [m, h] = r([]), [g, _] = r([]), [v, y] = r(0), b = e((e) => {
-		let t = document.createElement("span");
-		t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.textContent = e.trim(), document.body.appendChild(t);
-		let n = t.offsetWidth;
-		return document.body.removeChild(t), n + 16;
-	}, []), x = e(() => {
-		let e = p.current?.offsetWidth ?? 0, t = 0, n = 0;
-		for (let r of l) {
-			let i = b(r);
-			if (t + i <= e) t += i, n++;
-			else break;
-		}
-		if (n < l.length) {
-			let r = b(`+${l.length - n} ${f}`);
-			for (; t + r > e && n > 0;) n--, t -= b(l[n]);
-		}
-		h(l.slice(0, n)), _(l.slice(n)), y(l.length - n);
-	}, [
-		l,
-		f,
-		b
-	]), S = u ? {
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap",
-		overflow: "hidden"
-	} : {};
-	return t(() => {
-		if (u) return x(), window.addEventListener("resize", x), () => {
-			window.removeEventListener("resize", x);
-		};
-	}, [
-		l,
-		u,
-		x
-	]), /* @__PURE__ */ a(o, {
-		ref: p,
-		display: "flex",
-		maxWidth: "100%",
-		flexWrap: u ? "nowrap" : "wrap",
-		...S,
-		children: [(u ? m : l).map((e) => /* @__PURE__ */ i(o, {
-			component: "span",
-			textTransform: "lowercase",
-			onClick: () => {
-				d?.(e);
-			},
-			children: /* @__PURE__ */ i(s, {
-				label: e.trim(),
-				sx: {
-					mr: 1,
-					mb: 1,
-					userSelect: "none",
-					cursor: d ? "pointer" : "default"
-				}
-			})
-		}, e)), u && v > 0 && /* @__PURE__ */ i(c, {
-			slotProps: { tooltip: { style: { padding: "0.5rem" } } },
-			arrow: !0,
-			placement: "top",
-			title: /* @__PURE__ */ i(o, {
-				display: "flex",
-				gap: 1,
-				maxWidth: "240px",
-				flexWrap: "wrap",
-				children: g.map((e) => /* @__PURE__ */ i(s, { label: e.trim() }, e))
-			}),
-			children: /* @__PURE__ */ i(o, {
-				component: "span",
-				textTransform: "lowercase",
-				children: /* @__PURE__ */ i(s, {
-					label: `+${v} ${f}`,
-					variant: "outlined",
-					color: "info",
-					sx: {
-						mr: 1,
-						mb: 1,
-						userSelect: "none",
-						cursor: "pointer"
-					}
-				})
-			})
-		})]
-	});
-};
-l.displayName = "SChips";
-//#endregion
-export { l as SChips, l as default };
+import "../createTheme-hnicUJQa.js";
+import { t as e } from "../s-chips-CosD17ng.js";
+export { e as SChips, e as default };

package/dist/s-chips-CosD17ng.js

@@ -0,0 +1,95 @@
+import { t as e } from "./createSvgIcon-CMGRw0Lo.js";
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Box as s, Chip as c, Tooltip as l } from "@mui/material";
+//#region ../../node_modules/@mui/icons-material/esm/Done.js
+var u = e(/* @__PURE__ */ a("path", { d: "M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" }), "Done"), d = ({ chips: e, overflow: d = !0, onClick: f, overflowText: p = "keywords", color: m = "primary", variant: h = "filled", size: g = "medium", gap: _ = 8, selectedChips: v, onSelectionChange: y }) => {
+	let b = r(null), [x, S] = i([]), [C, w] = i([]), [T, E] = i(0), D = (e) => {
+		y && v !== void 0 && y(v.includes(e) ? v.filter((t) => t !== e) : [...v, e]), f?.(e);
+	}, O = t((e) => {
+		let t = document.createElement("span");
+		t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.textContent = e.trim(), document.body.appendChild(t);
+		let n = t.offsetWidth;
+		return document.body.removeChild(t), n + 16;
+	}, []), k = t(() => {
+		let t = b.current?.offsetWidth ?? 0, n = 0, r = 0;
+		for (let i of e) {
+			let e = O(i) + _;
+			if (n + e <= t) n += e, r++;
+			else break;
+		}
+		if (r < e.length) {
+			let i = O(`+${e.length - r} ${p}`) + _;
+			for (; n + i > t && r > 0;) r--, n -= O(e[r]) + _;
+		}
+		S(e.slice(0, r)), w(e.slice(r)), E(e.length - r);
+	}, [
+		e,
+		p,
+		_,
+		O
+	]);
+	n(() => {
+		if (d) return k(), window.addEventListener("resize", k), () => {
+			window.removeEventListener("resize", k);
+		};
+	}, [
+		e,
+		d,
+		k
+	]);
+	let A = !!(f || y), j = d ? {
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		overflow: "hidden"
+	} : {};
+	return /* @__PURE__ */ o(s, {
+		ref: b,
+		display: "flex",
+		maxWidth: "100%",
+		flexWrap: d ? "nowrap" : "wrap",
+		gap: `${_}px`,
+		...j,
+		children: [(d ? x : e).map((e) => {
+			let t = v?.includes(e) ?? !1;
+			return /* @__PURE__ */ a(c, {
+				label: e.trim(),
+				color: m,
+				variant: h,
+				size: g,
+				icon: t ? /* @__PURE__ */ a(u, {}) : void 0,
+				onClick: A ? () => D(e) : void 0,
+				sx: { userSelect: "none" }
+			}, e);
+		}), d && T > 0 && /* @__PURE__ */ a(l, {
+			slotProps: { tooltip: { style: { padding: "0.5rem" } } },
+			arrow: !0,
+			placement: "top",
+			title: /* @__PURE__ */ a(s, {
+				display: "flex",
+				gap: 1,
+				maxWidth: "240px",
+				flexWrap: "wrap",
+				children: C.map((e) => /* @__PURE__ */ a(c, {
+					label: e.trim(),
+					color: m,
+					variant: h,
+					size: g
+				}, e))
+			}),
+			children: /* @__PURE__ */ a(c, {
+				label: `+${T} ${p}`,
+				variant: "outlined",
+				color: "info",
+				size: g,
+				sx: {
+					userSelect: "none",
+					cursor: "pointer"
+				}
+			})
+		})]
+	});
+};
+d.displayName = "SChips";
+//#endregion
+export { d as t };

package/dist/s-code-block/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-code-block-CESe31n4.js";
+import { t as e } from "../s-code-block-qdU4tr3O.js";
 export { e as SCodeBlock, e as default };

package/dist/s-code-block/s-code-block.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-code-block-CESe31n4.js";
+import { t as e } from "../s-code-block-qdU4tr3O.js";
 export { e as SCodeBlock, e as default };

package/dist/s-comment-message/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-comment-message-DRTsZ8uB.js";
+import { t as e } from "../s-comment-message-BNEmIOGv.js";
 export { e as SCommentMessage, e as default };

package/dist/s-comment-message/s-comment-message.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-comment-message-DRTsZ8uB.js";
+import { t as e } from "../s-comment-message-BNEmIOGv.js";
 export { e as SCommentMessage, e as default };

package/dist/{s-comment-message-DRTsZ8uB.js → s-comment-message-BNEmIOGv.js}

@@ -1,7 +1,7 @@
 import { i as e } from "./utils-CKGB5_56.js";
 import { t } from "./createSvgIcon-CMGRw0Lo.js";
-import { t as n } from "./ExpandMore-Bbs9v71g.js";
-import { t as r } from "./Favorite-DWeh5yvd.js";
+import { t as n } from "./ExpandMore-BOF9F55V.js";
+import { t as r } from "./Favorite-BVeoH6Jh.js";
 import { SSkeleton as i } from "./s-skeleton/s-skeleton.js";
 import { SAvatar as a } from "./s-avatar/s-avatar.js";
 import { useEffect as o, useId as s, useState as c } from "react";

package/dist/s-data-table/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-data-table-DI2jMNS3.js";
+import { t as e } from "../s-data-table-J8XJWWBV.js";
 export { e as SDataTable, e as default };

package/dist/s-data-table/s-data-table.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-data-table-DI2jMNS3.js";
+import { t as e } from "../s-data-table-J8XJWWBV.js";
 export { e as SDataTable, e as default };

package/dist/s-date-picker/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-date-picker-Cku9Na_3.js";
+import { t as e } from "../s-date-picker-DsVzH2z9.js";
 export { e as SDatePicker, e as default };

package/dist/s-date-picker/s-date-picker.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-date-picker-Cku9Na_3.js";
+import { t as e } from "../s-date-picker-DsVzH2z9.js";
 export { e as SDatePicker, e as default };

package/dist/s-datetime-picker/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-datetime-picker-UGhAPyFM.js";
+import { t as e } from "../s-datetime-picker-Ba_hgXEo.js";
 export { e as SDateTimePicker, e as default };

package/dist/s-datetime-picker/s-datetime-picker.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-datetime-picker-UGhAPyFM.js";
+import { t as e } from "../s-datetime-picker-Ba_hgXEo.js";
 export { e as SDateTimePicker, e as default };

package/dist/{s-datetime-picker-UGhAPyFM.js → s-datetime-picker-Ba_hgXEo.js}

@@ -15,7 +15,7 @@ import { t as We } from "./createSvgIcon-CMGRw0Lo.js";
 import { n as Ge, t as Ke } from "./tabClasses-ywhJ0fbh.js";
 import { t as qe } from "./Typography-BXFTm80G.js";
 import { SForm as Je } from "./s-form/s-form.js";
-import { r as Ye, t as Xe } from "./MenuItem-C_2diLd2.js";
+import { r as Ye, t as Xe } from "./MenuItem-DyhMKc_V.js";
 import * as X from "react";
 import { jsx as Z, jsxs as Q } from "react/jsx-runtime";
 import { TextField as Ze, useTheme as Qe } from "@mui/material";

package/dist/s-label/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-label-BeNa8mNJ.js";
+import { t as e } from "../s-label-DSVEMOfm.js";
 export { e as SLabel, e as default };

package/dist/s-label/s-label.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-label-BeNa8mNJ.js";
+import { t as e } from "../s-label-DSVEMOfm.js";
 export { e as SLabel, e as default };

package/dist/s-language-switcher/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { n as e, r as t, t as n } from "../s-language-switcher-DdBeoNNv.js";
+import { n as e, r as t, t as n } from "../s-language-switcher-CG1TfY0A.js";
 export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/s-language-switcher/s-language-switcher.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { n as e, r as t, t as n } from "../s-language-switcher-DdBeoNNv.js";
+import { n as e, r as t, t as n } from "../s-language-switcher-CG1TfY0A.js";
 export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/{s-language-switcher-DdBeoNNv.js → s-language-switcher-CG1TfY0A.js}

@@ -5,7 +5,7 @@ import { t as a } from "./clsx-BTH_sxEO.js";
 import { t as o } from "./styled-C0_N3zFx.js";
 import { i as s, t as c } from "./Menu-C1gbagw8.js";
 import { t as l } from "./Typography-BXFTm80G.js";
-import { n as u, t as d } from "./MenuItem-C_2diLd2.js";
+import { n as u, t as d } from "./MenuItem-DyhMKc_V.js";
 import { SIconButton as f } from "./s-icon-button/s-icon-button.js";
 import * as p from "react";
 import m, { createElement as h } from "react";

package/dist/s-localization-provider/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-localization-provider-krlrsqO8.js";
+import { t as e } from "../s-localization-provider-D3NT6y0c.js";
 export { e as SLocalizationProvider, e as default };

package/dist/s-localization-provider/s-localization-provider.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-localization-provider-krlrsqO8.js";
+import { t as e } from "../s-localization-provider-D3NT6y0c.js";
 export { e as SLocalizationProvider, e as default };

package/dist/s-multi-select/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-multi-select-DIf9s_Kp.js";
+import { t as e } from "../s-multi-select-CTtWSr8-.js";
 export { e as SMultiSelect, e as default };

package/dist/s-multi-select/s-multi-select.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-multi-select-DIf9s_Kp.js";
+import { t as e } from "../s-multi-select-CTtWSr8-.js";
 export { e as SMultiSelect, e as default };

package/dist/{s-multi-select-DIf9s_Kp.js → s-multi-select-CTtWSr8-.js}

@@ -1,14 +1,14 @@
 import { t as e } from "./Menu-C1gbagw8.js";
 import { t } from "./createSvgIcon-CMGRw0Lo.js";
-import { t as n } from "./MenuItem-C_2diLd2.js";
-import { usePopover as r } from "./hooks/use-popover.js";
-import { SChips as i } from "./s-chips/s-chips.js";
+import { t as n } from "./s-chips-CosD17ng.js";
+import { t as r } from "./MenuItem-DyhMKc_V.js";
+import { usePopover as i } from "./hooks/use-popover.js";
 import * as a from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { OutlinedInput as c, Stack as l } from "@mui/material";
 //#region ../../node_modules/@mui/icons-material/esm/UnfoldMore.js
 var u = t(/* @__PURE__ */ o("path", { d: "M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15z" }), "UnfoldMore"), d = ({ label: t, onChange: d, options: f, value: p = [], chipProps: m }) => {
-	let h = r(), g = a.useRef(null), [_, v] = a.useState(), [y, b] = a.useState(null);
+	let h = i(), g = a.useRef(null), [_, v] = a.useState(), [y, b] = a.useState(null);
 	a.useEffect(() => {
 		g.current && v(g.current.offsetWidth);
 	}, [h.open]);
@@ -43,7 +43,7 @@ var u = t(/* @__PURE__ */ o("path", { d: "M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7
 				slotProps: { paper: { sx: { width: _ ? `${_}px` : void 0 } } },
 				children: f.map((e) => {
 					let t = p.includes(e.value);
-					return /* @__PURE__ */ o(n, {
+					return /* @__PURE__ */ o(r, {
 						onClick: () => {
 							x(e.value, !t);
 						},
@@ -52,7 +52,7 @@ var u = t(/* @__PURE__ */ o("path", { d: "M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7
 					}, e.label);
 				})
 			}),
-			/* @__PURE__ */ o(i, {
+			/* @__PURE__ */ o(n, {
 				chips: f.filter((e) => p.includes(e.value)).map((e) => e.label),
 				...m
 			})

package/dist/s-review/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-review-D2RFW8Jx.js";
+import { t as e } from "../s-review-BC1lHIm6.js";
 export { e as SReview, e as default };

package/dist/s-review/s-review.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-review-D2RFW8Jx.js";
+import { t as e } from "../s-review-BC1lHIm6.js";
 export { e as SReview, e as default };

package/dist/s-select/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-select-RX8IAAmL.js";
+import { t as e } from "../s-select-C21R0N2u.js";
 export { e as SSelect, e as default };

package/dist/s-select/s-select.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-select-RX8IAAmL.js";
+import { t as e } from "../s-select-C21R0N2u.js";
 export { e as SSelect, e as default };

package/dist/s-stripe/s-stripe.js

@@ -1,5 +1,5 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-text-field-D5F4wewz.js";
+import { t as e } from "../s-text-field-D1IehXqm.js";
 import t from "./stripe-input.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region lib/s-stripe/s-stripe.tsx

package/dist/s-text-editor/index.js

@@ -1,4 +1,4 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-text-editor-toolbar-DMg7LUBI.js";
+import { t as e } from "../s-text-editor-toolbar-Cryg0LAh.js";
 import { STextEditor as t } from "./s-text-editor.js";
 export { t as STextEditor, t as default, e as STextEditorToolbar };

package/dist/s-text-editor/s-text-editor-toolbar.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-text-editor-toolbar-DMg7LUBI.js";
+import { t as e } from "../s-text-editor-toolbar-Cryg0LAh.js";
 export { e as STextEditorToolbar };

package/dist/s-text-editor/s-text-editor.js

@@ -1,6 +1,6 @@
 import "../createTheme-hnicUJQa.js";
 import { t as e } from "../Box-BQIZeo25.js";
-import { t } from "../s-text-editor-toolbar-DMg7LUBI.js";
+import { t } from "../s-text-editor-toolbar-Cryg0LAh.js";
 import * as n from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Link as a } from "@tiptap/extension-link";

package/dist/{s-text-editor-toolbar-DMg7LUBI.js → s-text-editor-toolbar-Cryg0LAh.js}

@@ -2,7 +2,7 @@ import { t as e } from "./Stack-BrIUVvqB.js";
 import { o as t } from "./Menu-C1gbagw8.js";
 import { i as n, s as r, t as i } from "./Select-DdIw08Ux.js";
 import { t as a } from "./createSvgIcon-CMGRw0Lo.js";
-import { t as o } from "./s-text-field-D5F4wewz.js";
+import { t as o } from "./s-text-field-D1IehXqm.js";
 import * as s from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { MenuItem as u } from "@mui/material";

package/dist/s-text-field/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-text-field-D5F4wewz.js";
+import { t as e } from "../s-text-field-D1IehXqm.js";
 export { e as STextField, e as default };

package/dist/s-text-field/s-text-field.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-text-field-D5F4wewz.js";
+import { t as e } from "../s-text-field-D1IehXqm.js";
 export { e as STextField, e as default };

package/dist/s-theme-demo/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-theme-demo-nUDxnUen.js";
+import { t as e } from "../s-theme-demo-zAOHpUI7.js";
 export { e as SThemeDemo, e as default };

package/dist/s-theme-demo/s-theme-demo.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-theme-demo-nUDxnUen.js";
+import { t as e } from "../s-theme-demo-zAOHpUI7.js";
 export { e as default };

package/dist/{s-theme-demo-nUDxnUen.js → s-theme-demo-zAOHpUI7.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./createSvgIcon-CMGRw0Lo.js";
 import { t } from "./s-theme-switch-B9r8_N1i.js";
-import { t as n } from "./Favorite-DWeh5yvd.js";
-import { t as r } from "./s-text-field-D5F4wewz.js";
+import { t as n } from "./Favorite-BVeoH6Jh.js";
+import { t as r } from "./s-text-field-D1IehXqm.js";
 import { SForm as i } from "./s-form/s-form.js";
 import { SButton as a } from "./s-button/s-button.js";
 import * as o from "react";

package/dist/s-tip/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-tip-BzGUWXjl.js";
+import { t as e } from "../s-tip-C34wQGJ-.js";
 export { e as STip, e as default };

package/dist/s-tip/s-tip.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-tip-BzGUWXjl.js";
+import { t as e } from "../s-tip-C34wQGJ-.js";
 export { e as STip, e as default };

package/dist/s-tool-bar/index.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-tool-bar-hWc9nUfo.js";
+import { t as e } from "../s-tool-bar-BciD39jt.js";
 export { e as SToolBar, e as default };

package/dist/s-tool-bar/s-tool-bar.js

@@ -1,3 +1,3 @@
 import "../createTheme-hnicUJQa.js";
-import { t as e } from "../s-tool-bar-hWc9nUfo.js";
+import { t as e } from "../s-tool-bar-BciD39jt.js";
 export { e as SToolBar, e as default };

package/dist/{s-tool-bar-hWc9nUfo.js → s-tool-bar-BciD39jt.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./createSvgIcon-CMGRw0Lo.js";
 import { t } from "./Close-owIfEKhu.js";
-import { t as n } from "./Download-DnNUuuOa.js";
-import { t as r } from "./s-select-RX8IAAmL.js";
+import { t as n } from "./Download-Dg9NBUSj.js";
+import { t as r } from "./s-select-C21R0N2u.js";
 import i, { useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { createPortal as d } from "react-dom";

package/dist/theme/components/avatar.js

@@ -1,3 +1,3 @@
 import "../../createTheme-hnicUJQa.js";
-import { t as e } from "../../avatar-CVUSxXzb.js";
+import { t as e } from "../../avatar-_TCe35VV.js";
 export { e as MuiAvatar };

package/dist/theme/components/chip.d.ts

@@ -6,6 +6,7 @@ declare module '@mui/material/Chip' {
 }
 export declare const MuiChip: {
     defaultProps: {
+        variant: "filled";
         size: "small";
         deleteIcon: import("react/jsx-runtime").JSX.Element;
     };
@@ -22,44 +23,104 @@ export declare const MuiChip: {
             [x: string]: string | ({
                 props: {
                     color: "default";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "primary";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "secondary";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "success";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "error";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "warning";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "info";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "premium";
+                    variant: "filled";
                 };
                 style: {
                     border: string;
+                    backgroundColor?: undefined;
+                };
+            } | {
+                props: {
+                    color: "default";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "primary";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "secondary";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "success";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "error";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "warning";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "info";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "premium";
+                    variant: "outlined";
+                };
+                style: {
+                    backgroundColor: "transparent";
+                    border?: undefined;
                 };
             })[] | {
                 fontWeight: number;
@@ -69,44 +130,104 @@ export declare const MuiChip: {
             variants: ({
                 props: {
                     color: "default";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "primary";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "secondary";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "success";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "error";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "warning";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "info";
+                    variant: "filled";
                 };
                 style: any;
             } | {
                 props: {
                     color: "premium";
+                    variant: "filled";
                 };
                 style: {
                     border: string;
+                    backgroundColor?: undefined;
+                };
+            } | {
+                props: {
+                    color: "default";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "primary";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "secondary";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "success";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "error";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "warning";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "info";
+                    variant: "outlined";
+                };
+                style: any;
+            } | {
+                props: {
+                    color: "premium";
+                    variant: "outlined";
+                };
+                style: {
+                    backgroundColor: "transparent";
+                    border?: undefined;
                 };
             })[];
         };

package/dist/theme/components/chip.js

@@ -16,8 +16,25 @@ var _ = (e, t, n) => ({
 		[`& .${g.label}`]: { color: n[200] },
 		[`& .${g.icon}`]: { color: n[300] }
 	})
-}), v = {
+}), v = (e, t, n) => ({
+	backgroundColor: "transparent",
+	...e.applyStyles("light", {
+		borderColor: t[300],
+		color: t[700],
+		[`& .${g.label}`]: { color: t[700] },
+		[`& .${g.icon}`]: { color: t[700] },
+		[`& .${g.deleteIcon}`]: { color: t[700] }
+	}),
+	...e.applyStyles("dark", {
+		borderColor: n[700],
+		color: n[300],
+		[`& .${g.label}`]: { color: n[300] },
+		[`& .${g.icon}`]: { color: n[300] },
+		[`& .${g.deleteIcon}`]: { color: n[300] }
+	})
+}), y = {
 	defaultProps: {
+		variant: "filled",
 		size: "small",
 		deleteIcon: /* @__PURE__ */ h(m, {})
 	},
@@ -28,36 +45,116 @@ var _ = (e, t, n) => ({
 			[`& .${g.label}`]: { fontWeight: 500 },
 			variants: [
 				{
-					props: { color: "default" },
+					props: {
+						color: "default",
+						variant: "filled"
+					},
 					style: { ..._(m, r, d) }
 				},
 				{
-					props: { color: "primary" },
+					props: {
+						color: "primary",
+						variant: "filled"
+					},
 					style: { ..._(m, f, l) }
 				},
 				{
-					props: { color: "secondary" },
+					props: {
+						color: "secondary",
+						variant: "filled"
+					},
 					style: { ..._(m, c, e) }
 				},
 				{
-					props: { color: "success" },
+					props: {
+						color: "success",
+						variant: "filled"
+					},
 					style: { ..._(m, i, n) }
 				},
 				{
-					props: { color: "error" },
+					props: {
+						color: "error",
+						variant: "filled"
+					},
 					style: { ..._(m, o, p) }
 				},
 				{
-					props: { color: "warning" },
+					props: {
+						color: "warning",
+						variant: "filled"
+					},
 					style: { ..._(m, u, a) }
 				},
 				{
-					props: { color: "info" },
+					props: {
+						color: "info",
+						variant: "filled"
+					},
 					style: { ..._(m, s, t) }
 				},
 				{
-					props: { color: "premium" },
+					props: {
+						color: "premium",
+						variant: "filled"
+					},
 					style: { border: "none" }
+				},
+				{
+					props: {
+						color: "default",
+						variant: "outlined"
+					},
+					style: { ...v(m, r, d) }
+				},
+				{
+					props: {
+						color: "primary",
+						variant: "outlined"
+					},
+					style: { ...v(m, f, l) }
+				},
+				{
+					props: {
+						color: "secondary",
+						variant: "outlined"
+					},
+					style: { ...v(m, c, e) }
+				},
+				{
+					props: {
+						color: "success",
+						variant: "outlined"
+					},
+					style: { ...v(m, i, n) }
+				},
+				{
+					props: {
+						color: "error",
+						variant: "outlined"
+					},
+					style: { ...v(m, o, p) }
+				},
+				{
+					props: {
+						color: "warning",
+						variant: "outlined"
+					},
+					style: { ...v(m, u, a) }
+				},
+				{
+					props: {
+						color: "info",
+						variant: "outlined"
+					},
+					style: { ...v(m, s, t) }
+				},
+				{
+					props: {
+						color: "premium",
+						variant: "outlined"
+					},
+					style: { backgroundColor: "transparent" }
 				}
 			]
 		}),
@@ -65,4 +162,4 @@ var _ = (e, t, n) => ({
 	}
 };
 //#endregion
-export { v as MuiChip };
+export { y as MuiChip };

package/dist/theme/components/components.js

@@ -45,7 +45,7 @@ import { MuiAlert as H } from "./alert.js";
 import { MuiAppBar as U } from "./app-bar.js";
 import { MuiAutocomplete as W } from "./autocomplete.js";
 import { t as G } from "../../checkbox-Dt9Jyrbh.js";
-import { t as K } from "../../avatar-CVUSxXzb.js";
+import { t as K } from "../../avatar-_TCe35VV.js";
 import { MuiBackdrop as q } from "./backdrop.js";
 import { MuiButton as J } from "./button.js";
 import { MuiButtonBase as Y } from "./button-base.js";

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.210",
+  "version": "1.0.211",
   "description": "advanced ui kit for solostylist",
   "type": "module",
   "main": "dist/main.js",