@plitzi/sdk-elements 0.30.19

package/dist/elements/media/FontAwesome/FontAwesome.stories-paused.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+type SettingsProps = {
+    icon?: string;
+    size?: 'fa-1x' | 'fa-2x' | 'fa-3x' | 'fa-4x';
+    iconAnimation?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ icon, size, iconAnimation, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

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

@@ -0,0 +1,150 @@
+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";
+//#region src/elements/media/FontAwesome/Settings.tsx
+var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }) => {
+	let [p, m] = r({}), [h, g] = r(""), [_, v] = r(!1), [y, b] = r(""), x = e((e) => () => f?.("icon", e), [f]), S = n(() => Object.keys(p).map((e) => {
+		let { styles: t, label: n } = p[e];
+		if (!n.toLowerCase().includes(y.toLowerCase())) return [];
+		let r = [];
+		return t.forEach((t) => {
+			if (h !== "" && t !== h) return;
+			let a = "fa";
+			switch (t) {
+				case "brands":
+					a = "fab";
+					break;
+				case "regular":
+					a = "far";
+					break;
+				case "solid":
+					a = "fas";
+					break;
+				default:
+			}
+			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: x(s),
+				title: `${n} - [${e}]`,
+				children: /* @__PURE__ */ i("i", { className: s }, `${e}_${a}`)
+			}, s));
+		}), r;
+	}), [
+		l,
+		p,
+		y,
+		h,
+		x
+	]), C = async () => {
+		v(!0), m(await (await fetch("https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/metadata/icons.json")).json()), v(!1);
+	};
+	t(() => {
+		C();
+	}, []);
+	let w = e((e) => b(e), []), T = e((e) => (t) => f?.(e, t), [f]);
+	return /* @__PURE__ */ a("div", {
+		className: "flex grow basis-0 flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ a(c, {
+				value: h,
+				placeholder: "All",
+				label: "Icon Type",
+				onChange: e((e) => g(e), []),
+				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, {
+				label: "Icon Animation",
+				value: d,
+				placeholder: "None",
+				onChange: T("iconAnimation"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ i("option", {
+						value: "fa-beat",
+						children: "Beat"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "fa-fade",
+						children: "Fade"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "fa-beat-fade",
+						children: "Beat-Fade"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "fa-bounce",
+						children: "Bounce"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "fa-flip",
+						children: "Flip"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "fa-shake",
+						children: "Shake"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "fa-spin",
+						children: "Spin"
+					})
+				]
+			}),
+			/* @__PURE__ */ a(c, {
+				value: u,
+				label: "Icon Size",
+				onChange: T("size"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ i("option", {
+						value: "fa-1x",
+						children: "1X"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "fa-2x",
+						children: "2X"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "fa-3x",
+						children: "3X"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "fa-4x",
+						children: "4X"
+					})
+				]
+			}),
+			/* @__PURE__ */ i(s, {
+				value: y,
+				placeholder: "Search Icon...",
+				onChange: w,
+				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: [_ && /* @__PURE__ */ i("i", { className: "fa-solid fa-sync fa-spin fa-3x" }), !_ && S]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { l as default };

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

@@ -0,0 +1,56 @@
+declare const FontAwesome: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./FontAwesome').FontAwesomeProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            icon: string;
+            size: string;
+            iconAnimation: string;
+        };
+        definition: {
+            label: string;
+            type: string;
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: string;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {
+                        display: string;
+                        'font-size': string;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default FontAwesome;

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

@@ -0,0 +1,48 @@
+import e from "./FontAwesome.mjs";
+//#region src/elements/media/FontAwesome/index.ts
+var t = Object.assign(e, {
+	type: "fontAwesome",
+	content: {
+		attributes: {
+			icon: "fas fa-flag",
+			size: "fa-1x",
+			iconAnimation: ""
+		},
+		definition: {
+			label: "Font Awesome",
+			type: "fontAwesome",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "media",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-font-awesome"
+		},
+		defaultStyle: {
+			name: "Font Awesome",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "inline-block",
+				"font-size": "16px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

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

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+export type ImageProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    src?: string;
+    alt?: string;
+    fetchPriority?: 'high' | 'low' | 'auto';
+    loadMode?: 'eager' | 'lazy';
+};
+declare const Image: ({ ref, className, src, alt, fetchPriority, loadMode }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ImageProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Image };

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

@@ -0,0 +1,37 @@
+import e from "../../../Element/RootElement.mjs";
+import { getFallbackSVGBase64 as t } from "./ImageHelper.mjs";
+import n from "../../../Element/hocs/withElement.mjs";
+import { useCallback as r } from "react";
+import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as a } from "react/jsx-runtime";
+import o from "clsx";
+//#region src/elements/media/Image/Image.tsx
+var s = t(), c = n(({ ref: t, className: n = "", src: c = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", alt: l = "", fetchPriority: u = "auto", loadMode: d }) => {
+	let { settings: { previewMode: f } } = i(), p = r((e) => {
+		e.currentTarget.onerror = null, e.currentTarget.src = s;
+	}, []);
+	return f ? /* @__PURE__ */ a(e, {
+		tag: "img",
+		draggable: !1,
+		ref: t,
+		className: o("plitzi-component__image", n),
+		src: c,
+		alt: l,
+		loading: d,
+		fetchPriority: u,
+		onError: p
+	}) : /* @__PURE__ */ a(e, {
+		ref: t,
+		className: o("plitzi-component__image image--edit-mode", n),
+		children: /* @__PURE__ */ a("img", {
+			draggable: !1,
+			src: c,
+			alt: l,
+			loading: d,
+			fetchPriority: u,
+			onError: p
+		})
+	});
+});
+//#endregion
+export { c as default };

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

@@ -0,0 +1 @@
+export declare const getFallbackSVGBase64: () => string;

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

@@ -0,0 +1,4 @@
+//#region src/elements/media/Image/ImageHelper.ts
+var e = () => "data:image/svg+xml;base64," + btoa("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 1200\" fill=\"none\">\n  <rect width=\"1200\" height=\"1200\" fill=\"#EAEAEA\" rx=\"3\"/>\n  <path fill=\"#FAFAFA\" opacity=\"0.5\" d=\"M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z\"/>\n  <path stroke=\"#C9C9C9\" stroke-width=\"2.418\" opacity=\"0.5\" d=\"M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z\"/>\n  <path stroke=\"url(#a)\" stroke-width=\"2.418\" d=\"M0-1.209h553.581\" transform=\"scale(1 -1) rotate(45 1163.11 91.165)\"/>\n  <path stroke=\"url(#b)\" stroke-width=\"2.418\" d=\"M404.846 598.671h391.726\"/>\n  <path stroke=\"url(#c)\" stroke-width=\"2.418\" d=\"M599.5 795.742V404.017\"/>\n  <path stroke=\"url(#d)\" stroke-width=\"2.418\" d=\"m795.717 796.597-391.441-391.44\"/>\n  <path fill=\"#fff\" d=\"M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z\"/>\n  <path fill=\"#666\" fill-rule=\"evenodd\" d=\"M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z\" clip-rule=\"evenodd\"/>\n  <path stroke=\"#C9C9C9\" stroke-width=\"2.418\" d=\"M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z\"/>\n  <defs>\n    <linearGradient id=\"a\" x1=\"554.061\" x2=\"-.48\" y1=\".083\" y2=\".087\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#C9C9C9\" stop-opacity=\"0\"/><stop offset=\".208\" stop-color=\"#C9C9C9\"/><stop offset=\".792\" stop-color=\"#C9C9C9\"/><stop offset=\"1\" stop-color=\"#C9C9C9\" stop-opacity=\"0\"/>\n    </linearGradient>\n    <linearGradient id=\"b\" x1=\"796.912\" x2=\"404.507\" y1=\"599.963\" y2=\"599.965\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#C9C9C9\" stop-opacity=\"0\"/><stop offset=\".208\" stop-color=\"#C9C9C9\"/><stop offset=\".792\" stop-color=\"#C9C9C9\"/><stop offset=\"1\" stop-color=\"#C9C9C9\" stop-opacity=\"0\"/>\n    </linearGradient>\n    <linearGradient id=\"c\" x1=\"600.792\" x2=\"600.794\" y1=\"403.677\" y2=\"796.082\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#C9C9C9\" stop-opacity=\"0\"/><stop offset=\".208\" stop-color=\"#C9C9C9\"/><stop offset=\".792\" stop-color=\"#C9C9C9\"/><stop offset=\"1\" stop-color=\"#C9C9C9\" stop-opacity=\"0\"/>\n    </linearGradient>\n    <linearGradient id=\"d\" x1=\"404.85\" x2=\"796.972\" y1=\"403.903\" y2=\"796.02\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#C9C9C9\" stop-opacity=\"0\"/><stop offset=\".208\" stop-color=\"#C9C9C9\"/><stop offset=\".792\" stop-color=\"#C9C9C9\"/><stop offset=\"1\" stop-color=\"#C9C9C9\" stop-opacity=\"0\"/>\n    </linearGradient>\n    <clipPath id=\"e\"><path fill=\"#fff\" d=\"M581.364 580.535h38.689v38.689h-38.689z\"/></clipPath>\n  </defs>\n</svg>");
+//#endregion
+export { e as getFallbackSVGBase64 };

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

@@ -0,0 +1,9 @@
+type SettingsProps = {
+    src?: string;
+    fetchPriority?: 'high' | 'low' | 'auto';
+    loadMode?: 'auto' | 'lazy' | 'eager';
+    variables?: Record<string, string>;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ src, variables, fetchPriority, loadMode, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

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

@@ -0,0 +1,75 @@
+import { useCallback as e, useMemo as t } from "react";
+import { processTwig as n } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@plitzi/plitzi-ui/Input";
+import o from "@plitzi/plitzi-ui/Select";
+//#region src/elements/media/Image/Settings.tsx
+var s = ({ src: s = "", variables: c, fetchPriority: l = "auto", loadMode: u = "auto", onUpdate: d }) => {
+	let f = t(() => n(s, c, !0), [c, s]), p = e((e) => (t) => d?.(e, t), [d]);
+	return /* @__PURE__ */ i("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ r(a, {
+					value: s,
+					label: "Url",
+					onChange: p("src"),
+					size: "xs"
+				}), f && /* @__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: f,
+						alt: "",
+						className: "h-full w-full rounded-sm"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ i(o, {
+				value: l,
+				label: "Fetch Priority",
+				onChange: p("fetchPriority"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ r("option", {
+						value: "auto",
+						children: "Auto"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "high",
+						children: "Hight"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "low",
+						children: "Low"
+					})
+				]
+			}),
+			/* @__PURE__ */ i(o, {
+				value: u,
+				label: "Load Mode",
+				onChange: p("loadMode"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ r("option", {
+						value: "auto",
+						children: "Auto"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "lazy",
+						children: "Lazy"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "eager",
+						children: "Eager"
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { s as default };

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

@@ -0,0 +1,59 @@
+declare const Image: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Image').ImageProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            src: string;
+            alt: string;
+            fetchPriority: string;
+            loadMode: string;
+        };
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: string;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {
+                        display: string;
+                        width: string;
+                        height: string;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Image;

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

@@ -0,0 +1,51 @@
+import e from "./Image.mjs";
+//#region src/elements/media/Image/index.ts
+var t = Object.assign(e, {
+	type: "image",
+	content: {
+		attributes: {
+			src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg",
+			alt: "",
+			fetchPriority: "auto",
+			loadMode: "auto"
+		},
+		definition: {
+			label: "Image",
+			type: "image",
+			description: "Use an URL to display an image.",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "media",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-image"
+		},
+		defaultStyle: {
+			name: "Image",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "block",
+				width: "140px",
+				height: "140px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

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

@@ -0,0 +1,10 @@
+type SettingsProps = {
+    src?: string;
+    autoPlay?: boolean;
+    playsInline?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ src, autoPlay, playsInline, loop, muted, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

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

@@ -0,0 +1,57 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+//#region src/elements/media/Video/Settings.tsx
+var a = ({ src: a = "", autoPlay: o = !1, playsInline: s = !1, loop: c = !1, muted: l = !0, onUpdate: u }) => {
+	let d = e((e) => (t) => u?.(e, t), [u]), f = e((e) => (t) => u?.(e, t.target.checked), [u]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ t(i, {
+					value: a,
+					label: "Url",
+					onChange: d("src")
+				}), a && /* @__PURE__ */ n("div", {
+					className: "relative mt-2 flex items-center justify-center rounded-sm border border-gray-300 p-2",
+					children: [/* @__PURE__ */ t("div", {
+						className: "absolute top-2 left-2 rounded-tl rounded-br border border-gray-300 bg-white p-1 text-xs",
+						children: "Preview"
+					}), /* @__PURE__ */ t("video", {
+						className: "h-full w-full rounded-sm",
+						src: a,
+						autoPlay: !0,
+						playsInline: !0,
+						loop: !0,
+						muted: !0,
+						children: /* @__PURE__ */ t("track", { kind: "captions" })
+					})]
+				})]
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: o,
+				onChange: f("autoPlay"),
+				label: "Auto Play"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: s,
+				onChange: f("playsInline"),
+				label: "Plays Inline"
+			}),
+			/* @__PURE__ */ t(r, {
+				label: "Loop",
+				checked: c,
+				onChange: f("loop")
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: l,
+				onChange: f("muted"),
+				label: "Muted"
+			})
+		]
+	});
+};
+//#endregion
+export { a as default };

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

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+export type VideoProps = {
+    ref?: RefObject<HTMLElement>;
+    src?: string;
+    autoPlay?: boolean;
+    playsInline?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    className?: string;
+};
+declare const Video: ({ ref, src, autoPlay, playsInline, loop, muted, className }: VideoProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<VideoProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Video };

package/dist/elements/media/Video/Video.mjs

@@ -0,0 +1,32 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
+var a = t(({ ref: t, src: a, autoPlay: o = !1, playsInline: s = !1, loop: c = !1, muted: l = !0, className: u = "" }) => {
+	let { settings: { previewMode: d } } = n();
+	return d ? /* @__PURE__ */ r(e, {
+		tag: "video",
+		draggable: !1,
+		ref: t,
+		className: i("plitzi-component__video", u),
+		src: a,
+		autoPlay: o,
+		playsInline: s,
+		loop: c,
+		muted: l
+	}) : /* @__PURE__ */ r(e, {
+		ref: t,
+		className: i("plitzi-component__video video--edit-mode", u),
+		children: /* @__PURE__ */ r("video", {
+			src: a,
+			autoPlay: o,
+			playsInline: s,
+			loop: c,
+			muted: l,
+			children: /* @__PURE__ */ r("track", { kind: "captions" })
+		})
+	});
+});
+//#endregion
+export { a as default };