@plitzi/sdk-style 0.37.9 → 0.37.10

package/dist/StyleAdvanceEditor.mjs

@@ -8,49 +8,50 @@ import d from "@plitzi/plitzi-ui/CodeMirror";
 import f from "@plitzi/plitzi-ui/ContainerFloating";
 import p from "@plitzi/sdk-shared/hooks/useNetwork";
 import m from "@plitzi/sdk-shared/schema/SchemaContext";
-import h from "@plitzi/sdk-shared/theme/useTheme";
+import { splitNotificationsCss as h, withNotificationsCss as g } from "@plitzi/sdk-shared/style/notifications";
+import _ from "@plitzi/sdk-shared/theme/useTheme";
 //#region src/StyleAdvanceEditor.tsx
-var g = () => {
-	let { resolvedTheme: g } = h(), [[_ = "", v = void 0]] = a(["schema.settings.customCss", "style.variables"]), { schemaUpdateSettings: y } = e(m), [b, x] = r(() => typeof _ == "string" ? _ : ""), S = n(() => y && o(y, 500), [y]), { server: C, webKey: w } = e(i), { networkQuery: T, networkLoading: E } = p({
+var v = () => {
+	let { resolvedTheme: v } = _(), [[y = "", b = void 0]] = a(["schema.settings.customCss", "style.variables"]), { schemaUpdateSettings: x } = e(m), S = n(() => h(typeof y == "string" ? y : ""), [y]), [C, w] = r(() => S.customCss), T = n(() => x && o(x, 500), [x]), { server: E, webKey: D } = e(i), { networkQuery: O, networkLoading: k } = p({
 		initLoading: !1,
-		server: C,
-		webKey: w
-	}), D = t((e) => {
-		S?.(e, "customCss"), x(e);
-	}, [x, S]), O = t(async () => {
-		let e = await T("/utils/prettier-parser", {
-			data: b,
+		server: E,
+		webKey: D
+	}), A = t((e) => T?.(g(e, S.notifications), "customCss"), [T, S.notifications]), j = t((e) => {
+		A(String(e)), w(String(e));
+	}, [A]), M = t(async () => {
+		let e = await O("/utils/prettier-parser", {
+			data: C,
 			parser: "css"
 		}, "post");
 		if (!e || !e.data) return;
-		let t = s(e, "data", b);
-		t !== b && (x(t), S?.(t, "customCss"));
+		let t = s(e, "data", C);
+		t !== C && (w(t), A(t));
 	}, [
-		T,
-		b,
-		S
-	]), k = n(() => v ? Object.keys(v).flatMap((e) => Object.keys(v[e] ?? {})).map((e) => ({
+		O,
+		C,
+		A
+	]), N = n(() => b ? Object.keys(b).flatMap((e) => Object.keys(b[e] ?? {})).map((e) => ({
 		type: "css-token",
 		value: e
-	})) : [], [v]);
+	})) : [], [b]);
 	return /* @__PURE__ */ l("div", {
 		className: "relative flex h-full w-full flex-col",
 		children: [/* @__PURE__ */ c(d, {
 			className: "h-full",
-			value: b,
-			autoComplete: k,
-			theme: g,
+			value: C,
+			autoComplete: N,
+			theme: v,
 			lineWrapping: !0,
-			onChange: D
+			onChange: j
 		}), /* @__PURE__ */ l("div", {
 			className: "absolute top-3 right-3 flex",
 			children: [/* @__PURE__ */ c(u, {
 				intent: "custom",
 				size: "custom",
 				className: "mr-2 rounded-sm bg-white p-2 text-zinc-800 shadow dark:bg-zinc-700 dark:text-zinc-200",
-				onClick: O,
+				onClick: M,
 				title: "Auto format",
-				disabled: E,
+				disabled: k,
 				children: /* @__PURE__ */ c("i", { className: "fa-solid fa-wand-magic-sparkles" })
 			}), /* @__PURE__ */ l(f, {
 				containerLeftOffset: -208,
@@ -85,4 +86,4 @@ var g = () => {
 	});
 };
 //#endregion
-export { g as default };
+export { v as default };

package/dist/StyleHelper.mjs

@@ -1,7 +1,8 @@
 import { makeId as e } from "@plitzi/sdk-shared/helpers/utils";
-import { styleVariablesToCss as t } from "@plitzi/sdk-variables/VariablesHelper";
+import { DISPLAY_MODES as t, DISPLAY_MODE_MIN_WIDTH as n, displayModeWidthRem as r, isDisplayMode as i } from "@plitzi/sdk-shared/style";
+import { styleVariablesToCss as a } from "@plitzi/sdk-variables/VariablesHelper";
 //#region src/StyleHelper.ts
-var n = (e, t = [], n = !0, r = "") => {
+var o = (e, t = [], n = !0, r = "") => {
 	if (!e || e.length === 0) return "";
 	let i = [];
 	return i = e.filter((e) => t.length === 0 || t.includes(e.type)).map((e) => {
@@ -13,33 +14,27 @@ var n = (e, t = [], n = !0, r = "") => {
 			default: return "";
 		}
 	}), i.join(r);
-}, r = {
-	desktop: "64rem",
-	tablet: "48rem",
-	mobile: "0"
-}, i = (e) => {
-	if (e === "mobile") return 0;
-	if (e === "tablet") return 768;
-	if (e === "desktop") return 1024;
+}, s = Object.fromEntries(t.map((e) => [e, r(e)])), c = (e) => {
+	if (i(e)) return n[e];
 	let t = e.match(/(\d*\.?\d+)(px|rem)/);
 	if (!t) return 0;
-	let n = parseFloat(t[1]);
-	return t[2] === "rem" ? n * 16 : n;
-}, a = (e) => {
-	let { platform: n, mode: a = "desktop-first", variables: o } = e, s = [], c = Object.keys(n).sort((e, t) => a === "mobile-first" ? i(e) - i(t) : i(t) - i(e));
-	return c.forEach((e, t) => {
-		let i = Object.values(n[e]).sort((e, t) => Number(t.type === "element") - Number(e.type === "element")).map((e) => e.cache).join("\n");
-		if (!i) return;
-		let o = r[e] ?? e;
-		if (a === "mobile-first") o === "0" || e === "mobile" ? s.push(i) : s.push(`@media (min-width: ${o}) {${i}}`);
+	let r = parseFloat(t[1]);
+	return t[2] === "rem" ? r * 16 : r;
+}, l = (e) => {
+	let { platform: t, mode: n = "desktop-first", variables: r } = e, i = [], o = Object.keys(t).sort((e, t) => n === "mobile-first" ? c(e) - c(t) : c(t) - c(e));
+	return o.forEach((e, r) => {
+		let a = Object.values(t[e]).sort((e, t) => Number(t.type === "element") - Number(e.type === "element")).map((e) => e.cache).join("\n");
+		if (!a) return;
+		let c = s[e] ?? e;
+		if (n === "mobile-first") c === "0" || e === "mobile" ? i.push(a) : i.push(`@media (min-width: ${c}) {${a}}`);
 		else {
-			let n = c[t - 1], a = n ? r[n] ?? n : void 0;
-			e === "desktop" ? s.push(i) : a ? s.push(`@media (max-width: ${a}) and (min-width: ${o}) {${i}}`) : s.push(`@media (max-width: ${o}) {${i}}`);
+			let t = o[r - 1], n = t ? s[t] ?? t : void 0;
+			e === "desktop" ? i.push(a) : n ? i.push(`@media (max-width: ${n}) and (min-width: ${c}) {${a}}`) : i.push(`@media (max-width: ${c}) {${a}}`);
 		}
-	}), o && Object.keys(o).length && s.push(t(o)), s.join("\n");
-}, o = (t, n = "base", r = 4) => {
+	}), r && Object.keys(r).length && i.push(a(r)), i.join("\n");
+}, u = (t, n = "base", r = 4) => {
 	let i = `${t}-${e(r)}`;
 	return n !== "base" && (i = `${t}-${n}-${e(r)}`), i;
 };
 //#endregion
-export { a as generateCache, o as makeSelector, n as selectorToString };
+export { l as generateCache, u as makeSelector, o as selectorToString };

package/dist/StyleReducer.d.ts

@@ -1,4 +1,4 @@
-import { DisplayMode, ReducerActionOrigin, SpaceFont, Style, StyleCategory, StyleItem, StyleTarget, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
+import { DisplayMode, SnippetStyle, ReducerActionOrigin, SpaceFont, Style, StyleCategory, StyleItem, StyleTarget, StyleVariableCategory, StyleVariableValue, TagType } from '@plitzi/sdk-shared';
 export declare const StyleActions: {
     readonly STYLE_UPDATE: "STYLE_UPDATE";
     readonly STYLE_ADD_SELECTOR: "STYLE_ADD_SELECTOR";
@@ -14,7 +14,7 @@ export declare const StyleActions: {
     readonly STYLE_ADD_FONT: "STYLE_ADD_FONT";
     readonly STYLE_UPDATE_FONT: "STYLE_UPDATE_FONT";
     readonly STYLE_REMOVE_FONT: "STYLE_REMOVE_FONT";
-    readonly STYLE_ADD_TEMPLATE: "STYLE_ADD_TEMPLATE";
+    readonly STYLE_ADD_SNIPPET: "STYLE_ADD_SNIPPET";
     readonly STYLE_UPDATE_SETTINGS: "STYLE_UPDATE_SETTINGS";
 };
 export type StyleReducerActionsBase = ReducerActionOrigin;
@@ -79,8 +79,8 @@ export type StyleReducerActions = StyleReducerActionsBase & ({
     type: 'STYLE_REMOVE_FONT';
     family: string;
 } | {
-    type: 'STYLE_ADD_TEMPLATE';
-    platform: Style['platform'];
+    type: 'STYLE_ADD_SNIPPET';
+    style: SnippetStyle;
 } | {
     type: 'STYLE_UPDATE_SETTINGS';
     path: string;

package/dist/StyleReducer.mjs

@@ -1,7 +1,8 @@
 import { generateCache as e } from "./StyleHelper.mjs";
 import t from "./StyleMap/index.mjs";
-import { get as n, set as r } from "@plitzi/plitzi-ui/helpers";
-import { produce as i } from "immer";
+import { set as n } from "@plitzi/plitzi-ui/helpers";
+import { produce as r } from "immer";
+import { mergeSnippetStyle as i } from "@plitzi/sdk-shared/style/snippetStyle";
 //#region src/StyleReducer.ts
 var a = {
 	STYLE_UPDATE: "STYLE_UPDATE",
@@ -18,7 +19,7 @@ var a = {
 	STYLE_ADD_FONT: "STYLE_ADD_FONT",
 	STYLE_UPDATE_FONT: "STYLE_UPDATE_FONT",
 	STYLE_REMOVE_FONT: "STYLE_REMOVE_FONT",
-	STYLE_ADD_TEMPLATE: "STYLE_ADD_TEMPLATE",
+	STYLE_ADD_SNIPPET: "STYLE_ADD_SNIPPET",
 	STYLE_UPDATE_SETTINGS: "STYLE_UPDATE_SETTINGS"
 }, o = (o, s) => {
 	switch (s.type) {
@@ -27,99 +28,94 @@ var a = {
 			...s.style
 		};
 		case a.STYLE_ADD_SELECTOR: {
-			let { displayMode: n, selectorType: a, selector: c, path: l, value: u, params: d } = s;
-			return i(o, (i) => {
-				t.addSelector(i, n, c, a, l, u, d) && r(i, "cache", e(i));
+			let { displayMode: i, selectorType: a, selector: c, path: l, value: u, params: d } = s;
+			return r(o, (r) => {
+				t.addSelector(r, i, c, a, l, u, d) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_UPDATE_SELECTOR: {
-			let { displayMode: n, selector: a, path: c, value: l, params: u } = s;
-			return i(o, (i) => {
-				t.updateSelector(i, n, a, c, l, u) && r(i, "cache", e(i));
+			let { displayMode: i, selector: a, path: c, value: l, params: u } = s;
+			return r(o, (r) => {
+				t.updateSelector(r, i, a, c, l, u) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_REMOVE_SELECTOR: {
-			let { displayMode: n, selector: a } = s;
-			return i(o, (i) => {
-				t.removeSelector(i, n, a) && r(i, "cache", e(i));
+			let { displayMode: i, selector: a } = s;
+			return r(o, (r) => {
+				t.removeSelector(r, i, a) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_REMOVE_SELECTORS: {
-			let { displayMode: n, selectors: a } = s;
-			return i(o, (i) => {
-				a.reduce((e, r) => t.removeSelector(i, n, r) || e, !1) && r(i, "cache", e(i));
+			let { displayMode: i, selectors: a } = s;
+			return r(o, (r) => {
+				a.reduce((e, n) => t.removeSelector(r, i, n) || e, !1) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_ADD_SELECTOR_VARIABLE: {
-			let { displayMode: n, selector: a, category: c, name: l, value: u } = s;
-			return i(o, (i) => {
-				t.addSelectorVariable(i, n, a, c, l, u) && r(i, "cache", e(i));
+			let { displayMode: i, selector: a, category: c, name: l, value: u } = s;
+			return r(o, (r) => {
+				t.addSelectorVariable(r, i, a, c, l, u) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_UPDATE_SELECTOR_VARIABLE: {
-			let { displayMode: n, selector: a, category: c, name: l, value: u } = s;
-			return i(o, (i) => {
-				t.updateSelectorVariable(i, n, a, c, l, u) && r(i, "cache", e(i));
+			let { displayMode: i, selector: a, category: c, name: l, value: u } = s;
+			return r(o, (r) => {
+				t.updateSelectorVariable(r, i, a, c, l, u) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_REMOVE_SELECTOR_VARIABLE: {
-			let { displayMode: n, selector: a, category: c, name: l } = s;
-			return i(o, (i) => {
-				t.removeSelectorVariable(i, n, a, c, l) && r(i, "cache", e(i));
+			let { displayMode: i, selector: a, category: c, name: l } = s;
+			return r(o, (r) => {
+				t.removeSelectorVariable(r, i, a, c, l) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_ADD_VARIABLE: {
-			let { category: n, name: a, value: c } = s;
-			return i(o, (i) => {
-				t.addVariable(i, n, a, c) && r(i, "cache", e(i));
+			let { category: i, name: a, value: c } = s;
+			return r(o, (r) => {
+				t.addVariable(r, i, a, c) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_UPDATE_VARIABLE: {
-			let { category: n, name: a, value: c } = s;
-			return i(o, (i) => {
-				t.updateVariable(i, n, a, c) && r(i, "cache", e(i));
+			let { category: i, name: a, value: c } = s;
+			return r(o, (r) => {
+				t.updateVariable(r, i, a, c) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_REMOVE_VARIABLE: {
-			let { category: n, name: a } = s;
-			return i(o, (i) => {
-				t.removeVariable(i, n, a) && r(i, "cache", e(i));
+			let { category: i, name: a } = s;
+			return r(o, (r) => {
+				t.removeVariable(r, i, a) && n(r, "cache", e(r));
 			});
 		}
 		case a.STYLE_ADD_FONT: {
 			let { font: e } = s;
-			return i(o, (n) => {
+			return r(o, (n) => {
 				t.addFont(n, e);
 			});
 		}
 		case a.STYLE_UPDATE_FONT: {
 			let { family: e, font: n } = s;
-			return i(o, (r) => {
+			return r(o, (r) => {
 				t.updateFont(r, e, n);
 			});
 		}
 		case a.STYLE_REMOVE_FONT: {
 			let { family: e } = s;
-			return i(o, (n) => {
+			return r(o, (n) => {
 				t.removeFont(n, e);
 			});
 		}
-		case a.STYLE_ADD_TEMPLATE: {
-			let { platform: t } = s;
-			return i(o, (r) => {
-				let i = n(r, "platform", {});
-				Object.keys(t).forEach((e) => {
-					i[e] = {
-						...n(i, e, {}),
-						...t[e]
-					};
-				}), r.platform = i, r.cache = e(r);
+		case a.STYLE_ADD_SNIPPET: {
+			let { style: t } = s;
+			return r(o, (n) => {
+				let { platform: r, variables: a } = i(n, t);
+				n.platform = r, n.variables = a, n.cache = e(n);
 			});
 		}
 		case a.STYLE_UPDATE_SETTINGS: {
 			let { path: e, value: t } = s;
-			return i(o, (n) => {
-				e === "mode" && r(n, "mode", t);
+			return r(o, (r) => {
+				e === "mode" && n(r, "mode", t);
 			});
 		}
 		default: return o;

package/dist/components/Selector/Selector.mjs

@@ -55,14 +55,14 @@ var S = "Classes apply left to right, in the order the stylesheet lists them: wh
 	]), Q = c((e) => {
 		switch (e.key) {
 			case "Enter": {
-				let { value: t } = e.target;
+				let { value: t } = e.currentTarget;
 				if (t !== "" && !H.find((e) => e.name === t)) {
 					P("");
 					let n = {
 						name: r(t),
 						type: "class"
 					}, i = [...H, n].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
-					A?.(n, !1), O?.(i), I(!1), e.target.blur(), k?.(n);
+					A?.(n, !1), O?.(i), I(!1), e.currentTarget.blur(), k?.(n);
 				}
 				setTimeout(() => {
 					M.current?.focus();
@@ -75,7 +75,7 @@ var S = "Classes apply left to right, in the order the stylesheet lists them: wh
 			case "ArrowDown":
 				I(!0);
 				break;
-			case "Escape": e.stopPropagation(), P(""), e.target.blur();
+			case "Escape": e.stopPropagation(), P(""), e.currentTarget.blur();
 		}
 	}, [
 		H,

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

@@ -9,14 +9,15 @@ 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";
+import { nodeOf as h } from "@plitzi/sdk-shared/helpers/eventTarget";
 //#region src/components/StyleInspector/categories/Background/components/BackgroundLayer/BackgroundLayer.tsx
-var h = {
+var g = {
 	none: "None",
 	url: "Image",
 	"linear-gradient": "Linear Gradient",
 	"radial-gradient": "Radial Gradient",
 	"conic-gradient": "Conic Gradient"
-}, g = [
+}, _ = [
 	{
 		value: "border-box",
 		label: "Border Box"
@@ -29,45 +30,45 @@ var h = {
 		value: "content-box",
 		label: "Content Box"
 	}
-], _ = 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) => {
+], v = s(({ layer: s, index: v, expanded: y, onExpand: b, onChange: x, onRemove: S, onReorder: C }) => {
+	let [w, T] = u(!1), E = l(() => n(s), [s]), D = c((e) => {
 		let t = String(e);
-		b({
+		x({
 			...s,
 			type: t
 		});
-	}, [s, b]), D = c(() => y(s.id), [y, s.id]), O = c((e) => b({
+	}, [s, x]), O = c(() => b(s.id), [b, s.id]), k = c((e) => x({
 		...s,
 		clip: String(e)
-	}), [s, b]), k = c((e) => {
-		e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(_));
-	}, [_]), A = c(() => {
-		w(!1);
-	}, []), j = c((e) => {
-		e.preventDefault(), w(!0);
+	}), [s, x]), A = c((e) => {
+		e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(v));
+	}, [v]), j = c(() => {
+		T(!1);
 	}, []), M = c((e) => {
-		e.currentTarget.contains(e.relatedTarget) || w(!1);
+		e.preventDefault(), T(!0);
 	}, []), N = c((e) => {
-		e.preventDefault(), w(!1);
+		e.currentTarget.contains(h(e.relatedTarget)) || T(!1);
+	}, []), P = c((e) => {
+		e.preventDefault(), T(!1);
 		let t = parseInt(e.dataTransfer.getData("text/plain"), 10);
-		isNaN(t) || S(t, _);
-	}, [_, S]);
+		isNaN(t) || C(t, v);
+	}, [v, C]);
 	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
+			"border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/20": w,
+			"border-gray-200 dark:border-zinc-700": !w
 		}),
-		onDragOver: j,
-		onDragLeave: M,
-		onDrop: N,
+		onDragOver: M,
+		onDragLeave: N,
+		onDrop: P,
 		children: [/* @__PURE__ */ f("div", {
 			className: "flex h-8 items-center gap-1 px-1",
 			children: [
 				/* @__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,
+					onDragStart: A,
+					onDragEnd: j,
 					children: /* @__PURE__ */ d(m, {
 						icon: "fa-solid fa-grip-lines",
 						size: "xs"
@@ -75,26 +76,26 @@ var h = {
 				}),
 				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 }
+					style: { background: E }
 				}),
 				/* @__PURE__ */ d("span", {
 					className: "flex-1 truncate text-xs text-gray-600 dark:text-zinc-400",
-					children: h[s.type]
+					children: g[s.type]
 				}),
 				/* @__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",
+					onClick: O,
+					title: y ? "Collapse" : "Expand",
 					children: /* @__PURE__ */ d(m, {
-						icon: v ? "fa-solid fa-angle-up" : "fa-solid fa-angle-down",
+						icon: y ? "fa-solid fa-angle-up" : "fa-solid fa-angle-down",
 						size: "xs"
 					})
 				}),
 				/* @__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,
+					onClick: S,
 					title: "Remove layer",
 					children: /* @__PURE__ */ d(m, {
 						icon: "fas fa-times",
@@ -102,7 +103,7 @@ var h = {
 					})
 				})
 			]
-		}), v && /* @__PURE__ */ f("div", {
+		}), y && /* @__PURE__ */ f("div", {
 			className: "flex flex-col gap-2 border-t border-gray-200 p-2 dark:border-zinc-700",
 			children: [
 				/* @__PURE__ */ d(t, {
@@ -110,7 +111,7 @@ var h = {
 					children: /* @__PURE__ */ f(e, {
 						type: "select",
 						value: s.type,
-						onChange: E,
+						onChange: D,
 						children: [
 							/* @__PURE__ */ d("option", {
 								value: "linear-gradient",
@@ -137,27 +138,27 @@ var h = {
 				}),
 				s.type === "url" && /* @__PURE__ */ d(i, {
 					layer: s,
-					onChange: b
+					onChange: x
 				}),
 				s.type === "linear-gradient" && /* @__PURE__ */ d(a, {
 					layer: s,
-					onChange: b
+					onChange: x
 				}),
 				s.type === "radial-gradient" && /* @__PURE__ */ d(o, {
 					layer: s,
-					onChange: b
+					onChange: x
 				}),
 				s.type === "conic-gradient" && /* @__PURE__ */ d(r, {
 					layer: s,
-					onChange: b
+					onChange: x
 				}),
 				s.type !== "none" && /* @__PURE__ */ d(t, {
 					label: "Clip",
 					children: /* @__PURE__ */ d(e, {
 						type: "select",
 						value: s.clip,
-						onChange: O,
-						children: g.map((e) => /* @__PURE__ */ d("option", {
+						onChange: k,
+						children: _.map((e) => /* @__PURE__ */ d("option", {
 							value: e.value,
 							children: e.label
 						}, e.value))
@@ -168,4 +169,4 @@ var h = {
 	});
 });
 //#endregion
-export { _ as default };
+export { v as default };