@plitzi/sdk-elements 0.37.8 → 0.37.10

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

@@ -7,56 +7,56 @@ import a from "./declaration.mjs";
 import o from "../../../Element/hooks/useLayoutChain.mjs";
 import { use as s, useEffect as c, useMemo as l } from "react";
 import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useSdkStore as d } from "@plitzi/sdk-shared/store";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import m from "clsx";
-import { Helmet as h } from "@dr.pogodin/react-helmet";
+import { useRenderSettings as d, useSdkStore as f } from "@plitzi/sdk-shared/store";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import h from "clsx";
+import { Helmet as g } from "@dr.pogodin/react-helmet";
 //#region src/elements/internal/Page/Page.tsx
-var g = (e) => e.map((e) => ({
+var _ = (e) => e.map((e) => ({
 	...e,
 	plitziElementLayout: {
-		containerId: e.slot,
+		slots: [e.slot],
 		rootId: e.slot,
 		type: "layout"
 	}
-})), _ = (t, n, r) => t.reduce((t, { layout: r, slot: a, plitziElementLayout: o }) => /* @__PURE__ */ f(e, {
-	body: t,
-	children: /* @__PURE__ */ f(i, { internalProps: {
+})), v = (t, n, r) => t.reduce((t, { layout: r, slot: a, plitziElementLayout: o }) => /* @__PURE__ */ p(e, {
+	bodies: { [a]: t },
+	children: /* @__PURE__ */ p(i, { internalProps: {
 		id: r,
 		rootId: n,
 		plitziElementLayout: o
 	} })
-}, a), r), v = ({ ref: e, seoEnabled: t = !1, seoPageTitle: i = "Title", seoPageDescription: v = "Description", className: y = "", layout: b = "", layoutContainer: x = "", children: S }) => {
-	let { id: C } = n(), { settings: { previewMode: w }, contexts: { InteractionsContext: T } } = u(), { interactionsManager: E } = s(T), [[D, O]] = d(["navigation.routeParams", "navigation.queryParams"]), k = o(b, x), A = l(() => g(k), [k]), j = l(() => _(A, C, S), [
-		A,
-		C,
-		S
+}, a), r), y = ({ ref: e, seoEnabled: t = !1, seoPageTitle: i = "Title", seoPageDescription: y = "Description", className: b = "", layout: x = "", layoutContainer: S = "", children: C }) => {
+	let { id: w } = n(), { settings: { previewMode: T }, contexts: { InteractionsContext: E } } = u(), { interactionsManager: D } = s(E), { ownsHead: O } = d(), [[k, A]] = f(["navigation.routeParams", "navigation.queryParams"]), j = o(x, S), M = l(() => _(j), [j]), N = l(() => v(M, w, C), [
+		M,
+		w,
+		C
 	]);
 	return c(() => {
 		let e = !1;
 		return queueMicrotask(() => {
-			e || E.interactionTrigger(C, "onPageLoad", {
-				pageId: C,
-				routeParams: D,
-				queryParams: O
+			e || D.interactionTrigger(w, "onPageLoad", {
+				pageId: w,
+				routeParams: k,
+				queryParams: A
 			});
 		}), () => {
 			e = !0;
 		};
 	}, [
-		C,
-		E,
-		O,
-		D
-	]), /* @__PURE__ */ p(r, {
+		w,
+		D,
+		A,
+		k
+	]), /* @__PURE__ */ m(r, {
 		ref: e,
-		className: m("plitzi-component__page", y),
+		className: h("plitzi-component__page", b),
 		interactionTriggers: a.triggers,
-		children: [t && w && /* @__PURE__ */ p(h, { children: [!!i && /* @__PURE__ */ f("title", { children: i }), !!v && /* @__PURE__ */ f("meta", {
+		children: [t && T && O && /* @__PURE__ */ m(g, { children: [!!i && /* @__PURE__ */ p("title", { children: i }), !!y && /* @__PURE__ */ p("meta", {
 			name: "description",
-			content: v
-		})] }), j]
+			content: y
+		})] }), N]
 	});
-}, y = t(v);
+}, b = t(y);
 //#endregion
-export { v as Page, y as default };
+export { y as Page, b as default };

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 };