@plitzi/sdk-elements 0.37.8 → 0.37.10

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

@@ -0,0 +1,70 @@
+import { EmbedProps } from './Embed';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type EmbedAttributes = AuthorableAttributes<EmbedProps>;
+declare const declaration: {
+    readonly type: "embed";
+    readonly content: {
+        readonly attributes: {
+            readonly src: "";
+            readonly title: "";
+            readonly loading: "lazy";
+        };
+        readonly definition: {
+            readonly label: "Embed";
+            readonly type: "embed";
+            readonly description: "Another page inside this one — a map, a video player, a form — in a frame.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canSnippet: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "media";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-window-maximize";
+        };
+        readonly defaultStyle: {
+            readonly name: "Embed";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "block";
+                        readonly width: "100%";
+                        readonly 'aspect-ratio': "16 / 9";
+                        readonly 'border-top-width': "0px";
+                        readonly 'border-right-width': "0px";
+                        readonly 'border-bottom-width': "0px";
+                        readonly 'border-left-width': "0px";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    title?: string | undefined;
+    referrerPolicy?: "no-referrer" | "origin" | "strict-origin-when-cross-origin" | "no-referrer-when-downgrade" | undefined;
+    src?: string | undefined;
+    allow?: string | undefined;
+    loading?: "lazy" | "eager" | undefined;
+    sandbox?: string | undefined;
+}>>;
+export default declaration;

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

@@ -0,0 +1,54 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/media/Embed/declaration.ts
+var t = e()({
+	type: "embed",
+	content: {
+		attributes: {
+			src: "",
+			title: "",
+			loading: "lazy"
+		},
+		definition: {
+			label: "Embed",
+			type: "embed",
+			description: "Another page inside this one — a map, a video player, a form — in a frame.",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canSnippet: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "media",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-window-maximize"
+		},
+		defaultStyle: {
+			name: "Embed",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "block",
+				width: "100%",
+				"aspect-ratio": "16 / 9",
+				"border-top-width": "0px",
+				"border-right-width": "0px",
+				"border-bottom-width": "0px",
+				"border-left-width": "0px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/media/Embed/embeddableSrc.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A frame loads what its `src` names in this page's origin when that is a `javascript:` URL, so only a web address
+ * or a path of the site is loaded.
+ */
+export declare const embeddableSrc: (src: string) => string | undefined;

package/dist/elements/media/Embed/embeddableSrc.mjs

@@ -0,0 +1,4 @@
+//#region src/elements/media/Embed/embeddableSrc.ts
+var e = (e) => /^(https?:)?\/\//i.test(e) || e.startsWith("/") && !e.startsWith("//") ? e : void 0;
+//#endregion
+export { e as embeddableSrc };

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

@@ -0,0 +1,69 @@
+declare const Embed: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Embed').EmbedProps>): import('react').JSX.Element;
+    displayName: string;
+} & {
+    readonly type: "embed";
+    readonly content: {
+        readonly attributes: {
+            readonly src: "";
+            readonly title: "";
+            readonly loading: "lazy";
+        };
+        readonly definition: {
+            readonly label: "Embed";
+            readonly type: "embed";
+            readonly description: "Another page inside this one — a map, a video player, a form — in a frame.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canSnippet: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "media";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-window-maximize";
+        };
+        readonly defaultStyle: {
+            readonly name: "Embed";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "block";
+                        readonly width: "100%";
+                        readonly 'aspect-ratio': "16 / 9";
+                        readonly 'border-top-width': "0px";
+                        readonly 'border-right-width': "0px";
+                        readonly 'border-bottom-width': "0px";
+                        readonly 'border-left-width': "0px";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    title?: string | undefined;
+    referrerPolicy?: "no-referrer" | "origin" | "strict-origin-when-cross-origin" | "no-referrer-when-downgrade" | undefined;
+    src?: string | undefined;
+    allow?: string | undefined;
+    loading?: "lazy" | "eager" | undefined;
+    sandbox?: string | undefined;
+}>>;
+export default Embed;

package/dist/elements/media/Embed/index.mjs

@@ -0,0 +1,6 @@
+import e from "./declaration.mjs";
+import t from "./Embed.mjs";
+//#region src/elements/media/Embed/index.ts
+var n = Object.assign(t, e);
+//#endregion
+export { n as default };

package/dist/elements/media/FontAwesome/Settings.mjs

@@ -1,156 +1,88 @@
-import { useCallback as e, useEffect as t, useMemo as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "clsx";
-import s from "@plitzi/plitzi-ui/Input";
-import c from "@plitzi/plitzi-ui/Select";
+import e from "../../../components/IconPicker/IconPicker.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/media/FontAwesome/Settings.tsx
-var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", label: f = "", onUpdate: p }) => {
-	let [m, h] = r({}), [g, _] = r(""), [v, y] = r(!1), [b, x] = r(""), S = e((e) => () => p?.("icon", e), [p]), C = n(() => Object.keys(m).map((e) => {
-		let { styles: t, label: n } = m[e];
-		if (!n.toLowerCase().includes(b.toLowerCase())) return [];
-		let r = [];
-		return t.forEach((t) => {
-			if (g !== "" && t !== g) return;
-			let a = "fa";
-			switch (t) {
-				case "brands":
-					a = "fab";
-					break;
-				case "regular":
-					a = "far";
-					break;
-				case "solid": a = "fas";
-			}
-			let s = `${a} fa-${e}`;
-			r.push(/* @__PURE__ */ i("div", {
-				className: o("flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-1 hover:bg-blue-200 hover:text-white", { "bg-[#339af0] text-white": s === l }),
-				onClick: S(s),
-				title: `${n} - [${e}]`,
-				children: /* @__PURE__ */ i("i", { className: s }, `${e}_${a}`)
-			}, s));
-		}), r;
-	}), [
-		l,
-		m,
-		b,
-		g,
-		S
-	]), w = async () => {
-		y(!0);
-		let e = await fetch("https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/metadata/icons.json");
-		h(await e.json()), y(!1);
-	};
-	t(() => {
-		w();
-	}, []);
-	let T = e((e) => x(e), []), E = e((e) => (t) => p?.(e, t), [p]), D = e((e) => _(e), []);
-	return /* @__PURE__ */ a("div", {
+var o = ({ icon: o = "", size: s = "fa-1x", iconAnimation: c = "", label: l = "", onUpdate: u }) => {
+	let d = t((e) => (t) => u?.(e, t), [u]);
+	return /* @__PURE__ */ r("div", {
 		className: "flex grow basis-0 flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ i(s, {
-				value: f,
+			/* @__PURE__ */ n(i, {
+				value: l,
 				label: "Meaning",
 				placeholder: "Only for an icon that says something alone",
-				onChange: E("label"),
+				onChange: d("label"),
 				size: "xs"
 			}),
-			/* @__PURE__ */ a(c, {
-				value: g,
-				placeholder: "All",
-				label: "Icon Type",
-				onChange: D,
-				size: "xs",
-				children: [
-					/* @__PURE__ */ i("option", {
-						value: "regular",
-						children: "Regular"
-					}),
-					/* @__PURE__ */ i("option", {
-						value: "solid",
-						children: "Solid"
-					}),
-					/* @__PURE__ */ i("option", {
-						value: "brands",
-						children: "Brands"
-					})
-				]
-			}),
-			/* @__PURE__ */ a(c, {
+			/* @__PURE__ */ r(a, {
 				label: "Icon Animation",
-				value: d,
+				value: c,
 				placeholder: "None",
-				onChange: E("iconAnimation"),
+				onChange: d("iconAnimation"),
 				size: "xs",
 				children: [
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-beat",
 						children: "Beat"
 					}),
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-fade",
 						children: "Fade"
 					}),
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-beat-fade",
 						children: "Beat-Fade"
 					}),
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-bounce",
 						children: "Bounce"
 					}),
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-flip",
 						children: "Flip"
 					}),
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-shake",
 						children: "Shake"
 					}),
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-spin",
 						children: "Spin"
 					})
 				]
 			}),
-			/* @__PURE__ */ a(c, {
-				value: u,
+			/* @__PURE__ */ r(a, {
+				value: s,
 				label: "Icon Size",
-				onChange: E("size"),
+				onChange: d("size"),
 				size: "xs",
 				children: [
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-1x",
 						children: "1X"
 					}),
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-2x",
 						children: "2X"
 					}),
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-3x",
 						children: "3X"
 					}),
-					/* @__PURE__ */ i("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fa-4x",
 						children: "4X"
 					})
 				]
 			}),
-			/* @__PURE__ */ i(s, {
-				value: b,
-				placeholder: "Search Icon...",
-				onChange: T,
-				size: "xs"
-			}),
-			/* @__PURE__ */ i("div", {
-				className: "flex grow basis-0 flex-col overflow-auto py-2",
-				children: /* @__PURE__ */ a("div", {
-					className: "flex flex-wrap items-center justify-center gap-1",
-					children: [v && /* @__PURE__ */ i("i", { className: "fa-solid fa-sync fa-spin fa-3x" }), !v && C]
-				})
+			/* @__PURE__ */ n(e, {
+				value: o,
+				onChange: d("icon")
 			})
 		]
 	});
 };
 //#endregion
-export { l as default };
+export { o as default };

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

@@ -27,7 +27,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -21,7 +21,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -26,7 +26,7 @@ declare const FontAwesome: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -17,8 +17,18 @@ export type ImageProps = {
     fetchPriority?: 'high' | 'low' | 'auto';
     /** `auto` leaves the choice to the browser — what the builder offers first. */
     loadMode?: 'auto' | 'eager' | 'lazy';
+    /**
+     * How wide the picture is drawn, for the browser to pick a size by before the layout exists: `'100vw'`, or
+     * `'(max-width: 48rem) 100vw, 360px'` for a card. Read when the page server resizes pictures (`images` in its
+     * configuration) and the `src` is another site's.
+     */
+    sizes?: string;
+    /** The picture's own width and height, in pixels (0 for not given): the browser keeps its space before it arrives,
+     *  so nothing jumps. */
+    width?: number;
+    height?: number;
 };
-declare const Image: ({ ref, className, src: srcProp, alt: altProp, decorative, fetchPriority, loadMode }: ImageProps) => import('react').JSX.Element;
+declare const Image: ({ ref, className, src: srcProp, alt: altProp, decorative, fetchPriority, loadMode, sizes, width, height }: 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

@@ -3,35 +3,45 @@ import { RootElement as t } from "../../../Element/RootElement.mjs";
 import { getFallbackSVGBase64 as n } from "./ImageHelper.mjs";
 import { useCallback as r, useState as i } from "react";
 import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsx as o } from "react/jsx-runtime";
-import s from "clsx";
+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";
 //#region src/elements/media/Image/Image.tsx
-var c = n(), l = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", u = ({ ref: e, className: n = "", src: u, alt: d = "", decorative: f = !1, fetchPriority: p = "auto", loadMode: m }) => {
-	let { settings: { previewMode: h } } = a(), g = u || l, _ = f ? "" : d, [v, y] = i(void 0), b = v === g, x = r(() => y(g), [g]), S = b ? c : g, C = b ? { "data-plitzi-failed": g } : {}, w = m === "auto" ? void 0 : m;
-	return h ? /* @__PURE__ */ o(t, {
+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) ? {
+		src: u(N, w, f),
+		srcSet: l(N, w),
+		sizes: b
+	} : { src: A }, F = {
+		...x ? { width: x } : {},
+		...S ? { height: S } : {}
+	};
+	return C ? /* @__PURE__ */ s(t, {
 		tag: "img",
 		draggable: !1,
 		ref: e,
-		className: s("plitzi-component__image", n),
-		src: S,
-		alt: _,
-		loading: w,
-		fetchPriority: p,
-		onError: b ? void 0 : x,
-		...C
-	}) : /* @__PURE__ */ o(t, {
+		className: c("plitzi-component__image", n),
+		...P,
+		...F,
+		alt: T,
+		loading: M,
+		fetchPriority: v,
+		onError: O ? void 0 : k,
+		...j
+	}) : /* @__PURE__ */ s(t, {
 		ref: e,
-		className: s("plitzi-component__image image--edit-mode", n),
-		children: /* @__PURE__ */ o("img", {
+		className: c("plitzi-component__image image--edit-mode", n),
+		children: /* @__PURE__ */ s("img", {
 			draggable: !1,
-			src: S,
-			alt: _,
-			loading: w,
-			fetchPriority: p,
-			onError: b ? void 0 : x,
-			...C
+			src: A,
+			alt: T,
+			loading: M,
+			fetchPriority: v,
+			onError: O ? void 0 : k,
+			...j
 		})
 	});
-}, d = e(u);
+}, g = e(h);
 //#endregion
-export { u as Image, d as default };
+export { h as Image, g as default };

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

@@ -4,8 +4,11 @@ type SettingsProps = {
     decorative?: boolean;
     fetchPriority?: 'high' | 'low' | 'auto';
     loadMode?: 'auto' | 'lazy' | 'eager';
+    sizes?: string;
+    width?: number;
+    height?: number;
     variables?: Record<string, string>;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ src, alt, decorative, variables, fetchPriority, loadMode, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ src, alt, decorative, variables, fetchPriority, loadMode, sizes, width, height, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -5,8 +5,8 @@ import a from "@plitzi/plitzi-ui/Checkbox";
 import o from "@plitzi/plitzi-ui/Input";
 import s from "@plitzi/plitzi-ui/Select";
 //#region src/elements/media/Image/Settings.tsx
-var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPriority: f = "auto", loadMode: p = "auto", onUpdate: m }) => {
-	let h = t(() => n(c, d, !0), [d, c]), g = e((e) => (t) => m?.(e, t), [m]), _ = e((e) => m?.("decorative", e.target.checked), [m]);
+var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPriority: f = "auto", loadMode: p = "auto", sizes: m = "100vw", width: h, height: g, onUpdate: _ }) => {
+	let v = t(() => n(c, d, !0), [d, c]), y = e((e) => (t) => _?.(e, t), [_]), b = e((e) => (t) => _?.(e, Math.max(0, Math.round(Number(t) || 0))), [_]), x = e((e) => _?.("decorative", e.target.checked), [_]);
 	return /* @__PURE__ */ i("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
@@ -15,15 +15,15 @@ var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPrio
 				children: [/* @__PURE__ */ r(o, {
 					value: c,
 					label: "Url",
-					onChange: g("src"),
+					onChange: y("src"),
 					size: "xs"
-				}), h && /* @__PURE__ */ i("div", {
+				}), v && /* @__PURE__ */ i("div", {
 					className: "relative mt-2 flex items-center justify-center rounded-sm border border-gray-300 p-2",
 					children: [/* @__PURE__ */ r("div", {
 						className: "absolute top-2 left-2 rounded-tl rounded-br border border-gray-300 bg-white p-1 text-xs",
 						children: "Preview"
 					}), /* @__PURE__ */ r("img", {
-						src: h,
+						src: v,
 						alt: "",
 						className: "h-full w-full rounded-sm"
 					})]
@@ -33,19 +33,19 @@ var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPrio
 				value: l,
 				label: "Alt Text",
 				placeholder: "What the picture shows, for who cannot see it",
-				onChange: g("alt"),
+				onChange: y("alt"),
 				size: "xs"
 			}),
 			/* @__PURE__ */ r(a, {
 				checked: u,
 				label: "Decorative (nothing to describe)",
-				onChange: _,
+				onChange: x,
 				size: "xs"
 			}),
 			/* @__PURE__ */ i(s, {
 				value: f,
 				label: "Fetch Priority",
-				onChange: g("fetchPriority"),
+				onChange: y("fetchPriority"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ r("option", {
@@ -65,7 +65,7 @@ var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPrio
 			/* @__PURE__ */ i(s, {
 				value: p,
 				label: "Load Mode",
-				onChange: g("loadMode"),
+				onChange: y("loadMode"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ r("option", {
@@ -81,6 +81,29 @@ var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPrio
 						children: "Eager"
 					})
 				]
+			}),
+			/* @__PURE__ */ r(o, {
+				value: m,
+				label: "Sizes",
+				placeholder: "(max-width: 48rem) 100vw, 360px",
+				onChange: y("sizes"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ r(o, {
+					type: "number",
+					value: h ? String(h) : "",
+					label: "Width (px)",
+					onChange: b("width"),
+					size: "xs"
+				}), /* @__PURE__ */ r(o, {
+					type: "number",
+					value: g ? String(g) : "",
+					label: "Height (px)",
+					onChange: b("height"),
+					size: "xs"
+				})]
 			})
 		]
 	});

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

@@ -33,7 +33,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -62,7 +62,10 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    height?: number | undefined;
+    width?: number | undefined;
     fetchPriority?: "high" | "low" | "auto" | undefined;
+    sizes?: string | undefined;
     src?: string | undefined;
     alt?: string | undefined;
     decorative?: boolean | undefined;

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

@@ -35,7 +35,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},