@plitzi/sdk-elements 0.32.0 → 0.32.2

package/dist/elements/form/Form/Form.mjs

@@ -1,36 +1,36 @@
-import e from "../../../Element/RootElement.mjs";
-import t from "../../../Element/hocs/withElement.mjs";
-import { use as n, useCallback as r, useMemo as i, useState as a } from "react";
-import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { get as s, omit as c } from "@plitzi/plitzi-ui/helpers";
-import { emptyObject as l } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as u } from "react/jsx-runtime";
-import d from "clsx";
-import f from "@plitzi/sdk-shared/elements/hooks/useElement";
-import { produce as p } from "immer";
-import m from "@plitzi/nexus/StoreProvider";
+import e from "../../../Element/hooks/useElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import n from "../../../Element/hocs/withElement.mjs";
+import { use as r, useCallback as i, useMemo as a, useState as o } from "react";
+import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as c, omit as l } from "@plitzi/plitzi-ui/helpers";
+import { StoreProvider as u } from "@plitzi/nexus/react";
+import { emptyObject as d } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as f } from "react/jsx-runtime";
+import p from "clsx";
+import { produce as m } from "immer";
 import h from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/form/Form/Form.tsx
-var g = ({ ref: t, className: g = "", children: _, method: v = "get", actionUrl: y = "", managedByInteractions: b = !1, errors: x = l, values: S = l }) => {
-	let [C, w] = a({}), { id: T, definition: { label: E = "Form" }, setElementState: D } = f(), { settings: { previewMode: O }, contexts: { InteractionsContext: k } } = o(), { interactionsManager: A } = n(k), j = r((e) => w((t) => ({
+var g = ({ ref: n, className: g = "", children: _, method: v = "get", actionUrl: y = "", managedByInteractions: b = !1, errors: x = d, values: S = d }) => {
+	let [C, w] = o({}), { id: T, definition: { label: E = "Form" }, setElementState: D } = e(), { settings: { previewMode: O }, contexts: { InteractionsContext: k } } = s(), { interactionsManager: A } = r(k), j = i((e) => w((t) => ({
 		...t,
 		[e.name]: e
-	})), [w]), M = r((e) => !e || !C[e] ? C : s(C, e), [C]), N = r((e) => {
-		w((t) => p(t, (t) => {
+	})), [w]), M = i((e) => {
+		w((t) => m(t, (t) => {
 			t[e] && delete t[e];
 		})), e && D((t) => ({
 			...t,
-			values: c(t, `values.${e}`),
-			errors: c(t, `errors.${e}`)
+			values: l(t, `values.${e}`),
+			errors: l(t, `errors.${e}`)
 		}));
-	}, [D]), P = r((e, t = "") => {
+	}, [D]), N = i((e, t = "") => {
 		e && (t === null && (t = ""), D((n) => n.errors && n.errors[e] ? {
 			...n,
 			values: {
 				...n.values,
 				[e]: t
 			},
-			errors: c(n.errors, [e])
+			errors: l(n.errors, [e])
 		} : {
 			...n,
 			values: {
@@ -38,10 +38,10 @@ var g = ({ ref: t, className: g = "", children: _, method: v = "get", actionUrl:
 				[e]: t
 			}
 		}));
-	}, [D]), F = r((e, t) => {
-		e && D((n) => !t && !s(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
+	}, [D]), P = i((e, t) => {
+		e && D((n) => !t && !c(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
 			...n,
-			errors: c(n, [`errors.${e}`])
+			errors: l(n, [`errors.${e}`])
 		} : {
 			...n,
 			errors: {
@@ -49,7 +49,7 @@ var g = ({ ref: t, className: g = "", children: _, method: v = "get", actionUrl:
 				[e]: t
 			}
 		});
-	}, [D]), I = r(() => Object.values(C).filter((e) => !!e.name).reduce((e, t) => [
+	}, [D]), F = i(() => Object.values(C).filter((e) => !!e.name).reduce((e, t) => [
 		...e,
 		{
 			path: `fields.${t.name}.id`,
@@ -63,32 +63,28 @@ var g = ({ ref: t, className: g = "", children: _, method: v = "get", actionUrl:
 			path: `errors.${t.name}`,
 			name: `${t.name} Error Message`
 		}
-	], []), [C]), L = i(() => ({
-		fields: C,
+	], []), [C]), I = a(() => ({ runtime: { sources: { form: {
 		errors: x,
 		values: S,
 		registerField: j,
-		unregisterField: N,
-		getField: M,
-		setFieldValue: P,
-		setFieldError: F
-	}), [
-		C,
+		unregisterField: M,
+		setFieldValue: N,
+		setFieldError: P
+	} } } }), [
 		x,
 		S,
 		j,
-		N,
 		M,
-		P,
-		F
+		N,
+		P
 	]);
 	h({
 		id: T,
 		source: "form",
 		name: E || `Form - ${T}`,
-		fields: I
+		fields: F
 	});
-	let R = i(() => ({ onSubmit: {
+	let L = a(() => ({ onSubmit: {
 		action: "onSubmit",
 		title: "On Form Submit",
 		type: "trigger",
@@ -101,7 +97,7 @@ var g = ({ ref: t, className: g = "", children: _, method: v = "get", actionUrl:
 			actionUrl: "",
 			method: ""
 		}
-	} }), [C]), z = r((e) => {
+	} }), [C]), R = i((e) => {
 		if (D((e) => ({
 			...e,
 			errors: {}
@@ -125,31 +121,31 @@ var g = ({ ref: t, className: g = "", children: _, method: v = "get", actionUrl:
 		y,
 		v,
 		S
-	]), B = r((e) => {
+	]), z = i((e) => {
 		b && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), D((e) => ({
 			...e,
 			values: {},
 			errors: {}
 		})));
-	}, [D, b]), V = r((e) => {
+	}, [D, b]), B = i((e) => {
 		let { name: t, value: n } = e;
-		P(t, n);
-	}, [P]), H = r((e) => {
+		N(t, n);
+	}, [N]), V = i((e) => {
 		let { name: t, error: n } = e;
-		F(t, n);
-	}, [F]), U = i(() => ({
+		P(t, n);
+	}, [P]), H = a(() => ({
 		performReset: {
 			action: "performReset",
 			title: `Reset ${E}`,
 			type: "callback",
-			callback: B,
+			callback: z,
 			params: {}
 		},
 		setFieldValue: {
 			action: "setFieldValue",
 			title: `Set Field Value ${E}`,
 			type: "callback",
-			callback: V,
+			callback: B,
 			preview: {},
 			params: {
 				name: {
@@ -171,7 +167,7 @@ var g = ({ ref: t, className: g = "", children: _, method: v = "get", actionUrl:
 			action: "setFieldError",
 			title: `Set Field Error ${E}`,
 			type: "callback",
-			callback: H,
+			callback: V,
 			preview: {},
 			params: {
 				name: {
@@ -191,27 +187,27 @@ var g = ({ ref: t, className: g = "", children: _, method: v = "get", actionUrl:
 		}
 	}), [
 		E,
+		z,
 		B,
-		V,
 		C,
-		H
+		V
 	]);
-	return /* @__PURE__ */ u(e, {
+	return /* @__PURE__ */ f(t, {
 		tag: "form",
-		ref: t,
+		ref: n,
 		method: v,
-		className: d("plitzi-component__form", g),
-		interactionTriggers: R,
-		interactionCallbacks: U,
-		onSubmit: z,
-		onReset: B,
+		className: p("plitzi-component__form", g),
+		interactionTriggers: L,
+		interactionCallbacks: H,
+		onSubmit: R,
+		onReset: z,
 		action: y,
-		children: /* @__PURE__ */ u(m, {
+		children: /* @__PURE__ */ f(u, {
 			inherit: "live",
-			value: { runtime: { sources: { form: L } } },
+			value: I,
 			children: _
 		})
 	});
-}, _ = t(g);
+}, _ = n(g);
 //#endregion
 export { g as Form, _ as default };

package/dist/elements/form/Form/Settings.d.ts

@@ -4,5 +4,5 @@ type SettingsProps = {
     actionUrl?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ method, managedByInteractions, actionUrl, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Settings: ({ method, managedByInteractions, actionUrl, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

package/dist/elements/form/Form/index.d.ts

@@ -1,5 +1,5 @@
 declare const Form: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Form').FormProps>): import("react/jsx-runtime").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Form').FormProps>): import("react").JSX.Element;
     displayName: string;
 } & {
     type: string;
@@ -40,7 +40,7 @@ declare const Form: {
             license: string;
             website: string;
             backgroundColor: string;
-            icon: import("react/jsx-runtime").JSX.Element;
+            icon: import("react").JSX.Element;
         };
         defaultStyle: {
             name: string;

package/dist/elements/form/FormControl/FormControl.d.ts

@@ -19,9 +19,9 @@ export type FormControlProps = {
     handleChange: (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLTextAreaElement>) => void;
     handleValidate: () => void;
 };
-declare const FormControl: ({ ref, className, subType, name, label, placeholder, autoComplete, disabled, options, required, readOnly, value, error, handleChange, handleValidate }: FormControlProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const FormControl: ({ ref, className, subType, name, label, placeholder, autoComplete, disabled, options, required, readOnly, value, error, handleChange, handleValidate }: FormControlProps) => import("react").JSX.Element | null;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./hocs/withFieldValue').WithFieldValueProps<FormControlProps>>): import("react/jsx-runtime").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./hocs/withFieldValue').WithFieldValueProps<FormControlProps>>): import("react").JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/form/FormControl/FormControl.mjs

@@ -1,28 +1,29 @@
-import e from "../../../Element/RootElement.mjs";
-import t from "./components/Label.mjs";
-import n from "./hocs/withFieldValue.mjs";
-import r from "./inputs/Checkbox.mjs";
-import i from "./inputs/Hidden.mjs";
-import a from "./inputs/Input.mjs";
-import o from "./inputs/Select.mjs";
-import s from "./inputs/Textarea.mjs";
-import c from "../../../Element/hocs/withElement.mjs";
-import { useEffect as l } from "react";
-import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { createStoreHook as d } from "@plitzi/nexus/createStore";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import m from "clsx";
-import h from "@plitzi/sdk-shared/elements/hooks/useElement";
-var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", label: v = "Label", placeholder: y = "", autoComplete: b = !0, disabled: x = !1, options: S = [], required: C = !0, readOnly: w = !1, value: T = "", error: E = "", handleChange: D, handleValidate: O }) => {
-	let { id: k, rootId: A, definition: { styleSelectors: j } } = h(), { settings: { previewMode: M } } = u(), { useStore: N } = d(), [P] = N("runtime.sources.form");
-	if (!P && !M) return /* @__PURE__ */ f(e, {
-		ref: n,
-		className: m("plitzi-component__form-input", { "form-input--out-of-context": !M }, c),
-		children: /* @__PURE__ */ f("div", { children: "Form Input Only Works inside Form element" })
+import e from "../../../Element/hooks/useElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import n from "./components/Label.mjs";
+import r from "./hocs/withFieldValue.mjs";
+import i from "./inputs/Checkbox.mjs";
+import a from "./inputs/Hidden.mjs";
+import o from "./inputs/Input.mjs";
+import s from "./inputs/Select.mjs";
+import c from "./inputs/Textarea.mjs";
+import l from "../../../Element/hocs/withElement.mjs";
+import { useEffect as u } from "react";
+import d from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { createStoreHook as f } from "@plitzi/nexus/react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import h from "clsx";
+//#region src/elements/form/FormControl/FormControl.tsx
+var g = ({ ref: r, className: l = "", subType: g = "text", name: _ = "", label: v = "Label", placeholder: y = "", autoComplete: b = !0, disabled: x = !1, options: S = [], required: C = !0, readOnly: w = !1, value: T = "", error: E = "", handleChange: D, handleValidate: O }) => {
+	let { id: k, rootId: A, definition: { styleSelectors: j } } = e(), { settings: { previewMode: M } } = d(), { useStore: N } = f(), [P] = N("runtime.sources.form");
+	if (!P && !M) return /* @__PURE__ */ p(t, {
+		ref: r,
+		className: h("plitzi-component__form-input", { "form-input--out-of-context": !M }, l),
+		children: /* @__PURE__ */ p("div", { children: "Form Input Only Works inside Form element" })
 	});
 	if (!P && M) return null;
 	let { registerField: F, unregisterField: I } = P, L = ["checkbox", "switch"].includes(g);
-	return l(() => (F && F({
+	return u(() => (F && F({
 		name: _,
 		path: _
 	}), () => {
@@ -31,14 +32,14 @@ var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", lab
 		_,
 		F,
 		I
-	]), /* @__PURE__ */ p(e, {
-		ref: n,
-		className: m("plitzi-component__form-control", {
+	]), /* @__PURE__ */ m(t, {
+		ref: r,
+		className: h("plitzi-component__form-control", {
 			"form-control--invalid": E && M,
 			[`plitzi-component__form-control-${g}`]: g
-		}, c),
+		}, l),
 		children: [
-			!L && v && /* @__PURE__ */ f(t, {
+			!L && v && /* @__PURE__ */ p(n, {
 				targetInput: `${A}_${k}`,
 				previewMode: M,
 				className: j.label,
@@ -46,13 +47,13 @@ var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", lab
 				required: C,
 				children: v
 			}),
-			L && v && /* @__PURE__ */ p(t, {
+			L && v && /* @__PURE__ */ m(n, {
 				targetInput: `${A}_${k}`,
 				previewMode: M,
 				className: j.label,
 				type: g,
 				required: C,
-				children: [g === "checkbox" && /* @__PURE__ */ f(r, {
+				children: [g === "checkbox" && /* @__PURE__ */ p(i, {
 					id: `${A}_${k}`,
 					name: _,
 					value: T,
@@ -64,7 +65,7 @@ var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", lab
 					onValidate: O
 				}), v]
 			}),
-			g === "checkbox" && !v && /* @__PURE__ */ f(r, {
+			g === "checkbox" && !v && /* @__PURE__ */ p(i, {
 				id: `${A}_${k}`,
 				name: _,
 				value: T,
@@ -81,7 +82,7 @@ var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", lab
 				"email",
 				"password",
 				"time"
-			].includes(g) && /* @__PURE__ */ f(a, {
+			].includes(g) && /* @__PURE__ */ p(o, {
 				id: `${A}_${k}`,
 				name: _,
 				value: T,
@@ -95,7 +96,7 @@ var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", lab
 				onChange: D,
 				onValidate: O
 			}),
-			g === "hidden" && /* @__PURE__ */ f(i, {
+			g === "hidden" && /* @__PURE__ */ p(a, {
 				id: `${A}_${k}`,
 				name: _,
 				value: T,
@@ -103,7 +104,7 @@ var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", lab
 				disabled: x,
 				previewMode: M
 			}),
-			g === "select" && /* @__PURE__ */ f(o, {
+			g === "select" && /* @__PURE__ */ p(s, {
 				id: `${A}_${k}`,
 				name: _,
 				onChange: D,
@@ -114,7 +115,7 @@ var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", lab
 				disabled: x,
 				options: S
 			}),
-			g === "textarea" && /* @__PURE__ */ f(s, {
+			g === "textarea" && /* @__PURE__ */ p(c, {
 				id: `${A}_${k}`,
 				name: _,
 				value: T,
@@ -126,12 +127,12 @@ var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", lab
 				onChange: D,
 				onValidate: O
 			}),
-			E && /* @__PURE__ */ f("div", {
-				className: m("form-control__error-message", j.error),
+			E && /* @__PURE__ */ p("div", {
+				className: h("form-control__error-message", j.error),
 				children: E
 			})
 		]
 	});
-}));
+}, _ = l(r(g));
 //#endregion
-export { g as default };
+export { g as FormControl, _ as default };

package/dist/elements/form/FormControl/Settings.d.ts

@@ -12,5 +12,5 @@ type SettingsProps = {
     previewError?: boolean;
     onUpdate?: (key: string, value: string | boolean | number | string[]) => void;
 };
-declare const Settings: ({ subType, name, label, defaultValue, placeholder, autoComplete, options, required, readOnly, disabled, previewError, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Settings: ({ subType, name, label, defaultValue, placeholder, autoComplete, options, required, readOnly, disabled, previewError, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

package/dist/elements/form/FormControl/components/Label.d.ts

@@ -8,5 +8,5 @@ export type LabelProps = {
     previewMode?: boolean;
     required: boolean;
 };
-declare const Label: ({ ref, children, targetInput, type, previewMode, required, className }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Label: ({ ref, children, targetInput, type, previewMode, required, className }: LabelProps) => import("react").JSX.Element;
 export default Label;

package/dist/elements/form/FormControl/hocs/withFieldValue.d.ts

@@ -8,7 +8,7 @@ export type WithFieldValueProps<T> = {
     previewError?: boolean;
 } & T;
 declare const withFieldValue: <T extends object>(WrappedComponent: FC<T>) => {
-    (props: WithFieldValueProps<T>): import("react/jsx-runtime").JSX.Element;
+    (props: WithFieldValueProps<T>): import("react").JSX.Element;
     displayName: string;
 };
 export default withFieldValue;

package/dist/elements/form/FormControl/hocs/withFieldValue.mjs

@@ -1,7 +1,7 @@
 import { useCallback as e, useEffect as t, useMemo as n } from "react";
 import r from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { get as i } from "@plitzi/plitzi-ui/helpers";
-import { createStoreHook as a } from "@plitzi/nexus/createStore";
+import { createStoreHook as a } from "@plitzi/nexus/react";
 import { getDisplayName as o } from "@plitzi/sdk-shared/helpers/utils";
 import { jsx as s } from "react/jsx-runtime";
 //#region src/elements/form/FormControl/hocs/withFieldValue.tsx

package/dist/elements/form/FormControl/index.d.ts

@@ -1,5 +1,5 @@
 declare const FormControl: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./hocs/withFieldValue').WithFieldValueProps<import('./FormControl').FormControlProps>>): import("react/jsx-runtime").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./hocs/withFieldValue').WithFieldValueProps<import('./FormControl').FormControlProps>>): import("react").JSX.Element;
     displayName: string;
 } & {
     type: string;
@@ -47,7 +47,7 @@ declare const FormControl: {
             license: string;
             website: string;
             backgroundColor: string;
-            icon: import("react/jsx-runtime").JSX.Element;
+            icon: import("react").JSX.Element;
         };
         defaultStyle: {
             name: string;

package/dist/elements/form/FormControl/inputs/Checkbox.d.ts

@@ -10,5 +10,5 @@ export type CheckboxProps = {
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     onValidate?: () => void;
 };
-declare const Checkbox: ({ className, id, name, placeholder, value, required, disabled, onChange, onValidate }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: ({ className, id, name, placeholder, value, required, disabled, onChange, onValidate }: CheckboxProps) => import("react").JSX.Element;
 export default Checkbox;

package/dist/elements/form/FormControl/inputs/Hidden.d.ts

@@ -7,5 +7,5 @@ export type HiddenProps = {
     disabled?: boolean;
     previewMode?: boolean;
 };
-declare const Hidden: ({ className, id, name, value, required, disabled, previewMode }: HiddenProps) => import("react/jsx-runtime").JSX.Element;
+declare const Hidden: ({ className, id, name, value, required, disabled, previewMode }: HiddenProps) => import("react").JSX.Element;
 export default Hidden;

package/dist/elements/form/FormControl/inputs/Input.d.ts

@@ -12,5 +12,5 @@ export type InputProps = {
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onValidate?: () => void;
 };
-declare const Input: ({ className, id, name, placeholder, value, type, autoComplete, required, disabled, readOnly, onChange, onValidate }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ className, id, name, placeholder, value, type, autoComplete, required, disabled, readOnly, onChange, onValidate }: InputProps) => import("react").JSX.Element;
 export default Input;

package/dist/elements/form/FormControl/inputs/Select.d.ts

@@ -13,5 +13,5 @@ export type SelectProps = {
     onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;
     onValidate?: () => void;
 };
-declare const Select: ({ id, name, options, placeholder, value, className, disabled, onChange, onValidate }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ id, name, options, placeholder, value, className, disabled, onChange, onValidate }: SelectProps) => import("react").JSX.Element;
 export default Select;

package/dist/elements/form/FormControl/inputs/Textarea.d.ts

@@ -11,5 +11,5 @@ export type TextareaProps = {
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
     onValidate?: () => void;
 };
-declare const Textarea: ({ className, id, name, placeholder, value, required, disabled, readOnly, onChange, onValidate }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+declare const Textarea: ({ className, id, name, placeholder, value, required, disabled, readOnly, onChange, onValidate }: TextareaProps) => import("react").JSX.Element;
 export default Textarea;

package/dist/elements/internal/LayoutContainer/LayoutContainer.d.ts

@@ -5,9 +5,9 @@ export type LayoutContainerProps = {
     children?: ReactNode;
     subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';
 };
-declare const LayoutContainer: ({ ref, className, children, subType }: LayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayoutContainer: ({ ref, className, children, subType }: LayoutContainerProps) => import("react").JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<LayoutContainerProps>): import("react/jsx-runtime").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<LayoutContainerProps>): import("react").JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/internal/LayoutContainer/LayoutContainer.mjs

@@ -1,13 +1,14 @@
-import e from "../../../Element/RootElement.mjs";
-import t from "../../../Element/hocs/withElement.mjs";
-import { useCallback as n, useEffect as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { throttle as a } from "@plitzi/plitzi-ui/helpers";
-import { jsx as o } from "react/jsx-runtime";
-import s from "clsx";
-import c from "@plitzi/sdk-shared/elements/hooks/useElement";
-var l = t(({ ref: t, className: l = "", children: u, subType: d = "div" }) => {
-	let { plitziElementLayout: f } = c(), { settings: { previewMode: p } } = i(), m = n((e, t) => {
+import e from "../../../Element/hooks/useElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import n from "../../../Element/hocs/withElement.mjs";
+import { useCallback as r, useEffect as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { throttle as o } from "@plitzi/plitzi-ui/helpers";
+import { jsx as s } from "react/jsx-runtime";
+import c from "clsx";
+//#region src/elements/internal/LayoutContainer/LayoutContainer.tsx
+var l = ({ ref: n, className: l = "", children: u, subType: d = "div" }) => {
+	let { plitziElementLayout: f } = e(), { settings: { previewMode: p } } = a(), m = r((e, t) => {
 		if (!e || !t) return;
 		let n = t.getBoundingClientRect(), r = n.top - 0, i = n.left - 0, a = i + n.width + 0, o = r + n.height + 0, s = `
       polygon(
@@ -19,28 +20,28 @@ var l = t(({ ref: t, className: l = "", children: u, subType: d = "div" }) => {
       )`;
 		e.style.setProperty("--child-clip", s);
 	}, []);
-	return r(() => {
-		if (!f || !t?.current || p) return;
-		let e = a(() => {
-			let e = t.current;
-			m(e, e.querySelector(".plitzi-component--layout-body"));
-		}, 150), n = new ResizeObserver(e);
-		n.observe(t.current);
-		let r = t.current.querySelector(".plitzi-component--layout-body");
-		return r && n.observe(r), () => {
-			e.cancel(), n.disconnect();
+	return i(() => {
+		if (!f || !n?.current || p) return;
+		let e = o(() => {
+			let e = n.current, t = e.querySelector(".plitzi-component--layout-body");
+			m(e, t);
+		}, 150), t = new ResizeObserver(e);
+		t.observe(n.current);
+		let r = n.current.querySelector(".plitzi-component--layout-body");
+		return r && t.observe(r), () => {
+			e.cancel(), t.disconnect();
 		};
 	}, [
 		f,
 		p,
-		t,
+		n,
 		m
-	]), /* @__PURE__ */ o(e, {
-		ref: t,
+	]), /* @__PURE__ */ s(t, {
+		ref: n,
 		tag: d,
-		className: s("plitzi-component__layout-container", l),
+		className: c("plitzi-component__layout-container", l),
 		children: u
 	});
-});
+}, u = n(l);
 //#endregion
-export { l as default };
+export { l as LayoutContainer, u as default };

package/dist/elements/internal/LayoutContainer/Settings.d.ts

@@ -3,5 +3,5 @@ type SettingsProps = {
     folder?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ subType, folder, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Settings: ({ subType, folder, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

package/dist/elements/internal/LayoutContainer/Settings.mjs

@@ -1,23 +1,23 @@
 import { useCallback as e, useMemo as t } from "react";
-import { createStoreHook as n } from "@plitzi/nexus/createStore";
+import { useCommonStore as n } from "@plitzi/sdk-shared/store";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import a from "@plitzi/plitzi-ui/Select";
 import o from "@plitzi/plitzi-ui/Select2";
 //#region src/elements/internal/LayoutContainer/Settings.tsx
 var s = ({ subType: s = "div", folder: c = "", onUpdate: l }) => {
-	let { useStore: u } = n(), [d] = u("schema.pageFolders"), f = e((e) => l?.("subType", e), [l]), p = e((e) => l?.("folder", e?.value ?? ""), [l]), m = t(() => [{
+	let [u] = n("schema.pageFolders"), d = e((e) => l?.("subType", e), [l]), f = e((e) => l?.("folder", e?.value ?? ""), [l]), p = t(() => [{
 		value: "",
 		label: "None"
-	}, ...d.map(({ id: e, name: t }) => ({
+	}, ...u.map(({ id: e, name: t }) => ({
 		value: e,
 		label: t
-	}))], [d]);
+	}))], [u]);
 	return /* @__PURE__ */ i("div", {
 		className: "flex flex-col gap-4 py-2",
 		children: [/* @__PURE__ */ i(a, {
 			value: s,
 			label: "Container Tag",
-			onChange: f,
+			onChange: d,
 			children: [
 				/* @__PURE__ */ r("option", {
 					value: "div",
@@ -63,9 +63,9 @@ var s = ({ subType: s = "div", folder: c = "", onUpdate: l }) => {
 		}), /* @__PURE__ */ r(o, {
 			label: "Folder",
 			value: c,
-			options: m,
+			options: p,
 			placeholder: "None",
-			onChange: p
+			onChange: f
 		})]
 	});
 };