@dcodegroup-au/page-builder 0.8.4 → 0.8.6

package/dist/page-builder.css

@@ -3184,10 +3184,6 @@ select {
     width: 560px;
   }
 
-  .md\:max-w-\[324px\] {
-    max-width: 324px;
-  }
-
   .md\:\!translate-x-0 {
     --tw-translate-x: 0px !important;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
@@ -3886,13 +3882,20 @@ select {
 }
 
 
-.carousel[data-v-37e27419] {
-  margin: 1rem 0;
-  flex-direction: column;
+.carousel[data-v-d127b2e7] {
+
+    display: flex;
+
+    flex-direction: column;
+
+    padding-top: 1rem;
+
+    padding-bottom: 1rem
 }
 @media not all and (min-width: 1024px) {
-[data-v-37e27419] .carousel__slide {
-    flex-direction: column;
+[data-v-d127b2e7] .carousel__slide {
+
+        flex-direction: column
 }
 }
 

package/dist/page-builder.es.js

@@ -452,7 +452,7 @@ const _hoisted_12$e = { class: "flex flex-col gap-3" };
 const _hoisted_13$b = ["onClick"];
 const _hoisted_14$9 = ["onClick"];
 const _hoisted_15$8 = { class: "text-xs text-gray-600" };
-const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
+const _hoisted_16$6 = { class: "text-sm font-medium text-gray-900" };
 const _sfc_main$Q = {
   __name: "Items",
   props: {
@@ -542,7 +542,7 @@ const _sfc_main$Q = {
                         onClick: ($event) => edit(item, index)
                       }, [
                         createElementVNode("div", _hoisted_15$8, toDisplayString(unref(singularize)(unref(parseName)(unref(type)))) + " #" + toDisplayString(index + 1), 1),
-                        createElementVNode("div", _hoisted_16$5, toDisplayString(item.title), 1)
+                        createElementVNode("div", _hoisted_16$6, toDisplayString(item.title), 1)
                       ], 8, _hoisted_14$9),
                       createVNode(_sfc_main$S, {
                         onRemoveItem: ($event) => handleDeleteItem(index),
@@ -45234,7 +45234,7 @@ const _hoisted_15$7 = {
   key: 1,
   class: "flex flex-col gap-1.5"
 };
-const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
+const _hoisted_16$5 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_18$2 = { key: 2 };
 const _sfc_main$C = {
@@ -45405,7 +45405,7 @@ const _sfc_main$C = {
                             placeholder: "Title",
                             maxlength: ((_a3 = componentData.value) == null ? void 0 : _a3.max_title) ?? 200,
                             class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                          }, null, 8, _hoisted_16$4)), [
+                          }, null, 8, _hoisted_16$5)), [
                             [vModelText, item.title]
                           ]) : createCommentVNode("", true),
                           isBulletPoint.value ? withDirectives((openBlock(), createElementBlock("textarea", {
@@ -46193,7 +46193,7 @@ const _hoisted_15$6 = {
   key: 0,
   class: "mb-4 px-6 py-5 rounded-xl bg-gray-50"
 };
-const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
+const _hoisted_16$4 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
 const _hoisted_17$2 = ["value"];
 const _hoisted_18$1 = {
   key: 1,
@@ -46336,7 +46336,7 @@ const _sfc_main$t = {
           createElementVNode("div", _hoisted_14$7, [
             !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_15$6, [
               _cache[3] || (_cache[3] = createElementVNode("div", { class: "text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200" }, "Settings", -1)),
-              createElementVNode("div", _hoisted_16$3, [
+              createElementVNode("div", _hoisted_16$4, [
                 createVNode(_sfc_main$P, {
                   field: "breadcrumb",
                   "label-text": "Breadcrumb section",
@@ -47950,7 +47950,7 @@ const _sfc_main$s = {
     };
   }
 };
-const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-37e27419"]]);
+const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-d127b2e7"]]);
 const _hoisted_1$L = ["target", "href"];
 const _sfc_main$r = {
   __name: "LinkPresenter",
@@ -48481,7 +48481,7 @@ const _hoisted_15$5 = {
   key: 0,
   class: "flex sm:justify-center mb-6 lg:mb-10"
 };
-const _hoisted_16$2 = ["href", "target"];
+const _hoisted_16$3 = ["href", "target"];
 const _sfc_main$j = {
   __name: "CarouselPresenter",
   props: {
@@ -48635,7 +48635,7 @@ const _sfc_main$j = {
           }, [
             createTextVNode(toDisplayString(__props.component.button.title) + " ", 1),
             createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-          ], 8, _hoisted_16$2)
+          ], 8, _hoisted_16$3)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -48723,7 +48723,7 @@ const _hoisted_12$6 = ["href"];
 const _hoisted_13$6 = { class: "flex justify-between" };
 const _hoisted_14$5 = ["innerHTML"];
 const _hoisted_15$4 = { class: "text-gray-500 text-sm mb-4" };
-const _hoisted_16$1 = {
+const _hoisted_16$2 = {
   key: 0,
   class: "flex justify-center"
 };
@@ -48916,7 +48916,7 @@ const _sfc_main$h = {
             createVNode(unref(ChevronRight), { class: "w-6 h-6" })
           ], 2)
         ], 2),
-        Object.keys(unref(button)).length && ((_c = unref(button)) == null ? void 0 : _c.show) ? (openBlock(), createElementBlock("div", _hoisted_16$1, [
+        Object.keys(unref(button)).length && ((_c = unref(button)) == null ? void 0 : _c.show) ? (openBlock(), createElementBlock("div", _hoisted_16$2, [
           createElementVNode("a", {
             class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
             href: unref(formatUrl)(unref(button).url),
@@ -49198,15 +49198,16 @@ const _hoisted_9$b = {
   key: 0,
   class: "max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center"
 };
-const _hoisted_10$8 = { class: "font-semibold text-[20px] text-gray-900" };
-const _hoisted_11$7 = ["innerHTML"];
-const _hoisted_12$5 = ["href", "target"];
-const _hoisted_13$5 = ["src"];
-const _hoisted_14$4 = {
+const _hoisted_10$8 = { class: "ql-editor" };
+const _hoisted_11$7 = { class: "font-semibold text-[20px] text-gray-900" };
+const _hoisted_12$5 = ["innerHTML"];
+const _hoisted_13$5 = ["href", "target"];
+const _hoisted_14$4 = ["src"];
+const _hoisted_15$3 = {
   key: 0,
   class: "w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]"
 };
-const _hoisted_15$3 = ["src", "alt"];
+const _hoisted_16$1 = ["src", "alt"];
 const _sfc_main$d = {
   __name: "TwoColumnsImageContent",
   props: {
@@ -49287,7 +49288,7 @@ const _sfc_main$d = {
                 class: normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 lg:w-2/3"])
               }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item) => {
-                  var _a2, _b2, _c2;
+                  var _a2, _b2;
                   return openBlock(), createElementBlock("div", {
                     class: normalizeClass(["flex gap-3 w-full", {
                       "bg-gray-50 p-8 rounded-xl md:rounded-3xl overflow-hidden flex-col": featureItemsComponent.value.hasOwnProperty("grid_columns") && (featureItemsComponent.value.grid_columns > 2 || ((_a2 = featureItemsComponent.value) == null ? void 0 : _a2.has_background)),
@@ -49301,15 +49302,13 @@ const _sfc_main$d = {
                           "icon-classes": "w-5 h-5 text-brand-600"
                         }, null, 8, ["icon"])
                       ])) : createCommentVNode("", true),
-                      createElementVNode("div", {
-                        class: normalizeClass(["md:max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
-                      }, [
-                        createElementVNode("h3", _hoisted_10$8, toDisplayString(item.title), 1),
+                      createElementVNode("div", _hoisted_10$8, [
+                        createElementVNode("h3", _hoisted_11$7, toDisplayString(item.title), 1),
                         createElementVNode("p", {
                           class: "mt-2 text-md font-normal text-gray-600 leading-[24px]",
                           innerHTML: item.supporting_text ?? item.description
-                        }, null, 8, _hoisted_11$7),
-                        ((_c2 = item == null ? void 0 : item.primary_button) == null ? void 0 : _c2.show) ? (openBlock(), createElementBlock("a", {
+                        }, null, 8, _hoisted_12$5),
+                        ((_b2 = item == null ? void 0 : item.primary_button) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("a", {
                           key: 0,
                           class: "cursor-pointer text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4",
                           href: unref(formatUrl)(item.primary_button.url),
@@ -49317,23 +49316,23 @@ const _sfc_main$d = {
                         }, [
                           createTextVNode(toDisplayString(item.primary_button.label) + " ", 1),
                           createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-                        ], 8, _hoisted_12$5)) : createCommentVNode("", true)
-                      ], 2)
+                        ], 8, _hoisted_13$5)) : createCommentVNode("", true)
+                      ])
                     ], 64)) : (openBlock(), createElementBlock("img", {
                       key: 1,
                       src: item.image,
                       alt: "Feature Image",
                       class: "w-full h-full object-cover"
-                    }, null, 8, _hoisted_13$5))
+                    }, null, 8, _hoisted_14$4))
                   ], 2);
                 }), 256))
               ], 2),
-              imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_14$4, [
+              imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_15$3, [
                 createElementVNode("img", {
                   src: imageComponent.value.featured_image,
                   alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
                   class: "w-full h-full object-cover max-lg:absolute inset-0"
-                }, null, 8, _hoisted_15$3)
+                }, null, 8, _hoisted_16$1)
               ])) : createCommentVNode("", true)
             ], 2)
           ]))

package/dist/page-builder.umd.js

@@ -455,7 +455,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_13$b = ["onClick"];
   const _hoisted_14$9 = ["onClick"];
   const _hoisted_15$8 = { class: "text-xs text-gray-600" };
-  const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
+  const _hoisted_16$6 = { class: "text-sm font-medium text-gray-900" };
   const _sfc_main$Q = {
     __name: "Items",
     props: {
@@ -545,7 +545,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                           onClick: ($event) => edit(item, index)
                         }, [
                           vue.createElementVNode("div", _hoisted_15$8, vue.toDisplayString(vue.unref(singularize)(vue.unref(parseName)(vue.unref(type)))) + " #" + vue.toDisplayString(index + 1), 1),
-                          vue.createElementVNode("div", _hoisted_16$5, vue.toDisplayString(item.title), 1)
+                          vue.createElementVNode("div", _hoisted_16$6, vue.toDisplayString(item.title), 1)
                         ], 8, _hoisted_14$9),
                         vue.createVNode(_sfc_main$S, {
                           onRemoveItem: ($event) => handleDeleteItem(index),
@@ -45237,7 +45237,7 @@ ${escapeText(this.code(index, length))}
     key: 1,
     class: "flex flex-col gap-1.5"
   };
-  const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
+  const _hoisted_16$5 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_18$2 = { key: 2 };
   const _sfc_main$C = {
@@ -45408,7 +45408,7 @@ ${escapeText(this.code(index, length))}
                               placeholder: "Title",
                               maxlength: ((_a3 = componentData.value) == null ? void 0 : _a3.max_title) ?? 200,
                               class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                            }, null, 8, _hoisted_16$4)), [
+                            }, null, 8, _hoisted_16$5)), [
                               [vue.vModelText, item.title]
                             ]) : vue.createCommentVNode("", true),
                             isBulletPoint.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
@@ -46196,7 +46196,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "mb-4 px-6 py-5 rounded-xl bg-gray-50"
   };
-  const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
+  const _hoisted_16$4 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
   const _hoisted_17$2 = ["value"];
   const _hoisted_18$1 = {
     key: 1,
@@ -46339,7 +46339,7 @@ ${escapeText(this.code(index, length))}
             vue.createElementVNode("div", _hoisted_14$7, [
               !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$6, [
                 _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200" }, "Settings", -1)),
-                vue.createElementVNode("div", _hoisted_16$3, [
+                vue.createElementVNode("div", _hoisted_16$4, [
                   vue.createVNode(_sfc_main$P, {
                     field: "breadcrumb",
                     "label-text": "Breadcrumb section",
@@ -47953,7 +47953,7 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-37e27419"]]);
+  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-d127b2e7"]]);
   const _hoisted_1$L = ["target", "href"];
   const _sfc_main$r = {
     __name: "LinkPresenter",
@@ -48484,7 +48484,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "flex sm:justify-center mb-6 lg:mb-10"
   };
-  const _hoisted_16$2 = ["href", "target"];
+  const _hoisted_16$3 = ["href", "target"];
   const _sfc_main$j = {
     __name: "CarouselPresenter",
     props: {
@@ -48638,7 +48638,7 @@ ${escapeText(this.code(index, length))}
             }, [
               vue.createTextVNode(vue.toDisplayString(__props.component.button.title) + " ", 1),
               vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-            ], 8, _hoisted_16$2)
+            ], 8, _hoisted_16$3)
           ])) : vue.createCommentVNode("", true)
         ]);
       };
@@ -48726,7 +48726,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_13$6 = { class: "flex justify-between" };
   const _hoisted_14$5 = ["innerHTML"];
   const _hoisted_15$4 = { class: "text-gray-500 text-sm mb-4" };
-  const _hoisted_16$1 = {
+  const _hoisted_16$2 = {
     key: 0,
     class: "flex justify-center"
   };
@@ -48919,7 +48919,7 @@ ${escapeText(this.code(index, length))}
               vue.createVNode(vue.unref(ChevronRight), { class: "w-6 h-6" })
             ], 2)
           ], 2),
-          Object.keys(vue.unref(button)).length && ((_c = vue.unref(button)) == null ? void 0 : _c.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, [
+          Object.keys(vue.unref(button)).length && ((_c = vue.unref(button)) == null ? void 0 : _c.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$2, [
             vue.createElementVNode("a", {
               class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
               href: vue.unref(formatUrl)(vue.unref(button).url),
@@ -49201,15 +49201,16 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center"
   };
-  const _hoisted_10$8 = { class: "font-semibold text-[20px] text-gray-900" };
-  const _hoisted_11$7 = ["innerHTML"];
-  const _hoisted_12$5 = ["href", "target"];
-  const _hoisted_13$5 = ["src"];
-  const _hoisted_14$4 = {
+  const _hoisted_10$8 = { class: "ql-editor" };
+  const _hoisted_11$7 = { class: "font-semibold text-[20px] text-gray-900" };
+  const _hoisted_12$5 = ["innerHTML"];
+  const _hoisted_13$5 = ["href", "target"];
+  const _hoisted_14$4 = ["src"];
+  const _hoisted_15$3 = {
     key: 0,
     class: "w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]"
   };
-  const _hoisted_15$3 = ["src", "alt"];
+  const _hoisted_16$1 = ["src", "alt"];
   const _sfc_main$d = {
     __name: "TwoColumnsImageContent",
     props: {
@@ -49290,7 +49291,7 @@ ${escapeText(this.code(index, length))}
                   class: vue.normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 lg:w-2/3"])
                 }, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item) => {
-                    var _a2, _b2, _c2;
+                    var _a2, _b2;
                     return vue.openBlock(), vue.createElementBlock("div", {
                       class: vue.normalizeClass(["flex gap-3 w-full", {
                         "bg-gray-50 p-8 rounded-xl md:rounded-3xl overflow-hidden flex-col": featureItemsComponent.value.hasOwnProperty("grid_columns") && (featureItemsComponent.value.grid_columns > 2 || ((_a2 = featureItemsComponent.value) == null ? void 0 : _a2.has_background)),
@@ -49304,15 +49305,13 @@ ${escapeText(this.code(index, length))}
                             "icon-classes": "w-5 h-5 text-brand-600"
                           }, null, 8, ["icon"])
                         ])) : vue.createCommentVNode("", true),
-                        vue.createElementVNode("div", {
-                          class: vue.normalizeClass(["md:max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
-                        }, [
-                          vue.createElementVNode("h3", _hoisted_10$8, vue.toDisplayString(item.title), 1),
+                        vue.createElementVNode("div", _hoisted_10$8, [
+                          vue.createElementVNode("h3", _hoisted_11$7, vue.toDisplayString(item.title), 1),
                           vue.createElementVNode("p", {
                             class: "mt-2 text-md font-normal text-gray-600 leading-[24px]",
                             innerHTML: item.supporting_text ?? item.description
-                          }, null, 8, _hoisted_11$7),
-                          ((_c2 = item == null ? void 0 : item.primary_button) == null ? void 0 : _c2.show) ? (vue.openBlock(), vue.createElementBlock("a", {
+                          }, null, 8, _hoisted_12$5),
+                          ((_b2 = item == null ? void 0 : item.primary_button) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
                             class: "cursor-pointer text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4",
                             href: vue.unref(formatUrl)(item.primary_button.url),
@@ -49320,23 +49319,23 @@ ${escapeText(this.code(index, length))}
                           }, [
                             vue.createTextVNode(vue.toDisplayString(item.primary_button.label) + " ", 1),
                             vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-                          ], 8, _hoisted_12$5)) : vue.createCommentVNode("", true)
-                        ], 2)
+                          ], 8, _hoisted_13$5)) : vue.createCommentVNode("", true)
+                        ])
                       ], 64)) : (vue.openBlock(), vue.createElementBlock("img", {
                         key: 1,
                         src: item.image,
                         alt: "Feature Image",
                         class: "w-full h-full object-cover"
-                      }, null, 8, _hoisted_13$5))
+                      }, null, 8, _hoisted_14$4))
                     ], 2);
                   }), 256))
                 ], 2),
-                imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$4, [
+                imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$3, [
                   vue.createElementVNode("img", {
                     src: imageComponent.value.featured_image,
                     alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
                     class: "w-full h-full object-cover max-lg:absolute inset-0"
-                  }, null, 8, _hoisted_15$3)
+                  }, null, 8, _hoisted_16$1)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
             ]))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/components/presenters/components/SliderPresenter.vue

@@ -64,11 +64,10 @@ const slides = componentData.value.data.filter((o) => o.public);
 
 <style scoped>
 .carousel {
-  margin: 1rem 0;
-  flex-direction: column;
+  @apply py-4 flex flex-col;
 }
 
 :deep(.carousel__slide) {
   @apply max-lg:flex-col;
 }
-</style>
+</style>

package/src/components/presenters/modules/TwoColumnsImageContent.vue

@@ -36,7 +36,7 @@
                      class="max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
                   <IconComponent :icon="item.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
                 </div>
-                <div class="md:max-w-[324px] ql-editor" :class="{'max-w-full': featureItemsComponent?.has_background}">
+                <div class="ql-editor">
                   <h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
                   <p class=" mt-2 text-md font-normal text-gray-600 leading-[24px]" v-html="item.supporting_text ?? item.description"></p>
                   <a