@g1cloud/page-builder-editor 1.0.0-alpha.45 → 1.0.0-alpha.46

package/dist/{index-BtttVLpv.js → index-B3_aUUWX.js}

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, onMounted, onBeforeUnmount, createBlock as createBlock$1, resolveDynamicComponent, unref, provide, inject, watch, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, toHandlers, Teleport } from "vue";
-import { notNull, BSTextInput, vClickOutside, useModal, BSSelect, BSTree, useContextMenu } from "@g1cloud/bluesea";
+import { notNull, BSTextInput, vClickOutside, useModal, BSMultiLangTextInput, BSSelect, BSTree, useContextMenu } from "@g1cloud/bluesea";
 import YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
@@ -6879,8 +6879,8 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$a$1 = ["data-part-id"];
-const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b$1 = ["data-part-id"];
+const _sfc_main$c$1 = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
@@ -6917,15 +6917,15 @@ const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
             part: _ctx.part,
             "onUpdate:visible": updateVisible
           }, null, 40, ["part"])) : createCommentVNode("", true)
-        ], 14, _hoisted_1$a$1), [
+        ], 14, _hoisted_1$b$1), [
           [vShow, visible.value]
         ])
       ], 64);
     };
   }
 });
-const _hoisted_1$9$1 = ["data-part-id"];
-const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a$1 = ["data-part-id"];
+const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {},
@@ -6960,21 +6960,21 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(style.value)
         }, [
           _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
-            return openBlock(), createBlock$1(_sfc_main$b$1, {
+            return openBlock(), createBlock$1(_sfc_main$c$1, {
               key: child.partId,
               part: child,
               "onUpdate:visible": (value) => updateVisible(child.partId, value)
             }, null, 8, ["part", "onUpdate:visible"]);
           }), 128)) : createCommentVNode("", true)
-        ], 14, _hoisted_1$9$1), [
+        ], 14, _hoisted_1$a$1), [
           [vShow, visible.value]
         ])
       ], 64);
     };
   }
 });
-const _hoisted_1$8$1 = ["data-part-id"];
-const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9$1 = ["data-part-id"];
+const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {},
@@ -7006,28 +7006,28 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(style.value)
         }, [
           _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
-            return openBlock(), createBlock$1(_sfc_main$a$1, {
+            return openBlock(), createBlock$1(_sfc_main$b$1, {
               key: child.partId,
               "is-mobile-page": _ctx.isMobilePage,
               part: child,
               "onUpdate:visible": (value) => updateVisible(child.partId, value)
             }, null, 8, ["is-mobile-page", "part", "onUpdate:visible"]);
           }), 128)) : createCommentVNode("", true)
-        ], 14, _hoisted_1$8$1), [
+        ], 14, _hoisted_1$9$1), [
           [vShow, visible.value]
         ])
       ], 64);
     };
   }
 });
-const _hoisted_1$7$1 = ["href", "target"];
-const _hoisted_2$4$1 = ["alt", "src"];
-const _hoisted_3$d = ["alt", "src"];
-const _hoisted_4$a = {
+const _hoisted_1$8$1 = ["href", "target"];
+const _hoisted_2$5$1 = ["alt", "src"];
+const _hoisted_3$1$1 = ["alt", "src"];
+const _hoisted_4$1$1 = {
   key: 1,
   class: "placeholder"
 };
-const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbImageWidget",
   props: {
     part: {},
@@ -7068,20 +7068,103 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
             src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).url,
             style: normalizeStyle(style.value),
             class: "image"
-          }, null, 12, _hoisted_2$4$1)
-        ], 8, _hoisted_1$7$1)) : (openBlock(), createElementBlock("img", {
+          }, null, 12, _hoisted_2$5$1)
+        ], 8, _hoisted_1$8$1)) : (openBlock(), createElementBlock("img", {
           key: 1,
           alt: altText.value,
           src: ((_f = _ctx.part.properties) == null ? void 0 : _f.media).url,
           style: normalizeStyle(style.value),
           class: "image"
-        }, null, 12, _hoisted_3$d))
-      ], 64)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_4$a, _cache[0] || (_cache[0] = [
+        }, null, 12, _hoisted_3$1$1))
+      ], 64)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_4$1$1, _cache[0] || (_cache[0] = [
         createElementVNode("span", { class: "font-icon" }, "image", -1)
       ]))) : createCommentVNode("", true);
     };
   }
 });
+const _hoisted_1$7$1 = ["href", "target"];
+const _hoisted_2$4$1 = ["alt", "src"];
+const _hoisted_3$d = ["alt", "src"];
+const _hoisted_4$a = ["poster"];
+const _hoisted_5$6 = ["src"];
+const _hoisted_6$6 = {
+  key: 1,
+  class: "placeholder"
+};
+const _hoisted_7$6 = { class: "font-icon" };
+const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
+  __name: "PbMediaWidget",
+  props: {
+    part: {},
+    placeholder: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const pageBuilder = usePageBuilder();
+    const media = computed(() => {
+      var _a;
+      return (_a = props.part.properties) == null ? void 0 : _a.media;
+    });
+    const altText = computed(() => {
+      if (media.value && media.value.altText) {
+        const locale = pageBuilder.getLocale();
+        return media.value.altText[locale] || "";
+      }
+      return "";
+    });
+    const placeholderIcon = computed(() => {
+      var _a;
+      return ((_a = media.value) == null ? void 0 : _a.mediaType) === "Video" ? "smart_display" : "image";
+    });
+    const style = computed(() => {
+      var _a;
+      const media2 = (_a = props.part.properties) == null ? void 0 : _a.media;
+      if (media2.width && media2.height) {
+        return {
+          aspectRatio: media2.width / media2.height
+        };
+      }
+      return {};
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d, _e, _f;
+      return media.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        media.value.mediaType === "Image" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          ((_a = _ctx.part.properties) == null ? void 0 : _a.link) ? (openBlock(), createElementBlock("a", {
+            key: 0,
+            href: (_b = _ctx.part.properties) == null ? void 0 : _b.link,
+            target: (_c = _ctx.part.properties) == null ? void 0 : _c.linkTarget
+          }, [
+            createElementVNode("img", {
+              alt: altText.value,
+              src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).url,
+              style: normalizeStyle(style.value),
+              class: "image"
+            }, null, 12, _hoisted_2$4$1)
+          ], 8, _hoisted_1$7$1)) : (openBlock(), createElementBlock("img", {
+            key: 1,
+            alt: altText.value,
+            src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).url,
+            style: normalizeStyle(style.value),
+            class: "image"
+          }, null, 12, _hoisted_3$d))
+        ], 64)) : media.value.mediaType === "Video" ? (openBlock(), createElementBlock("video", {
+          key: 1,
+          ref: "video",
+          poster: (_f = _ctx.part.properties) == null ? void 0 : _f.thumbnail,
+          class: "video",
+          controls: ""
+        }, [
+          createElementVNode("source", {
+            src: `${media.value.url}#t=0.01`
+          }, null, 8, _hoisted_5$6)
+        ], 8, _hoisted_4$a)) : createCommentVNode("", true)
+      ], 64)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
+        createElementVNode("span", _hoisted_7$6, toDisplayString(placeholderIcon.value), 1)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
 const _hoisted_1$6$1 = ["textContent"];
 const _hoisted_2$3$1 = {
   key: 1,
@@ -7243,7 +7326,7 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     const isYTReady = ref(false);
     onMounted(() => {
       const interval = setInterval(() => {
-        if (window.YT) {
+        if (window && window.YT) {
           isYTReady.value = true;
           clearInterval(interval);
         }
@@ -7279,13 +7362,13 @@ const defaultPartDefinitions = {
     partType: "Section",
     partName: "Section",
     className: "pb-section",
-    creator: () => _sfc_main$9$1
+    creator: () => _sfc_main$a$1
   },
   "Block": {
     partType: "Block",
     partName: "Block",
     className: "pb-block",
-    creator: () => _sfc_main$a$1
+    creator: () => _sfc_main$b$1
   },
   "TextWidget": {
     partType: "Widget",
@@ -7297,6 +7380,12 @@ const defaultPartDefinitions = {
     partType: "Widget",
     partName: "ImageWidget",
     className: "pb-image-widget",
+    creator: () => _sfc_main$9$1
+  },
+  "MediaWidget": {
+    partType: "Widget",
+    partName: "MediaWidget",
+    className: "pb-media-widget",
     creator: () => _sfc_main$8$1
   },
   "HtmlWidget": {
@@ -7348,7 +7437,7 @@ class PageBuilderViewerImpl {
       plugin.widgets.forEach((v) => {
         const w = { ...v };
         w.partType = "Widget";
-        w.creator = () => _sfc_main$q;
+        w.creator = () => _sfc_main$r;
         partDefinitions$1[v.partName] = w;
       });
     }
@@ -7490,7 +7579,7 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(style.value)
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (section) => {
-            return openBlock(), createBlock$1(_sfc_main$9$1, {
+            return openBlock(), createBlock$1(_sfc_main$a$1, {
               key: section.partId,
               "is-mobile-page": _ctx.isMobilePage,
               part: section
@@ -7554,7 +7643,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$t = {
+const _hoisted_1$u = {
   key: 1,
   class: "placeholder",
   textContent: "Empty Widget"
@@ -7575,11 +7664,11 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
           key: child.part.partId,
           part: child.part
         }, null, 8, ["part"]);
-      }), 128)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$t)) : createCommentVNode("", true);
+      }), 128)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$u)) : createCommentVNode("", true);
     };
   }
 });
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "PbCustomWidget",
   props: {
     part: {},
@@ -8176,15 +8265,15 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CLz-HW0c.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CHuYGiYv.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DHqDdVCb.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CmOtpbXF.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DHIK8xLM.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DaQ6AzHk.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Jh4spLgs.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Dqi0T67b.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-B41u2J0P.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-Hfb9KA23.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CVVHK_Aw.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-ei6b733c.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8433,10 +8522,10 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$p = {};
-const _hoisted_1$s = { class: "pb-add-widget-button" };
+const _sfc_main$q = {};
+const _hoisted_1$t = { class: "pb-add-widget-button" };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$s, [
+  return openBlock(), createElementBlock("div", _hoisted_1$t, [
     createElementVNode("button", {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
     }, _cache[1] || (_cache[1] = [
@@ -8445,7 +8534,7 @@ function _sfc_render$1(_ctx, _cache) {
     ]))
   ]);
 }
-const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$1]]);
+const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$1]]);
 const MOUSE_TRACKER_KEY = "mouseTracker";
 const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
 class MouseTracker {
@@ -8473,8 +8562,8 @@ const useMouseTracker = () => {
   if (!mouseTracker) throw Error(MOUSE_TRACKER_NOT_FOUND);
   return mouseTracker;
 };
-const _hoisted_1$r = ["data-part-id", "draggable"];
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = ["data-part-id", "draggable"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {},
@@ -8910,15 +8999,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             class: "resize-handle",
             onMousedown: resizeChild
           }, null, 32)) : createCommentVNode("", true)
-        ], 14, _hoisted_1$r)), [
+        ], 14, _hoisted_1$s)), [
           [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ])
       ], 64);
     };
   }
 });
-const _hoisted_1$q = ["data-part-id"];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = ["data-part-id"];
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {},
@@ -9109,27 +9198,27 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             onAddWidget: addWidget
           })) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-            return openBlock(), createBlock$1(_sfc_main$o, {
+            return openBlock(), createBlock$1(_sfc_main$p, {
               key: child.partId,
               part: child
             }, null, 8, ["part"]);
           }), 128))
-        ], 16, _hoisted_1$q)), [
+        ], 16, _hoisted_1$r)), [
           [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ])
       ], 64);
     };
   }
 });
-const _hoisted_1$p = { class: "pb-block" };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = { class: "pb-block" };
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
     part: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, _cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("div", _hoisted_1$q, _cache[0] || (_cache[0] = [
         createElementVNode("div", {
           class: "pb-widget",
           style: { "margin": "0 auto" }
@@ -9142,8 +9231,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$o = ["data-part-id"];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = ["data-part-id"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {},
@@ -9254,13 +9343,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
         }, properties.value), [
           ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$m, {
+            ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$n, {
               key: 0,
               part: _ctx.part
             }, null, 8, ["part"])) : createCommentVNode("", true)
           ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (block) => {
-              return openBlock(), createBlock$1(_sfc_main$n, {
+              return openBlock(), createBlock$1(_sfc_main$o, {
                 key: block.partId,
                 "is-mobile-page": _ctx.isMobilePage,
                 part: block
@@ -9270,21 +9359,21 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
               onAddWidget: addWidget
             }))
           ], 64))
-        ], 16, _hoisted_1$o)), [
+        ], 16, _hoisted_1$p)), [
           [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ])
       ], 64);
     };
   }
 });
-const _hoisted_1$n = { class: "group-editor group-editor-position" };
+const _hoisted_1$o = { class: "group-editor group-editor-position" };
 const _hoisted_2$f = { class: "flex-align-center" };
 const _hoisted_3$c = { class: "flex-grow-1" };
 const _hoisted_4$9 = { class: "bg-gray-100 py-5 rounded-8" };
 const _hoisted_5$5 = { class: "text-center" };
 const _hoisted_6$5 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
 const _hoisted_7$5 = { class: "text-center" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPosition",
   props: {
     group: {},
@@ -9308,7 +9397,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const updateTop = (value) => updatePropertyValue({ top: value });
     const updateBottom = (value) => updatePropertyValue({ bottom: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createElementVNode("div", _hoisted_2$f, [
           _cache[1] || (_cache[1] = createElementVNode("div", { class: "title" }, [
             createElementVNode("label", { textContent: "Position" })
@@ -9362,14 +9451,14 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "group-editor group-editor-size" };
+const _hoisted_1$n = { class: "group-editor group-editor-size" };
 const _hoisted_2$e = { class: "flex-align-center" };
 const _hoisted_3$b = { class: "flex-grow-1 bs-layout-horizontal" };
 const _hoisted_4$8 = { class: "flex-align-center mt-12" };
 const _hoisted_5$4 = { class: "flex-grow-1 bs-layout-horizontal" };
 const _hoisted_6$4 = { class: "flex-align-center mt-12" };
 const _hoisted_7$4 = { class: "flex-grow-1 bs-layout-horizontal" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorSize",
   props: {
     group: {},
@@ -9397,7 +9486,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const updateMinWidth = (value) => updatePropertyValue({ minWidth: value });
     const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", _hoisted_2$e, [
           _cache[0] || (_cache[0] = createElementVNode("div", { class: "title" }, [
             createElementVNode("label", { textContent: "Size" })
@@ -9615,7 +9704,7 @@ var script$4 = {
     }
   }
 };
-const _hoisted_1$l = { class: "vc-alpha" };
+const _hoisted_1$m = { class: "vc-alpha" };
 const _hoisted_2$d = { class: "vc-alpha-checkboard-wrap" };
 const _hoisted_3$a = /* @__PURE__ */ createElementVNode(
   "div",
@@ -9629,7 +9718,7 @@ const _hoisted_4$7 = [
 ];
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkboard = resolveComponent("Checkboard");
-  return openBlock(), createElementBlock("div", _hoisted_1$l, [
+  return openBlock(), createElementBlock("div", _hoisted_1$m, [
     createElementVNode("div", _hoisted_2$d, [
       createVNode(_component_Checkboard)
     ]),
@@ -10733,12 +10822,12 @@ var script$3 = {
     // }
   }
 };
-const _hoisted_1$k = { class: "vc-editable-input" };
+const _hoisted_1$l = { class: "vc-editable-input" };
 const _hoisted_2$c = ["aria-labelledby"];
 const _hoisted_3$9 = ["id", "for"];
 const _hoisted_4$6 = { class: "vc-input__desc" };
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$k, [
+  return openBlock(), createElementBlock("div", _hoisted_1$l, [
     withDirectives(createElementVNode("input", {
       ref: "input",
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.val = $event),
@@ -10833,7 +10922,7 @@ var script$2 = {
     }
   }
 };
-const _hoisted_1$j = /* @__PURE__ */ createElementVNode(
+const _hoisted_1$k = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation--white" },
   null,
@@ -10869,7 +10958,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
     },
     [
-      _hoisted_1$j,
+      _hoisted_1$k,
       _hoisted_2$b,
       createElementVNode(
         "div",
@@ -11018,7 +11107,7 @@ var script$1 = {
     }
   }
 };
-const _hoisted_1$i = ["aria-valuenow"];
+const _hoisted_1$j = ["aria-valuenow"];
 const _hoisted_2$a = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-hue-picker" },
@@ -11058,7 +11147,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           4
           /* STYLE */
         )
-      ], 40, _hoisted_1$i)
+      ], 40, _hoisted_1$j)
     ],
     2
     /* CLASS */
@@ -11154,7 +11243,7 @@ var script = {
     }
   }
 };
-const _hoisted_1$h = { class: "vc-sketch-saturation-wrap" };
+const _hoisted_1$i = { class: "vc-sketch-saturation-wrap" };
 const _hoisted_2$9 = { class: "vc-sketch-controls" };
 const _hoisted_3$6 = { class: "vc-sketch-sliders" };
 const _hoisted_4$4 = { class: "vc-sketch-hue-wrap" };
@@ -11197,7 +11286,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
     },
     [
-      createElementVNode("div", _hoisted_1$h, [
+      createElementVNode("div", _hoisted_1$i, [
         createVNode(_component_Saturation, {
           value: _ctx.colors,
           onChange: $options.childChange
@@ -11309,7 +11398,7 @@ styleInject(css_248z);
 script.render = render;
 script.__file = "src/components/sketch/sketch.vue";
 script.install = install;
-const _sfc_main$i = defineComponent({
+const _sfc_main$j = defineComponent({
   name: "PbColorPicker",
   components: {
     Sketch: script
@@ -11369,7 +11458,7 @@ const _sfc_main$i = defineComponent({
     };
   }
 });
-const _hoisted_1$g = { class: "buttons" };
+const _hoisted_1$h = { class: "buttons" };
 const _hoisted_2$8 = { class: "sketch-wrap" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Sketch = resolveComponent("Sketch");
@@ -11379,7 +11468,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[3] || (_cache[3] = withModifiers(() => {
     }, ["stop"]))
   }, [
-    createElementVNode("div", _hoisted_1$g, [
+    createElementVNode("div", _hoisted_1$h, [
       renderSlot(_ctx.$slots, "button", normalizeProps(guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
         createElementVNode("button", {
           class: normalizeClass([{ none: !_ctx.color }, "picker-button"]),
@@ -11406,12 +11495,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [_directive_click_outside, () => _ctx.toggle(false)]
   ]);
 }
-const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render]]);
-const _hoisted_1$f = { class: "group-editor group-editor-background" };
+const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render]]);
+const _hoisted_1$g = { class: "group-editor group-editor-background" };
 const _hoisted_2$7 = { class: "flex-align-center" };
 const _hoisted_3$5 = { class: "bs-layout-horizontal" };
 const _hoisted_4$3 = { class: "color" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBackground",
   props: {
     group: {},
@@ -11444,7 +11533,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", _hoisted_2$7, [
           _cache[3] || (_cache[3] = createElementVNode("div", { class: "title" }, [
             createElementVNode("label", { textContent: "Background" })
@@ -11479,7 +11568,7 @@ const TopLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W
 const TopRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
 const BottomLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(180)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
 const BottomRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(90)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
-const _hoisted_1$e = { class: "group-editor group-editor-border" };
+const _hoisted_1$f = { class: "group-editor group-editor-border" };
 const _hoisted_2$6 = { class: "flex-align-center" };
 const _hoisted_3$4 = { class: "" };
 const _hoisted_4$2 = { class: "color" };
@@ -11494,7 +11583,7 @@ const _hoisted_12 = { class: "flex-grow-1 mt-4" };
 const _hoisted_13 = { class: "bg-gray-100 py-5 rounded-8" };
 const _hoisted_14 = { class: "" };
 const _hoisted_15 = { class: "mt-2" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBorder",
   props: {
     group: {},
@@ -11532,7 +11621,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: value });
     const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createElementVNode("div", _hoisted_2$6, [
           _cache[7] || (_cache[7] = createElementVNode("div", { class: "title" }, [
             createElementVNode("label", { textContent: "Border" })
@@ -11654,14 +11743,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "group-editor group-editor-margin" };
+const _hoisted_1$e = { class: "group-editor group-editor-margin" };
 const _hoisted_2$5 = { class: "flex-align-center" };
 const _hoisted_3$3 = { class: "flex-grow-1" };
 const _hoisted_4$1 = { class: "bg-gray-100 py-5 rounded-8" };
 const _hoisted_5$1 = { class: "text-center" };
 const _hoisted_6$1 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
 const _hoisted_7$1 = { class: "text-center" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorMargin",
   props: {
     group: {},
@@ -11685,7 +11774,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const updateTop = (value) => updatePropertyValue({ marginTop: value });
     const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", _hoisted_2$5, [
           _cache[1] || (_cache[1] = createElementVNode("div", { class: "title" }, [
             createElementVNode("label", { textContent: "Margin" })
@@ -11739,14 +11828,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "group-editor group-editor-padding" };
+const _hoisted_1$d = { class: "group-editor group-editor-padding" };
 const _hoisted_2$4 = { class: "flex-align-center" };
 const _hoisted_3$2 = { class: "flex-grow-1" };
 const _hoisted_4 = { class: "bg-gray-100 py-5 rounded-8" };
 const _hoisted_5 = { class: "text-center" };
 const _hoisted_6 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
 const _hoisted_7 = { class: "text-center" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPadding",
   props: {
     group: {},
@@ -11770,7 +11859,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const updateTop = (value) => updatePropertyValue({ paddingTop: value });
     const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
         createElementVNode("div", _hoisted_2$4, [
           _cache[1] || (_cache[1] = createElementVNode("div", { class: "title" }, [
             createElementVNode("label", { textContent: "Padding" })
@@ -11850,7 +11939,7 @@ const positionGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$k
+    propertyGroupEditor: () => _sfc_main$l
   };
 };
 const sizeGroup = () => {
@@ -11889,7 +11978,7 @@ const sizeGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$j
+    propertyGroupEditor: () => _sfc_main$k
   };
 };
 const marginGroup = () => {
@@ -11918,7 +12007,7 @@ const marginGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$f
+    propertyGroupEditor: () => _sfc_main$g
   };
 };
 const paddingGroup = () => {
@@ -11947,7 +12036,7 @@ const paddingGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$e
+    propertyGroupEditor: () => _sfc_main$f
   };
 };
 const commonGroup = () => {
@@ -12083,7 +12172,7 @@ const backgroundGroup = () => {
         propertyType: "image"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$h
+    propertyGroupEditor: () => _sfc_main$i
   };
 };
 const borderGroup = () => {
@@ -12137,7 +12226,7 @@ const borderGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$g
+    propertyGroupEditor: () => _sfc_main$h
   };
 };
 const defaultPropertyGroups = () => {
@@ -12146,7 +12235,7 @@ const defaultPropertyGroups = () => {
 const defaultWidgetPropertyGroups = () => {
   return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "PbContainerWidget",
   props: {
     part: {},
@@ -12161,7 +12250,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       var _a;
       return openBlock(), createElementBlock(Fragment, null, [
         _ctx.part.children ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$o, {
+          return openBlock(), createBlock$1(_sfc_main$p, {
             key: child.partId,
             "is-mobile-page": false,
             part: child
@@ -12175,6 +12264,111 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$c = { class: "group-editor group-editor-media" };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "PbPropertyGroupEditorMedia",
+  props: {
+    property: {},
+    value: {}
+  },
+  setup(__props) {
+    const pageBuilder = usePageBuilderEditor();
+    const part = pageBuilder.context.getSelectedParts();
+    const modal = useModal();
+    const selectMedia = () => {
+      const imageProvider = pageBuilder.getProvider("imageProvider");
+      if (imageProvider) {
+        imageProvider({ modal }, (media2) => {
+          if (media2.mediaType === "Image") {
+            updateProperty({ media: media2, altText: media2.altText, thumbnail: "" });
+          } else if (media2.mediaType === "Video") {
+            updateProperty({ media: media2, altText: media2.altText, link: "", linkTarget: "" });
+          }
+        });
+      }
+    };
+    const updateProperty = (properties) => {
+      pageBuilder.commandRegistry.executeCommand(ChangePropertyCommand.COMMAND_ID, { properties, targetParts: part });
+    };
+    const locales = computed(() => pageBuilder.getLocales());
+    const media = computed(() => {
+      var _a, _b;
+      return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.media;
+    });
+    const altText = computed(() => {
+      var _a, _b;
+      return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.altText;
+    });
+    const link = computed(() => {
+      var _a, _b;
+      return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.link;
+    });
+    const linkTarget = computed(() => {
+      var _a, _b;
+      return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.linkTarget;
+    });
+    const thumbnail = computed(() => {
+      var _a, _b;
+      return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.thumbnail;
+    });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        _cache[8] || (_cache[8] = createElementVNode("div", { class: "title" }, [
+          createElementVNode("label", { textContent: "Media" })
+        ], -1)),
+        createElementVNode("div", null, [
+          createElementVNode("button", { onClick: selectMedia }, "Select Media")
+        ]),
+        ((_a = media.value) == null ? void 0 : _a.mediaType) === "Image" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _cache[4] || (_cache[4] = createElementVNode("div", { class: "title mt-12" }, [
+            createElementVNode("label", { textContent: "Alt Text" })
+          ], -1)),
+          createElementVNode("div", null, [
+            createVNode(unref(BSMultiLangTextInput), {
+              locales: locales.value,
+              "model-value": altText.value,
+              width: "100%",
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => updateProperty({ altText: value }))
+            }, null, 8, ["locales", "model-value"])
+          ]),
+          _cache[5] || (_cache[5] = createElementVNode("div", { class: "title mt-12" }, [
+            createElementVNode("label", { textContent: "Link" })
+          ], -1)),
+          createElementVNode("div", null, [
+            createVNode(unref(BSTextInput), {
+              "model-value": link.value,
+              width: "100%",
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ link: value }))
+            }, null, 8, ["model-value"])
+          ]),
+          _cache[6] || (_cache[6] = createElementVNode("div", { class: "title mt-12" }, [
+            createElementVNode("label", { textContent: "Link Target" })
+          ], -1)),
+          createElementVNode("div", null, [
+            createVNode(unref(BSTextInput), {
+              "model-value": linkTarget.value,
+              width: "100%",
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ linkTarget: value }))
+            }, null, 8, ["model-value"])
+          ])
+        ], 64)) : createCommentVNode("", true),
+        ((_b = media.value) == null ? void 0 : _b.mediaType) === "Video" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          _cache[7] || (_cache[7] = createElementVNode("div", { class: "title mt-12" }, [
+            createElementVNode("label", { textContent: "Thumbnail" })
+          ], -1)),
+          createElementVNode("div", null, [
+            createVNode(unref(BSTextInput), {
+              "model-value": thumbnail.value,
+              width: "100%",
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => updateProperty({ thumbnail: value }))
+            }, null, 8, ["model-value"])
+          ])
+        ], 64)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 const pageParts = [
   {
     partType: "Page",
@@ -12184,7 +12378,7 @@ const pageParts = [
     className: "pb-page",
     propertyGroups: [
       {
-        groupName: "size",
+        groupName: "Size",
         caption: "Size",
         properties: [
           {
@@ -12204,7 +12398,7 @@ const pageParts = [
       alignItems: "center"
     },
     allowsChild: () => true,
-    creator: () => _sfc_main$l
+    creator: () => _sfc_main$m
   }
 ];
 const sectionParts = [
@@ -12223,7 +12417,7 @@ const sectionParts = [
       justifyContent: "start"
     },
     allowsChild: () => true,
-    creator: () => _sfc_main$l
+    creator: () => _sfc_main$m
   }
 ];
 const blockParts = [
@@ -12242,7 +12436,7 @@ const blockParts = [
       justifyContent: "start"
     },
     allowsChild: () => true,
-    creator: () => _sfc_main$n
+    creator: () => _sfc_main$o
   }
 ];
 const widgets = [
@@ -12254,7 +12448,7 @@ const widgets = [
     className: "pb-text-widget",
     propertyGroups: [
       {
-        groupName: "text",
+        groupName: "Text",
         caption: "Text",
         properties: [
           {
@@ -12308,11 +12502,11 @@ const widgets = [
     partType: "Widget",
     partName: "ImageWidget",
     caption: "Image",
-    icon: "imagesmode",
+    icon: "image",
     className: "pb-image-widget",
     propertyGroups: [
       {
-        groupName: "image",
+        groupName: "Image",
         caption: "Image",
         properties: [
           {
@@ -12346,6 +12540,53 @@ const widgets = [
     ],
     initialProperties: {},
     allowsChild: () => false,
+    creator: () => _sfc_main$9$1
+  },
+  {
+    partType: "Widget",
+    partName: "MediaWidget",
+    caption: "Media",
+    icon: "smart_display",
+    className: "pb-media-widget",
+    propertyGroups: [
+      {
+        groupName: "Media",
+        caption: "Media",
+        properties: [
+          {
+            propertyName: "Media",
+            caption: "Media",
+            propertyType: "media"
+          },
+          {
+            propertyName: "altText",
+            caption: "Alt Text",
+            propertyType: "text",
+            multiLang: true
+          },
+          {
+            propertyName: "link",
+            caption: "Link",
+            propertyType: "text"
+          },
+          {
+            propertyName: "linkTarget",
+            caption: "Link Target",
+            propertyType: "text"
+          },
+          {
+            propertyName: "thumbnail",
+            caption: "Thumbnail URL",
+            propertyType: "text",
+            readonly: true
+          }
+        ],
+        propertyGroupEditor: () => _sfc_main$d
+      },
+      ...defaultWidgetPropertyGroups()
+    ],
+    initialProperties: {},
+    allowsChild: () => false,
     creator: () => _sfc_main$8$1
   },
   {
@@ -12356,7 +12597,7 @@ const widgets = [
     className: "pb-html-widget",
     propertyGroups: [
       {
-        groupName: "html",
+        groupName: "HTML",
         caption: "HTML",
         properties: [
           {
@@ -12382,7 +12623,7 @@ const widgets = [
     className: "pb-iframe-widget",
     propertyGroups: [
       {
-        groupName: "iframe",
+        groupName: "Iframe",
         caption: "Iframe",
         properties: [
           {
@@ -12408,7 +12649,7 @@ const widgets = [
     className: "pb-youtube-widget",
     propertyGroups: [
       {
-        groupName: "youtube",
+        groupName: "Youtube",
         caption: "Youtube",
         properties: [
           {
@@ -12441,7 +12682,7 @@ const widgets = [
     className: "pb-container-widget",
     propertyGroups: [
       {
-        groupName: "container",
+        groupName: "Container",
         caption: "Container",
         properties: []
       },
@@ -12451,7 +12692,7 @@ const widgets = [
       height: "300px"
     },
     allowsChild: () => true,
-    creator: () => _sfc_main$d
+    creator: () => _sfc_main$e
   }
 ];
 const partDefinitions = {};
@@ -12538,7 +12779,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-eVGTb1x1.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BcAVsLH4.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -13860,7 +14101,7 @@ class PageBuilderEditorImpl {
           group.partDefinitions.forEach((part) => {
             const p = { ...part };
             p.partType = "Widget";
-            p.creator = () => _sfc_main$q;
+            p.creator = () => _sfc_main$r;
             p.propertyGroups = [...p.propertyGroups, ...defaultWidgetPropertyGroups()];
             partDefinitions2[p.partName] = p;
             g.partDefinitions.push(p);
@@ -14463,11 +14704,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             group: _ctx.group,
             "selected-parts": _ctx.selectedParts
           }, null, 8, ["group", "selected-parts"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.group.properties, (property) => {
-            return openBlock(), createBlock$1(_sfc_main$7, {
-              key: `${_ctx.partsKey}_${property.propertyName}`,
-              property,
-              "selected-parts": _ctx.selectedParts
-            }, null, 8, ["property", "selected-parts"]);
+            return openBlock(), createElementBlock(Fragment, {
+              key: `${_ctx.partsKey}_${property.propertyName}`
+            }, [
+              !property.readonly ? (openBlock(), createBlock$1(_sfc_main$7, {
+                key: 0,
+                property,
+                "selected-parts": _ctx.selectedParts
+              }, null, 8, ["property", "selected-parts"])) : createCommentVNode("", true)
+            ], 64);
           }), 128))
         ], 64)) : createCommentVNode("", true)
       ]);
@@ -14593,7 +14838,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(contentStyle.value)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
-              return openBlock(), createBlock$1(_sfc_main$l, {
+              return openBlock(), createBlock$1(_sfc_main$m, {
                 key: section.partId,
                 "is-mobile-page": _ctx.isMobilePage,
                 part: section
@@ -14611,7 +14856,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n  min-height: 50px;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-image-widget {\n  width: 100%;\n}\n\n.pb-image-widget .image {\n  width: 100%;\n}\n\n.pb-image-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
+const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n  min-height: 50px;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-image-widget {\n  width: 100%;\n}\n\n.pb-image-widget .image {\n  width: 100%;\n}\n\n.pb-image-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-media-widget {\n  width: 100%;\n}\n\n.pb-media-widget .image {\n  width: 100%;\n}\n\n.pb-media-widget .video {\n  width: 100%;\n}\n\n.pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
 const _hoisted_1$2 = ["width"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",
@@ -14846,9 +15091,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  usePageBuilder as A,
+  providePageBuilderViewer as A,
   BLOCK_TYPE$1 as B,
-  usePageBuilderViewer as C,
+  usePageBuilder as C,
+  usePageBuilderViewer as D,
   Model$1 as M,
   PbColorPicker as P,
   ROOT_TYPE$1 as R,
@@ -14863,22 +15109,22 @@ export {
   _sfc_main$2$1 as f,
   Part as g,
   _sfc_main$1$1 as h,
-  _sfc_main$q as i,
+  _sfc_main$r as i,
   _sfc_main$6$1 as j,
   _sfc_main$5$1 as k,
-  _sfc_main$8$1 as l,
-  _sfc_main$7$1 as m,
-  _sfc_main$4$1 as n,
-  RootPart as o,
-  Section as p,
-  Widget as q,
-  createPageBuilderViewer as r,
+  _sfc_main$9$1 as l,
+  _sfc_main$8$1 as m,
+  _sfc_main$7$1 as n,
+  _sfc_main$4$1 as o,
+  RootPart as p,
+  Section as q,
+  Widget as r,
   selectYoutubeVideo as s,
-  createPartComponent as t,
+  createPageBuilderViewer as t,
   usePageBuilderEditor as u,
-  createPartComponents as v,
+  createPartComponent as v,
   widgetPartDefinitions as w,
-  getPartClassName as x,
-  providePageBuilder as y,
-  providePageBuilderViewer as z
+  createPartComponents as x,
+  getPartClassName as y,
+  providePageBuilder as z
 };