@davidbirchall/core 1.0.11 → 1.0.13

package/dist/index.js

@@ -0,0 +1,1190 @@
+import { defineComponent as C, openBlock as a, createElementBlock as l, normalizeClass as w, renderSlot as D, createBlock as W, resolveDynamicComponent as K, mergeProps as me, toHandlers as fe, withCtx as j, createCommentVNode as c, ref as V, computed as M, createElementVNode as s, withModifiers as T, toDisplayString as r, Fragment as L, renderList as N, createTextVNode as Y, watch as Q, onMounted as Z, onBeforeUnmount as ee, Teleport as J, normalizeStyle as U, createVNode as X, onUnmounted as ve, Transition as te } from "vue";
+const he = /* @__PURE__ */ C({
+  __name: "Badge",
+  props: {
+    variant: { default: "primary" },
+    size: { default: "medium" }
+  },
+  setup(e) {
+    return (m, t) => (a(), l("span", {
+      class: w(["badge", `badge--${e.variant}`, `badge--${e.size}`])
+    }, [
+      D(m.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), x = (e, m) => {
+  const t = e.__vccOpts || e;
+  for (const [f, u] of m)
+    t[f] = u;
+  return t;
+}, Va = /* @__PURE__ */ x(he, [["__scopeId", "data-v-f310f0d4"]]), be = {
+  key: 0,
+  class: "sr-only"
+}, ye = /* @__PURE__ */ C({
+  __name: "Button",
+  props: {
+    variant: { default: "primary" },
+    disabled: { type: Boolean, default: !1 },
+    url: {},
+    target: { default: "_self" }
+  },
+  emits: ["click"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = (v) => {
+      t.disabled ? (v.preventDefault(), v.stopImmediatePropagation()) : f("click", v);
+    };
+    return (v, d) => (a(), W(K(e.url ? "a" : "button"), me({
+      href: e.url,
+      target: e.url ? e.target : void 0,
+      rel: e.url && e.target === "_blank" ? "noopener noreferrer" : void 0,
+      class: ["btn", `btn--${e.variant}`, { "btn--disabled": e.disabled }],
+      disabled: !e.url && e.disabled,
+      "aria-disabled": e.disabled
+    }, fe(e.url ? {} : { click: u })), {
+      default: j(() => [
+        D(v.$slots, "default", {}, void 0, !0),
+        e.url && e.target === "_blank" ? (a(), l("span", be, "(opens in new window)")) : c("", !0)
+      ]),
+      _: 3
+    }, 16, ["href", "target", "rel", "class", "disabled", "aria-disabled"]));
+  }
+}), Da = /* @__PURE__ */ x(ye, [["__scopeId", "data-v-86500989"]]), pe = { class: "calendar" }, ge = { class: "calendar-header" }, ke = { class: "calendar-title" }, $e = {
+  key: 0,
+  class: "calendar-body"
+}, _e = { class: "calendar-weekdays" }, we = { class: "calendar-days" }, Ve = ["onClick", "disabled"], De = {
+  key: 1,
+  class: "calendar-picker"
+}, Ce = { class: "calendar-picker-grid" }, xe = ["onClick"], Ie = {
+  key: 2,
+  class: "calendar-picker"
+}, Se = { class: "calendar-picker-nav" }, Be = { class: "calendar-picker-range" }, Me = { class: "calendar-picker-grid" }, Pe = ["onClick"], Oe = /* @__PURE__ */ C({
+  __name: "Calendar",
+  props: {
+    modelValue: {},
+    mode: { default: "single" },
+    minDate: {},
+    maxDate: {},
+    disabledDates: {},
+    locale: { default: "en-US" },
+    firstDayOfWeek: { default: 0 },
+    initialDate: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, v = (() => {
+      if (t.initialDate) {
+        const [n, k, i] = t.initialDate.split("-").map(Number);
+        return new Date(n, k - 1, i);
+      }
+      if (t.modelValue) {
+        if (typeof t.modelValue == "string") {
+          const [n, k, i] = t.modelValue.split("-").map(Number);
+          return new Date(n, k - 1, i);
+        }
+        if (typeof t.modelValue == "object" && "start" in t.modelValue && t.modelValue.start) {
+          const [n, k, i] = t.modelValue.start.split("-").map(Number);
+          return new Date(n, k - 1, i);
+        }
+        if (Array.isArray(t.modelValue) && t.modelValue.length > 0) {
+          const [n, k, i] = t.modelValue[0].split("-").map(Number);
+          return new Date(n, k - 1, i);
+        }
+      }
+      return /* @__PURE__ */ new Date();
+    })(), d = V(v.getMonth()), p = V(v.getFullYear()), o = V(null), h = V(null), b = V(Math.floor(v.getFullYear() / 12) * 12), I = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], q = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], P = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], z = M(() => q[d.value]), _ = M(() => {
+      const n = [...P];
+      return t.firstDayOfWeek > 0 ? [...n.slice(t.firstDayOfWeek), ...n.slice(0, t.firstDayOfWeek)] : n;
+    }), y = M(() => Array.from({ length: 12 }, (n, k) => b.value + k)), g = M(() => {
+      const n = b.value, k = n + 11;
+      return `${n} - ${k}`;
+    }), S = M(() => {
+      const n = [], k = new Date(p.value, d.value, 1), i = new Date(p.value, d.value + 1, 0);
+      let O = k.getDay() - t.firstDayOfWeek;
+      O < 0 && (O += 7);
+      const G = new Date(p.value, d.value, 0).getDate();
+      for (let E = O - 1; E >= 0; E--) {
+        const F = new Date(p.value, d.value - 1, G - E);
+        n.push($(F, !1));
+      }
+      for (let E = 1; E <= i.getDate(); E++) {
+        const F = new Date(p.value, d.value, E);
+        n.push($(F, !0));
+      }
+      const ue = 42 - n.length;
+      for (let E = 1; E <= ue; E++) {
+        const F = new Date(p.value, d.value + 1, E);
+        n.push($(F, !1));
+      }
+      return n;
+    }), $ = (n, k) => {
+      const i = B(n), O = B(/* @__PURE__ */ new Date());
+      return {
+        date: n,
+        dateString: i,
+        isCurrentMonth: k,
+        isToday: i === O,
+        isSelected: R(i),
+        isDisabled: A(i),
+        isInRange: H(i)
+      };
+    }, B = (n) => {
+      const k = n.getFullYear(), i = String(n.getMonth() + 1).padStart(2, "0"), O = String(n.getDate()).padStart(2, "0");
+      return `${k}-${i}-${O}`;
+    }, R = (n) => t.modelValue ? t.mode === "single" ? t.modelValue === n : t.mode === "multiple" && Array.isArray(t.modelValue) ? t.modelValue.includes(n) : t.mode === "range" && typeof t.modelValue == "object" && "start" in t.modelValue ? n === t.modelValue.start || n === t.modelValue.end : !1 : !1, A = (n) => {
+      var k;
+      return !!(t.minDate && n < t.minDate || t.maxDate && n > t.maxDate || (k = t.disabledDates) != null && k.includes(n));
+    }, H = (n) => {
+      if (t.mode !== "range" || typeof t.modelValue != "object" || !("start" in t.modelValue)) return !1;
+      const { start: k, end: i } = t.modelValue;
+      return !k || !i ? !1 : n > k && n < i;
+    }, ae = (n) => {
+      if (!n.isDisabled) {
+        if (t.mode === "single")
+          f("update:modelValue", n.dateString);
+        else if (t.mode === "multiple") {
+          const k = Array.isArray(t.modelValue) ? [...t.modelValue] : [], i = k.indexOf(n.dateString);
+          i > -1 ? k.splice(i, 1) : k.push(n.dateString), f("update:modelValue", k);
+        } else if (t.mode === "range")
+          if (!h.value)
+            h.value = n.dateString, f("update:modelValue", { start: n.dateString, end: n.dateString });
+          else {
+            const k = h.value < n.dateString ? h.value : n.dateString, i = h.value < n.dateString ? n.dateString : h.value;
+            f("update:modelValue", { start: k, end: i }), h.value = null;
+          }
+      }
+    }, le = () => {
+      d.value === 0 ? (d.value = 11, p.value--) : d.value--;
+    }, se = () => {
+      d.value === 11 ? (d.value = 0, p.value++) : d.value++;
+    }, ne = () => {
+      o.value = o.value === "month" ? null : "month";
+    }, oe = () => {
+      o.value !== "year" && (b.value = Math.floor(p.value / 12) * 12), o.value = o.value === "year" ? null : "year";
+    }, re = (n) => {
+      d.value = n, o.value = null;
+    }, de = (n) => {
+      p.value = n, o.value = null;
+    }, ie = () => {
+      b.value -= 12;
+    }, ce = () => {
+      b.value += 12;
+    };
+    return (n, k) => (a(), l("div", pe, [
+      s("div", ge, [
+        s("button", {
+          onClick: T(le, ["stop"]),
+          class: "calendar-nav",
+          type: "button"
+        }, " ‹ "),
+        s("div", ke, [
+          s("button", {
+            onClick: T(ne, ["stop"]),
+            class: "calendar-month-btn",
+            type: "button"
+          }, r(z.value), 1),
+          s("button", {
+            onClick: T(oe, ["stop"]),
+            class: "calendar-year-btn",
+            type: "button"
+          }, r(p.value), 1)
+        ]),
+        s("button", {
+          onClick: T(se, ["stop"]),
+          class: "calendar-nav",
+          type: "button"
+        }, " › ")
+      ]),
+      o.value ? o.value === "month" ? (a(), l("div", De, [
+        s("div", Ce, [
+          (a(), l(L, null, N(I, (i, O) => s("button", {
+            key: i,
+            onClick: T((G) => re(O), ["stop"]),
+            type: "button",
+            class: w([
+              "calendar-picker-item",
+              { "calendar-picker-item--selected": O === d.value }
+            ])
+          }, r(i), 11, xe)), 64))
+        ])
+      ])) : o.value === "year" ? (a(), l("div", Ie, [
+        s("div", Se, [
+          s("button", {
+            onClick: T(ie, ["stop"]),
+            class: "calendar-nav",
+            type: "button"
+          }, " ‹ "),
+          s("span", Be, r(g.value), 1),
+          s("button", {
+            onClick: T(ce, ["stop"]),
+            class: "calendar-nav",
+            type: "button"
+          }, " › ")
+        ]),
+        s("div", Me, [
+          (a(!0), l(L, null, N(y.value, (i) => (a(), l("button", {
+            key: i,
+            onClick: T((O) => de(i), ["stop"]),
+            type: "button",
+            class: w([
+              "calendar-picker-item",
+              { "calendar-picker-item--selected": i === p.value }
+            ])
+          }, r(i), 11, Pe))), 128))
+        ])
+      ])) : c("", !0) : (a(), l("div", $e, [
+        s("div", _e, [
+          (a(!0), l(L, null, N(_.value, (i) => (a(), l("div", {
+            key: i,
+            class: "calendar-weekday"
+          }, r(i), 1))), 128))
+        ]),
+        s("div", we, [
+          (a(!0), l(L, null, N(S.value, (i) => (a(), l("button", {
+            key: i.dateString,
+            onClick: (O) => ae(i),
+            type: "button",
+            disabled: i.isDisabled,
+            class: w([
+              "calendar-day",
+              {
+                "calendar-day--other-month": !i.isCurrentMonth,
+                "calendar-day--today": i.isToday,
+                "calendar-day--selected": i.isSelected,
+                "calendar-day--disabled": i.isDisabled,
+                "calendar-day--in-range": i.isInRange
+              }
+            ])
+          }, r(i.date.getDate()), 11, Ve))), 128))
+        ])
+      ]))
+    ]));
+  }
+}), Te = /* @__PURE__ */ x(Oe, [["__scopeId", "data-v-446fa187"]]), Ee = {
+  key: 0,
+  class: "card__header"
+}, Le = { class: "card__body" }, Re = {
+  key: 1,
+  class: "card__footer"
+}, Ae = /* @__PURE__ */ C({
+  __name: "Card",
+  props: {
+    hoverable: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (m, t) => (a(), l("div", {
+      class: w(["card", { "card--hoverable": e.hoverable }])
+    }, [
+      m.$slots.header ? (a(), l("div", Ee, [
+        D(m.$slots, "header", {}, void 0, !0)
+      ])) : c("", !0),
+      s("div", Le, [
+        D(m.$slots, "default", {}, void 0, !0)
+      ]),
+      m.$slots.footer ? (a(), l("div", Re, [
+        D(m.$slots, "footer", {}, void 0, !0)
+      ])) : c("", !0)
+    ], 2));
+  }
+}), Ca = /* @__PURE__ */ x(Ae, [["__scopeId", "data-v-3c027648"]]), Ne = { class: "checkbox-wrapper" }, qe = ["checked", "disabled", "required"], ze = {
+  key: 0,
+  class: "checkbox-text"
+}, Ye = {
+  key: 0,
+  class: "checkbox-error"
+}, Fe = /* @__PURE__ */ C({
+  __name: "Checkbox",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    label: {},
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    error: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    const t = m, f = (u) => {
+      const v = u.target;
+      t("update:modelValue", v.checked);
+    };
+    return (u, v) => (a(), l("div", Ne, [
+      s("label", {
+        class: w(["checkbox-label", { "checkbox-label--disabled": e.disabled }])
+      }, [
+        s("input", {
+          type: "checkbox",
+          class: "checkbox-input",
+          checked: e.modelValue,
+          disabled: e.disabled,
+          required: e.required,
+          onChange: f
+        }, null, 40, qe),
+        v[0] || (v[0] = s("span", { class: "checkbox-box" }, null, -1)),
+        e.label ? (a(), l("span", ze, r(e.label), 1)) : c("", !0)
+      ], 2),
+      e.error ? (a(), l("span", Ye, r(e.error), 1)) : c("", !0)
+    ]));
+  }
+}), xa = /* @__PURE__ */ x(Fe, [["__scopeId", "data-v-ce644bb9"]]), We = { class: "data-table" }, He = { class: "data-table__wrapper" }, Ue = { class: "data-table__table" }, je = { class: "data-table__head" }, Je = ["onClick"], Xe = { class: "data-table__header-content" }, Ge = {
+  key: 0,
+  class: "data-table__sort-icon"
+}, Ke = { key: 0 }, Qe = {
+  key: 1,
+  class: "data-table__sort-icon--inactive"
+}, Ze = { key: 0 }, et = ["colspan"], tt = /* @__PURE__ */ C({
+  __name: "DataTable",
+  props: {
+    columns: {},
+    data: {},
+    hoverable: { type: Boolean, default: !0 },
+    emptyText: { default: "No data available" }
+  },
+  setup(e) {
+    const m = e, t = V(null), f = V("asc"), u = (d) => {
+      t.value === d ? f.value = f.value === "asc" ? "desc" : "asc" : (t.value = d, f.value = "asc");
+    }, v = M(() => t.value ? [...m.data].sort((d, p) => {
+      const o = d[t.value], h = p[t.value];
+      if (o === h) return 0;
+      let b = 0;
+      return typeof o == "number" && typeof h == "number" ? b = o - h : b = String(o).localeCompare(String(h)), f.value === "asc" ? b : -b;
+    }) : m.data);
+    return (d, p) => (a(), l("div", We, [
+      s("div", He, [
+        s("table", Ue, [
+          s("thead", je, [
+            s("tr", null, [
+              (a(!0), l(L, null, N(e.columns, (o) => (a(), l("th", {
+                key: o.key,
+                class: w(["data-table__header", { "data-table__header--sortable": o.sortable }]),
+                onClick: (h) => o.sortable ? u(o.key) : void 0
+              }, [
+                s("div", Xe, [
+                  Y(r(o.label) + " ", 1),
+                  o.sortable ? (a(), l("span", Ge, [
+                    t.value === o.key ? (a(), l("span", Ke, r(f.value === "asc" ? "↑" : "↓"), 1)) : (a(), l("span", Qe, "↕"))
+                  ])) : c("", !0)
+                ])
+              ], 10, Je))), 128))
+            ])
+          ]),
+          s("tbody", null, [
+            (a(!0), l(L, null, N(v.value, (o, h) => (a(), l("tr", {
+              key: h,
+              class: "data-table__row"
+            }, [
+              (a(!0), l(L, null, N(e.columns, (b) => (a(), l("td", {
+                key: b.key,
+                class: "data-table__cell"
+              }, [
+                D(d.$slots, `cell-${b.key}`, {
+                  row: o,
+                  value: o[b.key]
+                }, () => [
+                  Y(r(o[b.key]), 1)
+                ], !0)
+              ]))), 128))
+            ]))), 128)),
+            v.value.length === 0 ? (a(), l("tr", Ze, [
+              s("td", {
+                colspan: e.columns.length,
+                class: "data-table__cell data-table__cell--empty"
+              }, r(e.emptyText), 9, et)
+            ])) : c("", !0)
+          ])
+        ])
+      ])
+    ]));
+  }
+}), Ia = /* @__PURE__ */ x(tt, [["__scopeId", "data-v-511dc0a4"]]), at = ["id", "value", "placeholder", "disabled"], lt = {
+  key: 0,
+  class: "date-error"
+}, st = /* @__PURE__ */ C({
+  __name: "DatePicker",
+  props: {
+    modelValue: {},
+    id: {},
+    placeholder: { default: "Select date" },
+    disabled: { type: Boolean },
+    format: { default: "short" },
+    error: {},
+    mode: { default: "single" },
+    minDate: {},
+    maxDate: {},
+    disabledDates: {},
+    locale: {},
+    firstDayOfWeek: { default: 0 },
+    initialDate: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = V(!1);
+    let v = 0;
+    const d = `date-input-${++v}`, p = M(() => t.id || d), o = V(null), h = V(null), b = V({
+      top: "0px",
+      left: "0px",
+      width: "320px"
+    }), I = V(t.modelValue);
+    Q(() => t.modelValue, ($) => {
+      I.value = $;
+    }, { immediate: !0 });
+    const q = M(() => {
+      if (!t.modelValue) return "";
+      if (t.mode === "single" && typeof t.modelValue == "string")
+        return P(t.modelValue);
+      if (t.mode === "multiple" && Array.isArray(t.modelValue))
+        return t.modelValue.map(($) => P($)).join(", ");
+      if (t.mode === "range" && typeof t.modelValue == "object" && "start" in t.modelValue) {
+        const { start: $, end: B } = t.modelValue;
+        if ($ && B)
+          return `${P($)} - ${P(B)}`;
+        if ($) return P($);
+      }
+      return "";
+    }), P = ($) => {
+      const [B, R, A] = $.split("-").map(Number), H = new Date(B, R - 1, A);
+      return t.format === "long" ? H.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }) : H.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    }, z = () => {
+      t.disabled || (u.value ? y() : _());
+    }, _ = () => {
+      u.value = !0, setTimeout(() => {
+        if (o.value) {
+          const $ = o.value.getBoundingClientRect(), R = window.innerHeight - $.bottom, A = 400;
+          R < A && $.top > A ? b.value = {
+            top: `${$.top - A + window.scrollY}px`,
+            left: `${$.left + window.scrollX}px`,
+            width: "320px"
+          } : b.value = {
+            top: `${$.bottom + 4 + window.scrollY}px`,
+            left: `${$.left + window.scrollX}px`,
+            width: "320px"
+          };
+        }
+      }, 0);
+    }, y = () => {
+      u.value = !1;
+    }, g = ($) => {
+      I.value = $, f("update:modelValue", $), t.mode === "single" && setTimeout(() => {
+        y();
+      }, 200), t.mode === "range" && typeof $ == "object" && "start" in $ && $.end && setTimeout(() => {
+        y();
+      }, 200);
+    }, S = ($) => {
+      var R, A;
+      if (!u.value) return;
+      const B = $.target;
+      (R = o.value) != null && R.contains(B) || (A = h.value) != null && A.contains(B) || y();
+    };
+    return Z(() => {
+      document.addEventListener("click", S);
+    }), ee(() => {
+      document.removeEventListener("click", S);
+    }), ($, B) => (a(), l("div", {
+      class: "date-picker",
+      ref_key: "datePickerRef",
+      ref: o
+    }, [
+      s("div", {
+        class: "date-picker-input",
+        onClick: z
+      }, [
+        s("input", {
+          type: "text",
+          id: p.value,
+          value: q.value,
+          placeholder: e.placeholder,
+          readonly: "",
+          disabled: e.disabled,
+          class: w(["date-input", { "date-input--error": e.error }])
+        }, null, 10, at),
+        B[1] || (B[1] = s("span", { class: "date-icon" }, "📅", -1))
+      ]),
+      e.error ? (a(), l("span", lt, r(e.error), 1)) : c("", !0),
+      (a(), W(J, { to: "body" }, [
+        u.value ? (a(), l("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: h,
+          class: "date-picker-dropdown",
+          style: U(b.value)
+        }, [
+          X(Te, {
+            modelValue: I.value,
+            "onUpdate:modelValue": [
+              B[0] || (B[0] = (R) => I.value = R),
+              g
+            ],
+            mode: e.mode,
+            "min-date": e.minDate,
+            "max-date": e.maxDate,
+            "disabled-dates": e.disabledDates,
+            "first-day-of-week": e.firstDayOfWeek,
+            "initial-date": typeof e.modelValue == "string" ? e.modelValue : void 0
+          }, null, 8, ["modelValue", "mode", "min-date", "max-date", "disabled-dates", "first-day-of-week", "initial-date"])
+        ], 4)) : c("", !0)
+      ])),
+      u.value ? (a(), l("div", {
+        key: 1,
+        class: "date-picker-overlay",
+        onClick: y
+      })) : c("", !0)
+    ], 512));
+  }
+}), Sa = /* @__PURE__ */ x(st, [["__scopeId", "data-v-0b550c0b"]]), nt = {
+  key: 0,
+  class: "dropdown__header"
+}, ot = { class: "dropdown__content" }, rt = {
+  key: 0,
+  class: "dropdown__divider"
+}, dt = ["disabled", "onClick"], it = {
+  key: 0,
+  class: "dropdown__item-icon"
+}, ct = { class: "dropdown__item-label" }, ut = {
+  key: 1,
+  class: "dropdown__footer"
+}, mt = /* @__PURE__ */ C({
+  __name: "Dropdown",
+  props: {
+    items: { default: () => [] },
+    placement: { default: "bottom-left" },
+    closeOnClick: { type: Boolean, default: !0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "open", "close"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = V(null), v = V(null), d = V(!1), p = V({}), o = () => {
+      t.disabled || (d.value ? b() : h());
+    }, h = () => {
+      d.value = !0, f("open"), setTimeout(() => {
+        I();
+      }, 0);
+    }, b = () => {
+      d.value = !1, f("close");
+    }, I = () => {
+      if (!u.value || !v.value) return;
+      const _ = u.value.getBoundingClientRect(), y = v.value.getBoundingClientRect();
+      let g = 0, S = 0;
+      switch (t.placement) {
+        case "bottom-left":
+          g = _.bottom + 8, S = _.left;
+          break;
+        case "bottom-right":
+          g = _.bottom + 8, S = _.right - y.width;
+          break;
+        case "top-left":
+          g = _.top - y.height - 8, S = _.left;
+          break;
+        case "top-right":
+          g = _.top - y.height - 8, S = _.right - y.width;
+          break;
+      }
+      p.value = {
+        top: `${g}px`,
+        left: `${S}px`
+      };
+    }, q = (_) => {
+      _.disabled || (f("select", _), t.closeOnClick && b());
+    }, P = (_) => {
+      _.stopPropagation();
+    }, z = (_) => {
+      if (!u.value || !v.value) return;
+      const y = _.target;
+      !u.value.contains(y) && !v.value.contains(y) && b();
+    };
+    return Z(() => {
+      document.addEventListener("click", z), window.addEventListener("scroll", I, !0), window.addEventListener("resize", I);
+    }), ve(() => {
+      document.removeEventListener("click", z), window.removeEventListener("scroll", I, !0), window.removeEventListener("resize", I);
+    }), (_, y) => (a(), l("div", {
+      ref_key: "dropdownRef",
+      ref: u,
+      class: w(["dropdown", { "dropdown--disabled": e.disabled }])
+    }, [
+      s("div", {
+        onClick: o,
+        class: "dropdown__trigger"
+      }, [
+        D(_.$slots, "trigger", {}, () => [
+          y[0] || (y[0] = s("button", {
+            type: "button",
+            class: "dropdown__button"
+          }, " Menu ", -1))
+        ], !0)
+      ]),
+      (a(), W(J, { to: "body" }, [
+        X(te, { name: "dropdown-fade" }, {
+          default: j(() => [
+            d.value ? (a(), l("div", {
+              key: 0,
+              ref_key: "dropdownMenuRef",
+              ref: v,
+              class: w(["dropdown__menu", `dropdown__menu--${e.placement}`]),
+              style: U(p.value),
+              onClick: P
+            }, [
+              _.$slots.header ? (a(), l("div", nt, [
+                D(_.$slots, "header", {}, void 0, !0)
+              ])) : c("", !0),
+              s("div", ot, [
+                D(_.$slots, "default", {}, () => [
+                  (a(!0), l(L, null, N(e.items, (g, S) => (a(), l(L, { key: S }, [
+                    g.divider ? (a(), l("div", rt)) : (a(), l("button", {
+                      key: 1,
+                      type: "button",
+                      class: w(["dropdown__item", { "dropdown__item--disabled": g.disabled }]),
+                      disabled: g.disabled,
+                      onClick: () => q(g)
+                    }, [
+                      g.icon ? (a(), l("span", it, r(g.icon), 1)) : c("", !0),
+                      s("span", ct, r(g.label), 1)
+                    ], 10, dt))
+                  ], 64))), 128))
+                ], !0)
+              ]),
+              _.$slots.footer ? (a(), l("div", ut, [
+                D(_.$slots, "footer", {}, void 0, !0)
+              ])) : c("", !0)
+            ], 6)) : c("", !0)
+          ]),
+          _: 3
+        })
+      ]))
+    ], 2));
+  }
+}), Ba = /* @__PURE__ */ x(mt, [["__scopeId", "data-v-d2e8b407"]]), ft = {
+  key: 0,
+  class: "empty-state__icon"
+}, vt = { class: "empty-state__icon-text" }, ht = { class: "empty-state__content" }, bt = {
+  key: 0,
+  class: "empty-state__title"
+}, yt = {
+  key: 1,
+  class: "empty-state__description"
+}, pt = {
+  key: 2,
+  class: "empty-state__body"
+}, gt = {
+  key: 1,
+  class: "empty-state__actions"
+}, kt = /* @__PURE__ */ C({
+  __name: "EmptyState",
+  props: {
+    title: { default: "" },
+    description: { default: "" },
+    icon: { default: "" },
+    actionText: { default: "" },
+    actionVariant: { default: "primary" },
+    size: { default: "medium" }
+  },
+  emits: ["action"],
+  setup(e, { emit: m }) {
+    const t = m, f = () => {
+      t("action");
+    };
+    return (u, v) => (a(), l("div", {
+      class: w(["empty-state", `empty-state--${e.size}`])
+    }, [
+      e.icon || u.$slots.icon ? (a(), l("div", ft, [
+        D(u.$slots, "icon", {}, () => [
+          s("span", vt, r(e.icon), 1)
+        ], !0)
+      ])) : c("", !0),
+      s("div", ht, [
+        e.title || u.$slots.title ? (a(), l("h3", bt, [
+          D(u.$slots, "title", {}, () => [
+            Y(r(e.title), 1)
+          ], !0)
+        ])) : c("", !0),
+        e.description || u.$slots.description ? (a(), l("p", yt, [
+          D(u.$slots, "description", {}, () => [
+            Y(r(e.description), 1)
+          ], !0)
+        ])) : c("", !0),
+        u.$slots.default ? (a(), l("div", pt, [
+          D(u.$slots, "default", {}, void 0, !0)
+        ])) : c("", !0)
+      ]),
+      e.actionText || u.$slots.action ? (a(), l("div", gt, [
+        D(u.$slots, "action", {}, () => [
+          e.actionText ? (a(), l("button", {
+            key: 0,
+            type: "button",
+            class: w(["empty-state__button", `empty-state__button--${e.actionVariant}`]),
+            onClick: f
+          }, r(e.actionText), 3)) : c("", !0)
+        ], !0)
+      ])) : c("", !0)
+    ], 2));
+  }
+}), Ma = /* @__PURE__ */ x(kt, [["__scopeId", "data-v-24e65287"]]), $t = {
+  key: 0,
+  class: "error-summary",
+  role: "alert",
+  "aria-live": "assertive"
+}, _t = { class: "error-summary__header" }, wt = { class: "error-summary__title" }, Vt = { class: "error-summary__subtitle" }, Dt = { key: 0 }, Ct = { class: "error-summary__list" }, xt = ["href"], It = /* @__PURE__ */ C({
+  __name: "ErrorSummary",
+  props: {
+    title: { default: "There is a problem" },
+    errors: {}
+  },
+  setup(e) {
+    return (m, t) => e.errors.length ? (a(), l("div", $t, [
+      s("div", _t, [
+        t[1] || (t[1] = s("span", { class: "error-summary__icon" }, "⚠️", -1)),
+        s("div", null, [
+          s("h4", wt, r(e.title), 1),
+          s("p", Vt, [
+            Y("Please fix the following " + r(e.errors.length) + " issue", 1),
+            e.errors.length !== 1 ? (a(), l("span", Dt, "s")) : c("", !0),
+            t[0] || (t[0] = Y(":", -1))
+          ])
+        ])
+      ]),
+      s("ul", Ct, [
+        (a(!0), l(L, null, N(e.errors, (f) => (a(), l("li", {
+          key: f.id,
+          class: "error-summary__item"
+        }, [
+          s("a", {
+            href: `#${f.id}`,
+            class: "error-summary__link"
+          }, r(f.message), 9, xt)
+        ]))), 128))
+      ])
+    ])) : c("", !0);
+  }
+}), Pa = /* @__PURE__ */ x(It, [["__scopeId", "data-v-2eeef3a2"]]), St = ["for"], Bt = {
+  key: 1,
+  class: "form-group__hint"
+}, Mt = {
+  key: 2,
+  class: "form-group__error"
+}, Pt = /* @__PURE__ */ C({
+  __name: "FormGroup",
+  props: {
+    label: { default: "" },
+    id: { default: "" },
+    hint: { default: "" },
+    error: { default: "" },
+    required: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (m, t) => (a(), l("div", {
+      class: w(["form-group", { "form-group--error": e.error }])
+    }, [
+      e.label ? (a(), l("label", {
+        key: 0,
+        for: e.id,
+        class: "form-group__label"
+      }, r(e.label), 9, St)) : c("", !0),
+      D(m.$slots, "default", {}, void 0, !0),
+      e.hint && !e.error ? (a(), l("small", Bt, r(e.hint), 1)) : c("", !0),
+      e.error ? (a(), l("small", Mt, r(e.error), 1)) : c("", !0)
+    ], 2));
+  }
+}), Oa = /* @__PURE__ */ x(Pt, [["__scopeId", "data-v-328da37c"]]), Ot = /* @__PURE__ */ C({
+  __name: "Heading",
+  props: {
+    tag: { default: "h2" },
+    size: { default: "2" },
+    weight: { default: "bold" },
+    align: { default: "left" }
+  },
+  setup(e) {
+    return (m, t) => (a(), W(K(e.tag), {
+      class: w(["heading", `heading--${e.size}`, `heading--${e.weight}`, { [`heading--${e.align}`]: e.align }])
+    }, {
+      default: j(() => [
+        D(m.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), Ta = /* @__PURE__ */ x(Ot, [["__scopeId", "data-v-507e54e1"]]), Tt = { class: "input-wrapper" }, Et = ["for"], Lt = ["id", "type", "value", "placeholder", "disabled", "required"], Rt = {
+  key: 1,
+  class: "input-error"
+}, At = {
+  key: 2,
+  class: "input-hint"
+}, Nt = /* @__PURE__ */ C({
+  __name: "Input",
+  props: {
+    modelValue: {},
+    id: {},
+    label: {},
+    type: { default: "text" },
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    error: {},
+    hint: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    let t = 0;
+    const f = e, u = m, v = `input-${++t}`, d = M(() => f.id || v), p = (o) => {
+      const h = o.target;
+      u("update:modelValue", h.value);
+    };
+    return (o, h) => (a(), l("div", Tt, [
+      e.label ? (a(), l("label", {
+        key: 0,
+        for: d.value,
+        class: "input-label"
+      }, r(e.label), 9, Et)) : c("", !0),
+      s("input", {
+        id: d.value,
+        type: e.type,
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        required: e.required,
+        class: w(["input-field", { "input-field--error": e.error, "input-field--disabled": e.disabled }]),
+        onInput: p
+      }, null, 42, Lt),
+      e.error ? (a(), l("span", Rt, r(e.error), 1)) : c("", !0),
+      e.hint && !e.error ? (a(), l("span", At, r(e.hint), 1)) : c("", !0)
+    ]));
+  }
+}), Ea = /* @__PURE__ */ x(Nt, [["__scopeId", "data-v-95616b7b"]]), qt = { class: "modal-header" }, zt = { class: "modal-title" }, Yt = { class: "modal-body" }, Ft = {
+  key: 0,
+  class: "modal-footer"
+}, Wt = /* @__PURE__ */ C({
+  __name: "Modal",
+  props: {
+    modelValue: { type: Boolean },
+    title: { default: "" },
+    size: { default: "medium" },
+    closable: { type: Boolean, default: !0 },
+    closeOnOverlay: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = () => {
+      f("update:modelValue", !1), f("close");
+    }, v = V(null), d = V(!1), p = V(!1), o = V(0), h = V(0), b = V(null), I = V(null), q = (y) => {
+      if (!d.value) return;
+      const g = Math.abs(y.clientX - o.value), S = Math.abs(y.clientY - h.value);
+      (g > 5 || S > 5) && (p.value = !0);
+    }, P = (y) => {
+      if (window.removeEventListener("pointermove", q), window.removeEventListener("pointerup", P), !d.value || I.value !== "overlay") {
+        d.value = !1, p.value = !1, I.value = null;
+        return;
+      }
+      const g = v.value, S = g && y.target === g;
+      t.closeOnOverlay && S && !p.value && u(), g && b.value !== null && g.hasPointerCapture(b.value) && g.releasePointerCapture(b.value), b.value = null, d.value = !1, p.value = !1, I.value = null;
+    }, z = (y) => {
+      if (!t.closeOnOverlay || y.target !== y.currentTarget) return;
+      d.value = !0, p.value = !1, I.value = "overlay", o.value = y.clientX, h.value = y.clientY;
+      const g = v.value;
+      g && (b.value = y.pointerId, g.setPointerCapture(y.pointerId)), window.addEventListener("pointermove", q), window.addEventListener("pointerup", P);
+    }, _ = () => {
+      I.value = "content";
+    };
+    return ee(() => {
+      window.removeEventListener("pointermove", q), window.removeEventListener("pointerup", P);
+    }), Q(() => t.modelValue, (y) => {
+      y ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
+    }), (y, g) => (a(), W(J, { to: "body" }, [
+      X(te, { name: "modal" }, {
+        default: j(() => [
+          e.modelValue ? (a(), l("div", {
+            key: 0,
+            ref_key: "overlayRef",
+            ref: v,
+            class: "modal-overlay",
+            onPointerdown: T(z, ["self"])
+          }, [
+            s("div", {
+              class: w(["modal-content", [`modal-content--${e.size}`]]),
+              onClick: g[0] || (g[0] = T(() => {
+              }, ["stop"])),
+              onPointerdown: T(_, ["stop"]),
+              onPointerup: g[1] || (g[1] = T(() => {
+              }, ["stop"]))
+            }, [
+              s("div", qt, [
+                D(y.$slots, "header", {}, () => [
+                  s("h3", zt, r(e.title), 1)
+                ], !0),
+                e.closable ? (a(), l("button", {
+                  key: 0,
+                  onClick: u,
+                  class: "modal-close",
+                  "aria-label": "Close modal"
+                }, " × ")) : c("", !0)
+              ]),
+              s("div", Yt, [
+                D(y.$slots, "default", {}, void 0, !0)
+              ]),
+              y.$slots.footer ? (a(), l("div", Ft, [
+                D(y.$slots, "footer", {}, void 0, !0)
+              ])) : c("", !0)
+            ], 34)
+          ], 544)) : c("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), La = /* @__PURE__ */ x(Wt, [["__scopeId", "data-v-0621c687"]]), Ht = { class: "progress-bar" }, Ut = {
+  key: 0,
+  class: "progress-bar__header"
+}, jt = { class: "progress-bar__label" }, Jt = { class: "progress-bar__percentage" }, Xt = {
+  key: 0,
+  class: "progress-bar__text"
+}, Gt = /* @__PURE__ */ C({
+  __name: "ProgressBar",
+  props: {
+    percentage: { default: 0 },
+    label: { default: "" },
+    showLabel: { type: Boolean, default: !0 },
+    showPercentageInBar: { type: Boolean, default: !1 },
+    height: { default: 12 },
+    variant: { default: "primary" },
+    animated: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    const m = e, t = M(() => Math.min(Math.max(m.percentage, 0), 100)), f = M(() => Math.round(t.value));
+    return (u, v) => (a(), l("div", Ht, [
+      e.showLabel ? (a(), l("div", Ut, [
+        s("span", jt, r(e.label), 1),
+        s("span", Jt, r(f.value) + "%", 1)
+      ])) : c("", !0),
+      s("div", {
+        class: "progress-bar__track",
+        style: U({ height: `${e.height}px` })
+      }, [
+        s("div", {
+          class: w(["progress-bar__fill", [
+            `progress-bar__fill--${e.variant}`,
+            { "progress-bar__fill--animated": e.animated }
+          ]]),
+          style: U({ width: `${t.value}%` })
+        }, [
+          e.showPercentageInBar ? (a(), l("span", Xt, r(f.value) + "% ", 1)) : c("", !0)
+        ], 6)
+      ], 4)
+    ]));
+  }
+}), Ra = /* @__PURE__ */ x(Gt, [["__scopeId", "data-v-1ee50aa7"]]), Kt = { class: "select-wrapper" }, Qt = ["for"], Zt = ["id", "value", "disabled", "required"], ea = {
+  key: 0,
+  value: "",
+  disabled: ""
+}, ta = ["value"], aa = {
+  key: 1,
+  class: "select-error"
+}, la = {
+  key: 2,
+  class: "select-hint"
+}, sa = /* @__PURE__ */ C({
+  __name: "Select",
+  props: {
+    modelValue: {},
+    id: {},
+    label: {},
+    options: { default: () => [] },
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    error: {},
+    hint: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    let t = 0;
+    const f = e, u = m, v = `select-${++t}`, d = M(() => f.id || v), p = (o) => {
+      const h = o.target;
+      u("update:modelValue", h.value);
+    };
+    return (o, h) => (a(), l("div", Kt, [
+      e.label ? (a(), l("label", {
+        key: 0,
+        for: d.value,
+        class: "select-label"
+      }, r(e.label), 9, Qt)) : c("", !0),
+      s("select", {
+        id: d.value,
+        value: e.modelValue,
+        disabled: e.disabled,
+        required: e.required,
+        class: w([
+          "select-field",
+          {
+            "select-field--error": e.error,
+            "select-field--disabled": e.disabled,
+            "select-field--placeholder": !e.modelValue || e.modelValue === ""
+          }
+        ]),
+        onChange: p
+      }, [
+        e.placeholder ? (a(), l("option", ea, r(e.placeholder), 1)) : c("", !0),
+        (a(!0), l(L, null, N(e.options, (b) => (a(), l("option", {
+          key: b.value,
+          value: b.value
+        }, r(b.label), 9, ta))), 128))
+      ], 42, Zt),
+      e.error ? (a(), l("span", aa, r(e.error), 1)) : c("", !0),
+      e.hint && !e.error ? (a(), l("span", la, r(e.hint), 1)) : c("", !0)
+    ]));
+  }
+}), Aa = /* @__PURE__ */ x(sa, [["__scopeId", "data-v-aeafe36b"]]), na = { class: "stat-card__title" }, oa = {
+  key: 0,
+  class: "stat-card__input-wrapper"
+}, ra = {
+  key: 0,
+  class: "stat-card__prefix"
+}, da = ["value", "placeholder"], ia = {
+  key: 1,
+  class: "stat-card__suffix"
+}, ca = {
+  key: 1,
+  class: "stat-card__value-wrapper"
+}, ua = {
+  key: 0,
+  class: "stat-card__prefix"
+}, ma = {
+  key: 1,
+  class: "stat-card__suffix"
+}, fa = { class: "stat-card__trend-icon" }, va = { class: "stat-card__trend-value" }, ha = /* @__PURE__ */ C({
+  __name: "StatCard",
+  props: {
+    title: {},
+    value: {},
+    variant: { default: "default" },
+    prefix: { default: "" },
+    suffix: { default: "" },
+    editable: { type: Boolean, default: !1 },
+    trend: {}
+  },
+  emits: ["input", "change"],
+  setup(e, { emit: m }) {
+    const t = e, f = m, u = M(() => typeof t.value == "number" ? t.value.toLocaleString() : t.value), v = M(() => typeof t.value == "number" && t.value < 0), d = (o) => {
+      const h = o.target, b = h.valueAsNumber || h.value;
+      f("input", b);
+    }, p = (o) => {
+      const h = o.target, b = h.valueAsNumber || h.value;
+      f("change", b);
+    };
+    return (o, h) => (a(), l("div", {
+      class: w(["stat-card", `stat-card--${e.variant}`])
+    }, [
+      s("h3", na, r(e.title), 1),
+      e.editable ? (a(), l("div", oa, [
+        e.prefix ? (a(), l("span", ra, r(e.prefix), 1)) : c("", !0),
+        s("input", {
+          value: e.value,
+          onInput: d,
+          onChange: p,
+          type: "number",
+          class: "stat-card__input",
+          placeholder: String(e.value)
+        }, null, 40, da),
+        e.suffix ? (a(), l("span", ia, r(e.suffix), 1)) : c("", !0)
+      ])) : (a(), l("div", ca, [
+        s("p", {
+          class: w(["stat-card__value", { "stat-card__value--negative": v.value }])
+        }, [
+          e.prefix ? (a(), l("span", ua, r(e.prefix), 1)) : c("", !0),
+          s("span", null, r(u.value), 1),
+          e.suffix ? (a(), l("span", ma, r(e.suffix), 1)) : c("", !0)
+        ], 2),
+        e.trend ? (a(), l("div", {
+          key: 0,
+          class: w(["stat-card__trend", `stat-card__trend--${e.trend.direction}`])
+        }, [
+          s("span", fa, r(e.trend.direction === "up" ? "↑" : "↓"), 1),
+          s("span", va, r(Math.abs(e.trend.value)) + "%", 1)
+        ], 2)) : c("", !0)
+      ])),
+      D(o.$slots, "footer", {}, void 0, !0)
+    ], 2));
+  }
+}), Na = /* @__PURE__ */ x(ha, [["__scopeId", "data-v-7858d875"]]), ba = /* @__PURE__ */ C({
+  __name: "Tag",
+  props: {
+    variant: { default: "default" },
+    size: { default: "medium" }
+  },
+  setup(e) {
+    return (m, t) => (a(), l("span", {
+      class: w(["tag", `tag--${e.variant}`, `tag--${e.size}`])
+    }, [
+      D(m.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), qa = /* @__PURE__ */ x(ba, [["__scopeId", "data-v-df5365be"]]), ya = { class: "textarea-wrapper" }, pa = ["for"], ga = ["id", "value", "placeholder", "disabled", "required", "rows"], ka = {
+  key: 1,
+  class: "textarea-error"
+}, $a = {
+  key: 2,
+  class: "textarea-hint"
+}, _a = /* @__PURE__ */ C({
+  __name: "TextArea",
+  props: {
+    modelValue: {},
+    id: {},
+    label: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    rows: { default: 4 },
+    error: {},
+    hint: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    let t = 0;
+    const f = e, u = m, v = `textarea-${++t}`, d = M(() => f.id || v), p = (o) => {
+      const h = o.target;
+      u("update:modelValue", h.value);
+    };
+    return (o, h) => (a(), l("div", ya, [
+      e.label ? (a(), l("label", {
+        key: 0,
+        for: d.value,
+        class: "textarea-label"
+      }, r(e.label), 9, pa)) : c("", !0),
+      s("textarea", {
+        id: d.value,
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        required: e.required,
+        rows: e.rows,
+        class: w(["textarea-field", { "textarea-field--error": e.error, "textarea-field--disabled": e.disabled }]),
+        onInput: p
+      }, null, 42, ga),
+      e.error ? (a(), l("span", ka, r(e.error), 1)) : c("", !0),
+      e.hint && !e.error ? (a(), l("span", $a, r(e.hint), 1)) : c("", !0)
+    ]));
+  }
+}), za = /* @__PURE__ */ x(_a, [["__scopeId", "data-v-00775f79"]]);
+export {
+  Va as VBadge,
+  Da as VButton,
+  Te as VCalendar,
+  Ca as VCard,
+  xa as VCheckbox,
+  Ia as VDataTable,
+  Sa as VDatePicker,
+  Ba as VDropdown,
+  Ma as VEmptyState,
+  Pa as VErrorSummary,
+  Oa as VFormGroup,
+  Ta as VHeading,
+  Ea as VInput,
+  La as VModal,
+  Ra as VProgressBar,
+  Aa as VSelect,
+  Na as VStatCard,
+  qa as VTag,
+  za as VTextArea
+};
+//# sourceMappingURL=index.js.map