@iamproperty/components 3.2.0 → 3.4.5

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";
-const g = (e, n) => {
+import { openBlock as l, createElementBlock as o, createElementVNode as s, toDisplayString as k, normalizeClass as b, createCommentVNode as p, Fragment as $, renderList as x, renderSlot as v, withDirectives as N, mergeProps as T, vModelDynamic as O, vModelText as J, vModelSelect as X, resolveComponent as H, createVNode as S, createTextVNode as F, normalizeStyle as ee, withModifiers as te } from "vue";
+const g = (e, r) => {
   const t = e.__vccOpts || e;
-  for (const [c, h] of n)
-    t[c] = h;
+  for (const [u, h] of r)
+    t[u] = h;
   return t;
 }, se = {
   name: "Icon",
@@ -19,15 +19,15 @@ const g = (e, n) => {
     }
   }
 }, ae = { class: "icon" }, ie = ["xlink:href"];
-function ne(e, n, t, c, h, a) {
-  return o(), l("svg", ae, [
-    s("title", null, w(t.id), 1),
+function ne(e, r, t, u, h, a) {
+  return l(), o("svg", ae, [
+    s("title", null, k(t.id), 1),
     s("use", {
       "xlink:href": t.path + "#icon-" + t.id
     }, 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]]), le = {
   name: "Logo",
   props: {
     id: {
@@ -52,237 +52,238 @@ 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) {
-  return o(), l("div", {
-    class: v(a.className)
+}, oe = ["xlink:href"], ce = ["innerHTML"];
+function de(e, r, t, u, h, a) {
+  return l(), o("div", {
+    class: b(a.className)
   }, [
-    (o(), l("svg", null, [
-      s("title", null, "iam " + w(t.id), 1),
+    (l(), o("svg", null, [
+      s("title", null, "iam " + k(t.id), 1),
       s("use", {
         "xlink:href": t.path + a.src
-      }, null, 8, le)
+      }, null, 8, oe)
     ])),
-    t.desc ? (o(), l("span", {
+    t.desc ? (l(), o("span", {
       key: 0,
       innerHTML: t.desc
-    }, null, 8, ce)) : m("v-if", !0)
+    }, null, 8, ce)) : 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(le, [["render", de]]), 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));
-}, _e = (e, n) => String(e).padStart(n, "0");
-function E(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, r) => String(e).padStart(r, "0");
+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 r = e.querySelector("thead"), t = e.querySelector("tbody"), u = t.cloneNode(!0), h = new Event("sorted"), a = new Event("filtered"), n = 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 A = function(m, d) {
+    let c = [];
     Array.from(t.querySelectorAll("tr")).forEach((y, L) => {
-      let k = y.querySelector('td[data-label="' + _ + '"], th[data-label="' + _ + '"]').textContent;
-      me(k) && (k = _e(k, 10));
-      const F = {
-        index: k,
+      let w = y.querySelector('td[data-label="' + m + '"], th[data-label="' + m + '"]').textContent;
+      me(w) && (w = _e(w, 10));
+      const V = {
+        index: w,
         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(V);
+    }), c.sort((y, L) => y.index > L.index ? 1 : -1), d == "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 (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");
+  if (e.addEventListener("click", function(m) {
+    for (var d = m.target; d && d != this; d = d.parentNode)
+      if (d.matches("[data-sortable]")) {
+        let c = d.getAttribute("aria-sort") == "ascending" ? "descending" : "ascending";
+        Array.from(e.querySelectorAll("[data-sortable]")).forEach((_, y) => {
+          _.setAttribute("aria-sort", "none");
+        }), d.setAttribute("aria-sort", c), e.setAttribute("data-sort", c), e.setAttribute("data-sortBy", d.textContent), A(d.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((d, c) => {
+      d.textContent == e.getAttribute("data-sortBy") && (d.setAttribute("aria-sort", m), d.click());
     });
   }
-  const q = function(_) {
-    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 q = function(m) {
+    const d = document.createElement("div");
+    d.classList.add("table__filters"), d.classList.add("row"), d.classList.add("pt-1"), d.classList.add("pb-3");
+    const c = Array.from(e.querySelectorAll("th[data-filterable]"));
+    let _ = {};
+    c.forEach((w, V) => {
+      Array.from(e.querySelectorAll('td[data-label="' + w.textContent + '"]')).forEach((j, ci) => {
+        _[j.textContent] = j.textContent;
       });
     });
-    const y = d.length == 1 ? "Filter by " + d[0].textContent : "Filter", L = d.length == 1 ? "d-none" : "d-sm-flex";
-    u.innerHTML = `<div class="col-sm-6 col-md-4 pb-3">
+    const y = c.length == 1 ? "Filter by " + c[0].textContent : "Filter", L = c.length == 1 ? "d-none" : "d-sm-flex";
+    d.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((w) => `<option value="${w}"></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("")}
-</div>`, e.prepend(u);
-  }, M = function(_) {
-    let u = [];
-    Array.from(c.querySelectorAll("tr")).forEach((p, y) => {
+  ${'<span class="pe-3 text-nowrap h5 mb-0">Filter by: </span>' + c.map((w) => `<div class="form-check pe-3 mt-0 mb-0"><input class="form-check-input" type="checkbox" id="${i}_${w.textContent.replace(" ", "_").toLowerCase()}" checked="checked" /><label class="form-check-label text-nowrap" for="${i}_${w.textContent.replace(" ", "_").toLowerCase()}">${w.textContent}</label></div>`).join("")}
+</div>`, e.prepend(d);
+  }, M = function(m) {
+    let d = [];
+    Array.from(u.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 };
-        u.push(k);
+      if (Array.from(e.querySelectorAll('[type="checkbox"]:checked + label')).forEach((w, V) => {
+        L += _.querySelector('td[data-label="' + w.textContent + '"]').textContent + " | ";
+      }), L.indexOf(m) >= 0) {
+        const w = { row: _ };
+        d.push(w);
       }
     });
-    let d = "";
-    u.forEach((p, y) => {
-      d += p.row.outerHTML;
-    }), t.innerHTML = d, e.dispatchEvent(a);
+    let c = "";
+    d.forEach((_, y) => {
+      c += _.row.outerHTML;
+    }), t.innerHTML = c, e.dispatchEvent(a);
   }, I = function() {
-    let _ = [];
-    Array.from(e.querySelectorAll('[type="checkbox"]:checked + label')).forEach((p, y) => {
-      _.push(p.textContent);
+    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) => {
-        u[L.textContent] = L.textContent;
+    let d = [];
+    m.forEach((_, y) => {
+      Array.from(e.querySelectorAll('td[data-label="' + _ + '"]')).forEach((L, w) => {
+        d[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(d).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)
-      if (u.matches('input[type="search"]')) {
-        const d = u.value;
-        M(d);
+  Array.from(e.querySelectorAll("[data-filterable]")).length && (q(e, Array.from(e.querySelectorAll("[data-filterable]")).length), e.addEventListener("keyup", function(m) {
+    for (var d = m.target; d && d != this; d = d.parentNode)
+      if (d.matches('input[type="search"]')) {
+        const c = d.value;
+        M(c);
       }
-  }), e.addEventListener("change", function(_) {
-    for (var u = _.target; u && u != this; u = u.parentNode)
-      if (u.matches('input[type="search"]')) {
-        const d = u.value;
-        M(d);
+  }), e.addEventListener("change", function(m) {
+    for (var d = m.target; d && d != this; d = d.parentNode)
+      if (d.matches('input[type="search"]')) {
+        const c = d.value;
+        M(c);
       }
-  }), e.addEventListener("change", function(_) {
-    for (var u = _.target; u && u != this; u = u.parentNode)
-      if (u.matches('input[type="checkbox"]')) {
-        const d = e.querySelector('input[type="search"]').value;
-        M(d), I();
+  }), e.addEventListener("change", function(m) {
+    for (var d = m.target; d && d != this; d = d.parentNode)
+      if (d.matches('input[type="checkbox"]')) {
+        const c = e.querySelector('input[type="search"]').value;
+        M(c), I();
       }
   }));
-  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 C = function(m, d) {
+    let c = document.getElementById(i + "_style");
+    c == null && (c = document.createElement("style"), c.setAttribute("id", i + "_style"));
+    const _ = m * (d - 1) + 1, y = m * d;
+    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")), d = parseInt(e.getAttribute("data-page")) ? parseInt(e.getAttribute("data-page")) : 1, c = e.querySelectorAll("tbody tr").length;
+    m < c && (C(m, d), U(i, e, m, d, c), B(i, e, m, d, c), e.addEventListener("change", function(_) {
+      for (var y = _.target; y && y != this; y = y.parentNode)
+        y.matches('.table__pagination input[type="number"]') && (C(y.value, d), B(i, e, y.value, d, 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") && (C(e.getAttribute("data-show"), y.getAttribute("data-page")), B(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") && (C(e.getAttribute("data-show"), y.value), B(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 E(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 z = function() {
+    Array.from(t.querySelectorAll("tr")).forEach((m, d) => {
+      if (m.querySelector('[data-label="Order"]') == null) {
+        const c = document.createElement("th");
+        c.innerHTML = d + 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_" + (d + 1)), m.setAttribute("data-order", d + 1), m.setAttribute("draggable", "true"), m.addEventListener("dragstart", E);
     });
   };
   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"), r.querySelector("tr").prepend(m), z(), e.addEventListener("click", function(d) {
+      for (var c = d.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"), A("Order", "ascending"), Array.from(e.querySelectorAll("tbody tr")).forEach((_, y) => {
+            _.setAttribute("draggable", "true");
           });
           break;
         }
-    }, !1), document.addEventListener("dragover", function(u) {
-      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");
-    }, !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");
-    }, !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);
-          }), e.dispatchEvent(r));
+    }, !1), document.addEventListener("dragover", function(d) {
+      d.preventDefault();
+    }, !1), document.addEventListener("dragenter", function(d) {
+      d.preventDefault(), d.dataTransfer.dropEffect = "move";
+      for (var c = d.target; c && c != this; c = c.parentNode)
+        c.matches("[data-reorder] tbody tr") && c.classList.add("tr--dropable");
+    }, !1), document.addEventListener("dragleave", function(d) {
+      d.preventDefault();
+      for (var c = d.target; c && c != this; c = c.parentNode)
+        c.matches("[data-reorder] tbody tr") && c.classList.remove("tr--dropable");
+    }, !1), document.addEventListener("drop", function(d) {
+      d.preventDefault();
+      for (var c = d.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(n));
           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") && A(e.getAttribute("data-sortBy"), e.getAttribute("data-sort")), e.getAttribute("data-show")) {
+      const d = parseInt(e.getAttribute("data-show")), c = e.querySelectorAll("tbody tr").length, _ = e.querySelector(".table__pagination");
+      _ != null && _.remove(), d < c && (C(d, 1), U(i, e, d, 1, c), B(i, e, d, 1, c));
     }
-    e.getAttribute("data-reorder") && U();
-  }, !1), e.addEventListener("sorted", function(_) {
-    e.getAttribute("data-reorder") && U();
-  }, !1), e.addEventListener("populated", function(_) {
-    var u = e.querySelector(".table__filters");
-    u.remove();
-    var d = e.querySelector(".table__pagination");
+    e.getAttribute("data-reorder") && z();
+  }, !1), e.addEventListener("sorted", function(m) {
+    e.getAttribute("data-reorder") && z();
+  }, !1), e.addEventListener("populated", function(m) {
+    var d = e.querySelector(".table__filters");
     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, r, t, u, 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">
@@ -297,27 +298,27 @@ ${h > 20 ? '<option value="20">20</option>' : ""}
 </datalist>
 </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) {
+<div class="col mw-fit-content d-sm-flex justify-content-end align-items-center" id="${e}_paginationBtns"></div>`, r.append(a);
+}, B = function(e, r, t, u, h) {
   const a = document.getElementById(e + "_paginationBtns");
   if (a == null)
     return !1;
-  const r = Math.ceil(h / t);
-  if (r == 1)
+  const n = Math.ceil(h / t);
+  if (n == 1)
     a.innerHTML = "";
-  else if (r < 5) {
+  else if (n < 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>`;
+    for (let f = 1; f <= n; f++)
+      f == u ? 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>`}
+      ${u == 1 ? '<li class="page-item disabled"><span class="page-link">Previous</span></li>' : `<li class="page-item"><button class="page-link" data-page="${parseInt(u) - 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>`}
+      ${u == n ? '<li class="page-item disabled"><span class="page-link">Next</span></li>' : `<li class="page-item"><button class="page-link" data-page="${parseInt(u) + 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>`;
+    for (let f = 1; f <= n; f++)
+      f == u ? 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");
@@ -385,18 +386,18 @@ 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>`;
-      }), e.innerHTML = n;
+      let e = this.$refs.wrapper.querySelector("tbody"), r = "";
+      this.items.forEach((u, h) => {
+        let a = u.rowid ? u.rowid : "";
+        u = Object.fromEntries(Object.entries(u).filter(([n]) => n !== "rowid")), r += `<tr data-row-id="${a}">${Object.keys(u).map((n) => `<td data-label="${W(K(n))}" data-numeric="${G(u[n])}">${u[n]}</td>`).join("")}</tr>`;
+      }), e.innerHTML = r;
       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) {
-  return o(), l("div", {
+}, 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 Ae(e, r, t, u, h, a) {
+  return l(), o("div", {
     class: "table__wrapper",
     ref: "wrapper",
     "data-sortby": t.sortby,
@@ -406,35 +407,35 @@ function Se(e, n, t, c, h, a) {
     "data-reorder": t.reorder
   }, [
     s("table", null, [
-      t.fields ? (o(), l("thead", be, [
+      t.fields ? (l(), o("thead", be, [
         s("tr", {
-          class: v(t.headingclass)
+          class: b(t.headingclass)
         }, [
-          (o(!0), l($, 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))
+          (l(!0), o($, null, x(t.fields, (n) => (l(), o("th", {
+            key: n.key,
+            "data-sortable": n.sortable,
+            "data-filterable": n.filterable
+          }, k(a.cellHeading(n.key)), 9, ve))), 128))
         ], 2)
-      ])) : m("v-if", !0),
-      t.items ? (o(), l("tbody", ge, [
-        (o(!0), l($, null, x(t.items, (r, i) => (o(), l("tr", {
+      ])) : p("", !0),
+      t.items ? (l(), o("tbody", ge, [
+        (l(!0), o($, null, x(t.items, (n, i) => (l(), o("tr", {
           key: i,
-          "data-row-id": r.rowid
+          "data-row-id": n.rowid
         }, [
-          (o(!0), l($, null, x(Object.fromEntries(Object.entries(r).filter(([f]) => f !== "rowid")), (f, S) => (o(), l("td", {
-            key: S,
+          (l(!0), o($, null, x(Object.fromEntries(Object.entries(n).filter(([f]) => f !== "rowid")), (f, A) => (l(), o("td", {
+            key: A,
             innerHTML: f,
-            "data-label": a.cellHeading(S),
+            "data-label": a.cellHeading(A),
             "data-numeric": a.numericValue(f)
           }, null, 8, ke))), 128))
         ], 8, we))), 128))
-      ])) : m("v-if", !0)
+      ])) : p("", !0)
     ]),
-    b(e.$slots, "default")
-  ], 8, ye);
+    v(e.$slots, "default")
+  ], 8, pe);
 }
-const R = /* @__PURE__ */ g(pe, [["render", Se], ["__file", "/Users/james/workspace/work/component-library/src/elements/Table/Table.vue"]]), Ae = {
+const R = /* @__PURE__ */ g(ye, [["render", Ae]]), Se = {
   name: "Input",
   props: {
     value: {
@@ -605,8 +606,8 @@ const R = /* @__PURE__ */ g(pe, [["render", Se], ["__file", "/Users/james/worksp
     this.$nextTick(function() {
       let e = this.$refs.wrapper;
       if (e.parentNode && e.parentNode.classList.contains("form-check") || e.classList.length == 0) {
-        const n = document.createDocumentFragment();
-        Array.from(e.childNodes).forEach((t) => n.appendChild(t)), e.parentNode.insertBefore(n, e), e.parentNode.removeChild(e);
+        const r = document.createDocumentFragment();
+        Array.from(e.childNodes).forEach((t) => r.appendChild(t)), e.parentNode.insertBefore(r, e), e.parentNode.removeChild(e);
       }
     });
   },
@@ -621,39 +622,37 @@ const R = /* @__PURE__ */ g(pe, [["render", Se], ["__file", "/Users/james/worksp
 }, $e = ["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 = {
+}, He = ["type", "name", "id", "pattern", "list"], Ce = { 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) {
-  return o(), l("div", {
-    class: v(a.wrapperClass()),
+}, Be = ["type", "name", "id", "pattern", "list"], Pe = { class: "input-group-text flex-fill" }, De = ["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, r, t, u, h, a) {
+  return l(), o("div", {
+    class: b(a.wrapperClass()),
     ref: "wrapper"
   }, [
-    a.needsLabel() ? (o(), l("label", {
+    a.needsLabel() ? (l(), o("label", {
       key: 0,
-      class: v(`form-label${t.labelclass ? ` ${t.labelclass}` : ""}`),
+      class: b(`form-label${t.labelclass ? ` ${t.labelclass}` : ""}`),
       for: t.id,
       innerHTML: a.displayLabel(),
       title: t.title
-    }, null, 10, $e)) : m("v-if", !0),
-    m(" Prefix and Suffix "),
-    t.prefix ? (o(), l("span", {
+    }, null, 10, $e)) : p("", !0),
+    t.prefix ? (l(), o("span", {
       key: 1,
-      class: v(`prefix ${this.prefixClass} ${t.size ? `prefix-${t.size}` : ""}`),
+      class: b(`prefix ${this.prefixClass} ${t.size ? `prefix-${t.size}` : ""}`),
       innerHTML: t.prefix,
       role: "presentation"
-    }, null, 10, xe)) : m("v-if", !0),
-    t.suffix ? (o(), l("span", {
+    }, null, 10, xe)) : p("", !0),
+    t.suffix ? (l(), o("span", {
       key: 2,
-      class: v(`suffix ${this.suffixClass} ${t.size ? `suffix-${t.size}` : ""}`),
+      class: b(`suffix ${this.suffixClass} ${t.size ? `suffix-${t.size}` : ""}`),
       innerHTML: t.suffix,
       role: "presentation"
-    }, null, 10, qe)) : m("v-if", !0),
-    m(" Standard input field "),
-    a.isInput() ? N((o(), l("input", T({
+    }, null, 10, qe)) : p("", !0),
+    a.isInput() ? N((l(), o("input", T({
       key: 3,
-      "onUpdate:modelValue": n[0] || (n[0] = (r) => a.inputVal = r),
+      "onUpdate:modelValue": r[0] || (r[0] = (n) => a.inputVal = n),
       class: `form-control${t.size ? ` form-control-${t.size}` : ""}${t.inputclass ? ` ${t.inputclass}` : ""}`,
       type: t.type,
       name: t.name ? t.name : t.id,
@@ -661,14 +660,13 @@ function Ke(e, n, t, c, h, a) {
       pattern: a.needPattern(),
       list: a.hasOptions()
     }, e.$attrs, {
-      onKeyup: n[1] || (n[1] = (...r) => a.inputKeyup && a.inputKeyup(...r))
+      onKeyup: r[1] || (r[1] = (...n) => a.inputKeyup && a.inputKeyup(...n))
     }), null, 16, Le)), [
-      [z, a.inputVal]
-    ]) : m("v-if", !0),
-    m(" Textarea "),
-    t.type == "textarea" ? N((o(), l("textarea", T({
+      [O, a.inputVal]
+    ]) : p("", !0),
+    t.type == "textarea" ? N((l(), o("textarea", T({
       key: 4,
-      "onUpdate:modelValue": n[2] || (n[2] = (r) => a.inputVal = r),
+      "onUpdate:modelValue": r[2] || (r[2] = (n) => a.inputVal = n),
       class: `form-control${t.size ? ` form-control-${t.size}` : ""}${t.inputclass ? ` ${t.inputclass}` : ""}`,
       type: t.type,
       name: t.name ? t.name : t.id,
@@ -676,105 +674,99 @@ 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 "),
-    t.type == "range" ? (o(), l("div", Me, [
+    ]) : p("", !0),
+    t.type == "range" ? (l(), o("div", Me, [
       N(s("input", T({
-        "onUpdate:modelValue": n[3] || (n[3] = (r) => a.inputVal = r),
+        "onUpdate:modelValue": r[3] || (r[3] = (n) => a.inputVal = n),
         class: `form-range${t.inputclass ? ` ${t.inputclass}` : ""}`,
         type: t.type,
         name: t.name ? t.name : t.id,
         id: t.id,
         pattern: a.needPattern(),
         list: a.hasOptions()
-      }, e.$attrs, { oninput: "this.nextElementSibling.value=this.value;" }), null, 16, Ce), [
-        [z, a.inputVal]
+      }, e.$attrs, { oninput: "this.nextElementSibling.value=this.value;" }), null, 16, He), [
+        [O, a.inputVal]
       ]),
-      s("output", He, w(t.value), 1)
-    ])) : m("v-if", !0),
-    m(" Color picker "),
-    t.type == "color" ? (o(), l("div", Ne, [
+      s("output", Ce, k(t.value), 1)
+    ])) : p("", !0),
+    t.type == "color" ? (l(), o("div", Ne, [
       N(s("input", T({
-        "onUpdate:modelValue": n[4] || (n[4] = (r) => a.inputVal = r),
+        "onUpdate:modelValue": r[4] || (r[4] = (n) => a.inputVal = n),
         class: `form-control form-control-color${t.inputclass ? ` ${t.inputclass}` : ""}`,
         type: t.type,
         name: t.name ? t.name : t.id,
         id: t.id,
         pattern: a.needPattern(),
         list: a.hasOptions()
-      }, e.$attrs, { oninput: "this.nextElementSibling.value=this.value;" }), null, 16, De), [
-        [z, a.inputVal]
+      }, e.$attrs, { oninput: "this.nextElementSibling.value=this.value;" }), null, 16, Be), [
+        [O, a.inputVal]
       ]),
-      s("output", Be, w(t.value ? e.vale : "#000000"), 1)
-    ])) : m("v-if", !0),
-    m(" Select/dropdown "),
-    t.type == "select" ? N((o(), l("select", T({
+      s("output", Pe, k(t.value ? e.vale : "#000000"), 1)
+    ])) : p("", !0),
+    t.type == "select" ? N((l(), o("select", T({
       key: 7,
-      "onUpdate:modelValue": n[5] || (n[5] = (r) => a.inputVal = r),
+      "onUpdate:modelValue": r[5] || (r[5] = (n) => a.inputVal = n),
       class: `form-select${t.size ? ` form-select-${t.size}` : ""}${t.inputclass ? ` ${t.inputclass}` : ""}`,
       type: t.type,
       name: t.id,
       id: t.id,
       pattern: a.needPattern()
     }, e.$attrs), [
-      (o(!0), l($, null, x(t.options, (r, i) => (o(), l("option", {
+      (l(!0), o($, null, x(t.options, (n, i) => (l(), o("option", {
         key: i,
-        value: r.value
-      }, w(r.display ? r.display : r.value), 9, Pe))), 128))
-    ], 16, je)), [
+        value: n.value
+      }, k(n.display ? n.display : n.value), 9, Ie))), 128))
+    ], 16, De)), [
       [X, a.inputVal]
-    ]) : m("v-if", !0),
-    a.allowDatalist() ? (o(), l("datalist", {
+    ]) : p("", !0),
+    a.allowDatalist() ? (l(), o("datalist", {
       key: 8,
       id: t.id + "-list"
     }, [
-      (o(!0), l($, null, x(t.options, (r, i) => (o(), l("option", {
+      (l(!0), o($, null, x(t.options, (n, i) => (l(), o("option", {
         key: i,
-        value: r.value
-      }, w(r.value), 9, Ue))), 128))
-    ], 8, Ie)) : m("v-if", !0),
-    m(" Checkbox "),
-    t.type == "checkbox" || t.type == "radio" ? (o(), l("input", T({
+        value: n.value
+      }, k(n.value), 9, Ve))), 128))
+    ], 8, ze)) : p("", !0),
+    t.type == "checkbox" || t.type == "radio" ? (l(), o("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),
-    t.type == "checkbox" || t.type == "radio" ? (o(), l("label", {
+    }, e.$attrs), null, 16, Oe)) : p("", !0),
+    t.type == "checkbox" || t.type == "radio" ? (l(), o("label", {
       key: 10,
-      class: v(`form-label form-check-label${t.labelclass ? ` ${t.labelclass}` : ""}`),
+      class: b(`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 "),
-    t.type == "checkbox-btn" || t.type == "radio-btn" ? (o(), l("input", T({
+    }, null, 10, Fe)) : p("", !0),
+    t.type == "checkbox-btn" || t.type == "radio-btn" ? (l(), o("input", T({
       key: 11,
       class: `btn-check${t.inputclass ? ` ${t.inputclass}` : ""}`,
       type: t.type.replace("-btn", ""),
       autocomplete: "off",
       name: t.name ? t.name : t.id,
       id: t.id
-    }, e.$attrs), null, 16, Ve)) : m("v-if", !0),
-    t.type == "checkbox-btn" || t.type == "radio-btn" ? (o(), l("label", {
+    }, e.$attrs), null, 16, je)) : p("", !0),
+    t.type == "checkbox-btn" || t.type == "radio-btn" ? (l(), o("label", {
       key: 12,
-      class: v(`btn${t.labelclass ? ` ${t.labelclass}` : ""}`),
+      class: b(`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 "),
-    t.errormsg ? (o(), l("p", {
+      onClick: r[6] || (r[6] = (...n) => a.clickEvent && a.clickEvent(...n))
+    }, null, 10, We)) : p("", !0),
+    t.errormsg ? (l(), o("p", {
       key: 13,
       class: "invalid-feedback mb-0",
       innerHTML: t.errormsg
-    }, null, 8, We)) : m("v-if", !0),
-    b(e.$slots, "default")
+    }, null, 8, Ke)) : p("", !0),
+    v(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 D = /* @__PURE__ */ g(Se, [["render", Ue]]), Ge = {
   components: {
-    Input: P
+    Input: D
   },
   name: "FileUploads",
   props: {
@@ -795,21 +787,21 @@ 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" }, Re = { class: "row" }, Qe = { class: "col-12 col-md me-auto" }, Ye = /* @__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) {
-  const r = C("Input");
-  return o(), l("div", Ee, [
+], -1), Ee = ["data-maxfiles"];
+function Je(e, r, t, u, h, a) {
+  const n = H("Input");
+  return l(), o("div", Ze, [
     s("div", Re, [
       s("div", {
-        class: v(`${t.inputcolclass ? t.inputcolclass : "col-12 col-sm-4"}`)
+        class: b(`${t.inputcolclass ? t.inputcolclass : "col-12 col-sm-4"}`)
       }, [
-        A(r, {
+        S(n, {
           type: "file",
           id: t.id,
           name: `${t.id}[]`,
@@ -820,39 +812,39 @@ function Je(e, n, t, c, h, a) {
           "data-filesize": t.maxfilesize
         }, null, 8, ["id", "name", "data-filesize"])
       ], 2),
-      s("div", Ze, [
-        b(e.$slots, "default")
+      s("div", Qe, [
+        v(e.$slots, "default")
       ]),
-      Qe
+      Ye
     ]),
     s("button", {
       type: "button",
       class: "btn btn-secondary me-0",
       "data-add": "",
       "data-maxfiles": t.maxfiles
-    }, "+ Add file", 8, Ye)
+    }, "+ Add file", 8, Ee)
   ]);
 }
-const ki = /* @__PURE__ */ g(Ge, [["render", Je], ["__file", "/Users/james/workspace/work/component-library/src/elements/FileUploads/FileUploads.vue"]]);
+const ui = /* @__PURE__ */ g(Ge, [["render", Je]]);
 function Xe(e) {
   if (!e.classList.contains("accordion--keep-open")) {
-    const n = e.querySelectorAll(":scope > details");
-    n.forEach((t) => {
+    const r = e.querySelectorAll(":scope > details");
+    r.forEach((t) => {
       t.addEventListener("click", () => {
-        n.forEach((c) => {
-          c !== t && c.removeAttribute("open");
+        r.forEach((u) => {
+          u !== t && u.removeAttribute("open");
         });
       });
     });
   }
   if (window.location.hash && document.querySelector(window.location.hash + ":not([open]) summary")) {
-    const n = document.querySelector(window.location.hash + " summary");
-    n instanceof HTMLElement && n.click();
+    const r = document.querySelector(window.location.hash + " summary");
+    r instanceof HTMLElement && r.click();
   }
   window.addEventListener("hashchange", function() {
     if (window.location.hash && document.querySelector(window.location.hash + " summary")) {
-      const n = document.querySelector(window.location.hash + " summary");
-      n instanceof HTMLElement && n.click();
+      const r = document.querySelector(window.location.hash + " summary");
+      r instanceof HTMLElement && r.click();
     }
   });
 }
@@ -866,12 +858,12 @@ const et = {
   class: "container accordion",
   ref: "wrapper"
 };
-function st(e, n, t, c, h, a) {
-  return o(), l("div", tt, [
-    b(e.$slots, "default")
+function st(e, r, t, u, h, a) {
+  return l(), o("div", tt, [
+    v(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 fi = /* @__PURE__ */ g(et, [["render", st]]), at = {
   name: "AccordionItem",
   props: {
     title: {
@@ -910,29 +902,29 @@ const Si = /* @__PURE__ */ g(et, [["render", st], ["__file", "/Users/james/works
   key: 0,
   class: "accordion-body"
 };
-function ot(e, n, t, c, h, a) {
-  return o(), l("details", {
+function lt(e, r, t, u, h, a) {
+  return l(), o("details", {
     class: "accordion-item",
     id: a.createID(t.title)
   }, [
     s("summary", {
-      class: v(`${t.titlecolour ? `bg-${t.titlecolour}` : ""}`),
-      onClick: n[0] || (n[0] = (r) => h.show = !0)
+      class: b(`${t.titlecolour ? `bg-${t.titlecolour}` : ""}`),
+      onClick: r[0] || (r[0] = (n) => h.show = !0)
     }, [
       s("span", nt, [
-        j(w(t.title), 1),
-        t.badge ? (o(), l("span", {
+        F(k(t.title), 1),
+        t.badge ? (l(), o("span", {
           key: 0,
-          class: v(`badge bg-${t.badgecolour}`)
-        }, w(t.badge), 3)) : m("v-if", !0)
+          class: b(`badge bg-${t.badgecolour}`)
+        }, k(t.badge), 3)) : p("", !0)
       ])
     ], 2),
-    h.show ? (o(), l("div", rt, [
-      b(e.$slots, "default")
-    ])) : m("v-if", !0)
+    h.show ? (l(), o("div", rt, [
+      v(e.$slots, "default")
+    ])) : 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 hi = /* @__PURE__ */ g(at, [["render", lt]]), ot = {
   name: "Header",
   props: {
     title: {
@@ -950,32 +942,32 @@ const Ai = /* @__PURE__ */ g(at, [["render", ot], ["__file", "/Users/james/works
     }
   }
 }, 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, [
+function _t(e, r, t, u, h, a) {
+  return l(), o("div", ct, [
     s("div", {
-      class: v("bg-" + t.background + " mb-4")
+      class: b("bg-" + t.background + " mb-4")
     }, [
       s("div", dt, [
         s("div", ut, [
           s("div", ft, [
-            s("h2", null, w(t.title), 1),
-            b(e.$slots, "default")
+            s("h2", null, k(t.title), 1),
+            v(e.$slots, "default")
           ])
         ]),
         s("div", ht, [
-          t.image ? (o(), l("img", {
+          t.image ? (l(), o("img", {
             key: 0,
             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 mi = /* @__PURE__ */ g(ot, [["render", _t]]);
+const yt = {
   name: "Card",
   props: {
     link: {
@@ -1054,30 +1046,30 @@ 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 = `
+        }, r = 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>` : "", u = `
         ${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 `${r}${t}${u}${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"], At = ["src"], St = ["innerHTML"], $t = {
   key: 1,
   class: "card-footer"
 }, xt = { class: "visually-hidden" };
-function qt(e, n, t, c, h, a) {
-  return o(), l("a", {
+function qt(e, r, t, u, h, a) {
+  return l(), o("a", {
     href: t.link,
-    class: v("card" + (t.type ? " card--" + t.type : "") + " " + t.cardClass),
+    class: b("card" + (t.type ? " card--" + t.type : "") + " " + t.cardClass),
     title: t.ctatext + ": " + t.title + (t.subtitle ? " - " + t.subtitle : ""),
     target: t.target
   }, [
-    t.image ? (o(), l("div", bt, [
+    t.image ? (l(), o("div", bt, [
       s("img", {
         src: t.image,
         alt: "",
@@ -1085,43 +1077,43 @@ function qt(e, n, t, c, h, a) {
         class: "card-image"
       }, null, 8, vt),
       s("div", gt, [
-        this.details && this.details.status ? (o(), l("span", {
+        this.details && this.details.status ? (l(), o("span", {
           key: 0,
           class: "badge bg-primary p-2 me-2",
           innerHTML: a.cardStatus()
-        }, null, 8, wt)) : m("v-if", !0),
-        this.details && (this.details.images || this.details.videos) ? (o(), l("span", {
+        }, null, 8, wt)) : p("", !0),
+        this.details && (this.details.images || this.details.videos) ? (l(), o("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", {
+      t.details && t.details.logo ? (l(), o("img", {
         key: 0,
         src: t.details.logo,
         alt: "",
         loading: "lazy",
         class: "card-logo"
-      }, null, 8, St)) : m("v-if", !0)
-    ])) : m("v-if", !0),
+      }, null, 8, At)) : p("", !0)
+    ])) : p("", !0),
     s("div", {
       class: "card-body",
       innerHTML: a.cardContent()
-    }, null, 8, At),
-    t.hidectatext == !1 ? (o(), l("div", $t, [
+    }, null, 8, St),
+    t.hidectatext == !1 ? (l(), o("div", $t, [
       s("span", {
-        class: v(`${t.btntype == "link" ? "link" : `btn btn-${t.btntype}`} mb-0`)
+        class: b(`${t.btntype == "link" ? "link" : `btn btn-${t.btntype}`} mb-0`)
       }, [
-        j(w(t.ctatext), 1),
-        s("span", xt, ": " + w(t.title), 1)
+        F(k(t.ctatext), 1),
+        s("span", xt, ": " + k(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 Q = /* @__PURE__ */ g(yt, [["render", qt]]);
 const Lt = {
   components: {
-    Card: Z
+    Card: Q
   },
   name: "CardDeck",
   props: {
@@ -1176,21 +1168,21 @@ const Lt = {
     }
   }
 }, Tt = ["data-card-type"];
-function Mt(e, n, t, c, h, a) {
-  const r = C("Card");
-  return o(), l("div", {
+function Mt(e, r, t, u, h, a) {
+  const n = H("Card");
+  return l(), o("div", {
     class: "container card-deck prevent-invert",
     "data-card-type": t.cardtype
   }, [
-    b(e.$slots, "default"),
+    v(e.$slots, "default"),
     s("div", {
-      class: v(`row row-cols-${t.cols} row-cols-sm-${t.smcols} row-cols-md-${t.mdcols} ${t.gap ? `g-${t.gap}` : ""}`)
+      class: b(`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", {
+      (l(!0), o($, null, x(t.items, (i, f) => (l(), o("div", {
         class: "col",
         key: f
       }, [
-        A(r, T(i, {
+        S(n, T(i, {
           class: t.cardclass,
           type: t.cardtype,
           btntype: i.btntype ? i.btntype : t.btntype,
@@ -1200,27 +1192,27 @@ function Mt(e, n, t, c, h, a) {
         }), null, 16, ["class", "type", "btntype", "titleclass", "ctatext", "hidectatext"])
       ]))), 128))
     ], 2),
-    b(e.$slots, "after")
+    v(e.$slots, "after")
   ], 8, Tt);
 }
-const Ct = /* @__PURE__ */ g(Lt, [["render", Mt], ["__file", "/Users/james/workspace/work/component-library/src/components/CardDeck/CardDeck.vue"]]);
-function Ht(e) {
-  var n;
-  let t = e.querySelector(".carousel__inner"), c = e.querySelectorAll(".carousel__item").length;
+const Ht = /* @__PURE__ */ g(Lt, [["render", Mt]]);
+function Ct(e) {
+  var r;
+  let t = e.querySelector(".carousel__inner"), u = 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) => {
+  e.querySelector(".carousel__controls a").classList.add("active"), t.addEventListener("scroll", function(n) {
+    clearTimeout(r), r = setTimeout(function() {
+      let i = t.clientWidth, f = t.scrollWidth, A = t.scrollLeft, q = Math.round(A / f * u) + 1, M = e.querySelector(".carousel__item:last-child").offsetLeft;
+      Array.from(e.querySelectorAll(".carousel__controls a")).forEach((I, C) => {
         I.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)
+  }, !1), e.addEventListener("click", function(n) {
+    for (var i = n.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");
+        n.preventDefault(), Array.from(e.querySelectorAll(".carousel__controls a")).forEach((A, q) => {
+          A.classList.remove("active");
         }), i.classList.add("active");
         const f = document.querySelector(i.getAttribute("href"));
         t.scroll({
@@ -1230,10 +1222,10 @@ function Ht(e) {
         });
         break;
       }
-  }, !1), e.addEventListener("click", function(r) {
-    for (var i = r.target; i && i != this; i = i.parentNode)
+  }, !1), e.addEventListener("click", function(n) {
+    for (var i = n.target; i && i != this; i = i.parentNode)
       if (i.matches(".btn-next, .btn-prev")) {
-        r.preventDefault();
+        n.preventDefault();
         let f = i.classList.contains("btn-prev") ? t.scrollLeft - t.clientWidth : t.scrollLeft + t.clientWidth;
         t.scroll({
           top: 0,
@@ -1242,16 +1234,16 @@ 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), u == 1 && e.classList.add("hide-btns"), h >= u && e.classList.add("hide-sm-btns"), a >= u && e.classList.add("hide-md-btns");
 }
-let B = Ct.props;
-B.gap.default = 0;
-B.cols.default = 1;
-B.smcols.default = 2;
-B.mdcols.default = 4;
+let P = Ht.props;
+P.gap.default = 0;
+P.cols.default = 1;
+P.smcols.default = 2;
+P.mdcols.default = 4;
 const Nt = {
   components: {
-    Card: Z
+    Card: Q
   },
   name: "Carousel",
   data() {
@@ -1260,7 +1252,7 @@ const Nt = {
     };
   },
   props: {
-    ...B,
+    ...P,
     colclass: {
       type: String,
       required: !1
@@ -1277,20 +1269,20 @@ const Nt = {
   },
   mounted() {
     this.id = this._uid, this.$nextTick(function() {
-      Ht(this.$refs.wrapper);
+      Ct(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", {
+}, Bt = ["id", "data-cols", "data-sm-cols", "data-md-cols"], Pt = { class: "carousel__wrapper" }, Dt = { 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) {
-  const r = C("Card");
-  return o(), l("div", {
+function jt(e, r, t, u, h, a) {
+  const n = H("Card");
+  return l(), o("div", {
     class: "container carousel",
     id: "carousel" + h.id,
     ref: "wrapper",
@@ -1298,21 +1290,19 @@ 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 ")
-    ]),
-    s("div", Bt, [
-      s("div", jt, [
-        t.type == "card" ? (o(), l("div", {
+    v(e.$slots, "default"),
+    s("div", Pt, [
+      s("div", Dt, [
+        t.type == "card" ? (l(), o("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}` : ""}`)
+          class: b(`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", {
-            class: v(`col carousel__item${t.colclass ? ` ${t.colclass}` : ""}`),
+          (l(!0), o($, null, x(e.items, (i, f) => (l(), o("div", {
+            class: b(`col carousel__item${t.colclass ? ` ${t.colclass}` : ""}`),
             key: f,
             id: "carousel" + h.id + "slide" + (f + 1)
           }, [
-            A(r, T(i, {
+            S(n, T(i, {
               class: e.cardclass,
               type: e.cardtype,
               btnyype: e.btntype,
@@ -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),
-        t.type != "card" ? (o(), l("div", {
+          ], 10, It))), 128))
+        ], 2)) : p("", !0),
+        t.type != "card" ? (l(), o("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}` : ""}`)
+          class: b(`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", {
-            class: v(`col carousel__item${t.colclass ? ` ${t.colclass}` : ""}`),
+          (l(!0), o($, null, x(e.items, (i, f) => (l(), o("div", {
+            class: b(`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}`)
+        class: b(`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", {
+        (l(!0), o($, null, x(e.items, (i, f) => (l(), o("a", {
           key: f,
           href: "#carousel" + h.id + "slide" + (f + 1),
-          class: v(`control-${f + 1}`)
-        }, "Slide " + w(f + 1), 11, Ut))), 128))
+          class: b(`control-${f + 1}`)
+        }, "Slide " + k(f + 1), 11, Vt))), 128))
       ], 2),
-      Ft,
-      zt
+      Ot,
+      Ft
     ])
-  ], 8, Dt);
+  ], 8, Bt);
 }
-const xi = /* @__PURE__ */ g(Nt, [["render", Vt], ["__file", "/Users/james/workspace/work/component-library/src/components/Carousel/Carousel.vue"]]);
-const Ot = {
+const _i = /* @__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"], Rt = { key: 0 }, Qt = ["srcset"], Yt = /* @__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 "),
-      b(e.$slots, "breadcrumb"),
+function Et(e, r, t, u, h, a) {
+  return l(), o("header", Kt, [
+    s("div", Ut, [
+      v(e.$slots, "breadcrumb"),
       s("div", Gt, [
-        s("h1", { innerHTML: t.title }, null, 8, Et),
-        b(e.$slots, "default")
+        s("h1", { innerHTML: t.title }, null, 8, Zt),
+        v(e.$slots, "default")
       ])
     ]),
-    t.image ? (o(), l("picture", Rt, [
-      m(" Actual image only loaded on desktops "),
+    t.image ? (l(), o("picture", Rt, [
       s("source", {
         srcset: t.image,
         media: "(min-width: 62em)"
-      }, null, 8, Zt),
-      m(" Placeholder image "),
-      Qt
-    ])) : m("v-if", !0)
+      }, null, 8, Qt),
+      Yt
+    ])) : p("", !0)
   ]);
 }
-const qi = /* @__PURE__ */ g(Ot, [["render", Yt], ["__file", "/Users/james/workspace/work/component-library/src/components/Header/Header.vue"]]);
+const yi = /* @__PURE__ */ g(Wt, [["render", Et]]);
 function Jt(e) {
-  var n;
-  const t = e.querySelector(".testimonial__images"), c = t.querySelectorAll("img").length;
-  if (c == 1)
+  var r;
+  const t = e.querySelector(".testimonial__images"), u = t.querySelectorAll("img").length;
+  if (u == 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);
+    const n = e.querySelector(".btn-next"), i = e.querySelector(".btn-prev");
+    n.setAttribute("data-go", a + 1), i.setAttribute("data-go", a - 1), n.removeAttribute("disabled"), i.removeAttribute("disabled"), a == 1 ? i.setAttribute("disabled", !0) : a == u && n.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);
+    clearTimeout(r), r = setTimeout(function() {
+      let n = t.scrollWidth, i = t.scrollHeight, f = t.scrollLeft, A = t.scrollTop, q = Math.round(f / n * u) + 1;
+      f == 0 && A != 0 && (q = Math.round(A / i * u) + 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({
+    for (var n = a.target; n && n != this; n = n.parentNode)
+      if (n.matches("[data-go]")) {
+        let i = parseInt(n.getAttribute("data-go")), f = 0, A = 0, q = t.scrollWidth, M = t.scrollHeight;
+        q > M ? A = Math.floor(q * ((i - 1) / u)) : f = Math.floor(M * ((i - 1) / u)), t.scroll({
           top: f,
-          left: S,
+          left: A,
           behavior: "smooth"
         });
         break;
@@ -1445,41 +1432,41 @@ 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) {
-  return o(), l("div", es, [
+], -1), rs = { class: "col-md-7" }, ls = /* @__PURE__ */ s("h2", null, "What our customers think…", -1), os = { 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, r, t, u, h, a) {
+  return l(), o("div", es, [
     s("div", {
-      class: v("bg-" + t.background)
+      class: b("bg-" + t.background)
     }, [
       s("div", ts, [
         s("div", ss, [
           s("div", as, [
-            (o(!0), l($, null, x(t.items, (r, i) => (o(), l("img", {
+            (l(!0), o($, null, x(t.items, (n, i) => (l(), o("img", {
               key: i,
-              src: r.image ? r.image : "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
+              src: n.image ? n.image : "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
               alt: "",
-              class: v("h-100 w-100 object-cover" + (r.image ? "" : " opacity-0"))
+              class: b("h-100 w-100 object-cover" + (n.image ? "" : " opacity-0"))
             }, null, 10, is))), 128))
           ]),
           ns
         ]),
         s("div", rs, [
-          os,
-          s("div", ls, [
-            (o(!0), l($, null, x(t.items, (r, i) => (o(), l("blockquote", {
+          ls,
+          s("div", os, [
+            (l(!0), o($, null, x(t.items, (n, i) => (l(), o("blockquote", {
               key: i,
-              class: v(r.class)
+              class: b(n.class)
             }, [
               s("div", {
-                innerHTML: r.quote
+                innerHTML: n.quote
               }, null, 8, cs),
               s("cite", {
-                innerHTML: r.cite
+                innerHTML: n.cite
               }, null, 8, ds)
             ], 2))), 128))
           ]),
           s("div", us, [
-            b(e.$slots, "default")
+            v(e.$slots, "default")
           ])
         ])
       ]),
@@ -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 pi = /* @__PURE__ */ g(Xt, [["render", hs]]);
 const ms = {
   components: {
-    Input: P
+    Input: D
   },
   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,10 +1624,10 @@ 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" }, As = /* @__PURE__ */ s("span", { class: "form-label d-none d-md-block" }, "Number of beds", -1), Ss = {
   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" }, [
@@ -1650,30 +1637,30 @@ const ms = {
     value: "submit"
   }, "Search")
 ], -1);
-function qs(e, n, t, c, h, a) {
-  const r = C("Input");
-  return o(), l("div", _s, [
-    b(e.$slots, "default"),
-    s("div", ps, [
+function qs(e, r, t, u, h, a) {
+  const n = H("Input");
+  return l(), o("div", _s, [
+    v(e.$slots, "default"),
+    s("div", ys, [
       s("form", {
         class: "row",
         action: t.formaction,
         method: t.formmethod
       }, [
         s("fieldset", bs, [
-          A(r, {
+          S(n, {
             inputClass: "input--locations",
             modelValue: a.locationSet,
-            "onUpdate:modelValue": n[0] || (n[0] = (i) => a.locationSet = i),
+            "onUpdate:modelValue": r[0] || (r[0] = (i) => a.locationSet = i),
             label: "Location",
             id: "location",
             options: a.locationsList(),
             required: "",
             placeholder: "i.e. Newcastle or NE1",
-            onKeyupEvent: n[1] || (n[1] = (i) => a.locationKeyup(...arguments)),
+            onKeyupEvent: r[1] || (r[1] = (i) => a.locationKeyup(...arguments)),
             ref: "search"
           }, null, 8, ["modelValue", "options"]),
-          A(r, {
+          S(n, {
             class: "select--miles",
             label: "Miles",
             id: "miles",
@@ -1684,7 +1671,7 @@ function qs(e, n, t, c, h, a) {
         s("fieldset", vs, [
           gs,
           s("div", ws, [
-            A(r, {
+            S(n, {
               class: "col-6",
               label: "Minimum price",
               id: "price-min",
@@ -1692,7 +1679,7 @@ function qs(e, n, t, c, h, a) {
               type: "select",
               options: t.pricemin
             }, null, 8, ["options"]),
-            A(r, {
+            S(n, {
               class: "col-6",
               label: "Maximum price",
               id: "price-max",
@@ -1703,9 +1690,9 @@ function qs(e, n, t, c, h, a) {
           ])
         ]),
         s("fieldset", ks, [
-          Ss,
-          s("div", As, [
-            A(r, {
+          As,
+          s("div", Ss, [
+            S(n, {
               class: "col-6",
               label: "Minimum beds",
               id: "beds-min",
@@ -1713,7 +1700,7 @@ function qs(e, n, t, c, h, a) {
               type: "select",
               options: t.bedsmin
             }, null, 8, ["options"]),
-            A(r, {
+            S(n, {
               class: "col-6",
               label: "Maximum beds",
               id: "beds-max",
@@ -1724,7 +1711,7 @@ function qs(e, n, t, c, h, a) {
           ])
         ]),
         s("fieldset", $s, [
-          A(r, {
+          S(n, {
             label: "Property type",
             id: "property-type",
             type: "select",
@@ -1732,17 +1719,17 @@ function qs(e, n, t, c, h, a) {
           }, null, 8, ["options"])
         ]),
         xs
-      ], 8, ys)
+      ], 8, ps)
     ]),
-    b(e.$slots, "after")
+    v(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) => {
-  Array.from(e.querySelectorAll("details")).forEach((n, t) => {
-    n.addEventListener("mouseenter", function(c) {
-      window.matchMedia("(min-width: 62em)").matches && n.setAttribute("open", "true");
-    }, !1), n.addEventListener("mouseleave", function(c) {
-      window.matchMedia("(min-width: 62em)").matches && n.removeAttribute("open");
+const bi = /* @__PURE__ */ g(ms, [["render", qs]]), Ls = (e) => {
+  Array.from(e.querySelectorAll("details")).forEach((r, t) => {
+    r.addEventListener("mouseenter", function(u) {
+      window.matchMedia("(min-width: 62em)").matches && r.setAttribute("open", "true");
+    }, !1), r.addEventListener("mouseleave", function(u) {
+      window.matchMedia("(min-width: 62em)").matches && r.removeAttribute("open");
     }, !1);
   }), "IntersectionObserver" in window && new IntersectionObserver(
     ([t]) => t.target.classList.toggle("is-stuck", t.intersectionRatio < 1),
@@ -1751,7 +1738,7 @@ const Ti = /* @__PURE__ */ g(ms, [["render", qs], ["__file", "/Users/james/works
 };
 const Ts = {
   components: {
-    Input: P,
+    Input: D,
     Logo: ue,
     Icon: re
   },
@@ -1831,40 +1818,40 @@ const Ts = {
   name: "showMenu",
   id: "showMenu",
   class: "d-none"
-}, null, -1), Cs = /* @__PURE__ */ s("input", {
+}, null, -1), Hs = /* @__PURE__ */ s("input", {
   type: "checkbox",
   name: "showSearch",
   id: "showSearch",
   class: "d-none"
-}, null, -1), Hs = /* @__PURE__ */ s("input", {
+}, null, -1), Cs = /* @__PURE__ */ s("input", {
   type: "checkbox",
   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" }, Bs = { class: "container" }, Ps = { class: "row" }, Ds = {
   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"
@@ -1886,10 +1873,10 @@ const Ts = {
     })
   ])
 ], -1), Rs = [
-  Es
-], Zs = /* @__PURE__ */ s("div", { class: "col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn" }, [
+  Zs
+], Qs = /* @__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 = {
+], -1), Ys = { class: "col-12 col-md nav__menu ms-auto flex-row align-items-center" }, Es = {
   key: 3,
   class: "col nav__account-btn flex-row align-items-center"
 }, Js = /* @__PURE__ */ s("label", { for: "showAccount" }, [
@@ -1918,10 +1905,10 @@ const Ts = {
 }, aa = { class: "container" }, ia = {
   key: 1,
   class: "nav__menu--search"
-}, na = { class: "bg-gradient pt-4" }, ra = { class: "container" }, oa = {
+}, na = { class: "bg-gradient pt-4" }, ra = { class: "container" }, la = {
   key: 0,
   class: "nav__menu--account"
-}, la = { class: "container" }, ca = { class: "row mb-4" }, da = {
+}, oa = { class: "container" }, ca = { class: "row mb-4" }, da = {
   key: 0,
   class: "col mw-md-fit-content nav__logo"
 }, ua = {
@@ -1933,24 +1920,23 @@ 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) {
-  const r = C("Logo");
-  return o(), l("nav", {
-    class: v(`nav${a.hasSecondarySlot ? " has-secondary" : ""}`),
+function ya(e, r, t, u, h, a) {
+  const n = H("Logo");
+  return l(), o("nav", {
+    class: b(`nav${a.hasSecondarySlot ? " has-secondary" : ""}`),
     ref: "wrapper"
   }, [
     Ms,
-    Cs,
     Hs,
-    m(" Mobile bar "),
+    Cs,
     s("div", Ns, [
-      s("div", Ds, [
-        s("div", Bs, [
-          a.hasLogoSlot ? (o(), l("div", js, [
-            b(e.$slots, "logo")
-          ])) : (o(), l("div", Ps, [
-            s("a", Is, [
-              A(r, {
+      s("div", Bs, [
+        s("div", Ps, [
+          a.hasLogoSlot ? (l(), o("div", Ds, [
+            v(e.$slots, "logo")
+          ])) : (l(), o("div", Is, [
+            s("a", zs, [
+              S(n, {
                 id: t.logo,
                 path: t.logopath,
                 desc: t.logotext,
@@ -1958,18 +1944,18 @@ 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, [
-            b(e.$slots, "logo")
-          ])) : (o(), l("div", Ws, [
-            s("a", Ks, [
-              A(r, {
+    s("div", Os, [
+      s("div", Fs, [
+        s("div", js, [
+          a.hasLogoSlot ? (l(), o("div", Ws, [
+            v(e.$slots, "logo")
+          ])) : (l(), o("div", Ks, [
+            s("a", Us, [
+              S(n, {
                 id: t.logo,
                 path: t.logopath,
                 desc: t.logotext,
@@ -1977,43 +1963,42 @@ 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 "),
-          s("div", Qs, [
-            b(e.$slots, "default")
+          a.hasSearchSlot ? (l(), o("div", Gs, Rs)) : p("", !0),
+          Qs,
+          s("div", Ys, [
+            v(e.$slots, "default")
           ]),
-          a.hasAccountSlot ? (o(), l("div", Ys, Xs)) : m("v-if", !0),
-          t.btnlink ? (o(), l("div", ea, [
+          a.hasAccountSlot ? (l(), o("div", Es, Xs)) : p("", !0),
+          t.btnlink ? (l(), o("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, [
+      a.hasSecondarySlot ? (l(), o("div", sa, [
         s("div", aa, [
-          b(e.$slots, "secondary")
+          v(e.$slots, "secondary")
         ])
-      ])) : m("v-if", !0),
-      a.hasSearchSlot ? (o(), l("div", ia, [
+      ])) : p("", !0),
+      a.hasSearchSlot ? (l(), o("div", ia, [
         s("div", na, [
           s("div", ra, [
-            b(e.$slots, "search")
+            v(e.$slots, "search")
           ])
         ])
-      ])) : m("v-if", !0)
+      ])) : p("", !0)
     ]),
-    a.hasAccountSlot ? (o(), l("div", oa, [
-      s("div", la, [
+    a.hasAccountSlot ? (l(), o("div", la, [
+      s("div", oa, [
         s("div", ca, [
-          a.hasLogoSlot ? (o(), l("div", da, [
-            b(e.$slots, "logo")
-          ])) : (o(), l("div", ua, [
+          a.hasLogoSlot ? (l(), o("div", da, [
+            v(e.$slots, "logo")
+          ])) : (l(), o("div", ua, [
             s("a", fa, [
-              A(r, {
+              S(n, {
                 id: t.logo,
                 path: t.logopath,
                 desc: t.logotext,
@@ -2025,80 +2010,18 @@ function pa(e, n, t, c, h, a) {
         ])
       ]),
       s("div", ma, [
-        b(e.$slots, "account")
+        v(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 n = new IntersectionObserver(
-    function([c]) {
-      c.target.classList.toggle("in-view", c.intersectionRatio > 0), document.getElementById("showDrawer").checked = !1;
-    },
-    { threshold: [1] }
-  ), t = document.getElementById("drawer-end");
-  n.observe(t);
-};
-const ba = {
-  name: "Header",
-  props: {
-    label: {
-      type: String,
-      required: !0
-    }
-  },
-  mounted() {
-    this.$nextTick(function() {
-      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);
-      });
-    });
-  }
-}, va = { ref: "wrapper" }, ga = /* @__PURE__ */ s("input", {
-  type: "checkbox",
-  name: "showDrawer",
-  id: "showDrawer",
-  class: "d-none"
-}, null, -1), wa = { class: "drawer__btn pb-0" }, ka = { class: "container text-end pb-0" }, Sa = {
-  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" }, [
-  /* @__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")
-  ])
-], -1), xa = /* @__PURE__ */ s("hr", { id: "drawer-end" }, null, -1);
-function qa(e, n, t, c, h, a) {
-  return o(), l("div", va, [
-    ga,
-    s("div", wa, [
-      s("div", ka, [
-        s("label", Sa, w(t.label), 1)
-      ])
-    ]),
-    s("div", Aa, [
-      $a,
-      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 vi = /* @__PURE__ */ g(Ts, [["render", ya]]), pa = (e) => {
+  const r = e.querySelectorAll(".modal__outer a, .modal__outer button"), t = r[0], u = r[r.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(), u.focus()) : i.key === "Tab" && !i.shiftKey && document.activeElement == u && (i.preventDefault(), t.focus());
   }), document.addEventListener("keydown", function(i) {
     i.key === "Escape" && document.querySelector(".modal:target") && a();
   }), e.addEventListener("click", function(i) {
@@ -2114,16 +2037,16 @@ const Ci = /* @__PURE__ */ g(ba, [["render", qa], ["__file", "/Users/james/works
         break;
       }
   });
-  function r() {
+  function n() {
     if (location.hash === "#" + h) {
       console.log("Modal is now open");
       const i = document.querySelector(".modal:target .modal__inner > .youtube-embed:first-child:last-child a");
       console.log(i), i && i.click();
     }
   }
-  window.onhashchange = r;
+  window.onhashchange = n;
 };
-const Ta = {
+const ba = {
   name: "Modal",
   props: {
     id: {
@@ -2138,20 +2061,20 @@ const Ta = {
   },
   mounted() {
     this.$nextTick(function() {
-      La(this.$refs.modal);
+      pa(this.$refs.modal);
     });
   }
-}, 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", {
+}, va = ["id"], ga = ["href"], wa = /* @__PURE__ */ s("span", { class: "visually-hidden" }, "Close", -1), ka = [
+  wa
+], Aa = { class: "modal__outer" }, Sa = ["href"], $a = /* @__PURE__ */ s("span", { class: "visually-hidden" }, "Close", -1), xa = { class: "modal__inner" }, qa = /* @__PURE__ */ s("button", {
   class: "modal__dock--left btn btn-prev",
   tabindex: "-1"
-}, "Left", -1), Ua = /* @__PURE__ */ s("button", {
+}, "Left", -1), La = /* @__PURE__ */ s("button", {
   class: "modal__dock--right btn btn-next",
   tabindex: "-1"
 }, "Right", -1);
-function Fa(e, n, t, c, h, a) {
-  return o(), l("div", {
+function Ta(e, r, t, u, h, a) {
+  return l(), o("div", {
     class: "modal",
     id: t.id,
     role: "dialog",
@@ -2161,25 +2084,25 @@ function Fa(e, n, t, c, h, a) {
     s("a", {
       href: `#${t.returnid ? t.returnid : ""}`,
       tabindex: "-1"
-    }, Na, 8, Ca),
-    s("div", Da, [
+    }, ka, 8, ga),
+    s("div", Aa, [
       s("a", {
         href: `#${t.returnid ? t.returnid : ""}`,
         class: "btn btn-tertiary py-1 px-2"
       }, [
-        ja,
-        j("\u2715")
-      ], 8, Ba),
-      s("div", Pa, [
-        b(e.$slots, "default")
+        $a,
+        F("✕")
+      ], 8, Sa),
+      s("div", xa, [
+        v(e.$slots, "default")
       ])
     ]),
-    Ia,
-    Ua
-  ], 8, Ma);
+    qa,
+    La
+  ], 8, va);
 }
-const Hi = /* @__PURE__ */ g(Ta, [["render", Fa], ["__file", "/Users/james/workspace/work/component-library/src/components/Modal/Modal.vue"]]);
-const za = {
+const gi = /* @__PURE__ */ g(ba, [["render", Ta]]);
+const Ma = {
   name: "Stepper",
   props: {
     label: {
@@ -2192,27 +2115,25 @@ const za = {
       default: "Complete"
     }
   }
-}, Va = { class: "container" }, Oa = ["aria-label"], Wa = {
+}, Ha = { class: "container" }, Ca = ["aria-label"], Na = {
   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, [
+}, Ba = { class: "list-unstyled" }, Pa = { class: "h6 stepper__end" };
+function Da(e, r, t, u, h, a) {
+  return l(), o("div", Ha, [
     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 ? (l(), o("span", Na, k(t.label), 1)) : p("", !0),
+      s("ol", Ba, [
+        v(e.$slots, "default")
       ]),
-      s("span", Ga, w(t.endlabel), 1)
-    ], 8, Oa)
+      s("span", Pa, k(t.endlabel), 1)
+    ], 8, Ca)
   ]);
 }
-const Ni = /* @__PURE__ */ g(za, [["render", Ea], ["__file", "/Users/james/workspace/work/component-library/src/components/Stepper/Stepper.vue"]]), Ra = {
+const wi = /* @__PURE__ */ g(Ma, [["render", Da]]), Ia = {
   name: "Stepper",
   props: {
     url: {
@@ -2228,26 +2149,26 @@ const Ni = /* @__PURE__ */ g(za, [["render", Ea], ["__file", "/Users/james/works
       required: !1
     }
   }
-}, Za = ["href", "aria-current"], Qa = {
+}, za = ["href", "aria-current"], Va = {
   key: 0,
   class: "visually-hidden"
 };
-function Ya(e, n, t, c, h, a) {
-  return o(), l("li", null, [
+function Oa(e, r, t, u, h, a) {
+  return l(), o("li", null, [
     s("a", {
       href: t.url,
-      class: v(`${t.status ? "bg-" + t.status : ""}${typeof t.current < "u" ? "current" : ""}`),
+      class: b(`${t.status ? "bg-" + t.status : ""}${typeof t.current < "u" ? "current" : ""}`),
       "aria-current": typeof t.current < "u"
     }, [
       s("span", null, [
-        b(e.$slots, "default")
+        v(e.$slots, "default")
       ]),
-      t.status ? (o(), l("em", Qa, " - status: " + w(t.status), 1)) : m("v-if", !0)
-    ], 10, Za)
+      t.status ? (l(), o("em", Va, " - status: " + k(t.status), 1)) : p("", !0)
+    ], 10, za)
   ]);
 }
-const Di = /* @__PURE__ */ g(Ra, [["render", Ya], ["__file", "/Users/james/workspace/work/component-library/src/components/Stepper/Step.vue"]]);
-const Ja = {
+const ki = /* @__PURE__ */ g(Ia, [["render", Oa]]);
+const Fa = {
   name: "Tabs",
   data() {
     return {
@@ -2258,12 +2179,12 @@ const Ja = {
     tabLinks() {
       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 = {
+        let r = 1;
+        for (const [t, u] of Object.entries(this.$slots.default()))
+          if (u.props && u.props.title) {
+            let h = u.props.title, a = {
               name: this.tabsID,
-              id: this.tabsID + "_tab" + n++,
+              id: this.tabsID + "_tab" + r++,
               tabTitle: h
             };
             e.push(a);
@@ -2274,40 +2195,40 @@ 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++);
+      let r = 0;
+      for (const [t, u] of Object.entries(this.$slots.default()))
+        u.props && u.props.title && (r == e && (console.log(u), u.type.data().show = !0), r++);
     }
   }
-}, Xa = {
+}, ja = {
   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) {
-  return o(), l("div", Xa, [
-    (o(!0), l($, null, x(a.tabLinks(), (r, i) => (o(), l("input", {
+}, Wa = ["data-key", "name", "id", "checked"], Ka = { class: "tabs__links" }, Ua = ["for", "onClick"], Ga = { class: "tabs" };
+function Za(e, r, t, u, h, a) {
+  return l(), o("div", ja, [
+    (l(!0), o($, null, x(a.tabLinks(), (n, i) => (l(), o("input", {
       type: "radio",
       class: "tab__input",
       key: i,
       "data-key": i,
-      name: r.name,
-      id: r.id,
+      name: n.name,
+      id: n.id,
       checked: i == 0
-    }, null, 8, ei))), 128)),
-    s("div", ti, [
-      (o(!0), l($, null, x(a.tabLinks(), (r, i) => (o(), l("label", {
+    }, null, 8, Wa))), 128)),
+    s("div", Ka, [
+      (l(!0), o($, null, x(a.tabLinks(), (n, i) => (l(), o("label", {
         key: i,
-        for: r.id,
+        for: n.id,
         class: "link",
         onClick: (f) => a.openTab(i)
-      }, w(r.tabTitle), 9, si))), 128))
+      }, k(n.tabTitle), 9, Ua))), 128))
     ]),
-    s("div", ai, [
-      b(e.$slots, "default")
+    s("div", Ga, [
+      v(e.$slots, "default")
     ])
   ], 512);
 }
-const Bi = /* @__PURE__ */ g(Ja, [["render", ii], ["__file", "/Users/james/workspace/work/component-library/src/components/Tabs/Tabs.vue"]]), ni = {
+const Ai = /* @__PURE__ */ g(Fa, [["render", Za]]), Ra = {
   name: "Tab",
   props: {
     title: {
@@ -2325,24 +2246,24 @@ const Bi = /* @__PURE__ */ g(Ja, [["render", ii], ["__file", "/Users/james/works
     };
   },
   watch: {
-    show(e, n) {
+    show(e, r) {
       console.log(e);
     }
   }
-}, ri = {
+}, Qa = {
   key: 0,
   class: "tab"
 };
-function oi(e, n, t, c, h, a) {
-  return h.show ? (o(), l("div", ri, [
-    b(e.$slots, "default")
-  ])) : m("v-if", !0);
+function Ya(e, r, t, u, h, a) {
+  return h.show ? (l(), o("div", Qa, [
+    v(e.$slots, "default")
+  ])) : p("", !0);
 }
-const ji = /* @__PURE__ */ g(ni, [["render", oi], ["__file", "/Users/james/workspace/work/component-library/src/components/Tabs/Tab.vue"]]);
-function li(e) {
+const Si = /* @__PURE__ */ g(Ra, [["render", Ya]]);
+function Ea(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 u = t.target; u && u != this; u = u.parentNode)
+      if (u.matches(".btn-close")) {
         t.preventDefault(), e.classList.remove("show"), setTimeout(function() {
           e.remove();
         }, 300);
@@ -2361,10 +2282,10 @@ function li(e) {
     let t = document.createElement("div");
     t.classList.add("alert__holder"), document.querySelector("main") ? document.querySelector("main").appendChild(t) : document.body.appendChild(t);
   }
-  let n = document.querySelector(".alert__holder");
-  e.classList.contains("alert--fixed") && !e.parentNode.classList.contains("alert__wrapper") && n.appendChild(e);
+  let r = document.querySelector(".alert__holder");
+  e.classList.contains("alert--fixed") && !e.parentNode.classList.contains("alert__wrapper") && r.appendChild(e);
 }
-const ci = {
+const Ja = {
   name: "Alert",
   props: {
     dismissible: {
@@ -2383,55 +2304,56 @@ const ci = {
     }
   },
   mounted() {
-    li(this.$refs.wrapper);
+    Ea(this.$refs.wrapper);
   }
-}, di = ["data-timeout"], ui = {
+}, Xa = ["data-timeout"], ei = {
   key: 0,
   type: "button",
   class: "btn-close",
   "data-bs-dismiss": "alert",
   "aria-label": "Close"
 };
-function fi(e, n, t, c, h, a) {
-  return o(), l("div", {
-    class: v(`container alert pb-0 ${t.dismissible ? "alert--dismissible fade show" : ""}`),
+function ti(e, r, t, u, h, a) {
+  return l(), o("div", {
+    class: b(`container alert pb-0 ${t.dismissible ? "alert--dismissible fade show" : ""}`),
     ref: "wrapper",
     "data-timeout": t.timeout,
     style: ee(t.timeout ? `--animation-length: ${t.timeout}ms` : "")
   }, [
     s("div", {
-      class: v(`alert__inner bg-${t.colour}`),
+      class: b(`alert__inner bg-${t.colour}`),
       role: "alert"
     }, [
-      t.dismissible ? (o(), l("button", ui)) : m("v-if", !0),
-      b(e.$slots, "default")
+      t.dismissible ? (l(), o("button", ei)) : p("", !0),
+      v(e.$slots, "default")
     ], 2)
-  ], 14, di);
+  ], 14, Xa);
 }
-const Pi = /* @__PURE__ */ g(ci, [["render", fi], ["__file", "/Users/james/workspace/work/component-library/src/components/Alert/Alert.vue"]]);
-let Q = R.props;
-Q.fields.required = !1;
-const hi = {
+const $i = /* @__PURE__ */ g(Ja, [["render", ti]]);
+let Y = R.props;
+Y.fields.required = !1;
+const si = {
   components: {
     Table: R,
-    Input: P
+    Input: D
   },
   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();
+      const r = new FormData(e.target);
+      let t = /* @__PURE__ */ new Date();
+      const u = 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 + "/" + u, this.itemsData.unshift({
         date_added: t,
-        user: n.get("user"),
-        note: n.get("addNote")
+        user: r.get("user"),
+        note: r.get("addNote")
       }), this.$emit("formSubmitted", e);
     }
   },
@@ -2441,7 +2363,7 @@ const hi = {
       type: String,
       required: !0
     },
-    ...Q,
+    ...Y,
     title: {
       type: String,
       required: !1
@@ -2456,63 +2378,62 @@ 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) {
-  const r = C("Table"), i = C("Input");
-  return o(), l("div", mi, [
-    t.title ? (o(), l("span", {
+}, ai = { class: "container note-feed mb-2" }, ii = ["innerHTML"], ni = ["action", "method"], ri = ["value"], li = /* @__PURE__ */ s("button", { class: "btn btn-tertiary" }, "Submit note", -1);
+function oi(e, r, t, u, h, a) {
+  const n = H("Table"), i = H("Input");
+  return l(), o("div", ai, [
+    t.title ? (l(), o("span", {
       key: 0,
       class: "h3",
       innerHTML: t.title
-    }, null, 8, _i)) : m("v-if", !0),
-    A(r, T({
+    }, null, 8, ii)) : p("", !0),
+    S(n, T({
       fields: [{ key: "date_added" }, { key: "user" }, { key: "note" }],
       items: h.itemsData
     }, e.$props, { class: "mb-0" }), null, 16, ["items"]),
     s("form", {
       action: t.action,
       method: t.method,
-      onSubmit: n[0] || (n[0] = te((f) => a.submitForm(...arguments), ["prevent"]))
+      onSubmit: r[0] || (r[0] = te((f) => a.submitForm(...arguments), ["prevent"]))
     }, [
       s("input", {
         type: "hidden",
         value: t.user,
         name: "user"
-      }, null, 8, yi),
-      A(i, {
+      }, null, 8, ri),
+      S(i, {
         id: "addNote",
         type: "textarea",
         label: "Add note",
         required: "",
         class: "mw-100"
       }),
-      bi
-    ], 40, pi)
+      li
+    ], 40, ni)
   ]);
 }
-const Ii = /* @__PURE__ */ g(hi, [["render", vi], ["__file", "/Users/james/workspace/work/component-library/src/components/NoteFeed/NoteFeed.vue"]]);
+const xi = /* @__PURE__ */ g(si, [["render", oi]]);
 export {
-  Si as Accordion,
-  Ai as AccordionItem,
-  Pi as Alert,
-  $i as Banner,
-  Z as Card,
-  Ct as CardDeck,
-  xi as Carousel,
-  Ci as Drawer,
-  ki as FileUploads,
-  qi as Header,
+  fi as Accordion,
+  hi as AccordionItem,
+  $i as Alert,
+  mi as Banner,
+  Q as Card,
+  Ht as CardDeck,
+  _i as Carousel,
+  ui as FileUploads,
+  yi as Header,
   re as Icon,
-  P as Input,
+  D as Input,
   ue as Logo,
-  Hi as Modal,
-  Mi as Nav,
-  Ii as NoteFeed,
-  Ti as PropertySearchbar,
-  Di as Step,
-  Ni as Stepper,
-  ji as Tab,
+  gi as Modal,
+  vi as Nav,
+  xi as NoteFeed,
+  bi as PropertySearchbar,
+  ki as Step,
+  wi as Stepper,
+  Si as Tab,
   R as Table,
-  Bi as Tabs,
-  Li as Testimonial
+  Ai as Tabs,
+  pi as Testimonial
 };