@iamproperty/components 3.2.0 → 3.4.4

package/dist/components.es.js

@@ -1,8 +1,8 @@
-import { openBlock as o, createElementBlock as l, createElementVNode as s, toDisplayString as w, normalizeClass as v, createCommentVNode as m, Fragment as $, renderList as x, renderSlot as b, withDirectives as N, mergeProps as T, vModelDynamic as z, vModelText as J, vModelSelect as X, resolveComponent as C, createVNode as A, createTextVNode as j, normalizeStyle as ee, withModifiers as te } from "vue";
+import { openBlock as o, createElementBlock as l, createElementVNode as s, toDisplayString as w, normalizeClass as v, createCommentVNode as p, Fragment as S, renderList as x, renderSlot as b, withDirectives as N, mergeProps as T, vModelDynamic as F, vModelText as J, vModelSelect as X, resolveComponent as C, createVNode as A, createTextVNode as P, normalizeStyle as ee, withModifiers as te } from "vue";
 const g = (e, n) => {
   const t = e.__vccOpts || e;
-  for (const [c, h] of n)
-    t[c] = h;
+  for (const [d, h] of n)
+    t[d] = h;
   return t;
 }, se = {
   name: "Icon",
@@ -19,7 +19,7 @@ const g = (e, n) => {
     }
   }
 }, ae = { class: "icon" }, ie = ["xlink:href"];
-function ne(e, n, t, c, h, a) {
+function ne(e, n, t, d, h, a) {
   return o(), l("svg", ae, [
     s("title", null, w(t.id), 1),
     s("use", {
@@ -27,7 +27,7 @@ function ne(e, n, t, c, h, a) {
     }, null, 8, ie)
   ]);
 }
-const re = /* @__PURE__ */ g(se, [["render", ne], ["__file", "/Users/james/workspace/work/component-library/src/foundations/Icon/Icon.vue"]]), oe = {
+const re = /* @__PURE__ */ g(se, [["render", ne]]), oe = {
   name: "Logo",
   props: {
     id: {
@@ -52,8 +52,8 @@ const re = /* @__PURE__ */ g(se, [["render", ne], ["__file", "/Users/james/works
       return "brand brand--" + this.id;
     }
   }
-}, le = ["xlink:href"], ce = ["innerHTML"];
-function de(e, n, t, c, h, a) {
+}, le = ["xlink:href"], de = ["innerHTML"];
+function ce(e, n, t, d, h, a) {
   return o(), l("div", {
     class: v(a.className)
   }, [
@@ -66,181 +66,182 @@ function de(e, n, t, c, h, a) {
     t.desc ? (o(), l("span", {
       key: 0,
       innerHTML: t.desc
-    }, null, 8, ce)) : m("v-if", !0)
+    }, null, 8, de)) : p("", !0)
   ], 2);
 }
-const ue = /* @__PURE__ */ g(oe, [["render", de], ["__file", "/Users/james/workspace/work/component-library/src/foundations/Logo/Logo.vue"]]), O = (e) => e.charAt(0).toUpperCase() + e.slice(1), W = (e) => e.replace(/_/g, " "), fe = (e) => e.replace(/ /g, "_"), he = function(e) {
+const ue = /* @__PURE__ */ g(oe, [["render", ce]]), W = (e) => e.charAt(0).toUpperCase() + e.slice(1), K = (e) => e.replace(/_/g, " "), fe = (e) => e.replace(/ /g, "_"), he = function(e) {
   return e = e.toLowerCase(), e = fe(e), e = e.replace(/\W/g, ""), e;
 }, me = function(e) {
-  return typeof e != "string" ? !1 : !isNaN(e) && !isNaN(parseFloat(e));
+  return typeof e != "string" ? !1 : !isNaN(e) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+  !isNaN(parseFloat(e));
 }, _e = (e, n) => String(e).padStart(n, "0");
-function E(e) {
+function Z(e) {
   if (typeof e != "object")
     return !1;
-  const n = e.querySelector("thead"), t = e.querySelector("tbody"), c = t.cloneNode(!0), h = new Event("sorted"), a = new Event("filtered"), r = new Event("reordered"), i = "table_" + Math.random().toString(36).substr(2, 9);
+  const n = e.querySelector("thead"), t = e.querySelector("tbody"), d = t.cloneNode(!0), h = new Event("sorted"), a = new Event("filtered"), r = new Event("reordered"), i = "table_" + Math.random().toString(36).substr(2, 9);
   let f;
   e.setAttribute("id", i);
-  const S = function(_, u) {
-    let d = [];
+  const $ = function(m, u) {
+    let c = [];
     Array.from(t.querySelectorAll("tr")).forEach((y, L) => {
-      let k = y.querySelector('td[data-label="' + _ + '"], th[data-label="' + _ + '"]').textContent;
+      let k = y.querySelector('td[data-label="' + m + '"], th[data-label="' + m + '"]').textContent;
       me(k) && (k = _e(k, 10));
-      const F = {
+      const O = {
         index: k,
         row: y
       };
-      d.push(F);
-    }), d.sort((y, L) => y.index > L.index ? 1 : -1), u == "descending" && (d = d.reverse());
-    let p = "";
-    d.forEach((y, L) => {
-      p += y.row.outerHTML;
-    }), t.innerHTML = p, e.dispatchEvent(h);
+      c.push(O);
+    }), c.sort((y, L) => y.index > L.index ? 1 : -1), u == "descending" && (c = c.reverse());
+    let _ = "";
+    c.forEach((y, L) => {
+      _ += y.row.outerHTML;
+    }), t.innerHTML = _, e.dispatchEvent(h);
   };
-  if (e.addEventListener("click", function(_) {
-    for (var u = _.target; u && u != this; u = u.parentNode)
+  if (e.addEventListener("click", function(m) {
+    for (var u = m.target; u && u != this; u = u.parentNode)
       if (u.matches("[data-sortable]")) {
-        let d = u.getAttribute("aria-sort") == "ascending" ? "descending" : "ascending";
-        Array.from(e.querySelectorAll("[data-sortable]")).forEach((p, y) => {
-          p.setAttribute("aria-sort", "none");
-        }), u.setAttribute("aria-sort", d), e.setAttribute("data-sort", d), e.setAttribute("data-sortBy", u.textContent), S(u.textContent, d), Array.from(e.querySelectorAll("tr[draggable]")).forEach((p, y) => {
-          p.removeAttribute("draggable");
+        let c = u.getAttribute("aria-sort") == "ascending" ? "descending" : "ascending";
+        Array.from(e.querySelectorAll("[data-sortable]")).forEach((_, y) => {
+          _.setAttribute("aria-sort", "none");
+        }), u.setAttribute("aria-sort", c), e.setAttribute("data-sort", c), e.setAttribute("data-sortBy", u.textContent), $(u.textContent, c), Array.from(e.querySelectorAll("tr[draggable]")).forEach((_, y) => {
+          _.removeAttribute("draggable");
         });
         break;
       }
   }, !1), e.getAttribute("data-sortBy")) {
-    let _ = e.getAttribute("data-sort") == "ascending" ? "descending" : "ascending";
-    Array.from(e.querySelectorAll("[data-sortable]")).forEach((u, d) => {
-      u.textContent == e.getAttribute("data-sortBy") && (u.setAttribute("aria-sort", _), u.click());
+    let m = e.getAttribute("data-sort") == "ascending" ? "descending" : "ascending";
+    Array.from(e.querySelectorAll("[data-sortable]")).forEach((u, c) => {
+      u.textContent == e.getAttribute("data-sortBy") && (u.setAttribute("aria-sort", m), u.click());
     });
   }
-  const q = function(_) {
+  const q = function(m) {
     const u = document.createElement("div");
     u.classList.add("table__filters"), u.classList.add("row"), u.classList.add("pt-1"), u.classList.add("pb-3");
-    const d = Array.from(e.querySelectorAll("th[data-filterable]"));
-    let p = {};
-    d.forEach((k, F) => {
-      Array.from(e.querySelectorAll('td[data-label="' + k.textContent + '"]')).forEach((V, gi) => {
-        p[V.textContent] = V.textContent;
+    const c = Array.from(e.querySelectorAll("th[data-filterable]"));
+    let _ = {};
+    c.forEach((k, O) => {
+      Array.from(e.querySelectorAll('td[data-label="' + k.textContent + '"]')).forEach((j, gi) => {
+        _[j.textContent] = j.textContent;
       });
     });
-    const y = d.length == 1 ? "Filter by " + d[0].textContent : "Filter", L = d.length == 1 ? "d-none" : "d-sm-flex";
+    const y = c.length == 1 ? "Filter by " + c[0].textContent : "Filter", L = c.length == 1 ? "d-none" : "d-sm-flex";
     u.innerHTML = `<div class="col-sm-6 col-md-4 pb-3">
   <div class="form-control__wrapper form-control-inline mb-0">
     <label for="${i}_filter" class="form-label">${y}:</label>
     <input type="search" name="${i}_filter" id="${i}_filter" class="form-control form-control-sm" placeholder="" list="${i}_list" />
   </div>
   <datalist id="${i}_list">
-    ${Object.keys(p).map((k) => `<option value="${k}"></option>`).join("")}
+    ${Object.keys(_).map((k) => `<option value="${k}"></option>`).join("")}
   </datalist>
 </div>
 <div class="col-md-8 align-items-center pb-3 ${L}">
-  ${'<span class="pe-3 text-nowrap h5 mb-0">Filter by: </span>' + d.map((k) => `<div class="form-check pe-3 mt-0 mb-0"><input class="form-check-input" type="checkbox" id="${i}_${k.textContent.replace(" ", "_").toLowerCase()}" checked="checked" /><label class="form-check-label text-nowrap" for="${i}_${k.textContent.replace(" ", "_").toLowerCase()}">${k.textContent}</label></div>`).join("")}
+  ${'<span class="pe-3 text-nowrap h5 mb-0">Filter by: </span>' + c.map((k) => `<div class="form-check pe-3 mt-0 mb-0"><input class="form-check-input" type="checkbox" id="${i}_${k.textContent.replace(" ", "_").toLowerCase()}" checked="checked" /><label class="form-check-label text-nowrap" for="${i}_${k.textContent.replace(" ", "_").toLowerCase()}">${k.textContent}</label></div>`).join("")}
 </div>`, e.prepend(u);
-  }, M = function(_) {
+  }, M = function(m) {
     let u = [];
-    Array.from(c.querySelectorAll("tr")).forEach((p, y) => {
+    Array.from(d.querySelectorAll("tr")).forEach((_, y) => {
       let L = "";
-      if (Array.from(e.querySelectorAll('[type="checkbox"]:checked + label')).forEach((k, F) => {
-        L += p.querySelector('td[data-label="' + k.textContent + '"]').textContent + " | ";
-      }), L.indexOf(_) >= 0) {
-        const k = { row: p };
+      if (Array.from(e.querySelectorAll('[type="checkbox"]:checked + label')).forEach((k, O) => {
+        L += _.querySelector('td[data-label="' + k.textContent + '"]').textContent + " | ";
+      }), L.indexOf(m) >= 0) {
+        const k = { row: _ };
         u.push(k);
       }
     });
-    let d = "";
-    u.forEach((p, y) => {
-      d += p.row.outerHTML;
-    }), t.innerHTML = d, e.dispatchEvent(a);
-  }, I = function() {
-    let _ = [];
-    Array.from(e.querySelectorAll('[type="checkbox"]:checked + label')).forEach((p, y) => {
-      _.push(p.textContent);
+    let c = "";
+    u.forEach((_, y) => {
+      c += _.row.outerHTML;
+    }), t.innerHTML = c, e.dispatchEvent(a);
+  }, z = function() {
+    let m = [];
+    Array.from(e.querySelectorAll('[type="checkbox"]:checked + label')).forEach((_, y) => {
+      m.push(_.textContent);
     });
     let u = [];
-    _.forEach((p, y) => {
-      Array.from(e.querySelectorAll('td[data-label="' + p + '"]')).forEach((L, k) => {
+    m.forEach((_, y) => {
+      Array.from(e.querySelectorAll('td[data-label="' + _ + '"]')).forEach((L, k) => {
         u[L.textContent] = L.textContent;
       });
     });
-    let d = e.querySelector("datalist");
-    d.innerHTML = Object.keys(u).map((p) => `<option value="${p}"></option>`).join("");
+    let c = e.querySelector("datalist");
+    c.innerHTML = Object.keys(u).map((_) => `<option value="${_}"></option>`).join("");
   };
-  Array.from(e.querySelectorAll("[data-filterable]")).length && (q(e, Array.from(e.querySelectorAll("[data-filterable]")).length), e.addEventListener("keyup", function(_) {
-    for (var u = _.target; u && u != this; u = u.parentNode)
+  Array.from(e.querySelectorAll("[data-filterable]")).length && (q(e, Array.from(e.querySelectorAll("[data-filterable]")).length), e.addEventListener("keyup", function(m) {
+    for (var u = m.target; u && u != this; u = u.parentNode)
       if (u.matches('input[type="search"]')) {
-        const d = u.value;
-        M(d);
+        const c = u.value;
+        M(c);
       }
-  }), e.addEventListener("change", function(_) {
-    for (var u = _.target; u && u != this; u = u.parentNode)
+  }), e.addEventListener("change", function(m) {
+    for (var u = m.target; u && u != this; u = u.parentNode)
       if (u.matches('input[type="search"]')) {
-        const d = u.value;
-        M(d);
+        const c = u.value;
+        M(c);
       }
-  }), e.addEventListener("change", function(_) {
-    for (var u = _.target; u && u != this; u = u.parentNode)
+  }), e.addEventListener("change", function(m) {
+    for (var u = m.target; u && u != this; u = u.parentNode)
       if (u.matches('input[type="checkbox"]')) {
-        const d = e.querySelector('input[type="search"]').value;
-        M(d), I();
+        const c = e.querySelector('input[type="search"]').value;
+        M(c), z();
       }
   }));
-  const H = function(_, u) {
-    let d = document.getElementById(i + "_style");
-    d == null && (d = document.createElement("style"), d.setAttribute("id", i + "_style"));
-    const p = _ * (u - 1) + 1, y = _ * u;
-    d.innerHTML = `
+  const H = function(m, u) {
+    let c = document.getElementById(i + "_style");
+    c == null && (c = document.createElement("style"), c.setAttribute("id", i + "_style"));
+    const _ = m * (u - 1) + 1, y = m * u;
+    c.innerHTML = `
     #${i} tbody tr {
       display: none;
     }
-    #${i} tbody tr:nth-child(${p}),
-    #${i} tbody tr:nth-child(${p}) ~ tr{
+    #${i} tbody tr:nth-child(${_}),
+    #${i} tbody tr:nth-child(${_}) ~ tr{
       display: block;
     }
     @media screen and (min-width: 36em) {
-      #${i} tbody tr:nth-child(${p}),
-      #${i} tbody tr:nth-child(${p}) ~ tr{
+      #${i} tbody tr:nth-child(${_}),
+      #${i} tbody tr:nth-child(${_}) ~ tr{
         display: table-row;
       }
     }
     #${i} tbody tr:nth-child(${y}) ~ tr{
       display: none;
     }
-    `, e.append(d);
+    `, e.append(c);
   };
   if (e.getAttribute("data-show")) {
-    const _ = parseInt(e.getAttribute("data-show")), u = parseInt(e.getAttribute("data-page")) ? parseInt(e.getAttribute("data-page")) : 1, d = e.querySelectorAll("tbody tr").length;
-    _ < d && (H(_, u), K(i, e, _, u, d), D(i, e, _, u, d), e.addEventListener("change", function(p) {
-      for (var y = p.target; y && y != this; y = y.parentNode)
-        y.matches('.table__pagination input[type="number"]') && (H(y.value, u), D(i, e, y.value, u, d), e.setAttribute("data-show", y.value));
-    }), e.addEventListener("click", function(p) {
-      for (var y = p.target; y && y != this; y = y.parentNode)
-        y.matches(".page-item:not(.active):not(.disabled) .page-link") && (H(e.getAttribute("data-show"), y.getAttribute("data-page")), D(i, e, e.getAttribute("data-show"), y.getAttribute("data-page"), d));
-    }, !1), e.addEventListener("change", function(p) {
-      for (var y = p.target; y && y != this; y = y.parentNode)
-        y.matches(".table__pagination select") && (H(e.getAttribute("data-show"), y.value), D(i, e, e.getAttribute("data-show"), y.value, d));
+    const m = parseInt(e.getAttribute("data-show")), u = parseInt(e.getAttribute("data-page")) ? parseInt(e.getAttribute("data-page")) : 1, c = e.querySelectorAll("tbody tr").length;
+    m < c && (H(m, u), U(i, e, m, u, c), D(i, e, m, u, c), e.addEventListener("change", function(_) {
+      for (var y = _.target; y && y != this; y = y.parentNode)
+        y.matches('.table__pagination input[type="number"]') && (H(y.value, u), D(i, e, y.value, u, c), e.setAttribute("data-show", y.value));
+    }), e.addEventListener("click", function(_) {
+      for (var y = _.target; y && y != this; y = y.parentNode)
+        y.matches(".page-item:not(.active):not(.disabled) .page-link") && (H(e.getAttribute("data-show"), y.getAttribute("data-page")), D(i, e, e.getAttribute("data-show"), y.getAttribute("data-page"), c));
+    }, !1), e.addEventListener("change", function(_) {
+      for (var y = _.target; y && y != this; y = y.parentNode)
+        y.matches(".table__pagination select") && (H(e.getAttribute("data-show"), y.value), D(i, e, e.getAttribute("data-show"), y.value, c));
     }));
   }
-  function Y(_) {
-    _.dataTransfer.setData("text/plain", _.target.id), f = _.target, _.target.classList.add("tr--dragging");
+  function Y(m) {
+    m.dataTransfer.setData("text/plain", m.target.id), f = m.target, m.target.classList.add("tr--dragging");
   }
-  const U = function() {
-    Array.from(t.querySelectorAll("tr")).forEach((_, u) => {
-      if (_.querySelector('[data-label="Order"]') == null) {
-        const d = document.createElement("th");
-        d.innerHTML = u + 1, d.setAttribute("data-label", "Order"), _.prepend(d);
+  const V = function() {
+    Array.from(t.querySelectorAll("tr")).forEach((m, u) => {
+      if (m.querySelector('[data-label="Order"]') == null) {
+        const c = document.createElement("th");
+        c.innerHTML = u + 1, c.setAttribute("data-label", "Order"), m.prepend(c);
       }
-      _.setAttribute("id", i + "_row_" + (u + 1)), _.setAttribute("data-order", u + 1), _.setAttribute("draggable", "true"), _.addEventListener("dragstart", Y);
+      m.setAttribute("id", i + "_row_" + (u + 1)), m.setAttribute("data-order", u + 1), m.setAttribute("draggable", "true"), m.addEventListener("dragstart", Y);
     });
   };
   if (e.getAttribute("data-reorder") && e.getAttribute("data-reorder") != "false") {
-    const _ = document.createElement("th");
-    _.innerHTML = "Order", _.title = "Click here to enable re-ordering via drag and drop", _.classList.add("table-order-reset"), n.querySelector("tr").prepend(_), U(), e.addEventListener("click", function(u) {
-      for (var d = u.target; d && d != this; d = d.parentNode)
-        if (d.matches(".table-order-reset")) {
-          Array.from(e.querySelectorAll("[data-sortable]")).forEach((p, y) => {
-            p.setAttribute("aria-sort", "none");
-          }), e.removeAttribute("data-sort"), e.removeAttribute("data-sortBy"), S("Order", "ascending"), Array.from(e.querySelectorAll("tbody tr")).forEach((p, y) => {
-            p.setAttribute("draggable", "true");
+    const m = document.createElement("th");
+    m.innerHTML = "Order", m.title = "Click here to enable re-ordering via drag and drop", m.classList.add("table-order-reset"), n.querySelector("tr").prepend(m), V(), e.addEventListener("click", function(u) {
+      for (var c = u.target; c && c != this; c = c.parentNode)
+        if (c.matches(".table-order-reset")) {
+          Array.from(e.querySelectorAll("[data-sortable]")).forEach((_, y) => {
+            _.setAttribute("aria-sort", "none");
+          }), e.removeAttribute("data-sort"), e.removeAttribute("data-sortBy"), $("Order", "ascending"), Array.from(e.querySelectorAll("tbody tr")).forEach((_, y) => {
+            _.setAttribute("draggable", "true");
           });
           break;
         }
@@ -248,41 +249,41 @@ function E(e) {
       u.preventDefault();
     }, !1), document.addEventListener("dragenter", function(u) {
       u.preventDefault(), u.dataTransfer.dropEffect = "move";
-      for (var d = u.target; d && d != this; d = d.parentNode)
-        d.matches("[data-reorder] tbody tr") && d.classList.add("tr--dropable");
+      for (var c = u.target; c && c != this; c = c.parentNode)
+        c.matches("[data-reorder] tbody tr") && c.classList.add("tr--dropable");
     }, !1), document.addEventListener("dragleave", function(u) {
       u.preventDefault();
-      for (var d = u.target; d && d != this; d = d.parentNode)
-        d.matches("[data-reorder] tbody tr") && d.classList.remove("tr--dropable");
+      for (var c = u.target; c && c != this; c = c.parentNode)
+        c.matches("[data-reorder] tbody tr") && c.classList.remove("tr--dropable");
     }, !1), document.addEventListener("drop", function(u) {
       u.preventDefault();
-      for (var d = u.target; d && d != this; d = d.parentNode)
-        if (d.matches("[data-reorder] tbody tr")) {
-          d.parentNode != null && f.parentNode != null && d != f && (f.parentNode.removeChild(f), f.getAttribute("data-order") > d.getAttribute("data-order") ? d.parentNode.insertBefore(f, d) : d.parentNode.insertBefore(f, d.nextElementSibling), Array.from(t.querySelectorAll("tr")).forEach((p, y) => {
-            p.classList.remove("tr--dragging"), p.classList.remove("tr--dropable"), p.querySelector("th").innerHTML = y + 1, p.setAttribute("data-order", y + 1);
+      for (var c = u.target; c && c != this; c = c.parentNode)
+        if (c.matches("[data-reorder] tbody tr")) {
+          c.parentNode != null && f.parentNode != null && c != f && (f.parentNode.removeChild(f), f.getAttribute("data-order") > c.getAttribute("data-order") ? c.parentNode.insertBefore(f, c) : c.parentNode.insertBefore(f, c.nextElementSibling), Array.from(t.querySelectorAll("tr")).forEach((_, y) => {
+            _.classList.remove("tr--dragging"), _.classList.remove("tr--dropable"), _.querySelector("th").innerHTML = y + 1, _.setAttribute("data-order", y + 1);
           }), e.dispatchEvent(r));
           break;
         }
     }, !1);
   }
-  e.addEventListener("filtered", function(_) {
-    if (e.getAttribute("data-sortBy") && e.getAttribute("data-sort") && S(e.getAttribute("data-sortBy"), e.getAttribute("data-sort")), e.getAttribute("data-show")) {
-      const u = parseInt(e.getAttribute("data-show")), d = e.querySelectorAll("tbody tr").length, p = e.querySelector(".table__pagination");
-      p != null && p.remove(), u < d && (H(u, 1), K(i, e, u, 1, d), D(i, e, u, 1, d));
+  e.addEventListener("filtered", function(m) {
+    if (e.getAttribute("data-sortBy") && e.getAttribute("data-sort") && $(e.getAttribute("data-sortBy"), e.getAttribute("data-sort")), e.getAttribute("data-show")) {
+      const u = parseInt(e.getAttribute("data-show")), c = e.querySelectorAll("tbody tr").length, _ = e.querySelector(".table__pagination");
+      _ != null && _.remove(), u < c && (H(u, 1), U(i, e, u, 1, c), D(i, e, u, 1, c));
     }
-    e.getAttribute("data-reorder") && U();
-  }, !1), e.addEventListener("sorted", function(_) {
-    e.getAttribute("data-reorder") && U();
-  }, !1), e.addEventListener("populated", function(_) {
+    e.getAttribute("data-reorder") && V();
+  }, !1), e.addEventListener("sorted", function(m) {
+    e.getAttribute("data-reorder") && V();
+  }, !1), e.addEventListener("populated", function(m) {
     var u = e.querySelector(".table__filters");
     u.remove();
-    var d = e.querySelector(".table__pagination");
-    d.remove();
-    var p = e.cloneNode(!0);
-    e.parentNode.replaceChild(p, e), E(p);
+    var c = e.querySelector(".table__pagination");
+    c.remove();
+    var _ = e.cloneNode(!0);
+    e.parentNode.replaceChild(_, e), Z(_);
   }, !1);
 }
-const K = function(e, n, t, c, h) {
+const U = function(e, n, t, d, h) {
   const a = document.createElement("div");
   a.classList.add("table__pagination"), a.classList.add("row"), a.classList.add("pt-3"), a.classList.add("pb-3"), a.innerHTML = `<div class="col mw-fit-content mb-3">
 <div class="form-control__wrapper form-control-inline mb-0">
@@ -298,7 +299,7 @@ ${h > 20 ? '<option value="20">20</option>' : ""}
 </div>
 <div class="col mw-fit-content me-auto d-flex align-items-center mb-3"><span class="label">per page</span></div>
 <div class="col mw-fit-content d-sm-flex justify-content-end align-items-center" id="${e}_paginationBtns"></div>`, n.append(a);
-}, D = function(e, n, t, c, h) {
+}, D = function(e, n, t, d, h) {
   const a = document.getElementById(e + "_paginationBtns");
   if (a == null)
     return !1;
@@ -308,16 +309,16 @@ ${h > 20 ? '<option value="20">20</option>' : ""}
   else if (r < 5) {
     let i = "";
     for (let f = 1; f <= r; f++)
-      f == c ? i += `<li class="page-item active" aria-current="page"><span class="page-link">${f}</span></li>` : i += `<li class="page-item"><button class="page-link" data-page="${f}">${f}</button></li>`;
+      f == d ? i += `<li class="page-item active" aria-current="page"><span class="page-link">${f}</span></li>` : i += `<li class="page-item"><button class="page-link" data-page="${f}">${f}</button></li>`;
     a.innerHTML = `<span class="pe-2 mb-3">Page: </span><ul class="pagination mb-3">
-      ${c == 1 ? '<li class="page-item disabled"><span class="page-link">Previous</span></li>' : `<li class="page-item"><button class="page-link" data-page="${parseInt(c) - 1}">Previous</button></li>`}
+      ${d == 1 ? '<li class="page-item disabled"><span class="page-link">Previous</span></li>' : `<li class="page-item"><button class="page-link" data-page="${parseInt(d) - 1}">Previous</button></li>`}
       ${i}
-      ${c == r ? '<li class="page-item disabled"><span class="page-link">Next</span></li>' : `<li class="page-item"><button class="page-link" data-page="${parseInt(c) + 1}">Next</button></li>`}
+      ${d == r ? '<li class="page-item disabled"><span class="page-link">Next</span></li>' : `<li class="page-item"><button class="page-link" data-page="${parseInt(d) + 1}">Next</button></li>`}
     </ul>`;
   } else {
     let i = "";
     for (let f = 1; f <= r; f++)
-      f == c ? i += `<option value="${f}" selected>Page ${f}</option>` : i += `<option value="${f}">Page ${f}</option>`;
+      f == d ? i += `<option value="${f}" selected>Page ${f}</option>` : i += `<option value="${f}">Page ${f}</option>`;
     a.innerHTML = `
 <div class="form-control__wrapper page-number mb-2">
 <select class="form-select">
@@ -328,9 +329,9 @@ ${i}
   }
 };
 let G = function(e) {
-  return typeof e != "string" ? e : (e = e.replace("\xA3", ""), e = e.replace("%", ""), Number.isNaN(Number.parseFloat(e)) ? 0 : Number.parseFloat(e));
+  return typeof e != "string" ? e : (e = e.replace("£", ""), e = e.replace("%", ""), Number.isNaN(Number.parseFloat(e)) ? 0 : Number.parseFloat(e));
 };
-const pe = {
+const ye = {
   name: "Table",
   props: {
     reorder: {
@@ -368,7 +369,7 @@ const pe = {
   },
   computed: {
     cellHeading() {
-      return (e) => `${O(W(e))}`;
+      return (e) => `${W(K(e))}`;
     },
     numericValue() {
       return (e) => (e = G(e), e);
@@ -376,7 +377,7 @@ const pe = {
   },
   mounted() {
     this.$nextTick(function() {
-      E(this.$refs.wrapper), this.$el.addEventListener("sorted", function(e) {
+      Z(this.$refs.wrapper), this.$el.addEventListener("sorted", function(e) {
         console.log("Table sorted");
       }, !1), this.$el.addEventListener("filtered", function(e) {
         console.log("Table filtered");
@@ -386,16 +387,16 @@ const pe = {
   updated() {
     this.$nextTick(function() {
       let e = this.$refs.wrapper.querySelector("tbody"), n = "";
-      this.items.forEach((c, h) => {
-        let a = c.rowid ? c.rowid : "";
-        c = Object.fromEntries(Object.entries(c).filter(([r]) => r !== "rowid")), n += `<tr data-row-id="${a}">${Object.keys(c).map((r) => `<td data-label="${O(W(r))}" data-numeric="${G(c[r])}">${c[r]}</td>`).join("")}</tr>`;
+      this.items.forEach((d, h) => {
+        let a = d.rowid ? d.rowid : "";
+        d = Object.fromEntries(Object.entries(d).filter(([r]) => r !== "rowid")), n += `<tr data-row-id="${a}">${Object.keys(d).map((r) => `<td data-label="${W(K(r))}" data-numeric="${G(d[r])}">${d[r]}</td>`).join("")}</tr>`;
       }), e.innerHTML = n;
       const t = new Event("filtered");
       this.$refs.wrapper.dispatchEvent(t);
     });
   }
-}, ye = ["data-sortby", "data-sort", "data-show", "data-page", "data-reorder"], be = { key: 0 }, ve = ["data-sortable", "data-filterable"], ge = { key: 1 }, we = ["data-row-id"], ke = ["innerHTML", "data-label", "data-numeric"];
-function Se(e, n, t, c, h, a) {
+}, pe = ["data-sortby", "data-sort", "data-show", "data-page", "data-reorder"], be = { key: 0 }, ve = ["data-sortable", "data-filterable"], ge = { key: 1 }, we = ["data-row-id"], ke = ["innerHTML", "data-label", "data-numeric"];
+function $e(e, n, t, d, h, a) {
   return o(), l("div", {
     class: "table__wrapper",
     ref: "wrapper",
@@ -410,31 +411,31 @@ function Se(e, n, t, c, h, a) {
         s("tr", {
           class: v(t.headingclass)
         }, [
-          (o(!0), l($, null, x(t.fields, (r) => (o(), l("th", {
+          (o(!0), l(S, null, x(t.fields, (r) => (o(), l("th", {
             key: r.key,
             "data-sortable": r.sortable,
             "data-filterable": r.filterable
           }, w(a.cellHeading(r.key)), 9, ve))), 128))
         ], 2)
-      ])) : m("v-if", !0),
+      ])) : p("", !0),
       t.items ? (o(), l("tbody", ge, [
-        (o(!0), l($, null, x(t.items, (r, i) => (o(), l("tr", {
+        (o(!0), l(S, null, x(t.items, (r, i) => (o(), l("tr", {
           key: i,
           "data-row-id": r.rowid
         }, [
-          (o(!0), l($, null, x(Object.fromEntries(Object.entries(r).filter(([f]) => f !== "rowid")), (f, S) => (o(), l("td", {
-            key: S,
+          (o(!0), l(S, null, x(Object.fromEntries(Object.entries(r).filter(([f]) => f !== "rowid")), (f, $) => (o(), l("td", {
+            key: $,
             innerHTML: f,
-            "data-label": a.cellHeading(S),
+            "data-label": a.cellHeading($),
             "data-numeric": a.numericValue(f)
           }, null, 8, ke))), 128))
         ], 8, we))), 128))
-      ])) : m("v-if", !0)
+      ])) : p("", !0)
     ]),
     b(e.$slots, "default")
-  ], 8, ye);
+  ], 8, pe);
 }
-const R = /* @__PURE__ */ g(pe, [["render", Se], ["__file", "/Users/james/workspace/work/component-library/src/elements/Table/Table.vue"]]), Ae = {
+const E = /* @__PURE__ */ g(ye, [["render", $e]]), Ae = {
   name: "Input",
   props: {
     value: {
@@ -618,14 +619,14 @@ const R = /* @__PURE__ */ g(pe, [["render", Se], ["__file", "/Users/james/worksp
       this.$emit("bus");
     }
   }
-}, $e = ["for", "innerHTML", "title"], xe = ["innerHTML"], qe = ["innerHTML"], Le = ["type", "name", "id", "pattern", "list"], Te = ["type", "name", "id", "pattern"], Me = {
+}, Se = ["for", "innerHTML", "title"], xe = ["innerHTML"], qe = ["innerHTML"], Le = ["type", "name", "id", "pattern", "list"], Te = ["type", "name", "id", "pattern"], Me = {
   key: 5,
   class: "input-group"
 }, Ce = ["type", "name", "id", "pattern", "list"], He = { class: "input-group-text border-0 col-2 col-sm-1 px-0" }, Ne = {
   key: 6,
   class: "input-group"
-}, De = ["type", "name", "id", "pattern", "list"], Be = { class: "input-group-text flex-fill" }, je = ["type", "name", "id", "pattern"], Pe = ["value"], Ie = ["id"], Ue = ["value"], Fe = ["type", "name", "id"], ze = ["for", "innerHTML"], Ve = ["type", "name", "id"], Oe = ["for", "innerHTML"], We = ["innerHTML"];
-function Ke(e, n, t, c, h, a) {
+}, De = ["type", "name", "id", "pattern", "list"], Be = { class: "input-group-text flex-fill" }, Pe = ["type", "name", "id", "pattern"], Ie = ["value"], ze = ["id"], Ve = ["value"], Oe = ["type", "name", "id"], Fe = ["for", "innerHTML"], je = ["type", "name", "id"], We = ["for", "innerHTML"], Ke = ["innerHTML"];
+function Ue(e, n, t, d, h, a) {
   return o(), l("div", {
     class: v(a.wrapperClass()),
     ref: "wrapper"
@@ -636,21 +637,19 @@ function Ke(e, n, t, c, h, a) {
       for: t.id,
       innerHTML: a.displayLabel(),
       title: t.title
-    }, null, 10, $e)) : m("v-if", !0),
-    m(" Prefix and Suffix "),
+    }, null, 10, Se)) : p("", !0),
     t.prefix ? (o(), l("span", {
       key: 1,
       class: v(`prefix ${this.prefixClass} ${t.size ? `prefix-${t.size}` : ""}`),
       innerHTML: t.prefix,
       role: "presentation"
-    }, null, 10, xe)) : m("v-if", !0),
+    }, null, 10, xe)) : p("", !0),
     t.suffix ? (o(), l("span", {
       key: 2,
       class: v(`suffix ${this.suffixClass} ${t.size ? `suffix-${t.size}` : ""}`),
       innerHTML: t.suffix,
       role: "presentation"
-    }, null, 10, qe)) : m("v-if", !0),
-    m(" Standard input field "),
+    }, null, 10, qe)) : p("", !0),
     a.isInput() ? N((o(), l("input", T({
       key: 3,
       "onUpdate:modelValue": n[0] || (n[0] = (r) => a.inputVal = r),
@@ -663,9 +662,8 @@ function Ke(e, n, t, c, h, a) {
     }, e.$attrs, {
       onKeyup: n[1] || (n[1] = (...r) => a.inputKeyup && a.inputKeyup(...r))
     }), null, 16, Le)), [
-      [z, a.inputVal]
-    ]) : m("v-if", !0),
-    m(" Textarea "),
+      [F, a.inputVal]
+    ]) : p("", !0),
     t.type == "textarea" ? N((o(), l("textarea", T({
       key: 4,
       "onUpdate:modelValue": n[2] || (n[2] = (r) => a.inputVal = r),
@@ -676,8 +674,7 @@ function Ke(e, n, t, c, h, a) {
       pattern: a.needPattern()
     }, e.$attrs), null, 16, Te)), [
       [J, a.inputVal]
-    ]) : m("v-if", !0),
-    m(" Range "),
+    ]) : p("", !0),
     t.type == "range" ? (o(), l("div", Me, [
       N(s("input", T({
         "onUpdate:modelValue": n[3] || (n[3] = (r) => a.inputVal = r),
@@ -688,11 +685,10 @@ function Ke(e, n, t, c, h, a) {
         pattern: a.needPattern(),
         list: a.hasOptions()
       }, e.$attrs, { oninput: "this.nextElementSibling.value=this.value;" }), null, 16, Ce), [
-        [z, a.inputVal]
+        [F, a.inputVal]
       ]),
       s("output", He, w(t.value), 1)
-    ])) : m("v-if", !0),
-    m(" Color picker "),
+    ])) : p("", !0),
     t.type == "color" ? (o(), l("div", Ne, [
       N(s("input", T({
         "onUpdate:modelValue": n[4] || (n[4] = (r) => a.inputVal = r),
@@ -703,11 +699,10 @@ function Ke(e, n, t, c, h, a) {
         pattern: a.needPattern(),
         list: a.hasOptions()
       }, e.$attrs, { oninput: "this.nextElementSibling.value=this.value;" }), null, 16, De), [
-        [z, a.inputVal]
+        [F, a.inputVal]
       ]),
       s("output", Be, w(t.value ? e.vale : "#000000"), 1)
-    ])) : m("v-if", !0),
-    m(" Select/dropdown "),
+    ])) : p("", !0),
     t.type == "select" ? N((o(), l("select", T({
       key: 7,
       "onUpdate:modelValue": n[5] || (n[5] = (r) => a.inputVal = r),
@@ -717,37 +712,35 @@ function Ke(e, n, t, c, h, a) {
       id: t.id,
       pattern: a.needPattern()
     }, e.$attrs), [
-      (o(!0), l($, null, x(t.options, (r, i) => (o(), l("option", {
+      (o(!0), l(S, null, x(t.options, (r, i) => (o(), l("option", {
         key: i,
         value: r.value
-      }, w(r.display ? r.display : r.value), 9, Pe))), 128))
-    ], 16, je)), [
+      }, w(r.display ? r.display : r.value), 9, Ie))), 128))
+    ], 16, Pe)), [
       [X, a.inputVal]
-    ]) : m("v-if", !0),
+    ]) : p("", !0),
     a.allowDatalist() ? (o(), l("datalist", {
       key: 8,
       id: t.id + "-list"
     }, [
-      (o(!0), l($, null, x(t.options, (r, i) => (o(), l("option", {
+      (o(!0), l(S, null, x(t.options, (r, i) => (o(), l("option", {
         key: i,
         value: r.value
-      }, w(r.value), 9, Ue))), 128))
-    ], 8, Ie)) : m("v-if", !0),
-    m(" Checkbox "),
+      }, w(r.value), 9, Ve))), 128))
+    ], 8, ze)) : p("", !0),
     t.type == "checkbox" || t.type == "radio" ? (o(), l("input", T({
       key: 9,
       class: "form-check-input",
       type: t.type,
       name: t.name ? t.name : t.id,
       id: t.id
-    }, e.$attrs), null, 16, Fe)) : m("v-if", !0),
+    }, e.$attrs), null, 16, Oe)) : p("", !0),
     t.type == "checkbox" || t.type == "radio" ? (o(), l("label", {
       key: 10,
       class: v(`form-label form-check-label${t.labelclass ? ` ${t.labelclass}` : ""}`),
       for: t.id,
       innerHTML: t.label
-    }, null, 10, ze)) : m("v-if", !0),
-    m(" Checkbox Button "),
+    }, null, 10, Fe)) : p("", !0),
     t.type == "checkbox-btn" || t.type == "radio-btn" ? (o(), l("input", T({
       key: 11,
       class: `btn-check${t.inputclass ? ` ${t.inputclass}` : ""}`,
@@ -755,26 +748,25 @@ function Ke(e, n, t, c, h, a) {
       autocomplete: "off",
       name: t.name ? t.name : t.id,
       id: t.id
-    }, e.$attrs), null, 16, Ve)) : m("v-if", !0),
+    }, e.$attrs), null, 16, je)) : p("", !0),
     t.type == "checkbox-btn" || t.type == "radio-btn" ? (o(), l("label", {
       key: 12,
       class: v(`btn${t.labelclass ? ` ${t.labelclass}` : ""}`),
       for: t.id,
       innerHTML: t.label,
       onClick: n[6] || (n[6] = (...r) => a.clickEvent && a.clickEvent(...r))
-    }, null, 10, Oe)) : m("v-if", !0),
-    m(" Error message "),
+    }, null, 10, We)) : p("", !0),
     t.errormsg ? (o(), l("p", {
       key: 13,
       class: "invalid-feedback mb-0",
       innerHTML: t.errormsg
-    }, null, 8, We)) : m("v-if", !0),
+    }, null, 8, Ke)) : p("", !0),
     b(e.$slots, "default")
   ], 2);
 }
-const P = /* @__PURE__ */ g(Ae, [["render", Ke], ["__file", "/Users/james/workspace/work/component-library/src/elements/Input/Input.vue"]]), Ge = {
+const I = /* @__PURE__ */ g(Ae, [["render", Ue]]), Ge = {
   components: {
-    Input: P
+    Input: I
   },
   name: "FileUploads",
   props: {
@@ -795,17 +787,17 @@ const P = /* @__PURE__ */ g(Ae, [["render", Ke], ["__file", "/Users/james/worksp
       required: !1
     }
   }
-}, Ee = { class: "multiple-file-uploads mb-4" }, Re = { class: "row" }, Ze = { class: "col-12 col-md me-auto" }, Qe = /* @__PURE__ */ s("div", { class: "col mw-fit-content" }, [
+}, Ze = { class: "multiple-file-uploads mb-4" }, Ee = { class: "row" }, Re = { class: "col-12 col-md me-auto" }, Qe = /* @__PURE__ */ s("div", { class: "col mw-fit-content" }, [
   /* @__PURE__ */ s("button", {
     type: "button",
     class: "btn btn-tertiary me-0",
     "data-delete": ""
   }, "Delete")
 ], -1), Ye = ["data-maxfiles"];
-function Je(e, n, t, c, h, a) {
+function Je(e, n, t, d, h, a) {
   const r = C("Input");
-  return o(), l("div", Ee, [
-    s("div", Re, [
+  return o(), l("div", Ze, [
+    s("div", Ee, [
       s("div", {
         class: v(`${t.inputcolclass ? t.inputcolclass : "col-12 col-sm-4"}`)
       }, [
@@ -820,7 +812,7 @@ function Je(e, n, t, c, h, a) {
           "data-filesize": t.maxfilesize
         }, null, 8, ["id", "name", "data-filesize"])
       ], 2),
-      s("div", Ze, [
+      s("div", Re, [
         b(e.$slots, "default")
       ]),
       Qe
@@ -833,14 +825,14 @@ function Je(e, n, t, c, h, a) {
     }, "+ Add file", 8, Ye)
   ]);
 }
-const ki = /* @__PURE__ */ g(Ge, [["render", Je], ["__file", "/Users/james/workspace/work/component-library/src/elements/FileUploads/FileUploads.vue"]]);
+const ki = /* @__PURE__ */ g(Ge, [["render", Je]]);
 function Xe(e) {
   if (!e.classList.contains("accordion--keep-open")) {
     const n = e.querySelectorAll(":scope > details");
     n.forEach((t) => {
       t.addEventListener("click", () => {
-        n.forEach((c) => {
-          c !== t && c.removeAttribute("open");
+        n.forEach((d) => {
+          d !== t && d.removeAttribute("open");
         });
       });
     });
@@ -866,12 +858,12 @@ const et = {
   class: "container accordion",
   ref: "wrapper"
 };
-function st(e, n, t, c, h, a) {
+function st(e, n, t, d, h, a) {
   return o(), l("div", tt, [
     b(e.$slots, "default")
   ], 512);
 }
-const Si = /* @__PURE__ */ g(et, [["render", st], ["__file", "/Users/james/workspace/work/component-library/src/components/Accordion/Accordion.vue"]]), at = {
+const $i = /* @__PURE__ */ g(et, [["render", st]]), at = {
   name: "AccordionItem",
   props: {
     title: {
@@ -910,7 +902,7 @@ const Si = /* @__PURE__ */ g(et, [["render", st], ["__file", "/Users/james/works
   key: 0,
   class: "accordion-body"
 };
-function ot(e, n, t, c, h, a) {
+function ot(e, n, t, d, h, a) {
   return o(), l("details", {
     class: "accordion-item",
     id: a.createID(t.title)
@@ -920,19 +912,19 @@ function ot(e, n, t, c, h, a) {
       onClick: n[0] || (n[0] = (r) => h.show = !0)
     }, [
       s("span", nt, [
-        j(w(t.title), 1),
+        P(w(t.title), 1),
         t.badge ? (o(), l("span", {
           key: 0,
           class: v(`badge bg-${t.badgecolour}`)
-        }, w(t.badge), 3)) : m("v-if", !0)
+        }, w(t.badge), 3)) : p("", !0)
       ])
     ], 2),
     h.show ? (o(), l("div", rt, [
       b(e.$slots, "default")
-    ])) : m("v-if", !0)
+    ])) : p("", !0)
   ], 8, it);
 }
-const Ai = /* @__PURE__ */ g(at, [["render", ot], ["__file", "/Users/james/workspace/work/component-library/src/components/Accordion/AccordionItem.vue"]]), lt = {
+const Ai = /* @__PURE__ */ g(at, [["render", ot]]), lt = {
   name: "Header",
   props: {
     title: {
@@ -949,13 +941,13 @@ const Ai = /* @__PURE__ */ g(at, [["render", ot], ["__file", "/Users/james/works
       required: !1
     }
   }
-}, ct = { class: "container" }, dt = { class: "row" }, ut = { class: "col-sm-6" }, ft = { class: "pt-5 pb-3 px-4" }, ht = { class: "col-sm-6 col-md-5 ms-auto" }, mt = ["src"];
-function _t(e, n, t, c, h, a) {
-  return o(), l("div", ct, [
+}, dt = { class: "container" }, ct = { class: "row" }, ut = { class: "col-sm-6" }, ft = { class: "pt-5 pb-3 px-4" }, ht = { class: "col-sm-6 col-md-5 ms-auto" }, mt = ["src"];
+function _t(e, n, t, d, h, a) {
+  return o(), l("div", dt, [
     s("div", {
       class: v("bg-" + t.background + " mb-4")
     }, [
-      s("div", dt, [
+      s("div", ct, [
         s("div", ut, [
           s("div", ft, [
             s("h2", null, w(t.title), 1),
@@ -968,14 +960,14 @@ function _t(e, n, t, c, h, a) {
             src: t.image,
             alt: "",
             class: "h-100 w-100 object-cover"
-          }, null, 8, mt)) : m("v-if", !0)
+          }, null, 8, mt)) : p("", !0)
         ])
       ])
     ], 2)
   ]);
 }
-const $i = /* @__PURE__ */ g(lt, [["render", _t], ["__file", "/Users/james/workspace/work/component-library/src/components/Banner/Banner.vue"]]);
-const pt = {
+const Si = /* @__PURE__ */ g(lt, [["render", _t]]);
+const yt = {
   name: "Card",
   props: {
     link: {
@@ -1054,23 +1046,23 @@ const pt = {
             default:
               return "bg-body text-white";
           }
-        }, n = this.details && this.details.tags ? this.details.tags.map((h) => `<span class="badge rounded-pill py-2 px-3 mb-3 me-2 ${e(h)}">${h}</span>`).join("") : "", t = this.title ? `<span class="card-title d-block ${this.titleclass}">${this.title}${this.subtitle ? ` <span class="d-block fw-normal font-body text-body small">${this.subtitle}</span>` : ""}</span>` : "", c = `
+        }, n = this.details && this.details.tags ? this.details.tags.map((h) => `<span class="badge rounded-pill py-2 px-3 mb-3 me-2 ${e(h)}">${h}</span>`).join("") : "", t = this.title ? `<span class="card-title d-block ${this.titleclass}">${this.title}${this.subtitle ? ` <span class="d-block fw-normal font-body text-body small">${this.subtitle}</span>` : ""}</span>` : "", d = `
         ${this.details && this.details.guideprice ? `<span class="d-block h6 text-dark mb-1">Price guide: ${this.details.guideprice}</span>` : ""}
         ${this.details && this.details.auctiontime ? `<span class="d-block h6 text-primary mb-4">Auction time left: ${this.details.auctiontime}</span>` : ""}
         ${this.details && this.details.readtime ? `<span class="d-block h6 text-primary mb-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="23" viewBox="0 0 22 23" class="icon ms-0 me-2"><path d="M11 1.63c-5.176 0-9.37 4.194-9.37 9.37 0 5.176 4.194 9.37 9.37 9.37 5.176 0 9.37-4.194 9.37-9.37 0-5.176-4.194-9.37-9.37-9.37M11 0c6.075 0 11 4.925 11 11s-4.925 11-11 11S0 17.075 0 11 4.925 0 11 0" fill="var(--colour-secondary)" /><path d="M9.62 5.39c0-.473.368-.856.82-.856.454 0 .822.383.822.855v6.27l3.25 1.898c.395.23.536.75.314 1.16-.22.412-.72.558-1.115.328l-4.09-2.39V5.39z" fill="var(--colour-primary)"/></svg>${this.details.readtime}</span>` : ""}
         `;
-        return `${n}${t}${c}${this.content}`;
+        return `${n}${t}${d}${this.content}`;
       };
     }
   }
-}, yt = ["href", "title", "target"], bt = {
+}, pt = ["href", "title", "target"], bt = {
   key: 0,
   class: "card-header__wrapper"
-}, vt = ["src"], gt = { class: "card-header" }, wt = ["innerHTML"], kt = ["innerHTML"], St = ["src"], At = ["innerHTML"], $t = {
+}, vt = ["src"], gt = { class: "card-header" }, wt = ["innerHTML"], kt = ["innerHTML"], $t = ["src"], At = ["innerHTML"], St = {
   key: 1,
   class: "card-footer"
 }, xt = { class: "visually-hidden" };
-function qt(e, n, t, c, h, a) {
+function qt(e, n, t, d, h, a) {
   return o(), l("a", {
     href: t.link,
     class: v("card" + (t.type ? " card--" + t.type : "") + " " + t.cardClass),
@@ -1089,12 +1081,12 @@ function qt(e, n, t, c, h, a) {
           key: 0,
           class: "badge bg-primary p-2 me-2",
           innerHTML: a.cardStatus()
-        }, null, 8, wt)) : m("v-if", !0),
+        }, null, 8, wt)) : p("", !0),
         this.details && (this.details.images || this.details.videos) ? (o(), l("span", {
           key: 1,
           class: "badge bg-black bg-opacity-50 p-2 align-self-end",
           innerHTML: a.cardMedia()
-        }, null, 8, kt)) : m("v-if", !0)
+        }, null, 8, kt)) : p("", !0)
       ]),
       t.details && t.details.logo ? (o(), l("img", {
         key: 0,
@@ -1102,26 +1094,26 @@ function qt(e, n, t, c, h, a) {
         alt: "",
         loading: "lazy",
         class: "card-logo"
-      }, null, 8, St)) : m("v-if", !0)
-    ])) : m("v-if", !0),
+      }, null, 8, $t)) : p("", !0)
+    ])) : p("", !0),
     s("div", {
       class: "card-body",
       innerHTML: a.cardContent()
     }, null, 8, At),
-    t.hidectatext == !1 ? (o(), l("div", $t, [
+    t.hidectatext == !1 ? (o(), l("div", St, [
       s("span", {
         class: v(`${t.btntype == "link" ? "link" : `btn btn-${t.btntype}`} mb-0`)
       }, [
-        j(w(t.ctatext), 1),
+        P(w(t.ctatext), 1),
         s("span", xt, ": " + w(t.title), 1)
       ], 2)
-    ])) : m("v-if", !0)
-  ], 10, yt);
+    ])) : p("", !0)
+  ], 10, pt);
 }
-const Z = /* @__PURE__ */ g(pt, [["render", qt], ["__file", "/Users/james/workspace/work/component-library/src/elements/Card/Card.vue"]]);
+const R = /* @__PURE__ */ g(yt, [["render", qt]]);
 const Lt = {
   components: {
-    Card: Z
+    Card: R
   },
   name: "CardDeck",
   props: {
@@ -1176,7 +1168,7 @@ const Lt = {
     }
   }
 }, Tt = ["data-card-type"];
-function Mt(e, n, t, c, h, a) {
+function Mt(e, n, t, d, h, a) {
   const r = C("Card");
   return o(), l("div", {
     class: "container card-deck prevent-invert",
@@ -1186,7 +1178,7 @@ function Mt(e, n, t, c, h, a) {
     s("div", {
       class: v(`row row-cols-${t.cols} row-cols-sm-${t.smcols} row-cols-md-${t.mdcols} ${t.gap ? `g-${t.gap}` : ""}`)
     }, [
-      (o(!0), l($, null, x(t.items, (i, f) => (o(), l("div", {
+      (o(!0), l(S, null, x(t.items, (i, f) => (o(), l("div", {
         class: "col",
         key: f
       }, [
@@ -1203,24 +1195,24 @@ function Mt(e, n, t, c, h, a) {
     b(e.$slots, "after")
   ], 8, Tt);
 }
-const Ct = /* @__PURE__ */ g(Lt, [["render", Mt], ["__file", "/Users/james/workspace/work/component-library/src/components/CardDeck/CardDeck.vue"]]);
+const Ct = /* @__PURE__ */ g(Lt, [["render", Mt]]);
 function Ht(e) {
   var n;
-  let t = e.querySelector(".carousel__inner"), c = e.querySelectorAll(".carousel__item").length;
+  let t = e.querySelector(".carousel__inner"), d = e.querySelectorAll(".carousel__item").length;
   e.getAttribute("data-cols");
   let h = e.getAttribute("data-sm-cols"), a = e.getAttribute("data-md-cols");
   e.querySelector(".carousel__controls a").classList.add("active"), t.addEventListener("scroll", function(r) {
     clearTimeout(n), n = setTimeout(function() {
-      let i = t.clientWidth, f = t.scrollWidth, S = t.scrollLeft, q = Math.round(S / f * c) + 1, M = e.querySelector(".carousel__item:last-child").offsetLeft;
-      Array.from(e.querySelectorAll(".carousel__controls a")).forEach((I, H) => {
-        I.classList.remove("active");
+      let i = t.clientWidth, f = t.scrollWidth, $ = t.scrollLeft, q = Math.round($ / f * d) + 1, M = e.querySelector(".carousel__item:last-child").offsetLeft;
+      Array.from(e.querySelectorAll(".carousel__controls a")).forEach((z, H) => {
+        z.classList.remove("active");
       }), e.querySelector(".control-" + q).classList.add("active"), q == 1 ? e.querySelector(".btn-prev").setAttribute("disabled", "disabled") : e.querySelector(".btn-prev").removeAttribute("disabled"), t.scrollLeft + i > M ? e.querySelector(".btn-next").setAttribute("disabled", "disabled") : e.querySelector(".btn-next").removeAttribute("disabled");
     }, 100);
   }, !1), e.addEventListener("click", function(r) {
     for (var i = r.target; i && i != this; i = i.parentNode)
       if (i.matches(".carousel__controls a")) {
-        r.preventDefault(), Array.from(e.querySelectorAll(".carousel__controls a")).forEach((S, q) => {
-          S.classList.remove("active");
+        r.preventDefault(), Array.from(e.querySelectorAll(".carousel__controls a")).forEach(($, q) => {
+          $.classList.remove("active");
         }), i.classList.add("active");
         const f = document.querySelector(i.getAttribute("href"));
         t.scroll({
@@ -1242,7 +1234,7 @@ function Ht(e) {
         });
         break;
       }
-  }, !1), c == 1 && e.classList.add("hide-btns"), h >= c && e.classList.add("hide-sm-btns"), a >= c && e.classList.add("hide-md-btns");
+  }, !1), d == 1 && e.classList.add("hide-btns"), h >= d && e.classList.add("hide-sm-btns"), a >= d && e.classList.add("hide-md-btns");
 }
 let B = Ct.props;
 B.gap.default = 0;
@@ -1251,7 +1243,7 @@ B.smcols.default = 2;
 B.mdcols.default = 4;
 const Nt = {
   components: {
-    Card: Z
+    Card: R
   },
   name: "Carousel",
   data() {
@@ -1280,15 +1272,15 @@ const Nt = {
       Ht(this.$refs.wrapper);
     });
   }
-}, Dt = ["id", "data-cols", "data-sm-cols", "data-md-cols"], Bt = { class: "carousel__wrapper" }, jt = { class: "carousel__inner" }, Pt = ["id"], It = ["innerHTML", "id"], Ut = ["href"], Ft = /* @__PURE__ */ s("button", {
+}, Dt = ["id", "data-cols", "data-sm-cols", "data-md-cols"], Bt = { class: "carousel__wrapper" }, Pt = { class: "carousel__inner" }, It = ["id"], zt = ["innerHTML", "id"], Vt = ["href"], Ot = /* @__PURE__ */ s("button", {
   class: "btn btn-prev",
   "data-go": "0",
   disabled: ""
-}, "Prev", -1), zt = /* @__PURE__ */ s("button", {
+}, "Prev", -1), Ft = /* @__PURE__ */ s("button", {
   class: "btn btn-next",
   "data-go": "2"
 }, "Next", -1);
-function Vt(e, n, t, c, h, a) {
+function jt(e, n, t, d, h, a) {
   const r = C("Card");
   return o(), l("div", {
     class: "container carousel",
@@ -1298,16 +1290,14 @@ function Vt(e, n, t, c, h, a) {
     "data-sm-cols": e.smcols,
     "data-md-cols": e.mdcols
   }, [
-    b(e.$slots, "default", {}, () => [
-      m(" Use for titles etc ")
-    ]),
+    b(e.$slots, "default"),
     s("div", Bt, [
-      s("div", jt, [
+      s("div", Pt, [
         t.type == "card" ? (o(), l("div", {
           key: 0,
           class: v(`row row-cols-${e.cols} row-cols-sm-${e.smcols} row-cols-md-${e.mdcols} ${e.gap ? `g-${e.gap}` : ""}`)
         }, [
-          (o(!0), l($, null, x(e.items, (i, f) => (o(), l("div", {
+          (o(!0), l(S, null, x(e.items, (i, f) => (o(), l("div", {
             class: v(`col carousel__item${t.colclass ? ` ${t.colclass}` : ""}`),
             key: f,
             id: "carousel" + h.id + "slide" + (f + 1)
@@ -1320,36 +1310,36 @@ function Vt(e, n, t, c, h, a) {
               ctatext: e.ctatext,
               hidectatext: e.hidectatext
             }), null, 16, ["class", "type", "btnyype", "titleclass", "ctatext", "hidectatext"])
-          ], 10, Pt))), 128))
-        ], 2)) : m("v-if", !0),
+          ], 10, It))), 128))
+        ], 2)) : p("", !0),
         t.type != "card" ? (o(), l("div", {
           key: 1,
           class: v(`row row-cols-${e.cols} row-cols-sm-${e.smcols} row-cols-md-${e.mdcols} ${e.gap ? `g-${e.gap}` : ""}`)
         }, [
-          (o(!0), l($, null, x(e.items, (i, f) => (o(), l("div", {
+          (o(!0), l(S, null, x(e.items, (i, f) => (o(), l("div", {
             class: v(`col carousel__item${t.colclass ? ` ${t.colclass}` : ""}`),
             key: f,
             innerHTML: a.content(i),
             id: "carousel" + h.id + "slide" + (f + 1)
-          }, null, 10, It))), 128))
-        ], 2)) : m("v-if", !0)
+          }, null, 10, zt))), 128))
+        ], 2)) : p("", !0)
       ]),
       s("div", {
         class: v(`carousel__controls cols-${e.cols} cols-sm-${e.smcols} cols-md-${e.mdcols}`)
       }, [
-        (o(!0), l($, null, x(e.items, (i, f) => (o(), l("a", {
+        (o(!0), l(S, null, x(e.items, (i, f) => (o(), l("a", {
           key: f,
           href: "#carousel" + h.id + "slide" + (f + 1),
           class: v(`control-${f + 1}`)
-        }, "Slide " + w(f + 1), 11, Ut))), 128))
+        }, "Slide " + w(f + 1), 11, Vt))), 128))
       ], 2),
-      Ft,
-      zt
+      Ot,
+      Ft
     ])
   ], 8, Dt);
 }
-const xi = /* @__PURE__ */ g(Nt, [["render", Vt], ["__file", "/Users/james/workspace/work/component-library/src/components/Carousel/Carousel.vue"]]);
-const Ot = {
+const xi = /* @__PURE__ */ g(Nt, [["render", jt]]);
+const Wt = {
   name: "Header",
   props: {
     title: {
@@ -1361,54 +1351,51 @@ const Ot = {
       required: !1
     }
   }
-}, Wt = { class: "header-banner" }, Kt = { class: "container" }, Gt = { class: "header-banner__inner" }, Et = ["innerHTML"], Rt = { key: 0 }, Zt = ["srcset"], Qt = /* @__PURE__ */ s("img", {
+}, Kt = { class: "header-banner" }, Ut = { class: "container" }, Gt = { class: "header-banner__inner" }, Zt = ["innerHTML"], Et = { key: 0 }, Rt = ["srcset"], Qt = /* @__PURE__ */ s("img", {
   src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
   alt: ""
 }, null, -1);
-function Yt(e, n, t, c, h, a) {
-  return o(), l("header", Wt, [
-    s("div", Kt, [
-      m(" Space for a breadcrumb trail "),
+function Yt(e, n, t, d, h, a) {
+  return o(), l("header", Kt, [
+    s("div", Ut, [
       b(e.$slots, "breadcrumb"),
       s("div", Gt, [
-        s("h1", { innerHTML: t.title }, null, 8, Et),
+        s("h1", { innerHTML: t.title }, null, 8, Zt),
         b(e.$slots, "default")
       ])
     ]),
-    t.image ? (o(), l("picture", Rt, [
-      m(" Actual image only loaded on desktops "),
+    t.image ? (o(), l("picture", Et, [
       s("source", {
         srcset: t.image,
         media: "(min-width: 62em)"
-      }, null, 8, Zt),
-      m(" Placeholder image "),
+      }, null, 8, Rt),
       Qt
-    ])) : m("v-if", !0)
+    ])) : p("", !0)
   ]);
 }
-const qi = /* @__PURE__ */ g(Ot, [["render", Yt], ["__file", "/Users/james/workspace/work/component-library/src/components/Header/Header.vue"]]);
+const qi = /* @__PURE__ */ g(Wt, [["render", Yt]]);
 function Jt(e) {
   var n;
-  const t = e.querySelector(".testimonial__images"), c = t.querySelectorAll("img").length;
-  if (c == 1)
+  const t = e.querySelector(".testimonial__images"), d = t.querySelectorAll("img").length;
+  if (d == 1)
     return !1;
   e.classList.add("testimonial--multi");
   const h = function(a) {
     const r = e.querySelector(".btn-next"), i = e.querySelector(".btn-prev");
-    r.setAttribute("data-go", a + 1), i.setAttribute("data-go", a - 1), r.removeAttribute("disabled"), i.removeAttribute("disabled"), a == 1 ? i.setAttribute("disabled", !0) : a == c && r.setAttribute("disabled", !0);
+    r.setAttribute("data-go", a + 1), i.setAttribute("data-go", a - 1), r.removeAttribute("disabled"), i.removeAttribute("disabled"), a == 1 ? i.setAttribute("disabled", !0) : a == d && r.setAttribute("disabled", !0);
   };
   t.addEventListener("scroll", function(a) {
     clearTimeout(n), n = setTimeout(function() {
-      let r = t.scrollWidth, i = t.scrollHeight, f = t.scrollLeft, S = t.scrollTop, q = Math.round(f / r * c) + 1;
-      f == 0 && S != 0 && (q = Math.round(S / i * c) + 1), e.setAttribute("data-show", q), h(q);
+      let r = t.scrollWidth, i = t.scrollHeight, f = t.scrollLeft, $ = t.scrollTop, q = Math.round(f / r * d) + 1;
+      f == 0 && $ != 0 && (q = Math.round($ / i * d) + 1), e.setAttribute("data-show", q), h(q);
     }, 300);
   }, !1), e.addEventListener("click", function(a) {
     for (var r = a.target; r && r != this; r = r.parentNode)
       if (r.matches("[data-go]")) {
-        let i = parseInt(r.getAttribute("data-go")), f = 0, S = 0, q = t.scrollWidth, M = t.scrollHeight;
-        q > M ? S = Math.floor(q * ((i - 1) / c)) : f = Math.floor(M * ((i - 1) / c)), t.scroll({
+        let i = parseInt(r.getAttribute("data-go")), f = 0, $ = 0, q = t.scrollWidth, M = t.scrollHeight;
+        q > M ? $ = Math.floor(q * ((i - 1) / d)) : f = Math.floor(M * ((i - 1) / d)), t.scroll({
           top: f,
-          left: S,
+          left: $,
           behavior: "smooth"
         });
         break;
@@ -1445,8 +1432,8 @@ const Xt = {
     "data-go": "2",
     class: "btn-next"
   }, "Next")
-], -1), rs = { class: "col-md-7" }, os = /* @__PURE__ */ s("h2", null, "What our customers think\u2026", -1), ls = { class: "testimonial__content" }, cs = ["innerHTML"], ds = ["innerHTML"], us = { class: "testimonial__after" }, fs = /* @__PURE__ */ s("span", { class: "circle circle--dots d-none d-md-block" }, null, -1);
-function hs(e, n, t, c, h, a) {
+], -1), rs = { class: "col-md-7" }, os = /* @__PURE__ */ s("h2", null, "What our customers think…", -1), ls = { class: "testimonial__content" }, ds = ["innerHTML"], cs = ["innerHTML"], us = { class: "testimonial__after" }, fs = /* @__PURE__ */ s("span", { class: "circle circle--dots d-none d-md-block" }, null, -1);
+function hs(e, n, t, d, h, a) {
   return o(), l("div", es, [
     s("div", {
       class: v("bg-" + t.background)
@@ -1454,7 +1441,7 @@ function hs(e, n, t, c, h, a) {
       s("div", ts, [
         s("div", ss, [
           s("div", as, [
-            (o(!0), l($, null, x(t.items, (r, i) => (o(), l("img", {
+            (o(!0), l(S, null, x(t.items, (r, i) => (o(), l("img", {
               key: i,
               src: r.image ? r.image : "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
               alt: "",
@@ -1466,16 +1453,16 @@ function hs(e, n, t, c, h, a) {
         s("div", rs, [
           os,
           s("div", ls, [
-            (o(!0), l($, null, x(t.items, (r, i) => (o(), l("blockquote", {
+            (o(!0), l(S, null, x(t.items, (r, i) => (o(), l("blockquote", {
               key: i,
               class: v(r.class)
             }, [
               s("div", {
                 innerHTML: r.quote
-              }, null, 8, cs),
+              }, null, 8, ds),
               s("cite", {
                 innerHTML: r.cite
-              }, null, 8, ds)
+              }, null, 8, cs)
             ], 2))), 128))
           ]),
           s("div", us, [
@@ -1487,10 +1474,10 @@ function hs(e, n, t, c, h, a) {
     ], 2)
   ], 512);
 }
-const Li = /* @__PURE__ */ g(Xt, [["render", hs], ["__file", "/Users/james/workspace/work/component-library/src/components/Testimonial/Testimonial.vue"]]);
+const Li = /* @__PURE__ */ g(Xt, [["render", hs]]);
 const ms = {
   components: {
-    Input: P
+    Input: I
   },
   name: "PropertySearchbar",
   props: {
@@ -1515,8 +1502,8 @@ const ms = {
       required: !1,
       default() {
         return [
-          { value: "0.25", display: "+\xBC mi" },
-          { value: "0.5", display: "+\xBD mi" },
+          { value: "0.25", display: "+¼ mi" },
+          { value: "0.5", display: "+½ mi" },
           { value: "1", display: "+1 mi" },
           { value: "2", display: "+2 mi" },
           { value: "3", display: "+3 mi" },
@@ -1531,12 +1518,12 @@ const ms = {
       default() {
         return [
           { value: "0", display: "No min" },
-          { value: "50000", display: "\xA350k min" },
-          { value: "75000", display: "\xA375k min" },
-          { value: "100000", display: "\xA3100k min" },
-          { value: "150000", display: "\xA3150k min" },
-          { value: "200000", display: "\xA3200k min" },
-          { value: "250000", display: "\xA3250k min" }
+          { value: "50000", display: "£50k min" },
+          { value: "75000", display: "£75k min" },
+          { value: "100000", display: "£100k min" },
+          { value: "150000", display: "£150k min" },
+          { value: "200000", display: "£200k min" },
+          { value: "250000", display: "£250k min" }
         ];
       }
     },
@@ -1546,12 +1533,12 @@ const ms = {
       default() {
         return [
           { value: "any", display: "No max" },
-          { value: "50000", display: "\xA350k max" },
-          { value: "75000", display: "\xA375k max" },
-          { value: "100000", display: "\xA3100k max" },
-          { value: "150000", display: "\xA3150k max" },
-          { value: "200000", display: "\xA3200k max" },
-          { value: "250000", display: "\xA3250k max" }
+          { value: "50000", display: "£50k max" },
+          { value: "75000", display: "£75k max" },
+          { value: "100000", display: "£100k max" },
+          { value: "150000", display: "£150k max" },
+          { value: "200000", display: "£200k max" },
+          { value: "250000", display: "£250k max" }
         ];
       }
     },
@@ -1637,24 +1624,24 @@ const ms = {
 }, _s = {
   class: "container",
   ref: "wrapper"
-}, ps = { class: "property-searchbar" }, ys = ["action", "method"], bs = { class: "col-12 col-md-3" }, vs = { class: "col-12 col-md" }, gs = /* @__PURE__ */ s("span", { class: "form-label d-none d-md-block" }, "Price range", -1), ws = {
+}, ys = { class: "property-searchbar" }, ps = ["action", "method"], bs = { class: "col-12 col-md-3" }, vs = { class: "col-12 col-md" }, gs = /* @__PURE__ */ s("span", { class: "form-label d-none d-md-block" }, "Price range", -1), ws = {
   class: "row",
   "data-input-range": ""
-}, ks = { class: "col-12 col-md" }, Ss = /* @__PURE__ */ s("span", { class: "form-label d-none d-md-block" }, "Number of beds", -1), As = {
+}, ks = { class: "col-12 col-md" }, $s = /* @__PURE__ */ s("span", { class: "form-label d-none d-md-block" }, "Number of beds", -1), As = {
   class: "row",
   "data-input-range": ""
-}, $s = { class: "col-12 col-md-2" }, xs = /* @__PURE__ */ s("div", { class: "col-12 col-md mw-md-fit-content d-flex property-searchbar__btn" }, [
+}, Ss = { class: "col-12 col-md-2" }, xs = /* @__PURE__ */ s("div", { class: "col-12 col-md mw-md-fit-content d-flex property-searchbar__btn" }, [
   /* @__PURE__ */ s("button", {
     class: "btn w-100 me-0",
     type: "submit",
     value: "submit"
   }, "Search")
 ], -1);
-function qs(e, n, t, c, h, a) {
+function qs(e, n, t, d, h, a) {
   const r = C("Input");
   return o(), l("div", _s, [
     b(e.$slots, "default"),
-    s("div", ps, [
+    s("div", ys, [
       s("form", {
         class: "row",
         action: t.formaction,
@@ -1703,7 +1690,7 @@ function qs(e, n, t, c, h, a) {
           ])
         ]),
         s("fieldset", ks, [
-          Ss,
+          $s,
           s("div", As, [
             A(r, {
               class: "col-6",
@@ -1723,7 +1710,7 @@ function qs(e, n, t, c, h, a) {
             }, null, 8, ["options"])
           ])
         ]),
-        s("fieldset", $s, [
+        s("fieldset", Ss, [
           A(r, {
             label: "Property type",
             id: "property-type",
@@ -1732,16 +1719,16 @@ function qs(e, n, t, c, h, a) {
           }, null, 8, ["options"])
         ]),
         xs
-      ], 8, ys)
+      ], 8, ps)
     ]),
     b(e.$slots, "after")
   ], 512);
 }
-const Ti = /* @__PURE__ */ g(ms, [["render", qs], ["__file", "/Users/james/workspace/work/component-library/src/components/PropertySearchbar/PropertySearchbar.vue"]]), Ls = (e) => {
+const Ti = /* @__PURE__ */ g(ms, [["render", qs]]), Ls = (e) => {
   Array.from(e.querySelectorAll("details")).forEach((n, t) => {
-    n.addEventListener("mouseenter", function(c) {
+    n.addEventListener("mouseenter", function(d) {
       window.matchMedia("(min-width: 62em)").matches && n.setAttribute("open", "true");
-    }, !1), n.addEventListener("mouseleave", function(c) {
+    }, !1), n.addEventListener("mouseleave", function(d) {
       window.matchMedia("(min-width: 62em)").matches && n.removeAttribute("open");
     }, !1);
   }), "IntersectionObserver" in window && new IntersectionObserver(
@@ -1751,7 +1738,7 @@ const Ti = /* @__PURE__ */ g(ms, [["render", qs], ["__file", "/Users/james/works
 };
 const Ts = {
   components: {
-    Input: P,
+    Input: I,
     Logo: ue,
     Icon: re
   },
@@ -1841,30 +1828,30 @@ const Ts = {
   name: "showAccount",
   id: "showAccount",
   class: "d-none"
-}, null, -1), Ns = { class: "nav__mobile-bar" }, Ds = { class: "container" }, Bs = { class: "row" }, js = {
+}, null, -1), Ns = { class: "nav__mobile-bar" }, Ds = { class: "container" }, Bs = { class: "row" }, Ps = {
   key: 0,
   class: "col mw-md-fit-content nav__logo"
-}, Ps = {
+}, Is = {
   key: 1,
   class: "col mw-md-fit-content nav__logo"
-}, Is = {
+}, zs = {
   href: "/",
   class: "text-decoration-none mb-0"
-}, Us = /* @__PURE__ */ s("div", { class: "col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn" }, [
+}, Vs = /* @__PURE__ */ s("div", { class: "col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn" }, [
   /* @__PURE__ */ s("label", { for: "showMenu" }, "Menu")
-], -1), Fs = { class: "nav__inner" }, zs = { class: "container" }, Vs = { class: "row" }, Os = {
+], -1), Os = { class: "nav__inner" }, Fs = { class: "container" }, js = { class: "row" }, Ws = {
   key: 0,
   class: "col mw-md-fit-content nav__logo"
-}, Ws = {
+}, Ks = {
   key: 1,
   class: "col mw-md-fit-content nav__logo"
-}, Ks = {
+}, Us = {
   href: "/",
   class: "text-decoration-none mb-0"
 }, Gs = {
   key: 2,
   class: "col mw-fit-content nav__search-btn flex-row align-items-center"
-}, Es = /* @__PURE__ */ s("label", { for: "showSearch" }, [
+}, Zs = /* @__PURE__ */ s("label", { for: "showSearch" }, [
   /* @__PURE__ */ s("svg", {
     class: "icon",
     viewBox: "0 0 32 32"
@@ -1885,9 +1872,9 @@ const Ts = {
       class: "icon__outline"
     })
   ])
-], -1), Rs = [
-  Es
-], Zs = /* @__PURE__ */ s("div", { class: "col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn" }, [
+], -1), Es = [
+  Zs
+], Rs = /* @__PURE__ */ s("div", { class: "col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn" }, [
   /* @__PURE__ */ s("label", { for: "showMenu" }, "Menu")
 ], -1), Qs = { class: "col-12 col-md nav__menu ms-auto flex-row align-items-center" }, Ys = {
   key: 3,
@@ -1921,7 +1908,7 @@ const Ts = {
 }, na = { class: "bg-gradient pt-4" }, ra = { class: "container" }, oa = {
   key: 0,
   class: "nav__menu--account"
-}, la = { class: "container" }, ca = { class: "row mb-4" }, da = {
+}, la = { class: "container" }, da = { class: "row mb-4" }, ca = {
   key: 0,
   class: "col mw-md-fit-content nav__logo"
 }, ua = {
@@ -1933,7 +1920,7 @@ const Ts = {
 }, ha = /* @__PURE__ */ s("div", { class: "col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn" }, [
   /* @__PURE__ */ s("label", { for: "showAccount" }, "Account")
 ], -1), ma = { class: "container" }, _a = /* @__PURE__ */ s("span", { class: "nav__bg" }, null, -1);
-function pa(e, n, t, c, h, a) {
+function ya(e, n, t, d, h, a) {
   const r = C("Logo");
   return o(), l("nav", {
     class: v(`nav${a.hasSecondarySlot ? " has-secondary" : ""}`),
@@ -1942,14 +1929,13 @@ function pa(e, n, t, c, h, a) {
     Ms,
     Cs,
     Hs,
-    m(" Mobile bar "),
     s("div", Ns, [
       s("div", Ds, [
         s("div", Bs, [
-          a.hasLogoSlot ? (o(), l("div", js, [
+          a.hasLogoSlot ? (o(), l("div", Ps, [
             b(e.$slots, "logo")
-          ])) : (o(), l("div", Ps, [
-            s("a", Is, [
+          ])) : (o(), l("div", Is, [
+            s("a", zs, [
               A(r, {
                 id: t.logo,
                 path: t.logopath,
@@ -1958,17 +1944,17 @@ function pa(e, n, t, c, h, a) {
               }, null, 8, ["id", "path", "desc"])
             ])
           ])),
-          Us
+          Vs
         ])
       ])
     ]),
-    s("div", Fs, [
-      s("div", zs, [
-        s("div", Vs, [
-          a.hasLogoSlot ? (o(), l("div", Os, [
+    s("div", Os, [
+      s("div", Fs, [
+        s("div", js, [
+          a.hasLogoSlot ? (o(), l("div", Ws, [
             b(e.$slots, "logo")
-          ])) : (o(), l("div", Ws, [
-            s("a", Ks, [
+          ])) : (o(), l("div", Ks, [
+            s("a", Us, [
               A(r, {
                 id: t.logo,
                 path: t.logopath,
@@ -1977,39 +1963,38 @@ function pa(e, n, t, c, h, a) {
               }, null, 8, ["id", "path", "desc"])
             ])
           ])),
-          a.hasSearchSlot ? (o(), l("div", Gs, Rs)) : m("v-if", !0),
-          Zs,
-          m(" Main menu "),
+          a.hasSearchSlot ? (o(), l("div", Gs, Es)) : p("", !0),
+          Rs,
           s("div", Qs, [
             b(e.$slots, "default")
           ]),
-          a.hasAccountSlot ? (o(), l("div", Ys, Xs)) : m("v-if", !0),
+          a.hasAccountSlot ? (o(), l("div", Ys, Xs)) : p("", !0),
           t.btnlink ? (o(), l("div", ea, [
             s("a", {
               href: t.btnlink,
               class: "btn me-0",
               innerHTML: t.btntext
             }, null, 8, ta)
-          ])) : m("v-if", !0)
+          ])) : p("", !0)
         ])
       ]),
       a.hasSecondarySlot ? (o(), l("div", sa, [
         s("div", aa, [
           b(e.$slots, "secondary")
         ])
-      ])) : m("v-if", !0),
+      ])) : p("", !0),
       a.hasSearchSlot ? (o(), l("div", ia, [
         s("div", na, [
           s("div", ra, [
             b(e.$slots, "search")
           ])
         ])
-      ])) : m("v-if", !0)
+      ])) : p("", !0)
     ]),
     a.hasAccountSlot ? (o(), l("div", oa, [
       s("div", la, [
-        s("div", ca, [
-          a.hasLogoSlot ? (o(), l("div", da, [
+        s("div", da, [
+          a.hasLogoSlot ? (o(), l("div", ca, [
             b(e.$slots, "logo")
           ])) : (o(), l("div", ua, [
             s("a", fa, [
@@ -2027,14 +2012,14 @@ function pa(e, n, t, c, h, a) {
       s("div", ma, [
         b(e.$slots, "account")
       ])
-    ])) : m("v-if", !0),
+    ])) : p("", !0),
     _a
   ], 2);
 }
-const Mi = /* @__PURE__ */ g(Ts, [["render", pa], ["__file", "/Users/james/workspace/work/component-library/src/components/Nav/Nav.vue"]]), ya = (e) => {
+const Mi = /* @__PURE__ */ g(Ts, [["render", ya]]), pa = (e) => {
   const n = new IntersectionObserver(
-    function([c]) {
-      c.target.classList.toggle("in-view", c.intersectionRatio > 0), document.getElementById("showDrawer").checked = !1;
+    function([d]) {
+      d.target.classList.toggle("in-view", d.intersectionRatio > 0), document.getElementById("showDrawer").checked = !1;
     },
     { threshold: [1] }
   ), t = document.getElementById("drawer-end");
@@ -2053,7 +2038,7 @@ const ba = {
       let e = this.$refs.wrapper;
       const n = document.createDocumentFragment();
       Array.from(e.childNodes).forEach((t) => n.appendChild(t)), e.parentNode.insertBefore(n, e), e.parentNode.removeChild(e), this.$nextTick(function() {
-        ya(this.$refs.drawer);
+        pa(this.$refs.drawer);
       });
     });
   }
@@ -2062,43 +2047,43 @@ const ba = {
   name: "showDrawer",
   id: "showDrawer",
   class: "d-none"
-}, null, -1), wa = { class: "drawer__btn pb-0" }, ka = { class: "container text-end pb-0" }, Sa = {
+}, null, -1), wa = { class: "drawer__btn pb-0" }, ka = { class: "container text-end pb-0" }, $a = {
   for: "showDrawer",
   class: "btn btn-secondary me-0"
 }, Aa = {
   class: "drawer",
   id: "drawer",
   ref: "drawer"
-}, $a = /* @__PURE__ */ s("div", { class: "container text-end pb-0" }, [
+}, Sa = /* @__PURE__ */ s("div", { class: "container text-end pb-0" }, [
   /* @__PURE__ */ s("label", {
     for: "showDrawer",
     class: "btn btn-tertiary mb-0 me-0 py-1 px-2"
   }, [
     /* @__PURE__ */ s("span", { class: "visually-hidden" }, "Close"),
-    /* @__PURE__ */ j("\u2715")
+    /* @__PURE__ */ P("✕")
   ])
 ], -1), xa = /* @__PURE__ */ s("hr", { id: "drawer-end" }, null, -1);
-function qa(e, n, t, c, h, a) {
+function qa(e, n, t, d, h, a) {
   return o(), l("div", va, [
     ga,
     s("div", wa, [
       s("div", ka, [
-        s("label", Sa, w(t.label), 1)
+        s("label", $a, w(t.label), 1)
       ])
     ]),
     s("div", Aa, [
-      $a,
+      Sa,
       b(e.$slots, "default")
     ], 512),
     xa
   ], 512);
 }
-const Ci = /* @__PURE__ */ g(ba, [["render", qa], ["__file", "/Users/james/workspace/work/component-library/src/components/Drawer/Drawer.vue"]]), La = (e) => {
-  const n = e.querySelectorAll(".modal__outer a, .modal__outer button"), t = n[0], c = n[n.length - 1], h = e.getAttribute("id"), a = function() {
+const Ci = /* @__PURE__ */ g(ba, [["render", qa]]), La = (e) => {
+  const n = e.querySelectorAll(".modal__outer a, .modal__outer button"), t = n[0], d = n[n.length - 1], h = e.getAttribute("id"), a = function() {
     document.querySelector('[href="' + window.location.hash + '"]').focus(), window.location.hash = "close", history.replaceState("", document.title, window.location.pathname + window.location.search), typeof window.player < "u" && typeof window.player.pauseVideo == "function" && window.player.pauseVideo();
   };
   e.addEventListener("keydown", function(i) {
-    i.key === "Tab" && i.shiftKey && document.activeElement == t ? (i.preventDefault(), c.focus()) : i.key === "Tab" && !i.shiftKey && document.activeElement == c && (i.preventDefault(), t.focus());
+    i.key === "Tab" && i.shiftKey && document.activeElement == t ? (i.preventDefault(), d.focus()) : i.key === "Tab" && !i.shiftKey && document.activeElement == d && (i.preventDefault(), t.focus());
   }), document.addEventListener("keydown", function(i) {
     i.key === "Escape" && document.querySelector(".modal:target") && a();
   }), e.addEventListener("click", function(i) {
@@ -2143,14 +2128,14 @@ const Ta = {
   }
 }, Ma = ["id"], Ca = ["href"], Ha = /* @__PURE__ */ s("span", { class: "visually-hidden" }, "Close", -1), Na = [
   Ha
-], Da = { class: "modal__outer" }, Ba = ["href"], ja = /* @__PURE__ */ s("span", { class: "visually-hidden" }, "Close", -1), Pa = { class: "modal__inner" }, Ia = /* @__PURE__ */ s("button", {
+], Da = { class: "modal__outer" }, Ba = ["href"], Pa = /* @__PURE__ */ s("span", { class: "visually-hidden" }, "Close", -1), Ia = { class: "modal__inner" }, za = /* @__PURE__ */ s("button", {
   class: "modal__dock--left btn btn-prev",
   tabindex: "-1"
-}, "Left", -1), Ua = /* @__PURE__ */ s("button", {
+}, "Left", -1), Va = /* @__PURE__ */ s("button", {
   class: "modal__dock--right btn btn-next",
   tabindex: "-1"
 }, "Right", -1);
-function Fa(e, n, t, c, h, a) {
+function Oa(e, n, t, d, h, a) {
   return o(), l("div", {
     class: "modal",
     id: t.id,
@@ -2167,19 +2152,19 @@ function Fa(e, n, t, c, h, a) {
         href: `#${t.returnid ? t.returnid : ""}`,
         class: "btn btn-tertiary py-1 px-2"
       }, [
-        ja,
-        j("\u2715")
+        Pa,
+        P("✕")
       ], 8, Ba),
-      s("div", Pa, [
+      s("div", Ia, [
         b(e.$slots, "default")
       ])
     ]),
-    Ia,
-    Ua
+    za,
+    Va
   ], 8, Ma);
 }
-const Hi = /* @__PURE__ */ g(Ta, [["render", Fa], ["__file", "/Users/james/workspace/work/component-library/src/components/Modal/Modal.vue"]]);
-const za = {
+const Hi = /* @__PURE__ */ g(Ta, [["render", Oa]]);
+const Fa = {
   name: "Stepper",
   props: {
     label: {
@@ -2192,27 +2177,25 @@ const za = {
       default: "Complete"
     }
   }
-}, Va = { class: "container" }, Oa = ["aria-label"], Wa = {
+}, ja = { class: "container" }, Wa = ["aria-label"], Ka = {
   key: 0,
   class: "h6 stepper__start"
-}, Ka = { class: "list-unstyled" }, Ga = { class: "h6 stepper__end" };
-function Ea(e, n, t, c, h, a) {
-  return o(), l("div", Va, [
+}, Ua = { class: "list-unstyled" }, Ga = { class: "h6 stepper__end" };
+function Za(e, n, t, d, h, a) {
+  return o(), l("div", ja, [
     s("nav", {
       class: "stepper",
       "aria-label": t.label ? t.label : "Progress"
     }, [
-      t.label ? (o(), l("span", Wa, w(t.label), 1)) : m("v-if", !0),
-      s("ol", Ka, [
-        b(e.$slots, "default", {}, () => [
-          m(" Use for titles etc ")
-        ])
+      t.label ? (o(), l("span", Ka, w(t.label), 1)) : p("", !0),
+      s("ol", Ua, [
+        b(e.$slots, "default")
       ]),
       s("span", Ga, w(t.endlabel), 1)
-    ], 8, Oa)
+    ], 8, Wa)
   ]);
 }
-const Ni = /* @__PURE__ */ g(za, [["render", Ea], ["__file", "/Users/james/workspace/work/component-library/src/components/Stepper/Stepper.vue"]]), Ra = {
+const Ni = /* @__PURE__ */ g(Fa, [["render", Za]]), Ea = {
   name: "Stepper",
   props: {
     url: {
@@ -2228,11 +2211,11 @@ const Ni = /* @__PURE__ */ g(za, [["render", Ea], ["__file", "/Users/james/works
       required: !1
     }
   }
-}, Za = ["href", "aria-current"], Qa = {
+}, Ra = ["href", "aria-current"], Qa = {
   key: 0,
   class: "visually-hidden"
 };
-function Ya(e, n, t, c, h, a) {
+function Ya(e, n, t, d, h, a) {
   return o(), l("li", null, [
     s("a", {
       href: t.url,
@@ -2242,11 +2225,11 @@ function Ya(e, n, t, c, h, a) {
       s("span", null, [
         b(e.$slots, "default")
       ]),
-      t.status ? (o(), l("em", Qa, " - status: " + w(t.status), 1)) : m("v-if", !0)
-    ], 10, Za)
+      t.status ? (o(), l("em", Qa, " - status: " + w(t.status), 1)) : p("", !0)
+    ], 10, Ra)
   ]);
 }
-const Di = /* @__PURE__ */ g(Ra, [["render", Ya], ["__file", "/Users/james/workspace/work/component-library/src/components/Stepper/Step.vue"]]);
+const Di = /* @__PURE__ */ g(Ea, [["render", Ya]]);
 const Ja = {
   name: "Tabs",
   data() {
@@ -2259,9 +2242,9 @@ const Ja = {
       return () => {
         const e = [];
         let n = 1;
-        for (const [t, c] of Object.entries(this.$slots.default()))
-          if (c.props && c.props.title) {
-            let h = c.props.title, a = {
+        for (const [t, d] of Object.entries(this.$slots.default()))
+          if (d.props && d.props.title) {
+            let h = d.props.title, a = {
               name: this.tabsID,
               id: this.tabsID + "_tab" + n++,
               tabTitle: h
@@ -2275,17 +2258,17 @@ const Ja = {
   methods: {
     openTab: function(e) {
       let n = 0;
-      for (const [t, c] of Object.entries(this.$slots.default()))
-        c.props && c.props.title && (n == e && (console.log(c), c.type.data().show = !0), n++);
+      for (const [t, d] of Object.entries(this.$slots.default()))
+        d.props && d.props.title && (n == e && (console.log(d), d.type.data().show = !0), n++);
     }
   }
 }, Xa = {
   class: "container tabs__container",
   ref: "wrapper"
 }, ei = ["data-key", "name", "id", "checked"], ti = { class: "tabs__links" }, si = ["for", "onClick"], ai = { class: "tabs" };
-function ii(e, n, t, c, h, a) {
+function ii(e, n, t, d, h, a) {
   return o(), l("div", Xa, [
-    (o(!0), l($, null, x(a.tabLinks(), (r, i) => (o(), l("input", {
+    (o(!0), l(S, null, x(a.tabLinks(), (r, i) => (o(), l("input", {
       type: "radio",
       class: "tab__input",
       key: i,
@@ -2295,7 +2278,7 @@ function ii(e, n, t, c, h, a) {
       checked: i == 0
     }, null, 8, ei))), 128)),
     s("div", ti, [
-      (o(!0), l($, null, x(a.tabLinks(), (r, i) => (o(), l("label", {
+      (o(!0), l(S, null, x(a.tabLinks(), (r, i) => (o(), l("label", {
         key: i,
         for: r.id,
         class: "link",
@@ -2307,7 +2290,7 @@ function ii(e, n, t, c, h, a) {
     ])
   ], 512);
 }
-const Bi = /* @__PURE__ */ g(Ja, [["render", ii], ["__file", "/Users/james/workspace/work/component-library/src/components/Tabs/Tabs.vue"]]), ni = {
+const Bi = /* @__PURE__ */ g(Ja, [["render", ii]]), ni = {
   name: "Tab",
   props: {
     title: {
@@ -2333,16 +2316,16 @@ const Bi = /* @__PURE__ */ g(Ja, [["render", ii], ["__file", "/Users/james/works
   key: 0,
   class: "tab"
 };
-function oi(e, n, t, c, h, a) {
+function oi(e, n, t, d, h, a) {
   return h.show ? (o(), l("div", ri, [
     b(e.$slots, "default")
-  ])) : m("v-if", !0);
+  ])) : p("", !0);
 }
-const ji = /* @__PURE__ */ g(ni, [["render", oi], ["__file", "/Users/james/workspace/work/component-library/src/components/Tabs/Tab.vue"]]);
+const Pi = /* @__PURE__ */ g(ni, [["render", oi]]);
 function li(e) {
   if (e.addEventListener("click", function(t) {
-    for (var c = t.target; c && c != this; c = c.parentNode)
-      if (c.matches(".btn-close")) {
+    for (var d = t.target; d && d != this; d = d.parentNode)
+      if (d.matches(".btn-close")) {
         t.preventDefault(), e.classList.remove("show"), setTimeout(function() {
           e.remove();
         }, 300);
@@ -2364,7 +2347,7 @@ function li(e) {
   let n = document.querySelector(".alert__holder");
   e.classList.contains("alert--fixed") && !e.parentNode.classList.contains("alert__wrapper") && n.appendChild(e);
 }
-const ci = {
+const di = {
   name: "Alert",
   props: {
     dismissible: {
@@ -2385,14 +2368,14 @@ const ci = {
   mounted() {
     li(this.$refs.wrapper);
   }
-}, di = ["data-timeout"], ui = {
+}, ci = ["data-timeout"], ui = {
   key: 0,
   type: "button",
   class: "btn-close",
   "data-bs-dismiss": "alert",
   "aria-label": "Close"
 };
-function fi(e, n, t, c, h, a) {
+function fi(e, n, t, d, h, a) {
   return o(), l("div", {
     class: v(`container alert pb-0 ${t.dismissible ? "alert--dismissible fade show" : ""}`),
     ref: "wrapper",
@@ -2403,32 +2386,33 @@ function fi(e, n, t, c, h, a) {
       class: v(`alert__inner bg-${t.colour}`),
       role: "alert"
     }, [
-      t.dismissible ? (o(), l("button", ui)) : m("v-if", !0),
+      t.dismissible ? (o(), l("button", ui)) : p("", !0),
       b(e.$slots, "default")
     ], 2)
-  ], 14, di);
+  ], 14, ci);
 }
-const Pi = /* @__PURE__ */ g(ci, [["render", fi], ["__file", "/Users/james/workspace/work/component-library/src/components/Alert/Alert.vue"]]);
-let Q = R.props;
+const Ii = /* @__PURE__ */ g(di, [["render", fi]]);
+let Q = E.props;
 Q.fields.required = !1;
 const hi = {
   components: {
-    Table: R,
-    Input: P
+    Table: E,
+    Input: I
   },
   data() {
     return {
       itemsData: [...this.items]
+      // Redefine data to avoid bleeding of data to other components
     };
   },
   methods: {
     submitForm: function(e) {
       console.log(this);
       const n = new FormData(e.target);
-      let t = new Date();
-      const c = t.getFullYear();
+      let t = /* @__PURE__ */ new Date();
+      const d = t.getFullYear();
       let h = t.getMonth() + 1, a = t.getDate();
-      a < 10 && (a = "0" + a), h < 10 && (h = "0" + h), t = a + "/" + h + "/" + c, this.itemsData.unshift({
+      a < 10 && (a = "0" + a), h < 10 && (h = "0" + h), t = a + "/" + h + "/" + d, this.itemsData.unshift({
         date_added: t,
         user: n.get("user"),
         note: n.get("addNote")
@@ -2456,15 +2440,15 @@ const hi = {
       required: !1
     }
   }
-}, mi = { class: "container note-feed mb-2" }, _i = ["innerHTML"], pi = ["action", "method"], yi = ["value"], bi = /* @__PURE__ */ s("button", { class: "btn btn-tertiary" }, "Submit note", -1);
-function vi(e, n, t, c, h, a) {
+}, mi = { class: "container note-feed mb-2" }, _i = ["innerHTML"], yi = ["action", "method"], pi = ["value"], bi = /* @__PURE__ */ s("button", { class: "btn btn-tertiary" }, "Submit note", -1);
+function vi(e, n, t, d, h, a) {
   const r = C("Table"), i = C("Input");
   return o(), l("div", mi, [
     t.title ? (o(), l("span", {
       key: 0,
       class: "h3",
       innerHTML: t.title
-    }, null, 8, _i)) : m("v-if", !0),
+    }, null, 8, _i)) : p("", !0),
     A(r, T({
       fields: [{ key: "date_added" }, { key: "user" }, { key: "note" }],
       items: h.itemsData
@@ -2478,7 +2462,7 @@ function vi(e, n, t, c, h, a) {
         type: "hidden",
         value: t.user,
         name: "user"
-      }, null, 8, yi),
+      }, null, 8, pi),
       A(i, {
         id: "addNote",
         type: "textarea",
@@ -2487,32 +2471,32 @@ function vi(e, n, t, c, h, a) {
         class: "mw-100"
       }),
       bi
-    ], 40, pi)
+    ], 40, yi)
   ]);
 }
-const Ii = /* @__PURE__ */ g(hi, [["render", vi], ["__file", "/Users/james/workspace/work/component-library/src/components/NoteFeed/NoteFeed.vue"]]);
+const zi = /* @__PURE__ */ g(hi, [["render", vi]]);
 export {
-  Si as Accordion,
+  $i as Accordion,
   Ai as AccordionItem,
-  Pi as Alert,
-  $i as Banner,
-  Z as Card,
+  Ii as Alert,
+  Si as Banner,
+  R as Card,
   Ct as CardDeck,
   xi as Carousel,
   Ci as Drawer,
   ki as FileUploads,
   qi as Header,
   re as Icon,
-  P as Input,
+  I as Input,
   ue as Logo,
   Hi as Modal,
   Mi as Nav,
-  Ii as NoteFeed,
+  zi as NoteFeed,
   Ti as PropertySearchbar,
   Di as Step,
   Ni as Stepper,
-  ji as Tab,
-  R as Table,
+  Pi as Tab,
+  E as Table,
   Bi as Tabs,
   Li as Testimonial
 };