@plitzi/sdk-style 0.32.14 → 0.32.16

package/dist/components/StyleInspector/categories/Display/DisplayFlex.mjs

@@ -4,43 +4,46 @@ import { useCallback as n, useMemo as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 import a from "@plitzi/plitzi-ui/icons/ArrowReverse";
 //#region src/components/StyleInspector/categories/Display/DisplayFlex.tsx
-var o = ["flex-wrap"], s = ({ value: s, isReverse: c = !1, onChange: l }) => /* @__PURE__ */ i(t, {
-	label: "Children",
-	keys: o,
-	children: /* @__PURE__ */ i(e, {
-		onChange: n((e) => {
-			typeof e == "boolean" ? e ? l?.("flex-wrap", `${s}-reverse`) : l?.("flex-wrap", s.replace("-reverse", "")) : l?.("flex-wrap", e);
-		}, [l, s]),
-		type: "iconGroup",
-		items: r(() => [
-			{
-				value: c ? "nowrap-reverse" : "nowrap",
-				icon: /* @__PURE__ */ i("div", {
-					className: "px-1 text-xs whitespace-nowrap select-none",
-					children: "Don't Wrap"
-				}),
-				description: "",
-				active: s === "nowrap" || s === "nowrap-reverse",
-				size: "custom"
-			},
-			{
-				value: c ? "wrap-reverse" : "wrap",
-				icon: /* @__PURE__ */ i("div", {
-					className: "px-1 text-xs select-none",
-					children: "Wrap"
-				}),
-				description: "",
-				active: s === "wrap" || s === "wrap-reverse",
-				size: "custom"
-			},
-			{
-				value: !c,
-				icon: /* @__PURE__ */ i(a, {}),
-				description: "Reverse Wrap",
-				active: c
-			}
-		], [s, c])
-	})
-});
+var o = ["flex-wrap"], s = ({ value: s, isReverse: c = !1, onChange: l }) => {
+	let u = n((e) => {
+		typeof e == "boolean" ? e ? l?.("flex-wrap", `${s}-reverse`) : l?.("flex-wrap", s.replace("-reverse", "")) : l?.("flex-wrap", e);
+	}, [l, s]), d = r(() => [
+		{
+			value: c ? "nowrap-reverse" : "nowrap",
+			icon: /* @__PURE__ */ i("div", {
+				className: "px-1 text-xs whitespace-nowrap select-none",
+				children: "Don't Wrap"
+			}),
+			description: "",
+			active: s === "nowrap" || s === "nowrap-reverse",
+			size: "custom"
+		},
+		{
+			value: c ? "wrap-reverse" : "wrap",
+			icon: /* @__PURE__ */ i("div", {
+				className: "px-1 text-xs select-none",
+				children: "Wrap"
+			}),
+			description: "",
+			active: s === "wrap" || s === "wrap-reverse",
+			size: "custom"
+		},
+		{
+			value: !c,
+			icon: /* @__PURE__ */ i(a, {}),
+			description: "Reverse Wrap",
+			active: c
+		}
+	], [s, c]);
+	return /* @__PURE__ */ i(t, {
+		label: "Children",
+		keys: o,
+		children: /* @__PURE__ */ i(e, {
+			onChange: u,
+			type: "iconGroup",
+			items: d
+		})
+	});
+};
 //#endregion
 export { s as default };

package/dist/components/StyleInspector/categories/Display/DisplayFlexAlignContent.mjs

@@ -40,56 +40,56 @@ var x = ["align-content"], S = ({ value: S, isReverse: C = !1, isRow: w = !1, on
 			case "space-around": return i(t ? f : d, {});
 			default: return;
 		}
-	}, []);
+	}, []), O = r(() => [
+		{
+			value: "flex-start",
+			icon: D("flex-start", w, C),
+			description: "Align Rows: Start",
+			active: S === "flex-start"
+		},
+		{
+			value: "center",
+			icon: D("center", w, C),
+			description: "Align Rows: Center",
+			active: S === "center"
+		},
+		{
+			value: "flex-end",
+			icon: D("flex-end", w, C),
+			description: "Align Rows: End",
+			active: S === "flex-end"
+		},
+		{
+			value: "stretch",
+			icon: D("stretch", w, C),
+			description: "Align Rows: Stretch",
+			active: S === "stretch"
+		},
+		{
+			value: "space-between",
+			icon: D("space-between", w, C),
+			description: "Align Rows: Space Between",
+			active: S === "space-between"
+		},
+		{
+			value: "space-around",
+			icon: D("space-around", w, C),
+			description: "Align Rows: Space Around",
+			active: S === "space-around"
+		}
+	], [
+		D,
+		w,
+		C,
+		S
+	]);
 	return /* @__PURE__ */ i(t, {
 		keys: x,
 		label: "Align",
 		children: /* @__PURE__ */ i(e, {
 			onChange: E,
 			type: "iconGroup",
-			items: r(() => [
-				{
-					value: "flex-start",
-					icon: D("flex-start", w, C),
-					description: "Align Rows: Start",
-					active: S === "flex-start"
-				},
-				{
-					value: "center",
-					icon: D("center", w, C),
-					description: "Align Rows: Center",
-					active: S === "center"
-				},
-				{
-					value: "flex-end",
-					icon: D("flex-end", w, C),
-					description: "Align Rows: End",
-					active: S === "flex-end"
-				},
-				{
-					value: "stretch",
-					icon: D("stretch", w, C),
-					description: "Align Rows: Stretch",
-					active: S === "stretch"
-				},
-				{
-					value: "space-between",
-					icon: D("space-between", w, C),
-					description: "Align Rows: Space Between",
-					active: S === "space-between"
-				},
-				{
-					value: "space-around",
-					icon: D("space-around", w, C),
-					description: "Align Rows: Space Around",
-					active: S === "space-around"
-				}
-			], [
-				D,
-				w,
-				C,
-				S
-			])
+			items: O
 		})
 	});
 };

package/dist/components/StyleInspector/categories/Display/DisplayFlexAlignItems.mjs

@@ -51,50 +51,50 @@ var C = ["align-items"], w = ({ value: w, isReverse: T = !1, isRow: E = !1, onCh
 				break;
 			default: return;
 		}
-	}, []);
+	}, []), A = r(() => [
+		{
+			value: "flex-start",
+			icon: k("flex-start", E, T),
+			description: "Align Start",
+			active: w === "flex-start"
+		},
+		{
+			value: "center",
+			icon: k("center", E, T),
+			description: "Align Center",
+			active: w === "center"
+		},
+		{
+			value: "flex-end",
+			icon: k("flex-end", E, T),
+			description: "Align End",
+			active: w === "flex-end"
+		},
+		{
+			value: "stretch",
+			icon: k("stretch", E, T),
+			description: "Align Stretch",
+			active: w === "stretch"
+		},
+		{
+			value: "baseline",
+			icon: k("baseline", E, T),
+			description: "Align Baseline",
+			active: w === "space-between"
+		}
+	], [
+		w,
+		T,
+		E,
+		k
+	]);
 	return /* @__PURE__ */ i(t, {
 		keys: C,
 		label: "Align",
 		children: /* @__PURE__ */ i(e, {
 			onChange: O,
 			type: "iconGroup",
-			items: r(() => [
-				{
-					value: "flex-start",
-					icon: k("flex-start", E, T),
-					description: "Align Start",
-					active: w === "flex-start"
-				},
-				{
-					value: "center",
-					icon: k("center", E, T),
-					description: "Align Center",
-					active: w === "center"
-				},
-				{
-					value: "flex-end",
-					icon: k("flex-end", E, T),
-					description: "Align End",
-					active: w === "flex-end"
-				},
-				{
-					value: "stretch",
-					icon: k("stretch", E, T),
-					description: "Align Stretch",
-					active: w === "stretch"
-				},
-				{
-					value: "baseline",
-					icon: k("baseline", E, T),
-					description: "Align Baseline",
-					active: w === "space-between"
-				}
-			], [
-				w,
-				T,
-				E,
-				k
-			])
+			items: A
 		})
 	});
 };

package/dist/components/StyleInspector/categories/Display/DisplayFlexDirection.mjs

@@ -4,43 +4,46 @@ import { useCallback as n, useMemo as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 import a from "@plitzi/plitzi-ui/icons/ArrowReverse";
 //#region src/components/StyleInspector/categories/Display/DisplayFlexDirection.tsx
-var o = ["flex-direction"], s = ({ value: s = "row", isReverse: c = !1, onChange: l }) => /* @__PURE__ */ i(t, {
-	keys: o,
-	label: "Direction",
-	children: /* @__PURE__ */ i(e, {
-		onChange: n((e) => {
-			typeof e == "boolean" ? e ? l?.("flex-direction", `${s}-reverse`) : l?.("flex-direction", s.replace("-reverse", "")) : l?.("flex-direction", e);
-		}, [l, s]),
-		type: "iconGroup",
-		items: r(() => [
-			{
-				value: c ? "row-reverse" : "row",
-				icon: /* @__PURE__ */ i("div", {
-					className: "px-1 text-xs select-none",
-					children: "Horizontal"
-				}),
-				description: "",
-				active: s === "row" || s === "row-reverse",
-				size: "custom"
-			},
-			{
-				value: c ? "column-reverse" : "column",
-				icon: /* @__PURE__ */ i("div", {
-					className: "px-1 text-xs select-none",
-					children: "Vertical"
-				}),
-				description: "",
-				active: s === "column" || s === "column-reverse",
-				size: "custom"
-			},
-			{
-				value: !c,
-				icon: /* @__PURE__ */ i(a, {}),
-				description: "Reverse Direction",
-				active: c
-			}
-		], [s, c])
-	})
-});
+var o = ["flex-direction"], s = ({ value: s = "row", isReverse: c = !1, onChange: l }) => {
+	let u = n((e) => {
+		typeof e == "boolean" ? e ? l?.("flex-direction", `${s}-reverse`) : l?.("flex-direction", s.replace("-reverse", "")) : l?.("flex-direction", e);
+	}, [l, s]), d = r(() => [
+		{
+			value: c ? "row-reverse" : "row",
+			icon: /* @__PURE__ */ i("div", {
+				className: "px-1 text-xs select-none",
+				children: "Horizontal"
+			}),
+			description: "",
+			active: s === "row" || s === "row-reverse",
+			size: "custom"
+		},
+		{
+			value: c ? "column-reverse" : "column",
+			icon: /* @__PURE__ */ i("div", {
+				className: "px-1 text-xs select-none",
+				children: "Vertical"
+			}),
+			description: "",
+			active: s === "column" || s === "column-reverse",
+			size: "custom"
+		},
+		{
+			value: !c,
+			icon: /* @__PURE__ */ i(a, {}),
+			description: "Reverse Direction",
+			active: c
+		}
+	], [s, c]);
+	return /* @__PURE__ */ i(t, {
+		keys: o,
+		label: "Direction",
+		children: /* @__PURE__ */ i(e, {
+			onChange: u,
+			type: "iconGroup",
+			items: d
+		})
+	});
+};
 //#endregion
 export { s as default };

package/dist/components/StyleInspector/categories/Display/DisplayFlexJustify.mjs

@@ -37,50 +37,50 @@ var y = ["justify-content"], b = ({ value: b, isReverse: x = !1, isRow: S = !1,
 			case "space-around": return i(t ? f : d, {});
 			default: return;
 		}
-	}, []);
+	}, []), E = r(() => [
+		{
+			value: "flex-start",
+			icon: T("flex-start", S, x),
+			description: "Justify Start",
+			active: b === "flex-start"
+		},
+		{
+			value: "center",
+			icon: T("center", S, x),
+			description: "Justify Center",
+			active: b === "center"
+		},
+		{
+			value: "flex-end",
+			icon: T("flex-end", S, x),
+			description: "Justify End",
+			active: b === "flex-end"
+		},
+		{
+			value: "space-between",
+			icon: T("space-between", S, x),
+			description: "Justify Space Between - distribute evenly from start to end",
+			active: b === "space-between"
+		},
+		{
+			value: "space-around",
+			icon: T("space-around", S, x),
+			description: "Justify Space Around - distribute evenly, why space around all children",
+			active: b === "space-around"
+		}
+	], [
+		T,
+		S,
+		x,
+		b
+	]);
 	return /* @__PURE__ */ i(t, {
 		label: "Justify",
 		keys: y,
 		children: /* @__PURE__ */ i(e, {
 			onChange: w,
 			type: "iconGroup",
-			items: r(() => [
-				{
-					value: "flex-start",
-					icon: T("flex-start", S, x),
-					description: "Justify Start",
-					active: b === "flex-start"
-				},
-				{
-					value: "center",
-					icon: T("center", S, x),
-					description: "Justify Center",
-					active: b === "center"
-				},
-				{
-					value: "flex-end",
-					icon: T("flex-end", S, x),
-					description: "Justify End",
-					active: b === "flex-end"
-				},
-				{
-					value: "space-between",
-					icon: T("space-between", S, x),
-					description: "Justify Space Between - distribute evenly from start to end",
-					active: b === "space-between"
-				},
-				{
-					value: "space-around",
-					icon: T("space-around", S, x),
-					description: "Justify Space Around - distribute evenly, why space around all children",
-					active: b === "space-around"
-				}
-			], [
-				T,
-				S,
-				x,
-				b
-			])
+			items: E
 		})
 	});
 };

package/dist/components/StyleInspector/categories/Display/DisplayGridTemplate.mjs

@@ -4,32 +4,32 @@ import { useCallback as n, useMemo as r } from "react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Display/DisplayGridTemplate.tsx
 var s = ["grid-auto-flow"], c = ["grid-template-columns", "grid-template-rows"], l = ["grid-auto-columns", "grid-auto-rows"], u = ({ templateAreas: u = "none", templateColumns: d = "none", templateRows: f = "none", templateAutoFlow: p = "row", templateAutoRows: m = "none", templateAutoColumns: h = "none", onChange: g }) => {
-	let _ = n((e) => g?.("grid-template-areas", e), [g]), v = n((e) => g?.("grid-template-rows", e), [g]), y = n((e) => g?.("grid-template-columns", e), [g]), b = n((e) => g?.("grid-auto-rows", e), [g]), x = n((e) => g?.("grid-auto-columns", e), [g]), S = n((e) => g?.("grid-auto-flow", e), [g]);
+	let _ = n((e) => g?.("grid-template-areas", e), [g]), v = n((e) => g?.("grid-template-rows", e), [g]), y = n((e) => g?.("grid-template-columns", e), [g]), b = n((e) => g?.("grid-auto-rows", e), [g]), x = n((e) => g?.("grid-auto-columns", e), [g]), S = n((e) => g?.("grid-auto-flow", e), [g]), C = r(() => [{
+		value: "row",
+		icon: /* @__PURE__ */ a("div", {
+			className: "px-1 text-xs whitespace-nowrap select-none",
+			children: "Row"
+		}),
+		description: "",
+		active: p === "row",
+		size: "custom"
+	}, {
+		value: "column",
+		icon: /* @__PURE__ */ a("div", {
+			className: "px-1 text-xs select-none",
+			children: "Column"
+		}),
+		description: "",
+		active: p === "column",
+		size: "custom"
+	}], [p]);
 	return /* @__PURE__ */ o(i, { children: [
 		/* @__PURE__ */ a(t, {
 			label: "Direction",
 			keys: s,
 			children: /* @__PURE__ */ a(e, {
 				type: "iconGroup",
-				items: r(() => [{
-					value: "row",
-					icon: /* @__PURE__ */ a("div", {
-						className: "px-1 text-xs whitespace-nowrap select-none",
-						children: "Row"
-					}),
-					description: "",
-					active: p === "row",
-					size: "custom"
-				}, {
-					value: "column",
-					icon: /* @__PURE__ */ a("div", {
-						className: "px-1 text-xs select-none",
-						children: "Column"
-					}),
-					description: "",
-					active: p === "column",
-					size: "custom"
-				}], [p]),
+				items: C,
 				onChange: S
 			})
 		}),

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

@@ -10,51 +10,54 @@ import l from "@plitzi/plitzi-ui/icons/AlignSelfEndRow";
 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 }) => /* @__PURE__ */ a(t, {
-	label: "Align",
-	keys: f,
-	children: /* @__PURE__ */ a(e, {
-		onChange: r((e) => h?.("align-self", e), [h]),
-		type: "iconGroup",
-		items: i(() => [
-			{
-				value: "auto",
-				icon: /* @__PURE__ */ a(o, {}),
-				description: "Align Auto",
-				active: p === "auto"
-			},
-			{
-				value: "flex-start",
-				icon: /* @__PURE__ */ a(u, { className: n({ "-rotate-90": m }) }),
-				description: "Align Start",
-				active: p === "flex-start"
-			},
-			{
-				value: "center",
-				icon: /* @__PURE__ */ a(c, { className: n({ "-rotate-90": m }) }),
-				description: "Align Center",
-				active: p === "center"
-			},
-			{
-				value: "flex-end",
-				icon: /* @__PURE__ */ a(l, { className: n({ "-rotate-90": m }) }),
-				description: "Align End",
-				active: p === "flex-end"
-			},
-			{
-				value: "stretch",
-				icon: /* @__PURE__ */ a(d, { className: n({ "-rotate-90": m }) }),
-				description: "Align Stretch",
-				active: p === "stretch"
-			},
-			{
-				value: "baseline",
-				icon: /* @__PURE__ */ a(s, {}),
-				description: "Align Baseline",
-				active: p === "baseline"
-			}
-		], [m, p])
-	})
-});
+var f = ["align-self"], p = ({ value: p, isFlexVertical: m = !1, onChange: h }) => {
+	let g = r((e) => h?.("align-self", e), [h]), _ = i(() => [
+		{
+			value: "auto",
+			icon: /* @__PURE__ */ a(o, {}),
+			description: "Align Auto",
+			active: p === "auto"
+		},
+		{
+			value: "flex-start",
+			icon: /* @__PURE__ */ a(u, { className: n({ "-rotate-90": m }) }),
+			description: "Align Start",
+			active: p === "flex-start"
+		},
+		{
+			value: "center",
+			icon: /* @__PURE__ */ a(c, { className: n({ "-rotate-90": m }) }),
+			description: "Align Center",
+			active: p === "center"
+		},
+		{
+			value: "flex-end",
+			icon: /* @__PURE__ */ a(l, { className: n({ "-rotate-90": m }) }),
+			description: "Align End",
+			active: p === "flex-end"
+		},
+		{
+			value: "stretch",
+			icon: /* @__PURE__ */ a(d, { className: n({ "-rotate-90": m }) }),
+			description: "Align Stretch",
+			active: p === "stretch"
+		},
+		{
+			value: "baseline",
+			icon: /* @__PURE__ */ a(s, {}),
+			description: "Align Baseline",
+			active: p === "baseline"
+		}
+	], [m, p]);
+	return /* @__PURE__ */ a(t, {
+		label: "Align",
+		keys: f,
+		children: /* @__PURE__ */ a(e, {
+			onChange: g,
+			type: "iconGroup",
+			items: _
+		})
+	});
+};
 //#endregion
 export { p as default };

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

@@ -35,7 +35,7 @@ var g = [
 	}, [x]), A = l((e) => {
 		x("flex-basis", e);
 	}, [x]), j = l((e) => b?.("displayFlexChild", e), [b]), M = u(() => {
-		let e = !(S === "0" && C === "1" && w === "auto") && !(S === "1" && C === "1" && w === "0%") && !(S === "0" && C === "0" && w === "auto");
+		let e = (S !== "0" || C !== "1" || w !== "auto") && (S !== "1" || C !== "1" || w !== "0%") && (S !== "0" || C !== "0" || w !== "auto");
 		return [
 			{
 				value: {