@frplm/ui 0.1.0-alpha.0

package/dist/index.js

@@ -0,0 +1,2034 @@
+import { defineComponent as te, ref as $, watch as G, computed as B, nextTick as U, onMounted as ke, onBeforeUnmount as he, openBlock as k, createElementBlock as E, normalizeClass as A, createElementVNode as i, Fragment as ye, renderList as Re, toDisplayString as Q, withModifiers as ee, withDirectives as me, withKeys as pe, vModelText as fe, createCommentVNode as K, createBlock as Me, Teleport as $e, createVNode as Ee, Transition as Te, withCtx as Se, normalizeStyle as Ce, useModel as ge, mergeModels as j, createStaticVNode as Oe, shallowRef as Ke, readonly as Ge, createTextVNode as Ie, unref as je } from "vue";
+const Ye = { class: "tag-autocomplete__chip-label" }, Xe = ["aria-label", "onClick"], Qe = ["placeholder", "aria-label", "aria-expanded", "aria-controls"], Je = {
+  key: 0,
+  class: "tag-autocomplete__hint"
+}, Ze = { class: "tag-autocomplete__suggestion-text" }, et = /* @__PURE__ */ te({
+  __name: "AutoCompleteBox",
+  props: {
+    suggestions: {},
+    modelValue: { default: () => [] },
+    placeholder: { default: "Type and press Tab to add…" },
+    allowCustom: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "add", "remove"],
+  setup(e, { emit: u }) {
+    const t = e, n = u, h = $([
+      ...t.modelValue
+    ]), a = $(""), l = $(!1), d = $(null), g = $(null), m = $(
+      "above"
+    ), b = $({}), M = `tag-suggestion-${Math.random().toString(36).slice(2, 10)}`;
+    let L = null;
+    G(
+      () => t.modelValue,
+      (o) => {
+        h.value = [...o ?? []];
+      }
+    );
+    const N = B(() => new Set(
+      h.value.map(
+        (o) => o.trim().toLocaleLowerCase()
+      )
+    )), S = B(() => {
+      const o = a.value.trim().toLocaleLowerCase();
+      if (!o)
+        return null;
+      const s = t.suggestions.find((T) => T.toLocaleLowerCase().startsWith(o));
+      return !s || N.value.has(
+        s.trim().toLocaleLowerCase()
+      ) ? null : s;
+    }), O = B(() => {
+      const o = a.value.trim();
+      return !t.allowCustom || !o ? !1 : !N.value.has(
+        o.toLocaleLowerCase()
+      );
+    }), I = B(() => l.value && S.value !== null);
+    G(
+      [S, l],
+      async ([o, s]) => {
+        !o || !s || (await U(), c());
+      }
+    );
+    function R(o, s, T) {
+      return Math.min(
+        Math.max(o, s),
+        Math.max(s, T)
+      );
+    }
+    function c() {
+      const o = d.value;
+      if (!o || !I.value)
+        return;
+      const s = o.getBoundingClientRect(), T = window.visualViewport, D = T?.width ?? window.innerWidth, J = T?.height ?? window.innerHeight, ue = T?.offsetLeft ?? 0, Y = T?.offsetTop ?? 0, v = s.left - ue, x = s.top - Y, C = s.bottom - Y, F = 12, X = 6, Z = 46, r = Math.max(
+        0,
+        D - F * 2
+      ), p = Math.min(
+        Math.max(s.width, 220),
+        Math.min(448, r)
+      ), _ = R(
+        v,
+        F,
+        D - F - p
+      ), V = x - F - X, W = J - C - F - X;
+      if (W >= Z || W > V) {
+        m.value = "below", b.value = {
+          top: `${C + X}px`,
+          bottom: "auto",
+          left: `${_}px`,
+          width: `${p}px`,
+          maxWidth: `${r}px`
+        };
+        return;
+      }
+      m.value = "above", b.value = {
+        top: "auto",
+        bottom: `${J - x + X}px`,
+        left: `${_}px`,
+        width: `${p}px`,
+        maxWidth: `${r}px`
+      };
+    }
+    function w(o) {
+      h.value = o, n("update:modelValue", o);
+    }
+    function P(o) {
+      const s = o.trim();
+      if (!s || N.value.has(
+        s.toLocaleLowerCase()
+      ))
+        return;
+      const D = [
+        ...h.value,
+        s
+      ];
+      w(D), n("add", s);
+    }
+    function z(o) {
+      const s = h.value[o];
+      if (s === void 0)
+        return;
+      const T = [...h.value];
+      T.splice(o, 1), w(T), n("remove", s);
+    }
+    function y() {
+      const o = a.value.trim();
+      if (o) {
+        if (S.value)
+          P(S.value);
+        else if (O.value)
+          P(o);
+        else
+          return;
+        a.value = "", U(() => {
+          g.value?.focus();
+        });
+      }
+    }
+    function H(o) {
+      a.value === "" && h.value.length > 0 && (o.preventDefault(), z(
+        h.value.length - 1
+      ));
+    }
+    function re(o) {
+      (S.value || O.value) && (o.preventDefault(), y());
+    }
+    function oe(o) {
+      (S.value || O.value) && (o.preventDefault(), y());
+    }
+    function q() {
+      l.value = !0, U(() => {
+        d.value?.scrollIntoView({
+          block: "nearest",
+          inline: "nearest"
+        }), c();
+      });
+    }
+    function f() {
+      window.setTimeout(() => {
+        l.value = !1;
+      }, 100);
+    }
+    return ke(() => {
+      window.addEventListener(
+        "resize",
+        c
+      ), window.addEventListener(
+        "scroll",
+        c,
+        !0
+      ), window.visualViewport?.addEventListener(
+        "resize",
+        c
+      ), window.visualViewport?.addEventListener(
+        "scroll",
+        c
+      ), typeof ResizeObserver < "u" && d.value && (L = new ResizeObserver(
+        c
+      ), L.observe(d.value));
+    }), he(() => {
+      window.removeEventListener(
+        "resize",
+        c
+      ), window.removeEventListener(
+        "scroll",
+        c,
+        !0
+      ), window.visualViewport?.removeEventListener(
+        "resize",
+        c
+      ), window.visualViewport?.removeEventListener(
+        "scroll",
+        c
+      ), L?.disconnect();
+    }), (o, s) => (k(), E("div", {
+      class: A(["tag-autocomplete", {
+        "tag-autocomplete--focused": l.value
+      }])
+    }, [
+      i("div", {
+        ref_key: "controlRef",
+        ref: d,
+        class: "tag-autocomplete__control",
+        onClick: s[1] || (s[1] = (T) => g.value?.focus())
+      }, [
+        (k(!0), E(ye, null, Re(h.value, (T, D) => (k(), E("span", {
+          key: T,
+          class: "tag-autocomplete__chip"
+        }, [
+          i("span", Ye, Q(T), 1),
+          i("button", {
+            type: "button",
+            class: "tag-autocomplete__remove",
+            "aria-label": `Remove ${T}`,
+            onClick: ee((J) => z(D), ["stop"])
+          }, [...s[3] || (s[3] = [
+            i("svg", {
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true"
+            }, [
+              i("path", { d: "M7 7l10 10" }),
+              i("path", { d: "M17 7 7 17" })
+            ], -1)
+          ])], 8, Xe)
+        ]))), 128)),
+        me(i("input", {
+          ref_key: "inputRef",
+          ref: g,
+          "onUpdate:modelValue": s[0] || (s[0] = (T) => a.value = T),
+          class: "tag-autocomplete__input",
+          type: "text",
+          role: "combobox",
+          "aria-autocomplete": "both",
+          "aria-haspopup": "listbox",
+          placeholder: h.value.length ? "" : e.placeholder,
+          "aria-label": e.placeholder,
+          "aria-expanded": I.value,
+          "aria-controls": I.value ? M : void 0,
+          autocomplete: "off",
+          spellcheck: "false",
+          onKeydown: [
+            pe(re, ["tab"]),
+            pe(oe, ["enter"]),
+            pe(H, ["backspace"])
+          ],
+          onFocus: q,
+          onBlur: f
+        }, null, 40, Qe), [
+          [fe, a.value]
+        ])
+      ], 512),
+      l.value ? (k(), E("p", Je, " Press Enter or Tab to add. Press Backspace to remove the last tag. ")) : K("", !0),
+      (k(), Me($e, { to: "body" }, [
+        Ee(Te, { name: "suggestion" }, {
+          default: Se(() => [
+            I.value ? (k(), E("button", {
+              key: 0,
+              id: M,
+              class: A(["tag-autocomplete__suggestion", {
+                "tag-autocomplete__suggestion--above": m.value === "above",
+                "tag-autocomplete__suggestion--below": m.value === "below"
+              }]),
+              style: Ce(b.value),
+              type: "button",
+              role: "option",
+              "aria-selected": "true",
+              tabindex: "-1",
+              onMousedown: s[2] || (s[2] = ee(() => {
+              }, ["prevent"])),
+              onClick: y
+            }, [
+              s[4] || (s[4] = i("svg", {
+                class: "tag-autocomplete__suggestion-icon",
+                viewBox: "0 0 24 24",
+                "aria-hidden": "true"
+              }, [
+                i("path", { d: "M12 5v14" }),
+                i("path", { d: "M5 12h14" })
+              ], -1)),
+              i("span", Ze, Q(S.value), 1),
+              s[5] || (s[5] = i("kbd", null, "Tab", -1))
+            ], 38)) : K("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 2));
+  }
+}), ne = (e, u) => {
+  const t = e.__vccOpts || e;
+  for (const [n, h] of u)
+    t[n] = h;
+  return t;
+}, xn = /* @__PURE__ */ ne(et, [["__scopeId", "data-v-55c8bb8c"]]), tt = ["title"], nt = ["checked", "disabled", "aria-label"], ot = /* @__PURE__ */ te({
+  __name: "BooleanTickBox",
+  props: /* @__PURE__ */ j({
+    read_only: { type: Boolean, default: !1 },
+    label: { default: "Toggle option" }
+  }, {
+    modelValue: { type: Boolean, required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ j(["edit"], ["update:modelValue"]),
+  setup(e, { emit: u }) {
+    const t = ge(e, "modelValue"), n = e, h = u;
+    function a(l) {
+      if (n.read_only)
+        return;
+      const d = l.currentTarget.checked;
+      t.value = d, h("edit", d);
+    }
+    return (l, d) => (k(), E("label", {
+      class: A(["boolean-checkbox", {
+        "boolean-checkbox--checked": t.value,
+        "boolean-checkbox--disabled": n.read_only
+      }]),
+      title: n.label
+    }, [
+      i("input", {
+        class: "boolean-checkbox__input",
+        type: "checkbox",
+        checked: t.value,
+        disabled: n.read_only,
+        "aria-label": n.label,
+        onChange: a
+      }, null, 40, nt),
+      d[0] || (d[0] = i("span", {
+        class: "boolean-checkbox__box",
+        "aria-hidden": "true"
+      }, [
+        i("svg", { viewBox: "0 0 12 12" }, [
+          i("path", { d: "m2.25 6.1 2.35 2.35 5.15-5.15" })
+        ])
+      ], -1))
+    ], 10, tt));
+  }
+}), _n = /* @__PURE__ */ ne(ot, [["__scopeId", "data-v-a8a5d530"]]), at = ["title"], lt = ["checked", "disabled", "aria-label"], it = /* @__PURE__ */ te({
+  __name: "BooleanToggle",
+  props: /* @__PURE__ */ j({
+    read_only: { type: Boolean, default: !1 },
+    label: { default: "Toggle option" }
+  }, {
+    modelValue: { type: Boolean, required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ j(["edit"], ["update:modelValue"]),
+  setup(e, { emit: u }) {
+    const t = ge(e, "modelValue"), n = e, h = u;
+    function a(l) {
+      if (n.read_only)
+        return;
+      const d = l.currentTarget;
+      t.value = d.checked, h("edit", d.checked);
+    }
+    return (l, d) => (k(), E("label", {
+      class: A(["toggle", {
+        "toggle--checked": t.value,
+        "toggle--disabled": n.read_only
+      }]),
+      title: n.label
+    }, [
+      i("input", {
+        class: "toggle__input",
+        type: "checkbox",
+        checked: t.value,
+        disabled: n.read_only,
+        "aria-label": n.label,
+        onChange: a
+      }, null, 40, lt),
+      d[0] || (d[0] = Oe('<span class="toggle__track" aria-hidden="true" data-v-e36e4258><span class="toggle__thumb" data-v-e36e4258><svg class="toggle__state-icon toggle__state-icon--off" viewBox="0 0 12 12" data-v-e36e4258><path d="M3 3l6 6" data-v-e36e4258></path><path d="M9 3 3 9" data-v-e36e4258></path></svg><svg class="toggle__state-icon toggle__state-icon--on" viewBox="0 0 12 12" data-v-e36e4258><path d="m2.5 6 2.2 2.2L9.5 3.5" data-v-e36e4258></path></svg></span></span>', 1))
+    ], 10, at));
+  }
+}), yn = /* @__PURE__ */ ne(it, [["__scopeId", "data-v-e36e4258"]]), _e = Ke([]);
+B(
+  () => _e.value[0] ?? null
+);
+function rt() {
+  return typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function Pe(e) {
+  const u = {
+    ...e,
+    id: rt(),
+    timestamp: Date.now()
+  };
+  _e.value.length > 5 || (_e.value = [..._e.value, u]);
+}
+class ze extends Error {
+  details;
+  response;
+  constructor(u, t, n) {
+    super(u.message, n), this.name = "ApiRequestError", this.details = u, this.response = t;
+  }
+}
+const ut = /* @__PURE__ */ new Set([
+  "GET",
+  "HEAD",
+  "OPTIONS",
+  "TRACE"
+]);
+let Le = null, xe = null;
+function He(e, u) {
+  if (u == null) {
+    console.error(
+      `Empty error response while handling error. Prefix: ${e}`
+    );
+    return;
+  }
+  const t = `${e}${u.message}`;
+  switch (u.severity) {
+    case "EXPECTED":
+      console.trace(t, u);
+      break;
+    case "USER":
+      console.info(t, u);
+      break;
+    case "SYSTEM":
+      console.error(t, u);
+      break;
+    default: {
+      const n = u.severity;
+      console.error(
+        `Unknown error severity: ${String(n)}`,
+        u
+      );
+    }
+  }
+}
+function Ue(e) {
+  return typeof e == "object" && e !== null;
+}
+function ve(e, u) {
+  const t = e[u];
+  return typeof t == "string" && t.length > 0 ? t : void 0;
+}
+function st(e, u) {
+  const t = e[u];
+  return typeof t == "number" && Number.isFinite(t) ? t : void 0;
+}
+function dt(e) {
+  return e === "EXPECTED" || e === "USER" || e === "SYSTEM";
+}
+function ct(e, u) {
+  const t = e[u];
+  return dt(t) ? t : void 0;
+}
+function vt(e) {
+  return e >= 400 && e < 500 ? "USER" : "SYSTEM";
+}
+function pt(e) {
+  return Ue(e) ? typeof e.headerName == "string" && e.headerName.length > 0 && typeof e.token == "string" && e.token.length > 0 : !1;
+}
+async function mt() {
+  const e = await fetch("/api/security/csrf", {
+    method: "GET",
+    credentials: "same-origin",
+    headers: {
+      Accept: "application/json"
+    }
+  });
+  if (!e.ok)
+    throw new Error(
+      `Failed to obtain CSRF token: HTTP ${e.status}`
+    );
+  const u = await e.json();
+  if (!pt(u))
+    throw new Error(
+      "Backend returned an invalid CSRF response"
+    );
+  return Le = u, u;
+}
+async function ft() {
+  return Le !== null ? Le : (xe === null && (xe = mt().finally(() => {
+    xe = null;
+  })), xe);
+}
+function ht(e, u) {
+  return u.method ? u.method.toUpperCase() : e instanceof Request ? e.method.toUpperCase() : "GET";
+}
+function gt(e, u) {
+  const t = new Headers(
+    e instanceof Request ? e.headers : void 0
+  );
+  return new Headers(u.headers).forEach((h, a) => {
+    t.set(a, h);
+  }), t;
+}
+async function bt(e, u = {}) {
+  const t = ht(e, u), n = gt(e, u);
+  if (!ut.has(t)) {
+    const h = await ft();
+    n.set(h.headerName, h.token);
+  }
+  return fetch(e, {
+    ...u,
+    method: t,
+    headers: n,
+    credentials: "same-origin"
+  });
+}
+function wt(e) {
+  return typeof e == "string" ? e : e instanceof URL ? e.toString() : e.url;
+}
+function xt(e) {
+  return e.includes("json");
+}
+async function _t(e, u) {
+  const t = e.clone(), n = t.headers.get("content-type")?.toLowerCase() ?? "";
+  let h;
+  try {
+    if (xt(n))
+      h = await t.json();
+    else {
+      const g = await t.text();
+      g.trim() && (h = {
+        message: g
+      });
+    }
+  } catch (g) {
+    console.warn(
+      "Failed to parse backend error response:",
+      g
+    );
+  }
+  const a = Ue(h) ? h : {}, l = st(a, "status") ?? e.status, d = e.statusText.trim() || void 0;
+  return {
+    status: l,
+    type: ve(a, "type") ?? ve(a, "error") ?? d ?? "HttpError",
+    message: ve(a, "message") ?? ve(a, "detail") ?? d ?? `Request failed with HTTP status ${l}`,
+    severity: ct(a, "severity") ?? vt(l),
+    path: ve(a, "path") ?? ve(a, "instance") ?? u
+  };
+}
+function yt(e) {
+  return e instanceof DOMException && e.name === "AbortError";
+}
+function De(e, u) {
+  return u && e.severity !== "EXPECTED";
+}
+async function kt(e, u = {}) {
+  const {
+    showGlobalError: t = !0,
+    ...n
+  } = u, h = Mt(e), a = wt(h);
+  let l;
+  try {
+    l = await bt(
+      e,
+      n
+    );
+  } catch (g) {
+    const m = yt(g), b = {
+      status: 0,
+      type: m ? "AbortError" : "NetworkError",
+      severity: m ? "EXPECTED" : "SYSTEM",
+      message: g instanceof Error ? g.message : "The backend could not be reached.",
+      path: a
+    };
+    throw He(
+      "Frontend request transport failure: ",
+      b
+    ), De(
+      b,
+      t
+    ) && Pe(b), new ze(
+      b,
+      void 0,
+      { cause: g }
+    );
+  }
+  if (l.ok)
+    return l;
+  const d = await _t(
+    l,
+    a
+  );
+  throw He(
+    "Backend request failed: ",
+    d
+  ), De(
+    d,
+    t
+  ) && Pe(d), new ze(
+    d,
+    l
+  );
+}
+function Be(e) {
+  return e === "/api" || e.startsWith("/api/") ? e : e === "api" || e.startsWith("api/") ? `/${e}` : `/api/${e.replace(/^\/+/, "")}`;
+}
+function Mt(e) {
+  if (typeof e == "string")
+    return Be(e);
+  if (e instanceof URL) {
+    const t = new URL(e);
+    return t.pathname = Be(
+      t.pathname
+    ), t;
+  }
+  const u = new URL(e.url);
+  return u.pathname = Be(
+    u.pathname
+  ), new Request(u, e);
+}
+const Ne = "frplm.tokenizer.connectionId";
+function $t() {
+  if (typeof window > "u")
+    return null;
+  const e = window.localStorage.getItem(Ne);
+  if (e == null)
+    return null;
+  const u = Number(e);
+  return !Number.isSafeInteger(u) || u < 0 ? (window.localStorage.removeItem(Ne), null) : u;
+}
+const Ae = $(
+  $t()
+);
+Ge(Ae);
+async function Et(e) {
+  const u = Ae.value;
+  if (u == null)
+    throw new Error(
+      "No tokenizer connection has been selected"
+    );
+  const t = `api/tokenizer/tokenize?connectionId=${encodeURIComponent(String(u))}`;
+  return await (await kt(
+    t,
+    {
+      method: "POST",
+      headers: new Headers({
+        "Content-Type": "text/plain;charset=UTF-8",
+        Accept: "application/json"
+      }),
+      body: e
+    }
+  )).json();
+}
+const Tt = { class: "long-text-editor" }, St = {
+  key: 0,
+  class: "long-text-editor__token-count long-text-editor__token-count--inline",
+  role: "status",
+  "aria-live": "polite"
+}, Ct = { class: "long-text-editor__inline" }, Vt = ["onKeydown"], Bt = {
+  class: "modal-window edit-box edit-box--accent",
+  role: "dialog",
+  "aria-modal": "true",
+  "aria-labelledby": "expanded-text-editor-title"
+}, It = { class: "edit-box__header modal-toolbar" }, Lt = {
+  key: 0,
+  class: "long-text-editor__token-count long-text-editor__token-count--modal",
+  role: "status",
+  "aria-live": "polite"
+}, Rt = { class: "edit-box__body modal-window__body" }, Pt = ["onKeydown"], zt = 250, Ht = 400, Dt = /* @__PURE__ */ te({
+  __name: "LongTextBox",
+  props: /* @__PURE__ */ j({
+    tokenize: { type: Boolean, default: !1 },
+    tokenizationStarted: { type: Boolean, default: !0 }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ j(["edit"], ["update:modelValue"]),
+  setup(e, { emit: u }) {
+    const t = ge(e, "modelValue"), n = e, h = u, a = $(t.value ?? ""), l = $(a.value), d = $(!1), g = $(null), m = $(!1);
+    let b = null, M = 0;
+    const L = $(null), N = $(null);
+    let S = null;
+    function O() {
+      return n.tokenize && n.tokenizationStarted && a.value.length > 0;
+    }
+    function I() {
+      t.value = a.value, w(), S !== null && window.clearTimeout(S), S = window.setTimeout(() => {
+        S = null, a.value !== l.value && (h("edit", a.value), l.value = a.value);
+      }, zt);
+    }
+    function R() {
+      d.value = !0, U(() => {
+        N.value?.focus();
+      });
+    }
+    function c() {
+      d.value = !1, U(() => {
+        L.value?.focus();
+      });
+    }
+    function w() {
+      if (!O()) {
+        g.value = null, m.value = !1;
+        return;
+      }
+      b !== null && window.clearTimeout(b), b = window.setTimeout(() => {
+        b = null, P();
+      }, Ht);
+    }
+    async function P() {
+      if (!O()) {
+        g.value = null, m.value = !1;
+        return;
+      }
+      const z = ++M, y = a.value;
+      m.value = !0;
+      try {
+        const H = await Et(y);
+        z === M && (g.value = H);
+      } catch (H) {
+        z === M && (g.value = null), console.warn("Could not count text tokens", H);
+      } finally {
+        z === M && (m.value = !1);
+      }
+    }
+    return G(
+      () => [n.tokenize, n.tokenizationStarted],
+      ([z, y]) => {
+        if (z && y) {
+          w();
+          return;
+        }
+        M++, g.value = null, m.value = !1, b !== null && (window.clearTimeout(b), b = null);
+      }
+    ), ke(() => {
+      O() && P();
+    }), he(() => {
+      S !== null && window.clearTimeout(S), b !== null && window.clearTimeout(b), M++;
+    }), (z, y) => (k(), E("div", Tt, [
+      n.tokenize ? (k(), E("div", St, [
+        y[2] || (y[2] = Ie(" token count: ", -1)),
+        i("span", null, Q(m.value ? "…" : g.value ?? "—"), 1)
+      ])) : K("", !0),
+      i("div", Ct, [
+        me(i("textarea", {
+          ref_key: "inlineRef",
+          ref: L,
+          "onUpdate:modelValue": y[0] || (y[0] = (H) => a.value = H),
+          class: "long-text-editor__textarea long-text-editor__textarea--inline",
+          "aria-label": "Text editor",
+          onInput: I
+        }, null, 544), [
+          [fe, a.value]
+        ]),
+        i("button", {
+          class: "edit-box__action long-text-editor__icon-button long-text-editor__expand-button",
+          type: "button",
+          title: "Open expanded editor",
+          "aria-label": "Open expanded editor",
+          onClick: R
+        }, [...y[3] || (y[3] = [
+          Oe('<svg viewBox="0 0 24 24" aria-hidden="true" data-v-c37d41e9><path d="M8 3H3v5" data-v-c37d41e9></path><path d="m3 3 6 6" data-v-c37d41e9></path><path d="M16 3h5v5" data-v-c37d41e9></path><path d="m21 3-6 6" data-v-c37d41e9></path><path d="M8 21H3v-5" data-v-c37d41e9></path><path d="m3 21 6-6" data-v-c37d41e9></path><path d="M16 21h5v-5" data-v-c37d41e9></path><path d="m21 21-6-6" data-v-c37d41e9></path></svg>', 1)
+        ])])
+      ]),
+      (k(), Me($e, { to: "body" }, [
+        Ee(Te, { name: "text-editor-modal" }, {
+          default: Se(() => [
+            d.value ? (k(), E("div", {
+              key: 0,
+              class: "modal-backdrop",
+              role: "presentation",
+              onClick: ee(c, ["self"]),
+              onKeydown: pe(ee(c, ["stop", "prevent"]), ["esc"])
+            }, [
+              i("section", Bt, [
+                i("header", It, [
+                  y[6] || (y[6] = i("div", { class: "edit-box__header-main" }, [
+                    i("span", { class: "edit-box__eyebrow" }, " Text editor "),
+                    i("h2", {
+                      id: "expanded-text-editor-title",
+                      class: "edit-box__title"
+                    }, " Expanded editor ")
+                  ], -1)),
+                  n.tokenize ? (k(), E("div", Lt, [
+                    y[4] || (y[4] = Ie(" Tokens: ", -1)),
+                    i("span", null, Q(m.value ? "…" : g.value ?? "—"), 1)
+                  ])) : K("", !0),
+                  i("div", { class: "edit-box__actions" }, [
+                    i("button", {
+                      class: "edit-box__action long-text-editor__icon-button modal-toolbar__close",
+                      type: "button",
+                      title: "Close expanded editor",
+                      "aria-label": "Close expanded editor",
+                      onClick: c
+                    }, [...y[5] || (y[5] = [
+                      i("svg", {
+                        viewBox: "0 0 24 24",
+                        "aria-hidden": "true"
+                      }, [
+                        i("path", { d: "M6 6l12 12" }),
+                        i("path", { d: "M18 6 6 18" })
+                      ], -1)
+                    ])])
+                  ])
+                ]),
+                i("div", Rt, [
+                  me(i("textarea", {
+                    ref_key: "expandedRef",
+                    ref: N,
+                    "onUpdate:modelValue": y[1] || (y[1] = (H) => a.value = H),
+                    class: "long-text-editor__textarea long-text-editor__textarea--expanded",
+                    "aria-label": "Expanded text editor",
+                    onInput: I,
+                    onKeydown: pe(ee(c, ["stop", "prevent"]), ["esc"])
+                  }, null, 40, Pt), [
+                    [fe, a.value]
+                  ])
+                ])
+              ])
+            ], 40, Vt)) : K("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ]));
+  }
+}), kn = /* @__PURE__ */ ne(Dt, [["__scopeId", "data-v-c37d41e9"]]), Nt = ["disabled", "aria-label"], Ot = ["value", "placeholder", "min", "max", "step", "disabled", "aria-label", "aria-invalid"], Ut = ["disabled", "aria-label"], At = 250, Ft = /* @__PURE__ */ te({
+  __name: "NumberInput",
+  props: /* @__PURE__ */ j({
+    nullable: { type: Boolean, default: !1 },
+    placeholder: { default: "" },
+    min: {},
+    max: {},
+    step: { default: 1 },
+    disabled: { type: Boolean, default: !1 },
+    showControls: { type: Boolean, default: !1 },
+    ariaLabel: { default: "Number input" }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ j(["edit"], ["update:modelValue"]),
+  setup(e, { emit: u }) {
+    const t = ge(e, "modelValue"), n = e, h = u, a = $(
+      t.value
+    ), l = $(
+      S(t.value)
+    ), d = $(!1), g = $(
+      t.value
+    );
+    let m = null;
+    const b = B(() => n.step > 0 ? n.step : 1), M = B(() => {
+      const f = l.value.trim();
+      if (!f)
+        return !n.nullable;
+      const o = Number(f);
+      return !Number.isFinite(o) || n.min !== void 0 && o < n.min || n.max !== void 0 && o > n.max;
+    }), L = B(() => n.disabled ? !0 : a.value !== null && n.min !== void 0 && a.value <= n.min), N = B(() => n.disabled ? !0 : a.value !== null && n.max !== void 0 && a.value >= n.max);
+    function S(f) {
+      return f === null ? "" : String(f);
+    }
+    function O(f) {
+      const o = String(f);
+      if (/e-/i.test(o)) {
+        const T = Number(
+          o.split(/e-/i)[1]
+        );
+        return Number.isFinite(T) ? T : 0;
+      }
+      const s = o.indexOf(".");
+      return s === -1 ? 0 : o.length - s - 1;
+    }
+    function I(f) {
+      let o = f;
+      n.min !== void 0 && (o = Math.max(
+        n.min,
+        o
+      )), n.max !== void 0 && (o = Math.min(
+        n.max,
+        o
+      ));
+      const s = b.value, T = n.min ?? 0;
+      o = T + Math.round(
+        (o - T) / s
+      ) * s, n.min !== void 0 && (o = Math.max(
+        n.min,
+        o
+      )), n.max !== void 0 && (o = Math.min(
+        n.max,
+        o
+      ));
+      const D = Math.max(
+        O(s),
+        O(T),
+        O(o)
+      );
+      return Number(
+        o.toFixed(
+          Math.min(D, 12)
+        )
+      );
+    }
+    function R() {
+      m !== null && (clearTimeout(m), m = null);
+    }
+    function c(f) {
+      R(), f !== g.value && (g.value = f, h("edit", f));
+    }
+    function w(f) {
+      R(), m = setTimeout(() => {
+        m = null, f !== g.value && (g.value = f, h("edit", f));
+      }, At);
+    }
+    function P(f, o = !1) {
+      a.value = f, t.value = f, o ? c(f) : w(f);
+    }
+    function z(f) {
+      const o = f.currentTarget;
+      l.value = o.value;
+      const s = l.value.trim();
+      if (!s) {
+        n.nullable && P(null);
+        return;
+      }
+      const T = Number(s);
+      Number.isFinite(T) && P(T);
+    }
+    function y() {
+      const f = l.value.trim();
+      if (!f) {
+        if (n.nullable) {
+          l.value = "", P(null, !0);
+          return;
+        }
+        const T = a.value ?? n.min ?? 0, D = I(T);
+        l.value = S(D), P(D, !0);
+        return;
+      }
+      const o = Number(f);
+      if (!Number.isFinite(o)) {
+        l.value = S(a.value);
+        return;
+      }
+      const s = I(o);
+      l.value = S(s), P(s, !0);
+    }
+    function H(f) {
+      if (n.disabled)
+        return;
+      const o = a.value ?? n.min ?? 0, s = I(
+        o + b.value * f
+      );
+      l.value = S(s), P(s, !0);
+    }
+    function re() {
+      d.value = !0;
+    }
+    function oe() {
+      d.value = !1, y();
+    }
+    function q(f) {
+      if (f.key === "Enter") {
+        f.preventDefault(), y(), f.currentTarget.blur();
+        return;
+      }
+      f.key === "Escape" && (f.preventDefault(), R(), l.value = S(a.value), f.currentTarget.blur());
+    }
+    return G(
+      () => t.value,
+      (f) => {
+        f !== a.value && (R(), a.value = f, g.value = f, l.value = S(f));
+      }
+    ), he(() => {
+      R();
+    }), (f, o) => (k(), E("div", {
+      class: A(["number-input", {
+        "number-input--focused": d.value,
+        "number-input--invalid": M.value,
+        "number-input--disabled": n.disabled,
+        "number-input--with-controls": n.showControls
+      }])
+    }, [
+      n.showControls ? (k(), E("button", {
+        key: 0,
+        type: "button",
+        class: "number-input__step number-input__step--decrement",
+        disabled: L.value,
+        "aria-label": `Decrease ${n.ariaLabel}`,
+        tabindex: "-1",
+        onClick: o[0] || (o[0] = (s) => H(-1))
+      }, [...o[2] || (o[2] = [
+        i("svg", {
+          viewBox: "0 0 16 16",
+          "aria-hidden": "true"
+        }, [
+          i("path", { d: "M3 8h10" })
+        ], -1)
+      ])], 8, Nt)) : K("", !0),
+      i("input", {
+        class: "number-input__control",
+        type: "number",
+        inputmode: "decimal",
+        value: l.value,
+        placeholder: n.placeholder,
+        min: n.min,
+        max: n.max,
+        step: b.value,
+        disabled: n.disabled,
+        "aria-label": n.ariaLabel,
+        "aria-invalid": M.value,
+        onInput: z,
+        onFocus: re,
+        onBlur: oe,
+        onKeydown: q
+      }, null, 40, Ot),
+      n.showControls ? (k(), E("button", {
+        key: 1,
+        type: "button",
+        class: "number-input__step number-input__step--increment",
+        disabled: N.value,
+        "aria-label": `Increase ${n.ariaLabel}`,
+        tabindex: "-1",
+        onClick: o[1] || (o[1] = (s) => H(1))
+      }, [...o[3] || (o[3] = [
+        i("svg", {
+          viewBox: "0 0 16 16",
+          "aria-hidden": "true"
+        }, [
+          i("path", { d: "M3 8h10" }),
+          i("path", { d: "M8 3v10" })
+        ], -1)
+      ])], 8, Ut)) : K("", !0)
+    ], 2));
+  }
+}), Mn = /* @__PURE__ */ ne(Ft, [["__scopeId", "data-v-391d27a7"]]), qt = { class: "slider__range-container" }, Wt = ["min", "max", "step", "value", "disabled", "aria-label"], Kt = { class: "slider__number-container" }, Gt = ["min", "max", "step", "value", "disabled", "aria-label"], jt = /* @__PURE__ */ te({
+  __name: "NumberSlider",
+  props: /* @__PURE__ */ j({
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    read_only: { type: Boolean, default: !1 },
+    label: { default: "Numeric value" }
+  }, {
+    modelValue: {
+      required: !0,
+      type: Number
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ j(["edit"], ["update:modelValue"]),
+  setup(e, { emit: u }) {
+    const t = ge(e, "modelValue"), n = e, h = u, a = $(
+      String(t.value)
+    ), l = B(
+      () => Math.min(n.min, n.max)
+    ), d = B(
+      () => Math.max(n.min, n.max)
+    ), g = B(
+      () => n.step > 0 ? n.step : 1
+    ), m = B(() => {
+      const c = d.value - l.value;
+      return c <= 0 ? 0 : (Math.min(
+        d.value,
+        Math.max(l.value, t.value)
+      ) - l.value) / c * 100;
+    }), b = B(
+      () => ({
+        "--slider-progress": `${m.value}%`
+      })
+    );
+    G(
+      () => t.value,
+      (c) => {
+        a.value = String(c);
+      }
+    );
+    function M(c) {
+      const w = String(c);
+      if (w.includes("e-") || w.includes("E-")) {
+        const P = Number(
+          w.split(/e-/i)[1]
+        );
+        return Number.isFinite(P) ? P : 0;
+      }
+      return w.includes(".") ? w.split(".")[1].length : 0;
+    }
+    function L(c) {
+      const w = Math.min(
+        d.value,
+        Math.max(l.value, c)
+      ), P = Math.round(
+        (w - l.value) / g.value
+      ), z = l.value + P * g.value, y = Math.max(
+        M(l.value),
+        M(d.value),
+        M(g.value)
+      );
+      return Number(
+        Math.min(
+          d.value,
+          Math.max(l.value, z)
+        ).toFixed(y)
+      );
+    }
+    function N(c) {
+      if (n.read_only || !Number.isFinite(c))
+        return;
+      const w = L(c);
+      a.value = String(w), w !== t.value && (t.value = w, h("edit", w));
+    }
+    function S(c) {
+      const w = c.currentTarget;
+      N(Number(w.value));
+    }
+    function O(c) {
+      const w = c.currentTarget;
+      a.value = w.value;
+    }
+    function I() {
+      const c = Number(
+        a.value
+      );
+      if (!a.value.trim() || !Number.isFinite(c)) {
+        a.value = String(t.value);
+        return;
+      }
+      N(c);
+    }
+    function R(c) {
+      const w = c.currentTarget;
+      c.key === "Enter" && (c.preventDefault(), I(), w.blur()), c.key === "Escape" && (c.preventDefault(), a.value = String(t.value), w.blur());
+    }
+    return (c, w) => (k(), E("div", {
+      class: A(["slider", {
+        "slider--disabled": n.read_only
+      }])
+    }, [
+      i("div", qt, [
+        i("input", {
+          class: "slider__range",
+          type: "range",
+          min: l.value,
+          max: d.value,
+          step: g.value,
+          value: t.value,
+          style: Ce(b.value),
+          disabled: n.read_only,
+          "aria-label": n.label,
+          onInput: S
+        }, null, 44, Wt)
+      ]),
+      i("div", Kt, [
+        i("input", {
+          class: "slider__number",
+          type: "number",
+          inputmode: "decimal",
+          min: l.value,
+          max: d.value,
+          step: g.value,
+          value: a.value,
+          disabled: n.read_only,
+          "aria-label": `${n.label}, direct input`,
+          onInput: O,
+          onChange: I,
+          onBlur: I,
+          onKeydown: R
+        }, null, 40, Gt)
+      ])
+    ], 2));
+  }
+}), $n = /* @__PURE__ */ ne(jt, [["__scopeId", "data-v-0987f85e"]]), Yt = ["disabled"], Xt = 250, Qt = /* @__PURE__ */ te({
+  __name: "ShortTextBox",
+  props: /* @__PURE__ */ j({
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ j(["edit"], ["update:modelValue"]),
+  setup(e, { emit: u }) {
+    const t = ge(e, "modelValue"), n = e, h = u, a = $(t.value ?? ""), l = $(a.value);
+    let d = null;
+    function g() {
+      t.value = a.value, d !== null && window.clearTimeout(d), d = window.setTimeout(() => {
+        d = null, a.value !== l.value && (h("edit", a.value), l.value = a.value);
+      }, Xt);
+    }
+    return G(
+      () => t.value,
+      (m) => {
+        const b = m ?? "";
+        b !== a.value && (a.value = b, l.value = b);
+      }
+    ), he(() => {
+      d !== null && (window.clearTimeout(d), d = null);
+    }), (m, b) => me((k(), E("input", {
+      "onUpdate:modelValue": b[0] || (b[0] = (M) => a.value = M),
+      class: "short-text-box",
+      type: "text",
+      disabled: n.disabled,
+      onInput: g
+    }, null, 40, Yt)), [
+      [fe, a.value]
+    ]);
+  }
+}), En = /* @__PURE__ */ ne(Qt, [["__scopeId", "data-v-de481be8"]]), Jt = ["title"], Zt = { class: "single-autocomplete__chip-text" }, en = ["disabled"], tn = ["placeholder", "disabled", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant"], nn = ["aria-label"], on = ["id", "data-option-index", "aria-selected", "onMouseenter", "onMousedown"], an = {
+  class: "single-autocomplete__option-icon",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true"
+}, ln = {
+  key: 1,
+  d: "M20 6 9 17l-5-5"
+}, rn = {
+  key: 0,
+  class: "single-autocomplete__option-text"
+}, un = {
+  key: 1,
+  class: "single-autocomplete__option-text"
+}, sn = /* @__PURE__ */ te({
+  __name: "SingleAutoComplete",
+  props: {
+    suggestions: {},
+    modelValue: { default: null },
+    placeholder: { default: "Type to select…" },
+    allowCustom: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "select", "clear"],
+  setup(e, { emit: u }) {
+    const t = e, n = u, h = $(""), a = $(!1), l = $(0), d = $(null), g = $(null), m = $(null), b = $("below"), M = $({}), L = `autocomplete-${Math.random().toString(36).slice(2, 10)}`, N = `${L}-listbox`, S = B(
+      () => h.value.trim().toLocaleLowerCase()
+    ), O = B(() => {
+      const v = S.value, x = t.suggestions.filter(
+        (C) => C !== t.modelValue
+      );
+      return v ? x.filter(
+        (C) => C.toLocaleLowerCase().includes(v)
+      ).slice(0, 8) : x.slice(0, 8);
+    }), I = B(() => {
+      const v = S.value;
+      return v ? t.suggestions.find(
+        (x) => x.toLocaleLowerCase() === v
+      ) ?? null : null;
+    }), R = B(() => {
+      const v = h.value.trim();
+      return t.allowCustom && v.length > 0 && I.value === null;
+    }), c = B(() => {
+      const v = O.value.map(
+        (x) => ({
+          type: "suggestion",
+          value: x
+        })
+      );
+      return R.value && v.push({
+        type: "custom",
+        value: h.value.trim()
+      }), v;
+    }), w = B(() => t.disabled || !a.value || t.modelValue ? !1 : c.value.length > 0), P = B(() => {
+      if (!(!w.value || !c.value[l.value]))
+        return `${L}-option-${l.value}`;
+    });
+    G(
+      () => t.modelValue,
+      (v) => {
+        v != null && (h.value = "");
+      }
+    ), G(c, (v) => {
+      if (v.length === 0) {
+        l.value = 0;
+        return;
+      }
+      l.value >= v.length && (l.value = v.length - 1), w.value && U(() => {
+        y(), H();
+      });
+    }), G(w, async (v) => {
+      v && (await U(), y(), H());
+    });
+    function z(v, x, C) {
+      return Math.min(
+        Math.max(v, x),
+        Math.max(x, C)
+      );
+    }
+    function y() {
+      const v = d.value;
+      if (!v || !w.value)
+        return;
+      const x = window.visualViewport, C = x?.width ?? window.innerWidth, F = x?.height ?? window.innerHeight, X = x?.offsetLeft ?? 0, Z = x?.offsetTop ?? 0, r = X + C, p = Z + F, _ = v.getBoundingClientRect(), V = 12, W = 6, de = 320, se = 96, ce = Math.max(
+        0,
+        C - V * 2
+      ), ae = Math.min(
+        Math.max(_.width, 240),
+        ce
+      ), le = z(
+        _.left,
+        X + V,
+        r - V - ae
+      ), ie = p - _.bottom - W - V, be = _.top - Z - W - V;
+      if (ie < se && be < se) {
+        b.value = "overlay", M.value = {
+          top: `${Z + V}px`,
+          right: "auto",
+          bottom: "auto",
+          left: `${le}px`,
+          width: `${ae}px`,
+          maxHeight: `${Math.max(
+            0,
+            F - V * 2
+          )}px`
+        };
+        return;
+      }
+      if (ie >= se || ie >= be) {
+        b.value = "below", M.value = {
+          top: `${Math.max(
+            Z + V,
+            _.bottom + W
+          )}px`,
+          right: "auto",
+          bottom: "auto",
+          left: `${le}px`,
+          width: `${ae}px`,
+          maxHeight: `${Math.max(
+            se,
+            Math.min(
+              de,
+              ie
+            )
+          )}px`
+        };
+        return;
+      }
+      const we = Math.max(
+        se,
+        Math.min(
+          de,
+          be
+        )
+      );
+      b.value = "above", M.value = {
+        top: "auto",
+        right: "auto",
+        bottom: `${Math.max(
+          V,
+          p - _.top + W
+        )}px`,
+        left: `${le}px`,
+        width: `${ae}px`,
+        maxHeight: `${we}px`
+      };
+    }
+    function H() {
+      U(() => {
+        m.value?.querySelector(
+          `[data-option-index="${l.value}"]`
+        )?.scrollIntoView({
+          block: "nearest"
+        });
+      });
+    }
+    function re() {
+      d.value?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+    function oe() {
+      t.disabled || g.value?.focus();
+    }
+    function q(v, x = !0) {
+      const C = v.trim();
+      !C || t.disabled || (n("update:modelValue", C), n("select", C), h.value = "", l.value = 0, x && U(() => {
+        g.value?.blur();
+      }));
+    }
+    function f() {
+      t.disabled || (n("update:modelValue", null), n("clear"), h.value = "", l.value = 0, U(() => {
+        g.value?.focus();
+      }));
+    }
+    function o(v = !0) {
+      if (t.disabled)
+        return;
+      const x = c.value[l.value];
+      x && q(x.value, v);
+    }
+    function s(v) {
+      if (!w.value)
+        return;
+      const x = c.value.length;
+      x !== 0 && (l.value = (l.value + v + x) % x, H());
+    }
+    function T() {
+      a.value = !0, U(() => {
+        re(), y();
+      });
+    }
+    function D() {
+      window.setTimeout(() => {
+        a.value = !1, l.value = 0;
+      }, 120);
+    }
+    function J() {
+      l.value = 0, U(y);
+    }
+    function ue(v) {
+      if (v.key === "ArrowDown") {
+        v.preventDefault(), s(1);
+        return;
+      }
+      if (v.key === "ArrowUp") {
+        v.preventDefault(), s(-1);
+        return;
+      }
+      if (v.key === "Home" && w.value) {
+        v.preventDefault(), l.value = 0, H();
+        return;
+      }
+      if (v.key === "End" && w.value) {
+        v.preventDefault(), l.value = Math.max(
+          0,
+          c.value.length - 1
+        ), H();
+        return;
+      }
+      if (v.key === "Enter") {
+        w.value && (v.preventDefault(), o());
+        return;
+      }
+      if (v.key === "Tab") {
+        w.value && o(!1);
+        return;
+      }
+      if (v.key === "Escape") {
+        v.preventDefault(), v.stopPropagation(), a.value = !1, g.value?.blur();
+        return;
+      }
+      v.key === "Backspace" && t.modelValue && t.clearable && (v.preventDefault(), f());
+    }
+    let Y = null;
+    return ke(() => {
+      window.addEventListener(
+        "resize",
+        y
+      ), window.addEventListener(
+        "scroll",
+        y,
+        !0
+      ), window.visualViewport?.addEventListener(
+        "resize",
+        y
+      ), window.visualViewport?.addEventListener(
+        "scroll",
+        y
+      ), typeof ResizeObserver < "u" && d.value && (Y = new ResizeObserver(
+        y
+      ), Y.observe(d.value));
+    }), he(() => {
+      window.removeEventListener(
+        "resize",
+        y
+      ), window.removeEventListener(
+        "scroll",
+        y,
+        !0
+      ), window.visualViewport?.removeEventListener(
+        "resize",
+        y
+      ), window.visualViewport?.removeEventListener(
+        "scroll",
+        y
+      ), Y?.disconnect();
+    }), (v, x) => (k(), E("div", {
+      class: A(["single-autocomplete", {
+        "single-autocomplete--open": w.value,
+        "single-autocomplete--disabled": e.disabled
+      }])
+    }, [
+      i("div", {
+        ref_key: "controlRef",
+        ref: d,
+        class: A(["single-autocomplete__control", {
+          "single-autocomplete__control--focused": a.value,
+          "single-autocomplete__control--selected": !!e.modelValue
+        }]),
+        onClick: oe
+      }, [
+        x[4] || (x[4] = i("svg", {
+          class: "single-autocomplete__icon",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true"
+        }, [
+          i("circle", {
+            cx: "11",
+            cy: "11",
+            r: "7"
+          }),
+          i("path", { d: "m20 20-4-4" })
+        ], -1)),
+        e.modelValue ? (k(), E("span", {
+          key: 0,
+          class: "single-autocomplete__chip",
+          title: e.modelValue
+        }, [
+          i("span", Zt, Q(e.modelValue), 1),
+          e.clearable ? (k(), E("button", {
+            key: 0,
+            type: "button",
+            class: "single-autocomplete__clear",
+            "aria-label": "Clear selected value",
+            disabled: e.disabled,
+            onClick: ee(f, ["stop"])
+          }, [...x[2] || (x[2] = [
+            i("svg", {
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true"
+            }, [
+              i("path", { d: "M7 7l10 10" }),
+              i("path", { d: "M17 7 7 17" })
+            ], -1)
+          ])], 8, en)) : K("", !0)
+        ], 8, Jt)) : K("", !0),
+        me(i("input", {
+          ref_key: "inputRef",
+          ref: g,
+          "onUpdate:modelValue": x[0] || (x[0] = (C) => h.value = C),
+          type: "text",
+          class: A(["single-autocomplete__input", {
+            "single-autocomplete__input--selected": !!e.modelValue
+          }]),
+          placeholder: e.modelValue ? "" : e.placeholder,
+          disabled: e.disabled,
+          "aria-label": e.modelValue ? `Selected value: ${e.modelValue}` : e.placeholder,
+          role: "combobox",
+          "aria-autocomplete": "list",
+          "aria-haspopup": "listbox",
+          "aria-expanded": w.value,
+          "aria-controls": w.value ? N : void 0,
+          "aria-activedescendant": P.value,
+          autocomplete: "off",
+          spellcheck: "false",
+          onFocus: T,
+          onBlur: D,
+          onInput: J,
+          onKeydown: ue
+        }, null, 42, tn), [
+          [fe, h.value]
+        ]),
+        (k(), E("svg", {
+          class: A(["single-autocomplete__chevron", {
+            "single-autocomplete__chevron--open": w.value
+          }]),
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true"
+        }, [...x[3] || (x[3] = [
+          i("path", { d: "m7 10 5 5 5-5" }, null, -1)
+        ])], 2))
+      ], 2),
+      (k(), Me($e, { to: "body" }, [
+        Ee(Te, { name: "autocomplete-menu" }, {
+          default: Se(() => [
+            w.value ? (k(), E("div", {
+              key: 0,
+              id: N,
+              ref_key: "menuRef",
+              ref: m,
+              class: A(["single-autocomplete__menu", {
+                "single-autocomplete__menu--above": b.value === "above",
+                "single-autocomplete__menu--below": b.value === "below",
+                "single-autocomplete__menu--overlay": b.value === "overlay"
+              }]),
+              style: Ce(M.value),
+              role: "listbox",
+              "aria-label": e.placeholder,
+              onKeydown: x[1] || (x[1] = pe(ee(() => {
+              }, ["stop", "prevent"]), ["esc"]))
+            }, [
+              (k(!0), E(ye, null, Re(c.value, (C, F) => (k(), E("button", {
+                id: `${L}-option-${F}`,
+                key: `${C.type}:${C.value}`,
+                "data-option-index": F,
+                type: "button",
+                class: A(["single-autocomplete__option", {
+                  "single-autocomplete__option--active": F === l.value,
+                  "single-autocomplete__option--custom": C.type === "custom"
+                }]),
+                role: "option",
+                "aria-selected": F === l.value,
+                onMouseenter: (X) => l.value = F,
+                onMousedown: ee((X) => q(C.value), ["prevent"])
+              }, [
+                (k(), E("svg", an, [
+                  C.type === "custom" ? (k(), E(ye, { key: 0 }, [
+                    x[5] || (x[5] = i("path", { d: "M12 5v14" }, null, -1)),
+                    x[6] || (x[6] = i("path", { d: "M5 12h14" }, null, -1))
+                  ], 64)) : (k(), E("path", ln))
+                ])),
+                C.type === "custom" ? (k(), E("span", rn, [
+                  x[7] || (x[7] = Ie(" Create ", -1)),
+                  i("strong", null, "“" + Q(C.value) + "”", 1)
+                ])) : (k(), E("span", un, Q(C.value), 1))
+              ], 42, on))), 128))
+            ], 46, nn)) : K("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 2));
+  }
+}), Tn = /* @__PURE__ */ ne(sn, [["__scopeId", "data-v-d82cb509"]]), dn = ["aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], cn = ["aria-label"], vn = ["id", "data-option-index", "aria-selected", "onMouseenter", "onClick"], pn = { class: "enum-input__option-indicator" }, mn = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true"
+}, fn = { class: "enum-input__option-label" }, hn = {
+  key: 0,
+  class: "enum-input__option-value"
+}, gn = {
+  key: 0,
+  class: "enum-input__empty",
+  role: "status"
+}, bn = /* @__PURE__ */ te({
+  __name: "SingleEnumInput",
+  props: {
+    value: {},
+    possible_values: {},
+    labels: {},
+    placeholder: {}
+  },
+  emits: ["edit"],
+  setup(e, { emit: u }) {
+    const t = {
+      viewportMarginPx: 12,
+      controlGapPx: 6,
+      preferredMaxHeightPx: 320,
+      minimumUsefulHeightPx: 100,
+      minimumWidthPx: 220,
+      estimatedOptionHeightPx: 42,
+      estimatedVerticalPaddingPx: 8
+    }, n = e, h = u, a = $(null), l = $(null), d = $(null), g = $(null), m = $(!1), b = $(""), M = $(0), L = $("below"), N = $({}), S = w(), O = `${S}-listbox`;
+    let I = null, R = null, c = null;
+    function w() {
+      return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? `enum-input-${crypto.randomUUID()}` : `enum-input-${Math.random().toString(36).slice(2, 10)}`;
+    }
+    function P(r) {
+      return r instanceof Map;
+    }
+    function z(r) {
+      return n.labels ? P(n.labels) ? n.labels.get(r) ?? String(r) : n.labels[r] ?? String(r) : String(r);
+    }
+    function y(r) {
+      return r.normalize("NFD").replace(new RegExp("\\p{Diacritic}", "gu"), "").toLocaleLowerCase().trim();
+    }
+    function H(r, p, _) {
+      return Math.min(
+        Math.max(r, p),
+        Math.max(p, _)
+      );
+    }
+    function re() {
+      const r = window.visualViewport, p = r?.offsetLeft ?? 0, _ = r?.offsetTop ?? 0, V = r?.width ?? window.innerWidth, W = r?.height ?? window.innerHeight;
+      return {
+        left: p,
+        top: _,
+        width: V,
+        height: W,
+        right: p + V,
+        bottom: _ + W
+      };
+    }
+    const oe = B(() => n.value === null ? "" : z(n.value)), q = B(() => {
+      const r = y(b.value).split(/\s+/).filter(Boolean);
+      return r.length === 0 ? n.possible_values : n.possible_values.filter((p) => {
+        const _ = y(
+          `${z(p)} ${String(p)}`
+        );
+        return r.every(
+          (V) => _.includes(V)
+        );
+      });
+    }), f = B(() => {
+      if (!(!m.value || q.value.length === 0))
+        return `${S}-option-${M.value}`;
+    });
+    G(
+      oe,
+      (r) => {
+        m.value || (b.value = r);
+      },
+      {
+        immediate: !0
+      }
+    ), G(
+      q,
+      (r) => {
+        r.length === 0 ? M.value = 0 : M.value >= r.length && (M.value = r.length - 1), m.value && U(() => {
+          s(), D();
+        });
+      }
+    ), G(m, async (r) => {
+      r && (await U(), s(), D());
+    });
+    function o() {
+      const r = g.value?.scrollHeight;
+      if (r !== void 0 && r > 0)
+        return r;
+      const p = q.value.length * t.estimatedOptionHeightPx;
+      return Math.max(
+        t.minimumUsefulHeightPx,
+        p + t.estimatedVerticalPaddingPx
+      );
+    }
+    function s() {
+      m.value && (R !== null && cancelAnimationFrame(R), R = requestAnimationFrame(() => {
+        R = null, T();
+      }));
+    }
+    function T() {
+      const r = l.value;
+      if (!r || !m.value)
+        return;
+      const p = r.getBoundingClientRect(), _ = re(), V = p.left + _.left, W = p.top + _.top, de = p.bottom + _.top, se = Math.max(
+        0,
+        _.width - t.viewportMarginPx * 2
+      ), ce = Math.min(
+        Math.max(
+          p.width,
+          t.minimumWidthPx
+        ),
+        se
+      ), ae = H(
+        V,
+        _.left + t.viewportMarginPx,
+        _.right - t.viewportMarginPx - ce
+      ), le = _.bottom - de - t.controlGapPx - t.viewportMarginPx, ie = W - _.top - t.controlGapPx - t.viewportMarginPx;
+      if (le < t.minimumUsefulHeightPx && ie < t.minimumUsefulHeightPx) {
+        const Ve = Math.max(
+          0,
+          _.height - t.viewportMarginPx * 2
+        );
+        L.value = "overlay", N.value = {
+          top: `${_.top + t.viewportMarginPx}px`,
+          left: `${ae}px`,
+          width: `${ce}px`,
+          maxHeight: `${Ve}px`
+        };
+        return;
+      }
+      if (le >= t.minimumUsefulHeightPx || le >= ie) {
+        const Ve = Math.max(
+          0,
+          Math.min(
+            t.preferredMaxHeightPx,
+            le
+          )
+        );
+        L.value = "below", N.value = {
+          top: `${de + t.controlGapPx}px`,
+          left: `${ae}px`,
+          width: `${ce}px`,
+          maxHeight: `${Ve}px`
+        };
+        return;
+      }
+      const we = Math.max(
+        0,
+        Math.min(
+          t.preferredMaxHeightPx,
+          ie
+        )
+      ), qe = Math.min(
+        o(),
+        we
+      ), We = W - t.controlGapPx - qe;
+      L.value = "above", N.value = {
+        top: `${Math.max(
+          _.top + t.viewportMarginPx,
+          We
+        )}px`,
+        left: `${ae}px`,
+        width: `${ce}px`,
+        maxHeight: `${we}px`
+      };
+    }
+    function D() {
+      U(() => {
+        const r = `[data-option-index="${M.value}"]`;
+        g.value?.querySelector(r)?.scrollIntoView({
+          block: "nearest",
+          inline: "nearest"
+        });
+      });
+    }
+    function J() {
+      I !== null && (window.clearTimeout(I), I = null);
+    }
+    function ue() {
+      J(), m.value = !0, b.value = "";
+      const r = n.value === null ? -1 : n.possible_values.findIndex(
+        (p) => Object.is(p, n.value)
+      );
+      M.value = r >= 0 ? r : 0, U(() => {
+        l.value?.scrollIntoView({
+          block: "nearest",
+          inline: "nearest"
+        }), s(), D();
+      });
+    }
+    function Y() {
+      m.value = !1, b.value = oe.value, M.value = 0;
+    }
+    function v(r) {
+      h("edit", r), m.value = !1, b.value = z(r), M.value = 0, U(() => {
+        d.value?.focus(), d.value?.select();
+      });
+    }
+    function x(r) {
+      const p = q.value.length;
+      p !== 0 && (M.value = (M.value + r + p) % p, D());
+    }
+    function C() {
+      const r = q.value[M.value];
+      r !== void 0 && v(r);
+    }
+    function F() {
+      J(), I = window.setTimeout(() => {
+        I = null;
+        const r = document.activeElement, p = r !== null && a.value?.contains(r), _ = r !== null && g.value?.contains(r);
+        !p && !_ && Y();
+      }, 100);
+    }
+    function X(r) {
+      switch (r.key) {
+        case "ArrowDown": {
+          r.preventDefault(), m.value ? x(1) : ue();
+          break;
+        }
+        case "ArrowUp": {
+          r.preventDefault(), m.value ? x(-1) : ue();
+          break;
+        }
+        case "Home": {
+          if (!m.value)
+            break;
+          r.preventDefault(), M.value = 0, D();
+          break;
+        }
+        case "End": {
+          if (!m.value)
+            break;
+          r.preventDefault(), M.value = Math.max(
+            0,
+            q.value.length - 1
+          ), D();
+          break;
+        }
+        case "Enter": {
+          if (!m.value)
+            break;
+          r.preventDefault(), r.stopPropagation(), C();
+          break;
+        }
+        case "Escape": {
+          if (!m.value)
+            break;
+          r.preventDefault(), r.stopPropagation(), Y(), d.value?.focus();
+          break;
+        }
+        case "Tab": {
+          Y();
+          break;
+        }
+      }
+    }
+    function Z(r) {
+      const p = r.target;
+      if (!(p instanceof Node))
+        return;
+      const _ = a.value?.contains(p) ?? !1, V = g.value?.contains(p) ?? !1;
+      _ || V || Y();
+    }
+    return ke(() => {
+      document.addEventListener(
+        "pointerdown",
+        Z,
+        !0
+      ), window.addEventListener(
+        "resize",
+        s
+      ), window.addEventListener(
+        "scroll",
+        s,
+        !0
+      ), window.visualViewport?.addEventListener(
+        "resize",
+        s
+      ), window.visualViewport?.addEventListener(
+        "scroll",
+        s
+      ), typeof ResizeObserver < "u" && l.value && (c = new ResizeObserver(
+        s
+      ), c.observe(l.value));
+    }), he(() => {
+      J(), R !== null && (cancelAnimationFrame(R), R = null), document.removeEventListener(
+        "pointerdown",
+        Z,
+        !0
+      ), window.removeEventListener(
+        "resize",
+        s
+      ), window.removeEventListener(
+        "scroll",
+        s,
+        !0
+      ), window.visualViewport?.removeEventListener(
+        "resize",
+        s
+      ), window.visualViewport?.removeEventListener(
+        "scroll",
+        s
+      ), c?.disconnect(), c = null;
+    }), (r, p) => (k(), E("div", {
+      ref_key: "rootRef",
+      ref: a,
+      class: A(["enum-input", {
+        "enum-input--open": m.value
+      }])
+    }, [
+      i("div", {
+        ref_key: "controlRef",
+        ref: l,
+        class: A(["enum-input__control", {
+          "enum-input__control--open": m.value
+        }]),
+        onClick: p[1] || (p[1] = (_) => d.value?.focus())
+      }, [
+        p[4] || (p[4] = i("svg", {
+          class: "enum-input__search-icon",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true"
+        }, [
+          i("circle", {
+            cx: "11",
+            cy: "11",
+            r: "7"
+          }),
+          i("path", { d: "m20 20-4-4" })
+        ], -1)),
+        me(i("input", {
+          ref_key: "inputRef",
+          ref: d,
+          "onUpdate:modelValue": p[0] || (p[0] = (_) => b.value = _),
+          class: "enum-input__field",
+          type: "text",
+          role: "combobox",
+          "aria-autocomplete": "list",
+          "aria-haspopup": "listbox",
+          "aria-expanded": m.value,
+          "aria-controls": m.value ? O : void 0,
+          "aria-activedescendant": f.value,
+          autocomplete: "off",
+          spellcheck: "false",
+          placeholder: e.placeholder ?? "Select…",
+          onFocus: ue,
+          onBlur: F,
+          onKeydown: X
+        }, null, 40, dn), [
+          [fe, b.value]
+        ]),
+        (k(), E("svg", {
+          class: A(["enum-input__chevron", {
+            "enum-input__chevron--open": m.value
+          }]),
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true"
+        }, [...p[3] || (p[3] = [
+          i("path", { d: "m7 10 5 5 5-5" }, null, -1)
+        ])], 2))
+      ], 2),
+      (k(), Me($e, { to: "body" }, [
+        Ee(Te, { name: "enum-menu" }, {
+          default: Se(() => [
+            m.value ? (k(), E("div", {
+              key: 0,
+              id: O,
+              ref_key: "menuRef",
+              ref: g,
+              class: A(["enum-input__options", {
+                "enum-input__options--above": L.value === "above",
+                "enum-input__options--below": L.value === "below",
+                "enum-input__options--overlay": L.value === "overlay"
+              }]),
+              style: Ce(N.value),
+              role: "listbox",
+              "aria-label": e.placeholder ?? "Select a value"
+            }, [
+              (k(!0), E(ye, null, Re(q.value, (_, V) => (k(), E("button", {
+                id: `${je(S)}-option-${V}`,
+                key: `${typeof _}:${String(_)}:${V}`,
+                "data-option-index": V,
+                type: "button",
+                class: A(["enum-input__option", {
+                  "enum-input__option--selected": Object.is(_, e.value),
+                  "enum-input__option--highlighted": V === M.value
+                }]),
+                role: "option",
+                "aria-selected": Object.is(_, e.value),
+                onMouseenter: (W) => M.value = V,
+                onMousedown: p[2] || (p[2] = ee(() => {
+                }, ["prevent"])),
+                onClick: (W) => v(_)
+              }, [
+                i("span", pn, [
+                  Object.is(_, e.value) ? (k(), E("svg", mn, [...p[5] || (p[5] = [
+                    i("path", { d: "M20 6 9 17l-5-5" }, null, -1)
+                  ])])) : K("", !0)
+                ]),
+                i("span", fn, Q(z(_)), 1),
+                String(_) !== z(_) ? (k(), E("span", hn, Q(String(_)), 1)) : K("", !0)
+              ], 42, vn))), 128)),
+              q.value.length === 0 ? (k(), E("div", gn, [
+                p[7] || (p[7] = i("svg", {
+                  viewBox: "0 0 24 24",
+                  "aria-hidden": "true"
+                }, [
+                  i("circle", {
+                    cx: "11",
+                    cy: "11",
+                    r: "7"
+                  }),
+                  i("path", { d: "m20 20-4-4" })
+                ], -1)),
+                i("div", null, [
+                  p[6] || (p[6] = i("strong", null, "No matches", -1)),
+                  i("span", null, " No available value matches “" + Q(b.value.trim()) + "”. ", 1)
+                ])
+              ])) : K("", !0)
+            ], 14, cn)) : K("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 2));
+  }
+}), Sn = /* @__PURE__ */ ne(bn, [["__scopeId", "data-v-5c57fbed"]]);
+export {
+  xn as AutoCompleteBox,
+  _n as BooleanTickBox,
+  yn as BooleanToggle,
+  kn as LongTextBox,
+  Mn as NumberInput,
+  $n as NumberSlider,
+  En as ShortTextBox,
+  Tn as SingleAutoComplete,
+  Sn as SingleEnumInput
+};