@g1cloud/page-builder-editor 1.0.0-alpha.21 → 1.0.0-alpha.22

package/dist/{index-Cr-_-n9T.js → index-Bss8IrUk.js}

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, mergeProps, toDisplayString, onMounted, onBeforeUnmount, provide, inject, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, createElementVNode, normalizeClass, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers } from "vue";
-import { notNull, BSTextInput, vClickOutside, useModal, useContextMenu, BSSelect, BSTree } from "@g1cloud/bluesea";
+import { ref, defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createCommentVNode, mergeProps, toDisplayString, onMounted, onBeforeUnmount, provide, inject, watch, Fragment, unref, createElementVNode, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, renderList, reactive, defineAsyncComponent, withDirectives, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers } from "vue";
+import { notNull, BSTextInput, vClickOutside, useModal, BSSelect, useContextMenu, BSTree } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
   const r = create$5();
@@ -6691,10 +6691,11 @@ class Part {
     return propertyName === PART_ID_KEY$1 ? this.partId : (_a = this.properties) == null ? void 0 : _a[propertyName];
   }
   getClassNames() {
-    return "";
+    var _a;
+    return ((_a = this.properties) == null ? void 0 : _a.classNames) || "";
   }
   getStyles() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
     const style = {};
     if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
       style.display = "flex";
@@ -6738,42 +6739,81 @@ class Part {
       style.width = this.properties.width;
     if ((_s = this.properties) == null ? void 0 : _s.height)
       style.height = this.properties.height;
-    if ((_t = this.properties) == null ? void 0 : _t.backgroundColor)
+    if ((_t = this.properties) == null ? void 0 : _t.maxWidth)
+      style.width = this.properties.maxWidth;
+    if ((_u = this.properties) == null ? void 0 : _u.maxHeight)
+      style.height = this.properties.maxHeight;
+    if ((_v = this.properties) == null ? void 0 : _v.minWidth)
+      style.width = this.properties.minWidth;
+    if ((_w = this.properties) == null ? void 0 : _w.minHeight)
+      style.height = this.properties.minHeight;
+    if ((_x = this.properties) == null ? void 0 : _x.backgroundColor)
       style.backgroundColor = this.properties.backgroundColor;
-    if ((_u = this.properties) == null ? void 0 : _u.borderLeftWidth)
+    if ((_y = this.properties) == null ? void 0 : _y.borderLeftWidth)
       style.borderLeftWidth = this.properties.borderLeftWidth;
-    if ((_v = this.properties) == null ? void 0 : _v.borderRightWidth)
+    if ((_z = this.properties) == null ? void 0 : _z.borderRightWidth)
       style.borderRightWidth = this.properties.borderRightWidth;
-    if ((_w = this.properties) == null ? void 0 : _w.borderTopWidth)
+    if ((_A = this.properties) == null ? void 0 : _A.borderTopWidth)
       style.borderTopWidth = this.properties.borderTopWidth;
-    if ((_x = this.properties) == null ? void 0 : _x.borderBottomWidth)
+    if ((_B = this.properties) == null ? void 0 : _B.borderBottomWidth)
       style.borderBottomWidth = this.properties.borderBottomWidth;
-    if ((_y = this.properties) == null ? void 0 : _y.borderTopLeftRadius)
+    if ((_C = this.properties) == null ? void 0 : _C.borderTopLeftRadius)
       style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
-    if ((_z = this.properties) == null ? void 0 : _z.borderTopRightRadius)
+    if ((_D = this.properties) == null ? void 0 : _D.borderTopRightRadius)
       style.borderTopRightRadius = this.properties.borderTopRightRadius;
-    if ((_A = this.properties) == null ? void 0 : _A.borderBottomLeftRadius)
+    if ((_E = this.properties) == null ? void 0 : _E.borderBottomLeftRadius)
       style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
-    if ((_B = this.properties) == null ? void 0 : _B.borderBottomRightRadius)
+    if ((_F = this.properties) == null ? void 0 : _F.borderBottomRightRadius)
       style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
-    if (((_C = this.properties) == null ? void 0 : _C.borderColor) && style.borderLeftWidth) {
+    if (((_G = this.properties) == null ? void 0 : _G.borderColor) && style.borderLeftWidth) {
       style.borderLeftStyle = "solid";
-      style.borderLeftColor = (_D = this.properties) == null ? void 0 : _D.borderColor;
+      style.borderLeftColor = (_H = this.properties) == null ? void 0 : _H.borderColor;
     }
-    if (((_E = this.properties) == null ? void 0 : _E.borderColor) && style.borderRightWidth) {
+    if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderRightWidth) {
       style.borderRightStyle = "solid";
-      style.borderRightColor = (_F = this.properties) == null ? void 0 : _F.borderColor;
+      style.borderRightColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
     }
-    if (((_G = this.properties) == null ? void 0 : _G.borderColor) && style.borderTopWidth) {
+    if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderTopWidth) {
       style.borderTopStyle = "solid";
-      style.borderTopColor = (_H = this.properties) == null ? void 0 : _H.borderColor;
+      style.borderTopColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
     }
-    if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderBottomWidth) {
+    if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderBottomWidth) {
       style.borderBottomStyle = "solid";
-      style.borderBottomColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
+      style.borderBottomColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
     }
     return style;
   }
+  getInlineStyles() {
+    var _a;
+    const styleObject = {};
+    const inlineStyle = (_a = this.properties) == null ? void 0 : _a.inlineStyle;
+    if (!inlineStyle)
+      return styleObject;
+    inlineStyle.split(";").forEach((rule) => {
+      if (rule.trim()) {
+        const [property, value] = rule.split(":").map((part) => part.trim());
+        if (property && value) {
+          const camelCasedProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+          styleObject[camelCasedProperty] = value;
+        }
+      }
+    });
+    return styleObject;
+  }
+  getStyleTag() {
+    var _a;
+    const css = (_a = this.properties) == null ? void 0 : _a.style;
+    if (!css)
+      return "";
+    return css.replace(/([^{]+){/g, (match) => {
+      if (match.trim().startsWith("@")) {
+        return match;
+      }
+      const selectors = match.split(",").map((selector) => selector.trim());
+      const modifiedSelectors = selectors.map((selector) => `[data-part-id=${this.partId}] ${selector}`).join(", ");
+      return `${modifiedSelectors} `;
+    });
+  }
 }
 class RootPart extends Part {
   constructor() {
@@ -6834,8 +6874,8 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$8$1 = ["data-model-id"];
-const _hoisted_2$5$1 = {
+const _hoisted_1$9$1 = ["data-part-id"];
+const _hoisted_2$6$1 = {
   key: 1,
   class: "pb-nested-widget"
 };
@@ -6846,34 +6886,38 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const classNames = computed(() => props.part.getClassNames());
     const properties = computed(() => ({ style: props.part.getStyles() }));
+    const styleTag = computed(() => props.part.getStyleTag());
     const thisComponent = computed(() => createPartComponent(props.part));
     const childComponents = computed(() => createPartComponents(props.part.children));
     return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", mergeProps({
-        class: [classNames.value, "pb-widget"],
-        "data-model-id": _ctx.part.partId,
-        style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-      }, properties.value), [
-        thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
-          part: _ctx.part
-        }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$5$1, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
-            return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
-              key: child.part.partId,
-              part: child.part
-            }, null, 8, ["part"]);
-          }), 128))
-        ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$8$1);
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        createElementVNode("div", mergeProps({
+          "data-part-id": _ctx.part.partId,
+          class: "pb-widget"
+        }, properties.value), [
+          thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
+            key: 0,
+            part: _ctx.part
+          }, null, 8, ["part"])) : createCommentVNode("", true),
+          childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$6$1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
+              return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
+                key: child.part.partId,
+                part: child.part
+              }, null, 8, ["part"]);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ], 16, _hoisted_1$9$1)
+      ], 64);
     };
   }
 });
-const _hoisted_1$7$1 = ["data-model-id"];
+const _hoisted_1$8$1 = ["data-part-id"];
 const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
@@ -6882,27 +6926,39 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const classNames = computed(() => props.part.getClassNames());
-    const properties = computed(() => ({ style: props.part.getStyles() }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    const properties = computed(() => ({
+      style: {
+        ...props.part.getStyles(),
+        ...props.part.getInlineStyles()
+      }
+    }));
     computed(() => createPartComponents(props.part.children));
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", mergeProps({
-        class: [classNames.value, "pb-block"],
-        "data-model-id": _ctx.part.partId,
-        style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-      }, properties.value), [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$a$1, {
-            key: child.partId,
-            part: child
-          }, null, 8, ["part"]);
-        }), 128))
-      ], 16, _hoisted_1$7$1);
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+          key: 0,
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        createElementVNode("div", mergeProps({
+          class: [classNames.value, "pb-block"],
+          "data-part-id": _ctx.part.partId,
+          style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
+        }, properties.value), [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
+            return openBlock(), createBlock$1(_sfc_main$a$1, {
+              key: child.partId,
+              part: child
+            }, null, 8, ["part"]);
+          }), 128))
+        ], 16, _hoisted_1$8$1)
+      ], 64);
     };
   }
 });
-const _hoisted_1$6$1 = { class: "pb-block" };
-const _hoisted_2$4$1 = /* @__PURE__ */ createElementVNode("div", {
+const _hoisted_1$7$1 = { class: "pb-block" };
+const _hoisted_2$5$1 = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
 }, [
@@ -6911,7 +6967,7 @@ const _hoisted_2$4$1 = /* @__PURE__ */ createElementVNode("div", {
   ])
 ], -1);
 const _hoisted_3$4$1 = [
-  _hoisted_2$4$1
+  _hoisted_2$5$1
 ];
 const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
@@ -6920,11 +6976,11 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6$1, _hoisted_3$4$1);
+      return openBlock(), createElementBlock("div", _hoisted_1$7$1, _hoisted_3$4$1);
     };
   }
 });
-const _hoisted_1$5$1 = ["data-model-id"];
+const _hoisted_1$6$1 = ["data-part-id"];
 const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
@@ -6932,36 +6988,48 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const styleTag = computed(() => props.part.getStyleTag());
     const classNames = computed(() => props.part.getClassNames());
-    const properties = computed(() => ({ style: props.part.getStyles() }));
+    const properties = computed(() => ({
+      style: {
+        ...props.part.getStyles(),
+        ...props.part.getInlineStyles()
+      }
+    }));
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock("div", mergeProps({
-        class: [classNames.value, "pb-section"],
-        "data-model-id": _ctx.part.partId,
-        style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-      }, properties.value), [
-        ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$8$1, {
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
-          part: _ctx.part
-        }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
-          return openBlock(), createBlock$1(_sfc_main$9$1, {
-            key: block.partId,
-            part: block
-          }, null, 8, ["part"]);
-        }), 128)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$5$1);
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        createElementVNode("div", mergeProps({
+          class: [classNames.value, "pb-section"],
+          "data-part-id": _ctx.part.partId,
+          style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
+        }, properties.value), [
+          ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$8$1, {
+            key: 0,
+            part: _ctx.part
+          }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
+            return openBlock(), createBlock$1(_sfc_main$9$1, {
+              key: block.partId,
+              part: block
+            }, null, 8, ["part"]);
+          }), 128)) : createCommentVNode("", true)
+        ], 16, _hoisted_1$6$1)
+      ], 64);
     };
   }
 });
-const _hoisted_1$4$1 = { class: "pb-image-widget" };
-const _hoisted_2$3$1 = ["src"];
+const _hoisted_1$5$1 = { class: "pb-image-widget" };
+const _hoisted_2$4$1 = ["src"];
 const _hoisted_3$3$1 = {
   key: 1,
   class: "placeholder"
 };
 const _hoisted_4$d = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
-const _hoisted_5$6 = [
+const _hoisted_5$7 = [
   _hoisted_4$d
 ];
 const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
@@ -6971,21 +7039,29 @@ const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
     placeholder: { type: Boolean }
   },
   setup(__props) {
+    const props = __props;
+    const classNames = computed(() => props.part.getClassNames());
+    computed(() => ({
+      style: {
+        ...props.part.getInlineStyles()
+      }
+    }));
     return (_ctx, _cache) => {
-      var _a, _b;
-      return openBlock(), createElementBlock("div", _hoisted_1$4$1, [
+      var _a, _b, _c;
+      return openBlock(), createElementBlock("div", _hoisted_1$5$1, [
         ((_a = _ctx.part.properties) == null ? void 0 : _a.image) ? (openBlock(), createElementBlock("img", {
           key: 0,
+          class: normalizeClass([classNames.value, "image"]),
           src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
-          alt: "",
-          class: "image"
-        }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$3$1, _hoisted_5$6)) : createCommentVNode("", true)
+          style: normalizeStyle((_c = _ctx.part.properties) == null ? void 0 : _c.inlineStyle),
+          alt: ""
+        }, null, 14, _hoisted_2$4$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$3$1, _hoisted_5$7)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$3$1 = { class: "pb-text-widget" };
-const _hoisted_2$2$1 = ["textContent"];
+const _hoisted_1$4$1 = { class: "pb-text-widget" };
+const _hoisted_2$3$1 = ["textContent"];
 const _hoisted_3$2$1 = {
   key: 1,
   class: "placeholder",
@@ -7011,29 +7087,33 @@ const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
         }
       }
     });
+    const classNames = computed(() => props.part.getClassNames());
     const style = computed(() => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       return {
         style: {
           fontSize: (_a = props.part.properties) == null ? void 0 : _a.fontSize,
-          color: (_b = props.part.properties) == null ? void 0 : _b.color
+          fontWeight: (_b = props.part.properties) == null ? void 0 : _b.fontWeight,
+          color: (_c = props.part.properties) == null ? void 0 : _c.color,
+          textAlign: (_d = props.part.properties) == null ? void 0 : _d.textAlign,
+          ...props.part.getInlineStyles()
         }
       };
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4$1, [
         text.value ? (openBlock(), createElementBlock("div", mergeProps({
           key: 0,
-          class: "text"
+          class: [classNames.value, "text l-header-event__id-text"]
         }, style.value, {
           textContent: toDisplayString(text.value)
-        }), null, 16, _hoisted_2$2$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$2$1)) : createCommentVNode("", true)
+        }), null, 16, _hoisted_2$3$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$2$1)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$2$1 = { class: "pb-html-widget" };
-const _hoisted_2$1$1 = ["innerHTML"];
+const _hoisted_1$3$1 = { class: "pb-html-widget" };
+const _hoisted_2$2$1 = ["innerHTML"];
 const _hoisted_3$1$1 = {
   key: 1,
   class: "placeholder",
@@ -7070,21 +7150,28 @@ ${_html.style}
       var _a;
       return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
     });
-    computed(() => props.placeholder ? !html.value : false);
+    const classNames = computed(() => props.part.getClassNames());
+    computed(() => ({
+      style: {
+        ...props.part.getInlineStyles()
+      }
+    }));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2$1, [
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
         html.value ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: "html",
+          class: normalizeClass([classNames.value, "html"]),
+          style: normalizeStyle((_a = _ctx.part.properties) == null ? void 0 : _a.inlineStyle),
           innerHTML: html.value
-        }, null, 8, _hoisted_2$1$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$1$1)) : createCommentVNode("", true)
+        }, null, 14, _hoisted_2$2$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$1$1)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$1$1 = { class: "pb-iframe-widget" };
-const _hoisted_2$j = ["src"];
-const _hoisted_3$g = {
+const _hoisted_1$2$1 = { class: "pb-iframe-widget" };
+const _hoisted_2$1$1 = ["src"];
+const _hoisted_3$h = {
   key: 1,
   class: "placeholder",
   textContent: "Empty URL"
@@ -7108,10 +7195,12 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
       const locale = pageBuilder.getLocale();
       return url2[locale];
     });
+    const classNames = computed(() => props.part.getClassNames());
     const style = computed(() => ({
       style: {
         width: "100%",
-        height: `${height.value}px`
+        height: `${height.value}px`,
+        ...props.part.getInlineStyles()
       }
     }));
     const height = ref(200);
@@ -7127,11 +7216,14 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
       window.removeEventListener("message", updateHeight);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1$1, [
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1$2$1, [
         url.value ? (openBlock(), createElementBlock("iframe", mergeProps({
           key: 0,
-          src: url.value
-        }, style.value), null, 16, _hoisted_2$j)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$g)) : createCommentVNode("", true)
+          class: classNames.value,
+          src: url.value,
+          style: (_a = _ctx.part.properties) == null ? void 0 : _a.inlineStyle
+        }, style.value), null, 16, _hoisted_2$1$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$h)) : createCommentVNode("", true)
       ]);
     };
   }
@@ -7177,6 +7269,8 @@ class PageBuilderViewerImpl {
     __publicField2(this, "locale", ref("en"));
     __publicField2(this, "watchers", {});
     __publicField2(this, "providers", {});
+    __publicField2(this, "externalCssLinks", []);
+    __publicField2(this, "externalCssContent", "");
     this.model = new Model$1();
   }
   getLocale() {
@@ -7190,7 +7284,7 @@ class PageBuilderViewerImpl {
       plugin.widgets.forEach((v) => {
         const w = { ...v };
         w.partType = "Widget";
-        w.creator = () => _sfc_main$p;
+        w.creator = () => _sfc_main$q;
         partDefinitions$1[v.partName] = w;
       });
     }
@@ -7200,6 +7294,14 @@ class PageBuilderViewerImpl {
     if (plugin.providers) {
       this.providers = { ...this.providers, ...plugin.providers };
     }
+    if (plugin.css) {
+      if (plugin.css.links) {
+        this.externalCssLinks = plugin.css.links;
+      }
+      if (plugin.css.content) {
+        this.externalCssContent = plugin.css.content;
+      }
+    }
   }
   watchCustomWidgetData(part) {
     const def = partDefinitions$1[part.partName];
@@ -7269,6 +7371,10 @@ class PageBuilderViewerImpl {
       return def.component;
     }
   }
+  getExternalCss() {
+    return `${this.externalCssLinks}
+    <style>${this.externalCssContent}</style>`;
+  }
 }
 const createPageBuilderViewer = () => {
   const viewer = new PageBuilderViewerImpl();
@@ -7307,36 +7413,53 @@ const createPartComponent = (part) => {
   }
 };
 const getPartDefinition = (partName) => partDefinitions$1[partName];
+const _hoisted_1$1$1 = ["data-part-id"];
 const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
   __name: "PbPage",
   props: {
-    page: {},
+    part: {},
     isMobilePage: { type: Boolean }
   },
   setup(__props) {
+    const props = __props;
+    const classNames = computed(() => {
+      var _a;
+      return `${(_a = props.part) == null ? void 0 : _a.getClassNames()} ${props.isMobilePage ? "mobile" : "pc"}`;
+    });
+    const styleTag = computed(() => props.part.getStyleTag());
     const properties = computed(() => ({
       style: {
-        // styles here
+        ...props.part.getStyles(),
+        ...props.part.getInlineStyles()
       }
     }));
     return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", mergeProps({ class: "pb-page" }, properties.value), [
-        createElementVNode("div", {
-          class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
-            return openBlock(), createBlock$1(_sfc_main$7$1, {
-              key: section.partId,
-              part: section
-            }, null, 8, ["part"]);
-          }), 128))
-        ], 2)
-      ], 16);
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+          key: 0,
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        createElementVNode("div", mergeProps({
+          class: [classNames.value, "pb-page"],
+          "data-part-id": _ctx.part.partId
+        }, properties.value), [
+          createElementVNode("div", {
+            class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (section) => {
+              return openBlock(), createBlock$1(_sfc_main$7$1, {
+                key: section.partId,
+                part: section
+              }, null, 8, ["part"]);
+            }), 128))
+          ], 2)
+        ], 16, _hoisted_1$1$1)
+      ], 64);
     };
   }
 });
-const _hoisted_1$t = { class: "pb-viewer" };
+const _hoisted_1$u = ["innerHTML"];
+const _hoisted_2$j = { class: "pb-viewer" };
 const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
   __name: "PageBuilderViewer",
   props: {
@@ -7347,43 +7470,50 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const pageBuilderViewer = createPageBuilderViewer();
-    pageBuilderViewer.setLocale(props.locale);
+    const viewer = createPageBuilderViewer();
+    viewer.setLocale(props.locale);
     if (props.plugin)
-      pageBuilderViewer.registerCustomPlugin(props.plugin);
-    providePageBuilderViewer(pageBuilderViewer);
-    providePageBuilder(pageBuilderViewer);
-    const page = computed(() => {
-      const pages = pageBuilderViewer.model.rootPart.value.children;
-      if (!pages || !pages.length)
+      viewer.registerCustomPlugin(props.plugin);
+    providePageBuilderViewer(viewer);
+    providePageBuilder(viewer);
+    const externalCss = viewer.getExternalCss();
+    const part = computed(() => {
+      const parts = viewer.model.rootPart.value.children;
+      if (!parts || !parts.length)
         return;
-      return pages[pages.length === 1 || props.isMobilePage ? 0 : 1];
+      return parts[parts.length === 1 || props.isMobilePage ? 0 : 1];
     });
     onMounted(() => {
       if (props.pageContent) {
-        pageBuilderViewer.render(props.pageContent);
+        viewer.render(props.pageContent);
       }
     });
     watch(
       () => props.pageContent,
       (pageContent) => {
         if (pageContent) {
-          pageBuilderViewer.render(pageContent);
+          viewer.render(pageContent);
         }
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
-        page.value ? (openBlock(), createBlock$1(_sfc_main$2$1, {
+      return openBlock(), createElementBlock(Fragment, null, [
+        unref(externalCss) ? (openBlock(), createElementBlock("div", {
           key: 0,
-          "is-mobile-page": _ctx.isMobilePage,
-          page: page.value
-        }, null, 8, ["is-mobile-page", "page"])) : createCommentVNode("", true)
-      ]);
+          innerHTML: unref(externalCss)
+        }, null, 8, _hoisted_1$u)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$j, [
+          part.value ? (openBlock(), createBlock$1(_sfc_main$2$1, {
+            key: 0,
+            "is-mobile-page": _ctx.isMobilePage,
+            part: part.value
+          }, null, 8, ["is-mobile-page", "part"])) : createCommentVNode("", true)
+        ])
+      ], 64);
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "PbCustomWidget",
   props: {
     part: {},
@@ -8005,12 +8135,12 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DmM_LMjC.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CT3vTbYY.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CWmfX2bt.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BR1FNVi6.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BFMkFOYX.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BQhiQyNM.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DZw8qbJH.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-C554e0iO.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CMPr66Dx.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CB99C_DG.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8240,22 +8370,22 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$o = {};
-const _hoisted_1$s = { class: "pb-add-widget-button" };
+const _sfc_main$p = {};
+const _hoisted_1$t = { class: "pb-add-widget-button" };
 const _hoisted_2$i = /* @__PURE__ */ createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
-const _hoisted_3$f = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "Add Widget", -1);
+const _hoisted_3$g = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "Add Widget", -1);
 const _hoisted_4$c = [
   _hoisted_2$i,
-  _hoisted_3$f
+  _hoisted_3$g
 ];
 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))
     }, _hoisted_4$c)
   ]);
 }
-const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$1]]);
+const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$1]]);
 const MOUSE_TRACKER_KEY = "mouseTracker";
 const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
 class MouseTracker {
@@ -8286,12 +8416,12 @@ const useMouseTracker = () => {
     throw Error(MOUSE_TRACKER_NOT_FOUND);
   return mouseTracker;
 };
-const _hoisted_1$r = ["data-model-id", "draggable"];
+const _hoisted_1$s = ["data-part-id", "draggable"];
 const _hoisted_2$h = {
   key: 1,
   class: "children"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
@@ -8351,6 +8481,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const pageBuilder = usePageBuilderEditor();
     const selected = computed(() => pageBuilder.context.isSelected(props.part));
     const classNames = computed(() => [selected.value ? "selected" : "", props.part.getClassNames()]);
+    const styleTag = computed(() => props.part.getStyleTag());
     const properties = computed(() => {
       var _a, _b, _c, _d;
       let style = props.part.getStyles();
@@ -8726,45 +8857,51 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       return index;
     };
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", mergeProps({
-        ref_key: "widget",
-        ref: widget,
-        class: [classNames.value, "pb-widget"],
-        "data-model-id": _ctx.part.partId,
-        draggable: draggable.value
-      }, properties.value), [
-        thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
-          part: _ctx.part,
-          placeholder: true
-        }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
-            return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
-              key: child.part.partId,
-              part: child.part,
-              placeholder: true
-            }, null, 8, ["part"]);
-          }), 128))
-        ])) : createCommentVNode("", true),
-        selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: "pan-handle",
-          onMousedown: _pan_mousedown
-        }, null, 32)) : createCommentVNode("", true),
-        selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
-          key: 3,
-          class: "resize-handle",
-          onMousedown: _resize_mousedown
-        }, null, 32)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$r)), [
-        [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-      ]);
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        withDirectives((openBlock(), createElementBlock("div", mergeProps({
+          ref_key: "widget",
+          ref: widget,
+          class: [classNames.value, "pb-widget"],
+          "data-part-id": _ctx.part.partId,
+          draggable: draggable.value
+        }, properties.value), [
+          thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
+            key: 0,
+            part: _ctx.part,
+            placeholder: true
+          }, null, 8, ["part"])) : createCommentVNode("", true),
+          childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
+              return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
+                key: child.part.partId,
+                part: child.part,
+                placeholder: true
+              }, null, 8, ["part"]);
+            }), 128))
+          ])) : createCommentVNode("", true),
+          selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            class: "pan-handle",
+            onMousedown: _pan_mousedown
+          }, null, 32)) : createCommentVNode("", true),
+          selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
+            key: 3,
+            class: "resize-handle",
+            onMousedown: _resize_mousedown
+          }, null, 32)) : createCommentVNode("", true)
+        ], 16, _hoisted_1$s)), [
+          [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
+        ])
+      ], 64);
     };
   }
 });
-const _hoisted_1$q = ["data-model-id"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = ["data-part-id"];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {}
@@ -8777,7 +8914,13 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       selected.value ? "selected" : "",
       props.part.getClassNames()
     ]);
-    const properties = computed(() => ({ style: props.part.getStyles() }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    const properties = computed(() => ({
+      style: {
+        ...props.part.getStyles(),
+        ...props.part.getInlineStyles()
+      }
+    }));
     computed(() => pageBuilder.partManager.createPartComponents(props.part.children));
     const addWidget = () => {
       pageBuilder.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID);
@@ -8944,28 +9087,34 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b;
-      return withDirectives((openBlock(), createElementBlock("div", mergeProps({
-        class: [classNames.value, "pb-block"],
-        "data-model-id": _ctx.part.partId,
-        style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-      }, properties.value), [
-        !_ctx.part.children || ((_b = _ctx.part.children) == null ? void 0 : _b.length) === 0 ? (openBlock(), createBlock$1(PbAddWidgetButton, {
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
-          onAddWidget: addWidget
-        })) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$n, {
-            key: child.partId,
-            part: child
-          }, null, 8, ["part"]);
-        }), 128))
-      ], 16, _hoisted_1$q)), [
-        [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-      ]);
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        withDirectives((openBlock(), createElementBlock("div", mergeProps({
+          class: [classNames.value, "pb-block"],
+          "data-part-id": _ctx.part.partId,
+          style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
+        }, properties.value), [
+          !_ctx.part.children || ((_b = _ctx.part.children) == null ? void 0 : _b.length) === 0 ? (openBlock(), createBlock$1(PbAddWidgetButton, {
+            key: 0,
+            onAddWidget: addWidget
+          })) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
+            return openBlock(), createBlock$1(_sfc_main$o, {
+              key: child.partId,
+              part: child
+            }, null, 8, ["part"]);
+          }), 128))
+        ], 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 _hoisted_1$q = { class: "pb-block" };
 const _hoisted_2$g = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
@@ -8974,22 +9123,22 @@ const _hoisted_2$g = /* @__PURE__ */ createElementVNode("div", {
     /* @__PURE__ */ createElementVNode("h3", null, "Login Design Part")
   ])
 ], -1);
-const _hoisted_3$e = [
+const _hoisted_3$f = [
   _hoisted_2$g
 ];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
     part: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, _hoisted_3$e);
+      return openBlock(), createElementBlock("div", _hoisted_1$q, _hoisted_3$f);
     };
   }
 });
-const _hoisted_1$o = ["data-model-id"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = ["data-part-id"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {}
@@ -9005,7 +9154,13 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         props.part.getClassNames()
       ];
     });
-    const properties = computed(() => ({ style: props.part.getStyles() }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    const properties = computed(() => ({
+      style: {
+        ...props.part.getStyles(),
+        ...props.part.getInlineStyles()
+      }
+    }));
     const disabled = computed(() => {
       var _a;
       return ["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || "");
@@ -9088,50 +9243,56 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b, _c;
-      return withDirectives((openBlock(), createElementBlock("div", mergeProps({
-        class: [classNames.value, "pb-section"],
-        "data-model-id": _ctx.part.partId,
-        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$l, {
-            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$m, {
-              key: block.partId,
-              part: block
-            }, null, 8, ["part"]);
-          }), 128)) : (openBlock(), createBlock$1(PbAddWidgetButton, {
-            key: 1,
-            onAddWidget: addWidget
-          }))
-        ], 64))
-      ], 16, _hoisted_1$o)), [
-        [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-      ]);
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+          key: 0,
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        withDirectives((openBlock(), createElementBlock("div", mergeProps({
+          class: [classNames.value, "pb-section"],
+          "data-part-id": _ctx.part.partId,
+          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, {
+              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, {
+                key: block.partId,
+                part: block
+              }, null, 8, ["part"]);
+            }), 128)) : (openBlock(), createBlock$1(PbAddWidgetButton, {
+              key: 1,
+              onAddWidget: addWidget
+            }))
+          ], 64))
+        ], 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$d = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+const _hoisted_3$e = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Position" })
 ], -1);
 const _hoisted_4$b = { class: "flex-grow-1" };
-const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
-const _hoisted_6$4 = { class: "text-center" };
-const _hoisted_7$4 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-const _hoisted_8$4 = /* @__PURE__ */ createElementVNode("div", {
+const _hoisted_5$6 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_6$5 = { class: "text-center" };
+const _hoisted_7$5 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_8$5 = /* @__PURE__ */ createElementVNode("div", {
   class: "d-inline-block text-center text-gray-300",
   style: { "width": "30%", "font-size": "12px" }
 }, [
   /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
 ], -1);
-const _hoisted_9$4 = { class: "text-center" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _hoisted_9$5 = { class: "text-center" };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPosition",
   props: {
     group: {},
@@ -9155,12 +9316,12 @@ const _sfc_main$j = /* @__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, [
-          _hoisted_3$d,
+          _hoisted_3$e,
           createElementVNode("div", _hoisted_4$b, [
-            createElementVNode("div", _hoisted_5$5, [
-              createElementVNode("div", _hoisted_6$4, [
+            createElementVNode("div", _hoisted_5$6, [
+              createElementVNode("div", _hoisted_6$5, [
                 createVNode(unref(BSTextInput), {
                   "model-value": top.value,
                   class: "ml-4",
@@ -9169,7 +9330,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": updateTop
                 }, null, 8, ["model-value"])
               ]),
-              createElementVNode("div", _hoisted_7$4, [
+              createElementVNode("div", _hoisted_7$5, [
                 createVNode(unref(BSTextInput), {
                   "model-value": left.value,
                   class: "ml-4",
@@ -9177,7 +9338,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   width: "30%",
                   "onUpdate:modelValue": updateLeft
                 }, null, 8, ["model-value"]),
-                _hoisted_8$4,
+                _hoisted_8$5,
                 createVNode(unref(BSTextInput), {
                   "model-value": right.value,
                   class: "ml-4",
@@ -9186,7 +9347,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": updateRight
                 }, null, 8, ["model-value"])
               ]),
-              createElementVNode("div", _hoisted_9$4, [
+              createElementVNode("div", _hoisted_9$5, [
                 createVNode(unref(BSTextInput), {
                   "model-value": bottom.value,
                   class: "ml-4",
@@ -9202,13 +9363,23 @@ const _sfc_main$j = /* @__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$c = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+const _hoisted_3$d = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Size" })
 ], -1);
 const _hoisted_4$a = { class: "flex-grow-1 bs-layout-horizontal" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_5$5 = { class: "flex-align-center mt-12" };
+const _hoisted_6$4 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Max Size" })
+], -1);
+const _hoisted_7$4 = { class: "flex-grow-1 bs-layout-horizontal" };
+const _hoisted_8$4 = { class: "flex-align-center mt-12" };
+const _hoisted_9$4 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Min Size" })
+], -1);
+const _hoisted_10$2 = { class: "flex-grow-1 bs-layout-horizontal" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorSize",
   props: {
     group: {},
@@ -9219,6 +9390,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const pageBuilder = usePageBuilderEditor();
     const width = computed(() => getPropertyValueOfParts(props.selectedParts, "width"));
     const height = computed(() => getPropertyValueOfParts(props.selectedParts, "height"));
+    const maxWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "maxWidth"));
+    const maxHeight = computed(() => getPropertyValueOfParts(props.selectedParts, "maxHeight"));
+    const minWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "minWidth"));
+    const minHeight = computed(() => getPropertyValueOfParts(props.selectedParts, "minHeight"));
     const updatePropertyValue = (properties) => {
       pageBuilder.commandRegistry.executeCommand(
         ChangePropertyCommand.COMMAND_ID,
@@ -9227,10 +9402,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
     const updateWidth = (value) => updatePropertyValue({ width: value });
     const updateHeight = (value) => updatePropertyValue({ height: value });
+    const updateMaxWidth = (value) => updatePropertyValue({ maxWidth: value });
+    const updateMaxHeight = (value) => updatePropertyValue({ maxWeight: value });
+    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, [
-          _hoisted_3$c,
+          _hoisted_3$d,
           createElementVNode("div", _hoisted_4$a, [
             createVNode(unref(BSTextInput), {
               "model-value": width.value,
@@ -9245,6 +9424,40 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               "onUpdate:modelValue": updateHeight
             }, null, 8, ["model-value"])
           ])
+        ]),
+        createElementVNode("div", _hoisted_5$5, [
+          _hoisted_6$4,
+          createElementVNode("div", _hoisted_7$4, [
+            createVNode(unref(BSTextInput), {
+              "model-value": maxWidth.value,
+              class: "flex-grow-1 mr-2",
+              prefix: "W",
+              "onUpdate:modelValue": updateMaxWidth
+            }, null, 8, ["model-value"]),
+            createVNode(unref(BSTextInput), {
+              "model-value": maxHeight.value,
+              class: "flex-grow-1 ml-2",
+              prefix: "H",
+              "onUpdate:modelValue": updateMaxHeight
+            }, null, 8, ["model-value"])
+          ])
+        ]),
+        createElementVNode("div", _hoisted_8$4, [
+          _hoisted_9$4,
+          createElementVNode("div", _hoisted_10$2, [
+            createVNode(unref(BSTextInput), {
+              "model-value": minWidth.value,
+              class: "flex-grow-1 mr-2",
+              prefix: "W",
+              "onUpdate:modelValue": updateMinWidth
+            }, null, 8, ["model-value"]),
+            createVNode(unref(BSTextInput), {
+              "model-value": minHeight.value,
+              class: "flex-grow-1 ml-2",
+              prefix: "H",
+              "onUpdate:modelValue": updateMinHeight
+            }, null, 8, ["model-value"])
+          ])
         ])
       ]);
     };
@@ -9407,9 +9620,9 @@ 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$b = /* @__PURE__ */ createElementVNode(
+const _hoisted_3$c = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-alpha-picker" },
   null,
@@ -9417,11 +9630,11 @@ const _hoisted_3$b = /* @__PURE__ */ createElementVNode(
   /* HOISTED */
 );
 const _hoisted_4$9 = [
-  _hoisted_3$b
+  _hoisted_3$c
 ];
 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)
     ]),
@@ -10525,12 +10738,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$a = ["id", "for"];
+const _hoisted_3$b = ["id", "for"];
 const _hoisted_4$8 = { 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),
@@ -10545,7 +10758,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       id: $options.labelId,
       for: $props.label,
       class: "vc-input__label"
-    }, toDisplayString($options.labelSpanText), 9, _hoisted_3$a),
+    }, toDisplayString($options.labelSpanText), 9, _hoisted_3$b),
     createElementVNode(
       "span",
       _hoisted_4$8,
@@ -10625,7 +10838,7 @@ var script$2 = {
     }
   }
 };
-const _hoisted_1$j = /* @__PURE__ */ createElementVNode(
+const _hoisted_1$k = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation--white" },
   null,
@@ -10639,7 +10852,7 @@ const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_3$9 = /* @__PURE__ */ createElementVNode(
+const _hoisted_3$a = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation-circle" },
   null,
@@ -10647,7 +10860,7 @@ const _hoisted_3$9 = /* @__PURE__ */ createElementVNode(
   /* HOISTED */
 );
 const _hoisted_4$7 = [
-  _hoisted_3$9
+  _hoisted_3$a
 ];
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -10661,7 +10874,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",
@@ -10810,7 +11023,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" },
@@ -10818,7 +11031,7 @@ const _hoisted_2$a = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_3$8 = [
+const _hoisted_3$9 = [
   _hoisted_2$a
 ];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10846,11 +11059,11 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             style: normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
             role: "presentation"
           },
-          _hoisted_3$8,
+          _hoisted_3$9,
           4
           /* STYLE */
         )
-      ], 40, _hoisted_1$i)
+      ], 40, _hoisted_1$j)
     ],
     2
     /* CLASS */
@@ -10946,9 +11159,9 @@ 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$7 = { class: "vc-sketch-sliders" };
+const _hoisted_3$8 = { class: "vc-sketch-sliders" };
 const _hoisted_4$6 = { class: "vc-sketch-hue-wrap" };
 const _hoisted_5$4 = {
   key: 0,
@@ -10989,14 +11202,14 @@ 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
         }, null, 8, ["value", "onChange"])
       ]),
       createElementVNode("div", _hoisted_2$9, [
-        createElementVNode("div", _hoisted_3$7, [
+        createElementVNode("div", _hoisted_3$8, [
           createElementVNode("div", _hoisted_4$6, [
             createVNode(_component_Hue, {
               value: _ctx.colors,
@@ -11101,7 +11314,7 @@ styleInject(css_248z);
 script.render = render;
 script.__file = "src/components/sketch/sketch.vue";
 script.install = install;
-const _sfc_main$h = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "PbColorPicker",
   components: {
     Sketch: script
@@ -11165,9 +11378,9 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
-const _hoisted_1$g = { class: "buttons" };
+const _hoisted_1$h = { class: "buttons" };
 const _hoisted_2$8 = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
-const _hoisted_3$6 = [
+const _hoisted_3$7 = [
   _hoisted_2$8
 ];
 const _hoisted_4$5 = { class: "sketch-wrap" };
@@ -11179,7 +11392,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 }, "pb-button picker-button"]),
@@ -11191,7 +11404,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         class: "pb-button",
         onClick: _cache[1] || (_cache[1] = (...args) => _ctx.emptyColor && _ctx.emptyColor(...args))
-      }, _hoisted_3$6)) : createCommentVNode("", true)
+      }, _hoisted_3$7)) : createCommentVNode("", true)
     ]),
     createElementVNode("div", _hoisted_4$5, [
       _ctx.isShowColorPicker ? (openBlock(), createBlock$1(_component_Sketch, {
@@ -11205,15 +11418,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [_directive_click_outside, () => _ctx.toggle(false)]
   ]);
 }
-const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render]]);
-const _hoisted_1$f = { class: "group-editor group-editor-background" };
+const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["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 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Background" })
 ], -1);
 const _hoisted_4$4 = { class: "bs-layout-horizontal" };
 const _hoisted_5$3 = { class: "color" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBackground",
   props: {
     group: {},
@@ -11244,9 +11457,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", _hoisted_2$7, [
-          _hoisted_3$5,
+          _hoisted_3$6,
           createElementVNode("div", _hoisted_4$4, [
             createElementVNode("div", _hoisted_5$3, [
               createVNode(PbColorPicker, {
@@ -11277,9 +11490,9 @@ 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 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Border" })
 ], -1);
 const _hoisted_4$3 = { class: "" };
@@ -11310,7 +11523,7 @@ const _hoisted_17 = { class: "flex-grow-1 mt-4" };
 const _hoisted_18 = { class: "bg-gray-100 py-5 rounded-8" };
 const _hoisted_19 = { class: "" };
 const _hoisted_20 = { class: "mt-2" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBorder",
   props: {
     group: {},
@@ -11348,9 +11561,9 @@ const _sfc_main$f = /* @__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, [
-          _hoisted_3$4,
+          _hoisted_3$5,
           createElementVNode("div", _hoisted_4$3, [
             _hoisted_5$2,
             createElementVNode("div", _hoisted_6$2, [
@@ -11457,9 +11670,9 @@ const _sfc_main$f = /* @__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 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Margin" })
 ], -1);
 const _hoisted_4$2 = { class: "flex-grow-1" };
@@ -11473,7 +11686,7 @@ const _hoisted_8$1 = /* @__PURE__ */ createElementVNode("div", {
   /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
 ], -1);
 const _hoisted_9$1 = { class: "text-center" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorMargin",
   props: {
     group: {},
@@ -11497,9 +11710,9 @@ const _sfc_main$e = /* @__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, [
-          _hoisted_3$3,
+          _hoisted_3$4,
           createElementVNode("div", _hoisted_4$2, [
             createElementVNode("div", _hoisted_5$1, [
               createElementVNode("div", _hoisted_6$1, [
@@ -11544,9 +11757,9 @@ const _sfc_main$e = /* @__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 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Padding" })
 ], -1);
 const _hoisted_4$1 = { class: "flex-grow-1" };
@@ -11560,7 +11773,7 @@ const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", {
   /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
 ], -1);
 const _hoisted_9 = { class: "text-center" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPadding",
   props: {
     group: {},
@@ -11584,9 +11797,9 @@ const _sfc_main$d = /* @__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, [
-          _hoisted_3$2,
+          _hoisted_3$3,
           createElementVNode("div", _hoisted_4$1, [
             createElementVNode("div", _hoisted_5, [
               createElementVNode("div", _hoisted_6, [
@@ -11657,7 +11870,7 @@ const positionGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$j
+    propertyGroupEditor: () => _sfc_main$k
   };
 };
 const sizeGroup = () => {
@@ -11696,7 +11909,7 @@ const sizeGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$i
+    propertyGroupEditor: () => _sfc_main$j
   };
 };
 const marginGroup = () => {
@@ -11725,7 +11938,7 @@ const marginGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$e
+    propertyGroupEditor: () => _sfc_main$f
   };
 };
 const paddingGroup = () => {
@@ -11754,7 +11967,7 @@ const paddingGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$d
+    propertyGroupEditor: () => _sfc_main$e
   };
 };
 const commonGroup = () => {
@@ -11773,8 +11986,18 @@ const commonGroup = () => {
         propertyType: "text"
       },
       {
-        propertyName: "css",
-        caption: "CSS",
+        propertyName: "classNames",
+        caption: "Class Names",
+        propertyType: "text"
+      },
+      {
+        propertyName: "inlineStyle",
+        caption: "Inline Style",
+        propertyType: "multiline-text"
+      },
+      {
+        propertyName: "style",
+        caption: "Style",
         propertyType: "multiline-text"
       },
       {
@@ -11821,7 +12044,7 @@ const backgroundGroup = () => {
         propertyType: "image"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$g
+    propertyGroupEditor: () => _sfc_main$h
   };
 };
 const borderGroup = () => {
@@ -11875,7 +12098,7 @@ const borderGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$f
+    propertyGroupEditor: () => _sfc_main$g
   };
 };
 const defaultPropertyGroups = () => {
@@ -11898,7 +12121,7 @@ const pageParts = [
     initialProperties: {},
     localized: false,
     allowsChild: () => true,
-    creator: () => _sfc_main$k
+    creator: () => _sfc_main$l
   }
 ];
 const sectionParts = [
@@ -11915,7 +12138,7 @@ const sectionParts = [
     },
     localized: false,
     allowsChild: () => true,
-    creator: () => _sfc_main$k
+    creator: () => _sfc_main$l
   }
 ];
 const blockParts = [
@@ -11930,7 +12153,7 @@ const blockParts = [
     initialProperties: {},
     localized: false,
     allowsChild: () => true,
-    creator: () => _sfc_main$m
+    creator: () => _sfc_main$n
   }
 ];
 const widgets = [
@@ -11958,11 +12181,23 @@ const widgets = [
             propertyType: "text",
             params: ""
           },
+          {
+            propertyName: "fontWeight",
+            caption: "Weight",
+            propertyType: "text",
+            params: ""
+          },
           {
             propertyName: "color",
             caption: "Font Color",
             propertyType: "color",
             params: ""
+          },
+          {
+            propertyName: "textAlign",
+            caption: "Align",
+            propertyType: "select",
+            params: "left,center,right"
           }
         ]
       },
@@ -12142,7 +12377,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BoYfb0dm.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-haOQfRIi.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -13285,6 +13520,8 @@ class PageBuilderEditorImpl {
     __publicField(this, "customWidgets", []);
     __publicField(this, "watchers", {});
     __publicField(this, "providers", {});
+    __publicField(this, "externalCssLinks", []);
+    __publicField(this, "externalCssContent", "");
     this.model = new Model2();
     this.context = new PageBuilderContextImpl(this);
     this.scale.value = 1;
@@ -13351,7 +13588,7 @@ class PageBuilderEditorImpl {
       plugin.widgets.forEach((v) => {
         const w = { ...v };
         w.partType = "Widget";
-        w.creator = () => _sfc_main$p;
+        w.creator = () => _sfc_main$q;
         w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
         partDefinitions2[v.partName] = w;
         const found = this.customWidgets.find((x) => x.partName === v.partName);
@@ -13370,6 +13607,14 @@ class PageBuilderEditorImpl {
     if (plugin.propertyEditors) {
       this.partManager.registerPartPropertyEditors(plugin.propertyEditors);
     }
+    if (plugin.css) {
+      if (plugin.css.links) {
+        this.externalCssLinks = plugin.css.links;
+      }
+      if (plugin.css.content) {
+        this.externalCssContent = plugin.css.content;
+      }
+    }
   }
   initData(data) {
     const _data = JSON.parse(data || "{}") || {};
@@ -13493,6 +13738,10 @@ class PageBuilderEditorImpl {
       }
     }
   }
+  getExternalCss() {
+    return `${this.externalCssLinks}
+    <style>${this.externalCssContent}</style>`;
+  }
   extractMediaFromPart(part, urls) {
     if (part.properties) {
       for (const name in part.properties) {
@@ -13591,74 +13840,119 @@ class PageBuilderEditorImpl {
     });
   }
 }
-const _hoisted_1$b = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
-const _hoisted_2$3 = [
-  _hoisted_1$b
+const _hoisted_1$c = ["data-part-id"];
+const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
+const _hoisted_3$2 = [
+  _hoisted_2$3
 ];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "PbPage",
   props: {
-    page: {},
+    part: {},
     width: {},
     isMobilePage: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
     const editor = usePageBuilderEditor();
+    const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => {
       var _a, _b;
       return {
         width: `${props.width || 420}px`,
-        minHeight: ((_b = (_a = props.page) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
+        minHeight: ((_b = (_a = props.part) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
       };
     });
     const properties = computed(() => {
-      var _a;
-      return { style: ((_a = props.page) == null ? void 0 : _a.getStyles()) || {} };
+      var _a, _b;
+      return {
+        style: {
+          ...(_a = props.part) == null ? void 0 : _a.getStyles(),
+          ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
+        }
+      };
     });
-    const selected = computed(() => !!props.page && editor.context.isSelected(props.page));
+    const selected = computed(() => !!props.part && editor.context.isSelected(props.part));
     const insertSection = (index) => {
-      if (!props.page)
-        return;
       editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
     };
     return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", {
-        style: normalizeStyle(style.value),
-        class: "pb-page"
-      }, [
-        createElementVNode("div", mergeProps({
-          class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
-        }, properties.value), [
-          (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section, index) => {
-            return openBlock(), createBlock$1(_sfc_main$k, {
-              key: section.partId,
-              part: section
-            }, null, 8, ["part"]);
-          }), 128))
-        ], 16),
+      var _a, _b;
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+          key: 0,
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
         createElementVNode("div", {
-          class: "pb-add-section-handle bottom",
-          onClick: _cache[0] || (_cache[0] = ($event) => {
-            var _a2, _b;
-            return insertSection(((_b = (_a2 = _ctx.page) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) || 0);
-          })
-        }, _hoisted_2$3)
-      ], 4);
+          "data-part-id": (_a = _ctx.part) == null ? void 0 : _a.partId,
+          style: normalizeStyle(style.value),
+          class: "pb-page"
+        }, [
+          createElementVNode("div", mergeProps({
+            class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
+          }, properties.value), [
+            (openBlock(true), createElementBlock(Fragment, null, renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
+              return openBlock(), createBlock$1(_sfc_main$l, {
+                key: section.partId,
+                part: section
+              }, null, 8, ["part"]);
+            }), 128))
+          ], 16),
+          createElementVNode("div", {
+            class: "pb-add-section-handle bottom",
+            onClick: _cache[0] || (_cache[0] = ($event) => {
+              var _a2, _b2;
+              return insertSection(((_b2 = (_a2 = _ctx.part) == null ? void 0 : _a2.children) == null ? void 0 : _b2.length) || 0);
+            })
+          }, _hoisted_3$2)
+        ], 12, _hoisted_1$c)
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$b = { class: "pb-page-wrapper" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "PbPageWrapper",
+  props: {
+    part: {},
+    width: {},
+    isMobilePage: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const width = ref(props.width);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createVNode(unref(BSSelect), {
+          modelValue: width.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => width.value = $event),
+          items: [480, 768, 1024, 1280],
+          "label-provider": (v) => `${v}`,
+          "value-provider": (v) => v,
+          "view-model": false
+        }, null, 8, ["modelValue", "label-provider", "value-provider"]),
+        createVNode(_sfc_main$d, {
+          "is-mobile-page": _ctx.isMobilePage,
+          part: _ctx.part,
+          width: width.value
+        }, null, 8, ["is-mobile-page", "part", "width"])
+      ]);
     };
   }
 });
-const _hoisted_1$a = /* @__PURE__ */ createElementVNode("div", { style: { "width": "20px" } }, null, -1);
+const _hoisted_1$a = {
+  key: 1,
+  style: { "width": "20px" }
+};
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "PbCanvas",
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
-    const pageS = computed(() => {
+    const partS = computed(() => {
       var _a;
       return (_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a[0];
     });
-    const pageL = computed(() => {
+    const partL = computed(() => {
       var _a;
       return (_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a[1];
     });
@@ -13670,7 +13964,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const contextMenu = useContextMenu();
     const style = computed(() => {
       const scale = pageBuilder.scale.value;
-      return `transform: scale(${scale}); flex-grow: 1;`;
+      return {
+        style: {
+          transform: `scale(${scale})`
+        }
+      };
     });
     const showContextMenu = (event) => {
       var _a, _b;
@@ -13693,27 +13991,26 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         onContextmenu: showContextMenu,
         onMousedown: withModifiers(handleClick, ["stop"])
       }, [
-        createElementVNode("div", {
-          style: normalizeStyle(style.value),
-          class: "pb-canvas"
-        }, [
-          createVNode(_sfc_main$c, {
+        createElementVNode("div", mergeProps({ class: "pb-canvas" }, style.value), [
+          partS.value ? (openBlock(), createBlock$1(_sfc_main$c, {
+            key: 0,
             "is-mobile-page": true,
-            page: pageS.value,
-            width: 420
-          }, null, 8, ["page"]),
-          _hoisted_1$a,
-          createVNode(_sfc_main$c, {
+            part: partS.value,
+            width: 480
+          }, null, 8, ["part"])) : createCommentVNode("", true),
+          partL.value ? (openBlock(), createElementBlock("div", _hoisted_1$a)) : createCommentVNode("", true),
+          partL.value ? (openBlock(), createBlock$1(_sfc_main$c, {
+            key: 2,
             "is-mobile-page": false,
-            page: pageL.value,
+            part: partL.value,
             width: 1024
-          }, null, 8, ["page"])
-        ], 4)
+          }, null, 8, ["part"])) : createCommentVNode("", true)
+        ], 16)
       ], 32);
     };
   }
 });
-const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\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.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\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.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\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.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.pb-section-static .pb-widget {\n  outline: none;\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.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\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}\n.pb-widget.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\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}\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}\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.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\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.pb-product-list-widget .product-wrapper {\n  width: 25%;\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.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\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@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\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.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\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.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.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\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.pb-add-section-handle > i {\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}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
+const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  margin: 20px 0 auto 0;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\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  position: relative;\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 {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\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 {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\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}\n\n.pb-widget.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\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}\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}\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 .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .empty 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-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\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: auto;\n}\n\n.pb-canvas-wrapper {\n  margin: 0;\n  padding: 0;\n  width: fit-content;\n}\n\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 auto;\n  transform-origin: top left;\n  width: fit-content;\n  margin: 0;\n  padding: 32px 40px 56px 40px;\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  left: 50%;\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  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}\n\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.pb-guideline.selected {\n  z-index: 3;\n}\n\n.pb-guideline.preselect {\n  z-index: 4;\n}';
 const _hoisted_1$9 = { class: "pb-canvas-frame" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "PbCanvasFrame",
@@ -13729,6 +14026,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       () => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if ((_c = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.head) {
+          const externalCss = pageBuilderEditor.getExternalCss();
           const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
           head.innerHTML = `
           <meta charset="UTF-8"/>
@@ -13744,10 +14042,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           <link
               href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
               rel="stylesheet"/>
-          <!--
-          <link href="https://bluesea5.g1project.net/assets/index-j48PwPDr.css" rel="stylesheet">
-          -->
           <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
+
+          <link href="https://bluesea5.g1project.net/assets/index-DjQFWKLW.css" rel="stylesheet" />
+
+          ${externalCss}
+
           <style>${canvasStyle}</style>
         `;
           const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
@@ -14296,7 +14596,7 @@ export {
   Page as e,
   _sfc_main$1$1 as f,
   Part as g,
-  _sfc_main$p as h,
+  _sfc_main$q as h,
   _sfc_main$4$1 as i,
   _sfc_main$3$1 as j,
   _sfc_main$6$1 as k,