@plitzi/sdk-style 0.30.19

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

@@ -0,0 +1,126 @@
+import e from "../../StyleInspectorContext.mjs";
+import t from "../../hooks/useInspectorValues.mjs";
+import n from "../../components/CategoryContainer/index.mjs";
+import r from "./BorderColor.mjs";
+import i from "./BorderPlacements.mjs";
+import a from "./BorderRadius.mjs";
+import o from "./BorderStyle.mjs";
+import s from "./BorderWidth.mjs";
+import { memo as c, use as l, useCallback as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Border/Border.tsx
+var m = [
+	"border-top-style",
+	"border-top-width",
+	"border-top-color",
+	"border-bottom-style",
+	"border-bottom-width",
+	"border-bottom-color",
+	"border-left-style",
+	"border-left-width",
+	"border-left-color",
+	"border-right-style",
+	"border-right-width",
+	"border-right-color",
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-bottom-left-radius",
+	"border-bottom-right-radius"
+], h = c(({ replaceTokens: c = !1, isCollapsed: h = !0, onCollapse: g }) => {
+	let [_, v] = d("all"), { setValue: y } = l(e), b = t({
+		keys: m,
+		asValue: !0,
+		replaceTokens: c
+	}), x = u((e) => (t) => {
+		switch (e) {
+			case "radius":
+				y(void 0, {
+					"border-top-left-radius": t,
+					"border-top-right-radius": t,
+					"border-bottom-left-radius": t,
+					"border-bottom-right-radius": t
+				});
+				break;
+			case "border-top-left-radius":
+			case "border-top-right-radius":
+			case "border-bottom-left-radius":
+			case "border-bottom-right-radius":
+				y(e, t);
+				break;
+			case "style":
+			case "color":
+			case "width": {
+				let n = [
+					"style",
+					"color",
+					"width"
+				].filter((t) => t !== e);
+				_ === "all" ? y(void 0, {
+					[`border-top-${e}`]: t,
+					[`border-bottom-${e}`]: t,
+					[`border-left-${e}`]: t,
+					[`border-right-${e}`]: t,
+					[`border-top-${n[0]}`]: b[`border-top-${n[0]}`],
+					[`border-bottom-${n[0]}`]: b[`border-bottom-${n[0]}`],
+					[`border-left-${n[0]}`]: b[`border-left-${n[0]}`],
+					[`border-right-${n[0]}`]: b[`border-right-${n[0]}`],
+					[`border-top-${n[1]}`]: b[`border-right-${n[1]}`],
+					[`border-bottom-${n[1]}`]: b[`border-bottom-${n[1]}`],
+					[`border-left-${n[1]}`]: b[`border-left-${n[1]}`],
+					[`border-right-${n[1]}`]: b[`border-right-${n[1]}`]
+				}) : y(void 0, {
+					[`border-${_}-${e}`]: t,
+					[`border-${_}-${n[0]}`]: b[`border-${_}-${n[0]}`],
+					[`border-${_}-${n[1]}`]: b[`border-${_}-${n[1]}`]
+				});
+				break;
+			}
+			default: break;
+		}
+	}, [
+		_,
+		b,
+		y
+	]);
+	return /* @__PURE__ */ f(n, {
+		title: "Border",
+		dotKeys: m,
+		isCollapsed: h,
+		onCollapse: u((e) => g?.("border", e), [g]),
+		children: /* @__PURE__ */ p("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ f(a, {
+				values: b,
+				onChange: x("radius"),
+				onChangeSegment: x
+			}), /* @__PURE__ */ p("div", {
+				className: "flex w-full flex-col gap-2",
+				children: [/* @__PURE__ */ f(i, {
+					currentPlacement: _,
+					setCurrentPlacement: v
+				}), /* @__PURE__ */ p("div", {
+					className: "flex w-full flex-col gap-2",
+					children: [
+						/* @__PURE__ */ f(o, {
+							values: b,
+							currentPlacement: _,
+							onChange: x("style")
+						}),
+						/* @__PURE__ */ f(s, {
+							values: b,
+							currentPlacement: _,
+							onChange: x("width")
+						}),
+						/* @__PURE__ */ f(r, {
+							values: b,
+							currentPlacement: _,
+							onChange: x("color")
+						})
+					]
+				})]
+			})]
+		})
+	});
+});
+//#endregion
+export { h as default };

package/dist/components/StyleInspector/categories/Border/BorderColor.d.ts

@@ -0,0 +1,8 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type BorderColorProps = {
+    values: Record<StyleCategory, StyleValue | undefined>;
+    currentPlacement: string;
+    onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const BorderColor: ({ values, currentPlacement, onChange }: BorderColorProps) => import("react/jsx-runtime").JSX.Element;
+export default BorderColor;

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

@@ -0,0 +1,34 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Border/BorderColor.tsx
+var i = ({ values: i, currentPlacement: a, onChange: o }) => {
+	let s = n(() => {
+		let { "border-top-color": e, "border-bottom-color": t, "border-left-color": n, "border-right-color": r } = i;
+		switch (!0) {
+			case a === "all": return e === t && e === n && e === r ? e : "#000000";
+			case a === "top": return e;
+			case a === "bottom": return t;
+			case a === "left": return n;
+			case a === "right": return r;
+			default: return "#000000";
+		}
+	}, [i, a]);
+	return /* @__PURE__ */ r(t, {
+		label: "Color",
+		keys: n(() => a === "all" ? [
+			"border-top-color",
+			"border-bottom-color",
+			"border-left-color",
+			"border-right-color"
+		] : [`border-${a}-color`], [a]),
+		children: /* @__PURE__ */ r(e, {
+			value: s,
+			onChange: o,
+			type: "color"
+		})
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/StyleInspector/categories/Border/BorderPlacements.d.ts

@@ -0,0 +1,7 @@
+export type Placement = 'all' | 'top' | 'bottom' | 'left' | 'right';
+export type BorderPlacementsProps = {
+    currentPlacement: Placement;
+    setCurrentPlacement: (value: Placement) => void;
+};
+declare const BorderPlacements: ({ currentPlacement, setCurrentPlacement }: BorderPlacementsProps) => import("react/jsx-runtime").JSX.Element;
+export default BorderPlacements;

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

@@ -0,0 +1,55 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Icon";
+import a from "@plitzi/plitzi-ui/icons/BorderPlacementBottom";
+import o from "@plitzi/plitzi-ui/icons/BorderPlacementCenter";
+import s from "@plitzi/plitzi-ui/icons/BorderPlacementLeft";
+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", {
+		className: "mx-auto grid grid-cols-3 grid-rows-3 place-items-center gap-2",
+		children: [
+			/* @__PURE__ */ n(i, {
+				size: "2xl",
+				className: e("col-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "top" }),
+				onClick: f("top"),
+				active: u === "top",
+				children: /* @__PURE__ */ n(l, {})
+			}),
+			/* @__PURE__ */ n(i, {
+				size: "2xl",
+				className: e("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "left" }),
+				onClick: f("left"),
+				active: u === "left",
+				children: /* @__PURE__ */ n(s, {})
+			}),
+			/* @__PURE__ */ n(i, {
+				size: "2xl",
+				className: e("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, {})
+			}),
+			/* @__PURE__ */ n(i, {
+				size: "2xl",
+				className: e("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "right" }),
+				onClick: f("right"),
+				active: u === "right",
+				children: /* @__PURE__ */ n(c, {})
+			}),
+			/* @__PURE__ */ n(i, {
+				size: "2xl",
+				className: e("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, {})
+			})
+		]
+	});
+};
+//#endregion
+export { u as default };

package/dist/components/StyleInspector/categories/Border/BorderRadius.d.ts

@@ -0,0 +1,8 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type BorderRadiusProps = {
+    values: Record<StyleCategory, StyleValue | undefined>;
+    onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+    onChangeSegment?: (type: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const BorderRadius: ({ values, onChange, onChangeSegment }: BorderRadiusProps) => import("react/jsx-runtime").JSX.Element;
+export default BorderRadius;

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

@@ -0,0 +1,132 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useCallback as n, useMemo as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Border/BorderRadius.tsx
+var s = [
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-bottom-left-radius",
+	"border-bottom-right-radius"
+], c = [{
+	label: "PX",
+	value: "px"
+}, {
+	label: "%",
+	value: "%"
+}], l = ({ values: l, onChange: u, onChangeSegment: d }) => {
+	let { "border-top-left-radius": f, "border-top-right-radius": p, "border-bottom-left-radius": m, "border-bottom-right-radius": h } = l, [g, _] = i(f !== p || f !== m || f !== h), v = "0px";
+	f === p && f === m && f === h && (v = f);
+	let y = n((e) => {
+		_(e);
+	}, []);
+	return /* @__PURE__ */ o("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ o(t, {
+			label: "Radius",
+			keys: s,
+			children: [/* @__PURE__ */ a(e, {
+				items: r(() => [{
+					value: !1,
+					icon: "fa-regular fa-square",
+					description: "",
+					active: !g
+				}, {
+					value: !0,
+					icon: "fa-solid fa-expand",
+					description: "",
+					active: g
+				}], [g]),
+				type: "iconGroup",
+				onChange: y
+			}), /* @__PURE__ */ a(e, {
+				value: v,
+				units: c,
+				onChange: u,
+				type: "metric"
+			})]
+		}), g && /* @__PURE__ */ o("div", {
+			className: "grid grid-cols-3 grid-cols-[1fr_auto_1fr] grid-rows-3",
+			children: [
+				/* @__PURE__ */ a("div", {
+					className: "flex max-w-[80px] items-center justify-self-end",
+					children: /* @__PURE__ */ a(e, {
+						value: f,
+						onChange: d?.("border-top-left-radius"),
+						type: "metric",
+						units: c,
+						className: "text-center"
+					})
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "col-start-3 flex max-w-[80px] items-center justify-self-start",
+					children: /* @__PURE__ */ a(e, {
+						value: p,
+						onChange: d?.("border-top-right-radius"),
+						type: "metric",
+						units: c,
+						className: "text-center"
+					})
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "col-start-2 row-start-2 flex items-center justify-center",
+					children: /* @__PURE__ */ o("div", {
+						className: "grid h-10 w-10 grid-cols-2 grid-rows-2 gap-2",
+						children: [
+							/* @__PURE__ */ a("div", {
+								className: "h-4 w-4 border-t-3 border-l-3",
+								style: {
+									borderTopLeftRadius: f,
+									borderColor: f === "0px" ? "currentColor" : "#5900D6"
+								}
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "h-4 w-4 border-t-3 border-r-3",
+								style: {
+									borderTopRightRadius: p,
+									borderColor: p === "0px" ? "currentColor" : "#5900D6"
+								}
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "h-4 w-4 border-b-3 border-l-3",
+								style: {
+									borderBottomLeftRadius: m,
+									borderColor: m === "0px" ? "currentColor" : "#5900D6"
+								}
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "h-4 w-4 border-r-3 border-b-3",
+								style: {
+									borderBottomRightRadius: h,
+									borderColor: h === "0px" ? "currentColor" : "#5900D6"
+								}
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "row-start-3 flex max-w-[80px] items-center justify-self-end",
+					children: /* @__PURE__ */ a(e, {
+						value: m,
+						onChange: d?.("border-bottom-left-radius"),
+						type: "metric",
+						units: c,
+						className: "text-center"
+					})
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "col-start-3 row-start-3 flex max-w-[80px] items-center justify-self-start",
+					children: /* @__PURE__ */ a(e, {
+						value: h,
+						onChange: d?.("border-bottom-right-radius"),
+						type: "metric",
+						units: c,
+						className: "text-center"
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/StyleInspector/categories/Border/BorderStyle.d.ts

@@ -0,0 +1,8 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type BorderStyleProps = {
+    values: Record<StyleCategory, StyleValue | undefined>;
+    currentPlacement: string;
+    onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const BorderStyle: ({ values, currentPlacement, onChange }: BorderStyleProps) => import("react/jsx-runtime").JSX.Element;
+export default BorderStyle;

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

@@ -0,0 +1,63 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/icons/XMark";
+import a from "@plitzi/plitzi-ui/icons/BorderStyleDashed";
+import o from "@plitzi/plitzi-ui/icons/BorderStyleDotted";
+import s from "@plitzi/plitzi-ui/icons/BorderStyleSolid";
+//#region src/components/StyleInspector/categories/Border/BorderStyle.tsx
+var c = ({ values: c, currentPlacement: l, onChange: u }) => {
+	let d = n(() => {
+		let { "border-top-style": e, "border-bottom-style": t, "border-left-style": n, "border-right-style": r } = c;
+		switch (!0) {
+			case l === "all": return e === t && e === n && e === r ? e : "solid";
+			case l === "top": return e;
+			case l === "bottom": return t;
+			case l === "left": return n;
+			case l === "right": return r;
+			default: return "solid";
+		}
+	}, [c, l]), f = n(() => [
+		{
+			value: "none",
+			icon: /* @__PURE__ */ r(i, {}),
+			description: "",
+			active: d === "none"
+		},
+		{
+			value: "solid",
+			icon: /* @__PURE__ */ r(s, {}),
+			description: "",
+			active: d === "solid"
+		},
+		{
+			value: "dashed",
+			icon: /* @__PURE__ */ r(a, {}),
+			description: "",
+			active: d === "dashed"
+		},
+		{
+			value: "dotted",
+			icon: /* @__PURE__ */ r(o, {}),
+			description: "",
+			active: d === "dotted"
+		}
+	], [d]);
+	return /* @__PURE__ */ r(t, {
+		label: "Style",
+		keys: n(() => l === "all" ? [
+			"border-top-style",
+			"border-bottom-style",
+			"border-left-style",
+			"border-right-style"
+		] : [`border-${l}-style`], [l]),
+		children: /* @__PURE__ */ r(e, {
+			onChange: u,
+			items: f,
+			type: "iconGroup"
+		})
+	});
+};
+//#endregion
+export { c as default };

package/dist/components/StyleInspector/categories/Border/BorderWidth.d.ts

@@ -0,0 +1,8 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type BorderWidthProps = {
+    values: Record<StyleCategory, StyleValue | undefined>;
+    currentPlacement: string;
+    onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const BorderWidth: ({ values, currentPlacement, onChange }: BorderWidthProps) => import("react/jsx-runtime").JSX.Element;
+export default BorderWidth;

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

@@ -0,0 +1,34 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Border/BorderWidth.tsx
+var i = ({ values: i, currentPlacement: a, onChange: o }) => {
+	let s = n(() => {
+		let { "border-top-width": e, "border-bottom-width": t, "border-left-width": n, "border-right-width": r } = i;
+		switch (!0) {
+			case a === "all": return e === t && e === n && e === r ? e : "0px";
+			case a === "top": return e;
+			case a === "bottom": return t;
+			case a === "left": return n;
+			case a === "right": return r;
+			default: return "0px";
+		}
+	}, [i, a]);
+	return /* @__PURE__ */ r(t, {
+		label: "Width",
+		keys: n(() => a === "all" ? [
+			"border-top-width",
+			"border-bottom-width",
+			"border-left-width",
+			"border-right-width"
+		] : [`border-${a}-width`], [a]),
+		children: /* @__PURE__ */ r(e, {
+			value: s,
+			onChange: o,
+			type: "metric"
+		})
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/StyleInspector/categories/Border/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Border } from './Border';
+export * from './Border';
+export default Border;

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

@@ -0,0 +1,5 @@
+import e from "./Border.mjs";
+//#region src/components/StyleInspector/categories/Border/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/categories/Display/Display.d.ts

@@ -0,0 +1,7 @@
+export type DisplayProps = {
+    replaceTokens?: boolean;
+    isCollapsed?: boolean;
+    onCollapse?: (category: string, isCollapsed: boolean) => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: DisplayProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,120 @@
+import e from "../../StyleInspectorContext.mjs";
+import t from "../../hooks/useInspectorValues.mjs";
+import n from "../../components/CategoryContainer/index.mjs";
+import r from "./DisplayElements.mjs";
+import i from "./DisplayFlex.mjs";
+import a from "./DisplayFlexAlignContent.mjs";
+import o from "./DisplayFlexAlignItems.mjs";
+import s from "./DisplayFlexDirection.mjs";
+import c from "./DisplayFlexJustify.mjs";
+import l from "./DisplayGap.mjs";
+import u from "./DisplayGridGap.mjs";
+import d from "./DisplayGridTemplate.mjs";
+import { memo as f, use as p, useCallback as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Display/Display.tsx
+var v = [
+	"flex-direction",
+	"flex-wrap",
+	"align-items",
+	"justify-content",
+	"align-content",
+	"column-gap",
+	"row-gap",
+	"grid-row-gap",
+	"grid-column-gap",
+	"grid-template-areas",
+	"grid-template-columns",
+	"grid-template-rows",
+	"grid-auto-flow",
+	"grid-auto-rows",
+	"grid-auto-columns",
+	"display"
+], y = f(({ replaceTokens: f = !1, isCollapsed: y = !0, onCollapse: b }) => {
+	let { setValue: x } = p(e), { display: S, "flex-direction": C, "flex-wrap": w, "align-items": T, "justify-content": E, "row-gap": D, "column-gap": O, "grid-template-areas": k, "grid-template-columns": A, "grid-template-rows": j, "grid-auto-flow": M, "grid-auto-rows": N, "grid-auto-columns": P, "grid-row-gap": F, "grid-column-gap": I, "align-content": L } = t({
+		keys: v,
+		asValue: !0,
+		replaceTokens: f
+	}), R = m((e, t) => {
+		e === "display" ? x(void 0, {
+			"flex-direction": void 0,
+			"flex-wrap": void 0,
+			"align-items": void 0,
+			"justify-content": void 0,
+			"align-content": void 0,
+			"row-gap": void 0,
+			"column-gap": void 0,
+			"grid-row-gap": void 0,
+			"grid-column-gap": void 0,
+			"grid-template-areas": void 0,
+			"grid-template-columns": void 0,
+			"grid-template-rows": void 0,
+			"grid-auto-flow": void 0,
+			"grid-auto-rows": void 0,
+			"grid-auto-columns": void 0,
+			display: t
+		}) : x(e, t);
+	}, [x]), z = m((e) => b?.("display", e), [b]), B = typeof C == "string" && C.includes("reverse"), V = typeof C == "string" && C.includes("row"), H = typeof w == "string" && w.includes("reverse");
+	return /* @__PURE__ */ _(n, {
+		title: "Layout",
+		dotKeys: v,
+		isCollapsed: y,
+		onCollapse: z,
+		children: [
+			/* @__PURE__ */ g(r, {
+				value: S,
+				onChange: R
+			}),
+			S === "flex" && /* @__PURE__ */ _(h, { children: [
+				/* @__PURE__ */ g(s, {
+					value: C,
+					onChange: R,
+					isReverse: B
+				}),
+				/* @__PURE__ */ g(o, {
+					value: T,
+					onChange: R,
+					isReverse: B,
+					isRow: V
+				}),
+				/* @__PURE__ */ g(c, {
+					value: E,
+					onChange: R,
+					isReverse: B,
+					isRow: V
+				}),
+				/* @__PURE__ */ g(i, {
+					value: w,
+					onChange: R,
+					isReverse: H
+				}),
+				/* @__PURE__ */ g(l, {
+					rowGap: D,
+					columnGap: O,
+					onChange: R
+				})
+			] }),
+			S === "grid" && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(d, {
+				templateAreas: k,
+				templateColumns: A,
+				templateRows: j,
+				templateAutoFlow: M,
+				templateAutoRows: N,
+				templateAutoColumns: P,
+				onChange: R
+			}), /* @__PURE__ */ g(u, {
+				rowGap: F,
+				columnGap: I,
+				onChange: R
+			})] }),
+			S === "flex" && (w === "wrap" || w === "wrap-reverse") && /* @__PURE__ */ g(a, {
+				value: L,
+				onChange: R,
+				isReverse: H,
+				isRow: V
+			})
+		]
+	});
+});
+//#endregion
+export { y as default };

package/dist/components/StyleInspector/categories/Display/DisplayElements.d.ts

@@ -0,0 +1,7 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type DisplayElementsProps = {
+    value?: StyleValue;
+    onChange?: (type: StyleCategory, value: StyleValue) => void;
+};
+declare const DisplayElements: ({ value, onChange }: DisplayElementsProps) => import("react/jsx-runtime").JSX.Element;
+export default DisplayElements;