@plitzi/sdk-style 0.32.14 → 0.32.16

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

@@ -5,41 +5,41 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import o from "@plitzi/plitzi-ui/icons/XMark";
 //#region src/components/StyleInspector/categories/DisplayFlexChild/DisplayOrder.tsx
 var s = ["order"], c = ({ value: c, onChange: l }) => {
-	let u = n((e) => l?.("order", e), [l]);
+	let u = n((e) => l?.("order", e), [l]), d = r(() => [
+		{
+			value: "0",
+			icon: /* @__PURE__ */ i(o, {}),
+			description: "Order Auto",
+			active: c === "0"
+		},
+		{
+			value: "-1",
+			icon: /* @__PURE__ */ i("div", {
+				className: "text-xs select-none",
+				children: "First"
+			}),
+			description: "Order First",
+			active: c === "-1",
+			size: "custom"
+		},
+		{
+			value: "1",
+			icon: /* @__PURE__ */ i("div", {
+				className: "text-xs select-none",
+				children: "Last"
+			}),
+			description: "Order Last",
+			active: c === "1",
+			size: "custom"
+		}
+	], [c]);
 	return /* @__PURE__ */ a(t, {
 		label: "Align",
 		keys: s,
 		children: [/* @__PURE__ */ i(e, {
 			onChange: u,
 			type: "iconGroup",
-			items: r(() => [
-				{
-					value: "0",
-					icon: /* @__PURE__ */ i(o, {}),
-					description: "Order Auto",
-					active: c === "0"
-				},
-				{
-					value: "-1",
-					icon: /* @__PURE__ */ i("div", {
-						className: "text-xs select-none",
-						children: "First"
-					}),
-					description: "Order First",
-					active: c === "-1",
-					size: "custom"
-				},
-				{
-					value: "1",
-					icon: /* @__PURE__ */ i("div", {
-						className: "text-xs select-none",
-						children: "Last"
-					}),
-					description: "Order Last",
-					active: c === "1",
-					size: "custom"
-				}
-			], [c])
+			items: d
 		}), /* @__PURE__ */ i(e, {
 			onChange: u,
 			type: "input",

package/dist/components/StyleInspector/categories/Effects/Transition/TransitionItem.mjs

@@ -39,7 +39,7 @@ var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
 		if (e === "easing" && t.includes(",")) {
 			let r = t.split(",");
 			n[e] = `cubic-bezier(${r[0]}, ${r[1]}, ${r[2]}, ${r[3]})`;
-		} else e === "easing" && Array.isArray(t) ? n[e] = `cubic-bezier(${t[0]}, ${t[1]}, ${t[2]}, ${t[3]})` : n[e] = t;
+		} else n[e] = e === "easing" && Array.isArray(t) ? `cubic-bezier(${t[0]}, ${t[1]}, ${t[2]}, ${t[3]})` : t;
 		let { duration: r, delay: i, property: a, easing: o } = n;
 		console.log("called", e, o, t), _?.(`${a} ${r} ${o} ${i}`);
 	}, [_]), A = o((e) => k("easing")(e), [k]), j = [];

package/dist/components/StyleInspector/categories/List/List.mjs

@@ -18,62 +18,62 @@ var _ = "none", v = "circle", y = "decimal", b = "disc", x = "square", S = "lowe
 		keys: w,
 		asValue: !0,
 		replaceTokens: a
-	});
+	}), k = s((e) => E?.("list", e), [E]), A = s((e) => D("list-style", e), [D]), j = c(() => [
+		{
+			value: _,
+			icon: /* @__PURE__ */ l(u, {}),
+			description: "",
+			active: O === _
+		},
+		{
+			value: b,
+			icon: /* @__PURE__ */ l(f, {}),
+			description: "",
+			active: O === b
+		},
+		{
+			value: v,
+			icon: /* @__PURE__ */ l(d, {}),
+			description: "",
+			active: O === v
+		},
+		{
+			value: x,
+			icon: /* @__PURE__ */ l(g, {}),
+			description: "",
+			active: O === x
+		},
+		{
+			value: y,
+			icon: /* @__PURE__ */ l(m, {}),
+			description: "",
+			active: O === y
+		},
+		{
+			value: S,
+			icon: /* @__PURE__ */ l(p, {}),
+			description: "",
+			active: O === S
+		},
+		{
+			value: C,
+			icon: /* @__PURE__ */ l(h, {}),
+			description: "",
+			active: O === C
+		}
+	], [O]);
 	return /* @__PURE__ */ l(i, {
 		title: "List",
 		dotKeys: w,
 		isCollapsed: T,
-		onCollapse: s((e) => E?.("list", e), [E]),
+		onCollapse: k,
 		children: /* @__PURE__ */ l(r, {
 			keys: w,
 			label: "Style",
 			children: /* @__PURE__ */ l(n, {
-				onChange: s((e) => D("list-style", e), [D]),
+				onChange: A,
 				type: "iconGroup",
-				items: c(() => [
-					{
-						value: _,
-						icon: /* @__PURE__ */ l(u, {}),
-						description: "",
-						active: O === _
-					},
-					{
-						value: b,
-						icon: /* @__PURE__ */ l(f, {}),
-						description: "",
-						active: O === b
-					},
-					{
-						value: v,
-						icon: /* @__PURE__ */ l(d, {}),
-						description: "",
-						active: O === v
-					},
-					{
-						value: x,
-						icon: /* @__PURE__ */ l(g, {}),
-						description: "",
-						active: O === x
-					},
-					{
-						value: y,
-						icon: /* @__PURE__ */ l(m, {}),
-						description: "",
-						active: O === y
-					},
-					{
-						value: S,
-						icon: /* @__PURE__ */ l(p, {}),
-						description: "",
-						active: O === S
-					},
-					{
-						value: C,
-						icon: /* @__PURE__ */ l(h, {}),
-						description: "",
-						active: O === C
-					}
-				], [O])
+				items: j
 			})
 		})
 	});

package/dist/components/StyleInspector/categories/ListItem/ListItem.mjs

@@ -18,62 +18,62 @@ var _ = ["list-style-type"], v = a(({ replaceTokens: a = !1, isCollapsed: v = !0
 		keys: _,
 		asValue: !0,
 		replaceTokens: a
-	});
+	}), S = s((e) => y?.("listItem", e), [y]), C = s((e) => b("list-style-type", e), [b]), w = c(() => [
+		{
+			value: "none",
+			icon: /* @__PURE__ */ l(u, {}),
+			description: "",
+			active: x === "none"
+		},
+		{
+			value: "disc",
+			icon: /* @__PURE__ */ l(f, {}),
+			description: "",
+			active: x === "disc"
+		},
+		{
+			value: "circle",
+			icon: /* @__PURE__ */ l(d, {}),
+			description: "",
+			active: x === "circle"
+		},
+		{
+			value: "square",
+			icon: /* @__PURE__ */ l(g, {}),
+			description: "",
+			active: x === "square"
+		},
+		{
+			value: "decimal",
+			icon: /* @__PURE__ */ l(m, {}),
+			description: "",
+			active: x === "decimal"
+		},
+		{
+			value: "lower-alpha",
+			icon: /* @__PURE__ */ l(p, {}),
+			description: "",
+			active: x === "lower-alpha"
+		},
+		{
+			value: "lower-roman",
+			icon: /* @__PURE__ */ l(h, {}),
+			description: "",
+			active: x === "lower-roman"
+		}
+	], [x]);
 	return /* @__PURE__ */ l(i, {
 		title: "List Item",
 		dotKeys: _,
 		isCollapsed: v,
-		onCollapse: s((e) => y?.("listItem", e), [y]),
+		onCollapse: S,
 		children: /* @__PURE__ */ l(r, {
 			keys: _,
 			label: "Style",
 			children: /* @__PURE__ */ l(n, {
-				onChange: s((e) => b("list-style-type", e), [b]),
+				onChange: C,
 				type: "iconGroup",
-				items: c(() => [
-					{
-						value: "none",
-						icon: /* @__PURE__ */ l(u, {}),
-						description: "",
-						active: x === "none"
-					},
-					{
-						value: "disc",
-						icon: /* @__PURE__ */ l(f, {}),
-						description: "",
-						active: x === "disc"
-					},
-					{
-						value: "circle",
-						icon: /* @__PURE__ */ l(d, {}),
-						description: "",
-						active: x === "circle"
-					},
-					{
-						value: "square",
-						icon: /* @__PURE__ */ l(g, {}),
-						description: "",
-						active: x === "square"
-					},
-					{
-						value: "decimal",
-						icon: /* @__PURE__ */ l(m, {}),
-						description: "",
-						active: x === "decimal"
-					},
-					{
-						value: "lower-alpha",
-						icon: /* @__PURE__ */ l(p, {}),
-						description: "",
-						active: x === "lower-alpha"
-					},
-					{
-						value: "lower-roman",
-						icon: /* @__PURE__ */ l(h, {}),
-						description: "",
-						active: x === "lower-roman"
-					}
-				], [x])
+				items: w
 			})
 		})
 	});

package/dist/components/StyleInspector/categories/Position/PositionAdvancedButtons.mjs

@@ -13,118 +13,118 @@ import d from "@plitzi/plitzi-ui/icons/PositionTopLeft";
 import f from "@plitzi/plitzi-ui/icons/PositionTopRight";
 //#region src/components/StyleInspector/categories/Position/PositionAdvancedButtons.tsx
 var p = ({ value: p, onChange: m }) => {
-	let { top: h, bottom: g, left: _, right: v } = p ?? {};
+	let { top: h, bottom: g, left: _, right: v } = p ?? {}, y = n(() => [
+		{
+			value: {
+				top: "0%",
+				left: "0%",
+				bottom: "auto",
+				right: "auto"
+			},
+			icon: /* @__PURE__ */ r(d, {}),
+			description: "Top Left",
+			active: h === "0%" && _ === "0%" && g === "auto" && v === "auto"
+		},
+		{
+			value: {
+				top: "0%",
+				left: "auto",
+				bottom: "auto",
+				right: "0%"
+			},
+			icon: /* @__PURE__ */ r(f, {}),
+			description: "Top Right",
+			active: h === "0%" && _ === "auto" && g === "auto" && v === "0%"
+		},
+		{
+			value: {
+				top: "auto",
+				left: "0%",
+				bottom: "0%",
+				right: "auto"
+			},
+			icon: /* @__PURE__ */ r(o, {}),
+			description: "Bottom Left",
+			active: h === "auto" && _ === "0%" && g === "0%" && v === "auto"
+		},
+		{
+			value: {
+				top: "auto",
+				left: "auto",
+				bottom: "0%",
+				right: "0%"
+			},
+			icon: /* @__PURE__ */ r(s, {}),
+			description: "Bottom Right",
+			active: h === "0%" && _ === "0%" && g === "0%" && v === "auto"
+		},
+		{
+			value: {
+				top: "0%",
+				left: "0%",
+				bottom: "0%",
+				right: "auto"
+			},
+			icon: /* @__PURE__ */ r(c, {}),
+			description: "Left",
+			active: h === "0%" && _ === "0%" && g === "0%" && v === "auto"
+		},
+		{
+			value: {
+				top: "0%",
+				left: "auto",
+				bottom: "0%",
+				right: "0%"
+			},
+			icon: /* @__PURE__ */ r(l, {}),
+			description: "Right",
+			active: h === "0%" && _ === "auto" && g === "0%" && v === "0%"
+		},
+		{
+			value: {
+				top: "auto",
+				left: "0%",
+				bottom: "0%",
+				right: "0%"
+			},
+			icon: /* @__PURE__ */ r(a, {}),
+			description: "Bottom",
+			active: h === "auto" && _ === "0%" && g === "0%" && v === "0%"
+		},
+		{
+			value: {
+				top: "0%",
+				left: "0%",
+				bottom: "auto",
+				right: "0%"
+			},
+			icon: /* @__PURE__ */ r(u, {}),
+			description: "Top",
+			active: h === "0%" && _ === "0%" && g === "auto" && v === "0%"
+		},
+		{
+			value: {
+				top: "0%",
+				left: "0%",
+				bottom: "0%",
+				right: "0%"
+			},
+			icon: /* @__PURE__ */ r(i, {}),
+			description: "Full",
+			active: h === "0%" && _ === "0%" && g === "0%" && v === "0%"
+		}
+	], [
+		h,
+		_,
+		g,
+		v
+	]);
 	return /* @__PURE__ */ r(t, {
 		label: "",
 		children: /* @__PURE__ */ r(e, {
 			onChange: m,
 			type: "iconGroup",
-			items: n(() => [
-				{
-					value: {
-						top: "0%",
-						left: "0%",
-						bottom: "auto",
-						right: "auto"
-					},
-					icon: /* @__PURE__ */ r(d, {}),
-					description: "Top Left",
-					active: h === "0%" && _ === "0%" && g === "auto" && v === "auto"
-				},
-				{
-					value: {
-						top: "0%",
-						left: "auto",
-						bottom: "auto",
-						right: "0%"
-					},
-					icon: /* @__PURE__ */ r(f, {}),
-					description: "Top Right",
-					active: h === "0%" && _ === "auto" && g === "auto" && v === "0%"
-				},
-				{
-					value: {
-						top: "auto",
-						left: "0%",
-						bottom: "0%",
-						right: "auto"
-					},
-					icon: /* @__PURE__ */ r(o, {}),
-					description: "Bottom Left",
-					active: h === "auto" && _ === "0%" && g === "0%" && v === "auto"
-				},
-				{
-					value: {
-						top: "auto",
-						left: "auto",
-						bottom: "0%",
-						right: "0%"
-					},
-					icon: /* @__PURE__ */ r(s, {}),
-					description: "Bottom Right",
-					active: h === "0%" && _ === "0%" && g === "0%" && v === "auto"
-				},
-				{
-					value: {
-						top: "0%",
-						left: "0%",
-						bottom: "0%",
-						right: "auto"
-					},
-					icon: /* @__PURE__ */ r(c, {}),
-					description: "Left",
-					active: h === "0%" && _ === "0%" && g === "0%" && v === "auto"
-				},
-				{
-					value: {
-						top: "0%",
-						left: "auto",
-						bottom: "0%",
-						right: "0%"
-					},
-					icon: /* @__PURE__ */ r(l, {}),
-					description: "Right",
-					active: h === "0%" && _ === "auto" && g === "0%" && v === "0%"
-				},
-				{
-					value: {
-						top: "auto",
-						left: "0%",
-						bottom: "0%",
-						right: "0%"
-					},
-					icon: /* @__PURE__ */ r(a, {}),
-					description: "Bottom",
-					active: h === "auto" && _ === "0%" && g === "0%" && v === "0%"
-				},
-				{
-					value: {
-						top: "0%",
-						left: "0%",
-						bottom: "auto",
-						right: "0%"
-					},
-					icon: /* @__PURE__ */ r(u, {}),
-					description: "Top",
-					active: h === "0%" && _ === "0%" && g === "auto" && v === "0%"
-				},
-				{
-					value: {
-						top: "0%",
-						left: "0%",
-						bottom: "0%",
-						right: "0%"
-					},
-					icon: /* @__PURE__ */ r(i, {}),
-					description: "Full",
-					active: h === "0%" && _ === "0%" && g === "0%" && v === "0%"
-				}
-			], [
-				h,
-				_,
-				g,
-				v
-			])
+			items: y
 		})
 	});
 };

package/dist/components/StyleInspector/categories/Position/PositionClear.mjs

@@ -7,39 +7,42 @@ import a from "@plitzi/plitzi-ui/icons/ClearBoth";
 import o from "@plitzi/plitzi-ui/icons/ClearLeft";
 import s from "@plitzi/plitzi-ui/icons/ClearRight";
 //#region src/components/StyleInspector/categories/Position/PositionClear.tsx
-var c = ({ value: c, onChange: l }) => /* @__PURE__ */ r(t, {
-	label: "Clear",
-	keys: ["clear"],
-	children: /* @__PURE__ */ r(e, {
-		onChange: l,
-		type: "iconGroup",
-		items: n(() => [
-			{
-				value: "none",
-				icon: /* @__PURE__ */ r(i, {}),
-				description: "Static",
-				active: c === "none"
-			},
-			{
-				value: "left",
-				icon: /* @__PURE__ */ r(o, {}),
-				description: "Clear Left",
-				active: c === "left"
-			},
-			{
-				value: "right",
-				icon: /* @__PURE__ */ r(s, {}),
-				description: "Clear Right",
-				active: c === "right"
-			},
-			{
-				value: "both",
-				icon: /* @__PURE__ */ r(a, {}),
-				description: "Clear Both",
-				active: c === "both"
-			}
-		], [c])
-	})
-});
+var c = ({ value: c, onChange: l }) => {
+	let u = n(() => [
+		{
+			value: "none",
+			icon: /* @__PURE__ */ r(i, {}),
+			description: "Static",
+			active: c === "none"
+		},
+		{
+			value: "left",
+			icon: /* @__PURE__ */ r(o, {}),
+			description: "Clear Left",
+			active: c === "left"
+		},
+		{
+			value: "right",
+			icon: /* @__PURE__ */ r(s, {}),
+			description: "Clear Right",
+			active: c === "right"
+		},
+		{
+			value: "both",
+			icon: /* @__PURE__ */ r(a, {}),
+			description: "Clear Both",
+			active: c === "both"
+		}
+	], [c]);
+	return /* @__PURE__ */ r(t, {
+		label: "Clear",
+		keys: ["clear"],
+		children: /* @__PURE__ */ r(e, {
+			onChange: l,
+			type: "iconGroup",
+			items: u
+		})
+	});
+};
 //#endregion
 export { c as default };

package/dist/components/StyleInspector/categories/Position/PositionFloat.mjs

@@ -6,33 +6,36 @@ import i from "@plitzi/plitzi-ui/icons/XMark";
 import a from "@plitzi/plitzi-ui/icons/FloatLeft";
 import o from "@plitzi/plitzi-ui/icons/FloatRight";
 //#region src/components/StyleInspector/categories/Position/PositionFloat.tsx
-var s = ({ value: s, onChange: c }) => /* @__PURE__ */ r(t, {
-	label: "Float",
-	keys: ["float"],
-	children: /* @__PURE__ */ r(e, {
-		onChange: c,
-		type: "iconGroup",
-		items: n(() => [
-			{
-				value: "none",
-				icon: /* @__PURE__ */ r(i, {}),
-				description: "Static",
-				active: s === "none"
-			},
-			{
-				value: "left",
-				icon: /* @__PURE__ */ r(a, {}),
-				description: "Float Left",
-				active: s === "left"
-			},
-			{
-				value: "right",
-				icon: /* @__PURE__ */ r(o, {}),
-				description: "Float Right",
-				active: s === "right"
-			}
-		], [s])
-	})
-});
+var s = ({ value: s, onChange: c }) => {
+	let l = n(() => [
+		{
+			value: "none",
+			icon: /* @__PURE__ */ r(i, {}),
+			description: "Static",
+			active: s === "none"
+		},
+		{
+			value: "left",
+			icon: /* @__PURE__ */ r(a, {}),
+			description: "Float Left",
+			active: s === "left"
+		},
+		{
+			value: "right",
+			icon: /* @__PURE__ */ r(o, {}),
+			description: "Float Right",
+			active: s === "right"
+		}
+	], [s]);
+	return /* @__PURE__ */ r(t, {
+		label: "Float",
+		keys: ["float"],
+		children: /* @__PURE__ */ r(e, {
+			onChange: c,
+			type: "iconGroup",
+			items: l
+		})
+	});
+};
 //#endregion
 export { s as default };

package/dist/components/StyleInspector/categories/Spacing/Spacing.mjs

@@ -46,7 +46,7 @@ var d = [
 			"padding-left": t,
 			"padding-right": t
 		});
-	}, [m, g]);
+	}, [m, g]), C = s((e) => y(e), [y]);
 	return /* @__PURE__ */ l(n, {
 		title: "Spacing",
 		dotKeys: d,
@@ -57,7 +57,7 @@ var d = [
 			children: [/* @__PURE__ */ l(i, {
 				values: _,
 				fragmentSelected: v,
-				onSelectFragment: s((e) => y(e), [y]),
+				onSelectFragment: C,
 				isLinked: m,
 				onLinkSelected: x
 			}), v && /* @__PURE__ */ l(r, {