@plitzi/sdk-style 0.33.2 → 0.34.1

package/dist/components/StyleInspector/StyleInspectorProvider.mjs

@@ -1,14 +1,14 @@
 import e from "./StyleInspectorContext.mjs";
 import t from "./hooks/useStyleBinding.mjs";
-import { get as n, omit as r } from "@plitzi/plitzi-ui/helpers";
-import { useCallback as i, useMemo as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { emptyObject as s } from "@plitzi/sdk-shared/helpers/utils";
-import { useCommonStore as c } from "@plitzi/sdk-shared/store";
+import { useCallback as n, useMemo as r } from "react";
+import { useCommonStore as i } from "@plitzi/sdk-shared/store";
+import { emptyObject as a } from "@plitzi/sdk-shared/helpers/utils";
+import { get as o, omit as s } from "@plitzi/plitzi-ui/helpers";
+import { jsx as c } from "react/jsx-runtime";
 import { baseDefaultValue as l } from "@plitzi/sdk-shared";
 //#region src/components/StyleInspector/StyleInspectorProvider.tsx
 var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base", styleState: m, styleVariant: h, element: g, inheritData: _, displayMode: v, onChange: y }) => {
-	let b = t({ element: g }), [x = s] = c("runtime.sources.variables"), S = i(() => {
+	let b = t({ element: g }), [x = a] = i("runtime.sources.variables"), S = n(() => {
 		let e;
 		if (f && p && f.attributes[p]) {
 			let t = f.attributes[p];
@@ -20,9 +20,9 @@ var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base"
 		p,
 		m,
 		h
-	]), C = i((e, t) => {
-		if (!(e && typeof t != "string" && typeof t != "number" && t !== void 0 || !e && typeof t != "object" && t !== void 0 || e && n(b, e))) {
-			if (!e && t && typeof t == "object" && (t = r(t, Object.keys(b))), !e && f && typeof t == "object") {
+	]), C = n((e, t) => {
+		if (!(e && typeof t != "string" && typeof t != "number" && t !== void 0 || !e && typeof t != "object" && t !== void 0 || e && o(b, e))) {
+			if (!e && t && typeof t == "object" && (t = s(t, Object.keys(b))), !e && f && typeof t == "object") {
 				let e = {
 					...S(),
 					...t
@@ -38,10 +38,10 @@ var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base"
 		S,
 		y,
 		f
-	]), w = i((e) => Array.isArray(e) ? e.reduce((e, t) => ({
+	]), w = n((e) => Array.isArray(e) ? e.reduce((e, t) => ({
 		...e,
-		[t]: n(l, t)
-	}), {}) : e ? n(l, e) : l, []), T = i((e) => {
+		[t]: o(l, t)
+	}), {}) : e ? o(l, e) : l, []), T = n((e) => {
 		if (Array.isArray(e)) {
 			let t = e.reduce((e, t) => ({
 				...e,
@@ -49,7 +49,7 @@ var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base"
 			}), {});
 			C(void 0, t);
 		} else C(e);
-	}, [C]), E = a(() => ({
+	}, [C]), E = r(() => ({
 		componentType: d,
 		selector: f,
 		styleSelector: p,
@@ -78,7 +78,7 @@ var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base"
 		T,
 		w
 	]);
-	return /* @__PURE__ */ o(e, {
+	return /* @__PURE__ */ c(e, {
 		value: E,
 		children: u
 	});

package/dist/components/StyleInspector/categories/Background/components/BackgroundLayer/BackgroundLayer.mjs

@@ -5,9 +5,9 @@ import r from "../../modes/ConicGradientMode.mjs";
 import i from "../../modes/ImageMode.mjs";
 import a from "../../modes/LinearGradientMode.mjs";
 import o from "../../modes/RadialGradientMode.mjs";
-import s from "clsx";
-import { memo as c, useCallback as l, useMemo as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { memo as s, useCallback as c, useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "clsx";
 import m from "@plitzi/plitzi-ui/Icon";
 //#region src/components/StyleInspector/categories/Background/components/BackgroundLayer/BackgroundLayer.tsx
 var h = {
@@ -29,135 +29,135 @@ var h = {
 		value: "content-box",
 		label: "Content Box"
 	}
-], _ = c(({ layer: c, index: _, expanded: v, onExpand: y, onChange: b, onRemove: x, onReorder: S }) => {
-	let [C, w] = d(!1), T = u(() => n(c), [c]), E = l((e) => {
+], _ = s(({ layer: s, index: _, expanded: v, onExpand: y, onChange: b, onRemove: x, onReorder: S }) => {
+	let [C, w] = u(!1), T = l(() => n(s), [s]), E = c((e) => {
 		let t = String(e);
 		b({
-			...c,
+			...s,
 			type: t
 		});
-	}, [c, b]), D = l(() => y(c.id), [y, c.id]), O = l((e) => b({
-		...c,
+	}, [s, b]), D = c(() => y(s.id), [y, s.id]), O = c((e) => b({
+		...s,
 		clip: String(e)
-	}), [c, b]), k = l((e) => {
+	}), [s, b]), k = c((e) => {
 		e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(_));
-	}, [_]), A = l(() => {
+	}, [_]), A = c(() => {
 		w(!1);
-	}, []), j = l((e) => {
+	}, []), j = c((e) => {
 		e.preventDefault(), w(!0);
-	}, []), M = l((e) => {
+	}, []), M = c((e) => {
 		e.currentTarget.contains(e.relatedTarget) || w(!1);
-	}, []), N = l((e) => {
+	}, []), N = c((e) => {
 		e.preventDefault(), w(!1);
 		let t = parseInt(e.dataTransfer.getData("text/plain"), 10);
 		isNaN(t) || S(t, _);
 	}, [_, S]);
-	return /* @__PURE__ */ p("div", {
-		className: s("rounded-sm border transition-colors", {
+	return /* @__PURE__ */ f("div", {
+		className: p("rounded-sm border transition-colors", {
 			"border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/20": C,
 			"border-gray-200 dark:border-zinc-700": !C
 		}),
 		onDragOver: j,
 		onDragLeave: M,
 		onDrop: N,
-		children: [/* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ f("div", {
 			className: "flex h-8 items-center gap-1 px-1",
 			children: [
-				/* @__PURE__ */ f("span", {
+				/* @__PURE__ */ d("span", {
 					draggable: !0,
 					className: "cursor-grab px-1 text-gray-400 hover:text-gray-600 active:cursor-grabbing dark:text-zinc-500 dark:hover:text-zinc-300",
 					onDragStart: k,
 					onDragEnd: A,
-					children: /* @__PURE__ */ f(m, {
+					children: /* @__PURE__ */ d(m, {
 						icon: "fa-solid fa-grip-lines",
 						size: "xs"
 					})
 				}),
-				c.type !== "none" && /* @__PURE__ */ f("div", {
+				s.type !== "none" && /* @__PURE__ */ d("div", {
 					className: "h-4 w-4 shrink-0 rounded-sm border border-gray-300 dark:border-zinc-600",
 					style: { background: T }
 				}),
-				/* @__PURE__ */ f("span", {
+				/* @__PURE__ */ d("span", {
 					className: "flex-1 truncate text-xs text-gray-600 dark:text-zinc-400",
-					children: h[c.type]
+					children: h[s.type]
 				}),
-				/* @__PURE__ */ f("button", {
+				/* @__PURE__ */ d("button", {
 					type: "button",
 					className: "cursor-pointer p-1 text-gray-400 hover:text-gray-600 dark:text-zinc-500 dark:hover:text-zinc-300",
 					onClick: D,
 					title: v ? "Collapse" : "Expand",
-					children: /* @__PURE__ */ f(m, {
+					children: /* @__PURE__ */ d(m, {
 						icon: v ? "fa-solid fa-angle-up" : "fa-solid fa-angle-down",
 						size: "xs"
 					})
 				}),
-				/* @__PURE__ */ f("button", {
+				/* @__PURE__ */ d("button", {
 					type: "button",
 					className: "cursor-pointer p-1 text-gray-400 hover:text-red-500 dark:text-zinc-500 dark:hover:text-red-400",
 					onClick: x,
 					title: "Remove layer",
-					children: /* @__PURE__ */ f(m, {
+					children: /* @__PURE__ */ d(m, {
 						icon: "fas fa-times",
 						size: "xs"
 					})
 				})
 			]
-		}), v && /* @__PURE__ */ p("div", {
+		}), v && /* @__PURE__ */ f("div", {
 			className: "flex flex-col gap-2 border-t border-gray-200 p-2 dark:border-zinc-700",
 			children: [
-				/* @__PURE__ */ f(t, {
+				/* @__PURE__ */ d(t, {
 					label: "Type",
-					children: /* @__PURE__ */ p(e, {
+					children: /* @__PURE__ */ f(e, {
 						type: "select",
-						value: c.type,
+						value: s.type,
 						onChange: E,
 						children: [
-							/* @__PURE__ */ f("option", {
+							/* @__PURE__ */ d("option", {
 								value: "linear-gradient",
 								children: "Linear Gradient"
 							}),
-							/* @__PURE__ */ f("option", {
+							/* @__PURE__ */ d("option", {
 								value: "radial-gradient",
 								children: "Radial Gradient"
 							}),
-							/* @__PURE__ */ f("option", {
+							/* @__PURE__ */ d("option", {
 								value: "conic-gradient",
 								children: "Conic Gradient"
 							}),
-							/* @__PURE__ */ f("option", {
+							/* @__PURE__ */ d("option", {
 								value: "url",
 								children: "Image URL"
 							}),
-							/* @__PURE__ */ f("option", {
+							/* @__PURE__ */ d("option", {
 								value: "none",
 								children: "None"
 							})
 						]
 					})
 				}),
-				c.type === "url" && /* @__PURE__ */ f(i, {
-					layer: c,
+				s.type === "url" && /* @__PURE__ */ d(i, {
+					layer: s,
 					onChange: b
 				}),
-				c.type === "linear-gradient" && /* @__PURE__ */ f(a, {
-					layer: c,
+				s.type === "linear-gradient" && /* @__PURE__ */ d(a, {
+					layer: s,
 					onChange: b
 				}),
-				c.type === "radial-gradient" && /* @__PURE__ */ f(o, {
-					layer: c,
+				s.type === "radial-gradient" && /* @__PURE__ */ d(o, {
+					layer: s,
 					onChange: b
 				}),
-				c.type === "conic-gradient" && /* @__PURE__ */ f(r, {
-					layer: c,
+				s.type === "conic-gradient" && /* @__PURE__ */ d(r, {
+					layer: s,
 					onChange: b
 				}),
-				c.type !== "none" && /* @__PURE__ */ f(t, {
+				s.type !== "none" && /* @__PURE__ */ d(t, {
 					label: "Clip",
-					children: /* @__PURE__ */ f(e, {
+					children: /* @__PURE__ */ d(e, {
 						type: "select",
-						value: c.clip,
+						value: s.clip,
 						onChange: O,
-						children: g.map((e) => /* @__PURE__ */ f("option", {
+						children: g.map((e) => /* @__PURE__ */ d("option", {
 							value: e.value,
 							children: e.label
 						}, e.value))

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopBar.mjs

@@ -2,9 +2,9 @@ import { newStopId as e } from "../../helpers/backgroundParser.mjs";
 import t from "./GradientPreviewBar.mjs";
 import n from "./GradientStopEditor.mjs";
 import r from "./GradientStopTrack.mjs";
-import i from "clsx";
-import { useCallback as a, useMemo as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useCallback as i, useMemo as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "clsx";
 import d from "@plitzi/plitzi-ui/Icon";
 //#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopBar.tsx
 function f(e) {
@@ -12,32 +12,32 @@ function f(e) {
 	return isNaN(t) ? 0 : Math.max(0, Math.min(100, t));
 }
 var p = ({ stops: p, onChange: m }) => {
-	let h = s(p);
+	let h = o(p);
 	h.current = p;
-	let [g, _] = c(p[0]?.id ?? ""), v = o(() => [...p].sort((e, t) => f(e.position) - f(t.position)), [p]), y = o(() => `linear-gradient(90deg, ${v.map((e) => e.position ? `${e.color} ${e.position}` : e.color).join(", ")})`, [v]), b = p.find((e) => e.id === g) ?? p[0], x = a((t) => {
+	let [g, _] = s(p[0]?.id ?? ""), v = a(() => [...p].sort((e, t) => f(e.position) - f(t.position)), [p]), y = a(() => `linear-gradient(90deg, ${v.map((e) => e.position ? `${e.color} ${e.position}` : e.color).join(", ")})`, [v]), b = p.find((e) => e.id === g) ?? p[0], x = i((t) => {
 		let { left: n, width: r } = t.currentTarget.getBoundingClientRect(), i = Math.round(Math.max(0, Math.min(100, (t.clientX - n) / r * 100))), a = h.current, o = [...a].sort((e, t) => Math.abs(f(e.position) - i) - Math.abs(f(t.position) - i)).at(0), s = {
 			id: e(),
 			color: o?.color ?? "#808080",
 			position: `${i}%`
 		}, c = [...a, s].sort((e, t) => f(e.position) - f(t.position));
 		m?.(c), _(s.id);
-	}, [m]), S = a((e) => {
+	}, [m]), S = i((e) => {
 		b && m?.(h.current.map((t) => t.id === b.id ? {
 			...t,
 			color: e
 		} : t));
-	}, [m, b]), C = a((e) => {
+	}, [m, b]), C = i((e) => {
 		m?.(e.sort((e, t) => f(e.position) - f(t.position)));
-	}, [m]), w = a((e) => {
+	}, [m]), w = i((e) => {
 		b && m?.(h.current.map((t) => t.id === b.id ? {
 			...t,
 			position: String(e)
 		} : t).sort((e, t) => f(e.position) - f(t.position)));
-	}, [m, b]), T = a(() => {
+	}, [m, b]), T = i(() => {
 		if (!b || h.current.length <= 2) return;
 		let e = h.current.filter((e) => e.id !== b.id);
 		m?.(e), _(e[0]?.id ?? "");
-	}, [m, b]), E = a(() => {
+	}, [m, b]), E = i(() => {
 		let t = {
 			id: e(),
 			color: "#808080",
@@ -45,43 +45,43 @@ var p = ({ stops: p, onChange: m }) => {
 		}, n = [...h.current, t].sort((e, t) => f(e.position) - f(t.position));
 		m?.(n), _(t.id);
 	}, [m]);
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ l("div", {
 		className: "flex flex-col gap-2",
 		children: [
-			/* @__PURE__ */ l(t, {
+			/* @__PURE__ */ c(t, {
 				gradientCSS: y,
 				onClick: x
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ c("div", {
 				className: "flex px-2",
-				children: /* @__PURE__ */ l(r, {
+				children: /* @__PURE__ */ c(r, {
 					stops: p,
 					selectedId: g,
 					onChange: C,
 					onSelect: _
 				})
 			}),
-			b && /* @__PURE__ */ l(n, {
+			b && /* @__PURE__ */ c(n, {
 				stop: b,
 				showRemove: p.length > 2,
 				onColorChange: S,
 				onPositionChange: w,
 				onRemove: T
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ l("div", {
 				className: "flex flex-wrap gap-1",
-				children: [v.map((e) => /* @__PURE__ */ l("button", {
+				children: [v.map((e) => /* @__PURE__ */ c("button", {
 					type: "button",
-					className: i("h-5 w-5 cursor-pointer rounded-sm border shadow-sm", g === e.id ? "border-blue-500 ring-1 ring-blue-300 dark:ring-blue-700" : "border-gray-300 hover:border-gray-400 dark:border-zinc-600"),
+					className: u("h-5 w-5 cursor-pointer rounded-sm border shadow-sm", g === e.id ? "border-blue-500 ring-1 ring-blue-300 dark:ring-blue-700" : "border-gray-300 hover:border-gray-400 dark:border-zinc-600"),
 					style: { backgroundColor: e.color },
 					onClick: () => _(e.id),
 					title: `${e.color} • ${e.position}`
-				}, e.id)), /* @__PURE__ */ l("button", {
+				}, e.id)), /* @__PURE__ */ c("button", {
 					type: "button",
 					className: "flex h-5 w-5 cursor-pointer items-center justify-center rounded-sm border border-dashed border-gray-300 text-gray-400 hover:border-blue-400 hover:text-blue-500 dark:border-zinc-600 dark:text-zinc-500",
 					title: "Add stop at 50%",
 					onClick: E,
-					children: /* @__PURE__ */ l(d, {
+					children: /* @__PURE__ */ c(d, {
 						icon: "fas fa-plus",
 						size: "xs"
 					})

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopHandle.mjs

@@ -1,23 +1,23 @@
 import e from "../../helpers/normalizeLeft.mjs";
-import t from "clsx";
-import { useCallback as n, useLayoutEffect as r, useMemo as i, useRef as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { useCallback as t, useLayoutEffect as n, useMemo as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "clsx";
 //#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopHandle.tsx
 var s = ({ stop: s, selected: c, trackRef: l, onPositionChange: u, onSelect: d }) => {
-	let f = a(null), p = a(!1), m = a(!1), h = i(() => e(s.position, (f.current?.parentNode)?.getBoundingClientRect().width ?? Infinity), [s.position]), g = n((e) => {
+	let f = i(null), p = i(!1), m = i(!1), h = r(() => e(s.position, (f.current?.parentNode)?.getBoundingClientRect().width ?? Infinity), [s.position]), g = t((e) => {
 		let t = l.current;
 		if (!t) return 0;
 		let { left: n, width: r } = t.getBoundingClientRect();
 		return Math.round(Math.max(0, Math.min(100, (e - n) / r * 100)));
 	}, [l]);
-	r(() => {
+	n(() => {
 		!p.current && f.current && (f.current.style.left = h);
 	}, [h]);
-	let _ = n((e) => {
+	let _ = t((e) => {
 		e.preventDefault(), m.current = !1, p.current = !0, f.current?.setPointerCapture(e.pointerId), d(s.id);
-	}, [d, s.id]), v = n((e) => {
-		!p.current || !f.current || (m.current = !0, f.current.style.left = `${g(e.clientX)}%`);
-	}, [g]), y = n((e) => {
+	}, [d, s.id]), v = t((e) => {
+		p.current && f.current && (m.current = !0, f.current.style.left = `${g(e.clientX)}%`);
+	}, [g]), y = t((e) => {
 		if (p.current && (p.current = !1, m.current && f.current)) {
 			let t = g(e.clientX);
 			f.current.style.left = `${t}%`, u(s.id, t);
@@ -27,9 +27,9 @@ var s = ({ stop: s, selected: c, trackRef: l, onPositionChange: u, onSelect: d }
 		u,
 		s.id
 	]);
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ a("div", {
 		ref: f,
-		className: t("absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-grab rounded-full border-2 shadow-sm", c ? "z-10 border-blue-500 ring-1 ring-blue-300 dark:ring-blue-700" : "z-0 border-white hover:border-gray-300 dark:border-zinc-500"),
+		className: o("absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-grab rounded-full border-2 shadow-sm", c ? "z-10 border-blue-500 ring-1 ring-blue-300 dark:ring-blue-700" : "z-0 border-white hover:border-gray-300 dark:border-zinc-500"),
 		style: {
 			left: h,
 			backgroundColor: s.color

package/dist/components/StyleInspector/categories/Border/BorderPlacements.mjs

@@ -1,6 +1,6 @@
-import e from "clsx";
-import { useCallback as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "clsx";
 import i from "@plitzi/plitzi-ui/Icon";
 import a from "@plitzi/plitzi-ui/icons/BorderPlacementBottom";
 import o from "@plitzi/plitzi-ui/icons/BorderPlacementCenter";
@@ -9,44 +9,44 @@ import c from "@plitzi/plitzi-ui/icons/BorderPlacementRight";
 import l from "@plitzi/plitzi-ui/icons/BorderPlacementTop";
 //#region src/components/StyleInspector/categories/Border/BorderPlacements.tsx
 var u = ({ currentPlacement: u, setCurrentPlacement: d }) => {
-	let f = t((e) => () => d(e), [d]);
-	return /* @__PURE__ */ r("div", {
+	let f = e((e) => () => d(e), [d]);
+	return /* @__PURE__ */ n("div", {
 		className: "mx-auto grid grid-cols-3 grid-rows-3 place-items-center gap-2",
 		children: [
-			/* @__PURE__ */ n(i, {
+			/* @__PURE__ */ t(i, {
 				size: "2xl",
-				className: e("col-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "top" }),
+				className: r("col-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "top" }),
 				onClick: f("top"),
 				active: u === "top",
-				children: /* @__PURE__ */ n(l, {})
+				children: /* @__PURE__ */ t(l, {})
 			}),
-			/* @__PURE__ */ n(i, {
+			/* @__PURE__ */ t(i, {
 				size: "2xl",
-				className: e("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "left" }),
+				className: r("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "left" }),
 				onClick: f("left"),
 				active: u === "left",
-				children: /* @__PURE__ */ n(s, {})
+				children: /* @__PURE__ */ t(s, {})
 			}),
-			/* @__PURE__ */ n(i, {
+			/* @__PURE__ */ t(i, {
 				size: "2xl",
-				className: e("row-start-2 grid cursor-pointer grid-cols-3 rounded p-0.5", { "bg-primary-100": u === "all" }),
+				className: r("row-start-2 grid cursor-pointer grid-cols-3 rounded p-0.5", { "bg-primary-100": u === "all" }),
 				onClick: f("all"),
 				active: u === "all",
-				children: /* @__PURE__ */ n(o, {})
+				children: /* @__PURE__ */ t(o, {})
 			}),
-			/* @__PURE__ */ n(i, {
+			/* @__PURE__ */ t(i, {
 				size: "2xl",
-				className: e("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "right" }),
+				className: r("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "right" }),
 				onClick: f("right"),
 				active: u === "right",
-				children: /* @__PURE__ */ n(c, {})
+				children: /* @__PURE__ */ t(c, {})
 			}),
-			/* @__PURE__ */ n(i, {
+			/* @__PURE__ */ t(i, {
 				size: "2xl",
-				className: e("col-start-2 row-start-3 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "bottom" }),
+				className: r("col-start-2 row-start-3 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "bottom" }),
 				onClick: f("bottom"),
 				active: u === "bottom",
-				children: /* @__PURE__ */ n(a, {})
+				children: /* @__PURE__ */ t(a, {})
 			})
 		]
 	});

package/dist/components/StyleInspector/categories/DisplayFlexChild/DisplayAlignSelf.mjs

@@ -1,8 +1,8 @@
 import e from "../../components/CategoryOption/index.mjs";
 import t from "../../components/CategorySection/index.mjs";
-import n from "clsx";
-import { useCallback as r, useMemo as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
+import { useCallback as n, useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import a from "clsx";
 import o from "@plitzi/plitzi-ui/icons/XMark";
 import s from "@plitzi/plitzi-ui/icons/AlignSelfBaselineRow";
 import c from "@plitzi/plitzi-ui/icons/AlignSelfCenterRow";
@@ -11,48 +11,48 @@ import u from "@plitzi/plitzi-ui/icons/AlignSelfStartRow";
 import d from "@plitzi/plitzi-ui/icons/AlignSelfStretchRow";
 //#region src/components/StyleInspector/categories/DisplayFlexChild/DisplayAlignSelf.tsx
 var f = ["align-self"], p = ({ value: p, isFlexVertical: m = !1, onChange: h }) => {
-	let g = r((e) => h?.("align-self", e), [h]), _ = i(() => [
+	let g = n((e) => h?.("align-self", e), [h]), _ = r(() => [
 		{
 			value: "auto",
-			icon: /* @__PURE__ */ a(o, {}),
+			icon: /* @__PURE__ */ i(o, {}),
 			description: "Align Auto",
 			active: p === "auto"
 		},
 		{
 			value: "flex-start",
-			icon: /* @__PURE__ */ a(u, { className: n({ "-rotate-90": m }) }),
+			icon: /* @__PURE__ */ i(u, { className: a({ "-rotate-90": m }) }),
 			description: "Align Start",
 			active: p === "flex-start"
 		},
 		{
 			value: "center",
-			icon: /* @__PURE__ */ a(c, { className: n({ "-rotate-90": m }) }),
+			icon: /* @__PURE__ */ i(c, { className: a({ "-rotate-90": m }) }),
 			description: "Align Center",
 			active: p === "center"
 		},
 		{
 			value: "flex-end",
-			icon: /* @__PURE__ */ a(l, { className: n({ "-rotate-90": m }) }),
+			icon: /* @__PURE__ */ i(l, { className: a({ "-rotate-90": m }) }),
 			description: "Align End",
 			active: p === "flex-end"
 		},
 		{
 			value: "stretch",
-			icon: /* @__PURE__ */ a(d, { className: n({ "-rotate-90": m }) }),
+			icon: /* @__PURE__ */ i(d, { className: a({ "-rotate-90": m }) }),
 			description: "Align Stretch",
 			active: p === "stretch"
 		},
 		{
 			value: "baseline",
-			icon: /* @__PURE__ */ a(s, {}),
+			icon: /* @__PURE__ */ i(s, {}),
 			description: "Align Baseline",
 			active: p === "baseline"
 		}
 	], [m, p]);
-	return /* @__PURE__ */ a(t, {
+	return /* @__PURE__ */ i(t, {
 		label: "Align",
 		keys: f,
-		children: /* @__PURE__ */ a(e, {
+		children: /* @__PURE__ */ i(e, {
 			onChange: g,
 			type: "iconGroup",
 			items: _

package/dist/components/StyleInspector/categories/Effects/BoxShadow/BoxShadow.mjs

@@ -1,37 +1,38 @@
 import e from "../../../components/InspectorLabel/index.mjs";
-import t from "./BoxShadowItem.mjs";
-import { useCallback as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "@plitzi/plitzi-ui/Icon";
+import { splitByCommaOutsideParens as t } from "./helpers.mjs";
+import n from "./BoxShadowItem.mjs";
+import { useCallback as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@plitzi/plitzi-ui/Icon";
 //#region src/components/StyleInspector/categories/Effects/BoxShadow/BoxShadow.tsx
-var s = ({ value: s = "", onChange: c }) => {
-	let l = /,(?![^(]*\))/gim, u = [];
-	s && s !== "" && (u = s.split(l));
+var c = ({ value: c = "", onChange: l }) => {
+	let u = [];
+	c && c !== "" && (u = t(c));
 	let d = (e) => (t) => {
-		t.stopPropagation(), t.preventDefault(), u.splice(e, 1), u.length > 0 ? c?.(u.join(",")) : c?.("");
+		t.stopPropagation(), t.preventDefault(), u.splice(e, 1), u.length > 0 ? l?.(u.join(",")) : l?.("");
 	}, f = (e) => (t) => {
-		t !== u[e] && (u[e] = t, c?.(u.join(",")));
-	}, p = n(() => {
-		s ? c?.(`${s},1px 1px 3px 1px black`) : c?.("1px 1px 3px 1px black");
-	}, [s, c]);
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
+		t !== u[e] && (u[e] = t, l?.(u.join(",")));
+	}, p = r(() => {
+		c ? l?.(`${c},1px 1px 3px 1px black`) : l?.("1px 1px 3px 1px black");
+	}, [c, l]);
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
 		className: "flex items-center justify-between",
-		children: [/* @__PURE__ */ i(e, {
+		children: [/* @__PURE__ */ a(e, {
 			keyValue: ["box-shadow"],
 			children: "Box Shadow"
-		}), /* @__PURE__ */ i(o, {
+		}), /* @__PURE__ */ a(s, {
 			className: "cursor-pointer",
 			icon: "fas fa-plus",
 			onClick: p
 		})]
-	}), u.length > 0 && /* @__PURE__ */ i("div", {
+	}), u.length > 0 && /* @__PURE__ */ a("div", {
 		className: "flex flex-col gap-2",
-		children: u.map((e, n) => /* @__PURE__ */ i(t, {
+		children: u.map((e, t) => /* @__PURE__ */ a(n, {
 			value: e.trim(),
-			onChange: f(n),
-			onRemove: d(n)
-		}, n))
+			onChange: f(t),
+			onRemove: d(t)
+		}, t))
 	})] });
 };
 //#endregion
-export { s as default };
+export { c as default };