@plitzi/sdk-elements 0.38.5 → 0.38.7

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

@@ -1,10 +1,14 @@
 import { ChangeEvent } from 'react';
 export type CheckboxProps = {
     className?: string;
+    /**
+     * How the box is offered: `switch` is the same checkbox announced as an on/off switch (`role="switch"`) and drawn as
+     * a track with a thumb — for a setting that takes effect at once, where a checkbox reads as a choice to submit.
+     */
+    variant?: 'checkbox' | 'switch';
     id?: string;
     name?: string;
-    placeholder?: string;
-    value?: string;
+    checked?: boolean;
     required?: boolean;
     disabled?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -15,5 +19,5 @@ export type CheckboxProps = {
      */
     errorId?: string;
 };
-declare const Checkbox: ({ className, id, name, placeholder, value, required, disabled, onChange, onValidate, errorId }: CheckboxProps) => import('react').JSX.Element;
+declare const Checkbox: ({ className, variant, id, name, checked, required, disabled, onChange, onValidate, errorId }: CheckboxProps) => import('react').JSX.Element;
 export default Checkbox;

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

@@ -2,17 +2,18 @@ import { useCallback as e } from "react";
 import { jsx as t } from "react/jsx-runtime";
 import n from "clsx";
 //#region src/elements/form/FormControl/inputs/Checkbox.tsx
-var r = ({ className: r = "", id: i = "", name: a = "", placeholder: o = "", value: s = "", required: c = !0, disabled: l = !1, onChange: u, onValidate: d, errorId: f }) => {
+var r = ({ className: r = "", variant: i = "checkbox", id: a = "", name: o = "", checked: s = !1, required: c = !0, disabled: l = !1, onChange: u, onValidate: d, errorId: f }) => {
 	let p = e(() => d?.(), [d]);
 	return /* @__PURE__ */ t("input", {
-		className: n("form-control__checkbox-container", r),
-		id: i,
+		className: n(`form-control__${i}-container`, r),
+		id: a,
+		role: i === "switch" ? "switch" : void 0,
 		"aria-invalid": f ? !0 : void 0,
 		"aria-describedby": f,
-		name: a,
+		name: o,
 		type: "checkbox",
-		placeholder: o,
-		value: s,
+		value: "true",
+		checked: s,
 		required: c,
 		disabled: l,
 		onChange: u,

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

@@ -1,5 +1,10 @@
 export type InputProps = {
+    /** The box the field is drawn in — the `input` slot. */
     className?: string;
+    /** The `<input>` inside the box — the `field` slot. */
+    fieldClassName?: string;
+    /** A password's show/hide button — the `icon` slot. */
+    iconClassName?: string;
     id?: string;
     name?: string;
     placeholder?: string;
@@ -21,5 +26,5 @@ export type InputProps = {
      */
     errorId?: string;
 };
-declare const Input: ({ className, id, name, placeholder, value, type, autoComplete, autoFocus, required, maxLength, disabled, readOnly, onChange, onValidate, errorId }: InputProps) => import('react').JSX.Element;
+declare const Input: ({ className, fieldClassName, iconClassName, id, name, placeholder, value, type, autoComplete, autoFocus, required, maxLength, disabled, readOnly, onChange, onValidate, errorId }: InputProps) => import('react').JSX.Element;
 export default Input;

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

@@ -3,43 +3,43 @@ import { useCallback as t, useRef as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import o from "clsx";
 //#region src/elements/form/FormControl/inputs/Input.tsx
-var s = ({ className: s = "", id: c = "", name: l = "", placeholder: u = "", value: d = "", type: f = "text", autoComplete: p = !1, autoFocus: m = !1, required: h = !0, maxLength: g = 0, disabled: _ = !1, readOnly: v = !1, onChange: y, onValidate: b, errorId: x }) => {
-	let [S, C] = r(!1), w = n(null);
-	e(w, m);
-	let T = t(() => C((e) => !e), [C]), E = t((e) => {
-		let t = w.current;
-		if (t?.focus(), f === "color" && t && e.target !== t) try {
+var s = ({ className: s = "", fieldClassName: c, iconClassName: l, id: u = "", name: d = "", placeholder: f = "", value: p = "", type: m = "text", autoComplete: h = !1, autoFocus: g = !1, required: _ = !0, maxLength: v = 0, disabled: y = !1, readOnly: b = !1, onChange: x, onValidate: S, errorId: C }) => {
+	let [w, T] = r(!1), E = n(null);
+	e(E, g);
+	let D = t(() => T((e) => !e), [T]), O = t((e) => {
+		let t = E.current;
+		if (t?.focus(), m === "color" && t && e.target !== t) try {
 			t.showPicker();
 		} catch {}
-	}, [w, f]), D = t(() => b?.(), [b]);
+	}, [E, m]), k = t(() => S?.(), [S]);
 	return /* @__PURE__ */ a("div", {
 		className: o("form-control__input-container", s),
-		onClick: E,
+		onClick: O,
 		children: [/* @__PURE__ */ i("input", {
-			ref: w,
-			className: "input-container__input",
-			id: c,
-			"aria-invalid": x ? !0 : void 0,
-			"aria-describedby": x,
-			name: l,
-			type: f === "password" && S ? "text" : f,
-			placeholder: u,
-			value: d,
-			required: h,
-			maxLength: g > 0 ? g : void 0,
-			autoComplete: p ? "on" : "off",
-			disabled: _,
-			readOnly: v,
-			onChange: y,
-			onBlur: D
-		}), f === "password" && /* @__PURE__ */ i("button", {
+			ref: E,
+			className: o("input-container__input", c),
+			id: u,
+			"aria-invalid": C ? !0 : void 0,
+			"aria-describedby": C,
+			name: d,
+			type: m === "password" && w ? "text" : m,
+			placeholder: f,
+			value: p,
+			required: _,
+			maxLength: v > 0 ? v : void 0,
+			autoComplete: h ? "on" : "off",
+			disabled: y,
+			readOnly: b,
+			onChange: x,
+			onBlur: k
+		}), m === "password" && /* @__PURE__ */ i("button", {
 			type: "button",
-			className: "form-input__icon",
-			"aria-pressed": S,
+			className: o("form-input__icon", l),
+			"aria-pressed": w,
 			title: "Show password",
-			onClick: T,
+			onClick: D,
 			children: /* @__PURE__ */ i("i", {
-				className: S ? "fa-solid fa-eye-slash" : "fa-solid fa-eye",
+				className: w ? "fa-solid fa-eye-slash" : "fa-solid fa-eye",
 				"aria-hidden": "true"
 			})
 		})]

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

@@ -8,7 +8,10 @@ export type SelectProps = {
     } | string)[];
     placeholder?: string;
     value?: string;
+    /** The box the select is drawn in — the `input` slot. */
     className?: string;
+    /** The `<select>` inside the box — the `field` slot. */
+    fieldClassName?: string;
     disabled?: boolean;
     onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;
     onValidate?: () => void;
@@ -18,5 +21,5 @@ export type SelectProps = {
      */
     errorId?: string;
 };
-declare const Select: ({ id, name, options, placeholder, value, className, disabled, onChange, onValidate, errorId }: SelectProps) => import('react').JSX.Element;
+declare const Select: ({ id, name, options, placeholder, value, className, fieldClassName, disabled, onChange, onValidate, errorId }: SelectProps) => import('react').JSX.Element;
 export default Select;

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

@@ -2,12 +2,12 @@ import { useCallback as e, useMemo as t, useRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import a from "clsx";
 //#region src/elements/form/FormControl/inputs/Select.tsx
-var o = ({ id: o = "", name: s, options: c = [], placeholder: l = "", value: u = "", className: d = "", disabled: f = !1, onChange: p, onValidate: m, errorId: h }) => {
-	let g = n(null), _ = e(() => {
-		g.current?.click();
-	}, [g]), v = e((e) => {
+var o = ({ id: o = "", name: s, options: c = [], placeholder: l = "", value: u = "", className: d = "", fieldClassName: f, disabled: p = !1, onChange: m, onValidate: h, errorId: g }) => {
+	let _ = n(null), v = e(() => {
+		_.current?.click();
+	}, [_]), y = e((e) => {
 		e.stopPropagation();
-	}, []), y = e(() => m?.(), [m]), b = t(() => Array.isArray(c) ? c.map((e) => {
+	}, []), b = e(() => h?.(), [h]), x = t(() => Array.isArray(c) ? c.map((e) => {
 		if (typeof e == "string") return {
 			value: e,
 			label: e
@@ -26,23 +26,23 @@ var o = ({ id: o = "", name: s, options: c = [], placeholder: l = "", value: u =
 	}) : [], [c]);
 	return /* @__PURE__ */ r("div", {
 		className: a("form-control__select-container", d),
-		onClick: _,
+		onClick: v,
 		children: /* @__PURE__ */ i("select", {
-			ref: g,
+			ref: _,
 			id: o,
-			"aria-invalid": h ? !0 : void 0,
-			"aria-describedby": h,
+			"aria-invalid": g ? !0 : void 0,
+			"aria-describedby": g,
 			name: s,
-			onChange: p,
+			onChange: m,
 			value: u,
-			className: "select-container__select",
-			disabled: f,
-			onClick: v,
-			onBlur: y,
+			className: a("select-container__select", f),
+			disabled: p,
+			onClick: y,
+			onBlur: b,
 			children: [l && /* @__PURE__ */ r("option", {
 				value: "",
 				children: l
-			}), b.map((e, t) => /* @__PURE__ */ r("option", {
+			}), x.map((e, t) => /* @__PURE__ */ r("option", {
 				value: e.value,
 				children: e.label
 			}, t))]

package/dist/elements/internal/NotFound/declaration.d.ts

@@ -41,7 +41,11 @@ declare const declaration: {
             readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
-                    readonly default: {};
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'justify-content': "center";
+                        readonly 'align-items': "center";
+                    };
                 };
             };
         };

package/dist/elements/internal/NotFound/declaration.mjs

@@ -33,7 +33,11 @@ var t = e()({
 		defaultStyle: {
 			name: "Not Found",
 			displayMode: "desktop",
-			style: { base: { default: {} } }
+			style: { base: { default: {
+				display: "flex",
+				"justify-content": "center",
+				"align-items": "center"
+			} } }
 		},
 		settings: {}
 	}

package/dist/elements/internal/NotFound/index.d.ts

@@ -40,7 +40,11 @@ declare const NotFound: {
             readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
-                    readonly default: {};
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'justify-content': "center";
+                        readonly 'align-items': "center";
+                    };
                 };
             };
         };

package/dist/elements/internal/Page/declaration.d.ts

@@ -71,12 +71,11 @@ declare const declaration: {
                         readonly 'min-height': "100%";
                         readonly 'min-width': "100%";
                         readonly 'font-family': "Arial";
-                        readonly color: "#333";
+                        readonly color: "light-dark(#333, oklch(0.92 0.004 286.32))";
                         readonly 'font-size': "14px";
                         readonly 'font-weight': 400;
                         readonly 'line-height': "16px";
                         readonly 'text-align': "left";
-                        readonly 'background-color': "#ffffff";
                     };
                 };
             };

package/dist/elements/internal/Page/declaration.mjs

@@ -61,12 +61,11 @@ var t = e()({
 				"min-height": "100%",
 				"min-width": "100%",
 				"font-family": "Arial",
-				color: "#333",
+				color: "light-dark(#333, oklch(0.92 0.004 286.32))",
 				"font-size": "14px",
 				"font-weight": 400,
 				"line-height": "16px",
-				"text-align": "left",
-				"background-color": "#ffffff"
+				"text-align": "left"
 			} } }
 		},
 		settings: {}

package/dist/elements/internal/Page/index.d.ts

@@ -70,12 +70,11 @@ declare const Page: {
                         readonly 'min-height': "100%";
                         readonly 'min-width': "100%";
                         readonly 'font-family': "Arial";
-                        readonly color: "#333";
+                        readonly color: "light-dark(#333, oklch(0.92 0.004 286.32))";
                         readonly 'font-size': "14px";
                         readonly 'font-weight': 400;
                         readonly 'line-height': "16px";
                         readonly 'text-align': "left";
-                        readonly 'background-color': "#ffffff";
                     };
                 };
             };

package/dist/elements/media/Image/declaration.d.ts

@@ -19,7 +19,7 @@ declare const declaration: {
         readonly definition: {
             readonly label: "Image";
             readonly type: "image";
-            readonly description: "Displays an image from a URL.";
+            readonly description: string;
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
@@ -54,7 +54,8 @@ declare const declaration: {
                     readonly default: {
                         readonly display: "block";
                         readonly width: "140px";
-                        readonly height: "140px";
+                        readonly height: "auto";
+                        readonly 'max-width': "100%";
                     };
                 };
             };

package/dist/elements/media/Image/declaration.mjs

@@ -25,7 +25,7 @@ var n = e()({
 		definition: {
 			label: "Image",
 			type: "image",
-			description: "Displays an image from a URL.",
+			description: "Displays an image from a URL. It starts 140px wide and as tall as the picture is for that width (`height: auto`, never wider than where it sits): a class that sets only a `width` or an `aspect-ratio` is obeyed, and `object-fit` decides how the picture fills a box that sets both.",
 			bindings: {},
 			styleSelectors: { base: "" },
 			initialState: { visibility: !0 }
@@ -54,7 +54,8 @@ var n = e()({
 			style: { base: { default: {
 				display: "block",
 				width: "140px",
-				height: "140px"
+				height: "auto",
+				"max-width": "100%"
 			} } }
 		},
 		settings: {}

package/dist/elements/media/Image/index.d.ts

@@ -18,7 +18,7 @@ declare const Image: {
         readonly definition: {
             readonly label: "Image";
             readonly type: "image";
-            readonly description: "Displays an image from a URL.";
+            readonly description: string;
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
@@ -53,7 +53,8 @@ declare const Image: {
                     readonly default: {
                         readonly display: "block";
                         readonly width: "140px";
-                        readonly height: "140px";
+                        readonly height: "auto";
+                        readonly 'max-width': "100%";
                     };
                 };
             };

package/dist/elements/provider/ApiContainer/ApiContainer.mjs

@@ -25,13 +25,14 @@ import be from "clsx";
 import xe from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
 import Se from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 import { QueryBuilderEvaluator as Ce } from "@plitzi/plitzi-ui/QueryBuilder";
+import { useServerQuery as we } from "@plitzi/sdk-shared/queries";
 //#region src/elements/provider/ApiContainer/ApiContainer.tsx
-var c = ({ ref: e, className: c = "", children: l, query: u = "", method: d = "get", accessToken: f = "", when: p = o, headers: m = o, mockData: h = "{}", subType: we = "", credentials: Te = "same-origin", singleRecord: g = !1, pagination: Ee = "none", pageParam: De = "page", renderWhileLoading: Oe = !1, loadingSlot: _ = "", cache: ke = !1, staleTime: Ae = 30, gcTime: je = 300, refreshSeconds: Me = 0, connector: Ne = "", action: Pe = "", input: Fe }) => {
-	let { id: v, visible: y, definition: { label: b = "Api Container", runtime: Ie, items: Le } } = t(), x = Ie === "server", { loaded: S, stale: C, location: w, elementData: T, refreshing: Re, refresh: E, cancel: D } = ee(), O = xe(n.sourceType, v), { settings: { previewMode: k }, contexts: { InteractionsContext: ze } } = he(), { interactionsManager: A } = pe(ze), [[j, M, Be]] = _e([
+var c = ({ ref: e, className: c = "", children: l, query: u = "", method: d = "get", accessToken: f = "", when: p = o, headers: m = o, mockData: h = "{}", subType: Te = "", credentials: Ee = "same-origin", singleRecord: g = !1, pagination: De = "none", pageParam: Oe = "page", renderWhileLoading: ke = !1, loadingSlot: _ = "", cache: Ae = !1, staleTime: je = 30, gcTime: Me = 300, refreshSeconds: Ne = 0, connector: Pe = "", action: Fe = "", input: Ie }) => {
+	let { id: v, visible: y, definition: { label: b = "Api Container", runtime: Le, items: Re } } = t(), x = Le === "server", { loaded: S, stale: C, location: w, elementData: T, refreshing: ze, refresh: E, cancel: D } = ee(), O = xe(n.sourceType, v), { settings: { previewMode: k }, contexts: { InteractionsContext: Be } } = he(), { interactionsManager: A } = pe(Be), [[j, M, Ve]] = _e([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.navigate"
-	]), Ve = i(() => f ? {
+	]), He = i(() => f ? {
 		...m,
 		Authorization: `Bearer ${f}`
 	} : m, [m, f]), N = i(() => x || !y ? !1 : !!(k && u && (p === o || Ce(p, {
@@ -46,147 +47,155 @@ var c = ({ ref: e, className: c = "", children: l, query: u = "", method: d = "g
 		j,
 		M,
 		h
-	]), He = i(() => [v], [v]), { isLoading: Ue, isFetching: We, data: P, refetch: F, cancel: I, isSuccess: Ge, isError: Ke } = se({
+	]), Ue = i(() => [v], [v]), { isLoading: We, isFetching: Ge, data: Ke, refetch: qe, cancel: P, isSuccess: Je, isError: Ye } = se({
 		url: u,
 		method: d,
-		credentials: Te,
+		credentials: Ee,
 		mock: k ? void 0 : h,
-		customHeaders: Ve,
+		customHeaders: He,
 		enabled: N,
-		cache: ke,
-		staleTime: Ae,
-		gcTime: je,
-		tags: He
-	}), L = x && !!w && w !== ye(), R = x && S && !L && T === null, z = x && !Ne && !Pe, B = i(() => x ? T || (S ? o : oe(h, z)) : P ?? o, [
+		cache: Ae,
+		staleTime: je,
+		gcTime: Me,
+		tags: Ue
+	}), F = x && !!w && w !== ye(), I = x && S && !F && T === null, L = x && !Pe && !Fe, R = i(() => x ? T || (S ? o : oe(h, L)) : Ke ?? o, [
 		x,
-		P,
+		Ke,
 		T,
 		S,
 		h,
-		z
-	]), V = x ? L || Re : We, H = x ? L : Ue, U = a({}), W = r((e, t) => E(e, {
-		...U.current,
+		L
+	]), z = x ? F || ze : Ge, B = x ? F : We, V = a({}), Xe = r((e, t) => E(e, {
+		...V.current,
 		...t
-	}), [E]), G = r(async () => {
+	}), [E]), H = r(async (e) => {
 		if (!x) {
-			F();
+			qe();
 			return;
 		}
-		await W([v]);
+		await E([v], V.current, { fresh: e });
 	}, [
 		x,
-		F,
-		W,
+		qe,
+		E,
 		v
-	]), K = r(async ({ input: e } = {}) => {
+	]), U = r(() => H(!0), [H]), Ze = r(() => H(!1), [H]);
+	we({
+		id: v,
+		url: L && u ? u : void 0,
+		enabled: x && S,
+		active: y,
+		refresh: U
+	});
+	let W = r(async ({ input: e } = {}) => {
 		let t = ae(e);
-		t && (U.current = t), await G();
-	}, [G]), q = r(() => {
+		t && (V.current = t), await U();
+	}, [U]), G = r(() => {
 		if (x) {
 			D();
 			return;
 		}
-		I();
+		P();
 	}, [
 		x,
 		D,
-		I
-	]), [qe] = ge(`schema.flat.${v}.attributes.input`, { mode: "mount" });
+		P
+	]), [Qe] = ge(`schema.flat.${v}.attributes.input`, { mode: "mount" });
 	le({
 		enabled: x && S,
-		input: Fe,
-		savedInput: qe,
-		performQuery: K
+		input: Ie,
+		savedInput: Qe,
+		performQuery: W
 	}), ce({
-		seconds: Me,
-		enabled: y && (x ? S && !L : N),
-		refresh: G
+		seconds: Ne,
+		enabled: y && (x ? S && !F : N),
+		refresh: Ze
 	});
-	let J = B, Je = i(() => Array.isArray(J.records) ? J.records : [], [J.records]), { records: Y, isLoadingMore: Ye, goToPage: Xe, loadMore: Ze } = ue({
+	let K = R, $e = i(() => Array.isArray(K.records) ? K.records : [], [K.records]), { records: q, isLoadingMore: J, goToPage: Y, loadMore: et } = ue({
 		elementId: v,
-		mode: Ee,
-		pageParam: De,
-		records: Je,
-		page: J.pageInfo?.page ?? 1,
-		refresh: W,
-		navigate: Be
+		mode: De,
+		pageParam: Oe,
+		records: $e,
+		page: K.pageInfo?.page ?? 1,
+		refresh: Xe,
+		navigate: Ve
 	}), X = ie({
 		serverMode: x,
-		isSuccess: Ge,
-		isError: Ke,
+		isSuccess: Je,
+		isError: Ye,
 		rscResolved: S,
-		rscPending: L,
+		rscPending: F,
 		elementData: T
 	}), Z = a(void 0);
 	me(() => {
-		!V && v && X && (Z.current?.data !== B || Z.current.outcome !== X) && (Z.current = {
-			data: B,
+		!z && v && X && (Z.current?.data !== R || Z.current.outcome !== X) && (Z.current = {
+			data: R,
 			outcome: X
 		}, A.interactionTrigger(v, X === "success" ? "onApiSuccess" : "onApiError", {
 			url: u,
 			method: d,
-			...B
+			...R
 		}));
 	}, [
-		B,
+		R,
 		v,
 		A,
-		V,
+		z,
 		d,
 		X,
 		u
 	]);
 	let Q = i(() => ({
-		...B,
-		...Array.isArray(J.records) ? { records: Y } : o,
-		isLoading: V || Ye,
-		isEmpty: ne(J, Y, g),
-		hasError: R,
-		errorMessage: R ? "The data provider could not be reached" : "",
+		...R,
+		...Array.isArray(K.records) ? { records: q } : o,
+		isLoading: z || J,
+		isEmpty: ne(K, q, g),
+		hasError: I,
+		errorMessage: I ? "The data provider could not be reached" : "",
 		isStale: x && C
 	}), [
-		B,
-		J.records,
-		J.record,
-		Y,
-		V,
-		Ye,
-		g,
 		R,
+		K.records,
+		K.record,
+		q,
+		z,
+		J,
+		g,
+		I,
 		x,
 		C
-	]), Qe = r(() => fe(Q), [Q]);
+	]), tt = r(() => fe(Q), [Q]);
 	Se({
 		id: v,
 		source: O,
 		name: b || `API - ${v}`,
-		fields: Qe
+		fields: tt
 	});
 	let { writeRecord: $ } = de({
 		elementId: v,
 		enabled: x,
-		onDone: G
-	}), $e = i(() => {
+		onDone: U
+	}), nt = i(() => {
 		let e = {
 			performQuery: {
 				...n.callbacks.performQuery,
 				title: `Perform Query ${b}`,
-				callback: K
+				callback: W
 			},
 			cancelQuery: {
 				...n.callbacks.cancelQuery,
 				title: `Cancel Query ${b}`,
-				callback: q
+				callback: G
 			},
 			loadMore: {
 				...n.callbacks.loadMore,
 				title: `Load More ${b}`,
-				callback: Ze
+				callback: et
 			},
 			goToPage: {
 				...n.callbacks.goToPage,
 				title: `Go To Page ${b}`,
-				callback: ({ page: e }) => Xe(Number(e) || 1)
+				callback: ({ page: e }) => Y(Number(e) || 1)
 			}
 		};
 		return x && (e.writeRecord = {
@@ -196,29 +205,29 @@ var c = ({ ref: e, className: c = "", children: l, query: u = "", method: d = "g
 		}), e;
 	}, [
 		b,
-		K,
-		q,
-		Ze,
-		Xe,
+		W,
+		G,
+		et,
+		Y,
 		x,
 		$
-	]), et = i(() => _ && k ? re(l, _, H) : l, [
+	]), rt = i(() => _ && k ? re(l, _, B) : l, [
 		l,
-		H,
+		B,
 		_,
 		k
-	]), tt = i(() => O ? { runtime: { sources: { [O]: Q } } } : o, [Q, O]);
+	]), it = i(() => O ? { runtime: { sources: { [O]: Q } } } : o, [Q, O]);
 	return /* @__PURE__ */ s(te, {
 		ref: e,
-		tag: !k && !Le?.length ? "div" : we,
+		tag: !k && !Re?.length ? "div" : Te,
 		className: be("plitzi-component__api-container", c),
 		interactionTriggers: n.triggers,
-		interactionCallbacks: $e,
-		children: (!H || Oe || _) && /* @__PURE__ */ s(ve, {
+		interactionCallbacks: nt,
+		children: (!B || ke || _) && /* @__PURE__ */ s(ve, {
 			inherit: "live",
 			name: `Api:${v}`,
-			value: tt,
-			children: et
+			value: it,
+			children: rt
 		})
 	});
 }, l = e(c);