@plitzi/sdk-elements 0.38.2 → 0.38.4

package/dist/canvas/useCanvas.d.ts

@@ -0,0 +1,51 @@
+import { AnimationFrameOptions, Frame } from './useAnimationFrame';
+/** The canvas as it is laid out, in CSS pixels, and how many device pixels each of those holds. */
+export interface CanvasSize {
+    width: number;
+    height: number;
+    pixelRatio: number;
+}
+export interface CanvasOptions<C, S> extends Omit<AnimationFrameOptions, 'target'> {
+    /**
+     * Once per context — and again after a lost WebGL context comes back: buffers, programs, gradients. What it returns
+     * is handed to every `draw`. A `ShaderError` (see `createShaderProgram`) or anything else it throws is printed with
+     * the element it belongs to, and nothing is drawn.
+     */
+    setup?: (context: C, size: CanvasSize) => S;
+    /** One frame, in CSS pixels: a 2D context is already scaled to the device's pixels, a WebGL viewport set to them. */
+    draw: (context: C, frame: Frame & CanvasSize & {
+        state: S;
+    }) => void;
+    /** The most device pixels per CSS pixel drawn — a phone at 3 draws nine times a 1× screen's work for little to see. */
+    maxPixelRatio?: number;
+}
+export interface CanvasHandle {
+    /** For the `<canvas>`: `<canvas ref={ref} />`, inside the plugin's `RootElement`. */
+    ref: (canvas: HTMLCanvasElement | null) => void;
+    /** Whether a frame was drawn — until then, what the server rendered (a still image) is what to show. */
+    ready: boolean;
+    /** What failed — setup, a draw, a shader — when something did; the loop is stopped. */
+    error: string | undefined;
+    /** Whether it is animating, or holding the one still frame it drew. */
+    running: boolean;
+}
+type Canvas2dOptions<S> = CanvasOptions<CanvasRenderingContext2D, S> & {
+    attributes?: CanvasRenderingContext2DSettings;
+};
+type WebGLOptions<C, S> = CanvasOptions<C, S> & {
+    attributes?: WebGLContextAttributes;
+};
+/**
+ * A 2D canvas that animates: `draw(ctx, { time, width, height })` in CSS pixels, every frame it should.
+ *
+ * ```tsx
+ * const { ref } = useCanvas2d({ draw: (ctx, { time, width, height }) => { ctx.clearRect(0, 0, width, height); … } });
+ * return <RootElement className={className}><canvas ref={ref} /></RootElement>;
+ * ```
+ */
+export declare const useCanvas2d: <S = undefined>({ attributes, ...options }: Canvas2dOptions<S>) => CanvasHandle;
+/** A WebGL (1) canvas that animates; `setup` compiles with `createShaderProgram`, which says why a shader failed. */
+export declare const useWebGL: <S = undefined>({ attributes, ...options }: WebGLOptions<WebGLRenderingContext, S>) => CanvasHandle;
+/** The same over WebGL 2 — GLSL ES 3.00, where the browser has it; `error` says so where it does not. */
+export declare const useWebGL2: <S = undefined>({ attributes, ...options }: WebGLOptions<WebGL2RenderingContext, S>) => CanvasHandle;
+export {};

package/dist/canvas/useCanvas.mjs

@@ -0,0 +1,133 @@
+import e from "../Element/ElementContext.mjs";
+import t from "./useAnimationFrame.mjs";
+import { use as n, useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+//#region src/canvas/useCanvas.ts
+var s = (e) => `[plugin ${e?.definition?.type ?? "canvas"}${e?.id ? ` "${e.id}"` : ""}]`, c = (c, { setup: l, draw: u, maxPixelRatio: d = 2, paused: f, fps: p }) => {
+	let m = s(n(e)), h = a(null), [g, _] = o(null), [v, y] = o({
+		width: 0,
+		height: 0,
+		pixelRatio: 1
+	}), [b, x] = o(), [S, C] = o(!1), [w, T] = o(0), E = a(null), D = a({
+		acquire: c,
+		setup: l,
+		draw: u
+	});
+	i(() => {
+		D.current = {
+			acquire: c,
+			setup: l,
+			draw: u
+		};
+	}, [
+		c,
+		l,
+		u
+	]);
+	let O = r((e) => {
+		let t = e instanceof Error ? e.message : String(e);
+		console.error(`${m} ${t}`), x(t);
+	}, [m]), k = r((e) => {
+		h.current = e, _(e);
+	}, []);
+	i(() => {
+		if (!g) return;
+		let e = () => {
+			let e = g.getBoundingClientRect(), t = Math.min(window.devicePixelRatio || 1, d);
+			g.width = Math.max(1, Math.round(e.width * t)), g.height = Math.max(1, Math.round(e.height * t)), y({
+				width: e.width,
+				height: e.height,
+				pixelRatio: t
+			});
+		};
+		if (e(), typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(e);
+		return t.observe(g), () => t.disconnect();
+	}, [g, d]), i(() => {
+		if (!g) return;
+		let e = (e) => {
+			e.preventDefault(), E.current = null, C(!1);
+		}, t = () => T((e) => e + 1);
+		return g.addEventListener("webglcontextlost", e), g.addEventListener("webglcontextrestored", t), () => {
+			g.removeEventListener("webglcontextlost", e), g.removeEventListener("webglcontextrestored", t);
+		};
+	}, [g]), i(() => {
+		if (g && v.width !== 0 && b === void 0) try {
+			let e = D.current.acquire(g);
+			if (!e) {
+				O(/* @__PURE__ */ Error("the browser gave no drawing context (WebGL may be off)"));
+				return;
+			}
+			e.prepare(v);
+			let t = D.current.setup ? D.current.setup(e.context, v) : void 0;
+			E.current = {
+				handle: e,
+				state: t
+			};
+		} catch (e) {
+			O(e);
+		}
+	}, [
+		g,
+		v,
+		w,
+		b,
+		O
+	]);
+	let A = r((e) => {
+		let t = E.current;
+		if (t && b === void 0) try {
+			t.handle.prepare(v), D.current.draw(t.handle.context, {
+				...e,
+				...v,
+				state: t.state
+			}), C(!0);
+		} catch (e) {
+			E.current = null, O(e);
+		}
+	}, [
+		v,
+		b,
+		O
+	]), { running: j } = t(A, {
+		paused: f || b !== void 0,
+		fps: p,
+		target: h
+	});
+	return i(() => {
+		!j && v.width > 0 && A({
+			time: 0,
+			delta: 0,
+			frame: 0
+		});
+	}, [
+		j,
+		v,
+		w,
+		A
+	]), {
+		ref: k,
+		ready: S,
+		error: b,
+		running: j
+	};
+}, l = ({ attributes: e, ...t }) => c(r((t) => {
+	let n = t.getContext("2d", e);
+	return n && {
+		context: n,
+		prepare: ({ pixelRatio: e }) => n.setTransform(e, 0, 0, e, 0, 0)
+	};
+}, [e]), t), u = ({ attributes: e, ...t }) => c(r((t) => {
+	let n = t.getContext("webgl", e);
+	return n && {
+		context: n,
+		prepare: () => n.viewport(0, 0, t.width, t.height)
+	};
+}, [e]), t), d = ({ attributes: e, ...t }) => c(r((t) => {
+	let n = t.getContext("webgl2", e);
+	return n && {
+		context: n,
+		prepare: () => n.viewport(0, 0, t.width, t.height)
+	};
+}, [e]), t);
+//#endregion
+export { l as useCanvas2d, u as useWebGL, d as useWebGL2 };

package/dist/canvas/useReducedMotion.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Whether the visitor asked for less motion: their system's setting, or the QA tab's switch. What the CSS of a space
+ * already honours, for the motion a plugin draws itself. False on the server, which draws no motion either way.
+ */
+declare const useReducedMotion: () => boolean;
+export default useReducedMotion;

package/dist/canvas/useReducedMotion.mjs

@@ -0,0 +1,15 @@
+import { useSyncExternalStore as e } from "react";
+//#region src/canvas/useReducedMotion.ts
+var t = "(prefers-reduced-motion: reduce)", n = "plitzi-reduced-motion", r = () => typeof window.matchMedia == "function" && window.matchMedia(t).matches || document.documentElement.classList.contains(n), i = (e) => {
+	let n = typeof window.matchMedia == "function" ? window.matchMedia(t) : void 0;
+	n?.addEventListener("change", e);
+	let r = new MutationObserver(e);
+	return r.observe(document.documentElement, {
+		attributes: !0,
+		attributeFilter: ["class"]
+	}), () => {
+		n?.removeEventListener("change", e), r.disconnect();
+	};
+}, a = () => e(i, r, () => !1);
+//#endregion
+export { a as default };

package/dist/elements/basic/Button/Button.d.ts

@@ -24,6 +24,11 @@ export type ButtonProps = {
     ariaExpanded?: boolean;
     /** For a button that stays on or off — a filter, a mode: `true` while it is on. Left out, it is a plain button. */
     ariaPressed?: boolean;
+    /**
+     * What the button shows and hides — an accordion's panel, a menu — by its anchor (`aria-controls`), so a screen
+     * reader can go from one to the other. Authoring takes the element's id and gives that element the anchor.
+     */
+    controls?: string;
     /**
      * What the button does, in words — shown as a tooltip on hover, and the button's accessible name when it has no text
      * of its own. An icon-only button without one is announced as nothing at all.
@@ -40,7 +45,7 @@ export type ButtonProps = {
      */
     label?: string;
 };
-declare const Button: ({ ref, className, children, contentPlacement, content, icon, iconPlacement, subType, disabled, ariaExpanded, ariaPressed, title, label }: ButtonProps) => import('react').JSX.Element;
+declare const Button: ({ ref, className, children, contentPlacement, content, icon, iconPlacement, subType, disabled, ariaExpanded, ariaPressed, controls, title, label }: ButtonProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ButtonProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/basic/Button/Button.mjs

@@ -6,31 +6,32 @@ import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import s from "clsx";
 //#region src/elements/basic/Button/Button.tsx
-var c = ({ ref: e, className: c = "", children: l, contentPlacement: u = "after", content: d = "Button", icon: f = "", iconPlacement: p = "before", subType: m = "button", disabled: h = !1, ariaExpanded: g, ariaPressed: _, title: v, label: y }) => {
-	let { settings: { previewMode: b } } = i(), { definition: { styleSelectors: x } } = t();
+var c = ({ ref: e, className: c = "", children: l, contentPlacement: u = "after", content: d = "Button", icon: f = "", iconPlacement: p = "before", subType: m = "button", disabled: h = !1, ariaExpanded: g, ariaPressed: _, controls: v, title: y, label: b }) => {
+	let { settings: { previewMode: x } } = i(), { definition: { styleSelectors: S } } = t();
 	return /* @__PURE__ */ o(n, {
 		ref: e,
 		tag: "button",
-		type: b ? m : "button",
-		className: s("plitzi-component__button", c, { "container--empty--skip": !b && !l && (d || f) }),
+		type: x ? m : "button",
+		className: s("plitzi-component__button", c, { "container--empty--skip": !x && !l && (d || f) }),
 		disabled: h,
-		title: v || void 0,
-		"aria-label": y || void 0,
+		title: y || void 0,
+		"aria-label": b || void 0,
 		"aria-expanded": g,
 		"aria-pressed": _,
+		"aria-controls": v || void 0,
 		children: [
 			u === "before" && /* @__PURE__ */ a(r, {
 				content: d,
 				icon: f,
 				iconPlacement: p,
-				iconClassName: x.icon
+				iconClassName: S.icon
 			}),
 			l,
 			u === "after" && /* @__PURE__ */ a(r, {
 				content: d,
 				icon: f,
 				iconPlacement: p,
-				iconClassName: x.icon
+				iconClassName: S.icon
 			})
 		]
 	});

package/dist/elements/basic/Button/declaration.d.ts

@@ -131,6 +131,7 @@ declare const declaration: {
     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;

package/dist/elements/basic/Button/index.d.ts

@@ -130,6 +130,7 @@ declare const Button: {
     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;

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

@@ -424,6 +424,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 +743,7 @@ export declare const elementDeclarations: {
         readonly type: "container";
         readonly attributeValues: {
             readonly subType: readonly string[];
+            readonly live: readonly string[];
         };
         readonly content: {
             readonly attributes: {
@@ -792,7 +794,8 @@ 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;
+        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: {
@@ -2135,7 +2138,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 +2190,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;

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.mjs

@@ -51,6 +51,9 @@ var n = {
 		"number",
 		"email",
 		"password",
+		"search",
+		"url",
+		"tel",
 		"date",
 		"time",
 		"checkbox",

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

@@ -75,7 +75,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 }: ApiContainerProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ApiContainerProps>): import('react').JSX.Element;
     displayName: string;