@dcodegroup-au/page-builder 0.7.4 → 0.7.6

package/dist/page-builder.css

@@ -733,9 +733,6 @@ select {
 .left-1\/2 {
   left: 50%;
 }
-.left-5 {
-  left: 1.25rem;
-}
 .left-\[70\%\] {
   left: 70%;
 }
@@ -778,9 +775,6 @@ select {
 .z-10 {
   z-index: 10;
 }
-.z-20 {
-  z-index: 20;
-}
 .z-50 {
   z-index: 50;
 }
@@ -831,8 +825,8 @@ select {
 .-mb-\[140px\] {
   margin-bottom: -140px;
 }
-.-mt-12 {
-  margin-top: -3rem;
+.-mt-6 {
+  margin-top: -1.5rem;
 }
 .mb-1 {
   margin-bottom: 0.25rem;
@@ -909,9 +903,6 @@ select {
 .mt-8 {
   margin-top: 2rem;
 }
-.mt-\[100px\] {
-  margin-top: 100px;
-}
 .mt-\[3px\] {
   margin-top: 3px;
 }
@@ -930,6 +921,12 @@ select {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
 }
+.line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
 .\!block {
   display: block !important;
 }
@@ -981,9 +978,6 @@ select {
 .h-8 {
   height: 2rem;
 }
-.h-9 {
-  height: 2.25rem;
-}
 .h-\[100vh\] {
   height: 100vh;
 }
@@ -1035,15 +1029,18 @@ select {
 .h-\[56px\] {
   height: 56px;
 }
+.h-\[614px\] {
+  height: 614px;
+}
 .h-\[674px\] {
   height: 674px;
 }
-.h-\[708px\] {
-  height: 708px;
-}
 .h-\[96px\] {
   height: 96px;
 }
+.h-auto {
+  height: auto;
+}
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -1063,9 +1060,6 @@ select {
 .max-h-screen {
   max-height: 100vh;
 }
-.min-h-\[136px\] {
-  min-height: 136px;
-}
 .min-h-\[260px\] {
   min-height: 260px;
 }
@@ -1259,6 +1253,9 @@ select {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .\!translate-x-3 {
   --tw-translate-x: 0.75rem !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;
@@ -1382,13 +1379,6 @@ select {
   -moz-column-gap: 100px;
        column-gap: 100px;
 }
-.gap-x-\[60px\] {
-  -moz-column-gap: 60px;
-       column-gap: 60px;
-}
-.gap-y-2 {
-  row-gap: 0.5rem;
-}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1717,6 +1707,10 @@ select {
 .p-8 {
   padding: 2rem;
 }
+.\!px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
 .\!px-6 {
   padding-left: 1.5rem !important;
   padding-right: 1.5rem !important;
@@ -1878,15 +1872,12 @@ select {
 .pr-5 {
   padding-right: 1.25rem;
 }
-.pr-8 {
-  padding-right: 2rem;
+.pt-12 {
+  padding-top: 3rem;
 }
 .pt-16 {
   padding-top: 4rem;
 }
-.pt-20 {
-  padding-top: 5rem;
-}
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1948,9 +1939,6 @@ select {
 .text-\[36px\] {
   font-size: 36px;
 }
-.text-\[40px\] {
-  font-size: 40px;
-}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2993,11 +2981,34 @@ select {
   opacity: 1;
 }
 
+@media not all and (min-width: 1280px) {
+
+  .max-xl\:h-full {
+    height: 100%;
+  }
+}
+
 @media not all and (min-width: 1024px) {
 
+  .max-lg\:hidden {
+    display: none;
+  }
+
   .max-lg\:flex-col {
     flex-direction: column;
   }
+
+  .max-lg\:flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .max-lg\:\!pb-0 {
+    padding-bottom: 0px !important;
+  }
+
+  .max-lg\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
 }
 
 @media not all and (min-width: 768px) {
@@ -3011,6 +3022,10 @@ select {
     width: 100%;
   }
 
+  .max-md\:flex-1 {
+    flex: 1 1 0%;
+  }
+
   .max-md\:flex-col {
     flex-direction: column;
   }
@@ -3020,13 +3035,43 @@ select {
     padding-right: 1rem;
   }
 
-  .max-md\:pb-4 {
+  .max-md\:\!pt-4 {
+    padding-top: 1rem !important;
+  }
+}
+
+@media not all and (min-width: 640px) {
+
+  .max-sm\:flex-col {
+    flex-direction: column;
+  }
+
+  .max-sm\:pb-4 {
     padding-bottom: 1rem;
   }
 }
 
 @media (min-width: 640px) {
 
+  .sm\:mt-14 {
+    margin-top: 3.5rem;
+  }
+
+  .sm\:line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  .sm\:h-\[240px\] {
+    height: 240px;
+  }
+
+  .sm\:h-\[550px\] {
+    height: 550px;
+  }
+
   .sm\:min-h-\[320px\] {
     min-height: 320px;
   }
@@ -3048,6 +3093,10 @@ select {
     padding-left: 1rem;
     padding-right: 1rem;
   }
+
+  .sm\:pt-10 {
+    padding-top: 2.5rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -3056,10 +3105,22 @@ select {
     right: 120px;
   }
 
+  .md\:mt-8 {
+    margin-top: 2rem;
+  }
+
   .md\:h-5 {
     height: 1.25rem;
   }
 
+  .md\:h-\[480px\] {
+    height: 480px;
+  }
+
+  .md\:h-\[806px\] {
+    height: 806px;
+  }
+
   .md\:max-h-\[387px\] {
     max-height: 387px;
   }
@@ -3116,11 +3177,6 @@ select {
     border-radius: 60px;
   }
 
-  .md\:rounded-b-\[48px\] {
-    border-bottom-right-radius: 48px;
-    border-bottom-left-radius: 48px;
-  }
-
   .md\:\!p-8 {
     padding: 2rem !important;
   }
@@ -3150,6 +3206,11 @@ select {
     padding-right: 120px;
   }
 
+  .md\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
   .md\:pl-6 {
     padding-left: 1.5rem;
   }
@@ -3188,8 +3249,8 @@ select {
 
 @media (min-width: 1024px) {
 
-  .lg\:relative {
-    position: relative;
+  .lg\:-mt-12 {
+    margin-top: -3rem;
   }
 
   .lg\:mt-\[218px\] {
@@ -3208,18 +3269,22 @@ select {
     height: 300px;
   }
 
-  .lg\:h-\[336px\] {
-    height: 336px;
-  }
-
   .lg\:h-\[480px\] {
     height: 480px;
   }
 
+  .lg\:h-\[674px\] {
+    height: 674px;
+  }
+
   .lg\:h-\[872px\] {
     height: 872px;
   }
 
+  .lg\:min-h-\[136px\] {
+    min-height: 136px;
+  }
+
   .lg\:w-1\/2 {
     width: 50%;
   }
@@ -3240,6 +3305,10 @@ select {
     max-width: 33.3%;
   }
 
+  .lg\:max-w-\[882px\] {
+    max-width: 882px;
+  }
+
   .lg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3268,6 +3337,24 @@ select {
     gap: 2rem;
   }
 
+  .lg\:gap-x-\[60px\] {
+    -moz-column-gap: 60px;
+         column-gap: 60px;
+  }
+
+  .lg\:gap-y-2 {
+    row-gap: 0.5rem;
+  }
+
+  .lg\:rounded-\[48px\] {
+    border-radius: 48px;
+  }
+
+  .lg\:rounded-b-\[48px\] {
+    border-bottom-right-radius: 48px;
+    border-bottom-left-radius: 48px;
+  }
+
   .lg\:p-8 {
     padding: 2rem;
   }
@@ -3302,6 +3389,11 @@ select {
     font-size: 48px;
   }
 
+  .lg\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
   .lg\:leading-\[60px\] {
     line-height: 60px;
   }
@@ -3317,6 +3409,10 @@ select {
     left: 120px;
   }
 
+  .xl\:h-\[336px\] {
+    height: 336px;
+  }
+
   .xl\:h-\[480px\] {
     height: 480px;
   }
@@ -3680,8 +3776,14 @@ select {
 }
 
 
-.carousel[data-v-15563c74] {
+.carousel[data-v-29ca6047] {
   margin: 1rem 0;
+  flex-direction: column;
+}
+@media not all and (min-width: 1024px) {
+[data-v-29ca6047] .carousel__slide {
+    flex-direction: column;
+}
 }
 
 .fade-enter-active[data-v-ef885607], .fade-leave-active[data-v-ef885607] {

package/dist/page-builder.es.js

@@ -449,7 +449,7 @@ const _hoisted_9$n = { class: "font-semibold text-gray-900" };
 const _hoisted_10$i = { class: "text-sm text-gray-600" };
 const _hoisted_11$g = ["disabled"];
 const _hoisted_12$d = { class: "flex flex-col gap-3" };
-const _hoisted_13$a = ["onClick"];
+const _hoisted_13$b = ["onClick"];
 const _hoisted_14$9 = ["onClick"];
 const _hoisted_15$7 = { class: "text-xs text-gray-600" };
 const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
@@ -549,7 +549,7 @@ const _sfc_main$Q = {
                         "enable-edit": true,
                         onEditItem: ($event) => edit(item, index)
                       }, null, 8, ["onRemoveItem", "onEditItem"])
-                    ], 8, _hoisted_13$a)
+                    ], 8, _hoisted_13$b)
                   ], 2);
                 }), 256))
               ])
@@ -45228,7 +45228,7 @@ const _hoisted_12$b = {
   key: 0,
   class: "flex gap-4"
 };
-const _hoisted_13$9 = { class: "flex items-center gap-2 cursor-pointer" };
+const _hoisted_13$a = { class: "flex items-center gap-2 cursor-pointer" };
 const _hoisted_14$8 = ["name", "value", "onUpdate:modelValue", "onChange"];
 const _hoisted_15$6 = {
   key: 1,
@@ -45366,7 +45366,7 @@ const _sfc_main$C = {
                 createElementVNode("div", _hoisted_11$e, [
                   !((_a2 = componentData.value) == null ? void 0 : _a2.hasOwnProperty("has_type_switcher")) || ((_b = componentData.value) == null ? void 0 : _b.has_type_switcher) ? (openBlock(), createElementBlock("div", _hoisted_12$b, [
                     (openBlock(), createElementBlock(Fragment, null, renderList(options, (option) => {
-                      return createElementVNode("label", _hoisted_13$9, [
+                      return createElementVNode("label", _hoisted_13$a, [
                         withDirectives(createElementVNode("input", {
                           name: `content_type${index}`,
                           type: "radio",
@@ -46165,7 +46165,7 @@ const _hoisted_9$h = {
 const _hoisted_10$c = ["onClick"];
 const _hoisted_11$b = { class: "flex flex-col" };
 const _hoisted_12$9 = { class: "text-sm font-medium text-gray-900" };
-const _hoisted_13$8 = { class: "flex items-center justify-between gap-3 px-[10px]" };
+const _hoisted_13$9 = { class: "flex items-center justify-between gap-3 px-[10px]" };
 const _hoisted_14$7 = { class: "flex h-full flex-1 flex-col mb-20" };
 const _hoisted_15$5 = {
   key: 0,
@@ -46302,7 +46302,7 @@ const _sfc_main$t = {
                         _cache[1] || (_cache[1] = createElementVNode("div", { class: "text-xs text-gray-600" }, "Sub-module", -1)),
                         createElementVNode("div", _hoisted_12$9, toDisplayString(component.name), 1)
                       ]),
-                      createElementVNode("div", _hoisted_13$8, [
+                      createElementVNode("div", _hoisted_13$9, [
                         createVNode(unref(ChevronRight), { class: "h-5 w-5" })
                       ])
                     ], 10, _hoisted_10$c);
@@ -47826,20 +47826,21 @@ const Slide = defineComponent({
     };
   }
 });
-const _hoisted_1$M = { class: "flex h-[708px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl md:rounded-[48px] z-10" };
-const _hoisted_2$m = { class: "lg:p-8 p-4 flex relative w-full" };
-const _hoisted_3$j = { class: "lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative z-20" };
+const _hoisted_1$M = { class: "flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10" };
+const _hoisted_2$m = { class: "flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full" };
+const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]" };
 const _hoisted_4$j = { class: "gap-2 flex z-10 mb-4" };
 const _hoisted_5$i = ["onClick"];
-const _hoisted_6$i = { class: "lg:text-[48px] text-[40px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
-const _hoisted_7$h = ["innerHTML"];
-const _hoisted_8$g = { class: "flex gap-3 mt-8 flex-col lg:flex-row" };
-const _hoisted_9$g = ["href", "target"];
+const _hoisted_6$i = { class: "text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
+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_11$a = ["src"];
-const _hoisted_12$8 = {
+const _hoisted_11$a = ["href", "target"];
+const _hoisted_12$8 = ["src"];
+const _hoisted_13$8 = {
   key: 1,
-  class: "rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover",
+  class: "rounded-[20px] lg:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover",
   src: _imports_0
 };
 const _sfc_main$s = {
@@ -47880,11 +47881,13 @@ const _sfc_main$s = {
                         }), 256)) : createCommentVNode("", true)
                       ]),
                       createElementVNode("h3", _hoisted_6$i, toDisplayString(slide == null ? void 0 : slide.title), 1),
-                      createElementVNode("p", {
-                        class: "text-lg font-normal text-navy-50",
-                        innerHTML: slide == null ? void 0 : slide.description
-                      }, null, 8, _hoisted_7$h),
-                      createElementVNode("div", _hoisted_8$g, [
+                      createElementVNode("div", _hoisted_7$h, [
+                        createElementVNode("p", {
+                          class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3",
+                          innerHTML: slide == null ? void 0 : slide.description
+                        }, null, 8, _hoisted_8$g)
+                      ]),
+                      createElementVNode("div", _hoisted_9$g, [
                         slide.secondary_button.show ? (openBlock(), createElementBlock("a", {
                           key: 0,
                           class: "text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
@@ -47892,7 +47895,7 @@ const _sfc_main$s = {
                           target: slide.secondary_button.open_in_new_tab ? "_blank" : ""
                         }, [
                           createElementVNode("span", null, toDisplayString(slide.secondary_button.label), 1)
-                        ], 8, _hoisted_9$g)) : createCommentVNode("", true),
+                        ], 8, _hoisted_10$b)) : createCommentVNode("", true),
                         slide.primary_button.show ? (openBlock(), 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",
@@ -47901,17 +47904,17 @@ const _sfc_main$s = {
                         }, [
                           createTextVNode(toDisplayString(slide.primary_button.label) + " ", 1),
                           createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-                        ], 8, _hoisted_10$b)) : createCommentVNode("", true)
+                        ], 8, _hoisted_11$a)) : createCommentVNode("", true)
                       ])
                     ]),
                     slide.featured_image ? (openBlock(), createElementBlock("img", {
                       key: 0,
                       src: slide.featured_image,
                       alt: "Slide Image",
-                      class: "rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"
-                    }, null, 8, _hoisted_11$a)) : (openBlock(), createElementBlock("img", _hoisted_12$8)),
-                    _cache[1] || (_cache[1] = createElementVNode("div", { class: "absolute inset-0 lg:hidden z-10 p-4" }, [
-                      createElementVNode("div", { class: "bg-black opacity-60 rounded-3xl md:rounded-[48px] h-full" })
+                      class: "rounded-[20px] lg:rounded-[48px] h-[200px] sm:h-[240px] md:h-[480px] lg:h-[674px] lg:max-w-[882px] lg:w-1/2 w-full object-cover"
+                    }, null, 8, _hoisted_12$8)) : (openBlock(), createElementBlock("img", _hoisted_13$8)),
+                    _cache[1] || (_cache[1] = createElementVNode("div", { class: "max-lg:hidden absolute inset-0 lg:hidden z-10 p-4" }, [
+                      createElementVNode("div", { class: "bg-black opacity-60 rounded-3xl lg:rounded-[48px] h-full" })
                     ], -1))
                   ])
                 ]),
@@ -47925,7 +47928,7 @@ const _sfc_main$s = {
     };
   }
 };
-const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-15563c74"]]);
+const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-29ca6047"]]);
 const _hoisted_1$L = ["target", "href"];
 const _sfc_main$r = {
   __name: "LinkPresenter",
@@ -47941,19 +47944,19 @@ const _sfc_main$r = {
     const isLinkGrid = component.value.type === "link_grid";
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]", { "bg-transparent !justify-start mt-8 !h-auto !gap-4": isLinkGrid }])
+        class: normalizeClass(["flex flex-wrap justify-center lg:min-h-[136px] w-full relative rounded-b-3xl lg:rounded-b-[48px] bg-navy-600 -mt-6 lg:-mt-12 pt-12 sm:pt-10 md:pt-12 max-sm:pb-4 max-lg:pb-6 px-4 gap-8 lg:gap-y-2 lg:gap-x-[60px]", { "bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-lg:!pb-0 max-md:!pt-4": isLinkGrid }])
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(component.value.data, (link) => {
           return openBlock(), createElementBlock("div", {
-            class: normalizeClass(["flex justify-center items-center", { "!block": isLinkGrid }])
+            class: normalizeClass(["flex justify-center items-center max-w-full", { "!block": isLinkGrid }])
           }, [
             createElementVNode("a", {
               target: link.open_in_new_tab ? "_blank" : "",
               href: link.url.startsWith("http") ? link.url : `//${link.url}`,
-              class: normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 h-[44px] w-max !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
+              class: normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
             }, [
               createElementVNode("span", null, toDisplayString(link.title), 1),
-              createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
+              createVNode(unref(ArrowUpRight), { class: "shrink-0 w-5 h-5" })
             ], 10, _hoisted_1$L)
           ], 2);
         }), 256))
@@ -48085,7 +48088,7 @@ const _sfc_main$o = {
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["w-full bg-navy-800 max-md:px-4 py-10 relative lg:h-[336px]", { "lg:!h-[266px]": (_a = section.value) == null ? void 0 : _a.as_cta }])
+        class: normalizeClass(["w-full bg-navy-800 max-md:px-4 py-4 md:py-10 relative xl:h-[336px]", { "lg:!h-[266px]": (_a = section.value) == null ? void 0 : _a.as_cta }])
       }, [
         ((_b = section.value) == null ? void 0 : _b.as_cta) ? (openBlock(), createBlock(unref(LeftVector), {
           key: 0,
@@ -48093,7 +48096,7 @@ const _sfc_main$o = {
         })) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_1$H, [
           createElementVNode("div", {
-            class: normalizeClass(["max-md:mx-[30px] 1xl:mx-0 relative z-10", { "text-center flex flex-col items-center": (_c = section.value) == null ? void 0 : _c.as_cta }])
+            class: normalizeClass(["relative z-10", { "text-center flex flex-col items-center": (_c = section.value) == null ? void 0 : _c.as_cta }])
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(section.value.components, (component, index) => {
               var _a2;
@@ -48109,7 +48112,7 @@ const _sfc_main$o = {
         ]),
         !((_d = section.value) == null ? void 0 : _d.as_cta) ? (openBlock(), createBlock(unref(HeaderVector), {
           key: 1,
-          class: "absolute right-0 top-0"
+          class: "absolute right-0 top-0 max-xl:h-full"
         })) : createCommentVNode("", true)
       ], 2);
     };
@@ -49041,7 +49044,7 @@ const _sfc_main$e = {
   }
 };
 const _hoisted_1$q = { class: "overflow-hidden" };
-const _hoisted_2$c = { class: "pb-container mt-4 px-4" };
+const _hoisted_2$c = { class: "pb-container mt-4" };
 const _hoisted_3$c = { class: "text-[20px] text-gray-900 font-semibold" };
 const _hoisted_4$c = ["innerHTML"];
 const _hoisted_5$c = {

package/dist/page-builder.umd.js

@@ -452,7 +452,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_10$i = { class: "text-sm text-gray-600" };
   const _hoisted_11$g = ["disabled"];
   const _hoisted_12$d = { class: "flex flex-col gap-3" };
-  const _hoisted_13$a = ["onClick"];
+  const _hoisted_13$b = ["onClick"];
   const _hoisted_14$9 = ["onClick"];
   const _hoisted_15$7 = { class: "text-xs text-gray-600" };
   const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
@@ -552,7 +552,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                           "enable-edit": true,
                           onEditItem: ($event) => edit(item, index)
                         }, null, 8, ["onRemoveItem", "onEditItem"])
-                      ], 8, _hoisted_13$a)
+                      ], 8, _hoisted_13$b)
                     ], 2);
                   }), 256))
                 ])
@@ -45231,7 +45231,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "flex gap-4"
   };
-  const _hoisted_13$9 = { class: "flex items-center gap-2 cursor-pointer" };
+  const _hoisted_13$a = { class: "flex items-center gap-2 cursor-pointer" };
   const _hoisted_14$8 = ["name", "value", "onUpdate:modelValue", "onChange"];
   const _hoisted_15$6 = {
     key: 1,
@@ -45369,7 +45369,7 @@ ${escapeText(this.code(index, length))}
                   vue.createElementVNode("div", _hoisted_11$e, [
                     !((_a2 = componentData.value) == null ? void 0 : _a2.hasOwnProperty("has_type_switcher")) || ((_b = componentData.value) == null ? void 0 : _b.has_type_switcher) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$b, [
                       (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(options, (option) => {
-                        return vue.createElementVNode("label", _hoisted_13$9, [
+                        return vue.createElementVNode("label", _hoisted_13$a, [
                           vue.withDirectives(vue.createElementVNode("input", {
                             name: `content_type${index}`,
                             type: "radio",
@@ -46168,7 +46168,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_10$c = ["onClick"];
   const _hoisted_11$b = { class: "flex flex-col" };
   const _hoisted_12$9 = { class: "text-sm font-medium text-gray-900" };
-  const _hoisted_13$8 = { class: "flex items-center justify-between gap-3 px-[10px]" };
+  const _hoisted_13$9 = { class: "flex items-center justify-between gap-3 px-[10px]" };
   const _hoisted_14$7 = { class: "flex h-full flex-1 flex-col mb-20" };
   const _hoisted_15$5 = {
     key: 0,
@@ -46305,7 +46305,7 @@ ${escapeText(this.code(index, length))}
                           _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "text-xs text-gray-600" }, "Sub-module", -1)),
                           vue.createElementVNode("div", _hoisted_12$9, vue.toDisplayString(component.name), 1)
                         ]),
-                        vue.createElementVNode("div", _hoisted_13$8, [
+                        vue.createElementVNode("div", _hoisted_13$9, [
                           vue.createVNode(vue.unref(ChevronRight), { class: "h-5 w-5" })
                         ])
                       ], 10, _hoisted_10$c);
@@ -47829,20 +47829,21 @@ ${escapeText(this.code(index, length))}
       };
     }
   });
-  const _hoisted_1$M = { class: "flex h-[708px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl md:rounded-[48px] z-10" };
-  const _hoisted_2$m = { class: "lg:p-8 p-4 flex relative w-full" };
-  const _hoisted_3$j = { class: "lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative z-20" };
+  const _hoisted_1$M = { class: "flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10" };
+  const _hoisted_2$m = { class: "flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full" };
+  const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]" };
   const _hoisted_4$j = { class: "gap-2 flex z-10 mb-4" };
   const _hoisted_5$i = ["onClick"];
-  const _hoisted_6$i = { class: "lg:text-[48px] text-[40px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
-  const _hoisted_7$h = ["innerHTML"];
-  const _hoisted_8$g = { class: "flex gap-3 mt-8 flex-col lg:flex-row" };
-  const _hoisted_9$g = ["href", "target"];
+  const _hoisted_6$i = { class: "text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
+  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_11$a = ["src"];
-  const _hoisted_12$8 = {
+  const _hoisted_11$a = ["href", "target"];
+  const _hoisted_12$8 = ["src"];
+  const _hoisted_13$8 = {
     key: 1,
-    class: "rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover",
+    class: "rounded-[20px] lg:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover",
     src: _imports_0
   };
   const _sfc_main$s = {
@@ -47883,11 +47884,13 @@ ${escapeText(this.code(index, length))}
                           }), 256)) : vue.createCommentVNode("", true)
                         ]),
                         vue.createElementVNode("h3", _hoisted_6$i, vue.toDisplayString(slide == null ? void 0 : slide.title), 1),
-                        vue.createElementVNode("p", {
-                          class: "text-lg font-normal text-navy-50",
-                          innerHTML: slide == null ? void 0 : slide.description
-                        }, null, 8, _hoisted_7$h),
-                        vue.createElementVNode("div", _hoisted_8$g, [
+                        vue.createElementVNode("div", _hoisted_7$h, [
+                          vue.createElementVNode("p", {
+                            class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3",
+                            innerHTML: slide == null ? void 0 : slide.description
+                          }, null, 8, _hoisted_8$g)
+                        ]),
+                        vue.createElementVNode("div", _hoisted_9$g, [
                           slide.secondary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
                             class: "text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
@@ -47895,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_9$g)) : vue.createCommentVNode("", true),
+                          ], 8, _hoisted_10$b)) : 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",
@@ -47904,17 +47907,17 @@ ${escapeText(this.code(index, length))}
                           }, [
                             vue.createTextVNode(vue.toDisplayString(slide.primary_button.label) + " ", 1),
                             vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-                          ], 8, _hoisted_10$b)) : vue.createCommentVNode("", true)
+                          ], 8, _hoisted_11$a)) : vue.createCommentVNode("", true)
                         ])
                       ]),
                       slide.featured_image ? (vue.openBlock(), vue.createElementBlock("img", {
                         key: 0,
                         src: slide.featured_image,
                         alt: "Slide Image",
-                        class: "rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"
-                      }, null, 8, _hoisted_11$a)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_12$8)),
-                      _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "absolute inset-0 lg:hidden z-10 p-4" }, [
-                        vue.createElementVNode("div", { class: "bg-black opacity-60 rounded-3xl md:rounded-[48px] h-full" })
+                        class: "rounded-[20px] lg:rounded-[48px] h-[200px] sm:h-[240px] md:h-[480px] lg:h-[674px] lg:max-w-[882px] lg:w-1/2 w-full object-cover"
+                      }, null, 8, _hoisted_12$8)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_13$8)),
+                      _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "max-lg:hidden absolute inset-0 lg:hidden z-10 p-4" }, [
+                        vue.createElementVNode("div", { class: "bg-black opacity-60 rounded-3xl lg:rounded-[48px] h-full" })
                       ], -1))
                     ])
                   ]),
@@ -47928,7 +47931,7 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-15563c74"]]);
+  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-29ca6047"]]);
   const _hoisted_1$L = ["target", "href"];
   const _sfc_main$r = {
     __name: "LinkPresenter",
@@ -47944,19 +47947,19 @@ ${escapeText(this.code(index, length))}
       const isLinkGrid = component.value.type === "link_grid";
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]", { "bg-transparent !justify-start mt-8 !h-auto !gap-4": isLinkGrid }])
+          class: vue.normalizeClass(["flex flex-wrap justify-center lg:min-h-[136px] w-full relative rounded-b-3xl lg:rounded-b-[48px] bg-navy-600 -mt-6 lg:-mt-12 pt-12 sm:pt-10 md:pt-12 max-sm:pb-4 max-lg:pb-6 px-4 gap-8 lg:gap-y-2 lg:gap-x-[60px]", { "bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-lg:!pb-0 max-md:!pt-4": isLinkGrid }])
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(component.value.data, (link) => {
             return vue.openBlock(), vue.createElementBlock("div", {
-              class: vue.normalizeClass(["flex justify-center items-center", { "!block": isLinkGrid }])
+              class: vue.normalizeClass(["flex justify-center items-center max-w-full", { "!block": isLinkGrid }])
             }, [
               vue.createElementVNode("a", {
                 target: link.open_in_new_tab ? "_blank" : "",
                 href: link.url.startsWith("http") ? link.url : `//${link.url}`,
-                class: vue.normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 h-[44px] w-max !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
+                class: vue.normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
               }, [
                 vue.createElementVNode("span", null, vue.toDisplayString(link.title), 1),
-                vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
+                vue.createVNode(vue.unref(ArrowUpRight), { class: "shrink-0 w-5 h-5" })
               ], 10, _hoisted_1$L)
             ], 2);
           }), 256))
@@ -48088,7 +48091,7 @@ ${escapeText(this.code(index, length))}
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["w-full bg-navy-800 max-md:px-4 py-10 relative lg:h-[336px]", { "lg:!h-[266px]": (_a = section.value) == null ? void 0 : _a.as_cta }])
+          class: vue.normalizeClass(["w-full bg-navy-800 max-md:px-4 py-4 md:py-10 relative xl:h-[336px]", { "lg:!h-[266px]": (_a = section.value) == null ? void 0 : _a.as_cta }])
         }, [
           ((_b = section.value) == null ? void 0 : _b.as_cta) ? (vue.openBlock(), vue.createBlock(vue.unref(LeftVector), {
             key: 0,
@@ -48096,7 +48099,7 @@ ${escapeText(this.code(index, length))}
           })) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_1$H, [
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["max-md:mx-[30px] 1xl:mx-0 relative z-10", { "text-center flex flex-col items-center": (_c = section.value) == null ? void 0 : _c.as_cta }])
+              class: vue.normalizeClass(["relative z-10", { "text-center flex flex-col items-center": (_c = section.value) == null ? void 0 : _c.as_cta }])
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(section.value.components, (component, index) => {
                 var _a2;
@@ -48112,7 +48115,7 @@ ${escapeText(this.code(index, length))}
           ]),
           !((_d = section.value) == null ? void 0 : _d.as_cta) ? (vue.openBlock(), vue.createBlock(vue.unref(HeaderVector), {
             key: 1,
-            class: "absolute right-0 top-0"
+            class: "absolute right-0 top-0 max-xl:h-full"
           })) : vue.createCommentVNode("", true)
         ], 2);
       };
@@ -49044,7 +49047,7 @@ ${escapeText(this.code(index, length))}
     }
   };
   const _hoisted_1$q = { class: "overflow-hidden" };
-  const _hoisted_2$c = { class: "pb-container mt-4 px-4" };
+  const _hoisted_2$c = { class: "pb-container mt-4" };
   const _hoisted_3$c = { class: "text-[20px] text-gray-900 font-semibold" };
   const _hoisted_4$c = ["innerHTML"];
   const _hoisted_5$c = {

package/package.json

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

package/src/components/presenters/components/LinkPresenter.vue

@@ -1,13 +1,16 @@
 <template>
-  <div class="flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]" :class="{'bg-transparent !justify-start mt-8 !h-auto !gap-4': isLinkGrid}">
-    <div class="flex justify-center items-center" :class="{'!block': isLinkGrid}" v-for="link in component.data">
+  <div class="flex flex-wrap justify-center lg:min-h-[136px] w-full relative rounded-b-3xl lg:rounded-b-[48px] bg-navy-600
+              -mt-6 lg:-mt-12 pt-12 sm:pt-10 md:pt-12 max-sm:pb-4 max-lg:pb-6 px-4 gap-8 lg:gap-y-2 lg:gap-x-[60px]"
+       :class="{'bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-lg:!pb-0 max-md:!pt-4': isLinkGrid}"
+  >
+    <div class="flex justify-center items-center max-w-full" :class="{'!block': isLinkGrid}" v-for="link in component.data">
       <a
           :target="link.open_in_new_tab ? '_blank' : ''"
           :href="link.url.startsWith('http') ? link.url : `//${link.url}`"
-          class="text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9"
-          :class="{'bg-white border border-gray-300 rounded-full !text-gray-700  px-4 h-[44px] w-max !mt-0 !text-base hover:bg-gray-100': isLinkGrid}"
+          class="text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300"
+          :class="{'bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100': isLinkGrid}"
       >
-        <span>{{ link.title }}</span><ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+        <span>{{ link.title }}</span><ArrowUpRight class="shrink-0 w-5 h-5"></ArrowUpRight>
       </a>
     </div>
   </div>

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

@@ -1,18 +1,20 @@
 <template>
-  <div class="flex h-[708px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl md:rounded-[48px] z-10">
+  <div class="flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10">
     <Carousel :items-to-show="1" v-model="currentSlide" :autoplay="5000" class="carousel w-full" :wrap-around="true">
       <Slide v-for="(slide, index) in slides" :key="index">
-        <div class="lg:p-8 p-4 flex relative w-full">
-          <div class="lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative z-20">
+        <div class="flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full">
+          <div class="flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]">
             <div class="gap-2 flex z-10 mb-4">
               <a v-if="slides.length > 1"
                  v-for="(slide, index) in slides"
                  @click="currentSlide = index" class="w-4 h-1 bg-navy-400 rounded-full cursor-pointer" :class="{'!w-12 !bg-white' : currentSlide === index}"
               ></a>
             </div>
-            <h3 class="lg:text-[48px] text-[40px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]">{{ slide?.title }}</h3>
-            <p class="text-lg font-normal text-navy-50" v-html="slide?.description"></p>
-            <div class="flex gap-3 mt-8 flex-col lg:flex-row">
+            <h3 class="text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]">{{ slide?.title }}</h3>
+            <div class="max-md:flex-1">
+              <p class="lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3" v-html="slide?.description"></p>
+            </div>
+            <div class="flex gap-3 md:mt-8 max-sm:flex-col">
               <a class="text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
                  :href="formatUrl(slide.secondary_button.url)"
                  v-if="slide.secondary_button.show"
@@ -32,9 +34,9 @@
               v-if="slide.featured_image"
               :src="slide.featured_image"
               alt="Slide Image"
-              class="rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"/>
-          <img v-else class="rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover" src="@/assets/img/no_image_available.jpeg">
-          <div class="absolute inset-0 lg:hidden z-10 p-4"><div class="bg-black opacity-60 rounded-3xl md:rounded-[48px] h-full"></div></div>
+              class="rounded-[20px] lg:rounded-[48px] h-[200px] sm:h-[240px] md:h-[480px] lg:h-[674px] lg:max-w-[882px] lg:w-1/2 w-full object-cover"/>
+          <img v-else class="rounded-[20px] lg:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover" src="@/assets/img/no_image_available.jpeg">
+          <div class="max-lg:hidden absolute inset-0 lg:hidden z-10 p-4"><div class="bg-black opacity-60 rounded-3xl lg:rounded-[48px] h-full"></div></div>
         </div>
       </Slide>
     </Carousel>
@@ -63,5 +65,10 @@ const slides = componentData.value.data.filter((o) => o.public);
 <style scoped>
 .carousel {
   margin: 1rem 0;
+  flex-direction: column;
+}
+
+:deep(.carousel__slide) {
+  @apply max-lg:flex-col;
 }
 </style>

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

@@ -1,8 +1,8 @@
 <template>
-  <div class="w-full bg-navy-800 max-md:px-4 py-10 relative lg:h-[336px]" :class="{'lg:!h-[266px]' : section?.as_cta}">
+  <div class="w-full bg-navy-800 max-md:px-4 py-4 md:py-10 relative xl:h-[336px]" :class="{'lg:!h-[266px]' : section?.as_cta}">
     <LeftVector class="absolute left-0 top-0 h-full max-w-full" v-if="section?.as_cta"></LeftVector>
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
-      <div class="max-md:mx-[30px] 1xl:mx-0 relative z-10" :class="{'text-center flex flex-col items-center': section?.as_cta}">
+      <div class="relative z-10" :class="{'text-center flex flex-col items-center': section?.as_cta}">
         <div v-for="(component, index) in section.components" class="w-full md:w-3/4">
           <component
               :is="currentComponent(component)"
@@ -13,7 +13,7 @@
         </div>
       </div>
     </div>
-    <HeaderVector class="absolute right-0 top-0" v-if="!section?.as_cta"></HeaderVector>
+    <HeaderVector class="absolute right-0 top-0 max-xl:h-full" v-if="!section?.as_cta"></HeaderVector>
    </div>
 </template>
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-hidden">
-    <div class="pb-container mt-4 px-4">
+    <div class="pb-container mt-4">
       <div class="grid gap-1.5 lg:gap-4"
            :style="innerWidth >= 1024 ? 'grid-template-columns: 33% auto;' : ''"
            v-if="paragraphComponent">