@plitzi/sdk-style 0.32.0 → 0.32.2

package/dist/components/StyleInspector/StyleInspector.mjs

@@ -4,7 +4,7 @@ import { get as n, pick as r, set as i } from "@plitzi/plitzi-ui/helpers";
 import { clsx as a } from "clsx";
 import { use as o, useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { createStoreHook as p } from "@plitzi/nexus/createStore";
+import { useBuilderStoreSync as p } from "@plitzi/sdk-shared/store";
 import { produce as m } from "immer";
 import h from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
 import g from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
@@ -12,106 +12,106 @@ import _ from "@plitzi/plitzi-ui/Select";
 import v from "@plitzi/plitzi-ui/Select2";
 //#region src/components/StyleInspector/StyleInspector.tsx
 var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "element", componentType: w, styleSelectors: T, styleSelectorsAvailables: E, componentSubTypesAvailables: D, allowStyleSelector: O = !0, allowStyleState: k = !0, allowStyleVariant: A = !0, onChange: j, onRemoveVariant: M }) => {
-	let { useStoreSync: N } = p(), [P, F] = u(void 0), [I, L] = u("base"), [R, z] = u(void 0), [B, V] = u(void 0);
-	N("styleSelector", I, { enabled: C === "element" }), N("styleVariant", R, { enabled: C === "element" }), N("styleState", B, { enabled: C === "element" });
-	let { builderHandler: H } = o(h), U = l(() => n(T, I, ""), [T, I]), W = l(() => Object.values(r(b ?? {}, S ? [S.definition.type, ...U.split(" ")] : U.split(" "))), [
+	let [N, P] = u(void 0), [F, I] = u("base"), [L, R] = u(void 0), [z, B] = u(void 0);
+	p("styleSelector", F, { enabled: C === "element" }), p("styleVariant", L, { enabled: C === "element" }), p("styleState", z, { enabled: C === "element" });
+	let { builderHandler: V } = o(h), H = l(() => n(T, F, ""), [T, F]), U = l(() => Object.values(r(b ?? {}, S ? [S.definition.type, ...H.split(" ")] : H.split(" "))), [
 		b,
 		S,
-		U
-	]), G = l(() => x ? n(b, x) : void 0, [b, x]), K = l(() => Object.keys(G?.attributes[I]?.variants ?? {}).map((e) => ({
+		H
+	]), W = l(() => x ? n(b, x) : void 0, [b, x]), G = l(() => Object.keys(W?.attributes[F]?.variants ?? {}).map((e) => ({
 		label: e,
 		value: e
-	})), [G?.attributes, I]);
+	})), [W?.attributes, F]);
 	c(() => {
-		if (L("base"), C !== "element") return;
+		if (I("base"), C !== "element") return;
 		let e = n(T, "base", "").split(" "), t = e[e.length - 1];
-		j?.(t || ""), V(void 0), F(void 0);
+		j?.(t || ""), B(void 0), P(void 0);
 	}, [j, T]), g(() => {
 		if (C === "element") {
 			if (x !== S?.definition.type) {
-				let e = n(T, I, "").split(" ");
+				let e = n(T, F, "").split(" ");
 				j?.(e[e.length - 1]);
 			}
-			V(void 0), z(void 0), F(void 0);
+			B(void 0), R(void 0), P(void 0);
 		}
-	}, [I]), g(() => {
-		V(void 0), z(void 0), F(void 0);
+	}, [F]), g(() => {
+		B(void 0), R(void 0), P(void 0);
 	}, [x]);
-	let q = s((e, t, r) => {
+	let K = s((e, t, r) => {
 		if (t && !r) return;
 		let { name: i, type: a } = e;
-		!t && i !== "" && !b?.[i] ? H("styleAddSelector", y, i, a, void 0, void 0, {
-			styleSelector: I,
+		!t && i !== "" && !b?.[i] ? V("styleAddSelector", y, i, a, void 0, void 0, {
+			styleSelector: F,
 			componentType: a === "element" ? w : void 0
-		}) : t && r && r.name !== i && b?.[r.name] && !b[i] && H("styleAddSelector", y, i, a, void 0, n(b, `${r.name}.attributes`, {}), {
-			styleSelector: I,
+		}) : t && r && r.name !== i && b?.[r.name] && !b[i] && V("styleAddSelector", y, i, a, void 0, n(b, `${r.name}.attributes`, {}), {
+			styleSelector: F,
 			componentType: a === "element" ? w : void 0
 		});
 	}, [
-		H,
+		V,
 		w,
 		y,
 		b,
-		I
-	]), J = s((e) => {
+		F
+	]), q = s((e) => {
 		if (!e || x && x === e.name) {
 			j?.(void 0);
 			return;
 		}
 		j?.(e.name);
-	}, [j, x]), Y = s((e) => {
-		S && H("schemaUpdateElement", m(S, (t) => {
-			i(t, `definition.styleSelectors.${I}`, e);
+	}, [j, x]), J = s((e) => {
+		S && V("schemaUpdateElement", m(S, (t) => {
+			i(t, `definition.styleSelectors.${F}`, e);
 		}));
 	}, [
 		S,
-		H,
-		I
-	]), X = s((e) => {
-		H("styleRemoveSelector", y, e.name);
-	}, [H, y]), Z = s((e) => F(e), []), Q = s((e) => {
-		L(e);
-	}, []), $ = s((e) => V(e?.value), []), ee = s((e) => {
-		z(e?.value);
-	}, []), te = s((e) => {
-		M?.(e.value), B && V(void 0), e.value === R && z(void 0), H("styleUpdateSelector", y, G?.name, void 0, void 0, {
-			styleSelector: I,
+		V,
+		F
+	]), Y = s((e) => {
+		V("styleRemoveSelector", y, e.name);
+	}, [V, y]), X = s((e) => P(e), []), Z = s((e) => {
+		I(e);
+	}, []), Q = s((e) => B(e?.value), []), $ = s((e) => {
+		R(e?.value);
+	}, []), ee = s((e) => {
+		M?.(e.value), z && B(void 0), e.value === L && R(void 0), V("styleUpdateSelector", y, W?.name, void 0, void 0, {
+			styleSelector: F,
 			styleVariant: e.value,
-			styleState: B,
-			componentType: G?.componentType
+			styleState: z,
+			componentType: W?.componentType
 		});
 	}, [
-		H,
+		V,
 		y,
 		M,
-		G?.componentType,
-		G?.name,
-		I,
-		B,
-		R
-	]), ne = O && (A || k || !!E?.length || !!D?.length);
+		W?.componentType,
+		W?.name,
+		F,
+		z,
+		L
+	]), te = O && (A || k || !!E?.length || !!D?.length);
 	return /* @__PURE__ */ f("div", {
 		className: "flex w-full grow flex-col gap-2",
 		children: [/* @__PURE__ */ f("div", {
 			className: "flex w-full flex-col gap-2 px-1",
 			children: [C === "element" && /* @__PURE__ */ d(t, {
 				className: "min-h-0 w-full",
-				value: U,
+				value: H,
 				selectors: b,
-				selector: G,
+				selector: W,
 				componentType: w,
-				onAdd: q,
-				onChange: Y,
-				onRemove: X,
-				onSelectorSelected: J
-			}), ne && /* @__PURE__ */ f("div", {
+				onAdd: K,
+				onChange: J,
+				onRemove: Y,
+				onSelectorSelected: q
+			}), te && /* @__PURE__ */ f("div", {
 				className: a("flex w-full items-center gap-2", { "mt-2": C === "manager" }),
 				children: [
 					!!D?.length && /* @__PURE__ */ d(_, {
 						className: "grow basis-0",
 						size: "xs",
-						value: P,
-						onChange: Z,
+						value: N,
+						onChange: X,
 						children: D.map((e) => /* @__PURE__ */ d("option", {
 							value: e,
 							children: e
@@ -120,8 +120,8 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 					E && E.length > 1 && /* @__PURE__ */ d(_, {
 						className: "grow basis-0",
 						size: "xs",
-						onChange: Q,
-						value: I,
+						onChange: Z,
+						value: F,
 						children: E.map((e) => /* @__PURE__ */ d("option", {
 							value: e,
 							children: e
@@ -131,22 +131,22 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 						className: "grow basis-0",
 						children: /* @__PURE__ */ d(v, {
 							className: "grow basis-0",
-							value: R,
-							options: K,
+							value: L,
+							options: G,
 							placeholder: "Variant",
 							size: "xs",
 							allowCreateOptions: !0,
 							allowRemoveOptions: !0,
 							clearable: !0,
-							onChange: ee,
-							onRemove: te
+							onChange: $,
+							onRemove: ee
 						})
 					}),
 					k && /* @__PURE__ */ d("div", {
 						className: "grow basis-0",
 						children: /* @__PURE__ */ d(v, {
 							className: "grow basis-0",
-							value: B,
+							value: z,
 							options: [
 								{
 									label: "Hover",
@@ -176,7 +176,7 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 							placeholder: "State",
 							size: "xs",
 							clearable: !0,
-							onChange: $
+							onChange: Q
 						})
 					})
 				]
@@ -184,12 +184,12 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 		}), /* @__PURE__ */ d("div", {
 			className: "flex grow basis-0 flex-col overflow-auto border-t border-gray-300 dark:border-zinc-700",
 			children: /* @__PURE__ */ d(e, {
-				selectors: W,
+				selectors: U,
 				componentType: w,
-				selector: G,
-				styleSelector: I,
-				styleState: B,
-				styleVariant: R,
+				selector: W,
+				styleSelector: F,
+				styleState: z,
+				styleVariant: L,
 				element: S,
 				displayMode: y,
 				mode: C

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

@@ -13,5 +13,5 @@ export type StyleInspectorProviderProps = {
     displayMode: DisplayMode;
     onChange?: (path?: StyleCategory, values?: StyleObject | StyleValue) => void;
 };
-declare const StyleInspectorProvider: ({ children, componentType, selector, styleSelector, styleState, styleVariant, element, inheritData, displayMode, onChange }: StyleInspectorProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const StyleInspectorProvider: ({ children, componentType, selector, styleSelector, styleState, styleVariant, element, inheritData, displayMode, onChange }: StyleInspectorProviderProps) => import("react").JSX.Element;
 export default StyleInspectorProvider;

package/dist/components/StyleInspector/StyleInspectorProvider.mjs

@@ -4,11 +4,11 @@ import { get as n, omit as r } from "@plitzi/plitzi-ui/helpers";
 import { useCallback as i, useMemo as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
 import { emptyObject as s } from "@plitzi/sdk-shared/helpers/utils";
-import { createStoreHook as c } from "@plitzi/nexus/createStore";
+import { useCommonStore as c } from "@plitzi/sdk-shared/store";
 import { baseDefaultValue as l } from "@plitzi/sdk-shared";
 //#region src/components/StyleInspector/StyleInspectorProvider.tsx
 var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base", styleState: m, styleVariant: h, element: g, inheritData: _, displayMode: v, onChange: y }) => {
-	let b = t({ element: g }), { useStore: x } = c(), [S = s] = x("runtime.sources.variables"), C = i(() => {
+	let b = t({ element: g }), [x = s] = c("runtime.sources.variables"), S = i(() => {
 		let e;
 		if (f && p && f.attributes[p]) {
 			let t = f.attributes[p];
@@ -20,11 +20,11 @@ var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base"
 		p,
 		m,
 		h
-	]), w = i((e, t) => {
+	]), C = i((e, t) => {
 		if (!(e && typeof t != "string" && typeof t != "number" && t !== void 0 || !e && typeof t != "object" && t !== void 0 || e && n(b, e))) {
 			if (!e && t && typeof t == "object" && (t = r(t, Object.keys(b))), !e && f && typeof t == "object") {
 				let e = {
-					...C(),
+					...S(),
 					...t
 				};
 				Object.keys(e).forEach((t) => {
@@ -35,18 +35,21 @@ var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base"
 		}
 	}, [
 		b,
-		C,
+		S,
 		y,
 		f
-	]), T = i((e) => Array.isArray(e) ? e.reduce((e, t) => ({
+	]), w = i((e) => Array.isArray(e) ? e.reduce((e, t) => ({
 		...e,
 		[t]: n(l, t)
-	}), {}) : e ? n(l, e) : l, []), E = i((e) => {
-		Array.isArray(e) ? w(void 0, e.reduce((e, t) => ({
-			...e,
-			[t]: void 0
-		}), {})) : w(e);
-	}, [w]);
+	}), {}) : e ? n(l, e) : l, []), T = i((e) => {
+		if (Array.isArray(e)) {
+			let t = e.reduce((e, t) => ({
+				...e,
+				[t]: void 0
+			}), {});
+			C(void 0, t);
+		} else C(e);
+	}, [C]);
 	return /* @__PURE__ */ o(e, {
 		value: a(() => ({
 			componentType: d,
@@ -55,13 +58,13 @@ var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base"
 			styleState: m,
 			styleVariant: h,
 			displayMode: v,
-			variables: S,
+			variables: x,
 			inheritData: _.style,
 			bindingData: b,
-			getValues: C,
-			setValue: w,
-			resetValue: E,
-			getDefaultValue: T
+			getValues: S,
+			setValue: C,
+			resetValue: T,
+			getDefaultValue: w
 		}), [
 			d,
 			f,
@@ -69,13 +72,13 @@ var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base"
 			m,
 			h,
 			v,
-			S,
+			x,
 			_.style,
 			b,
+			S,
 			C,
-			w,
-			E,
-			T
+			T,
+			w
 		]),
 		children: u
 	});

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

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

package/dist/components/StyleInspector/categories/Background/components/BackgroundLayer/BackgroundLayer.d.ts

@@ -8,5 +8,5 @@ export type BackgroundLayerProps = {
     onRemove: () => void;
     onReorder: (fromIndex: number, toIndex: number) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ layer, index, expanded, onExpand, onChange, onRemove, onReorder }: BackgroundLayerProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ layer, index, expanded, onExpand, onChange, onRemove, onReorder }: BackgroundLayerProps) => import("react").JSX.Element>;
 export default _default;

package/dist/components/StyleInspector/categories/Background/components/BackgroundPosition/BackgroundPosition.d.ts

@@ -3,5 +3,5 @@ export type BackgroundPositionProps = {
     layer: BackgroundLayer;
     onChange?: (layer: BackgroundLayer) => void;
 };
-declare const BackgroundPosition: ({ layer, onChange }: BackgroundPositionProps) => import("react/jsx-runtime").JSX.Element;
+declare const BackgroundPosition: ({ layer, onChange }: BackgroundPositionProps) => import("react").JSX.Element;
 export default BackgroundPosition;

package/dist/components/StyleInspector/categories/Background/components/BackgroundSize/BackgroundSize.d.ts

@@ -3,5 +3,5 @@ export type BackgroundSizeProps = {
     layer: BackgroundLayer;
     onChange?: (layer: BackgroundLayer) => void;
 };
-declare const BackgroundSize: ({ layer, onChange }: BackgroundSizeProps) => import("react/jsx-runtime").JSX.Element;
+declare const BackgroundSize: ({ layer, onChange }: BackgroundSizeProps) => import("react").JSX.Element;
 export default BackgroundSize;

package/dist/components/StyleInspector/categories/Background/components/BackgroundTile/BackgroundTile.d.ts

@@ -3,5 +3,5 @@ export type BackgroundTileProps = {
     layer: BackgroundLayer;
     onChange?: (layer: BackgroundLayer) => void;
 };
-declare const BackgroundTile: ({ layer, onChange }: BackgroundTileProps) => import("react/jsx-runtime").JSX.Element;
+declare const BackgroundTile: ({ layer, onChange }: BackgroundTileProps) => import("react").JSX.Element;
 export default BackgroundTile;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientPreviewBar.d.ts

@@ -3,5 +3,5 @@ type GradientPreviewBarProps = {
     gradientCSS: string;
     onClick: (e: MouseEvent<HTMLDivElement>) => void;
 };
-declare const GradientPreviewBar: ({ gradientCSS, onClick }: GradientPreviewBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const GradientPreviewBar: ({ gradientCSS, onClick }: GradientPreviewBarProps) => import("react").JSX.Element;
 export default GradientPreviewBar;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopBar.d.ts

@@ -3,5 +3,5 @@ export type GradientStopBarProps = {
     stops: GradientStop[];
     onChange?: (stops: GradientStop[]) => void;
 };
-declare const GradientStopBar: ({ stops, onChange }: GradientStopBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const GradientStopBar: ({ stops, onChange }: GradientStopBarProps) => import("react").JSX.Element;
 export default GradientStopBar;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopEditor.d.ts

@@ -6,5 +6,5 @@ type GradientStopEditorProps = {
     onPositionChange: (value: unknown) => void;
     onRemove: () => void;
 };
-declare const GradientStopEditor: ({ stop, showRemove, onColorChange, onPositionChange, onRemove }: GradientStopEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const GradientStopEditor: ({ stop, showRemove, onColorChange, onPositionChange, onRemove }: GradientStopEditorProps) => import("react").JSX.Element;
 export default GradientStopEditor;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopHandle.d.ts

@@ -7,5 +7,5 @@ type GradientStopHandleProps = {
     onPositionChange: (stopId: string, pct: number) => void;
     onSelect: (stopId: string) => void;
 };
-declare const GradientStopHandle: ({ stop, selected, trackRef, onPositionChange, onSelect }: GradientStopHandleProps) => import("react/jsx-runtime").JSX.Element;
+declare const GradientStopHandle: ({ stop, selected, trackRef, onPositionChange, onSelect }: GradientStopHandleProps) => import("react").JSX.Element;
 export default GradientStopHandle;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopTrack.d.ts

@@ -5,5 +5,5 @@ type GradientStopTrackProps = {
     onChange?: (stops: GradientStop[]) => void;
     onSelect: (id: string) => void;
 };
-declare const GradientStopTrack: ({ stops, selectedId, onChange, onSelect }: GradientStopTrackProps) => import("react/jsx-runtime").JSX.Element;
+declare const GradientStopTrack: ({ stops, selectedId, onChange, onSelect }: GradientStopTrackProps) => import("react").JSX.Element;
 export default GradientStopTrack;

package/dist/components/StyleInspector/categories/Background/helpers/backgroundParser.mjs

@@ -179,4 +179,4 @@ function h(e) {
 	};
 }
 //#endregion
-export { t as DEFAULT_LAYER_PROPS, e as DEFAULT_STOPS, r as newLayerId, i as newStopId, f as parseBackgroundLayers, m as serializeLayerImage, h as serializeLayersToCSS };
+export { t as DEFAULT_LAYER_PROPS, e as DEFAULT_STOPS, r as newLayerId, i as newStopId, f as parseBackgroundLayers, m as serializeLayerImage, h as serializeLayersToCSS, p as serializeStop, a as splitTopLevelCommas };

package/dist/components/StyleInspector/categories/Background/modes/ConicGradientMode.d.ts

@@ -3,5 +3,5 @@ export type ConicGradientModeProps = {
     layer: BackgroundLayer;
     onChange?: (layer: BackgroundLayer) => void;
 };
-declare const ConicGradientMode: ({ layer, onChange }: ConicGradientModeProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConicGradientMode: ({ layer, onChange }: ConicGradientModeProps) => import("react").JSX.Element;
 export default ConicGradientMode;

package/dist/components/StyleInspector/categories/Background/modes/ImageMode.d.ts

@@ -3,5 +3,5 @@ export type ImageModeProps = {
     layer: BackgroundLayer;
     onChange?: (layer: BackgroundLayer) => void;
 };
-declare const ImageMode: ({ layer, onChange }: ImageModeProps) => import("react/jsx-runtime").JSX.Element;
+declare const ImageMode: ({ layer, onChange }: ImageModeProps) => import("react").JSX.Element;
 export default ImageMode;

package/dist/components/StyleInspector/categories/Background/modes/LinearGradientMode.d.ts

@@ -3,5 +3,5 @@ export type LinearGradientModeProps = {
     layer: BackgroundLayer;
     onChange?: (layer: BackgroundLayer) => void;
 };
-declare const LinearGradientMode: ({ layer, onChange }: LinearGradientModeProps) => import("react/jsx-runtime").JSX.Element;
+declare const LinearGradientMode: ({ layer, onChange }: LinearGradientModeProps) => import("react").JSX.Element;
 export default LinearGradientMode;

package/dist/components/StyleInspector/categories/Background/modes/RadialGradientMode.d.ts

@@ -3,5 +3,5 @@ export type RadialGradientModeProps = {
     layer: BackgroundLayer;
     onChange?: (layer: BackgroundLayer) => void;
 };
-declare const RadialGradientMode: ({ layer, onChange }: RadialGradientModeProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadialGradientMode: ({ layer, onChange }: RadialGradientModeProps) => import("react").JSX.Element;
 export default RadialGradientMode;

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

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

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

@@ -4,5 +4,5 @@ export type BorderColorProps = {
     currentPlacement: string;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const BorderColor: ({ values, currentPlacement, onChange }: BorderColorProps) => import("react/jsx-runtime").JSX.Element;
+declare const BorderColor: ({ values, currentPlacement, onChange }: BorderColorProps) => import("react").JSX.Element;
 export default BorderColor;

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

@@ -3,5 +3,5 @@ export type BorderPlacementsProps = {
     currentPlacement: Placement;
     setCurrentPlacement: (value: Placement) => void;
 };
-declare const BorderPlacements: ({ currentPlacement, setCurrentPlacement }: BorderPlacementsProps) => import("react/jsx-runtime").JSX.Element;
+declare const BorderPlacements: ({ currentPlacement, setCurrentPlacement }: BorderPlacementsProps) => import("react").JSX.Element;
 export default BorderPlacements;

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

@@ -4,5 +4,5 @@ export type BorderRadiusProps = {
     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;
+declare const BorderRadius: ({ values, onChange, onChangeSegment }: BorderRadiusProps) => import("react").JSX.Element;
 export default BorderRadius;

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

@@ -4,5 +4,5 @@ export type BorderStyleProps = {
     currentPlacement: string;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const BorderStyle: ({ values, currentPlacement, onChange }: BorderStyleProps) => import("react/jsx-runtime").JSX.Element;
+declare const BorderStyle: ({ values, currentPlacement, onChange }: BorderStyleProps) => import("react").JSX.Element;
 export default BorderStyle;

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

@@ -4,5 +4,5 @@ export type BorderWidthProps = {
     currentPlacement: string;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const BorderWidth: ({ values, currentPlacement, onChange }: BorderWidthProps) => import("react/jsx-runtime").JSX.Element;
+declare const BorderWidth: ({ values, currentPlacement, onChange }: BorderWidthProps) => import("react").JSX.Element;
 export default BorderWidth;

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

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

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

@@ -3,5 +3,5 @@ export type DisplayElementsProps = {
     value?: StyleValue;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayElements: ({ value, onChange }: DisplayElementsProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayElements: ({ value, onChange }: DisplayElementsProps) => import("react").JSX.Element;
 export default DisplayElements;

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

@@ -4,5 +4,5 @@ export type DisplayFlexProps = {
     isReverse: boolean;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayFlex: ({ value, isReverse, onChange }: DisplayFlexProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayFlex: ({ value, isReverse, onChange }: DisplayFlexProps) => import("react").JSX.Element;
 export default DisplayFlex;

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

@@ -5,5 +5,5 @@ export type DisplayFlexAlignContentProps = {
     isRow?: boolean;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayFlexAlignContent: ({ value, isReverse, isRow, onChange }: DisplayFlexAlignContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayFlexAlignContent: ({ value, isReverse, isRow, onChange }: DisplayFlexAlignContentProps) => import("react").JSX.Element;
 export default DisplayFlexAlignContent;

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

@@ -5,5 +5,5 @@ export type DisplayFlexAlignItemsProps = {
     isRow: boolean;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayFlexAlignItems: ({ value, isReverse, isRow, onChange }: DisplayFlexAlignItemsProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayFlexAlignItems: ({ value, isReverse, isRow, onChange }: DisplayFlexAlignItemsProps) => import("react").JSX.Element;
 export default DisplayFlexAlignItems;

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

@@ -4,5 +4,5 @@ export type DisplayFlexDirectionProps = {
     isReverse: boolean;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayFlexDirection: ({ value, isReverse, onChange }: DisplayFlexDirectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayFlexDirection: ({ value, isReverse, onChange }: DisplayFlexDirectionProps) => import("react").JSX.Element;
 export default DisplayFlexDirection;

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

@@ -5,5 +5,5 @@ export type DisplayFlexJustifyProps = {
     isRow: boolean;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayFlexJustify: ({ value, isReverse, isRow, onChange }: DisplayFlexJustifyProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayFlexJustify: ({ value, isReverse, isRow, onChange }: DisplayFlexJustifyProps) => import("react").JSX.Element;
 export default DisplayFlexJustify;

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

@@ -4,5 +4,5 @@ export type DisplayGapProps = {
     columnGap?: StyleValue;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayGap: ({ rowGap, columnGap, onChange }: DisplayGapProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayGap: ({ rowGap, columnGap, onChange }: DisplayGapProps) => import("react").JSX.Element;
 export default DisplayGap;

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

@@ -4,5 +4,5 @@ export type DisplayGridGapProps = {
     columnGap?: StyleValue;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayGridGap: ({ rowGap, columnGap, onChange }: DisplayGridGapProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayGridGap: ({ rowGap, columnGap, onChange }: DisplayGridGapProps) => import("react").JSX.Element;
 export default DisplayGridGap;

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

@@ -8,5 +8,5 @@ export type DisplayGridTemplateProps = {
     templateAutoColumns?: StyleValue;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayGridTemplate: ({ templateAreas, templateColumns, templateRows, templateAutoFlow, templateAutoRows, templateAutoColumns, onChange }: DisplayGridTemplateProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayGridTemplate: ({ templateAreas, templateColumns, templateRows, templateAutoFlow, templateAutoRows, templateAutoColumns, onChange }: DisplayGridTemplateProps) => import("react").JSX.Element;
 export default DisplayGridTemplate;

package/dist/components/StyleInspector/categories/DisplayFlexChild/DisplayAlignSelf.d.ts

@@ -4,5 +4,5 @@ export type DisplayAlignSelfProps = {
     isFlexVertical?: boolean;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayAlignSelf: ({ value, isFlexVertical, onChange }: DisplayAlignSelfProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayAlignSelf: ({ value, isFlexVertical, onChange }: DisplayAlignSelfProps) => import("react").JSX.Element;
 export default DisplayAlignSelf;

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

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

package/dist/components/StyleInspector/categories/DisplayFlexChild/DisplayOrder.d.ts

@@ -3,5 +3,5 @@ export type DisplayOrderProps = {
     value?: StyleValue;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const DisplayOrder: ({ value, onChange }: DisplayOrderProps) => import("react/jsx-runtime").JSX.Element;
+declare const DisplayOrder: ({ value, onChange }: DisplayOrderProps) => import("react").JSX.Element;
 export default DisplayOrder;

package/dist/components/StyleInspector/categories/Effects/BoxShadow/BoxShadow.d.ts

@@ -3,5 +3,5 @@ export type BoxShadowProps = {
     value?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const BoxShadow: ({ value, onChange }: BoxShadowProps) => import("react/jsx-runtime").JSX.Element;
+declare const BoxShadow: ({ value, onChange }: BoxShadowProps) => import("react").JSX.Element;
 export default BoxShadow;