@dcodegroup-au/page-builder 0.7.6 → 0.7.8

package/dist/page-builder.umd.js

@@ -449,7 +449,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_7$q = { class: "flex justify-between" };
   const _hoisted_8$o = { class: "flex flex-col gap-1" };
   const _hoisted_9$n = { class: "font-semibold text-gray-900" };
-  const _hoisted_10$i = { class: "text-sm text-gray-600" };
+  const _hoisted_10$j = { class: "text-sm text-gray-600" };
   const _hoisted_11$g = ["disabled"];
   const _hoisted_12$d = { class: "flex flex-col gap-3" };
   const _hoisted_13$b = ["onClick"];
@@ -515,7 +515,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 vue.createElementVNode("div", _hoisted_7$q, [
                   vue.createElementVNode("div", _hoisted_8$o, [
                     vue.createElementVNode("div", _hoisted_9$n, vue.toDisplayString(vue.unref(parseName)(vue.unref(type))), 1),
-                    vue.createElementVNode("div", _hoisted_10$i, "This " + vue.toDisplayString(vue.unref(singularize)(vue.unref(type))) + " can contain up to " + vue.toDisplayString(dataRef.value.max_items) + " " + vue.toDisplayString(vue.unref(parseName)(vue.unref(type), false)), 1)
+                    vue.createElementVNode("div", _hoisted_10$j, "This " + vue.toDisplayString(vue.unref(singularize)(vue.unref(type))) + " can contain up to " + vue.toDisplayString(dataRef.value.max_items) + " " + vue.toDisplayString(vue.unref(parseName)(vue.unref(type), false)), 1)
                   ]),
                   vue.createElementVNode("div", null, [
                     vue.createElementVNode("button", {
@@ -11702,7 +11702,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_7$p = { class: "file-upload-preview" };
   const _hoisted_8$n = ["src", "title"];
   const _hoisted_9$m = ["href"];
-  const _hoisted_10$h = { class: "file-upload-title" };
+  const _hoisted_10$i = { class: "file-upload-title" };
   const _hoisted_11$f = { class: "file-upload-file-remove" };
   const _hoisted_12$c = { class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg flex flex-col justify-center items-center w-full" };
   const _sfc_main$O = {
@@ -11808,7 +11808,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               target: "_blank",
               class: "link"
             }, [
-              vue.createElementVNode("div", _hoisted_10$h, vue.toDisplayString(file.value.file_name), 1)
+              vue.createElementVNode("div", _hoisted_10$i, vue.toDisplayString(file.value.file_name), 1)
             ], 8, _hoisted_9$m),
             vue.createElementVNode("a", _hoisted_11$f, [
               vue.createElementVNode("i", {
@@ -33927,7 +33927,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_7$n = { key: 0 };
   const _hoisted_8$l = { key: 1 };
   const _hoisted_9$l = { key: 2 };
-  const _hoisted_10$g = { class: "flex max-h-[196px] flex-wrap gap-1.5 overflow-y-auto" };
+  const _hoisted_10$h = { class: "flex max-h-[196px] flex-wrap gap-1.5 overflow-y-auto" };
   const __default__ = {
     directives: {
       clickOutside: useClickOutside
@@ -34007,7 +34007,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 vue.createElementVNode("p", _hoisted_6$o, [
                   icons2.value.length > 0 && search.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$n, " Search result ")) : icons2.value.length < 1 && search.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8$l, " No search result ")) : search.value.length < 1 && icons2.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_9$l, " Frequently used icons ")) : vue.createCommentVNode("", true)
                 ]),
-                vue.createElementVNode("div", _hoisted_10$g, [
+                vue.createElementVNode("div", _hoisted_10$h, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(icons2.value, (icon) => {
                     return vue.openBlock(), vue.createBlock(_sfc_main$H, {
                       class: "cursor-pointer rounded p-1 hover:bg-gray-100",
@@ -45225,7 +45225,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_7$m = { class: "flex flex-col gap-3" };
   const _hoisted_8$k = { class: "flex items-center justify-between" };
   const _hoisted_9$k = { class: "text-lg font-semibold text-gray-900" };
-  const _hoisted_10$f = { class: "relative flex items-end" };
+  const _hoisted_10$g = { class: "relative flex items-end" };
   const _hoisted_11$e = { class: "flex flex-col gap-6" };
   const _hoisted_12$b = {
     key: 0,
@@ -45360,7 +45360,7 @@ ${escapeText(this.code(index, length))}
                 }, [
                   vue.createElementVNode("div", _hoisted_8$k, [
                     vue.createElementVNode("div", _hoisted_9$k, " Item #" + vue.toDisplayString(index + 1), 1),
-                    vue.createElementVNode("div", _hoisted_10$f, [
+                    vue.createElementVNode("div", _hoisted_10$g, [
                       vue.createVNode(_sfc_main$S, {
                         onRemoveItem: ($event) => handleDeleteItem(index)
                       }, null, 8, ["onRemoveItem"])
@@ -45480,7 +45480,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_7$l = { class: "flex items-center justify-between" };
   const _hoisted_8$j = { class: "text-lg font-semibold text-gray-900" };
   const _hoisted_9$j = { class: "relative flex items-end" };
-  const _hoisted_10$e = { class: "flex flex-col gap-6" };
+  const _hoisted_10$f = { class: "flex flex-col gap-6" };
   const _hoisted_11$d = { class: "flex flex-col gap-1.5" };
   const _hoisted_12$a = ["onUpdate:modelValue"];
   const _sfc_main$B = {
@@ -45563,7 +45563,7 @@ ${escapeText(this.code(index, length))}
                       }, null, 8, ["onRemoveItem"])
                     ])
                   ]),
-                  vue.createElementVNode("div", _hoisted_10$e, [
+                  vue.createElementVNode("div", _hoisted_10$f, [
                     vue.createElementVNode("div", _hoisted_11$d, [
                       vue.createVNode(vue.unref(VFileUpload), {
                         name: "image",
@@ -45768,7 +45768,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_7$j = { class: "flex items-center justify-between" };
   const _hoisted_8$i = { class: "text-lg font-semibold text-gray-900" };
   const _hoisted_9$i = { class: "relative flex items-end" };
-  const _hoisted_10$d = { class: "flex flex-col gap-6" };
+  const _hoisted_10$e = { class: "flex flex-col gap-6" };
   const _hoisted_11$c = { class: "flex flex-col gap-1.5" };
   const _sfc_main$y = {
     __name: "VideoGrid",
@@ -45844,7 +45844,7 @@ ${escapeText(this.code(index, length))}
                       }, null, 8, ["onRemoveItem"])
                     ])
                   ]),
-                  vue.createElementVNode("div", _hoisted_10$d, [
+                  vue.createElementVNode("div", _hoisted_10$e, [
                     vue.createElementVNode("div", _hoisted_11$c, [
                       vue.createVNode(vue.unref(VFileUpload), {
                         name: "image",
@@ -46165,7 +46165,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "flex flex-col gap-2"
   };
-  const _hoisted_10$c = ["onClick"];
+  const _hoisted_10$d = ["onClick"];
   const _hoisted_11$b = { class: "flex flex-col" };
   const _hoisted_12$9 = { class: "text-sm font-medium text-gray-900" };
   const _hoisted_13$9 = { class: "flex items-center justify-between gap-3 px-[10px]" };
@@ -46308,7 +46308,7 @@ ${escapeText(this.code(index, length))}
                         vue.createElementVNode("div", _hoisted_13$9, [
                           vue.createVNode(vue.unref(ChevronRight), { class: "h-5 w-5" })
                         ])
-                      ], 10, _hoisted_10$c);
+                      ], 10, _hoisted_10$d);
                     }), 256))
                   ])) : vue.createCommentVNode("", true)
                 ]);
@@ -46576,17 +46576,17 @@ ${escapeText(this.code(index, length))}
     });
     return { widthMultiplier, heightMultiplier };
   }
-  function getSnapAlignOffsetByItemsToShow(align, itemsToShow2) {
+  function getSnapAlignOffsetByItemsToShow(align, itemsToShow) {
     switch (align) {
       case "start":
         return 0;
       case "center":
       case "center-odd":
-        return (itemsToShow2 - 1) / 2;
+        return (itemsToShow - 1) / 2;
       case "center-even":
-        return (itemsToShow2 - 2) / 2;
+        return (itemsToShow - 2) / 2;
       case "end":
-        return itemsToShow2 - 1;
+        return itemsToShow - 1;
       default:
         return 0;
     }
@@ -46606,9 +46606,9 @@ ${escapeText(this.code(index, length))}
         return 0;
     }
   }
-  function getSnapAlignOffset({ slideSize, viewportSize, align, itemsToShow: itemsToShow2 }) {
-    if (itemsToShow2 !== void 0) {
-      return getSnapAlignOffsetByItemsToShow(align, itemsToShow2);
+  function getSnapAlignOffset({ slideSize, viewportSize, align, itemsToShow }) {
+    if (itemsToShow !== void 0) {
+      return getSnapAlignOffsetByItemsToShow(align, itemsToShow);
     }
     if (slideSize !== void 0 && viewportSize !== void 0) {
       return getSnapAlignOffsetBySlideAndViewport(align, slideSize, viewportSize);
@@ -47034,9 +47034,9 @@ ${escapeText(this.code(index, length))}
         if (isAuto.value) {
           slideSize.value = calculateAverage(slidesRect.value.map((slide) => slide[dimension.value]));
         } else {
-          const itemsToShow2 = Number(config2.itemsToShow);
-          const totalGap = (itemsToShow2 - 1) * config2.gap;
-          slideSize.value = (viewportRect.value[dimension.value] - totalGap) / itemsToShow2;
+          const itemsToShow = Number(config2.itemsToShow);
+          const totalGap = (itemsToShow - 1) * config2.gap;
+          slideSize.value = (viewportRect.value[dimension.value] - totalGap) / itemsToShow;
         }
       }
       function updateSlidesData() {
@@ -47318,8 +47318,8 @@ ${escapeText(this.code(index, length))}
         if (isAuto.value) {
           return { before: slides.length, after: slides.length };
         }
-        const itemsToShow2 = Number(config2.itemsToShow);
-        const slidesToClone = Math.ceil(itemsToShow2 + (config2.itemsToScroll - 1));
+        const itemsToShow = Number(config2.itemsToShow);
+        const slidesToClone = Math.ceil(itemsToShow + (config2.itemsToScroll - 1));
         const before = slidesToClone - activeSlideIndex.value;
         const after = slidesToClone - (slidesCount.value - (activeSlideIndex.value + 1));
         return {
@@ -47681,14 +47681,14 @@ ${escapeText(this.code(index, length))}
     },
     setup(props) {
       let carousel = vue.inject(injectCarousel, null);
-      const itemsToShow2 = vue.computed(() => carousel.config.itemsToShow);
+      const itemsToShow = vue.computed(() => carousel.config.itemsToShow);
       const offset = vue.computed(() => getSnapAlignOffset({
         align: carousel.config.snapAlign,
-        itemsToShow: itemsToShow2.value
+        itemsToShow: itemsToShow.value
       }));
-      const isPaginated = vue.computed(() => props.paginateByItemsToShow && itemsToShow2.value > 1);
-      const currentPage = vue.computed(() => Math.ceil((carousel.activeSlide - offset.value) / itemsToShow2.value));
-      const pageCount = vue.computed(() => Math.ceil(carousel.slidesCount / itemsToShow2.value));
+      const isPaginated = vue.computed(() => props.paginateByItemsToShow && itemsToShow.value > 1);
+      const currentPage = vue.computed(() => Math.ceil((carousel.activeSlide - offset.value) / itemsToShow.value));
+      const pageCount = vue.computed(() => Math.ceil(carousel.slidesCount / itemsToShow.value));
       const isActive = (slide) => mapNumberToRange(isPaginated.value ? {
         val: currentPage.value,
         max: pageCount.value - 1,
@@ -47777,8 +47777,8 @@ ${escapeText(this.code(index, length))}
         if (carousel.config.itemsToShow === "auto") {
           return;
         }
-        const itemsToShow2 = carousel.config.itemsToShow;
-        const dimension = carousel.config.gap > 0 && itemsToShow2 > 1 ? `calc(${100 / itemsToShow2}% - ${carousel.config.gap * (itemsToShow2 - 1) / itemsToShow2}px)` : `${100 / itemsToShow2}%`;
+        const itemsToShow = carousel.config.itemsToShow;
+        const dimension = carousel.config.gap > 0 && itemsToShow > 1 ? `calc(${100 / itemsToShow}% - ${carousel.config.gap * (itemsToShow - 1) / itemsToShow}px)` : `${100 / itemsToShow}%`;
         return carousel.isVertical ? { height: dimension } : { width: dimension };
       });
       carousel.slideRegistry.registerSlide(instance, props.index);
@@ -47838,7 +47838,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_7$h = { class: "max-md:flex-1" };
   const _hoisted_8$g = ["innerHTML"];
   const _hoisted_9$g = { class: "flex gap-3 md:mt-8 max-sm:flex-col" };
-  const _hoisted_10$b = ["href", "target"];
+  const _hoisted_10$c = ["href", "target"];
   const _hoisted_11$a = ["href", "target"];
   const _hoisted_12$8 = ["src"];
   const _hoisted_13$8 = {
@@ -47898,7 +47898,7 @@ ${escapeText(this.code(index, length))}
                             target: slide.secondary_button.open_in_new_tab ? "_blank" : ""
                           }, [
                             vue.createElementVNode("span", null, vue.toDisplayString(slide.secondary_button.label), 1)
-                          ], 8, _hoisted_10$b)) : vue.createCommentVNode("", true),
+                          ], 8, _hoisted_10$c)) : vue.createCommentVNode("", true),
                           slide.primary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 1,
                             class: "flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50",
@@ -48017,15 +48017,15 @@ ${escapeText(this.code(index, length))}
       return (_ctx, _cache) => {
         var _a, _b, _c, _d, _e, _f, _g;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["flex flex-col sm:px-0 px-4", { "items-center": (_a = component.value) == null ? void 0 : _a.center }])
+          class: vue.normalizeClass(["flex flex-col gap-4", { "items-center": (_a = component.value) == null ? void 0 : _a.center }])
         }, [
           ((_b = component.value) == null ? void 0 : _b.title) ? (vue.openBlock(), vue.createElementBlock("p", {
             key: 0,
-            class: vue.normalizeClass(["pb-4 text-4xl font-semibold text-white", { "!text-gray-900": (_c = component.value) == null ? void 0 : _c.dark }])
+            class: vue.normalizeClass(["text-2xl sm:text-3xl lg:text-4xl font-semibold text-white", { "!text-gray-900": (_c = component.value) == null ? void 0 : _c.dark }])
           }, vue.toDisplayString((_d = component.value) == null ? void 0 : _d.title), 3)) : vue.createCommentVNode("", true),
           ((_e = component.value) == null ? void 0 : _e.supporting_text) ? (vue.openBlock(), vue.createElementBlock("p", {
             key: 1,
-            class: vue.normalizeClass(["text-navy-25 text-xl font-normal leading-[30px]", { "!text-gray-600": (_f = component.value) == null ? void 0 : _f.dark }])
+            class: vue.normalizeClass(["text-navy-25 text-sm sm:text-base lg:text-xl", { "!text-gray-600": (_f = component.value) == null ? void 0 : _f.dark }])
           }, vue.toDisplayString((_g = component.value) == null ? void 0 : _g.supporting_text), 3)) : vue.createCommentVNode("", true)
         ], 2);
       };
@@ -48121,20 +48121,21 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const _hoisted_1$G = { class: "flex flex-col md:flex-row justify-center gap-4 items-stretch mt-6" };
-  const _hoisted_2$k = { class: "flex-1 w-full md:w-1/2 flex flex-col" };
+  const _hoisted_1$G = { class: "grid sm:grid-cols-[auto_240px] lg:grid-cols-2 justify-center gap-4 items-stretch mt-6 text-left" };
+  const _hoisted_2$k = { class: "grid max-sm:grid-cols-2 gap-4" };
   const _hoisted_3$i = ["onClick"];
-  const _hoisted_4$i = { class: "py-4 pl-4 md:pl-6" };
-  const _hoisted_5$h = ["innerHTML"];
-  const _hoisted_6$h = { class: "flex-1 w-full md:w-1/2 bg-transparent flex flex-col items-center" };
-  const _hoisted_7$g = ["src"];
-  const _hoisted_8$f = {
+  const _hoisted_4$i = { class: "sm:py-4 sm:pl-4 md:pl-6" };
+  const _hoisted_5$h = ["target", "href"];
+  const _hoisted_6$h = ["innerHTML"];
+  const _hoisted_7$g = { class: "max-sm:hidden bg-transparent flex flex-col items-center" };
+  const _hoisted_8$f = ["src"];
+  const _hoisted_9$f = {
     key: 1,
-    class: "rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full",
+    class: "rounded-[20px] md:rounded-[40px] object-contain lg:max-h-[387px] w-full",
     src: _imports_0,
     alt: "No Image Available"
   };
-  const _hoisted_9$f = ["target", "href"];
+  const _hoisted_10$b = ["target", "href"];
   const _sfc_main$n = {
     __name: "VerticalTabPresenter",
     props: {
@@ -48160,27 +48161,37 @@ ${escapeText(this.code(index, length))}
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
           vue.createElementVNode("div", _hoisted_2$k, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(publicTabs.value, (item) => {
+              var _a, _b, _c, _d, _e, _f;
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: item.title
               }, [
                 vue.createElementVNode("div", {
-                  class: vue.normalizeClass(["flex-col flex gap-1.5 cursor-pointer mb-4 group", { "border-l-4 border-brand-600": selectedItem.value === item, "border-l-4  border-gray-100": selectedItem.value !== item }]),
-                  onClick: vue.withModifiers(($event) => selectItem(item), ["prevent"])
+                  class: vue.normalizeClass(["flex-col flex gap-1.5 cursor-pointer group", { "sm:border-l-4 border-brand-600": selectedItem.value === item, "sm:border-l-4  border-navy-25": selectedItem.value !== item }]),
+                  onClick: ($event) => selectItem(item)
                 }, [
                   vue.createElementVNode("div", _hoisted_4$i, [
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass([{ "text-gray-900": selectedItem.value === item, "text-gray-600": selectedItem.value !== item }, "max-sm:text-gray-900 max-sm:bg-white max-sm:p-3 max-sm:rounded-lg max-sm:min-h-[84px] text-sm relative sm:text-lg md:text-xl font-semibold sm:mb-2 group-hover:text-gray-900 grid max-sm:grid-cols-[auto_20px] gap-2"])
+                    }, [
+                      vue.createTextVNode(vue.toDisplayString(item.title) + " ", 1),
+                      vue.createVNode(vue.unref(ArrowUpRight), { class: "sm:hidden" }),
+                      ((_b = (_a = selectedItem.value) == null ? void 0 : _a.primary_button) == null ? void 0 : _b.show) ? (vue.openBlock(), vue.createElementBlock("a", {
+                        key: 0,
+                        target: ((_d = (_c = selectedItem.value) == null ? void 0 : _c.primary_button) == null ? void 0 : _d.open_in_new_tab) ? "_blank" : "",
+                        href: ((_f = (_e = selectedItem.value) == null ? void 0 : _e.primary_button) == null ? void 0 : _f.url.startsWith("http")) ? selectedItem.value.primary_button.url : `//${selectedItem.value.primary_button.url}`,
+                        class: "absolute inset-0 sm:hidden z-10"
+                      }, null, 8, _hoisted_5$h)) : vue.createCommentVNode("", true)
+                    ], 2),
                     vue.createElementVNode("p", {
-                      class: vue.normalizeClass([{ "text-gray-900": selectedItem.value === item, "text-gray-600": selectedItem.value !== item }, "text-lg md:text-xl font-semibold mb-2 group-hover:text-gray-900"])
-                    }, vue.toDisplayString(item.title), 3),
-                    vue.createElementVNode("p", {
-                      class: vue.normalizeClass([{ "text-gray-700": selectedItem.value === item, "text-gray-400": selectedItem.value !== item }, "text-sm md:text-md font-normal group-hover:text-gray-700"]),
+                      class: vue.normalizeClass([{ "text-gray-700": selectedItem.value === item, "text-gray-400": selectedItem.value !== item }, "max-sm:hidden text-sm md:text-md font-normal group-hover:text-gray-700"]),
                       innerHTML: item.description
-                    }, null, 10, _hoisted_5$h)
+                    }, null, 10, _hoisted_6$h)
                   ])
                 ], 10, _hoisted_3$i)
               ]);
             }), 128))
           ]),
-          vue.createElementVNode("div", _hoisted_6$h, [
+          vue.createElementVNode("div", _hoisted_7$g, [
             vue.createVNode(vue.Transition, {
               name: "fade",
               mode: "out-in"
@@ -48196,8 +48207,8 @@ ${escapeText(this.code(index, length))}
                       key: 0,
                       src: selectedItem.value.featured_image,
                       alt: "Selected Item Image",
-                      class: "rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"
-                    }, null, 8, _hoisted_7$g)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_8$f)),
+                      class: "rounded-[20px] md:rounded-[40px] object-contain lg:max-h-[387px] w-full"
+                    }, null, 8, _hoisted_8$f)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_9$f)),
                     ((_d = (_c = selectedItem.value) == null ? void 0 : _c.primary_button) == null ? void 0 : _d.show) ? (vue.openBlock(), vue.createElementBlock("a", {
                       key: 2,
                       class: "text-sm md:text-md font-semibold text-brand-600 flex items-center gap-2 mt-4",
@@ -48206,7 +48217,7 @@ ${escapeText(this.code(index, length))}
                     }, [
                       vue.createTextVNode(vue.toDisplayString(((_j = (_i = selectedItem.value) == null ? void 0 : _i.primary_button) == null ? void 0 : _j.label) ?? "N/A") + " ", 1),
                       vue.createVNode(vue.unref(ArrowUpRight), { class: "w-4 h-4 md:w-5 md:h-5" })
-                    ], 8, _hoisted_9$f)) : vue.createCommentVNode("", true)
+                    ], 8, _hoisted_10$b)) : vue.createCommentVNode("", true)
                   ]))
                 ];
               }),
@@ -48217,9 +48228,9 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const VVerticalTabPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-ef885607"]]);
+  const VVerticalTabPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-85226fd9"]]);
   const _hoisted_1$F = { class: "pb-container" };
-  const _hoisted_2$j = { class: "max-md:mx-[30px] 1xl:mx-0 bg-navy-25 rounded-3xl md:rounded-[48px] p-16" };
+  const _hoisted_2$j = { class: "bg-navy-25 rounded-3xl md:rounded-[48px] py-6 px-4 lg:p-16 text-center" };
   const _sfc_main$m = {
     __name: "VTabs",
     props: {
@@ -48446,13 +48457,12 @@ ${escapeText(this.code(index, length))}
   const _hoisted_11$9 = ["innerHTML"];
   const _hoisted_12$7 = { class: "border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center" };
   const _hoisted_13$7 = ["href"];
-  const _hoisted_14$6 = { class: "absolute top-[-65px] right-4 flex gap-4" };
+  const _hoisted_14$6 = { class: "absolute max-sm:bottom-0 sm:top-[-65px] right-0 md:-right-28 lg:right-4 flex gap-4" };
   const _hoisted_15$4 = {
     key: 0,
-    class: "flex justify-center mb-[40px]"
+    class: "flex sm:justify-center mb-6 lg:mb-10"
   };
   const _hoisted_16$2 = ["href", "target"];
-  const itemsToShow = 4;
   const _sfc_main$j = {
     __name: "CarouselPresenter",
     props: {
@@ -48470,20 +48480,30 @@ ${escapeText(this.code(index, length))}
       const VCarouselPrimaryButton = vue.inject("VCarouselPrimaryButton", _sfc_main$k);
       const props = __props;
       const currentSlide = vue.ref(0);
+      const itemsToShow = vue.ref(4);
       const slides = [...((_a = props.component.content) == null ? void 0 : _a.items) || []];
       const windowWidth = vue.ref(480);
+      const slideWidth = vue.ref(480);
       vue.onMounted(() => {
         windowWidth.value = window.innerWidth;
+        adjustSlides();
         window.addEventListener("resize", updateWidth);
       });
       vue.onUnmounted(() => {
         window.removeEventListener("resize", updateWidth);
       });
+      const activeRightButton = vue.computed(() => {
+        return currentSlide.value <= slides.length - itemsToShow.value;
+      });
+      const activeLeftButton = vue.computed(() => {
+        return currentSlide.value !== 0;
+      });
       const updateWidth = () => {
         windowWidth.value = window.innerWidth;
+        adjustSlides();
       };
       const nextSlide = () => {
-        if (currentSlide.value <= slides.length - itemsToShow) {
+        if (currentSlide.value <= slides.length - itemsToShow.value) {
           currentSlide.value++;
         }
       };
@@ -48492,12 +48512,22 @@ ${escapeText(this.code(index, length))}
           currentSlide.value--;
         }
       };
+      const adjustSlides = () => {
+        if (windowWidth.value < 512) {
+          itemsToShow.value = 2;
+          slideWidth.value = windowWidth.value - 32;
+        } else if (windowWidth.value < 1120) {
+          itemsToShow.value = 2;
+        } else if (windowWidth.value < 1630) {
+          itemsToShow.value = 3;
+        }
+      };
       return (_ctx, _cache) => {
         var _a2;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
           vue.createElementVNode("div", {
             class: "slider-wrapper flex transition-transform duration-500 gap-0 mb-6",
-            style: vue.normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= 480 ? 480 : windowWidth.value) + 24)}px)` })
+            style: vue.normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= slideWidth.value ? slideWidth.value : windowWidth.value) + 24)}px)` })
           }, [
             (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(slides, (slide, index) => {
               return vue.createElementVNode("div", {
@@ -48567,16 +48597,16 @@ ${escapeText(this.code(index, length))}
           vue.createElementVNode("div", _hoisted_14$6, [
             vue.createElementVNode("button", {
               onClick: prevSlide,
-              class: "p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+              class: vue.normalizeClass(["p-2.5 bg-white text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-none": !activeLeftButton.value }])
             }, [
               vue.createVNode(vue.unref(ChevronLeft), { class: "w-6 h-6" })
-            ]),
+            ], 2),
             vue.createElementVNode("button", {
               onClick: nextSlide,
-              class: "p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+              class: vue.normalizeClass(["p-2.5 bg-white text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-auto": !activeRightButton.value }])
             }, [
               vue.createVNode(vue.unref(ChevronRight), { class: "w-6 h-6" })
-            ])
+            ], 2)
           ]),
           ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$4, [
             vue.createElementVNode("a", {
@@ -48593,7 +48623,7 @@ ${escapeText(this.code(index, length))}
     }
   };
   const _hoisted_1$x = { class: "pb-container" };
-  const _hoisted_2$g = { class: "max-md:mx-[30px] 1xl:mx-0 rounded-3xl md:rounded-[48px] pt-[40px]" };
+  const _hoisted_2$g = { class: "rounded-3xl lg:rounded-[48px] pt-6 lg:pt-10 sm:pr-28 md:pr-0" };
   const _sfc_main$i = {
     __name: "CollectionCarousel",
     props: {
@@ -48614,7 +48644,7 @@ ${escapeText(this.code(index, length))}
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["overflow-hidden", { "rounded-br-[48px] rounded-tl-[48px] bg-aqua-100": (_a = section.value) == null ? void 0 : _a.has_background }])
+          class: vue.normalizeClass(["overflow-hidden", { "rounded-br-3xl lg:rounded-br-[48px] rounded-tl-3xl lg:rounded-tl-[48px] bg-aqua-100": (_a = section.value) == null ? void 0 : _a.has_background }])
         }, [
           vue.createElementVNode("div", _hoisted_1$x, [
             vue.createElementVNode("div", _hoisted_2$g, [
@@ -48931,7 +48961,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_1$r = { class: "overflow-hidden mt-4" };
   const _hoisted_2$d = {
     key: 0,
-    class: "text-[36px] text-gray-900 font-semibold"
+    class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900"
   };
   const _hoisted_3$d = { class: "all-unset ql-editor" };
   const _hoisted_4$d = ["innerHTML"];
@@ -49060,7 +49090,7 @@ ${escapeText(this.code(index, length))}
     key: 1,
     class: "my-[44px]"
   };
-  const _hoisted_9$b = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_9$b = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_10$8 = ["innerHTML"];
   const _hoisted_11$7 = {
     key: 0,
@@ -49221,7 +49251,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "rounded-xl px-[40px] text-center mb-1 max-w-[1280px] mx-auto"
   };
-  const _hoisted_4$b = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_4$b = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_5$b = ["innerHTML"];
   const _hoisted_6$b = { key: 1 };
   const _hoisted_7$b = { class: "mt-4" };
@@ -49309,7 +49339,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto"
   };
-  const _hoisted_3$a = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_3$a = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_4$a = ["innerHTML"];
   const _hoisted_5$a = ["src"];
   const _hoisted_6$a = {
@@ -49414,7 +49444,7 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const LinkCard = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-a7422ac9"]]);
+  const LinkCard = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-af7a1782"]]);
   const _hoisted_1$n = {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -49438,7 +49468,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto"
   };
-  const _hoisted_4$9 = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_4$9 = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_5$9 = ["innerHTML"];
   const _hoisted_6$9 = ["src"];
   const _hoisted_7$9 = {
@@ -49539,7 +49569,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center"
   };
-  const _hoisted_4$8 = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_4$8 = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_5$8 = ["innerHTML"];
   const _hoisted_6$8 = ["textContent"];
   const _hoisted_7$8 = { class: "flex" };
@@ -49888,7 +49918,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "px-[40px] text-center mb-6 mx-auto"
   };
-  const _hoisted_3$5 = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_3$5 = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_4$5 = ["innerHTML"];
   const _hoisted_5$5 = {
     key: 1,
@@ -50021,7 +50051,7 @@ ${escapeText(this.code(index, length))}
           vue.createElementVNode("div", _hoisted_2$4, [
             vue.createElementVNode("div", null, [
               vue.createElementVNode("p", {
-                class: "text-[36px] font-semibold text-gray-900 mb-[48px]",
+                class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 mb-[48px]",
                 textContent: vue.toDisplayString(pricingComponent.value.title)
               }, null, 8, _hoisted_3$4),
               vue.createElementVNode("div", _hoisted_4$4, [

package/package.json

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

package/src/assets/css/style.css

@@ -110,5 +110,5 @@
 }
 
 .pb-container {
-    @apply max-w-[1640px] px-4 md:px-[120px] mx-auto w-full;
+    @apply max-w-[1640px] px-4 md:px-16 lg:px-[120px] mx-auto w-full;
 }