@plitzi/sdk-elements 0.37.9 → 0.38.1

package/dist/elements/declarations/index.mjs

@@ -19,59 +19,67 @@ import _ from "../internal/LayoutContainer/declaration.mjs";
 import v from "../internal/Loading/declaration.mjs";
 import y from "../internal/NotFound/declaration.mjs";
 import b from "../internal/Page/declaration.mjs";
-import x from "../media/FontAwesome/declaration.mjs";
-import S from "../media/Image/declaration.mjs";
-import C from "../media/Video/declaration.mjs";
-import w from "../provider/ApiContainer/declaration.mjs";
-import T from "../provider/Channel/declaration.mjs";
-import E from "../structure/Container/declaration.mjs";
-import D from "../structure/DialogContainer/declaration.mjs";
-import O from "../structure/List/declaration.mjs";
-import k from "../structure/List/ListItem/declaration.mjs";
-import A from "../structure/ModalContainer/declaration.mjs";
-import j from "../structure/Pagination/declaration.mjs";
-import M from "../structure/TabContainer/declaration.mjs";
-import N from "../structure/TabContainer/TabContainerBody/declaration.mjs";
-import P from "../structure/TabContainer/TabContainerHeader/declaration.mjs";
-import F from "../structure/TabContainer/TabContainerItem/declaration.mjs";
+import x from "../media/Embed/declaration.mjs";
+import S from "../media/FontAwesome/declaration.mjs";
+import C from "../media/Image/declaration.mjs";
+import w from "../media/Svg/declaration.mjs";
+import T from "../media/Video/declaration.mjs";
+import E from "../provider/ApiContainer/declaration.mjs";
+import D from "../provider/Channel/declaration.mjs";
+import O from "../structure/Carousel/declaration.mjs";
+import k from "../structure/Carousel/CarouselTrack/declaration.mjs";
+import A from "../structure/Container/declaration.mjs";
+import j from "../structure/DialogContainer/declaration.mjs";
+import M from "../structure/List/declaration.mjs";
+import N from "../structure/List/ListItem/declaration.mjs";
+import P from "../structure/ModalContainer/declaration.mjs";
+import F from "../structure/Pagination/declaration.mjs";
+import I from "../structure/TabContainer/declaration.mjs";
+import L from "../structure/TabContainer/TabContainerBody/declaration.mjs";
+import R from "../structure/TabContainer/TabContainerHeader/declaration.mjs";
+import z from "../structure/TabContainer/TabContainerItem/declaration.mjs";
 //#region src/elements/declarations/index.ts
-var I = {
-	ApiContainer: w,
+var B = {
+	ApiContainer: E,
 	BlockHtml: e,
 	BlockJsx: t,
 	Button: a,
-	Channel: T,
-	Container: E,
+	Carousel: O,
+	CarouselTrack: k,
+	Channel: D,
+	Container: A,
 	Custom: n,
-	DialogContainer: D,
+	DialogContainer: j,
 	Dropdown: o,
 	DropdownPopup: s,
-	FontAwesome: x,
+	Embed: x,
+	FontAwesome: S,
 	Form: h,
 	FormControl: g,
 	Heading: c,
-	Image: S,
+	Image: C,
 	LayoutContainer: _,
 	Link: l,
-	List: O,
-	ListItem: k,
+	List: M,
+	ListItem: N,
 	Loading: v,
 	Markdown: u,
-	ModalContainer: A,
+	ModalContainer: P,
 	NodeHtml: r,
 	NotFound: y,
 	Page: b,
-	Pagination: j,
+	Pagination: F,
 	Paragraph: d,
 	Reference: i,
 	RichText: f,
-	TabContainer: M,
-	TabContainerBody: N,
-	TabContainerHeader: P,
-	TabContainerItem: F,
+	Svg: w,
+	TabContainer: I,
+	TabContainerBody: L,
+	TabContainerHeader: R,
+	TabContainerItem: z,
 	Text: p,
 	ThemeToggle: m,
-	Video: C
+	Video: T
 };
 //#endregion
-export { w as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, T as ChannelDeclaration, E as ContainerDeclaration, n as CustomDeclaration, D as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, S as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, O as ListDeclaration, k as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, A as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, j as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, N as TabContainerBodyDeclaration, M as TabContainerDeclaration, P as TabContainerHeaderDeclaration, F as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, C as VideoDeclaration, I as elementDeclarations };
+export { E as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, O as CarouselDeclaration, k as CarouselTrackDeclaration, D as ChannelDeclaration, A as ContainerDeclaration, n as CustomDeclaration, j as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as EmbedDeclaration, S as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, C as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, M as ListDeclaration, N as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, P as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, F as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, w as SvgDeclaration, L as TabContainerBodyDeclaration, I as TabContainerDeclaration, R as TabContainerHeaderDeclaration, z as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, T as VideoDeclaration, B as elementDeclarations };

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

@@ -92,7 +92,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/form/Form/declaration.mjs

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

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

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

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

@@ -19,7 +19,7 @@ import y from "clsx";
 var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !0, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
 	let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = t(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = h(), { interactionsManager: H } = f(V), { useStore: U } = g(), [W] = U("runtime.sources.form"), G = p((e) => {
 		if (P?.(e), !B) return;
-		let t = e.target, n = t.type === "checkbox" || b === "switch" ? t.checked : t.value;
+		let { target: t } = e, n = t instanceof HTMLInputElement && (t.type === "checkbox" || b === "switch") ? t.checked : t.value;
 		H.interactionTrigger(I, "onChange", {
 			value: n,
 			name: x

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

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

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

@@ -113,7 +113,7 @@ var n = {
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !1,
+			canSnippet: !1,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

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

package/dist/elements/index.d.ts

@@ -18,11 +18,14 @@ import { default as LayoutContainer } from './internal/LayoutContainer';
 import { default as Loading } from './internal/Loading';
 import { default as NotFound } from './internal/NotFound';
 import { default as Page } from './internal/Page';
+import { default as Embed } from './media/Embed';
 import { default as FontAwesome } from './media/FontAwesome';
 import { default as Image } from './media/Image';
+import { default as Svg } from './media/Svg';
 import { default as Video } from './media/Video';
 import { default as ApiContainer } from './provider/ApiContainer';
 import { default as Channel } from './provider/Channel';
+import { default as Carousel } from './structure/Carousel';
 import { default as Container } from './structure/Container';
 import { default as DialogContainer } from './structure/DialogContainer';
 import { default as List } from './structure/List';
@@ -49,7 +52,9 @@ export * from './internal/LayoutContainer';
 export * from './internal/Loading';
 export * from './internal/Page';
 export * from './media/FontAwesome';
+export * from './media/Embed';
 export * from './media/Image';
+export * from './media/Svg';
 export * from './media/Video';
 export * from './provider/ApiContainer';
 export * from './provider/Channel';
@@ -58,5 +63,6 @@ export * from './structure/DialogContainer';
 export * from './structure/List';
 export * from './structure/ModalContainer';
 export * from './structure/Pagination';
+export * from './structure/Carousel';
 export * from './structure/TabContainer';
-export { NodeHtml, Dropdown, NotFound, Loading, Custom, Reference, BlockHtml, BlockJsx, Page, Container, LayoutContainer, DialogContainer, ModalContainer, TabContainer, Heading, Image, Video, FontAwesome, Button, Paragraph, RichText, Text, ThemeToggle, List, Link, Markdown, Pagination, Form, FormControl, ApiContainer, Channel };
+export { NodeHtml, Dropdown, NotFound, Loading, Custom, Reference, BlockHtml, BlockJsx, Page, Container, LayoutContainer, DialogContainer, ModalContainer, TabContainer, Carousel, Heading, Image, Video, Embed, Svg, FontAwesome, Button, Paragraph, RichText, Text, ThemeToggle, List, Link, Markdown, Pagination, Form, FormControl, ApiContainer, Channel };

package/dist/elements/index.mjs

@@ -19,50 +19,56 @@ import _ from "./internal/LayoutContainer/index.mjs";
 import v from "./internal/Loading/index.mjs";
 import { NotFound as y } from "./internal/NotFound/index.mjs";
 import b from "./internal/Page/index.mjs";
-import x from "./media/FontAwesome/index.mjs";
-import S from "./media/Image/index.mjs";
-import C from "./media/Video/index.mjs";
-import w from "./provider/ApiContainer/index.mjs";
-import T from "./provider/Channel/index.mjs";
-import E from "./structure/Container/index.mjs";
-import D from "./structure/DialogContainer/index.mjs";
-import O from "./structure/List/index.mjs";
-import k from "./structure/ModalContainer/index.mjs";
-import A from "./structure/Pagination/index.mjs";
-import j from "./structure/TabContainer/index.mjs";
+import x from "./media/Embed/index.mjs";
+import S from "./media/FontAwesome/index.mjs";
+import C from "./media/Image/index.mjs";
+import w from "./media/Svg/index.mjs";
+import T from "./media/Video/index.mjs";
+import E from "./provider/ApiContainer/index.mjs";
+import D from "./provider/Channel/index.mjs";
+import O from "./structure/Carousel/index.mjs";
+import k from "./structure/Container/index.mjs";
+import A from "./structure/DialogContainer/index.mjs";
+import j from "./structure/List/index.mjs";
+import M from "./structure/ModalContainer/index.mjs";
+import N from "./structure/Pagination/index.mjs";
+import P from "./structure/TabContainer/index.mjs";
 //#region src/elements/index.ts
-var M = /* @__PURE__ */ e({
-	ApiContainer: () => w,
+var F = /* @__PURE__ */ e({
+	ApiContainer: () => E,
 	BlockHtml: () => t,
 	BlockJsx: () => n,
 	Button: () => o,
-	Channel: () => T,
-	Container: () => E,
+	Carousel: () => O,
+	Channel: () => D,
+	Container: () => k,
 	Custom: () => r,
-	DialogContainer: () => D,
+	DialogContainer: () => A,
 	Dropdown: () => s,
-	FontAwesome: () => x,
+	Embed: () => x,
+	FontAwesome: () => S,
 	Form: () => h,
 	FormControl: () => g,
 	Heading: () => c,
-	Image: () => S,
+	Image: () => C,
 	LayoutContainer: () => _,
 	Link: () => l,
-	List: () => O,
+	List: () => j,
 	Loading: () => v,
 	Markdown: () => u,
-	ModalContainer: () => k,
+	ModalContainer: () => M,
 	NodeHtml: () => i,
 	NotFound: () => y,
 	Page: () => b,
-	Pagination: () => A,
+	Pagination: () => N,
 	Paragraph: () => d,
 	Reference: () => a,
 	RichText: () => f,
-	TabContainer: () => j,
+	Svg: () => w,
+	TabContainer: () => P,
 	Text: () => p,
 	ThemeToggle: () => m,
-	Video: () => C
+	Video: () => T
 });
 //#endregion
-export { w as ApiContainer, t as BlockHtml, n as BlockJsx, o as Button, T as Channel, E as Container, r as Custom, D as DialogContainer, s as Dropdown, x as FontAwesome, h as Form, g as FormControl, c as Heading, S as Image, _ as LayoutContainer, l as Link, O as List, v as Loading, u as Markdown, k as ModalContainer, i as NodeHtml, y as NotFound, b as Page, A as Pagination, d as Paragraph, a as Reference, f as RichText, j as TabContainer, p as Text, m as ThemeToggle, C as Video, M as elements_exports };
+export { E as ApiContainer, t as BlockHtml, n as BlockJsx, o as Button, O as Carousel, D as Channel, k as Container, r as Custom, A as DialogContainer, s as Dropdown, x as Embed, S as FontAwesome, h as Form, g as FormControl, c as Heading, C as Image, _ as LayoutContainer, l as Link, j as List, v as Loading, u as Markdown, M as ModalContainer, i as NodeHtml, y as NotFound, b as Page, N as Pagination, d as Paragraph, a as Reference, f as RichText, w as Svg, P as TabContainer, p as Text, m as ThemeToggle, T as Video, F as elements_exports };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+export type EmbedProps = {
+    ref?: RefObject<HTMLElement>;
+    /** The page shown: an `https:` address, or a path of this site. Anything else is not loaded. */
+    src?: string;
+    /** What the frame shows, in words — what a screen reader announces for it. */
+    title?: string;
+    loading?: 'lazy' | 'eager';
+    /** The features the page inside may use: `fullscreen; clipboard-write`. */
+    allow?: string;
+    /** Restrictions on the page inside — `allow-scripts allow-same-origin` — or nothing, for none. */
+    sandbox?: string;
+    referrerPolicy?: 'no-referrer' | 'origin' | 'strict-origin-when-cross-origin' | 'no-referrer-when-downgrade';
+    className?: string;
+};
+declare const Embed: ({ ref, src, title, loading, allow, sandbox, referrerPolicy, className }: EmbedProps) => import('react').JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<EmbedProps>): import('react').JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Embed };

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

@@ -0,0 +1,29 @@
+import e from "../../../Element/hocs/withElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import { embeddableSrc as n } from "./embeddableSrc.mjs";
+import r from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
+//#region src/elements/media/Embed/Embed.tsx
+var s = ({ ref: e, src: s = "", title: c = "", loading: l = "lazy", allow: u = "", sandbox: d, referrerPolicy: f = "strict-origin-when-cross-origin", className: p = "" }) => {
+	let { settings: { previewMode: m } } = r(), h = n(s), g = {
+		src: h,
+		title: c,
+		loading: l,
+		referrerPolicy: f,
+		...u ? { allow: u } : {},
+		...d === void 0 ? {} : { sandbox: d }
+	};
+	return m ? /* @__PURE__ */ i(t, {
+		tag: "iframe",
+		ref: e,
+		className: o("plitzi-component__embed", p),
+		...g
+	}) : /* @__PURE__ */ a(t, {
+		ref: e,
+		className: o("plitzi-component__embed embed--edit-mode", p),
+		children: [h && /* @__PURE__ */ i("iframe", { ...g }), /* @__PURE__ */ i("div", { className: "embed__cover" })]
+	});
+}, c = e(s);
+//#endregion
+export { s as Embed, c as default };

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

@@ -0,0 +1,10 @@
+type SettingsProps = {
+    src?: string;
+    title?: string;
+    loading?: 'lazy' | 'eager';
+    allow?: string;
+    sandbox?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ src, title, loading, allow, sandbox, onUpdate }: SettingsProps) => import('react').JSX.Element;
+export default Settings;

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

@@ -0,0 +1,51 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Input";
+import i from "@plitzi/plitzi-ui/Select";
+//#region src/elements/media/Embed/Settings.tsx
+var a = ({ src: a = "", title: o = "", loading: s = "lazy", allow: c = "", sandbox: l = "", onUpdate: u }) => {
+	let d = e((e) => (t) => u?.(e, t), [u]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ t(r, {
+				value: a,
+				label: "Url",
+				placeholder: "https://…",
+				onChange: d("src")
+			}),
+			/* @__PURE__ */ t(r, {
+				value: o,
+				label: "Title",
+				placeholder: "What the frame shows",
+				onChange: d("title")
+			}),
+			/* @__PURE__ */ n(i, {
+				label: "Loading",
+				value: s,
+				onChange: d("loading"),
+				children: [/* @__PURE__ */ t("option", {
+					value: "lazy",
+					children: "When it is about to be seen"
+				}), /* @__PURE__ */ t("option", {
+					value: "eager",
+					children: "With the page"
+				})]
+			}),
+			/* @__PURE__ */ t(r, {
+				value: c,
+				label: "Allow",
+				placeholder: "fullscreen; clipboard-write",
+				onChange: d("allow")
+			}),
+			/* @__PURE__ */ t(r, {
+				value: l,
+				label: "Sandbox",
+				placeholder: "allow-scripts allow-same-origin",
+				onChange: d("sandbox")
+			})
+		]
+	});
+};
+//#endregion
+export { a as default };

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;