@plitzi/sdk-elements 0.38.3 → 0.38.5

package/dist/elements/declarations/index.d.ts

@@ -89,6 +89,13 @@ export declare const elementDeclarations: {
                     };
                 };
             };
+            readonly cancelQuery: {
+                readonly action: "cancelQuery";
+                readonly title: "Cancel Query";
+                readonly type: "callback";
+                readonly preview: {};
+                readonly params: {};
+            };
             readonly loadMore: {
                 readonly action: "loadMore";
                 readonly title: "Load More";
@@ -193,7 +200,36 @@ export declare const elementDeclarations: {
             };
             readonly settings: {};
         };
-    } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<import('../provider/ApiContainer/declaration').ApiContainerAttributes>;
+    } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        when?: import('@plitzi/sdk-shared').RuleGroup | undefined;
+        action?: string | undefined;
+        cache?: boolean | undefined;
+        endpoint?: string | undefined;
+        input?: (Record<string, unknown> | string) | undefined;
+        method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
+        resource?: string | undefined;
+        headers?: Record<string, string> | undefined;
+        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "" | undefined;
+        query?: string | undefined;
+        accessToken?: string | undefined;
+        mockData?: (Record<string, unknown> | string) | undefined;
+        credentials?: RequestCredentials | undefined;
+        connector?: string | undefined;
+        limit?: string | undefined;
+        singleRecord?: boolean | undefined;
+        filters?: {
+            field: string;
+            operator: string;
+            value: string;
+        }[] | undefined;
+        pagination?: import('../provider/ApiContainer/hooks/useProviderPagination').ProviderPagination | undefined;
+        pageParam?: string | undefined;
+        renderWhileLoading?: boolean | undefined;
+        loadingSlot?: string | undefined;
+        staleTime?: number | string | undefined;
+        gcTime?: number | string | undefined;
+        refreshSeconds?: number | string | undefined;
+    }>>;
     readonly BlockHtml: {
         readonly type: "blockHtml";
         readonly content: {
@@ -341,7 +377,7 @@ export declare const elementDeclarations: {
                 readonly license: "MIT";
                 readonly website: "https://plitzi.com";
                 readonly backgroundColor: "#4422ee";
-                readonly icon: "fa-solid fa-stop";
+                readonly icon: "fa-solid fa-hand-pointer";
             };
             readonly defaultStyle: {
                 readonly name: "Button";
@@ -424,6 +460,7 @@ export declare const elementDeclarations: {
         title?: string | undefined;
         content?: string | undefined;
         disabled?: boolean | undefined;
+        controls?: string | undefined;
         icon?: string | undefined;
         subType?: "button" | "submit" | "reset" | undefined;
         iconPlacement?: import('../../Element/ElementWords').IconPlacement | undefined;
@@ -742,6 +779,7 @@ export declare const elementDeclarations: {
         readonly type: "container";
         readonly attributeValues: {
             readonly subType: readonly string[];
+            readonly live: readonly string[];
         };
         readonly content: {
             readonly attributes: {
@@ -776,7 +814,7 @@ export declare const elementDeclarations: {
                 readonly license: "MIT";
                 readonly website: "https://plitzi.com";
                 readonly backgroundColor: "#4422ee";
-                readonly icon: "fa-regular fa-square";
+                readonly icon: "fa-solid fa-crop-simple";
             };
             readonly defaultStyle: {
                 readonly name: "Container";
@@ -792,7 +830,9 @@ export declare const elementDeclarations: {
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         label?: string | undefined;
-        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | undefined;
+        title?: string | undefined;
+        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
+        live?: "polite" | "assertive" | "" | undefined;
         decorative?: boolean | undefined;
     }>>;
     readonly Custom: {
@@ -977,7 +1017,7 @@ export declare const elementDeclarations: {
                 readonly license: "MIT";
                 readonly website: "https://plitzi.com";
                 readonly backgroundColor: "#4422ee";
-                readonly icon: "fa-regular fa-clone";
+                readonly icon: "fa-regular fa-message";
             };
             readonly defaultStyle: {
                 readonly name: "Dialog Container";
@@ -1194,7 +1234,7 @@ export declare const elementDeclarations: {
                 readonly license: "MIT";
                 readonly website: "https://plitzi.com";
                 readonly backgroundColor: "#4422ee";
-                readonly icon: "";
+                readonly icon: "fa-regular fa-window-restore";
             };
             readonly defaultStyle: {
                 readonly name: "Dropdown Popup";
@@ -1449,6 +1489,7 @@ export declare const elementDeclarations: {
                 readonly license: "MIT";
                 readonly website: "https://plitzi.com";
                 readonly backgroundColor: "#4422ee";
+                readonly icon: "fa-solid fa-rectangle-list";
             };
             readonly defaultStyle: {
                 readonly name: "Form";
@@ -1542,6 +1583,7 @@ export declare const elementDeclarations: {
                 readonly license: "MIT";
                 readonly website: "https://plitzi.com";
                 readonly backgroundColor: "#4422ee";
+                readonly icon: "fa-solid fa-i-cursor";
             };
             readonly defaultStyle: {
                 readonly name: "Form Control";
@@ -2135,7 +2177,7 @@ export declare const elementDeclarations: {
         };
         readonly content: {
             readonly attributes: {
-                readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
+                readonly src: "";
                 readonly alt: "";
                 readonly decorative: false;
                 readonly fetchPriority: "auto";
@@ -2187,6 +2229,7 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        resize?: boolean | undefined;
         height?: number | undefined;
         width?: number | undefined;
         fetchPriority?: "high" | "low" | "auto" | undefined;
@@ -2454,7 +2497,7 @@ export declare const elementDeclarations: {
                 readonly license: "MIT";
                 readonly website: "https://plitzi.com";
                 readonly backgroundColor: "#4422ee";
-                readonly icon: "fa-solid fa-list";
+                readonly icon: "fa-solid fa-grip-lines";
             };
             readonly defaultStyle: {
                 readonly name: "List Item";
@@ -2565,7 +2608,7 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        content: string;
+        content?: string | undefined;
     }>>;
     readonly ModalContainer: {
         readonly type: "modalContainer";
@@ -3462,7 +3505,7 @@ export declare const elementDeclarations: {
                 readonly license: "MIT";
                 readonly website: "https://plitzi.com";
                 readonly backgroundColor: "#4422ee";
-                readonly icon: "fa-solid fa-align-left";
+                readonly icon: "fa-solid fa-file-lines";
             };
             readonly defaultStyle: {
                 readonly name: "Rich Text";
@@ -3719,7 +3762,7 @@ export declare const elementDeclarations: {
                 readonly license: "MIT";
                 readonly website: "https://plitzi.com";
                 readonly backgroundColor: "#4422ee";
-                readonly icon: "fa-solid fa-table-columns";
+                readonly icon: "fa-regular fa-folder";
             };
             readonly defaultStyle: {
                 readonly name: "Tab Container Item";
@@ -3786,6 +3829,7 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        title?: string | undefined;
         content?: string | number | undefined;
     }>>;
     readonly ThemeToggle: {

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

@@ -103,6 +103,7 @@ declare const declaration: {
             readonly license: "MIT";
             readonly website: "https://plitzi.com";
             readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-rectangle-list";
         };
         readonly defaultStyle: {
             readonly name: "Form";

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

@@ -92,7 +92,8 @@ var n = e()({
 			verified: !0,
 			license: "MIT",
 			website: "https://plitzi.com",
-			backgroundColor: "#4422ee"
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-rectangle-list"
 		},
 		defaultStyle: {
 			name: "Form",

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

@@ -2,7 +2,11 @@ import { ChangeEvent, RefObject } from 'react';
 export type FormControlProps = {
     ref: RefObject<HTMLElement>;
     className: string;
-    subType: 'text' | 'number' | 'email' | 'password' | 'date' | 'time' | 'checkbox' | 'switch' | 'select' | 'textarea' | 'hidden'
+    subType: 'text' | 'number' | 'email' | 'password'
+    /** A search box: the browser draws its clear button, and a phone shows its search key. */
+     | 'search' | 'url'
+    /** A phone number: a phone shows its dial pad. */
+     | 'tel' | 'date' | 'time' | 'checkbox' | 'switch' | 'select' | 'textarea' | 'hidden'
     /** The browser's own colour picker: its value is `#rrggbb`. */
      | 'color';
     name: string;

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

@@ -97,6 +97,9 @@ var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label:
 				"number",
 				"email",
 				"password",
+				"search",
+				"url",
+				"tel",
 				"date",
 				"time",
 				"color"

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

@@ -1,5 +1,5 @@
 type SettingsProps = {
-    subType?: 'text' | 'number' | 'date' | 'time' | 'email' | 'password' | 'select' | 'checkbox' | 'textarea' | 'hidden' | 'color' | 'switch';
+    subType?: 'text' | 'number' | 'date' | 'time' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'select' | 'checkbox' | 'textarea' | 'hidden' | 'color' | 'switch';
     name?: string;
     label?: string;
     hideLabel?: boolean;

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

@@ -15,7 +15,10 @@ var l = (e) => {
 		"textarea",
 		"number",
 		"email",
-		"password"
+		"password",
+		"search",
+		"url",
+		"tel"
 	].includes(u), F = t((e) => N?.("name", e), [N]), I = t((e) => N?.("label", e), [N]), L = t((e) => N?.("hideLabel", e.target.checked), [N]), ee = t((e) => N?.("placeholder", e), [N]), R = t((e) => {
 		N?.("subType", e), N?.("defaultValue", "");
 	}, [N]), z = t((e) => N?.("defaultValue", e), [N]), B = t((e) => N?.("autoFocus", e.target.checked), [N]), V = t((e) => N?.("autoComplete", e.target.checked), [N]), H = t((e) => N?.("required", e.target.checked), [N]), U = t((e) => N?.("requiredMessage", e), [N]), W = t((e) => N?.("minLength", l(e)), [N]), G = t((e) => N?.("minLengthMessage", e), [N]), K = t((e) => N?.("maxLength", l(e)), [N]), q = t((e) => N?.("maxLengthMessage", e), [N]), J = t((e) => N?.("formatMessage", e), [N]), Y = t((e) => N?.("pattern", e), [N]), X = t((e) => N?.("patternMessage", e), [N]), Z = t((e) => N?.("matches", e), [N]), Q = t((e) => N?.("matchesMessage", e), [N]), $ = t((e) => N?.("readOnly", e.target.checked), [N]), te = t((e) => N?.("disabled", e.target.checked), [N]), ne = t((e) => N?.("previewError", e.target.checked), [N]), re = t((e) => {
@@ -78,6 +81,18 @@ var l = (e) => {
 						value: "email",
 						children: "Email"
 					}),
+					/* @__PURE__ */ r("option", {
+						value: "search",
+						children: "Search"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "url",
+						children: "URL"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "tel",
+						children: "Phone"
+					}),
 					/* @__PURE__ */ r("option", {
 						value: "password",
 						children: "Password"

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

@@ -79,6 +79,7 @@ declare const declaration: {
             readonly license: "MIT";
             readonly website: "https://plitzi.com";
             readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-i-cursor";
         };
         readonly defaultStyle: {
             readonly name: "Form Control";

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

@@ -51,6 +51,9 @@ var n = {
 		"number",
 		"email",
 		"password",
+		"search",
+		"url",
+		"tel",
 		"date",
 		"time",
 		"checkbox",
@@ -98,7 +101,7 @@ var n = {
 		definition: {
 			label: "Form Control",
 			type: "formControl",
-			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input.",
+			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes.",
 			bindings: {},
 			styleSelectors: {
 				base: "",
@@ -123,7 +126,8 @@ var n = {
 			verified: !0,
 			license: "MIT",
 			website: "https://plitzi.com",
-			backgroundColor: "#4422ee"
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-i-cursor"
 		},
 		defaultStyle: {
 			name: "Form Control",

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

@@ -1,55 +1,63 @@
 import e from "../../../Element/hocs/withElement.mjs";
 import t from "../../../Element/hooks/useElement.mjs";
 import { RootElement as n } from "../../../Element/RootElement.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";
+import { boxOf as r, maskFrameOf as i } from "./mask.mjs";
+import { useCallback as a, useEffect as o } from "react";
+import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { throttle as c } from "@plitzi/plitzi-ui/helpers";
+import { jsx as l } from "react/jsx-runtime";
+import u from "clsx";
 //#region src/elements/internal/LayoutContainer/LayoutContainer.tsx
-var l = ".plitzi-component__layout-container", u = ".plitzi-component--layout-body", d = (e) => [...e.querySelectorAll(u)].find((e) => !e.querySelector(u)) ?? null, f = ({ ref: e, className: u = "", children: f, subType: p = "div" }) => {
-	let { plitziElementLayout: m } = t(), { settings: { previewMode: h } } = a(), g = r((e, t) => {
+var d = ".plitzi-component__layout-container", f = ".plitzi-component--layout-body", p = (e) => [...e.querySelectorAll(f)].find((e) => !e.querySelector(f)) ?? null, m = ({ ref: e, className: f = "", children: m, subType: h = "div" }) => {
+	let { plitziElementLayout: g } = t(), { settings: { previewMode: _ } } = s(), v = a((e, t) => {
 		if (!e) return;
 		if (!t) {
 			e.style.removeProperty("--child-clip");
 			return;
 		}
-		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = e.offsetWidth > 0 ? n.width / e.offsetWidth : 1, a = (r.top - n.top) / i, o = (r.left - n.left) / i, s = o + r.width / i, c = a + r.height / i, l = `
+		let n = r(t);
+		if (!n) {
+			e.style.removeProperty("--child-clip");
+			return;
+		}
+		let a = i(e), o = a.getBoundingClientRect(), s = a.offsetWidth > 0 ? o.width / a.offsetWidth : 1, c = (n.top - o.top) / s - a.clientTop, l = (n.left - o.left) / s - a.clientLeft, u = l + n.width / s, d = c + n.height / s, f = `
       polygon(
         evenodd,
         /* outer rect */
         0 0, 100% 0, 100% 100%, 0% 100%, 0 0,
         /* inner rect */ 
-        ${o}px ${a}px, ${s}px ${a}px, ${s}px ${c}px, ${o}px ${c}px, ${o}px ${a}px
+        ${l}px ${c}px, ${u}px ${c}px, ${u}px ${d}px, ${l}px ${d}px, ${l}px ${c}px
       )`;
-		e.style.setProperty("--child-clip", l);
+		e.style.setProperty("--child-clip", f);
 	}, []);
-	return i(() => {
+	return o(() => {
 		let t = e?.current;
-		if (!m || !t || h || t.parentElement?.closest(l)) return;
-		let n = null, r = o(() => {
-			let e = d(t);
-			e !== n && (n && i.unobserve(n), e && i.observe(e), n = e), g(t, e);
-		}, 50), i = new ResizeObserver(r);
-		i.observe(t);
-		let a = new MutationObserver(r);
-		return a.observe(t, {
+		if (!g || !t || _ || t.parentElement?.closest(d)) return;
+		let n = null, r = c(() => {
+			let e = p(t);
+			e !== n && (n && a.unobserve(n), e && a.observe(e), n = e), v(t, e);
+		}, 50), a = new ResizeObserver(r);
+		a.observe(t);
+		let o = i(t);
+		o !== t && a.observe(o);
+		let s = new MutationObserver(r);
+		return s.observe(t, {
 			childList: !0,
 			subtree: !0
 		}), t.addEventListener("scroll", r, !0), r(), () => {
-			r.cancel(), i.disconnect(), a.disconnect(), t.removeEventListener("scroll", r, !0);
+			r.cancel(), a.disconnect(), s.disconnect(), t.removeEventListener("scroll", r, !0);
 		};
 	}, [
-		m,
-		h,
+		g,
+		_,
 		e,
-		g
-	]), /* @__PURE__ */ s(n, {
+		v
+	]), /* @__PURE__ */ l(n, {
 		ref: e,
-		tag: p,
-		className: c("plitzi-component__layout-container", u),
-		children: f
+		tag: h,
+		className: u("plitzi-component__layout-container", f),
+		children: m
 	});
-}, p = e(f);
+}, h = e(m);
 //#endregion
-export { f as LayoutContainer, p as default };
+export { m as LayoutContainer, h as default };

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

@@ -0,0 +1,11 @@
+/**
+ * The box an element draws on screen: its own — or, for one with `display: contents`, which draws none, the box around
+ * what it holds. A shell or a slot that only marks where something goes is written that way, and measured as itself it
+ * is a rect of zeros: the hole closes and the whole page is dimmed.
+ */
+export declare const boxOf: (element: Element) => DOMRect | undefined;
+/**
+ * The box the mask is drawn in. The mask is the layout's `::before`, placed over its containing block: the layout's own
+ * box — or, when the layout draws none, the nearest ancestor that positions what it holds.
+ */
+export declare const maskFrameOf: (layout: HTMLElement) => HTMLElement;

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

@@ -0,0 +1,14 @@
+//#region src/elements/internal/LayoutContainer/mask.ts
+var e = (e) => getComputedStyle(e).display === "contents", t = (n) => {
+	if (!e(n)) return n.getBoundingClientRect();
+	let r = [...n.children].map(t).filter((e) => e !== void 0 && (e.width > 0 || e.height > 0));
+	if (r.length === 0) return;
+	let i = Math.min(...r.map((e) => e.left)), a = Math.min(...r.map((e) => e.top));
+	return new DOMRect(i, a, Math.max(...r.map((e) => e.right)) - i, Math.max(...r.map((e) => e.bottom)) - a);
+}, n = (t) => {
+	if (!e(t)) return t;
+	for (let e = t.parentElement; e; e = e.parentElement) if (getComputedStyle(e).position !== "static") return e;
+	return t.ownerDocument.documentElement;
+};
+//#endregion
+export { t as boxOf, n as maskFrameOf };

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

@@ -27,8 +27,14 @@ export type ImageProps = {
      *  so nothing jumps. */
     width?: number;
     height?: number;
+    /**
+     * Whether the page server may make sizes of the picture, when it does (`images` in its configuration). `false` keeps
+     * this one as it is — a picture already sized for where it sits, or one its host must serve itself. A vector (SVG) is
+     * never resized.
+     */
+    resize?: boolean;
 };
-declare const Image: ({ ref, className, src: srcProp, alt: altProp, decorative, fetchPriority, loadMode, sizes, width, height }: ImageProps) => import('react').JSX.Element;
+declare const Image: ({ ref, className, src: srcProp, alt: altProp, decorative, fetchPriority, loadMode, sizes, width, height, resize }: ImageProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ImageProps>): import('react').JSX.Element;
     displayName: string;

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

@@ -6,16 +6,16 @@ import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { useCommonStore as o } from "@plitzi/sdk-shared/store";
 import { jsx as s } from "react/jsx-runtime";
 import c from "clsx";
-import { imageSrcSet as l, imageUrl as u, isRemoteImage as d } from "@plitzi/sdk-shared/helpers/images";
+import { imageSrcSet as l, imageUrl as u, isResizableImage as d } from "@plitzi/sdk-shared/helpers/images";
 //#region src/elements/media/Image/Image.tsx
-var f = 1280, p = n(), m = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", h = ({ ref: e, className: n = "", src: h, alt: g = "", decorative: _ = !1, fetchPriority: v = "auto", loadMode: y, sizes: b = "100vw", width: x, height: S }) => {
-	let { settings: { previewMode: C } } = a(), w = h || m, T = _ ? "" : g, [E, D] = i(void 0), O = E === w, k = r(() => D(w), [w]), A = O ? p : w, j = O ? { "data-plitzi-failed": w } : {}, M = y === "auto" ? void 0 : y, [N] = o("images.endpoint"), P = C && N && !O && d(w) ? {
+var f = 1280, p = n(), m = ({ ref: e, className: n = "", src: m, alt: h = "", decorative: g = !1, fetchPriority: _ = "auto", loadMode: v, sizes: y = "100vw", width: b, height: x, resize: S = !0 }) => {
+	let { settings: { previewMode: C } } = a(), w = m || p, T = g ? "" : h, [E, D] = i(void 0), O = E === w, k = r(() => D(w), [w]), A = O ? p : w, j = O ? { "data-plitzi-failed": w } : {}, M = v === "auto" ? void 0 : v, [N] = o("images.endpoint"), P = C && N && S && !O && d(w) ? {
 		src: u(N, w, f),
 		srcSet: l(N, w),
-		sizes: b
+		sizes: y
 	} : { src: A }, F = {
-		...x ? { width: x } : {},
-		...S ? { height: S } : {}
+		...b ? { width: b } : {},
+		...x ? { height: x } : {}
 	};
 	return C ? /* @__PURE__ */ s(t, {
 		tag: "img",
@@ -26,7 +26,7 @@ var f = 1280, p = n(), m = "https://cdn.plitzi.com/resources/img/placeholder-img
 		...F,
 		alt: T,
 		loading: M,
-		fetchPriority: v,
+		fetchPriority: _,
 		onError: O ? void 0 : k,
 		...j
 	}) : /* @__PURE__ */ s(t, {
@@ -37,11 +37,11 @@ var f = 1280, p = n(), m = "https://cdn.plitzi.com/resources/img/placeholder-img
 			src: A,
 			alt: T,
 			loading: M,
-			fetchPriority: v,
+			fetchPriority: _,
 			onError: O ? void 0 : k,
 			...j
 		})
 	});
-}, g = e(h);
+}, h = e(m);
 //#endregion
-export { h as Image, g as default };
+export { m as Image, h as default };

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

@@ -10,7 +10,7 @@ declare const declaration: {
     };
     readonly content: {
         readonly attributes: {
-            readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
+            readonly src: "";
             readonly alt: "";
             readonly decorative: false;
             readonly fetchPriority: "auto";
@@ -62,6 +62,7 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    resize?: boolean | undefined;
     height?: number | undefined;
     width?: number | undefined;
     fetchPriority?: "high" | "low" | "auto" | undefined;

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

@@ -16,7 +16,7 @@ var n = e()({
 	},
 	content: {
 		attributes: {
-			src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg",
+			src: "",
 			alt: "",
 			decorative: !1,
 			fetchPriority: "auto",

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

@@ -9,7 +9,7 @@ declare const Image: {
     };
     readonly content: {
         readonly attributes: {
-            readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
+            readonly src: "";
             readonly alt: "";
             readonly decorative: false;
             readonly fetchPriority: "auto";
@@ -61,6 +61,7 @@ declare const Image: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    resize?: boolean | undefined;
     height?: number | undefined;
     width?: number | undefined;
     fetchPriority?: "high" | "low" | "auto" | undefined;

package/dist/elements/provider/ApiContainer/ApiContainer.d.ts

@@ -27,6 +27,14 @@ export type ApiContainerProps = {
      * route and query params, and answers whatever its output step returns.
      */
     action?: string;
+    /**
+     * What a server provider asks its action with, on top of the page's own route and query params — a search, a filter.
+     *
+     * Saved, it is what the page server resolves the first paint with. Bound — to a state the visitor changes — every
+     * change asks again with the new value, the way a bound `query` does for a browser provider; `reloadApi` with an
+     * input asks once.
+     */
+    input?: Record<string, unknown> | string;
     /** Which of the connector's read endpoints to execute. Defaults to `list`. */
     endpoint?: string;
     /** Content type / collection read through the connector. */
@@ -75,7 +83,7 @@ export type ApiContainerProps = {
      */
     refreshSeconds?: number | string;
 };
-declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, loadingSlot, cache, staleTime, gcTime, refreshSeconds }: ApiContainerProps) => import('react').JSX.Element;
+declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, loadingSlot, cache, staleTime, gcTime, refreshSeconds, connector, action, input }: ApiContainerProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ApiContainerProps>): import('react').JSX.Element;
     displayName: string;