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

package/dist/page-builder-editor.umd.cjs

@@ -6880,8 +6880,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.rootPart = vue.ref(new RootPart());
     }
   };
-  const _hoisted_1$a$1 = ["data-part-id"];
-  const _sfc_main$b$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$b$1 = ["data-part-id"];
+  const _sfc_main$c$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
       part: {}
@@ -6918,15 +6918,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               part: _ctx.part,
               "onUpdate:visible": updateVisible
             }, null, 40, ["part"])) : vue.createCommentVNode("", true)
-          ], 14, _hoisted_1$a$1), [
+          ], 14, _hoisted_1$b$1), [
             [vue.vShow, visible.value]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$9$1 = ["data-part-id"];
-  const _sfc_main$a$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a$1 = ["data-part-id"];
+  const _sfc_main$b$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
       part: {},
@@ -6961,21 +6961,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             style: vue.normalizeStyle(style.value)
           }, [
             _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (child) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$b$1, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$c$1, {
                 key: child.partId,
                 part: child,
                 "onUpdate:visible": (value) => updateVisible(child.partId, value)
               }, null, 8, ["part", "onUpdate:visible"]);
             }), 128)) : vue.createCommentVNode("", true)
-          ], 14, _hoisted_1$9$1), [
+          ], 14, _hoisted_1$a$1), [
             [vue.vShow, visible.value]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$8$1 = ["data-part-id"];
-  const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$9$1 = ["data-part-id"];
+  const _sfc_main$a$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
       part: {},
@@ -7007,28 +7007,28 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             style: vue.normalizeStyle(style.value)
           }, [
             _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (child) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$a$1, {
+              return vue.openBlock(), vue.createBlock(_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)) : vue.createCommentVNode("", true)
-          ], 14, _hoisted_1$8$1), [
+          ], 14, _hoisted_1$9$1), [
             [vue.vShow, visible.value]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$7$1 = ["href", "target"];
-  const _hoisted_2$4$1 = ["alt", "src"];
-  const _hoisted_3$o = ["alt", "src"];
-  const _hoisted_4$e = {
+  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__ */ vue.defineComponent({
+  const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbImageWidget",
     props: {
       part: {},
@@ -7069,20 +7069,103 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).url,
               style: vue.normalizeStyle(style.value),
               class: "image"
-            }, null, 12, _hoisted_2$4$1)
-          ], 8, _hoisted_1$7$1)) : (vue.openBlock(), vue.createElementBlock("img", {
+            }, null, 12, _hoisted_2$5$1)
+          ], 8, _hoisted_1$8$1)) : (vue.openBlock(), vue.createElementBlock("img", {
             key: 1,
             alt: altText.value,
             src: ((_f = _ctx.part.properties) == null ? void 0 : _f.media).url,
             style: vue.normalizeStyle(style.value),
             class: "image"
-          }, null, 12, _hoisted_3$o))
-        ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$e, _cache[0] || (_cache[0] = [
+          }, null, 12, _hoisted_3$1$1))
+        ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1$1, _cache[0] || (_cache[0] = [
           vue.createElementVNode("span", { class: "font-icon" }, "image", -1)
         ]))) : vue.createCommentVNode("", true);
       };
     }
   });
+  const _hoisted_1$7$1 = ["href", "target"];
+  const _hoisted_2$4$1 = ["alt", "src"];
+  const _hoisted_3$o = ["alt", "src"];
+  const _hoisted_4$e = ["poster"];
+  const _hoisted_5$8 = ["src"];
+  const _hoisted_6$8 = {
+    key: 1,
+    class: "placeholder"
+  };
+  const _hoisted_7$8 = { class: "font-icon" };
+  const _sfc_main$8$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PbMediaWidget",
+    props: {
+      part: {},
+      placeholder: { type: Boolean }
+    },
+    setup(__props) {
+      const props = __props;
+      const pageBuilder = usePageBuilder();
+      const media = vue.computed(() => {
+        var _a;
+        return (_a = props.part.properties) == null ? void 0 : _a.media;
+      });
+      const altText = vue.computed(() => {
+        if (media.value && media.value.altText) {
+          const locale = pageBuilder.getLocale();
+          return media.value.altText[locale] || "";
+        }
+        return "";
+      });
+      const placeholderIcon = vue.computed(() => {
+        var _a;
+        return ((_a = media.value) == null ? void 0 : _a.mediaType) === "Video" ? "smart_display" : "image";
+      });
+      const style = vue.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 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          media.value.mediaType === "Image" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            ((_a = _ctx.part.properties) == null ? void 0 : _a.link) ? (vue.openBlock(), vue.createElementBlock("a", {
+              key: 0,
+              href: (_b = _ctx.part.properties) == null ? void 0 : _b.link,
+              target: (_c = _ctx.part.properties) == null ? void 0 : _c.linkTarget
+            }, [
+              vue.createElementVNode("img", {
+                alt: altText.value,
+                src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).url,
+                style: vue.normalizeStyle(style.value),
+                class: "image"
+              }, null, 12, _hoisted_2$4$1)
+            ], 8, _hoisted_1$7$1)) : (vue.openBlock(), vue.createElementBlock("img", {
+              key: 1,
+              alt: altText.value,
+              src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).url,
+              style: vue.normalizeStyle(style.value),
+              class: "image"
+            }, null, 12, _hoisted_3$o))
+          ], 64)) : media.value.mediaType === "Video" ? (vue.openBlock(), vue.createElementBlock("video", {
+            key: 1,
+            ref: "video",
+            poster: (_f = _ctx.part.properties) == null ? void 0 : _f.thumbnail,
+            class: "video",
+            controls: ""
+          }, [
+            vue.createElementVNode("source", {
+              src: `${media.value.url}#t=0.01`
+            }, null, 8, _hoisted_5$8)
+          ], 8, _hoisted_4$e)) : vue.createCommentVNode("", true)
+        ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$8, [
+          vue.createElementVNode("span", _hoisted_7$8, vue.toDisplayString(placeholderIcon.value), 1)
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
   const _hoisted_1$6$1 = ["textContent"];
   const _hoisted_2$3$1 = {
     key: 1,
@@ -7244,7 +7327,7 @@ ${_html.style}
       const isYTReady = vue.ref(false);
       vue.onMounted(() => {
         const interval = setInterval(() => {
-          if (window.YT) {
+          if (window && window.YT) {
             isYTReady.value = true;
             clearInterval(interval);
           }
@@ -7280,13 +7363,13 @@ ${_html.style}
       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",
@@ -7298,6 +7381,12 @@ ${_html.style}
       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": {
@@ -7349,7 +7438,7 @@ ${_html.style}
         plugin.widgets.forEach((v) => {
           const w = { ...v };
           w.partType = "Widget";
-          w.creator = () => _sfc_main$E;
+          w.creator = () => _sfc_main$F;
           partDefinitions$1[v.partName] = w;
         });
       }
@@ -7491,7 +7580,7 @@ ${_html.style}
             style: vue.normalizeStyle(style.value)
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (section) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$a$1, {
                 key: section.partId,
                 "is-mobile-page": _ctx.isMobilePage,
                 part: section
@@ -7555,7 +7644,7 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$H = {
+  const _hoisted_1$I = {
     key: 1,
     class: "placeholder",
     textContent: "Empty Widget"
@@ -7576,11 +7665,11 @@ ${_html.style}
             key: child.part.partId,
             part: child.part
           }, null, 8, ["part"]);
-        }), 128)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H)) : vue.createCommentVNode("", true);
+        }), 128)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I)) : vue.createCommentVNode("", true);
       };
     }
   });
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCustomWidget",
     props: {
       part: {},
@@ -8434,10 +8523,10 @@ ${_html.style}
     }
     return target;
   };
-  const _sfc_main$D = {};
-  const _hoisted_1$G = { class: "pb-add-widget-button" };
+  const _sfc_main$E = {};
+  const _hoisted_1$H = { class: "pb-add-widget-button" };
   function _sfc_render$1(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H, [
       vue.createElementVNode("button", {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
       }, _cache[1] || (_cache[1] = [
@@ -8446,7 +8535,7 @@ ${_html.style}
       ]))
     ]);
   }
-  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$1]]);
+  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$1]]);
   const MOUSE_TRACKER_KEY = "mouseTracker";
   const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
   class MouseTracker {
@@ -8474,8 +8563,8 @@ ${_html.style}
     if (!mouseTracker) throw Error(MOUSE_TRACKER_NOT_FOUND);
     return mouseTracker;
   };
-  const _hoisted_1$F = ["data-part-id", "draggable"];
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$G = ["data-part-id", "draggable"];
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
       part: {},
@@ -8911,15 +9000,15 @@ ${_html.style}
               class: "resize-handle",
               onMousedown: resizeChild
             }, null, 32)) : vue.createCommentVNode("", true)
-          ], 14, _hoisted_1$F)), [
+          ], 14, _hoisted_1$G)), [
             [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$E = ["data-part-id"];
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$F = ["data-part-id"];
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
       part: {},
@@ -9110,27 +9199,27 @@ ${_html.style}
               onAddWidget: addWidget
             })) : vue.createCommentVNode("", true),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$C, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$D, {
                 key: child.partId,
                 part: child
               }, null, 8, ["part"]);
             }), 128))
-          ], 16, _hoisted_1$E)), [
+          ], 16, _hoisted_1$F)), [
             [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$D = { class: "pb-block" };
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$E = { class: "pb-block" };
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
     props: {
       part: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, _cache[0] || (_cache[0] = [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, _cache[0] || (_cache[0] = [
           vue.createElementVNode("div", {
             class: "pb-widget",
             style: { "margin": "0 auto" }
@@ -9143,8 +9232,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$C = ["data-part-id"];
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$D = ["data-part-id"];
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
       part: {},
@@ -9255,13 +9344,13 @@ ${_html.style}
             style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
           }, properties.value), [
             ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+              ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
                 key: 0,
                 part: _ctx.part
               }, null, 8, ["part"])) : vue.createCommentVNode("", true)
             ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (block) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$B, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$C, {
                   key: block.partId,
                   "is-mobile-page": _ctx.isMobilePage,
                   part: block
@@ -9271,21 +9360,21 @@ ${_html.style}
                 onAddWidget: addWidget
               }))
             ], 64))
-          ], 16, _hoisted_1$C)), [
+          ], 16, _hoisted_1$D)), [
             [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$B = { class: "group-editor group-editor-position" };
+  const _hoisted_1$C = { class: "group-editor group-editor-position" };
   const _hoisted_2$s = { class: "flex-align-center" };
   const _hoisted_3$n = { class: "flex-grow-1" };
   const _hoisted_4$d = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_5$7 = { class: "text-center" };
   const _hoisted_6$7 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_7$7 = { class: "text-center" };
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPosition",
     props: {
       group: {},
@@ -9309,7 +9398,7 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ top: value });
       const updateBottom = (value) => updatePropertyValue({ bottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
           vue.createElementVNode("div", _hoisted_2$s, [
             _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Position" })
@@ -9363,14 +9452,14 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$A = { class: "group-editor group-editor-size" };
+  const _hoisted_1$B = { class: "group-editor group-editor-size" };
   const _hoisted_2$r = { class: "flex-align-center" };
   const _hoisted_3$m = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_4$c = { class: "flex-align-center mt-12" };
   const _hoisted_5$6 = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_6$6 = { class: "flex-align-center mt-12" };
   const _hoisted_7$6 = { class: "flex-grow-1 bs-layout-horizontal" };
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorSize",
     props: {
       group: {},
@@ -9398,7 +9487,7 @@ ${_html.style}
       const updateMinWidth = (value) => updatePropertyValue({ minWidth: value });
       const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
           vue.createElementVNode("div", _hoisted_2$r, [
             _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Size" })
@@ -9616,7 +9705,7 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$z = { class: "vc-alpha" };
+  const _hoisted_1$A = { class: "vc-alpha" };
   const _hoisted_2$q = { class: "vc-alpha-checkboard-wrap" };
   const _hoisted_3$l = /* @__PURE__ */ vue.createElementVNode(
     "div",
@@ -9630,7 +9719,7 @@ ${_html.style}
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
       vue.createElementVNode("div", _hoisted_2$q, [
         vue.createVNode(_component_Checkboard)
       ]),
@@ -10734,12 +10823,12 @@ ${_html.style}
       // }
     }
   };
-  const _hoisted_1$y = { class: "vc-editable-input" };
+  const _hoisted_1$z = { class: "vc-editable-input" };
   const _hoisted_2$p = ["aria-labelledby"];
   const _hoisted_3$k = ["id", "for"];
   const _hoisted_4$a = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
       vue.withDirectives(vue.createElementVNode("input", {
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.val = $event),
@@ -10834,7 +10923,7 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$x = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$y = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--white" },
     null,
@@ -10870,7 +10959,7 @@ ${_html.style}
         onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
       },
       [
-        _hoisted_1$x,
+        _hoisted_1$y,
         _hoisted_2$o,
         vue.createElementVNode(
           "div",
@@ -11019,7 +11108,7 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$w = ["aria-valuenow"];
+  const _hoisted_1$x = ["aria-valuenow"];
   const _hoisted_2$n = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-hue-picker" },
@@ -11059,7 +11148,7 @@ ${_html.style}
             4
             /* STYLE */
           )
-        ], 40, _hoisted_1$w)
+        ], 40, _hoisted_1$x)
       ],
       2
       /* CLASS */
@@ -11155,7 +11244,7 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$v = { class: "vc-sketch-saturation-wrap" };
+  const _hoisted_1$w = { class: "vc-sketch-saturation-wrap" };
   const _hoisted_2$m = { class: "vc-sketch-controls" };
   const _hoisted_3$h = { class: "vc-sketch-sliders" };
   const _hoisted_4$8 = { class: "vc-sketch-hue-wrap" };
@@ -11198,7 +11287,7 @@ ${_html.style}
         class: vue.normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
       },
       [
-        vue.createElementVNode("div", _hoisted_1$v, [
+        vue.createElementVNode("div", _hoisted_1$w, [
           vue.createVNode(_component_Saturation, {
             value: _ctx.colors,
             onChange: $options.childChange
@@ -11310,7 +11399,7 @@ ${_html.style}
   script.render = render;
   script.__file = "src/components/sketch/sketch.vue";
   script.install = install;
-  const _sfc_main$w = vue.defineComponent({
+  const _sfc_main$x = vue.defineComponent({
     name: "PbColorPicker",
     components: {
       Sketch: script
@@ -11370,7 +11459,7 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$u = { class: "buttons" };
+  const _hoisted_1$v = { class: "buttons" };
   const _hoisted_2$l = { class: "sketch-wrap" };
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Sketch = vue.resolveComponent("Sketch");
@@ -11380,7 +11469,7 @@ ${_html.style}
       onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
       }, ["stop"]))
     }, [
-      vue.createElementVNode("div", _hoisted_1$u, [
+      vue.createElementVNode("div", _hoisted_1$v, [
         vue.renderSlot(_ctx.$slots, "button", vue.normalizeProps(vue.guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
           vue.createElementVNode("button", {
             class: vue.normalizeClass([{ none: !_ctx.color }, "picker-button"]),
@@ -11407,12 +11496,12 @@ ${_html.style}
       [_directive_click_outside, () => _ctx.toggle(false)]
     ]);
   }
-  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render]]);
-  const _hoisted_1$t = { class: "group-editor group-editor-background" };
+  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render]]);
+  const _hoisted_1$u = { class: "group-editor group-editor-background" };
   const _hoisted_2$k = { class: "flex-align-center" };
   const _hoisted_3$g = { class: "bs-layout-horizontal" };
   const _hoisted_4$7 = { class: "color" };
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBackground",
     props: {
       group: {},
@@ -11445,7 +11534,7 @@ ${_html.style}
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
           vue.createElementVNode("div", _hoisted_2$k, [
             _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Background" })
@@ -11480,7 +11569,7 @@ ${_html.style}
   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$s = { class: "group-editor group-editor-border" };
+  const _hoisted_1$t = { class: "group-editor group-editor-border" };
   const _hoisted_2$j = { class: "flex-align-center" };
   const _hoisted_3$f = { class: "" };
   const _hoisted_4$6 = { class: "color" };
@@ -11495,7 +11584,7 @@ ${_html.style}
   const _hoisted_13 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_14 = { class: "" };
   const _hoisted_15 = { class: "mt-2" };
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBorder",
     props: {
       group: {},
@@ -11533,7 +11622,7 @@ ${_html.style}
       const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: value });
       const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
           vue.createElementVNode("div", _hoisted_2$j, [
             _cache[7] || (_cache[7] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Border" })
@@ -11655,14 +11744,14 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$r = { class: "group-editor group-editor-margin" };
+  const _hoisted_1$s = { class: "group-editor group-editor-margin" };
   const _hoisted_2$i = { class: "flex-align-center" };
   const _hoisted_3$e = { class: "flex-grow-1" };
   const _hoisted_4$5 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_5$3 = { class: "text-center" };
   const _hoisted_6$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_7$3 = { class: "text-center" };
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorMargin",
     props: {
       group: {},
@@ -11686,7 +11775,7 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ marginTop: value });
       const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
           vue.createElementVNode("div", _hoisted_2$i, [
             _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Margin" })
@@ -11740,14 +11829,14 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$q = { class: "group-editor group-editor-padding" };
+  const _hoisted_1$r = { class: "group-editor group-editor-padding" };
   const _hoisted_2$h = { class: "flex-align-center" };
   const _hoisted_3$d = { class: "flex-grow-1" };
   const _hoisted_4$4 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_5$2 = { class: "text-center" };
   const _hoisted_6$2 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_7$2 = { class: "text-center" };
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPadding",
     props: {
       group: {},
@@ -11771,7 +11860,7 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ paddingTop: value });
       const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
           vue.createElementVNode("div", _hoisted_2$h, [
             _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Padding" })
@@ -11851,7 +11940,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$y
+      propertyGroupEditor: () => _sfc_main$z
     };
   };
   const sizeGroup = () => {
@@ -11890,7 +11979,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$x
+      propertyGroupEditor: () => _sfc_main$y
     };
   };
   const marginGroup = () => {
@@ -11919,7 +12008,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$t
+      propertyGroupEditor: () => _sfc_main$u
     };
   };
   const paddingGroup = () => {
@@ -11948,7 +12037,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$s
+      propertyGroupEditor: () => _sfc_main$t
     };
   };
   const commonGroup = () => {
@@ -12084,7 +12173,7 @@ ${_html.style}
           propertyType: "image"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$v
+      propertyGroupEditor: () => _sfc_main$w
     };
   };
   const borderGroup = () => {
@@ -12138,7 +12227,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$u
+      propertyGroupEditor: () => _sfc_main$v
     };
   };
   const defaultPropertyGroups = () => {
@@ -12147,7 +12236,7 @@ ${_html.style}
   const defaultWidgetPropertyGroups = () => {
     return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
   };
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "PbContainerWidget",
     props: {
       part: {},
@@ -12162,7 +12251,7 @@ ${_html.style}
         var _a;
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           _ctx.part.children ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (child) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$C, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$D, {
               key: child.partId,
               "is-mobile-page": false,
               part: child
@@ -12176,6 +12265,111 @@ ${_html.style}
       };
     }
   });
+  const _hoisted_1$q = { class: "group-editor group-editor-media" };
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+    __name: "PbPropertyGroupEditorMedia",
+    props: {
+      property: {},
+      value: {}
+    },
+    setup(__props) {
+      const pageBuilder = usePageBuilderEditor();
+      const part = pageBuilder.context.getSelectedParts();
+      const modal = bluesea.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 = vue.computed(() => pageBuilder.getLocales());
+      const media = vue.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 = vue.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 = vue.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 = vue.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 = vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+          _cache[8] || (_cache[8] = vue.createElementVNode("div", { class: "title" }, [
+            vue.createElementVNode("label", { textContent: "Media" })
+          ], -1)),
+          vue.createElementVNode("div", null, [
+            vue.createElementVNode("button", { onClick: selectMedia }, "Select Media")
+          ]),
+          ((_a = media.value) == null ? void 0 : _a.mediaType) === "Image" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            _cache[4] || (_cache[4] = vue.createElementVNode("div", { class: "title mt-12" }, [
+              vue.createElementVNode("label", { textContent: "Alt Text" })
+            ], -1)),
+            vue.createElementVNode("div", null, [
+              vue.createVNode(vue.unref(bluesea.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] = vue.createElementVNode("div", { class: "title mt-12" }, [
+              vue.createElementVNode("label", { textContent: "Link" })
+            ], -1)),
+            vue.createElementVNode("div", null, [
+              vue.createVNode(vue.unref(bluesea.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] = vue.createElementVNode("div", { class: "title mt-12" }, [
+              vue.createElementVNode("label", { textContent: "Link Target" })
+            ], -1)),
+            vue.createElementVNode("div", null, [
+              vue.createVNode(vue.unref(bluesea.BSTextInput), {
+                "model-value": linkTarget.value,
+                width: "100%",
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ linkTarget: value }))
+              }, null, 8, ["model-value"])
+            ])
+          ], 64)) : vue.createCommentVNode("", true),
+          ((_b = media.value) == null ? void 0 : _b.mediaType) === "Video" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            _cache[7] || (_cache[7] = vue.createElementVNode("div", { class: "title mt-12" }, [
+              vue.createElementVNode("label", { textContent: "Thumbnail" })
+            ], -1)),
+            vue.createElementVNode("div", null, [
+              vue.createVNode(vue.unref(bluesea.BSTextInput), {
+                "model-value": thumbnail.value,
+                width: "100%",
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => updateProperty({ thumbnail: value }))
+              }, null, 8, ["model-value"])
+            ])
+          ], 64)) : vue.createCommentVNode("", true)
+        ]);
+      };
+    }
+  });
   const pageParts = [
     {
       partType: "Page",
@@ -12185,7 +12379,7 @@ ${_html.style}
       className: "pb-page",
       propertyGroups: [
         {
-          groupName: "size",
+          groupName: "Size",
           caption: "Size",
           properties: [
             {
@@ -12205,7 +12399,7 @@ ${_html.style}
         alignItems: "center"
       },
       allowsChild: () => true,
-      creator: () => _sfc_main$z
+      creator: () => _sfc_main$A
     }
   ];
   const sectionParts = [
@@ -12224,7 +12418,7 @@ ${_html.style}
         justifyContent: "start"
       },
       allowsChild: () => true,
-      creator: () => _sfc_main$z
+      creator: () => _sfc_main$A
     }
   ];
   const blockParts = [
@@ -12243,7 +12437,7 @@ ${_html.style}
         justifyContent: "start"
       },
       allowsChild: () => true,
-      creator: () => _sfc_main$B
+      creator: () => _sfc_main$C
     }
   ];
   const widgets = [
@@ -12255,7 +12449,7 @@ ${_html.style}
       className: "pb-text-widget",
       propertyGroups: [
         {
-          groupName: "text",
+          groupName: "Text",
           caption: "Text",
           properties: [
             {
@@ -12309,11 +12503,11 @@ ${_html.style}
       partType: "Widget",
       partName: "ImageWidget",
       caption: "Image",
-      icon: "imagesmode",
+      icon: "image",
       className: "pb-image-widget",
       propertyGroups: [
         {
-          groupName: "image",
+          groupName: "Image",
           caption: "Image",
           properties: [
             {
@@ -12347,6 +12541,53 @@ ${_html.style}
       ],
       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$r
+        },
+        ...defaultWidgetPropertyGroups()
+      ],
+      initialProperties: {},
+      allowsChild: () => false,
       creator: () => _sfc_main$8$1
     },
     {
@@ -12357,7 +12598,7 @@ ${_html.style}
       className: "pb-html-widget",
       propertyGroups: [
         {
-          groupName: "html",
+          groupName: "HTML",
           caption: "HTML",
           properties: [
             {
@@ -12383,7 +12624,7 @@ ${_html.style}
       className: "pb-iframe-widget",
       propertyGroups: [
         {
-          groupName: "iframe",
+          groupName: "Iframe",
           caption: "Iframe",
           properties: [
             {
@@ -12409,7 +12650,7 @@ ${_html.style}
       className: "pb-youtube-widget",
       propertyGroups: [
         {
-          groupName: "youtube",
+          groupName: "Youtube",
           caption: "Youtube",
           properties: [
             {
@@ -12442,7 +12683,7 @@ ${_html.style}
       className: "pb-container-widget",
       propertyGroups: [
         {
-          groupName: "container",
+          groupName: "Container",
           caption: "Container",
           properties: []
         },
@@ -12452,7 +12693,7 @@ ${_html.style}
         height: "300px"
       },
       allowsChild: () => true,
-      creator: () => _sfc_main$r
+      creator: () => _sfc_main$s
     }
   ];
   const partDefinitions = {};
@@ -12572,40 +12813,6 @@ ${_html.style}
       }
     });
   };
-  const findInsertTargetAndIndex = (pageBuilder, partType) => {
-    var _a, _b, _c;
-    const selected = pageBuilder.context.getSelectedParts()[0];
-    const page = pageBuilder.context.getSelectedPage();
-    if (!page) return {};
-    if (partType === SECTION_TYPE) {
-      const section = pageBuilder.partManager.findNearestSection(selected);
-      return {
-        target: page,
-        index: section ? page.children.indexOf(section) + 1 : (_a = page.children) == null ? void 0 : _a.length
-      };
-    } else if (partType === BLOCK_TYPE) {
-      let section = pageBuilder.partManager.findNearestSection(selected);
-      let block = pageBuilder.partManager.findNearestBlock(selected);
-      if (!section) {
-        section = page.children[page.children.length - 1];
-      }
-      return {
-        target: section,
-        index: block ? section.children.indexOf(block) + 1 : (_b = section.children) == null ? void 0 : _b.length
-      };
-    } else {
-      let block = pageBuilder.partManager.findNearestBlock(selected);
-      let widget = selected.parent.isWidget() ? selected.parent : selected;
-      if (!block) {
-        const section = page.children[page.children.length - 1];
-        block = section.children[section.children.length - 1];
-      }
-      return {
-        target: block,
-        index: widget ? block.children.indexOf(widget) + 1 : (_c = block.children) == null ? void 0 : _c.length
-      };
-    }
-  };
   const createPartWithDefinition = (def, properties) => {
     const part = createPart(def.partType, def.partName, def.initialProperties);
     if (part && properties) {
@@ -13134,7 +13341,7 @@ ${_html.style}
       __publicField(this, "commandId", _PastePartCommand.COMMAND_ID);
     }
     async execute(pageBuilder) {
-      var _a;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       const json = await navigator.clipboard.readText();
       const object = JSON.parse(json);
       if (object.partType === ROOT_TYPE) {
@@ -13202,7 +13409,7 @@ ${_html.style}
           else if (part.partType === WIDGET_TYPE && !pasteType) pasteType = WIDGET_TYPE;
         });
         if (!pasteType) return;
-        const partsToInsert = parts.map((part) => {
+        const partsToPaste = parts.map((part) => {
           if (pasteType === SECTION_TYPE) {
             if (part.partType === SECTION_TYPE) {
               return part;
@@ -13233,11 +13440,76 @@ ${_html.style}
             return part;
           }
         }).filter(bluesea.notNull);
-        const targetType = pasteType === SECTION_TYPE ? SECTION_TYPE : pasteType === BLOCK_TYPE ? BLOCK_TYPE : WIDGET_TYPE;
-        const { target, index } = findInsertTargetAndIndex(pageBuilder, targetType);
-        if (target && index !== void 0 && partsToInsert) {
-          insertParts(pageBuilder, target.partId, index, partsToInsert, false);
+        const selectedPage = pageBuilder.context.getSelectedPage();
+        const selected = pageBuilder.context.getSelectedParts()[0] || selectedPage;
+        if (!selectedPage || !selected) return;
+        let selectedWidget;
+        if (selected && selected.isWidget()) selectedWidget = selected;
+        if (selectedWidget && selectedWidget.isNestedWidget()) selectedWidget = selectedWidget.parent;
+        let selectedBlock;
+        if (selectedWidget) selectedBlock = selectedWidget.parent;
+        else if (selected && selected.isBlock()) selectedBlock = selected;
+        let selectedSection;
+        if (selectedBlock) selectedSection = selectedBlock.parent;
+        else if (selected && selected.isSection()) selectedSection = selected;
+        let targetPartId;
+        let targetIndex = -1;
+        let partsToInsert;
+        if (pasteType === SECTION_TYPE) {
+          targetPartId = selectedPage.partId;
+          targetIndex = selectedSection ? selectedPage.children.indexOf(selectedSection) + 1 : ((_b = selectedPage.children) == null ? void 0 : _b.length) || 0;
+          partsToInsert = partsToPaste;
+        } else if (pasteType === BLOCK_TYPE) {
+          if (selectedSection) {
+            targetPartId = selectedSection.partId;
+            targetIndex = selectedBlock ? selectedSection.children.indexOf(selectedBlock) + 1 : ((_c = selectedSection.children) == null ? void 0 : _c.length) || 0;
+            partsToInsert = partsToPaste;
+          } else if ((_d = selectedPage.children) == null ? void 0 : _d.length) {
+            selectedSection = selectedPage.children[selectedPage.children.length - 1];
+            targetPartId = selectedSection.partId;
+            targetIndex = ((_e = selectedSection.children) == null ? void 0 : _e.length) || 0;
+            partsToInsert = partsToPaste;
+          } else {
+            const newSection = createSection(pageBuilder);
+            if (!newSection) return;
+            newSection.children = partsToPaste;
+            targetPartId = selectedPage.partId;
+            targetIndex = 0;
+            partsToInsert = [newSection];
+          }
+        } else if (pasteType === WIDGET_TYPE) {
+          if (selectedBlock) {
+            targetPartId = selectedBlock.partId;
+            targetIndex = selectedWidget ? selectedBlock.children.indexOf(selectedWidget) + 1 : ((_f = selectedBlock.children) == null ? void 0 : _f.length) || 0;
+            partsToInsert = partsToPaste;
+          } else if (selectedSection || ((_g = selectedPage.children) == null ? void 0 : _g.length)) {
+            if (!selectedSection) selectedSection = selectedPage.children[selectedPage.children.length - 1];
+            if ((_h = selectedSection.children) == null ? void 0 : _h.length) {
+              selectedBlock = selectedSection.children[selectedSection.children.length - 1];
+              targetPartId = selectedBlock.partId;
+              targetIndex = ((_i = selectedBlock.children) == null ? void 0 : _i.length) || 0;
+              partsToInsert = partsToPaste;
+            } else {
+              const newBlock = createBlock(pageBuilder);
+              if (!newBlock) return;
+              newBlock.children = partsToPaste;
+              targetPartId = selectedSection.partId;
+              targetIndex = 0;
+              partsToInsert = [newBlock];
+            }
+          } else {
+            const newBlock = createBlock(pageBuilder);
+            const newSection = createSection(pageBuilder);
+            if (!newBlock || !newSection) return;
+            newSection.children = [newBlock];
+            newBlock.children = partsToPaste;
+            targetPartId = selectedPage.partId;
+            targetIndex = 0;
+            partsToInsert = [newSection];
+          }
         }
+        if (!targetPartId || targetIndex < 0 || !partsToInsert) return;
+        insertParts(pageBuilder, targetPartId, targetIndex, partsToInsert, false);
       }
     }
   };
@@ -13642,8 +13914,8 @@ ${_html.style}
       const pages = this.model.rootPart.children;
       let part = this.selection[0];
       if (!part) return pages && pages[0];
-      while (part.parent) {
-        if (part.parent.isPage()) return part.parent;
+      while (part) {
+        if (part.isPage()) return part;
         part = part.parent;
       }
     }
@@ -13830,7 +14102,7 @@ ${_html.style}
             group.partDefinitions.forEach((part) => {
               const p = { ...part };
               p.partType = "Widget";
-              p.creator = () => _sfc_main$E;
+              p.creator = () => _sfc_main$F;
               p.propertyGroups = [...p.propertyGroups, ...defaultWidgetPropertyGroups()];
               partDefinitions2[p.partName] = p;
               g.partDefinitions.push(p);
@@ -14433,11 +14705,15 @@ ${_html.style}
               group: _ctx.group,
               "selected-parts": _ctx.selectedParts
             }, null, 8, ["group", "selected-parts"])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.group.properties, (property) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$l, {
-                key: `${_ctx.partsKey}_${property.propertyName}`,
-                property,
-                "selected-parts": _ctx.selectedParts
-              }, null, 8, ["property", "selected-parts"]);
+              return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                key: `${_ctx.partsKey}_${property.propertyName}`
+              }, [
+                !property.readonly ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+                  key: 0,
+                  property,
+                  "selected-parts": _ctx.selectedParts
+                }, null, 8, ["property", "selected-parts"])) : vue.createCommentVNode("", true)
+              ], 64);
             }), 128))
           ], 64)) : vue.createCommentVNode("", true)
         ]);
@@ -14563,7 +14839,7 @@ ${_html.style}
               style: vue.normalizeStyle(contentStyle.value)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$z, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$A, {
                   key: section.partId,
                   "is-mobile-page": _ctx.isMobilePage,
                   part: section
@@ -14581,7 +14857,7 @@ ${_html.style}
       };
     }
   });
-  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$g = ["width"];
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
@@ -15682,10 +15958,11 @@ ${_html.tags}` : "";
   exports2.PageBuilderViewer = _sfc_main$2$1;
   exports2.Part = Part;
   exports2.PbContainerWidget = _sfc_main$1$1;
-  exports2.PbCustomWidget = _sfc_main$E;
+  exports2.PbCustomWidget = _sfc_main$F;
   exports2.PbHtmlWidget = _sfc_main$6$1;
   exports2.PbIframeWidget = _sfc_main$5$1;
-  exports2.PbImageWidget = _sfc_main$8$1;
+  exports2.PbImageWidget = _sfc_main$9$1;
+  exports2.PbMediaWidget = _sfc_main$8$1;
   exports2.PbTextWidget = _sfc_main$7$1;
   exports2.PbYoutubeWidget = _sfc_main$4$1;
   exports2.ROOT_TYPE = ROOT_TYPE$1;