@dcodegroup-au/page-builder 0.8.2 → 0.8.3

package/dist/page-builder.css

@@ -1252,6 +1252,9 @@ select {
 .transform {
   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));
 }
+.cursor-default {
+  cursor: default;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1388,9 +1391,6 @@ select {
 .rounded-\[24px\] {
   border-radius: 24px;
 }
-.rounded-\[6px\] {
-  border-radius: 6px;
-}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -1465,10 +1465,6 @@ select {
 .border-none {
   border-style: none;
 }
-.border-brand-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 176 200 / var(--tw-border-opacity, 1));
-}
 .border-brand-300 {
   --tw-border-opacity: 1;
   border-color: rgb(199 138 173 / var(--tw-border-opacity, 1));
@@ -1505,22 +1501,18 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
-.border-navy-100 {
+.border-gray-blue-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(169 184 198 / var(--tw-border-opacity, 1));
+  border-color: rgb(213 217 235 / var(--tw-border-opacity, 1));
 }
-.border-navy-200 {
+.border-navy-100 {
   --tw-border-opacity: 1;
-  border-color: rgb(148 166 184 / var(--tw-border-opacity, 1));
+  border-color: rgb(169 184 198 / var(--tw-border-opacity, 1));
 }
 .border-navy-25 {
   --tw-border-opacity: 1;
   border-color: rgb(239 242 245 / var(--tw-border-opacity, 1));
 }
-.border-orange-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 219 175 / var(--tw-border-opacity, 1));
-}
 .border-transparent {
   border-color: transparent;
 }
@@ -1564,10 +1556,6 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(245 239 243 / var(--tw-bg-opacity, 1));
 }
-.bg-brand-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 222 231 / var(--tw-bg-opacity, 1));
-}
 .bg-brand-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(169 73 129 / var(--tw-bg-opacity, 1));
@@ -1600,6 +1588,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 249 252 / var(--tw-bg-opacity, 1));
+}
 .bg-navy-25 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 242 245 / var(--tw-bg-opacity, 1));
@@ -1620,10 +1612,6 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(32 62 90 / var(--tw-bg-opacity, 1));
 }
-.bg-orange-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 246 238 / var(--tw-bg-opacity, 1));
-}
 .bg-pale-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 245 244 / var(--tw-bg-opacity, 1));
@@ -1687,6 +1675,10 @@ select {
   padding-left: 0px;
   padding-right: 0px;
 }
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
@@ -2034,6 +2026,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
+.text-gray-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(54 63 114 / var(--tw-text-opacity, 1));
+}
 .text-navy-25 {
   --tw-text-opacity: 1;
   color: rgb(239 242 245 / var(--tw-text-opacity, 1));
@@ -2042,18 +2038,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(223 229 236 / var(--tw-text-opacity, 1));
 }
-.text-navy-700 {
-  --tw-text-opacity: 1;
-  color: rgb(40 77 112 / var(--tw-text-opacity, 1));
-}
 .text-navy-800 {
   --tw-text-opacity: 1;
   color: rgb(32 62 90 / var(--tw-text-opacity, 1));
 }
-.text-orange-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 56 21 / var(--tw-text-opacity, 1));
-}
 .text-success-500 {
   --tw-text-opacity: 1;
   color: rgb(23 178 106 / var(--tw-text-opacity, 1));
@@ -3907,7 +3895,7 @@ select {
   -webkit-line-clamp: 4; /* Limit the text to 3 lines */
 }
 
-.card[data-v-77dcb437] {
+.card[data-v-aab1688f] {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/page-builder.es.js

@@ -45235,8 +45235,8 @@ const _hoisted_15$7 = {
   class: "flex flex-col gap-1.5"
 };
 const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
-const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
-const _hoisted_18$2 = { key: 2 };
+const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
+const _hoisted_18$3 = { key: 2 };
 const _sfc_main$C = {
   __name: "Links",
   props: {
@@ -45416,7 +45416,7 @@ const _sfc_main$C = {
                             maxlength: ((_b2 = componentData.value) == null ? void 0 : _b2.max_title) ?? 200,
                             rows: "4",
                             class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                          }, null, 8, _hoisted_17$2)), [
+                          }, null, 8, _hoisted_17$3)), [
                             [vModelText, item.title]
                           ]) : createCommentVNode("", true)
                         ];
@@ -45436,7 +45436,7 @@ const _sfc_main$C = {
                       sites: _ctx.sites,
                       forms: __props.forms
                     }, null, 8, ["name", "type", "onUpdate:type", "url", "onUpdate:url", "openInNewTab", "onUpdate:openInNewTab", "sites", "forms"])) : createCommentVNode("", true)
-                  ])) : (openBlock(), createElementBlock("div", _hoisted_18$2, [
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_18$3, [
                     createVNode(_sfc_main$P, {
                       "is-vertical": "",
                       field: "image",
@@ -46194,8 +46194,8 @@ const _hoisted_15$6 = {
   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_17$1 = ["value"];
-const _hoisted_18$1 = {
+const _hoisted_17$2 = ["value"];
+const _hoisted_18$2 = {
   key: 1,
   class: "rounded-xl bg-gray-50 px-6 py-5"
 };
@@ -46349,7 +46349,7 @@ const _sfc_main$t = {
                       name: "url"
                     }, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(__props.breadcrumbs, (b) => {
-                        return openBlock(), createElementBlock("option", { value: b }, toDisplayString(b), 9, _hoisted_17$1);
+                        return openBlock(), createElementBlock("option", { value: b }, toDisplayString(b), 9, _hoisted_17$2);
                       }), 256))
                     ], 512), [
                       [vModelSelect, __props.modelValue.breadcrumb]
@@ -46360,7 +46360,7 @@ const _sfc_main$t = {
                 _cache[2] || (_cache[2] = createElementVNode("p", null, "This sets the section name shown in the breadcrumb (e.g. Home / Who We Are / Page). Leave blank to skip the section.", -1))
               ])
             ])) : createCommentVNode("", true),
-            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_18$1, [
+            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_18$2, [
               createVNode(Instructions)
             ])) : createCommentVNode("", true),
             (openBlock(), createBlock(resolveDynamicComponent(currentComponent.value), {
@@ -48459,7 +48459,7 @@ const _hoisted_2$h = {
 const _hoisted_3$g = ["src"];
 const _hoisted_4$g = {
   key: 1,
-  class: "flex gap-2"
+  class: "flex gap-2 mb-2"
 };
 const _hoisted_5$g = { class: "mb-2" };
 const _hoisted_6$g = ["href"];
@@ -48568,7 +48568,7 @@ const _sfc_main$j = {
                     (openBlock(true), createElementBlock(Fragment, null, renderList(slide.tags, (tag) => {
                       return openBlock(), createElementBlock("span", {
                         key: tag,
-                        class: "bg-navy-50 border border-navy-200 text-navy-700 px-2 py-0.5 rounded-[6px] text-sm"
+                        class: "border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md"
                       }, toDisplayString(tag), 1);
                     }), 128))
                   ])) : createCommentVNode("", true),
@@ -48711,27 +48711,24 @@ const _hoisted_3$f = {
 const _hoisted_4$f = ["src"];
 const _hoisted_5$f = ["onClick"];
 const _hoisted_6$f = ["src"];
-const _hoisted_7$e = ["src"];
-const _hoisted_8$d = {
-  key: 2,
-  class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4",
-  alt: "No Available",
-  src: _imports_0
-};
-const _hoisted_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
-const _hoisted_10$9 = {
+const _hoisted_7$e = ["href"];
+const _hoisted_8$d = ["src"];
+const _hoisted_9$d = ["href"];
+const _hoisted_10$9 = { class: "flex flex-col gap-2 items-start text-left w-full" };
+const _hoisted_11$8 = {
   key: 0,
   class: "flex gap-2"
 };
-const _hoisted_11$8 = ["href"];
-const _hoisted_12$6 = { class: "flex justify-between" };
-const _hoisted_13$6 = ["innerHTML"];
-const _hoisted_14$5 = { class: "text-gray-500 text-sm mb-4" };
-const _hoisted_15$4 = {
+const _hoisted_12$6 = ["href"];
+const _hoisted_13$6 = ["href"];
+const _hoisted_14$5 = { class: "flex justify-between" };
+const _hoisted_15$4 = ["innerHTML"];
+const _hoisted_16$1 = { class: "text-gray-500 text-sm mb-4" };
+const _hoisted_17$1 = {
   key: 0,
   class: "flex justify-center"
 };
-const _hoisted_16$1 = ["href", "target"];
+const _hoisted_18$1 = ["href", "target"];
 const _sfc_main$h = {
   __name: "CollectionGridPresenter",
   props: {
@@ -48815,23 +48812,39 @@ const _sfc_main$h = {
                     onClick: ($event) => togglePlayPause(index)
                   }, null, 8, ["onClick"])) : createCommentVNode("", true)
                 ], 64))
-              ])) : card.image ? (openBlock(), createElementBlock("img", {
+              ])) : card.image ? (openBlock(), createElementBlock("a", {
                 key: 1,
-                src: card.image,
-                alt: "Card Image",
-                class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4"
-              }, null, 8, _hoisted_7$e)) : (openBlock(), createElementBlock("img", _hoisted_8$d)),
-              createElementVNode("div", _hoisted_9$d, [
-                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_10$9, [
+                href: (card == null ? void 0 : card.link) ? unref(formatUrl)(card.link) : "javascript:void(0)",
+                class: "mb-4 w-full",
+                target: "_blank",
+                rel: "noopener noreferrer"
+              }, [
+                createElementVNode("img", {
+                  src: card.image,
+                  alt: "Card Image",
+                  class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
+                }, null, 8, _hoisted_8$d)
+              ], 8, _hoisted_7$e)) : (openBlock(), createElementBlock("a", {
+                key: 2,
+                href: (card == null ? void 0 : card.link) ? unref(formatUrl)(card.link) : "javascript:void(0)",
+                class: "mb-4 w-full",
+                target: "_blank",
+                rel: "noopener noreferrer"
+              }, _cache[0] || (_cache[0] = [
+                createElementVNode("img", {
+                  class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
+                  alt: "No Available",
+                  src: _imports_0
+                }, null, -1)
+              ]), 8, _hoisted_9$d)),
+              createElementVNode("div", _hoisted_10$9, [
+                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_11$8, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(card.categories, (tag) => {
-                    return openBlock(), createElementBlock("span", {
+                    return openBlock(), createElementBlock("a", {
                       key: tag,
-                      class: normalizeClass(["border px-2 py-0.5 rounded-[6px] text-sm", {
-                        "bg-navy-50 border-navy-200 text-navy-700": tag.style === "navy",
-                        "bg-brand-50 border-brand-200 text-brand-700": tag.style === "brand",
-                        "bg-orange-50 border-orange-200 text-orange-700": tag.style === "orange"
-                      }])
-                    }, toDisplayString(tag.name), 3);
+                      href: tag.link ? unref(formatUrl)(tag.link) : "javascript:void(0)",
+                      class: normalizeClass(["border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md", tag.link ? "hover:bg-gray-200" : "cursor-default"])
+                    }, toDisplayString(tag.name), 11, _hoisted_12$6);
                   }), 128))
                 ])) : createCommentVNode("", true),
                 (card == null ? void 0 : card.link) ? (openBlock(), createElementBlock("a", {
@@ -48841,20 +48854,20 @@ const _sfc_main$h = {
                   target: "_blank",
                   rel: "noopener noreferrer"
                 }, [
-                  createElementVNode("div", _hoisted_12$6, [
+                  createElementVNode("div", _hoisted_14$5, [
                     createElementVNode("span", {
                       class: "w-5/6 leading-[28px]",
                       innerHTML: card.title
-                    }, null, 8, _hoisted_13$6),
+                    }, null, 8, _hoisted_15$4),
                     createVNode(unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                   ])
-                ], 8, _hoisted_11$8)) : createCommentVNode("", true),
-                createElementVNode("p", _hoisted_14$5, toDisplayString(card.dateTime), 1)
+                ], 8, _hoisted_13$6)) : createCommentVNode("", true),
+                createElementVNode("p", _hoisted_16$1, toDisplayString(card.dateTime), 1)
               ])
             ]);
           }), 128))
         ]),
-        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
+        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_17$1, [
           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),
@@ -48862,13 +48875,13 @@ const _sfc_main$h = {
           }, [
             createTextVNode(toDisplayString(unref(button).title) + " ", 1),
             createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-          ], 8, _hoisted_16$1)
+          ], 8, _hoisted_18$1)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 };
-const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-77dcb437"]]);
+const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-aab1688f"]]);
 const _hoisted_1$u = { class: "overflow-hidden" };
 const _sfc_main$g = {
   __name: "CollectionGrid",

package/dist/page-builder.umd.js

@@ -45238,8 +45238,8 @@ ${escapeText(this.code(index, length))}
     class: "flex flex-col gap-1.5"
   };
   const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
-  const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
-  const _hoisted_18$2 = { key: 2 };
+  const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
+  const _hoisted_18$3 = { key: 2 };
   const _sfc_main$C = {
     __name: "Links",
     props: {
@@ -45419,7 +45419,7 @@ ${escapeText(this.code(index, length))}
                               maxlength: ((_b2 = componentData.value) == null ? void 0 : _b2.max_title) ?? 200,
                               rows: "4",
                               class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                            }, null, 8, _hoisted_17$2)), [
+                            }, null, 8, _hoisted_17$3)), [
                               [vue.vModelText, item.title]
                             ]) : vue.createCommentVNode("", true)
                           ];
@@ -45439,7 +45439,7 @@ ${escapeText(this.code(index, length))}
                         sites: _ctx.sites,
                         forms: __props.forms
                       }, null, 8, ["name", "type", "onUpdate:type", "url", "onUpdate:url", "openInNewTab", "onUpdate:openInNewTab", "sites", "forms"])) : vue.createCommentVNode("", true)
-                    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$2, [
+                    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$3, [
                       vue.createVNode(_sfc_main$P, {
                         "is-vertical": "",
                         field: "image",
@@ -46197,8 +46197,8 @@ ${escapeText(this.code(index, length))}
     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_17$1 = ["value"];
-  const _hoisted_18$1 = {
+  const _hoisted_17$2 = ["value"];
+  const _hoisted_18$2 = {
     key: 1,
     class: "rounded-xl bg-gray-50 px-6 py-5"
   };
@@ -46352,7 +46352,7 @@ ${escapeText(this.code(index, length))}
                         name: "url"
                       }, [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.breadcrumbs, (b) => {
-                          return vue.openBlock(), vue.createElementBlock("option", { value: b }, vue.toDisplayString(b), 9, _hoisted_17$1);
+                          return vue.openBlock(), vue.createElementBlock("option", { value: b }, vue.toDisplayString(b), 9, _hoisted_17$2);
                         }), 256))
                       ], 512), [
                         [vue.vModelSelect, __props.modelValue.breadcrumb]
@@ -46363,7 +46363,7 @@ ${escapeText(this.code(index, length))}
                   _cache[2] || (_cache[2] = vue.createElementVNode("p", null, "This sets the section name shown in the breadcrumb (e.g. Home / Who We Are / Page). Leave blank to skip the section.", -1))
                 ])
               ])) : vue.createCommentVNode("", true),
-              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$1, [
+              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$2, [
                 vue.createVNode(Instructions)
               ])) : vue.createCommentVNode("", true),
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(currentComponent.value), {
@@ -48462,7 +48462,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_3$g = ["src"];
   const _hoisted_4$g = {
     key: 1,
-    class: "flex gap-2"
+    class: "flex gap-2 mb-2"
   };
   const _hoisted_5$g = { class: "mb-2" };
   const _hoisted_6$g = ["href"];
@@ -48571,7 +48571,7 @@ ${escapeText(this.code(index, length))}
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(slide.tags, (tag) => {
                         return vue.openBlock(), vue.createElementBlock("span", {
                           key: tag,
-                          class: "bg-navy-50 border border-navy-200 text-navy-700 px-2 py-0.5 rounded-[6px] text-sm"
+                          class: "border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md"
                         }, vue.toDisplayString(tag), 1);
                       }), 128))
                     ])) : vue.createCommentVNode("", true),
@@ -48714,27 +48714,24 @@ ${escapeText(this.code(index, length))}
   const _hoisted_4$f = ["src"];
   const _hoisted_5$f = ["onClick"];
   const _hoisted_6$f = ["src"];
-  const _hoisted_7$e = ["src"];
-  const _hoisted_8$d = {
-    key: 2,
-    class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4",
-    alt: "No Available",
-    src: _imports_0
-  };
-  const _hoisted_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
-  const _hoisted_10$9 = {
+  const _hoisted_7$e = ["href"];
+  const _hoisted_8$d = ["src"];
+  const _hoisted_9$d = ["href"];
+  const _hoisted_10$9 = { class: "flex flex-col gap-2 items-start text-left w-full" };
+  const _hoisted_11$8 = {
     key: 0,
     class: "flex gap-2"
   };
-  const _hoisted_11$8 = ["href"];
-  const _hoisted_12$6 = { class: "flex justify-between" };
-  const _hoisted_13$6 = ["innerHTML"];
-  const _hoisted_14$5 = { class: "text-gray-500 text-sm mb-4" };
-  const _hoisted_15$4 = {
+  const _hoisted_12$6 = ["href"];
+  const _hoisted_13$6 = ["href"];
+  const _hoisted_14$5 = { class: "flex justify-between" };
+  const _hoisted_15$4 = ["innerHTML"];
+  const _hoisted_16$1 = { class: "text-gray-500 text-sm mb-4" };
+  const _hoisted_17$1 = {
     key: 0,
     class: "flex justify-center"
   };
-  const _hoisted_16$1 = ["href", "target"];
+  const _hoisted_18$1 = ["href", "target"];
   const _sfc_main$h = {
     __name: "CollectionGridPresenter",
     props: {
@@ -48818,23 +48815,39 @@ ${escapeText(this.code(index, length))}
                       onClick: ($event) => togglePlayPause(index)
                     }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
                   ], 64))
-                ])) : card.image ? (vue.openBlock(), vue.createElementBlock("img", {
+                ])) : card.image ? (vue.openBlock(), vue.createElementBlock("a", {
                   key: 1,
-                  src: card.image,
-                  alt: "Card Image",
-                  class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4"
-                }, null, 8, _hoisted_7$e)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_8$d)),
-                vue.createElementVNode("div", _hoisted_9$d, [
-                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$9, [
+                  href: (card == null ? void 0 : card.link) ? vue.unref(formatUrl)(card.link) : "javascript:void(0)",
+                  class: "mb-4 w-full",
+                  target: "_blank",
+                  rel: "noopener noreferrer"
+                }, [
+                  vue.createElementVNode("img", {
+                    src: card.image,
+                    alt: "Card Image",
+                    class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
+                  }, null, 8, _hoisted_8$d)
+                ], 8, _hoisted_7$e)) : (vue.openBlock(), vue.createElementBlock("a", {
+                  key: 2,
+                  href: (card == null ? void 0 : card.link) ? vue.unref(formatUrl)(card.link) : "javascript:void(0)",
+                  class: "mb-4 w-full",
+                  target: "_blank",
+                  rel: "noopener noreferrer"
+                }, _cache[0] || (_cache[0] = [
+                  vue.createElementVNode("img", {
+                    class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
+                    alt: "No Available",
+                    src: _imports_0
+                  }, null, -1)
+                ]), 8, _hoisted_9$d)),
+                vue.createElementVNode("div", _hoisted_10$9, [
+                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$8, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(card.categories, (tag) => {
-                      return vue.openBlock(), vue.createElementBlock("span", {
+                      return vue.openBlock(), vue.createElementBlock("a", {
                         key: tag,
-                        class: vue.normalizeClass(["border px-2 py-0.5 rounded-[6px] text-sm", {
-                          "bg-navy-50 border-navy-200 text-navy-700": tag.style === "navy",
-                          "bg-brand-50 border-brand-200 text-brand-700": tag.style === "brand",
-                          "bg-orange-50 border-orange-200 text-orange-700": tag.style === "orange"
-                        }])
-                      }, vue.toDisplayString(tag.name), 3);
+                        href: tag.link ? vue.unref(formatUrl)(tag.link) : "javascript:void(0)",
+                        class: vue.normalizeClass(["border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md", tag.link ? "hover:bg-gray-200" : "cursor-default"])
+                      }, vue.toDisplayString(tag.name), 11, _hoisted_12$6);
                     }), 128))
                   ])) : vue.createCommentVNode("", true),
                   (card == null ? void 0 : card.link) ? (vue.openBlock(), vue.createElementBlock("a", {
@@ -48844,20 +48857,20 @@ ${escapeText(this.code(index, length))}
                     target: "_blank",
                     rel: "noopener noreferrer"
                   }, [
-                    vue.createElementVNode("div", _hoisted_12$6, [
+                    vue.createElementVNode("div", _hoisted_14$5, [
                       vue.createElementVNode("span", {
                         class: "w-5/6 leading-[28px]",
                         innerHTML: card.title
-                      }, null, 8, _hoisted_13$6),
+                      }, null, 8, _hoisted_15$4),
                       vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                     ])
-                  ], 8, _hoisted_11$8)) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("p", _hoisted_14$5, vue.toDisplayString(card.dateTime), 1)
+                  ], 8, _hoisted_13$6)) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("p", _hoisted_16$1, vue.toDisplayString(card.dateTime), 1)
                 ])
               ]);
             }), 128))
           ]),
-          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$4, [
+          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, [
             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),
@@ -48865,13 +48878,13 @@ ${escapeText(this.code(index, length))}
             }, [
               vue.createTextVNode(vue.toDisplayString(vue.unref(button).title) + " ", 1),
               vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-            ], 8, _hoisted_16$1)
+            ], 8, _hoisted_18$1)
           ])) : vue.createCommentVNode("", true)
         ], 2);
       };
     }
   };
-  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-77dcb437"]]);
+  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-aab1688f"]]);
   const _hoisted_1$u = { class: "overflow-hidden" };
   const _sfc_main$g = {
     __name: "CollectionGrid",

package/package.json

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

package/src/components/presenters/components/CarouselPresenter.vue

@@ -20,11 +20,11 @@
                   class="rounded-[8px] h-[220px] w-full object-cover"
               />
             </div>
-            <div v-if="slide.tags && slide.tags.length" class="flex gap-2">
+            <div v-if="slide.tags && slide.tags.length" class="flex gap-2 mb-2">
               <span
                   v-for="tag in slide.tags"
                   :key="tag"
-                  class="bg-navy-50 border border-navy-200 text-navy-700 px-2 py-0.5 rounded-[6px] text-sm"
+                  class="border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md"
               >
                 {{ tag }}
               </span>

package/src/components/presenters/components/CollectionGridPresenter.vue

@@ -31,27 +31,33 @@
             </PlayButton>
           </template>
         </div>
-        <img
-            v-else-if="card.image"
-            :src="card.image"
-            alt="Card Image"
-            class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4"
-        />
-        <img v-else class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4" alt="No Available" src="@/assets/img/no_image_available.jpeg">
+        <a v-else-if="card.image"
+           :href="card?.link ? formatUrl(card.link) : 'javascript:void(0)'"
+           class="mb-4 w-full"
+           target="_blank"
+           rel="noopener noreferrer"
+        >
+          <img :src="card.image" alt="Card Image" class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl" />
+        </a>
+        <a v-else
+           :href="card?.link ? formatUrl(card.link) : 'javascript:void(0)'"
+           class="mb-4 w-full"
+           target="_blank"
+           rel="noopener noreferrer"
+        >
+          <img class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl" alt="No Available" src="@/assets/img/no_image_available.jpeg">
+        </a>
         <div class="flex flex-col gap-2 items-start text-left w-full">
           <div v-if="card.categories && card.categories.length" class="flex gap-2">
-            <span
+            <a
                 v-for="tag in card.categories"
                 :key="tag"
-                class="border px-2 py-0.5 rounded-[6px] text-sm"
-                :class="{
-                'bg-navy-50 border-navy-200 text-navy-700': tag.style === 'navy',
-                'bg-brand-50 border-brand-200 text-brand-700': tag.style === 'brand',
-                'bg-orange-50 border-orange-200 text-orange-700': tag.style === 'orange',
-              }"
+                :href="tag.link ? formatUrl(tag.link) : 'javascript:void(0)'"
+                class="border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md"
+                :class="tag.link ? 'hover:bg-gray-200' : 'cursor-default'"
             >
               {{ tag.name }}
-            </span>
+            </a>
           </div>
           <a
               v-if="card?.link"

package/tailwind.config.js

@@ -78,12 +78,26 @@ module.exports = {
         },
         yellow: {
           100: '#DAAA00',
-        }
+        },
+        "gray-blue": {
+          25: "#FCFCFD",
+          50: "#F8F9FC",
+          100: "#EAECF5",
+          200: "#D5D9EB",
+          300: "#B3B8DB",
+          400: "#717BBC",
+          500: "#4E5BA6",
+          600: "#3E4784",
+          700: "#363F72",
+          800: "#293056",
+          900: "#101323",
+          950: "#0D0F1C",
+        },
       },
     },
   },
   safelist: [
-    "md:grid-cols-2",
+    "md:grid-cols-2", "bg-gray-blue-50", "border-gray-blue-200", "text-gray-blue-700"
   ],
   plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
 };