easy-email-pro-theme 1.3.1 → 1.4.1

package/lib/index.js

@@ -422,7 +422,7 @@ const styleText$c = `@font-face {
 }
 
 `;
-const RetroStyleText = '[data-slate-block="page"] {\r\n  min-height: 300px;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-focus="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-selected="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] .element-tools-container {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-void-child="true"]:hover {\r\n  outline: 2px solid var(--hover-color);\r\n}\r\n\r\n\r\n.text-mergetag {\r\n  outline: 1px solid rgb(78, 89, 105);\r\n  outline-offset: 1px;\r\n  padding: 0 2px;\r\n  border-radius: 2px;\r\n  cursor: pointer;\r\n  transition: all 0.1s linear;\r\n  border: none;\r\n  font-weight: inherit;\r\n  outline-color: #00a0ac;\r\n  color: inherit;\r\n  background-color: #ebf9fc;\r\n  max-width: 10em;\r\n  font-style: inherit;\r\n  text-decoration-line: inherit;\r\n  position: relative;\r\n}\r\n\r\n\r\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\r\n\r\n\r\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\r\n\r\n\r\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\r\n\r\n\r\n[data-slate-dragover=true] {\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 10;\n  left: 0;\n  height: 4px;\n  opacity: 1;\n}\r\n\r\n\r\n[data-slate-dragging=true] .element-tools-container {\n  opacity: 0;\n}\r\n\r\n\r\n[data-slate-dragover-direction=top][data-slate-dragover=true]::after {\n  top: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=bottom][data-slate-dragover=true]::after {\n  top: auto;\n  bottom: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] {\n  outline: 2px dashed var(--drag-color);\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 1;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  filter: opacity(10%);\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] [data-slate-type=placeholder] {\n  outline: none;\n}\r\n\r\n\r\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n  opacity: 0.8;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n  opacity: 1;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\r\n\r\n\r\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-mask {\n  display: none;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}';
+const RetroStyleText = '[data-slate-block="page"] {\r\n  min-height: 300px;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-focus="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-selected="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] .element-tools-container {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-void="true"] [data-slate-node="element"][data-slate-block="button"]:hover,\r\n[data-slate-void="true"] [data-slate-node="element"][data-slate-block="text"]:hover {\r\n  outline: 2px solid var(--hover-color);\r\n}\r\n\r\n\r\n.text-mergetag {\r\n  outline: 1px solid rgb(78, 89, 105);\r\n  outline-offset: 1px;\r\n  padding: 0 2px;\r\n  border-radius: 2px;\r\n  cursor: pointer;\r\n  transition: all 0.1s linear;\r\n  border: none;\r\n  font-weight: inherit;\r\n  outline-color: #00a0ac;\r\n  color: inherit;\r\n  background-color: #ebf9fc;\r\n  max-width: 10em;\r\n  font-style: inherit;\r\n  text-decoration-line: inherit;\r\n  position: relative;\r\n}\r\n\r\n\r\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\r\n\r\n\r\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\r\n\r\n\r\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\r\n\r\n\r\n[data-slate-dragover=true] {\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 10;\n  left: 0;\n  height: 4px;\n  opacity: 1;\n}\r\n\r\n\r\n[data-slate-dragging=true] .element-tools-container {\n  opacity: 0;\n}\r\n\r\n\r\n[data-slate-dragover-direction=top][data-slate-dragover=true]::after {\n  top: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=bottom][data-slate-dragover=true]::after {\n  top: auto;\n  bottom: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] {\n  outline: 2px dashed var(--drag-color);\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 1;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  filter: opacity(10%);\n}\r\n\r\n\r\n[data-slate-dragover-direction=middle][data-slate-dragover=true] [data-slate-type=placeholder] {\n  outline: none;\n}\r\n\r\n\r\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n  opacity: 0.8;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n  opacity: 1;\n}\r\n\r\n\r\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\r\n\r\n\r\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-mask {\n  display: none;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n}\r\n\r\n\r\n[data-slate-universal-editing=true] .universal-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}';
 const withTheme$1 = (editor) => {
   const { insertBreak, normalizeNode, deleteBackward } = editor;
   editor.insertBreak = (...args) => {
@@ -576,12 +576,6 @@ const DraggingProvider = ({
               return false;
             if (NodeUtils.isPageElement(node2))
               return false;
-            if (NodeUtils.isParentCategoryType(
-              propsData.element.type,
-              node2.type
-            ) && !NodeUtils.isVoidBlockElement(node2)) {
-              return true;
-            }
             const parentPath = Path.parent(path2);
             const parentElement = Node$1.get(editor, parentPath);
             if (Editor.isEditor(node2))
@@ -599,6 +593,12 @@ const DraggingProvider = ({
             if (voidElementParent) {
               return false;
             }
+            if (NodeUtils.isParentCategoryType(
+              propsData.element.type,
+              node2.type
+            ) && !NodeUtils.isVoidBlockElement(node2)) {
+              return true;
+            }
             if (NodeUtils.isParentCategoryType(
               propsData.element.type,
               parentElement.type
@@ -2096,7 +2096,7 @@ const DefaultBlockList = () => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      "data-compact": Boolean(editorProps.compact),
+      "data-compact": Boolean(editorProps.compact || editorProps.widgetMode),
       className: "BlockSideBar-BlockList",
       id: "BlockSideBar-BlockList"
     },
@@ -2262,6 +2262,7 @@ const SlateField$2 = (props) => {
   const editor = useSlate();
   const { form } = Form.useFormContext();
   const formItemFieldValue = form.getFieldValue(fieldName);
+  const initedRef = useRef(false);
   let source = null;
   try {
     source = Node$1.get(editor, props.path);
@@ -2288,9 +2289,12 @@ const SlateField$2 = (props) => {
     [onChangeHandle]
   );
   useEffect(() => {
+    if (initedRef.current)
+      return;
     if (!isEqual$3(fallbackValue, formItemFieldValue)) {
       form.setFieldValue(fieldName, fallbackValue);
     }
+    initedRef.current = true;
   }, [fallbackValue, fieldName, form, formItemFieldValue]);
   return /* @__PURE__ */ React__default.createElement(
     Form.Item,
@@ -4046,7 +4050,7 @@ const pixelNumberAdapter = {
   normalize(val2) {
     if (!isNumber$1(val2))
       return void 0;
-    if (/^\d+$/.test(val2))
+    if (/^\d+$/.test(String(val2)))
       return val2 + "px";
     if (!val2)
       return void 0;
@@ -14070,7 +14074,7 @@ const cardItemLeft = "_cardItemLeft_8uw8m_71";
 const cardItemRight = "_cardItemRight_8uw8m_85";
 const selectImage = "_selectImage_8uw8m_93";
 const exportFreeImage = "_exportFreeImage_8uw8m_110";
-const styles$2 = {
+const styles$3 = {
   container,
   error,
   item: item$1,
@@ -16418,7 +16422,7 @@ function ImageUploader(props) {
   );
   const content = useMemo$1(() => {
     if (isUploading) {
-      return /* @__PURE__ */ React__default.createElement("div", { className: styles$2["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$2["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$2["btn-wrap"] })));
+      return /* @__PURE__ */ React__default.createElement("div", { className: styles$3["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$3["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$3["btn-wrap"] })));
     }
     if (!props.value) {
       return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
@@ -16439,10 +16443,10 @@ function ImageUploader(props) {
             lineHeight: "22px"
           }
         },
-        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$2.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
+        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$2.exportFreeImage,
+            className: styles$3.exportFreeImage,
             onClick: () => setUnsplashVisible(true)
           },
           t("Export free images")
@@ -16476,7 +16480,7 @@ function ImageUploader(props) {
       triggerProps: {
         popupStyle: { display: "inline-flex" }
       },
-      triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$2.actionItem }, t("Replace"))
+      triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$3.actionItem }, t("Replace"))
     },
     /* @__PURE__ */ React__default.createElement(Select$1.Option, { value: "1", onClick: onUpload }, t("Select image")),
     /* @__PURE__ */ React__default.createElement(
@@ -16487,10 +16491,10 @@ function ImageUploader(props) {
       },
       t("Export free images")
     )
-  ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$2.actionItem, onClick: onUpload }, t("Replace")), /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), /* @__PURE__ */ React__default.createElement(
+  ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$3.actionItem, onClick: onUpload }, t("Replace")), /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), /* @__PURE__ */ React__default.createElement(
     "span",
     {
-      className: styles$2.actionItem,
+      className: styles$3.actionItem,
       onClick: () => setPreview(true)
     },
     t("Preview")
@@ -16610,7 +16614,7 @@ const SwitchField = (props) => {
     DefaultSwitchField,
     __spreadProps(__spreadValues({}, props), {
       formItem,
-      style: { position: "relative", top: -6 }
+      style: __spreadValues({ position: "relative", top: -6 }, props.style)
     })
   );
 };
@@ -16779,6 +16783,40 @@ const RichtextBar = (props) => {
   const editor = useMemo$1(() => createEditor(), []);
   const lastTemplateRef = useRef(null);
   const calculateData = useMemo$1(() => {
+    if (!props.pageElement) {
+      const path22 = [0, 0, 0, 0];
+      const content = BlockManager.getBlockByType(ElementType.PAGE).create({
+        attributes: {
+          "background-color": "#ffffff"
+        },
+        children: [
+          BlockManager.getBlockByType(ElementType.STANDARD_SECTION).create({
+            children: [
+              BlockManager.getBlockByType(ElementType.STANDARD_COLUMN).create({
+                children: [
+                  BlockManager.getBlockByType(
+                    ElementType.STANDARD_PARAGRAPH
+                  ).create({
+                    attributes: {
+                      height: "200px",
+                      align: "left"
+                    },
+                    children: [{ text: "" }]
+                  })
+                ]
+              })
+            ],
+            attributes: {
+              "padding-bottom": "0px",
+              "padding-left": "0px",
+              "padding-right": "0px",
+              "padding-top": "0px"
+            }
+          })
+        ]
+      });
+      return [{ subject: "", content }, path22];
+    }
     const pageElement = cloneDeep(omit$2(props.pageElement, "children"));
     const template2 = {
       subject: "Blank",
@@ -16813,10 +16851,14 @@ const RichtextBar = (props) => {
         children: [
           BlockManager.getBlockByType(ElementType.STANDARD_SECTION).create({
             children: [
-              BlockManager.getBlockByType(
-                ElementType.STANDARD_PARAGRAPH
-              ).create({
-                children: [props.value]
+              BlockManager.getBlockByType(ElementType.STANDARD_COLUMN).create({
+                children: [
+                  BlockManager.getBlockByType(
+                    ElementType.STANDARD_PARAGRAPH
+                  ).create({
+                    children: [props.value]
+                  })
+                ]
               })
             ],
             attributes: {
@@ -16889,6 +16931,16 @@ const DefaultSlider = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", flex: "1", alignItems: "center" } }, showLimit && rest.min && /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, rest.min), /* @__PURE__ */ React__default.createElement("div", { style: { flex: "1", marginLeft: 10, marginRight: 10 } }, /* @__PURE__ */ React__default.createElement(Slider, __spreadValues({}, rest))), showLimit && rest.max && /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, rest.max));
 };
 const SliderField = enhancer(DefaultSlider);
+function PixelField(props) {
+  return /* @__PURE__ */ React__default.createElement(
+    NumberField,
+    __spreadProps(__spreadValues({
+      suffix: "px"
+    }, props), {
+      formItem: __spreadValues(__spreadValues({}, props.formItem), pixelNumberAdapter)
+    })
+  );
+}
 const TextField = enhancer(Input);
 enhancer(Input.Search);
 const TextAreaField = enhancer(Input.TextArea);
@@ -17128,11 +17180,6 @@ function FontWeight(props) {
     [props]
   );
 }
-function PixelField(props) {
-  return useMemo$1(() => {
-    return /* @__PURE__ */ React__default.createElement(AttributeField.NumberField, __spreadValues({ formItem: pixelNumberAdapter }, props));
-  }, [props]);
-}
 const getFallbackValue = (params) => {
   const { mode, name: name2, defaultElement } = params;
   if (!defaultElement)
@@ -18672,7 +18719,7 @@ function PixelAndPercentField(props) {
   const _a2 = props, { label, defaultPixelValue, defaultPercentValue, pxFirst } = _a2, rest = __objRest(_a2, ["label", "defaultPixelValue", "defaultPercentValue", "pxFirst"]);
   const editor = useSlate();
   const { getFieldValue, setFieldValue } = useEditorContext();
-  const source = Node$1.get(editor, props.path);
+  const source = props.path ? Node$1.get(editor, props.path) : getFieldValue(null, props.name);
   const defaultElement = useElementDefault({
     path: props.path,
     type: get(source, "type", null)
@@ -18851,6 +18898,38 @@ function Direction$1(props) {
     )));
   }, [name2, path2, rest]);
 }
+var FieldType = /* @__PURE__ */ ((FieldType2) => {
+  FieldType2["PIXEL"] = "pixel";
+  FieldType2["PIXEL_AND_PERCENT"] = "pixel_and_percent";
+  FieldType2["STRING"] = "string";
+  FieldType2["NUMBER"] = "number";
+  FieldType2["ENUM"] = "enum";
+  FieldType2["COLOR"] = "color";
+  FieldType2["IMAGE"] = "image";
+  FieldType2["SLIDER"] = "slider";
+  FieldType2["RICHTEXT"] = "richtext";
+  return FieldType2;
+})(FieldType || {});
+const getFieldByType = (type) => {
+  return {
+    [FieldType.PIXEL_AND_PERCENT]: AttributeField.PixelAndPercentField,
+    [FieldType.STRING]: AttributeField.TextField,
+    [FieldType.ENUM]: AttributeField.SelectField,
+    [FieldType.COLOR]: AttributeField.ColorPickerField,
+    [FieldType.IMAGE]: AttributeField.ImageUrl,
+    [FieldType.PIXEL]: AttributeField.PixelField,
+    [FieldType.SLIDER]: AttributeField.SliderField
+  }[type];
+};
+function FieldItem(props) {
+  const Com = getFieldByType(props.type);
+  if (!Com) {
+    return null;
+  }
+  if (!props.name)
+    return null;
+  return /* @__PURE__ */ React__default.createElement(Com, __spreadProps(__spreadValues({ options: [] }, props), { name: props.name }));
+}
 const defaultAttributeFields = {
   // Basic Form Field
   WatchField,
@@ -18900,12 +18979,13 @@ const defaultAttributeFields = {
   Buttons,
   ButtonCategory,
   WebFonts,
-  RichTextField
+  RichTextField,
+  FieldItem
 };
 const AttributeField = __spreadValues({}, defaultAttributeFields);
 const index$6 = "";
 const AttributesPanelWrapper = (props) => {
-  return /* @__PURE__ */ React__default.createElement("div", { id: "AttributesPanelWrapper", className: "AttributesPanelWrapper" }, /* @__PURE__ */ React__default.createElement("div", { style: __spreadValues({ padding: "20px 0px" }, props.style) }, props.children));
+  return /* @__PURE__ */ React__default.createElement("div", { id: "AttributesPanelWrapper", className: "AttributesPanelWrapper" }, /* @__PURE__ */ React__default.createElement("div", { style: __spreadValues({ padding: "1px 0px" }, props.style) }, props.children));
 };
 const CollapseWrapper = (props) => {
   const [activeKeys, setActiveKeys] = useState(
@@ -19095,14 +19175,14 @@ const Text$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$a,
+        AttributesContainer$b,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$a,
+        AttributesContainer$b,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -19111,7 +19191,7 @@ const Text$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$a({
+function AttributesContainer$b({
   nodePath,
   mode
 }) {
@@ -19171,14 +19251,14 @@ const Section = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$9,
+        AttributesContainer$a,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$9,
+        AttributesContainer$a,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -19187,7 +19267,7 @@ const Section = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$9({
+function AttributesContainer$a({
   nodePath,
   mode
 }) {
@@ -19334,14 +19414,14 @@ const Button = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$8,
+        AttributesContainer$9,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$8,
+        AttributesContainer$9,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -19350,7 +19430,7 @@ const Button = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$8({
+function AttributesContainer$9({
   nodePath,
   mode
 }) {
@@ -19463,14 +19543,14 @@ const Image$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$7,
+        AttributesContainer$8,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$7,
+        AttributesContainer$8,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -19479,7 +19559,7 @@ const Image$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$7({
+function AttributesContainer$8({
   nodePath,
   mode
 }) {
@@ -19559,6 +19639,13 @@ function AttributesContainer$7({
       path: nodePath,
       name: ""
     }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.BorderRadius,
+      path: nodePath,
+      name: "border-radius"
+    }
   )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "4", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
     {
@@ -19581,14 +19668,14 @@ const Divider = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$6,
+        AttributesContainer$7,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$6,
+        AttributesContainer$7,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -19597,7 +19684,7 @@ const Divider = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$6({
+function AttributesContainer$7({
   nodePath,
   mode
 }) {
@@ -19663,14 +19750,14 @@ const Spacer = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$5,
+        AttributesContainer$6,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$5,
+        AttributesContainer$6,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -19679,7 +19766,7 @@ const Spacer = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$5({
+function AttributesContainer$6({
   nodePath,
   mode
 }) {
@@ -19704,14 +19791,14 @@ const Navbar = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$4,
+        AttributesContainer$5,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$4,
+        AttributesContainer$5,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -19720,7 +19807,7 @@ const Navbar = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$4({
+function AttributesContainer$5({
   nodePath,
   mode
 }) {
@@ -19913,14 +20000,14 @@ const Social = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$3,
+        AttributesContainer$4,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$3,
+        AttributesContainer$4,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -19929,7 +20016,7 @@ const Social = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$3({
+function AttributesContainer$4({
   nodePath,
   mode
 }) {
@@ -20161,14 +20248,14 @@ const Hero = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$2,
+        AttributesContainer$3,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$2,
+        AttributesContainer$3,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20177,7 +20264,7 @@ const Hero = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$2({
+function AttributesContainer$3({
   nodePath,
   mode
 }) {
@@ -20294,14 +20381,14 @@ const Column = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$1,
+        AttributesContainer$2,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$1,
+        AttributesContainer$2,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20310,7 +20397,7 @@ const Column = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$1({
+function AttributesContainer$2({
   nodePath,
   mode
 }) {
@@ -20352,14 +20439,14 @@ const Wrapper$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer,
+        AttributesContainer$1,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer,
+        AttributesContainer$1,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20368,7 +20455,7 @@ const Wrapper$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer({
+function AttributesContainer$1({
   nodePath,
   mode
 }) {
@@ -20439,6 +20526,48 @@ function AttributesContainer({
     }
   ))));
 }
+const Widget = ({ nodePath }) => {
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(
+    ResponsiveTabs,
+    {
+      desktop: /* @__PURE__ */ React__default.createElement(
+        AttributesContainer,
+        {
+          mode: ActiveTabKeys.DESKTOP,
+          nodePath
+        }
+      ),
+      mobile: /* @__PURE__ */ React__default.createElement(
+        AttributesContainer,
+        {
+          mode: ActiveTabKeys.MOBILE,
+          nodePath
+        }
+      )
+    }
+  ));
+};
+function AttributesContainer({
+  nodePath,
+  mode
+}) {
+  const { selectedNode, selectedNodePath } = useSelectedNode();
+  const configFields = useMemo$1(() => {
+    return (selectedNode == null ? void 0 : selectedNode.data.config) || [];
+  }, [selectedNode]);
+  if (!selectedNode || !selectedNodePath)
+    return null;
+  const { description } = selectedNode.data;
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2"] }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "0", header: t("Setting") }, description && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 1 }, description && /* @__PURE__ */ React__default.createElement("p", { dangerouslySetInnerHTML: { __html: description } }))), /* @__PURE__ */ React__default.createElement(Divider$1, null)), /* @__PURE__ */ React__default.createElement(Space, { style: { width: "100%" }, direction: "vertical" }, configFields.map((item2, index2) => /* @__PURE__ */ React__default.createElement(
+    AttributeField.FieldItem,
+    __spreadProps(__spreadValues({
+      key: index2
+    }, item2), {
+      path: selectedNodePath,
+      name: `data.input.${item2.name}`
+    })
+  ))))));
+}
 const ConfigPanelsMap = {
   [ElementType.PAGE]: Page,
   [ElementType.STANDARD_NAVBAR]: Navbar,
@@ -20451,6 +20580,9 @@ const ConfigPanelsMap = {
   [ElementType.STANDARD_SECTION]: Section,
   [ElementType.STANDARD_COLUMN]: Column,
   [ElementType.STANDARD_HERO]: Hero,
+  [ElementType.CONTENT_WIDGET]: Widget,
+  [ElementType.SECTION_WIDGET]: Widget,
+  [ElementType.WRAPPER_WIDGET]: Widget,
   //text
   [ElementType.STANDARD_TEXT]: Text$1,
   [ElementType.STANDARD_PARAGRAPH]: Text$1,
@@ -24858,7 +24990,7 @@ const disableInteraction = "_disableInteraction_ng4f3_110";
 const disableSelection = "_disableSelection_ng4f3_114";
 const Collapse = "_Collapse_ng4f3_122";
 const collapsed = "_collapsed_ng4f3_125";
-const styles$1 = {
+const styles$2 = {
   Wrapper,
   clone,
   TreeItem: TreeItem$1,
@@ -24874,7 +25006,7 @@ const styles$1 = {
   collapsed
 };
 const Action$1 = "_Action_armtj_1";
-const styles = {
+const styles$1 = {
   Action: Action$1
 };
 const Action = forwardRef(
@@ -24885,7 +25017,7 @@ const Action = forwardRef(
       __spreadProps(__spreadValues({
         ref: ref2
       }, props), {
-        className: classnames$1(styles.Action, className),
+        className: classnames$1(styles$1.Action, className),
         tabIndex: 0,
         style: __spreadProps(__spreadValues({}, style2), {
           cursor,
@@ -24972,13 +25104,13 @@ const TreeItem = forwardRef(
       "li",
       __spreadValues({
         className: classnames$1(
-          styles$1.Wrapper,
-          clone2 && styles$1.clone,
-          ghost2 && styles$1.ghost,
-          selected2 && styles$1.selected,
-          indicator2 && styles$1.indicator,
-          disableSelection2 && styles$1.disableSelection,
-          disableInteraction2 && styles$1.disableInteraction
+          styles$2.Wrapper,
+          clone2 && styles$2.clone,
+          ghost2 && styles$2.ghost,
+          selected2 && styles$2.selected,
+          indicator2 && styles$2.indicator,
+          disableSelection2 && styles$2.disableSelection,
+          disableInteraction2 && styles$2.disableInteraction
         ),
         ref: wrapperRef,
         style: {
@@ -24988,7 +25120,7 @@ const TreeItem = forwardRef(
       /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: styles$1.TreeItem,
+          className: styles$2.TreeItem,
           ref: ref2,
           style: style2,
           onClick: onSelect,
@@ -25002,17 +25134,17 @@ const TreeItem = forwardRef(
               onCollapse();
             },
             className: classnames$1(
-              styles$1.Collapse,
-              collapsed2 && styles$1.collapsed
+              styles$2.Collapse,
+              collapsed2 && styles$2.collapsed
             )
           },
           collapseIcon
         ),
-        /* @__PURE__ */ React__default.createElement("span", { className: styles$1.Text }, renderTitle(item2)),
+        /* @__PURE__ */ React__default.createElement("span", { className: styles$2.Text }, renderTitle(item2)),
         !clone2 && onRemove && /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$1.hoverHandle,
+            className: styles$2.hoverHandle,
             style: { visibility: removable ? void 0 : "hidden" }
           },
           /* @__PURE__ */ React__default.createElement(
@@ -25025,11 +25157,11 @@ const TreeItem = forwardRef(
             }
           )
         ),
-        clone2 && childCount && childCount > 1 ? /* @__PURE__ */ React__default.createElement("span", { className: styles$1.Count }, childCount) : null,
+        clone2 && childCount && childCount > 1 ? /* @__PURE__ */ React__default.createElement("span", { className: styles$2.Count }, childCount) : null,
         /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$1.hoverHandle,
+            className: styles$2.hoverHandle,
             style: { visibility: moveable ? void 0 : "hidden" }
           },
           /* @__PURE__ */ React__default.createElement(Handle, __spreadValues({}, handleProps))
@@ -25494,7 +25626,7 @@ const BlockLayer = () => {
 };
 const BlockSideBar = ({ height }) => {
   const { setSelectedNodePath, selectedNodePath, universalElementEditing } = useEditorState();
-  const { showLayer, compact } = useEditorProps();
+  const { showLayer, compact, widgetMode } = useEditorProps();
   const { selectedNode } = useSelectedNode();
   const [activeTab, setActiveTab] = useState("Content");
   const lastActiveTab = useRef(activeTab);
@@ -25503,13 +25635,10 @@ const BlockSideBar = ({ height }) => {
       setSelectedNodePath([0]);
     }
   }, [activeTab, setSelectedNodePath, selectedNodePath]);
-  const onChange = useCallback$1(
-    (key2) => {
-      lastActiveTab.current = key2;
-      setActiveTab(key2);
-    },
-    [setSelectedNodePath]
-  );
+  const onChange = useCallback$1((key2) => {
+    lastActiveTab.current = key2;
+    setActiveTab(key2);
+  }, []);
   const onClose = useCallback$1(() => {
     setActiveTab(lastActiveTab.current);
   }, []);
@@ -25548,7 +25677,7 @@ const BlockSideBar = ({ height }) => {
       },
       /* @__PURE__ */ React__default.createElement(BlocksPanel, null)
     )),
-    !compact && /* @__PURE__ */ React__default.createElement(
+    !compact && !widgetMode && /* @__PURE__ */ React__default.createElement(
       Tabs.TabPane,
       {
         destroyOnHide: true,
@@ -38795,6 +38924,309 @@ const ConfigurationSideBar = ({ height }) => {
     }
   ));
 };
+const largeTabsHeader = "_largeTabsHeader_d2sio_1";
+const styles = {
+  largeTabsHeader
+};
+function AddItems(props) {
+  const { getFieldValue, setFieldValue } = useEditorContext();
+  const { path: path2 } = props;
+  const fields = getFieldValue(props.path, props.name);
+  const onAdd = () => {
+    setFieldValue(props.path, props.name, [
+      ...fields || [],
+      { label: "", value: "" }
+    ]);
+  };
+  const onRemove = (index2) => {
+    setFieldValue(props.path, props.name, [
+      ...fields.filter((item2, i) => i !== index2)
+    ]);
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Grid.Row, { justify: "space-between" }, /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, "Options"), /* @__PURE__ */ React__default.createElement(Button$1, { size: "small", icon: /* @__PURE__ */ React__default.createElement(IconPlus, null), onClick: onAdd })), fields == null ? void 0 : fields.map((_14, index2) => {
+    return /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(Space, { align: "center" }, /* @__PURE__ */ React__default.createElement(
+      AttributeField.TextField,
+      {
+        name: `${props.name}.${index2}.label`,
+        label: "Label",
+        path: path2,
+        formItem: {
+          layout: "vertical"
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.TextField,
+      {
+        name: `${props.name}.${index2}.value`,
+        label: "Value",
+        path: path2,
+        formItem: {
+          layout: "vertical"
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      Form.Item,
+      {
+        label: "",
+        style: {
+          margin: "0px"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button$1,
+        {
+          icon: /* @__PURE__ */ React__default.createElement(IconDelete, null),
+          onClick: () => onRemove(index2)
+        }
+      )
+    )));
+  }), /* @__PURE__ */ React__default.createElement(Divider$1, null)));
+}
+const formItemStyle = {
+  labelCol: {
+    span: 7,
+    style: {
+      textAlign: "right"
+    }
+  },
+  wrapperCol: {
+    span: 17,
+    style: {
+      textAlign: "left"
+    }
+  }
+};
+const typeOptions = [
+  { value: FieldType.PIXEL, label: "Pixel" },
+  { value: FieldType.STRING, label: "String" },
+  { value: FieldType.NUMBER, label: "Number" },
+  { value: FieldType.ENUM, label: "Enum" },
+  { value: FieldType.COLOR, label: "Color" },
+  { value: FieldType.IMAGE, label: "Image" }
+  // { value: FieldType.SLIDER, label: "Slider" },
+  // { value: FieldType.PIXEL_AND_PERCENT, label: "Pixel and percent" },
+];
+function FieldConfigItem(props) {
+  const { getFieldValue } = useEditorContext();
+  const keyField = getFieldValue(null, props.name);
+  return /* @__PURE__ */ React__default.createElement(
+    Collapse$1.Item,
+    {
+      style: { backgroundColor: "#fff" },
+      name: props.name,
+      header: props.label,
+      extra: /* @__PURE__ */ React__default.createElement(Button$1, { icon: /* @__PURE__ */ React__default.createElement(IconDelete, null), onClick: props.onRemove }),
+      contentStyle: { width: "100%", padding: "20px 16px" }
+    },
+    /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 0 }, /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical", style: { width: "100%" } }, /* @__PURE__ */ React__default.createElement(
+      AttributeField.TextField,
+      {
+        label: "Label",
+        required: true,
+        name: props.name + ".label",
+        formItem: formItemStyle,
+        path: props.path
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.TextField,
+      {
+        label: "Key",
+        required: true,
+        name: props.name + ".name",
+        formItem: formItemStyle,
+        path: props.path
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.SelectField,
+      {
+        label: "Type",
+        name: props.name + ".type",
+        formItem: formItemStyle,
+        options: typeOptions,
+        path: props.path
+      }
+    ), keyField.type === FieldType.ENUM && /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 17, offset: 7 }, /* @__PURE__ */ React__default.createElement(AddItems, { name: props.name + ".options", path: props.path }))), /* @__PURE__ */ React__default.createElement(
+      AttributeField.TextAreaField,
+      {
+        label: "Desc",
+        name: props.name + ".description",
+        formItem: formItemStyle,
+        path: props.path
+      }
+    ), keyField && /* @__PURE__ */ React__default.createElement(
+      FieldItem,
+      {
+        label: "Default",
+        name: `widgetElement.data.input.${keyField.name}`,
+        formItem: formItemStyle,
+        path: null,
+        type: props.type,
+        options: keyField.options
+      }
+    ))))
+  );
+}
+function WidgetConfigPanel({
+  containerHeight
+}) {
+  const { values: values2, setFieldValue } = useEditorContext();
+  const widgetElement = values2.widgetElement;
+  if (!widgetElement) {
+    throw new Error(`Invalid widgetElement`);
+  }
+  const [activeTab, setActiveTab] = useState(
+    (widgetElement.data.config || []).slice(0, 1).map((_14, index2) => `widgetElement.data.config.${index2}`)
+  );
+  const onAdd = useCallback$1(() => {
+    const cloneWidgetElement = cloneDeep(widgetElement);
+    cloneWidgetElement.data.config.push({
+      label: "Label",
+      name: "",
+      required: false,
+      helpText: "",
+      type: FieldType.PIXEL
+    });
+    setFieldValue(null, `widgetElement`, cloneDeep(cloneWidgetElement));
+    setActiveTab([
+      `widgetElement.data.config.${cloneWidgetElement.data.config.length - 1}`
+    ]);
+  }, [setFieldValue, widgetElement]);
+  const onRemove = useCallback$1(
+    (index2) => {
+      const cloneWidgetElement = cloneDeep(widgetElement);
+      cloneWidgetElement.data.config = cloneWidgetElement.data.config.filter(
+        (_14, i) => index2 !== i
+      );
+      const max = cloneWidgetElement.data.config.length - 1;
+      setFieldValue(null, `widgetElement`, cloneDeep(cloneWidgetElement));
+      setActiveTab([`widgetElement.data.config.${Math.min(index2, max)}`]);
+    },
+    [setFieldValue, widgetElement]
+  );
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(
+    Tabs,
+    {
+      defaultActiveTab: "Setting",
+      renderTabHeader: (_14, DefaultHeader) => /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: styles.largeTabsHeader,
+          style: { display: "flex", alignItems: "center" }
+        },
+        /* @__PURE__ */ React__default.createElement(DefaultHeader, { style: { flex: 1 } })
+      )
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Tabs.TabPane,
+      {
+        key: "Setting",
+        style: { padding: 10 },
+        title: /* @__PURE__ */ React__default.createElement("div", { style: { height: 40, lineHeight: "40px" } }, "Setting")
+      },
+      /* @__PURE__ */ React__default.createElement(Grid.Row, { style: { paddingTop: 20 } }, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 1 }, /* @__PURE__ */ React__default.createElement(
+        AttributeField.TextField,
+        {
+          name: "widgetElement.title",
+          label: "Title",
+          path: null,
+          formItem: {
+            layout: "vertical",
+            labelCol: {},
+            wrapperCol: {}
+          }
+        }
+      ), /* @__PURE__ */ React__default.createElement(
+        AttributeField.TextAreaField,
+        {
+          rows: 3,
+          name: "widgetElement.data.description",
+          label: "Description",
+          path: null,
+          formItem: {
+            layout: "vertical",
+            labelCol: {},
+            wrapperCol: {}
+          }
+        }
+      ))),
+      /* @__PURE__ */ React__default.createElement(Divider$1, null),
+      /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 1 }, /* @__PURE__ */ React__default.createElement(
+        AttributeField.SwitchField,
+        {
+          name: "widgetElement.data.contentEditable",
+          label: "Content editable",
+          path: null,
+          style: { position: "relative", top: 0 },
+          formItem: {
+            layout: "horizontal",
+            labelCol: {
+              span: 10,
+              style: {
+                textAlign: "left"
+              }
+            },
+            wrapperCol: {
+              span: 12,
+              style: {
+                textAlign: "left"
+              }
+            }
+          }
+        }
+      )))
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Tabs.TabPane,
+      {
+        key: "Input",
+        title: /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              height: 40,
+              lineHeight: "40px",
+              paddingLeft: 10,
+              paddingRight: 10
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(Grid.Row, { justify: "space-between", align: "center" }, /* @__PURE__ */ React__default.createElement("span", null), /* @__PURE__ */ React__default.createElement("span", null, "Input"), /* @__PURE__ */ React__default.createElement(Button$1, { icon: /* @__PURE__ */ React__default.createElement(IconPlus, null), onClick: onAdd }))
+        )
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Collapse$1,
+        {
+          bordered: false,
+          activeKey: activeTab,
+          onChange: (key2, keys2) => setActiveTab(keys2)
+        },
+        /* @__PURE__ */ React__default.createElement(Card, { title: "Attributes", bodyStyle: { padding: 0 } }, /* @__PURE__ */ React__default.createElement(
+          FullHeightOverlayScrollbars,
+          {
+            height: `calc(${containerHeight} - 110px)`
+          },
+          (widgetElement.data.config || []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(
+            FieldConfigItem,
+            __spreadProps(__spreadValues({
+              path: null,
+              key: index2
+            }, item2), {
+              name: `widgetElement.data.config.${index2}`,
+              onRemove: () => onRemove(index2)
+            })
+          )),
+          /* @__PURE__ */ React__default.createElement(
+            Collapse$1.Item,
+            {
+              header: "",
+              name: "hidden",
+              style: { display: "none" }
+            }
+          )
+        ))
+      )
+    )
+  ));
+}
 const SharedComponents = {
   PreviewEmailDrawer,
   PreviewEmail,
@@ -38811,6 +39243,7 @@ const SharedComponents = {
   Hotkeys,
   Controller,
   UnsplashImages,
+  WidgetConfigPanel,
   FullHeightOverlayScrollbars
 };
 const FullScreenLoading = ({
@@ -38863,7 +39296,19 @@ const useCreateConfig$1 = (_m) => {
     "hoveringToolbar"
   ]);
   const editor = useMemo$1(() => createEditor(), []);
-  return __spreadValues({
+  let initialValues = rest.initialValues;
+  if (rest.widgetMode) {
+    const widgetElement = initialValues.content.children[0];
+    if (!widgetElement || !NodeUtils.isWidgetElement(widgetElement)) {
+      throw new Error(
+        `The first child element of the Page element must be a Widget element`
+      );
+    }
+    initialValues = cloneDeep(initialValues);
+    initialValues.content.children = widgetElement.children;
+    initialValues.widgetElement = widgetElement;
+  }
+  return __spreadProps(__spreadValues({
     editor,
     withEnhanceEditor: withTheme$1,
     ElementPlaceholder: ElementPlaceholder$1,
@@ -38875,13 +39320,16 @@ const useCreateConfig$1 = (_m) => {
     newLineWithBr: true,
     EnhanceProvider: PluginsProvider,
     loading: /* @__PURE__ */ React__default.createElement(FullScreenLoading, { isFullScreen: true })
-  }, rest);
+  }, rest), {
+    initialValues
+  });
 };
 const Layout$1 = ({ children }) => {
   const { inited } = useEditorContext();
   const {
     controller = true,
     showSidebar = true,
+    widgetMode,
     height,
     compact
   } = useEditorProps();
@@ -38894,7 +39342,7 @@ const Layout$1 = ({ children }) => {
     }
   };
   const root2 = getRoot();
-  const sidebarWidth = getIsLargeScreen() || !compact ? 400 : 350;
+  const sidebarWidth = getIsLargeScreen() || !compact && !widgetMode ? 400 : 350;
   const layoutContent = /* @__PURE__ */ React__default.createElement(SharedComponents.UniversalElementEditorDrawer, null, /* @__PURE__ */ React__default.createElement(
     Card,
     {
@@ -38911,6 +39359,17 @@ const Layout$1 = ({ children }) => {
           height
         }
       },
+      widgetMode && /* @__PURE__ */ React__default.createElement(
+        Layout$2.Sider,
+        {
+          style: {
+            width: sidebarWidth,
+            position: "relative",
+            zIndex: 1
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(SharedComponents.WidgetConfigPanel, { containerHeight: height })
+      ),
       showSidebar && /* @__PURE__ */ React__default.createElement(
         Layout$2.Sider,
         {
@@ -39247,7 +39706,7 @@ const ElementHover = (props) => {
   }
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(renderContent, nodeElement));
 };
-const minimaliststyleText = '[data-slate-block="page"] {\r\n  min-height: 300px;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-focus="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-selected="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] .element-tools-container {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-void-child="true"]:hover {\r\n  outline: 2px solid var(--hover-color);\r\n}\r\n\r\n\r\n.text-mergetag {\r\n  outline: 1px solid rgb(78, 89, 105);\r\n  outline-offset: 1px;\r\n  padding: 0 2px;\r\n  border-radius: 2px;\r\n  cursor: pointer;\r\n  transition: all 0.1s linear;\r\n  border: none;\r\n  font-weight: inherit;\r\n  outline-color: #00a0ac;\r\n  color: inherit;\r\n  background-color: #ebf9fc;\r\n  max-width: 10em;\r\n  font-style: inherit;\r\n  text-decoration-line: inherit;\r\n  position: relative;\r\n}\r\n\r\n\r\n[data-slate-dragover=true] {\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 10;\n  left: 0;\n  height: 4px;\n  opacity: 1;\n}\r\n\r\n\r\n.element-dragover-placeholder-container {\n  position: absolute;\n  top: 0;\n  left: 0px;\n  width: 100%;\n  pointer-events: none;\n  user-select: none;\n}\r\n\r\n\r\n.element-dragover-placeholder-container * {\n  pointer-events: none !important;\n  user-select: none !important;\n}\r\n\r\n\r\n.element-dragover-placeholder {\n  position: fixed;\n  pointer-events: none;\n}\r\n\r\n\r\n[data-slate-dragover-direction=top][data-slate-dragover=true]::after {\n  top: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=bottom][data-slate-dragover=true]::after {\n  top: auto;\n  bottom: 0px;\n}\r\n\r\n\r\n.text-empty::before {\n  content: attr(placeholder);\n  position: absolute;\n  font-size: inherit;\n  white-space: nowrap;\n  pointer-events: none;\n  caret-color: rgb(55, 53, 47);\n  color: rgb(55, 53, 47);\n  -webkit-text-fill-color: rgba(55, 53, 47, 0.5);\n  width: 100%;\n  left: 0;\n  text-align: center;\n  font-style: normal;\n  font-weight: normal;\n}\r\n\r\n\r\n[data-empty-src=true] td > img {\n  display: none !important;\n}';
+const minimaliststyleText = '[data-slate-block="page"] {\r\n  min-height: 300px;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-focus="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-selected="true"] {\r\n  z-index: 3;\r\n}\r\n\r\n\r\n[data-slate-hover="true"] .element-tools-container {\r\n  z-index: 4;\r\n}\r\n\r\n\r\n[data-slate-void="true"] [data-slate-node="element"][data-slate-block="button"]:hover,\r\n[data-slate-void="true"] [data-slate-node="element"][data-slate-block="text"]:hover {\r\n  outline: 2px solid var(--hover-color);\r\n}\r\n\r\n\r\n.text-mergetag {\r\n  outline: 1px solid rgb(78, 89, 105);\r\n  outline-offset: 1px;\r\n  padding: 0 2px;\r\n  border-radius: 2px;\r\n  cursor: pointer;\r\n  transition: all 0.1s linear;\r\n  border: none;\r\n  font-weight: inherit;\r\n  outline-color: #00a0ac;\r\n  color: inherit;\r\n  background-color: #ebf9fc;\r\n  max-width: 10em;\r\n  font-style: inherit;\r\n  text-decoration-line: inherit;\r\n  position: relative;\r\n}\r\n\r\n\r\n[data-slate-dragover=true] {\n  z-index: 2;\n}\r\n\r\n\r\n[data-slate-dragover=true]::after {\n  content: "";\n  position: absolute;\n  pointer-events: none;\n  inset: 0px;\n  border-radius: 3px;\n  background: var(--drag-color);\n  z-index: 10;\n  left: 0;\n  height: 4px;\n  opacity: 1;\n}\r\n\r\n\r\n.element-dragover-placeholder-container {\n  position: absolute;\n  top: 0;\n  left: 0px;\n  width: 100%;\n  pointer-events: none;\n  user-select: none;\n}\r\n\r\n\r\n.element-dragover-placeholder-container * {\n  pointer-events: none !important;\n  user-select: none !important;\n}\r\n\r\n\r\n.element-dragover-placeholder {\n  position: fixed;\n  pointer-events: none;\n}\r\n\r\n\r\n[data-slate-dragover-direction=top][data-slate-dragover=true]::after {\n  top: 0px;\n}\r\n\r\n\r\n[data-slate-dragover-direction=bottom][data-slate-dragover=true]::after {\n  top: auto;\n  bottom: 0px;\n}\r\n\r\n\r\n.text-empty::before {\n  content: attr(placeholder);\n  position: absolute;\n  font-size: inherit;\n  white-space: nowrap;\n  pointer-events: none;\n  caret-color: rgb(55, 53, 47);\n  color: rgb(55, 53, 47);\n  -webkit-text-fill-color: rgba(55, 53, 47, 0.5);\n  width: 100%;\n  left: 0;\n  text-align: center;\n  font-style: normal;\n  font-weight: normal;\n}\r\n\r\n\r\n[data-empty-src=true] td > img {\n  display: none !important;\n}';
 const hideCursor = (editor) => {
   const root2 = ReactEditor.getWindow(editor);
   root2.document.body.setAttribute("data-slate-hide-cursor", "true");
@@ -45123,7 +45582,6 @@ const ColumnLayoutOverlay = ({
       Transforms.insertNodes(editor, row, {
         at: nextPath
       });
-      console.log(nextPath);
       if (rowEleEntry[0].children.length === 1) {
         const textEleEntry = Editor.above(editor, {
           match: (n) => {
@@ -45616,8 +46074,7 @@ const useOverlayMenuCapture = ({
 }) => {
   const [target, setTarget] = useState();
   const [search, setSearch] = useState("");
-  const context = useMinimalistContext();
-  console.log(context);
+  useMinimalistContext();
   const onPageChangeCapture = (...rest) => {
     try {
       onPageChange == null ? void 0 : onPageChange(...rest);