@plitzi/sdk-style 0.32.0 → 0.32.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @plitzi/sdk-style
 
+## 0.32.2
+
+### Patch Changes
+
+- v0.32.2
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.32.2
+  - @plitzi/sdk-shared@0.32.2
+  - @plitzi/sdk-variables@0.32.2
+
+## 0.32.1
+
+### Patch Changes
+
+- v0.32.1
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.32.1
+  - @plitzi/sdk-shared@0.32.1
+  - @plitzi/sdk-variables@0.32.1
+
 ## 0.32.0
 
 ### Minor Changes

package/dist/BuilderStyleContextProvider.d.ts

@@ -8,5 +8,5 @@ export type BuilderStyleContextProviderProps = {
     includeSubscriptions?: boolean;
     middlewares?: ReducerMiddlewareCallback<Style, [action: StyleReducerActions]>[];
 };
-declare const BuilderStyleContextProvider: ({ children, style: styleProp, includeSubscriptions, middlewares: middlewaresProp }: BuilderStyleContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const BuilderStyleContextProvider: ({ children, style: styleProp, includeSubscriptions, middlewares: middlewaresProp }: BuilderStyleContextProviderProps) => React.JSX.Element;
 export default BuilderStyleContextProvider;

package/dist/BuilderStyleContextProvider.mjs

@@ -4,7 +4,7 @@ import n, { StyleActions as r } from "./StyleReducer.mjs";
 import { get as i } from "@plitzi/plitzi-ui/helpers";
 import { use as a, useCallback as o, useEffect as s, useMemo as c } from "react";
 import { jsx as l } from "react/jsx-runtime";
-import { createStoreHook as u } from "@plitzi/nexus/createStore";
+import { useCommonStoreSync as u } from "@plitzi/sdk-shared/store";
 import d from "@plitzi/plitzi-ui/hooks/useReducerWithMiddleware";
 import f from "@plitzi/sdk-event-bridge/hooks/useEventBridge";
 import p from "@plitzi/sdk-shared/network/NetworkContext";
@@ -14,13 +14,13 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 	let { subscriptionManager: y } = a(p), b = c(() => v.map((e) => ({
 		middleware: e,
 		filterCallback: (e) => !e.fromSubscriptions
-	})), [v]), [x, S] = d(n, g ?? m, b), { useStoreSync: C } = u();
-	C("style", x);
-	let w = o((e, t = !1) => S({
+	})), [v]), [x, S] = d(n, g ?? m, b);
+	u("style", x);
+	let C = o((e, t = !1) => S({
 		type: r.STYLE_UPDATE,
 		style: e,
 		fromSubscriptions: t
-	}), [S]), T = o((t, n, i, a, o, s, c = !1) => {
+	}), [S]), w = o((t, n, i, a, o, s, c = !1) => {
 		n ||= e(i), S({
 			type: r.STYLE_ADD_SELECTOR,
 			displayMode: t,
@@ -31,7 +31,7 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			params: s,
 			fromSubscriptions: c
 		});
-	}, [S]), E = o((e, t, n, i, a, o = !1) => S({
+	}, [S]), T = o((e, t, n, i, a, o = !1) => S({
 		type: r.STYLE_UPDATE_SELECTOR,
 		displayMode: e,
 		selector: t,
@@ -39,12 +39,12 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		value: i,
 		params: a,
 		fromSubscriptions: o
-	}), [S]), D = o((e, t, n = !1) => S({
+	}), [S]), E = o((e, t, n = !1) => S({
 		type: r.STYLE_REMOVE_SELECTOR,
 		displayMode: e,
 		selector: t,
 		fromSubscriptions: n
-	}), [S]), O = o((e, t, n, i, a, o = !1) => {
+	}), [S]), D = o((e, t, n, i, a, o = !1) => {
 		S({
 			type: r.STYLE_ADD_SELECTOR_VARIABLE,
 			displayMode: e,
@@ -54,7 +54,7 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			value: a,
 			fromSubscriptions: o
 		});
-	}, [S]), k = o((e, t, n, i, a, o = !1) => {
+	}, [S]), O = o((e, t, n, i, a, o = !1) => {
 		S({
 			type: r.STYLE_UPDATE_SELECTOR_VARIABLE,
 			displayMode: e,
@@ -64,7 +64,7 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			value: a,
 			fromSubscriptions: o
 		});
-	}, [S]), A = o((e, t, n, i, a = !1) => {
+	}, [S]), k = o((e, t, n, i, a = !1) => {
 		S({
 			type: r.STYLE_REMOVE_SELECTOR_VARIABLE,
 			displayMode: e,
@@ -73,28 +73,28 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			name: i,
 			fromSubscriptions: a
 		});
-	}, [S]), j = o((e, t, n, i = !1) => S({
+	}, [S]), A = o((e, t, n, i = !1) => S({
 		type: r.STYLE_ADD_VARIABLE,
 		category: e,
 		name: t,
 		value: n,
 		fromSubscriptions: i
-	}), [S]), M = o((e, t, n, i = !1) => S({
+	}), [S]), j = o((e, t, n, i = !1) => S({
 		type: r.STYLE_UPDATE_VARIABLE,
 		category: e,
 		name: t,
 		value: n,
 		fromSubscriptions: i
-	}), [S]), N = o((e, t, n = !1) => S({
+	}), [S]), M = o((e, t, n = !1) => S({
 		type: r.STYLE_REMOVE_VARIABLE,
 		category: e,
 		name: t,
 		fromSubscriptions: n
-	}), [S]), P = o((e, t = !1) => S({
+	}), [S]), N = o((e, t = !1) => S({
 		type: r.STYLE_ADD_TEMPLATE,
 		platform: e,
 		fromSubscriptions: t
-	}), [S]), F = o((e, t, n = !1) => {
+	}), [S]), P = o((e, t, n = !1) => {
 		S({
 			type: r.STYLE_UPDATE_SETTINGS,
 			path: e,
@@ -103,47 +103,49 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		});
 	}, [S]);
 	s(() => (_ && (y.subscribe("StyleUpdated", {}, (e) => {
-		!e.data || e.error || w(i(e, "data.StyleUpdated", {}), !0);
+		if (!e.data || e.error) return;
+		let t = i(e, "data.StyleUpdated", {});
+		C(t, !0);
 	}), y.subscribe("StyleAddSelector", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { displayMode: t, selector: n, type: r, path: a, style: o, params: s } = i(e, "data.StyleAddSelector", {});
-		T(t, n, r, a, o, s, !0);
+		w(t, n, r, a, o, s, !0);
 	}), y.subscribe("StyleUpdateSelector", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { displayMode: t, selector: n, path: r, style: a, params: o } = i(e, "data.StyleUpdateSelector", {});
-		E(t, n, r, a, o, !0);
+		T(t, n, r, a, o, !0);
 	}), y.subscribe("StyleRemoveSelector", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { displayMode: t, selector: n } = i(e, "data.StyleRemoveSelector", {});
-		D(t, n, !0);
+		E(t, n, !0);
 	}), y.subscribe("StyleAddSelectorVariable", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { displayMode: t, selector: n, category: r, name: a, value: o } = i(e, "data.StyleAddSelectorVariable", {});
-		O(t, n, r, a, o, !0);
+		D(t, n, r, a, o, !0);
 	}), y.subscribe("StyleUpdateSelectorVariable", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { displayMode: t, selector: n, category: r, name: a, value: o } = i(e, "data.StyleUpdateSelectorVariable", {});
-		k(t, n, r, a, o, !0);
+		O(t, n, r, a, o, !0);
 	}), y.subscribe("StyleRemoveSelectorVariable", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { displayMode: t, selector: n, category: r, name: a } = i(e, "data.StyleRemoveSelectorVariable", {});
-		A(t, n, r, a, !0);
+		k(t, n, r, a, !0);
 	}), y.subscribe("StyleAddVariable", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { category: t, name: n, value: r } = i(e, "data.StyleAddVariable", {});
-		j(t, n, r, !0);
+		A(t, n, r, !0);
 	}), y.subscribe("StyleUpdateVariable", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { category: t, name: n, value: r } = i(e, "data.StyleUpdateVariable", {});
-		M(t, n, r, !0);
+		j(t, n, r, !0);
 	}), y.subscribe("StyleRemoveVariable", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { category: t, name: n } = i(e, "data.StyleRemoveVariable", {});
-		N(t, n, !0);
+		M(t, n, !0);
 	}), y.subscribe("StyleUpdateSettings", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { path: t, value: n } = i(e, "data.StyleUpdateSettings", {});
-		F(t, n, !0);
+		P(t, n, !0);
 	})), () => {
 		_ && y.unsubscribe([
 			"StyleUpdated",
@@ -161,6 +163,7 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 	}), [
 		y,
 		_,
+		C,
 		w,
 		T,
 		E,
@@ -170,23 +173,23 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		A,
 		j,
 		M,
-		N,
-		F
+		P
 	]);
-	let I = c(() => ({
-		styleUpdate: w,
-		styleAddSelector: T,
-		styleUpdateSelector: E,
-		styleRemoveSelector: D,
-		styleAddSelectorVariable: O,
-		styleUpdateSelectorVariable: k,
-		styleRemoveSelectorVariable: A,
-		styleAddVariable: j,
-		styleUpdateVariable: M,
-		styleRemoveVariable: N,
-		styleAddTemplate: P,
-		styleUpdateSettings: F
+	let F = c(() => ({
+		styleUpdate: C,
+		styleAddSelector: w,
+		styleUpdateSelector: T,
+		styleRemoveSelector: E,
+		styleAddSelectorVariable: D,
+		styleUpdateSelectorVariable: O,
+		styleRemoveSelectorVariable: k,
+		styleAddVariable: A,
+		styleUpdateVariable: j,
+		styleRemoveVariable: M,
+		styleAddTemplate: N,
+		styleUpdateSettings: P
 	}), [
+		C,
 		w,
 		T,
 		E,
@@ -197,11 +200,10 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		j,
 		M,
 		N,
-		P,
-		F
+		P
 	]);
-	return f("main", I), /* @__PURE__ */ l(t, {
-		value: I,
+	return f("main", F), /* @__PURE__ */ l(t, {
+		value: F,
 		children: h
 	});
 };

package/dist/SdkStyleContextProvider.d.ts

@@ -4,5 +4,5 @@ export type SdkStyleContextProviderProps = {
     children: ReactNode;
     style?: Style;
 };
-declare const SdkStyleContextProvider: ({ children, style: styleProp }: SdkStyleContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const SdkStyleContextProvider: ({ children, style: styleProp }: SdkStyleContextProviderProps) => import("react").JSX.Element;
 export default SdkStyleContextProvider;

package/dist/SdkStyleContextProvider.mjs

@@ -1,13 +1,13 @@
 import e from "./StyleContext.mjs";
 import { use as t, useMemo as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
-import { createStoreHook as i } from "@plitzi/nexus/createStore";
+import { useBuilderStoreSync as i } from "@plitzi/sdk-shared/store";
 import { EMPTY_STYLE_SCHEMA as a } from "@plitzi/sdk-shared/style/styleConstants";
 import o from "@plitzi/sdk-shared/network/NetworkInternalContext";
 //#region src/SdkStyleContextProvider.tsx
 var s = ({ children: s, style: c }) => {
-	let { style: l } = t(o), u = n(() => ({}), []), { useStoreSync: d } = i();
-	return d("style", c ?? (l || a)), /* @__PURE__ */ r(e, {
+	let { style: l } = t(o), u = n(() => ({}), []);
+	return i("style", c ?? (l || a)), /* @__PURE__ */ r(e, {
 		value: u,
 		children: s
 	});

package/dist/StyleAdvanceEditor.d.ts

@@ -1,2 +1,2 @@
-declare const StyleAdvanceEditor: () => import("react/jsx-runtime").JSX.Element;
+declare const StyleAdvanceEditor: () => import("react").JSX.Element;
 export default StyleAdvanceEditor;

package/dist/StyleAdvanceEditor.mjs

@@ -3,7 +3,7 @@ import { use as n, useCallback as r, useMemo as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import c from "@plitzi/plitzi-ui/ContainerFloating";
 import l from "@plitzi/plitzi-ui/Button";
-import { createStoreHook as u } from "@plitzi/nexus/createStore";
+import { useCommonStore as u } from "@plitzi/sdk-shared/store";
 import d from "@plitzi/plitzi-ui/CodeMirror";
 import { ThemeContext as f } from "@plitzi/sdk-shared/theme/ThemeProvider";
 import p from "@plitzi/sdk-shared/network/NetworkContext";
@@ -11,46 +11,46 @@ import m from "@plitzi/sdk-shared/hooks/useNetwork";
 import h from "@plitzi/sdk-shared/schema/SchemaContext";
 //#region src/StyleAdvanceEditor.tsx
 var g = () => {
-	let { theme: g } = n(f), { useStore: _ } = u(), [[v = "", y = void 0]] = _(["schema.settings.customCss", "style.variables"]), { schemaUpdateSettings: b } = n(h), [x, S] = a(() => typeof v == "string" ? v : ""), C = i(() => b && e(b, 500), [b]), { server: w, webKey: T } = n(p), { networkQuery: E, networkLoading: D } = m({
+	let { theme: g } = n(f), [[_ = "", v = void 0]] = u(["schema.settings.customCss", "style.variables"]), { schemaUpdateSettings: y } = n(h), [b, x] = a(() => typeof _ == "string" ? _ : ""), S = i(() => y && e(y, 500), [y]), { server: C, webKey: w } = n(p), { networkQuery: T, networkLoading: E } = m({
 		initLoading: !1,
-		server: w,
-		webKey: T
-	}), O = r((e) => {
-		C?.(e, "customCss"), S(e);
-	}, [S, C]), k = r(async () => {
-		let e = await E("/utils/prettier-parser", {
-			data: x,
+		server: C,
+		webKey: w
+	}), D = r((e) => {
+		S?.(e, "customCss"), x(e);
+	}, [x, S]), O = r(async () => {
+		let e = await T("/utils/prettier-parser", {
+			data: b,
 			parser: "css"
 		}, "post");
 		if (!e || !e.data) return;
-		let n = t(e, "data", x);
-		n !== x && (S(n), C?.(n, "customCss"));
+		let n = t(e, "data", b);
+		n !== b && (x(n), S?.(n, "customCss"));
 	}, [
-		E,
-		x,
-		C
+		T,
+		b,
+		S
 	]);
 	return /* @__PURE__ */ s("div", {
 		className: "relative flex h-full w-full flex-col",
 		children: [/* @__PURE__ */ o(d, {
 			className: "h-full",
-			value: x,
-			autoComplete: i(() => y ? Object.keys(y).flatMap((e) => Object.keys(y[e] ?? {})).map((e) => ({
+			value: b,
+			autoComplete: i(() => v ? Object.keys(v).flatMap((e) => Object.keys(v[e] ?? {})).map((e) => ({
 				type: "css-token",
 				value: e
-			})) : [], [y]),
+			})) : [], [v]),
 			theme: g === "dark" ? "dark" : "light",
 			lineWrapping: !0,
-			onChange: O
+			onChange: D
 		}), /* @__PURE__ */ s("div", {
 			className: "absolute top-3 right-3 flex",
 			children: [/* @__PURE__ */ o(l, {
 				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: k,
+				onClick: O,
 				title: "Auto format",
-				disabled: D,
+				disabled: E,
 				children: /* @__PURE__ */ o("i", { className: "fa-solid fa-wand-magic-sparkles" })
 			}), /* @__PURE__ */ s(c, {
 				containerLeftOffset: -208,

package/dist/StyleMap/helpers/isValueValid.mjs

@@ -4,4 +4,4 @@ var e = (e) => typeof e == "string" || typeof e == "number" || e === void 0, t =
 	return !s && !u && !d && !f ? o(c) : !s && !u && d && f ? !1 : !s && !u && d ? i(c) : !s && !u && f ? r(c) : s ? e(c) : u ? c === void 0 ? !0 : e(c) || !t(c) ? !1 : n(c) || a(c) : !1;
 };
 //#endregion
-export { s as default, o as isStyleAttributes, n as isStyleObject };
+export { s as default, o as isStyleAttributes, a as isStyleBlock, n as isStyleObject, r as isStyleStates, i as isStyleVariants };

package/dist/StyleMap/helpers/utils.mjs

@@ -48,4 +48,4 @@ var i = (t, n, r) => {
 	r(c, m, {});
 };
 //#endregion
-export { s as writeStyle };
+export { a as getTargetPath, o as isEmptyObject, i as parseValue, s as writeStyle };

package/dist/components/InputEasing/BezierEasing.mjs

@@ -1,34 +1,34 @@
 //#region src/components/InputEasing/BezierEasing.ts
-var e = 4, t = .001, n = 1e-7, r = 10, i = 11, a = 1 / (i - 1), o = typeof Float32Array == "function", s = (e, t) => 1 - 3 * t + 3 * e, c = (e, t) => 3 * t - 6 * e, l = (e) => 3 * e, u = (e, t, n) => ((s(t, n) * e + c(t, n)) * e + l(t)) * e, d = (e, t, n) => 3 * s(t, n) * e * e + 2 * c(t, n) * e + l(t), f = (e, t, i, a, o) => {
-	let s, c, l = 0;
+var e = 11, t = 1 / (e - 1), n = typeof Float32Array == "function", r = (e, t) => 1 - 3 * t + 3 * e, i = (e, t) => 3 * t - 6 * e, a = (e) => 3 * e, o = (e, t, n) => ((r(t, n) * e + i(t, n)) * e + a(t)) * e, s = (e, t, n) => 3 * r(t, n) * e * e + 2 * i(t, n) * e + a(t), c = (e, t, n, r, i) => {
+	let a, s, c = 0;
 	do
-		c = t + (i - t) / 2, s = u(c, a, o) - e, s > 0 ? i = c : t = c;
-	while (Math.abs(s) > n && ++l < r);
-	return c;
-}, p = (t, n, r, i) => {
-	for (let a = 0; a < e; ++a) {
-		let e = d(n, r, i);
-		if (e === 0) return n;
-		let a = u(n, r, i) - t;
-		n -= a / e;
+		s = t + (n - t) / 2, a = o(s, r, i) - e, a > 0 ? n = s : t = s;
+	while (Math.abs(a) > 1e-7 && ++c < 10);
+	return s;
+}, l = (e, t, n, r) => {
+	for (let i = 0; i < 4; ++i) {
+		let i = s(t, n, r);
+		if (i === 0) return t;
+		let a = o(t, n, r) - e;
+		t -= a / i;
 	}
-	return n;
-}, m = (e) => e;
-function h(e, n, r, s) {
-	if (!(e >= 0 && e <= 1 && r >= 0 && r <= 1)) throw Error("bezier x values must be in [0, 1] range");
-	if (e === n && r === s) return m;
-	let c = o ? new Float32Array(i) : Array(i);
-	for (let t = 0; t < i; ++t) c[t] = u(t * a, e, r);
-	function l(n) {
-		let o = 0, s = 1, l = i - 1;
-		for (; s !== l && c[s] <= n; ++s) o += a;
-		--s;
-		let u = (n - c[s]) / (c[s + 1] - c[s]), m = o + u * a, h = d(m, e, r);
-		return h >= t ? p(n, m, e, r) : h === 0 ? m : f(n, o, o + a, e, r);
+	return t;
+}, u = (e) => e;
+function d(r, i, a, d) {
+	if (!(r >= 0 && r <= 1 && a >= 0 && a <= 1)) throw Error("bezier x values must be in [0, 1] range");
+	if (r === i && a === d) return u;
+	let f = n ? new Float32Array(e) : Array(e);
+	for (let n = 0; n < e; ++n) f[n] = o(n * t, r, a);
+	function p(n) {
+		let i = 0, o = 1, u = e - 1;
+		for (; o !== u && f[o] <= n; ++o) i += t;
+		--o;
+		let d = (n - f[o]) / (f[o + 1] - f[o]), p = i + d * t, m = s(p, r, a);
+		return m >= .001 ? l(n, p, r, a) : m === 0 ? p : c(n, i, i + t, r, a);
 	}
 	return function(e) {
-		return e === 0 || e === 1 ? e : u(l(e), n, s);
+		return e === 0 || e === 1 ? e : o(p(e), i, d);
 	};
 }
 //#endregion
-export { h as default };
+export { d as default };

package/dist/components/InputEasing/Curve.d.ts

@@ -5,5 +5,5 @@ export type CurveProps = {
     yFrom?: number;
     yTo?: number;
 };
-declare const Curve: ({ value, xFrom, xTo, yFrom, yTo }: CurveProps) => import("react/jsx-runtime").JSX.Element;
+declare const Curve: ({ value, xFrom, xTo, yFrom, yTo }: CurveProps) => import("react").JSX.Element;
 export default Curve;

package/dist/components/InputEasing/Grid.d.ts

@@ -4,5 +4,5 @@ export type GridProps = {
     yFrom?: number;
     yTo?: number;
 };
-declare const Grid: ({ xFrom, xTo, yFrom, yTo }: GridProps) => import("react/jsx-runtime").JSX.Element;
+declare const Grid: ({ xFrom, xTo, yFrom, yTo }: GridProps) => import("react").JSX.Element;
 export default Grid;

package/dist/components/InputEasing/Grid.mjs

@@ -5,7 +5,13 @@ var n = ({ xFrom: n = 0, xTo: r = 0, yFrom: i = 0, yTo: a = 0 }) => {
 		let r = [];
 		for (let i = e; i < t; i += n) r.push(i);
 		return r;
-	}, u = (e) => l(0, 1, 1 / e).map(s), d = (e) => l(0, 1, 1 / e).map(c), f = s(0), p = c(0), m = s(1), h = c(1), g = u(2), _ = d(2), v = u(10), y = d(10), b = `M${f},${p} L${f},${h} L${m},${h} L${m},${p} Z`, x = v.map((e) => `M${e},${p} L${e},${h}`).concat(y.map((e) => `M${f},${e} L${m},${e}`)).join(" "), S = g.map((e) => `M${e},${p} L${e},${h}`).concat(_.map((e) => `M${f},${e} L${m},${e}`)).concat([`M${f},${p} L${m},${h}`]).join(" "), C = y.map((e, t) => `M${f},${e} L${f - (3 + (t % 5 == 0 ? 2 : 0))},${e}`).join(" "), w = v.map((e, t) => `M${e},${p} L${e},${p + (3 + (t % 5 == 0 ? 2 : 0))}`).join(" ");
+	}, u = (e) => l(0, 1, 1 / e).map(s), d = (e) => l(0, 1, 1 / e).map(c), f = s(0), p = c(0), m = s(1), h = c(1), g = u(2), _ = d(2), v = u(10), y = d(10), b = `M${f},${p} L${f},${h} L${m},${h} L${m},${p} Z`, x = v.map((e) => `M${e},${p} L${e},${h}`).concat(y.map((e) => `M${f},${e} L${m},${e}`)).join(" "), S = g.map((e) => `M${e},${p} L${e},${h}`).concat(_.map((e) => `M${f},${e} L${m},${e}`)).concat([`M${f},${p} L${m},${h}`]).join(" "), C = y.map((e, t) => {
+		let n = 3 + (t % 5 == 0 ? 2 : 0);
+		return `M${f},${e} L${f - n},${e}`;
+	}).join(" "), w = v.map((e, t) => {
+		let n = 3 + (t % 5 == 0 ? 2 : 0);
+		return `M${e},${p} L${e},${p + n}`;
+	}).join(" ");
 	return /* @__PURE__ */ t("g", { children: [
 		/* @__PURE__ */ e("path", {
 			className: "fill-white",

package/dist/components/InputEasing/InputEasing.d.ts

@@ -26,6 +26,6 @@ declare class InputEasing extends Component {
     handleMouseDown: (handle: "bottom" | "top") => (e: React.MouseEvent) => void;
     handleMouseMove: (e: MouseEvent) => void;
     handleMouseUp: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export default InputEasing;

package/dist/components/InputEasing/InputEasingButton.d.ts

@@ -5,5 +5,5 @@ export type InputEasingButtonProps = {
     className?: string;
     onClick?: () => void;
 };
-declare const InputEasingButton: ({ children, title, className, onClick }: InputEasingButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const InputEasingButton: ({ children, title, className, onClick }: InputEasingButtonProps) => import("react").JSX.Element;
 export default InputEasingButton;

package/dist/components/InputEasing/InputEasingList.d.ts

@@ -2,5 +2,5 @@ export type InputEasingListProps = {
     className?: string;
     onChange?: (easing: string) => void;
 };
-declare const InputEasingList: ({ className, onChange }: InputEasingListProps) => import("react/jsx-runtime").JSX.Element;
+declare const InputEasingList: ({ className, onChange }: InputEasingListProps) => import("react").JSX.Element;
 export default InputEasingList;

package/dist/components/InputEasing/Progress.d.ts

@@ -6,5 +6,5 @@ export type ProgressProps = {
     yTo?: number;
     value: [number, number, number, number];
 };
-declare const Progress: ({ progress, xFrom, xTo, yFrom, yTo, value }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+declare const Progress: ({ progress, xFrom, xTo, yFrom, yTo, value }: ProgressProps) => import("react").JSX.Element;
 export default Progress;

package/dist/components/Selector/Selector.d.ts

@@ -12,5 +12,5 @@ export type SelectorProps = {
     onChange?: (value: string) => void;
     onRemove?: (selector: SelectorValue) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ className, value, selectors, selector: selectorProp, componentType, disabled, onChange, onSelectorSelected, onAdd, onRemove }: SelectorProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ className, value, selectors, selector: selectorProp, componentType, disabled, onChange, onSelectorSelected, onAdd, onRemove }: SelectorProps) => import("react").JSX.Element>;
 export default _default;

package/dist/components/Selector/SelectorItem/ItemOptions.d.ts

@@ -5,5 +5,5 @@ export type ItemOptionsProps = {
     type: TagType;
     onAction?: (action: 'duplicate' | 'remove' | 'delete', data?: SelectorValue) => void;
 };
-declare const ItemOptions: ({ selector, type, onAction }: ItemOptionsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ItemOptions: ({ selector, type, onAction }: ItemOptionsProps) => import("react").JSX.Element;
 export default ItemOptions;

package/dist/components/Selector/SelectorItem/SelectorItem.d.ts

@@ -11,5 +11,5 @@ export type SelectorItemProps = {
     onChange?: (selector: SelectorValue) => void;
     onAction?: (action: 'duplicate' | 'remove' | 'delete', data?: SelectorValue) => void;
 };
-declare const SelectorItem: ({ className, selector, type, editable, active, readOnly, onClick, onChange, onAction }: SelectorItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectorItem: ({ className, selector, type, editable, active, readOnly, onClick, onChange, onAction }: SelectorItemProps) => import("react").JSX.Element;
 export default SelectorItem;

package/dist/components/Selector/SelectorSuggestions/SelectorSuggestions.d.ts

@@ -5,5 +5,5 @@ export type SelectorSuggestionsProps = {
     onCreate?: (tag: SelectorValue) => void;
     selectors?: SelectorValue[];
 };
-declare const SelectorSuggestions: ({ onSelect, onCreate, selector, selectors }: SelectorSuggestionsProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectorSuggestions: ({ onSelect, onCreate, selector, selectors }: SelectorSuggestionsProps) => import("react").JSX.Element;
 export default SelectorSuggestions;

package/dist/components/Selector/SelectorSuggestions/SuggestionsCreator.d.ts

@@ -3,5 +3,5 @@ export type SuggestionsCreatorProps = {
     selector?: string;
     onClick?: (selector: SelectorValue) => void;
 };
-declare const SuggestionsCreator: ({ selector, onClick }: SuggestionsCreatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const SuggestionsCreator: ({ selector, onClick }: SuggestionsCreatorProps) => import("react").JSX.Element;
 export default SuggestionsCreator;

package/dist/components/Selector/SelectorSuggestions/SuggestionsList.d.ts

@@ -3,5 +3,5 @@ export type SuggestionsListProps = {
     selectors?: SelectorValue[];
     onSelect?: (selector: SelectorValue) => void;
 };
-declare const SuggestionsList: ({ selectors, onSelect }: SuggestionsListProps) => import("react/jsx-runtime").JSX.Element;
+declare const SuggestionsList: ({ selectors, onSelect }: SuggestionsListProps) => import("react").JSX.Element;
 export default SuggestionsList;

package/dist/components/StyleInspector/Inspector.d.ts

@@ -11,5 +11,5 @@ export type InspectorProps = {
     displayMode: DisplayMode;
     mode?: 'element' | 'manager';
 };
-declare const Inspector: ({ selectors, componentType, componentSubType, selector, styleState, styleVariant, styleSelector, element, displayMode, mode }: InspectorProps) => import("react/jsx-runtime").JSX.Element;
+declare const Inspector: ({ selectors, componentType, componentSubType, selector, styleState, styleVariant, styleSelector, element, displayMode, mode }: InspectorProps) => import("react").JSX.Element;
 export default Inspector;

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

@@ -17,5 +17,5 @@ export type StyleInspectorProps = {
     onStateChange?: (state: StyleState) => void;
     onRemoveVariant?: (variant: string) => void;
 };
-declare const StyleInspector: ({ displayMode, selectors, value, element, mode, componentType, styleSelectors, styleSelectorsAvailables, componentSubTypesAvailables, allowStyleSelector, allowStyleState, allowStyleVariant, onChange, onRemoveVariant }: StyleInspectorProps) => import("react/jsx-runtime").JSX.Element;
+declare const StyleInspector: ({ displayMode, selectors, value, element, mode, componentType, styleSelectors, styleSelectorsAvailables, componentSubTypesAvailables, allowStyleSelector, allowStyleState, allowStyleVariant, onChange, onRemoveVariant }: StyleInspectorProps) => import("react").JSX.Element;
 export default StyleInspector;