@dpa-id-components/dpa-shared-components 18.0.2 → 18.0.3

package/dist/{index-DkNrhC1p.js → index-C1RfWXaF.js}

@@ -1,38 +1,419 @@
 import { createElementBlock as D, openBlock as h, defineComponent as _e, computed as C, defineAsyncComponent as Ys, watchEffect as rn, createBlock as ye, resolveDynamicComponent as Ba, normalizeClass as J, createElementVNode as G, createCommentVNode as I, createVNode as Oe, renderSlot as K, toDisplayString as Pe, mergeModels as Cr, useSlots as wa, useModel as il, ref as H, onBeforeUpdate as ul, onMounted as Ze, withDirectives as Tt, unref as y, mergeProps as je, vModelText as dl, vModelDynamic as Is, Fragment as xe, createTextVNode as gt, withModifiers as Et, withKeys as Ca, normalizeStyle as qe, withCtx as ge, renderList as Ee, vShow as pa, Transition as It, reactive as _n, toRef as yn, getCurrentInstance as jn, nextTick as Mt, onUnmounted as on, watch as ut, isRef as Mo, createSlots as kt, normalizeProps as yt, guardReactiveProps as Ct, Teleport as cl, h as Ls, render as $o, useAttrs as Fs, toValue as la, getCurrentScope as Hr, onScopeDispose as jr, hasInjectionContext as fl, inject as Vs, shallowRef as Ua, shallowReadonly as Ya, watchPostEffect as Ws, vModelRadio as Us } from "vue";
-const qr = "-", Hs = (e) => {
-  const t = qs(e), {
+const ir = {
+  activities: () => import("./activities-D8-N1-9U.js"),
+  alert: () => import("./alert-vNfEACwx.js"),
+  "alert-fill": () => import("./alert-fill-rnf1WDZZ.js"),
+  "alert-octagon": () => import("./alert-octagon-Bf9rhJ-t.js"),
+  ai: () => import("./ai-RQ8kp8x-.js"),
+  apps: () => import("./apps-BF11JWhM.js"),
+  archive: () => import("./archive-MqHKfmIJ.js"),
+  "arrow-left": () => import("./arrow-left-CVXdU5MB.js"),
+  "arrow-nav-left": () => import("./arrow-nav-left-CPfHZMpd.js"),
+  "arrow-nav-right": () => import("./arrow-nav-right-D35fcvsI.js"),
+  "arrow-up": () => import("./arrow-up-BLSkG6x9.js"),
+  "arrow-right": () => import("./arrow-right-DJBY3wj4.js"),
+  "arrow-down": () => import("./arrow-down-DPT8wNZ7.js"),
+  "arrowhead-left": () => import("./arrowhead-left-euGMBv4F.js"),
+  "arrowhead-right": () => import("./arrowhead-right-lwOYqbB4.js"),
+  "arrowhead-top": () => import("./arrowhead-top-6FTexgFT.js"),
+  atmo: () => import("./atmo-DAU2uzDv.js"),
+  audio: () => import("./audio-DwP94SEK.js"),
+  "audio-circled": () => import("./audio-circled-7R-7sncX.js"),
+  "audio-filled": () => import("./audio-filled-D3dWp_uy.js"),
+  bag: () => import("./bag-CMw3XdoZ.js"),
+  bell: () => import("./bell-Cdp869n7.js"),
+  "bell-fill": () => import("./bell-fill-B4DML6Tk.js"),
+  book: () => import("./book-CveJMqSf.js"),
+  bookmark: () => import("./bookmark-DWT0y5zx.js"),
+  "bookmark-fill": () => import("./bookmark-fill-zzz6mr5W.js"),
+  "bookmark-outlined": () => import("./bookmark-outlined-DnublF2q.js"),
+  box: () => import("./box-Cz_MWCS1.js"),
+  bulb: () => import("./bulb-DFGsawSw.js"),
+  call: () => import("./call-DUqC_rJG.js"),
+  camera: () => import("./camera-DdNTYE0h.js"),
+  check: () => import("./check-vXGHmcIW.js"),
+  checklist: () => import("./checklist-FZAjX_BR.js"),
+  checkmark: () => import("./checkmark-DK1r_ANi.js"),
+  "checkmark-double": () => import("./checkmark-double-CsLZ6qUd.js"),
+  "chevron-down": () => import("./chevron-down-DZ3hWDQE.js"),
+  "chevron-left": () => import("./chevron-left-Bc3_cUip.js"),
+  "chevron-right": () => import("./chevron-right-CKqYcLz9.js"),
+  "chevron-up": () => import("./chevron-up-LxMAdsrI.js"),
+  clipboard: () => import("./clipboard-BHiq4tWW.js"),
+  clock: () => import("./clock-B9JO34oX.js"),
+  close: () => import("./close-CXEY4oGs.js"),
+  "cloud-save": () => import("./cloud-save-wTW8REhy.js"),
+  code: () => import("./code-BFxwrUFX.js"),
+  collapse: () => import("./collapse-C-EUuoRP.js"),
+  "color-palette": () => import("./color-palette-CDLnyqhg.js"),
+  comment: () => import("./comment-D1zaXBXs.js"),
+  "comment-fill": () => import("./comment-fill-Skg3w0oH.js"),
+  copy: () => import("./copy-CiiEgzyv.js"),
+  "copy-link": () => import("./copy-link-8AvIH4Kv.js"),
+  delete: () => import("./delete-DK2Xv6_w.js"),
+  download: () => import("./download-CTcsTYDH.js"),
+  "dpa-id": () => import("./dpa-id-DR3Lsgsb.js"),
+  edit: () => import("./edit-Cz6AgY_t.js"),
+  "edit-add": () => import("./edit-add-GKxsClJo.js"),
+  eil: () => import("./eil-CDG5Jr-7.js"),
+  emoji: () => import("./emoji-DvBX_j4t.js"),
+  "emoji-add": () => import("./emoji-add-BOTrfthG.js"),
+  envelope: () => import("./envelope-CtqN8tx5.js"),
+  event: () => import("./event-DMWWJwsx.js"),
+  expand: () => import("./expand-CoW3UgwX.js"),
+  "external-link": () => import("./external-link-COjgJXTi.js"),
+  file: () => import("./file-D-LSRIUo.js"),
+  "file-pdf": () => import("./file-pdf-DCCQ_a9C.js"),
+  filter: () => import("./filter-D5OcBw41.js"),
+  "filter-outline": () => import("./filter-outline-3LfSX6Lo.js"),
+  flag: () => import("./flag-BtpRIItL.js"),
+  "flag-fill": () => import("./flag-fill-DdVhHzvR.js"),
+  "flag-filled": () => import("./flag-filled-B8Z6O36x.js"),
+  "flag-outline": () => import("./flag-outline-BIaFD8MB.js"),
+  flags: () => import("./flags-CNOJmS43.js"),
+  flash: () => import("./flash-BAdWmU_R.js"),
+  folder: () => import("./folder-By4NLjbd.js"),
+  "folder-add": () => import("./folder-add-CcQldCUB.js"),
+  "folder-fill": () => import("./folder-fill-FJgJQHVG.js"),
+  "folder-filled": () => import("./folder-filled-CTK9bk-B.js"),
+  gallery: () => import("./gallery-iX0eBg-7.js"),
+  graphic: () => import("./graphic-b8tfGL-U.js"),
+  "graphic-circled": () => import("./graphic-circled-CkNVp9_g.js"),
+  "graphic-filled": () => import("./graphic-filled-CgNQ3iBp.js"),
+  graphics: () => import("./graphics-BLa_Nfuv.js"),
+  "grid-1": () => import("./grid-1-4n8PoHrT.js"),
+  "grid-2": () => import("./grid-2-BYh4OW3v.js"),
+  "grid-3": () => import("./grid-3-ZSytMQOF.js"),
+  "grid-4": () => import("./grid-4-DAFZj1xY.js"),
+  "grid-6": () => import("./grid-6-BAbM1ng2.js"),
+  "grid-9": () => import("./grid-9-BF2ZxrJH.js"),
+  "grid-masonry": () => import("./grid-masonry-xBk_-mNZ.js"),
+  "grid-masonry-9": () => import("./grid-masonry-9-DBJUSTYS.js"),
+  help: () => import("./help-Cv0GeVz6.js"),
+  home: () => import("./home-CIhA7CAP.js"),
+  image: () => import("./image-DgVQtH95.js"),
+  "image focus point": () => import("./image focus point-BT71lPQX.js"),
+  "impact-high": () => import("./impact-high-C-3099r5.js"),
+  "impact-low": () => import("./impact-low-B3suyIqr.js"),
+  "impact-medium": () => import("./impact-medium-CKzJm3-k.js"),
+  "impact-very-high": () => import("./impact-very-high-KGQvMGb4.js"),
+  "impact-very-low": () => import("./impact-very-low-DUPeyNgf.js"),
+  info: () => import("./info-CGpjEUvT.js"),
+  "info-fill": () => import("./info-fill-0IVmY3H1.js"),
+  "info-filled": () => import("./info-filled-BFuUOGvZ.js"),
+  label: () => import("./label-Bg-gQjZM.js"),
+  "label-filled": () => import("./label-filled-C94sEKcA.js"),
+  language: () => import("./language-DcN0I_fl.js"),
+  latest: () => import("./latest-CyvY0aJh.js"),
+  lightbulb: () => import("./lightbulb-CuP4wTmB.js"),
+  list: () => import("./list-BX38cM-1.js"),
+  "list-search": () => import("./list-search-C3JqEuzT.js"),
+  lock: () => import("./lock-Kj-VxTKJ.js"),
+  "lock-filled": () => import("./lock-filled-G56jgqlc.js"),
+  mail: () => import("./mail-gKADNLru.js"),
+  map: () => import("./map-CZu2knGx.js"),
+  "map-outline": () => import("./map-outline-wfiFWF-W.js"),
+  menu: () => import("./menu-CrN_vLpX.js"),
+  minus: () => import("./minus-i_VNaesL.js"),
+  "more-horizontal": () => import("./more-horizontal-C7u-NuOt.js"),
+  "more-vertical": () => import("./more-vertical-B6ZXU_oV.js"),
+  move: () => import("./move-CgyXIsuM.js"),
+  "move-up-down": () => import("./move-up-down-_RoFws_y.js"),
+  navigation: () => import("./navigation-DBW-JMVr.js"),
+  note: () => import("./note-C5ghT6df.js"),
+  offline: () => import("./offline-JCt_xV2i.js"),
+  package: () => import("./package-DlrWo255.js"),
+  "paper-plane": () => import("./paper-plane-lDiFdS9l.js"),
+  paperplane: () => import("./paperplane-Dh_HsMFm.js"),
+  pause: () => import("./pause-hshL7m0v.js"),
+  "pause-circle": () => import("./pause-circle-CWJ7wvV-.js"),
+  pdf: () => import("./pdf-ByMAr_pf.js"),
+  pen: () => import("./pen-DkpP8zBz.js"),
+  "pen-check": () => import("./pen-check-CTtwOx0W.js"),
+  people: () => import("./people-DcHG120j.js"),
+  phone: () => import("./phone-DKntGYS-.js"),
+  picture: () => import("./picture-B24FpQ_g.js"),
+  "picture-circled": () => import("./picture-circled-BdXYsf-z.js"),
+  "picture-filled": () => import("./picture-filled-Cqisawxc.js"),
+  pin: () => import("./pin-C9pHZbCB.js"),
+  planning: () => import("./planning-DZyCVtNT.js"),
+  play: () => import("./play-C5163t9v.js"),
+  "play-circle": () => import("./play-circle-CJepR09X.js"),
+  "play-fill": () => import("./play-fill-Dg5agGC8.js"),
+  plus: () => import("./plus-o1LHvkzd.js"),
+  "plus-circle": () => import("./plus-circle-ptT6oAUL.js"),
+  print: () => import("./print-CvXl_szh.js"),
+  refresh: () => import("./refresh-BJ4s37HF.js"),
+  reset: () => import("./reset-DXL5hBzR.js"),
+  responsive: () => import("./responsive-BtCOsZ9L.js"),
+  "rubix-thema": () => import("./rubix-thema-CtCYpVHK.js"),
+  save: () => import("./save-Bsq9gKQd.js"),
+  "saved-search": () => import("./saved-search-C5QBII9Y.js"),
+  "saved-search-fill": () => import("./saved-search-fill-BMEpQDa5.js"),
+  search: () => import("./search-FjEsPR8U.js"),
+  settings: () => import("./settings-Dew4TRkl.js"),
+  share: () => import("./share-Cgr5Ae27.js"),
+  "share-alternative": () => import("./share-alternative-C1WPUOQS.js"),
+  sidebar: () => import("./sidebar-DJfR5se4.js"),
+  "sidebar-fill": () => import("./sidebar-fill-CmTx5oE3.js"),
+  slack: () => import("./slack-C6N9e9ts.js"),
+  "slider-config": () => import("./slider-config-D5ryC-9e.js"),
+  spellcheck: () => import("./spellcheck-CgPkv24l.js"),
+  spinner: () => import("./spinner-CUmDNwOP.js"),
+  "standard-view": () => import("./standard-view-CUMldHu5.js"),
+  star: () => import("./star-B9W3Ky04.js"),
+  "star-fill": () => import("./star-fill-DhAaaqmP.js"),
+  "star-filled": () => import("./star-filled-quxk8B-9.js"),
+  stop: () => import("./stop-D3zmCHsm.js"),
+  story: () => import("./story-YPCKA_qC.js"),
+  sync: () => import("./sync-C1z4VZJT.js"),
+  tasks: () => import("./tasks-BB_9ezkW.js"),
+  text: () => import("./text-nSm37hQd.js"),
+  "text-circled": () => import("./text-circled-Dc9Onu99.js"),
+  "text-filled": () => import("./text-filled-B0ZOW6JM.js"),
+  "thumbs-down": () => import("./thumbs-down-Cb2Y7NTu.js"),
+  "thumbs-up": () => import("./thumbs-up-Cd6iU3NA.js"),
+  "thumbs-up-double": () => import("./thumbs-up-double-D3lhVUS_.js"),
+  topic: () => import("./topic-C_VTDMR7.js"),
+  union: () => import("./union-CRw4YV1f.js"),
+  upload: () => import("./upload-BCQ7aJwX.js"),
+  video: () => import("./video-DnXRYTdX.js"),
+  "video overlay": () => import("./video overlay-DjCh1eBe.js"),
+  "video-circled": () => import("./video-circled-jkN2EnvK.js"),
+  "video-filled": () => import("./video-filled-CSybA72O.js"),
+  "video-rounded": () => import("./video-rounded-63Bs_nLq.js"),
+  view: () => import("./view-DHm4Xfd8.js"),
+  "view-off": () => import("./view-off-D4GKV9n1.js"),
+  "volume-up": () => import("./volume-up-Bjizso9F.js")
+}, Mn = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [a, r] of t)
+    n[a] = r;
+  return n;
+}, Hs = {};
+function js(e, t) {
+  return h(), D("div");
+}
+const qs = /* @__PURE__ */ Mn(Hs, [["render", js]]), lt = /* @__PURE__ */ _e({
+  __name: "UiIcon",
+  props: {
+    name: {},
+    size: { default: "large" },
+    sizeClasses: { default: "" }
+  },
+  setup(e) {
+    const t = e, n = C(
+      () => Ys({
+        loader: ir[t.name] ?? ir.close,
+        // Render a substitute element while loading for classes to attach to.
+        loadingComponent: qs,
+        // Immediately render the loadingComponent so that it can receive classes.
+        delay: 0
+      })
+    ), a = C(() => t.sizeClasses || {
+      xs: "size-3",
+      small: "size-4",
+      medium: "size-5",
+      large: "size-6",
+      xl: "size-10",
+      "2xl": "size-14"
+    }[t.size]);
+    return rn(() => {
+      if (!ir[t.name])
+        throw new Error(`UiIcon: No icon named “${t.name}” exists.`);
+    }), (r, o) => (h(), ye(Ba(n.value), {
+      class: J([a.value, "inline-flex fill-current"])
+    }, null, 8, ["class"]));
+  }
+}), Qs = { class: "flex items-center justify-between py-1" }, Gs = { class: "flex items-center pr-2" }, Ks = { class: "text-xs font-medium text-gray-900" }, Xs = {
+  key: 0,
+  class: "w-16 shrink-0 text-right text-xs text-gray-700"
+}, Js = { class: "flex flex-col" }, Zs = {
+  key: 0,
+  class: "flex py-1"
+}, ei = {
+  key: 0,
+  class: "relative mr-2 flex-none"
+}, ti = ["src", "alt"], ai = {
+  key: 0,
+  class: "absolute right-1 bottom-1 inline-block h-4 rounded-full bg-gray-900 px-1 align-middle text-xs leading-4 font-semibold text-white",
+  "data-testid": "imageCount"
+}, ni = {
+  key: 0,
+  class: "pt-1 text-xs font-medium text-gray-700"
+}, pv = /* @__PURE__ */ _e({
+  __name: "DpaMediaItem",
+  props: {
+    genre: { default: "text" },
+    isFulfilled: { type: Boolean, default: !1 },
+    imgSrc: { default: "" },
+    imgAlt: { default: "" },
+    imgCount: { default: 0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, n = C(() => ({
+      audio: t.isFulfilled ? "audio-filled" : "audio-circled",
+      video: t.isFulfilled ? "video-filled" : "video-circled",
+      text: t.isFulfilled ? "text-filled" : "text-circled",
+      picture: t.isFulfilled ? "picture-filled" : "picture-circled",
+      graphic: t.isFulfilled ? "graphic-filled" : "graphic-circled"
+    })[t.genre]), a = C(() => {
+      const { isFulfilled: r } = t;
+      return r ? t.disabled ? "cursor-not-allowed transition shadow-sm border border-gray-300" : "cursor-pointer transition shadow-sm hover:shadow-md group border border-gray-300 hover:border-gray-500" : "cursor-auto";
+    });
+    return (r, o) => (h(), D("div", {
+      class: J(["mb-px w-full bg-white pt-2 pr-4 pb-3 pl-3 md:pt-3", a.value]),
+      "data-testid": "rootDiv"
+    }, [
+      G("div", {
+        class: J(["flex", {
+          "flex-col-reverse": r.$slots.timePublished,
+          "flex-col": !r.$slots.timePublished,
+          "px-1": r.isFulfilled
+        }])
+      }, [
+        G("div", Qs, [
+          G("div", Gs, [
+            Oe(lt, {
+              size: "small",
+              name: n.value,
+              class: "mr-2 shrink-0 fill-current text-gray-700"
+            }, null, 8, ["name"]),
+            G("span", Ks, [
+              K(r.$slots, "description")
+            ])
+          ]),
+          r.$slots.planning ? (h(), D("span", Xs, [
+            K(r.$slots, "planning")
+          ])) : I("", !0)
+        ]),
+        G("div", Js, [
+          r.imgSrc || r.$slots.default ? (h(), D("div", Zs, [
+            r.imgSrc ? (h(), D("div", ei, [
+              G("img", {
+                src: r.imgSrc,
+                class: "h-14 object-cover",
+                alt: `Thumbnail${r.imgAlt ? ` :${r.imgAlt}` : ""}`
+              }, null, 8, ti),
+              r.imgCount > 1 ? (h(), D("span", ai, Pe(r.imgCount), 1)) : I("", !0)
+            ])) : I("", !0),
+            r.$slots.default ? (h(), D("h3", {
+              key: 1,
+              class: J(["text-sm leading-5 font-medium group-hover:underline", {
+                "ml-6": !r.isFulfilled,
+                "mr-1": r.$slots.planning,
+                "pr-16": r.$slots.planning
+              }])
+            }, [
+              K(r.$slots, "default")
+            ], 2)) : I("", !0)
+          ])) : I("", !0),
+          r.$slots.textLength ? (h(), D("span", {
+            key: 1,
+            class: J(["text-xs text-gray-700", r.isFulfilled ? "" : "ml-6"])
+          }, [
+            K(r.$slots, "textLength")
+          ], 2)) : I("", !0)
+        ]),
+        r.$slots.timePublished ? (h(), D("span", ni, [
+          K(r.$slots, "timePublished")
+        ])) : I("", !0)
+      ], 2)
+    ], 2));
+  }
+});
+let ur;
+const qr = {
+  mounted(e, t) {
+    const n = t.instance;
+    if (typeof t.value != "function") {
+      const r = n?.$options.name;
+      let o = `[vue-click-away:] provided expression '${t.value}' is not a function, but has to be`;
+      r && (o += `Found in component '${r}'`), console.warn(o);
+    }
+    const { bubble: a } = t.modifiers;
+    ur = (r) => {
+      const o = r.target;
+      (a || !e.contains(o) && e !== r.target) && t.value(r);
+    }, document.addEventListener("mousedown", ur);
+  },
+  unmounted() {
+    document.removeEventListener("mousedown", ur);
+  }
+}, wt = [];
+for (let e = 0; e < 256; ++e)
+  wt.push((e + 256).toString(16).slice(1));
+function ri(e, t = 0) {
+  return (wt[e[t + 0]] + wt[e[t + 1]] + wt[e[t + 2]] + wt[e[t + 3]] + "-" + wt[e[t + 4]] + wt[e[t + 5]] + "-" + wt[e[t + 6]] + wt[e[t + 7]] + "-" + wt[e[t + 8]] + wt[e[t + 9]] + "-" + wt[e[t + 10]] + wt[e[t + 11]] + wt[e[t + 12]] + wt[e[t + 13]] + wt[e[t + 14]] + wt[e[t + 15]]).toLowerCase();
+}
+let dr;
+const oi = new Uint8Array(16);
+function li() {
+  if (!dr) {
+    if (typeof crypto > "u" || !crypto.getRandomValues)
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    dr = crypto.getRandomValues.bind(crypto);
+  }
+  return dr(oi);
+}
+const si = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Do = { randomUUID: si };
+function Qr(e, t, n) {
+  if (Do.randomUUID && !e)
+    return Do.randomUUID();
+  e = e || {};
+  const a = e.random ?? e.rng?.() ?? li();
+  if (a.length < 16)
+    throw new Error("Random bytes length must be >= 16");
+  return a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, ri(a);
+}
+function ml(e) {
+  var t, n, a = "";
+  if (typeof e == "string" || typeof e == "number") a += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var r = e.length;
+    for (t = 0; t < r; t++) e[t] && (n = ml(e[t])) && (a && (a += " "), a += n);
+  } else for (n in e) e[n] && (a && (a += " "), a += n);
+  return a;
+}
+function ii() {
+  for (var e, t, n = 0, a = "", r = arguments.length; n < r; n++) (e = arguments[n]) && (t = ml(e)) && (a && (a += " "), a += t);
+  return a;
+}
+const Gr = "-", ui = (e) => {
+  const t = ci(e), {
     conflictingClassGroups: n,
     conflictingClassGroupModifiers: a
   } = e;
   return {
     getClassGroupId: (l) => {
-      const s = l.split(qr);
-      return s[0] === "" && s.length !== 1 && s.shift(), ml(s, t) || js(l);
+      const s = l.split(Gr);
+      return s[0] === "" && s.length !== 1 && s.shift(), pl(s, t) || di(l);
     },
     getConflictingClassGroupIds: (l, s) => {
       const i = n[l] || [];
       return s && a[l] ? [...i, ...a[l]] : i;
     }
   };
-}, ml = (e, t) => {
+}, pl = (e, t) => {
   if (e.length === 0)
     return t.classGroupId;
-  const n = e[0], a = t.nextPart.get(n), r = a ? ml(e.slice(1), a) : void 0;
+  const n = e[0], a = t.nextPart.get(n), r = a ? pl(e.slice(1), a) : void 0;
   if (r)
     return r;
   if (t.validators.length === 0)
     return;
-  const o = e.join(qr);
+  const o = e.join(Gr);
   return t.validators.find(({
     validator: l
   }) => l(o))?.classGroupId;
-}, Do = /^\[(.+)\]$/, js = (e) => {
-  if (Do.test(e)) {
-    const t = Do.exec(e)[1], n = t?.substring(0, t.indexOf(":"));
+}, Co = /^\[(.+)\]$/, di = (e) => {
+  if (Co.test(e)) {
+    const t = Co.exec(e)[1], n = t?.substring(0, t.indexOf(":"));
     if (n)
       return "arbitrary.." + n;
   }
-}, qs = (e) => {
+}, ci = (e) => {
   const {
     theme: t,
     classGroups: n
@@ -46,12 +427,12 @@ const qr = "-", Hs = (e) => {
 }, Pr = (e, t, n, a) => {
   e.forEach((r) => {
     if (typeof r == "string") {
-      const o = r === "" ? t : Co(t, r);
+      const o = r === "" ? t : Po(t, r);
       o.classGroupId = n;
       return;
     }
     if (typeof r == "function") {
-      if (Qs(r)) {
+      if (fi(r)) {
         Pr(r(a), t, n, a);
         return;
       }
@@ -62,18 +443,18 @@ const qr = "-", Hs = (e) => {
       return;
     }
     Object.entries(r).forEach(([o, l]) => {
-      Pr(l, Co(t, o), n, a);
+      Pr(l, Po(t, o), n, a);
     });
   });
-}, Co = (e, t) => {
+}, Po = (e, t) => {
   let n = e;
-  return t.split(qr).forEach((a) => {
+  return t.split(Gr).forEach((a) => {
     n.nextPart.has(a) || n.nextPart.set(a, {
       nextPart: /* @__PURE__ */ new Map(),
       validators: []
     }), n = n.nextPart.get(a);
   }), n;
-}, Qs = (e) => e.isThemeGetter, Gs = (e) => {
+}, fi = (e) => e.isThemeGetter, mi = (e) => {
   if (e < 1)
     return {
       get: () => {
@@ -97,7 +478,7 @@ const qr = "-", Hs = (e) => {
       n.has(o) ? n.set(o, l) : r(o, l);
     }
   };
-}, Tr = "!", Ar = ":", Ks = Ar.length, Xs = (e) => {
+}, Tr = "!", Ar = ":", pi = Ar.length, hi = (e) => {
   const {
     prefix: t,
     experimentalParseClassName: n
@@ -109,7 +490,7 @@ const qr = "-", Hs = (e) => {
       let w = r[k];
       if (l === 0 && s === 0) {
         if (w === Ar) {
-          o.push(r.slice(i, k)), i = k + Ks;
+          o.push(r.slice(i, k)), i = k + pi;
           continue;
         }
         if (w === "/") {
@@ -119,7 +500,7 @@ const qr = "-", Hs = (e) => {
       }
       w === "[" ? l++ : w === "]" ? l-- : w === "(" ? s++ : w === ")" && s--;
     }
-    const c = o.length === 0 ? r : r.substring(i), f = Js(c), m = f !== c, p = u && u > i ? u - i : void 0;
+    const c = o.length === 0 ? r : r.substring(i), f = vi(c), m = f !== c, p = u && u > i ? u - i : void 0;
     return {
       modifiers: o,
       hasImportantModifier: m,
@@ -145,7 +526,7 @@ const qr = "-", Hs = (e) => {
     });
   }
   return a;
-}, Js = (e) => e.endsWith(Tr) ? e.substring(0, e.length - 1) : e.startsWith(Tr) ? e.substring(1) : e, Zs = (e) => {
+}, vi = (e) => e.endsWith(Tr) ? e.substring(0, e.length - 1) : e.startsWith(Tr) ? e.substring(1) : e, yi = (e) => {
   const t = Object.fromEntries(e.orderSensitiveModifiers.map((a) => [a, !0]));
   return (a) => {
     if (a.length <= 1)
@@ -156,18 +537,18 @@ const qr = "-", Hs = (e) => {
       l[0] === "[" || t[l] ? (r.push(...o.sort(), l), o = []) : o.push(l);
     }), r.push(...o.sort()), r;
   };
-}, ei = (e) => ({
-  cache: Gs(e.cacheSize),
-  parseClassName: Xs(e),
-  sortModifiers: Zs(e),
-  ...Hs(e)
-}), ti = /\s+/, ai = (e, t) => {
+}, gi = (e) => ({
+  cache: mi(e.cacheSize),
+  parseClassName: hi(e),
+  sortModifiers: yi(e),
+  ...ui(e)
+}), bi = /\s+/, wi = (e, t) => {
   const {
     parseClassName: n,
     getClassGroupId: a,
     getConflictingClassGroupIds: r,
     sortModifiers: o
-  } = t, l = [], s = e.trim().split(ti);
+  } = t, l = [], s = e.trim().split(bi);
   let i = "";
   for (let u = s.length - 1; u >= 0; u -= 1) {
     const c = s[u], {
@@ -206,52 +587,52 @@ const qr = "-", Hs = (e) => {
   }
   return i;
 };
-function ni() {
+function ki() {
   let e = 0, t, n, a = "";
   for (; e < arguments.length; )
-    (t = arguments[e++]) && (n = pl(t)) && (a && (a += " "), a += n);
+    (t = arguments[e++]) && (n = hl(t)) && (a && (a += " "), a += n);
   return a;
 }
-const pl = (e) => {
+const hl = (e) => {
   if (typeof e == "string")
     return e;
   let t, n = "";
   for (let a = 0; a < e.length; a++)
-    e[a] && (t = pl(e[a])) && (n && (n += " "), n += t);
+    e[a] && (t = hl(e[a])) && (n && (n += " "), n += t);
   return n;
 };
-function ri(e, ...t) {
+function xi(e, ...t) {
   let n, a, r, o = l;
   function l(i) {
     const u = t.reduce((c, f) => f(c), e());
-    return n = ei(u), a = n.cache.get, r = n.cache.set, o = s, s(i);
+    return n = gi(u), a = n.cache.get, r = n.cache.set, o = s, s(i);
   }
   function s(i) {
     const u = a(i);
     if (u)
       return u;
-    const c = ai(i, n);
+    const c = wi(i, n);
     return r(i, c), c;
   }
   return function() {
-    return o(ni.apply(null, arguments));
+    return o(ki.apply(null, arguments));
   };
 }
 const ct = (e) => {
   const t = (n) => n[e] || [];
   return t.isThemeGetter = !0, t;
-}, hl = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, vl = /^\((?:(\w[\w-]*):)?(.+)\)$/i, oi = /^\d+\/\d+$/, li = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, si = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, ii = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, ui = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, di = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Ia = (e) => oi.test(e), Se = (e) => !!e && !Number.isNaN(Number(e)), da = (e) => !!e && Number.isInteger(Number(e)), ir = (e) => e.endsWith("%") && Se(e.slice(0, -1)), na = (e) => li.test(e), ci = () => !0, fi = (e) => (
+}, vl = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, yl = /^\((?:(\w[\w-]*):)?(.+)\)$/i, _i = /^\d+\/\d+$/, Mi = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, $i = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Di = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Ci = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Pi = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Ia = (e) => _i.test(e), Se = (e) => !!e && !Number.isNaN(Number(e)), da = (e) => !!e && Number.isInteger(Number(e)), cr = (e) => e.endsWith("%") && Se(e.slice(0, -1)), na = (e) => Mi.test(e), Ti = () => !0, Ai = (e) => (
   // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
-  si.test(e) && !ii.test(e)
-), yl = () => !1, mi = (e) => ui.test(e), pi = (e) => di.test(e), hi = (e) => !he(e) && !ve(e), vi = (e) => ln(e, wl, yl), he = (e) => hl.test(e), Ma = (e) => ln(e, kl, fi), ur = (e) => ln(e, ki, Se), Po = (e) => ln(e, gl, yl), yi = (e) => ln(e, bl, pi), Sn = (e) => ln(e, xl, mi), ve = (e) => vl.test(e), dn = (e) => sn(e, kl), gi = (e) => sn(e, xi), To = (e) => sn(e, gl), bi = (e) => sn(e, wl), wi = (e) => sn(e, bl), On = (e) => sn(e, xl, !0), ln = (e, t, n) => {
-  const a = hl.exec(e);
+  $i.test(e) && !Di.test(e)
+), gl = () => !1, Si = (e) => Ci.test(e), Oi = (e) => Pi.test(e), Ri = (e) => !he(e) && !ve(e), zi = (e) => ln(e, kl, gl), he = (e) => vl.test(e), Ma = (e) => ln(e, xl, Ai), fr = (e) => ln(e, Ii, Se), To = (e) => ln(e, bl, gl), Bi = (e) => ln(e, wl, Oi), Sn = (e) => ln(e, _l, Si), ve = (e) => yl.test(e), dn = (e) => sn(e, xl), Ni = (e) => sn(e, Li), Ao = (e) => sn(e, bl), Ei = (e) => sn(e, kl), Yi = (e) => sn(e, wl), On = (e) => sn(e, _l, !0), ln = (e, t, n) => {
+  const a = vl.exec(e);
   return a ? a[1] ? t(a[1]) : n(a[2]) : !1;
 }, sn = (e, t, n = !1) => {
-  const a = vl.exec(e);
+  const a = yl.exec(e);
   return a ? a[1] ? t(a[1]) : n : !1;
-}, gl = (e) => e === "position" || e === "percentage", bl = (e) => e === "image" || e === "url", wl = (e) => e === "length" || e === "size" || e === "bg-size", kl = (e) => e === "length", ki = (e) => e === "number", xi = (e) => e === "family-name", xl = (e) => e === "shadow", _i = () => {
+}, bl = (e) => e === "position" || e === "percentage", wl = (e) => e === "image" || e === "url", kl = (e) => e === "length" || e === "size" || e === "bg-size", xl = (e) => e === "length", Ii = (e) => e === "number", Li = (e) => e === "family-name", _l = (e) => e === "shadow", Fi = () => {
   const e = ct("color"), t = ct("font"), n = ct("text"), a = ct("font-weight"), r = ct("tracking"), o = ct("leading"), l = ct("breakpoint"), s = ct("container"), i = ct("spacing"), u = ct("radius"), c = ct("shadow"), f = ct("inset-shadow"), m = ct("text-shadow"), p = ct("drop-shadow"), k = ct("blur"), w = ct("perspective"), x = ct("aspect"), g = ct("ease"), $ = ct("animate"), b = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], O = () => [
     "center",
     "top",
@@ -272,13 +653,13 @@ const ct = (e) => {
     "left-bottom"
   ], P = () => [...O(), ve, he], _ = () => ["auto", "hidden", "clip", "visible", "scroll"], T = () => ["auto", "contain", "none"], Y = () => [ve, he, i], j = () => [Ia, "full", "auto", ...Y()], W = () => [da, "none", "subgrid", ve, he], ue = () => ["auto", {
     span: ["full", da, ve, he]
-  }, da, ve, he], pe = () => [da, "auto", ve, he], ke = () => ["auto", "min", "max", "fr", ve, he], A = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], N = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], S = () => ["auto", ...Y()], q = () => [Ia, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...Y()], L = () => [e, ve, he], U = () => [...O(), To, Po, {
+  }, da, ve, he], pe = () => [da, "auto", ve, he], ke = () => ["auto", "min", "max", "fr", ve, he], A = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], N = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], S = () => ["auto", ...Y()], q = () => [Ia, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...Y()], L = () => [e, ve, he], U = () => [...O(), Ao, To, {
     position: [ve, he]
   }], ae = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
-  }], F = () => ["auto", "cover", "contain", bi, vi, {
+  }], F = () => ["auto", "cover", "contain", Ei, zi, {
     size: [ve, he]
-  }], me = () => [ir, dn, Ma], M = () => [
+  }], me = () => [cr, dn, Ma], M = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -286,7 +667,7 @@ const ct = (e) => {
     u,
     ve,
     he
-  ], R = () => ["", Se, dn, Ma], Q = () => ["solid", "dashed", "dotted", "double"], Z = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], d = () => [Se, ir, To, Po], E = () => [
+  ], R = () => ["", Se, dn, Ma], Q = () => ["solid", "dashed", "dotted", "double"], Z = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], d = () => [Se, cr, Ao, To], E = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -301,11 +682,11 @@ const ct = (e) => {
       aspect: ["video"],
       blur: [na],
       breakpoint: [na],
-      color: [ci],
+      color: [Ti],
       container: [na],
       "drop-shadow": [na],
       ease: ["in", "out", "in-out"],
-      font: [hi],
+      font: [Ri],
       "font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
       "inset-shadow": [na],
       leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
@@ -1003,21 +1384,21 @@ const ct = (e) => {
        * @see https://tailwindcss.com/docs/font-weight
        */
       "font-weight": [{
-        font: [a, ve, ur]
+        font: [a, ve, fr]
       }],
       /**
        * Font Stretch
        * @see https://tailwindcss.com/docs/font-stretch
        */
       "font-stretch": [{
-        "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", ir, he]
+        "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", cr, he]
       }],
       /**
        * Font Family
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [gi, he, t]
+        font: [Ni, he, t]
       }],
       /**
        * Font Variant Numeric
@@ -1061,7 +1442,7 @@ const ct = (e) => {
        * @see https://tailwindcss.com/docs/line-clamp
        */
       "line-clamp": [{
-        "line-clamp": [Se, "none", ve, ur]
+        "line-clamp": [Se, "none", ve, fr]
       }],
       /**
        * Line Height
@@ -1272,7 +1653,7 @@ const ct = (e) => {
           }, da, ve, he],
           radial: ["", ve, he],
           conic: [da, ve, he]
-        }, wi, yi]
+        }, Yi, Bi]
       }],
       /**
        * Background Color
@@ -2646,7 +3027,7 @@ const ct = (e) => {
        * @see https://tailwindcss.com/docs/stroke-width
        */
       "stroke-w": [{
-        stroke: [Se, dn, Ma, ur]
+        stroke: [Se, dn, Ma, fr]
       }],
       /**
        * Stroke
@@ -2721,390 +3102,9 @@ const ct = (e) => {
     },
     orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
   };
-}, Mi = /* @__PURE__ */ ri(_i);
-function _l(e) {
-  var t, n, a = "";
-  if (typeof e == "string" || typeof e == "number") a += e;
-  else if (typeof e == "object") if (Array.isArray(e)) {
-    var r = e.length;
-    for (t = 0; t < r; t++) e[t] && (n = _l(e[t])) && (a && (a += " "), a += n);
-  } else for (n in e) e[n] && (a && (a += " "), a += n);
-  return a;
-}
-function $i() {
-  for (var e, t, n = 0, a = "", r = arguments.length; n < r; n++) (e = arguments[n]) && (t = _l(e)) && (a && (a += " "), a += t);
-  return a;
-}
+}, Vi = /* @__PURE__ */ xi(Fi);
 function nt(...e) {
-  return Mi($i(e));
-}
-const Mn = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [a, r] of t)
-    n[a] = r;
-  return n;
-}, Di = {};
-function Ci(e, t) {
-  return h(), D("div");
-}
-const Pi = /* @__PURE__ */ Mn(Di, [["render", Ci]]), dr = {
-  activities: () => import("./activities-BwCMfupG.js"),
-  alert: () => import("./alert-C2DzqrYz.js"),
-  "alert-fill": () => import("./alert-fill-Dfc-fdMf.js"),
-  "alert-octagon": () => import("./alert-octagon-BD7onB7A.js"),
-  ai: () => import("./ai-XGPc3Gj-.js"),
-  apps: () => import("./apps-Bl6nbggk.js"),
-  archive: () => import("./archive-BT8Og1lI.js"),
-  "arrow-left": () => import("./arrow-left--lwJ7n5Y.js"),
-  "arrow-nav-left": () => import("./arrow-nav-left-DGXs5XP5.js"),
-  "arrow-nav-right": () => import("./arrow-nav-right-4wGPIt4L.js"),
-  "arrow-up": () => import("./arrow-up-C5GAqKF0.js"),
-  "arrow-right": () => import("./arrow-right-CLH9Kk-1.js"),
-  "arrow-down": () => import("./arrow-down-BBbGoKV6.js"),
-  "arrowhead-left": () => import("./arrowhead-left-Bsv8oMsZ.js"),
-  "arrowhead-right": () => import("./arrowhead-right-J1rF072O.js"),
-  "arrowhead-top": () => import("./arrowhead-top-Cc9e8H-s.js"),
-  atmo: () => import("./atmo-CB9shz-d.js"),
-  audio: () => import("./audio-DLZtXp9i.js"),
-  "audio-circled": () => import("./audio-circled-CqVv320Z.js"),
-  "audio-filled": () => import("./audio-filled-Dbk6jNrs.js"),
-  bag: () => import("./bag-UDL00U8m.js"),
-  bell: () => import("./bell-DadKmGxB.js"),
-  "bell-fill": () => import("./bell-fill-D8AITghz.js"),
-  book: () => import("./book-Dtp2ZDcg.js"),
-  bookmark: () => import("./bookmark-DduP0GGZ.js"),
-  "bookmark-fill": () => import("./bookmark-fill-Bfrc9gQk.js"),
-  "bookmark-outlined": () => import("./bookmark-outlined-DteT_5oO.js"),
-  box: () => import("./box-B1Srbo3w.js"),
-  bulb: () => import("./bulb-t1R5159x.js"),
-  call: () => import("./call-P7vTz_c1.js"),
-  camera: () => import("./camera-DFEX_UYa.js"),
-  check: () => import("./check-COnsVXkn.js"),
-  checklist: () => import("./checklist-B7ddqqqJ.js"),
-  checkmark: () => import("./checkmark-42rLb8nM.js"),
-  "checkmark-double": () => import("./checkmark-double-B0ltACju.js"),
-  "chevron-down": () => import("./chevron-down-aZXgHBTr.js"),
-  "chevron-left": () => import("./chevron-left-CHxmFf7T.js"),
-  "chevron-right": () => import("./chevron-right-D7EPjSk2.js"),
-  "chevron-up": () => import("./chevron-up-DLpERB8T.js"),
-  clipboard: () => import("./clipboard-DbhatTyW.js"),
-  clock: () => import("./clock-AJK0dJRt.js"),
-  close: () => import("./close-C3dI63Yh.js"),
-  "cloud-save": () => import("./cloud-save-Cim1_qOB.js"),
-  code: () => import("./code-AhofYaAo.js"),
-  collapse: () => import("./collapse-CmPj5TDZ.js"),
-  "color-palette": () => import("./color-palette-STy5hm6X.js"),
-  comment: () => import("./comment-DQgwPV66.js"),
-  "comment-fill": () => import("./comment-fill-DQLR_uU3.js"),
-  copy: () => import("./copy-DuTJcuIS.js"),
-  "copy-link": () => import("./copy-link-BgSs6MFe.js"),
-  delete: () => import("./delete-CaiETWh6.js"),
-  download: () => import("./download-8EwKFQ1L.js"),
-  "dpa-id": () => import("./dpa-id-DjCLRuz3.js"),
-  edit: () => import("./edit-D_XkiicN.js"),
-  "edit-add": () => import("./edit-add-Cy7XbchG.js"),
-  eil: () => import("./eil-CTDxPr5-.js"),
-  emoji: () => import("./emoji-CUrSZiNV.js"),
-  "emoji-add": () => import("./emoji-add-3fGsd3f1.js"),
-  envelope: () => import("./envelope-AREQQSDk.js"),
-  event: () => import("./event-eVoYcy7K.js"),
-  expand: () => import("./expand-BY-thDhH.js"),
-  "external-link": () => import("./external-link-BUgsJElR.js"),
-  file: () => import("./file-D32C3uSS.js"),
-  "file-pdf": () => import("./file-pdf-DoLw6da9.js"),
-  filter: () => import("./filter-BB3w5Sxz.js"),
-  "filter-outline": () => import("./filter-outline-DuK3AOnd.js"),
-  flag: () => import("./flag-CRC0LKa7.js"),
-  "flag-fill": () => import("./flag-fill-DfOBrJXX.js"),
-  "flag-filled": () => import("./flag-filled-DWT6czlL.js"),
-  "flag-outline": () => import("./flag-outline-Chfp_vJA.js"),
-  flags: () => import("./flags-CrdDJWvi.js"),
-  flash: () => import("./flash-CC420Wyb.js"),
-  folder: () => import("./folder-CzaAEMlt.js"),
-  "folder-add": () => import("./folder-add-GmgBU9dX.js"),
-  "folder-fill": () => import("./folder-fill-D9L8B6No.js"),
-  "folder-filled": () => import("./folder-filled-BO1iUprM.js"),
-  gallery: () => import("./gallery-Bi0e0AA7.js"),
-  graphic: () => import("./graphic-Bb0CzYPO.js"),
-  "graphic-circled": () => import("./graphic-circled-CUybQ-H-.js"),
-  "graphic-filled": () => import("./graphic-filled-Cgqs991e.js"),
-  graphics: () => import("./graphics-BrkdVJ0M.js"),
-  "grid-1": () => import("./grid-1-CUuRlAHh.js"),
-  "grid-2": () => import("./grid-2-DHTpyc5Q.js"),
-  "grid-3": () => import("./grid-3-BnsNNoqW.js"),
-  "grid-4": () => import("./grid-4-DV1Xa-63.js"),
-  "grid-6": () => import("./grid-6-BqMaW0IN.js"),
-  "grid-9": () => import("./grid-9-F7lIkXqN.js"),
-  "grid-masonry": () => import("./grid-masonry-BAa-D5ap.js"),
-  "grid-masonry-9": () => import("./grid-masonry-9-CUBN92vc.js"),
-  help: () => import("./help-B6ydKzfJ.js"),
-  home: () => import("./home-CP9WJV4-.js"),
-  image: () => import("./image-BYLcwro-.js"),
-  "image focus point": () => import("./image focus point-D2ODa05v.js"),
-  "impact-high": () => import("./impact-high-BcOEfEcK.js"),
-  "impact-low": () => import("./impact-low-DOUE1_eO.js"),
-  "impact-medium": () => import("./impact-medium-CfSIa0y8.js"),
-  "impact-very-high": () => import("./impact-very-high-DYv1MTwZ.js"),
-  "impact-very-low": () => import("./impact-very-low-C3Da5Al0.js"),
-  info: () => import("./info-Dg9TLhjF.js"),
-  "info-fill": () => import("./info-fill-Dpd1DsqF.js"),
-  "info-filled": () => import("./info-filled-BLgDbDI8.js"),
-  label: () => import("./label-QuWoCnx7.js"),
-  "label-filled": () => import("./label-filled-Cc1swNY7.js"),
-  language: () => import("./language-BhslkUFI.js"),
-  latest: () => import("./latest-3gr1SK39.js"),
-  lightbulb: () => import("./lightbulb-CiTG7HAL.js"),
-  list: () => import("./list-BUDj0zb9.js"),
-  "list-search": () => import("./list-search-dHdL7IDr.js"),
-  lock: () => import("./lock-5w81c14H.js"),
-  "lock-filled": () => import("./lock-filled-Brd2wbeQ.js"),
-  mail: () => import("./mail-B9BZhvOU.js"),
-  map: () => import("./map-DoVtwauE.js"),
-  "map-outline": () => import("./map-outline--tTSKNXL.js"),
-  menu: () => import("./menu-DKb1f_3D.js"),
-  minus: () => import("./minus-DTH_8Ct-.js"),
-  "more-horizontal": () => import("./more-horizontal-7E7z3tx9.js"),
-  "more-vertical": () => import("./more-vertical-BQb0rIfW.js"),
-  move: () => import("./move-Bx38n3oM.js"),
-  "move-up-down": () => import("./move-up-down-BfmYKnzM.js"),
-  navigation: () => import("./navigation-mtWkBJ3K.js"),
-  note: () => import("./note-CudzOgLa.js"),
-  offline: () => import("./offline-Bna3W_eo.js"),
-  package: () => import("./package-Cc4TAsXu.js"),
-  "paper-plane": () => import("./paper-plane-CQzembO4.js"),
-  paperplane: () => import("./paperplane-e2_DeshT.js"),
-  pause: () => import("./pause-Cx05iChx.js"),
-  "pause-circle": () => import("./pause-circle-Bsc4ARtf.js"),
-  pdf: () => import("./pdf-FQ-Cq8Fb.js"),
-  pen: () => import("./pen-ZTiv6qmM.js"),
-  "pen-check": () => import("./pen-check-BwbJqyLC.js"),
-  people: () => import("./people-Cne0RMYo.js"),
-  phone: () => import("./phone-HGy-Iumz.js"),
-  picture: () => import("./picture-B8V52ooa.js"),
-  "picture-circled": () => import("./picture-circled-C_HUi2VG.js"),
-  "picture-filled": () => import("./picture-filled-B90qZmUk.js"),
-  pin: () => import("./pin-Dw4c223U.js"),
-  planning: () => import("./planning-CEUdg1c4.js"),
-  play: () => import("./play-BKS-i_EO.js"),
-  "play-circle": () => import("./play-circle-qt4uOQMG.js"),
-  "play-fill": () => import("./play-fill-Bp4vkEEs.js"),
-  plus: () => import("./plus-BZ1VFUV-.js"),
-  "plus-circle": () => import("./plus-circle-DNXr3Jon.js"),
-  print: () => import("./print-Yv_1Kutn.js"),
-  refresh: () => import("./refresh-CFB6QoGq.js"),
-  reset: () => import("./reset-wS3gamjM.js"),
-  responsive: () => import("./responsive-BoZppau6.js"),
-  "rubix-thema": () => import("./rubix-thema-CPjQbsF-.js"),
-  save: () => import("./save-Tr7lJOPA.js"),
-  "saved-search": () => import("./saved-search-DcNUxPiX.js"),
-  "saved-search-fill": () => import("./saved-search-fill-BQn7gnIO.js"),
-  search: () => import("./search-DnVh_o2y.js"),
-  settings: () => import("./settings-DrDSmaxd.js"),
-  share: () => import("./share-hxs8D19w.js"),
-  "share-alternative": () => import("./share-alternative-D3Q5aznc.js"),
-  sidebar: () => import("./sidebar-r7FxXtZ-.js"),
-  "sidebar-fill": () => import("./sidebar-fill-BXK_j9Rc.js"),
-  slack: () => import("./slack-eaTQ-vWy.js"),
-  "slider-config": () => import("./slider-config-DEVFdor2.js"),
-  spellcheck: () => import("./spellcheck-CN05F54O.js"),
-  spinner: () => import("./spinner-45CwIZud.js"),
-  "standard-view": () => import("./standard-view-Dxchc6kL.js"),
-  star: () => import("./star-DRuPqRAc.js"),
-  "star-fill": () => import("./star-fill-BvcMJnz4.js"),
-  "star-filled": () => import("./star-filled-DzdD6db5.js"),
-  stop: () => import("./stop-CHbk6Mlp.js"),
-  story: () => import("./story-BCULj0ty.js"),
-  sync: () => import("./sync-BSwaQZpL.js"),
-  tasks: () => import("./tasks-0V0K_zp4.js"),
-  text: () => import("./text-CIjXPQ3e.js"),
-  "text-circled": () => import("./text-circled-C3NQ7nPc.js"),
-  "text-filled": () => import("./text-filled-ISvYwNIc.js"),
-  "thumbs-down": () => import("./thumbs-down-BNeCPLen.js"),
-  "thumbs-up": () => import("./thumbs-up-QgYR4Ras.js"),
-  "thumbs-up-double": () => import("./thumbs-up-double-DA7bFSVS.js"),
-  topic: () => import("./topic-DYDMLKxt.js"),
-  union: () => import("./union-d7CEsgu4.js"),
-  upload: () => import("./upload-D2OA2K0z.js"),
-  video: () => import("./video-DLdpC1-u.js"),
-  "video overlay": () => import("./video overlay-Cpqc5_Cs.js"),
-  "video-circled": () => import("./video-circled-zoACOw5g.js"),
-  "video-filled": () => import("./video-filled-C8K-lS7Z.js"),
-  "video-rounded": () => import("./video-rounded-4jbH8ve9.js"),
-  view: () => import("./view-C7t2yIFq.js"),
-  "view-off": () => import("./view-off-CkksQBfr.js"),
-  "volume-up": () => import("./volume-up-D9uo0Fp_.js")
-}, lt = /* @__PURE__ */ _e({
-  __name: "UiIcon",
-  props: {
-    name: {},
-    size: { default: "large" },
-    sizeClasses: { default: "" }
-  },
-  setup(e) {
-    const t = e, n = C(
-      () => Ys({
-        loader: dr[t.name] ?? dr.close,
-        // Render a substitute element while loading for classes to attach to.
-        loadingComponent: Pi,
-        // Immediately render the loadingComponent so that it can receive classes.
-        delay: 0
-      })
-    ), a = C(() => t.sizeClasses || {
-      xs: "size-3",
-      small: "size-4",
-      medium: "size-5",
-      large: "size-6",
-      xl: "size-10",
-      "2xl": "size-14"
-    }[t.size]);
-    return rn(() => {
-      if (!dr[t.name])
-        throw new Error(`UiIcon: No icon named “${t.name}” exists.`);
-    }), (r, o) => (h(), ye(Ba(n.value), {
-      class: J([a.value, "inline-flex fill-current"])
-    }, null, 8, ["class"]));
-  }
-}), Ti = { class: "flex items-center justify-between py-1" }, Ai = { class: "flex items-center pr-2" }, Si = { class: "text-xs font-medium text-gray-900" }, Oi = {
-  key: 0,
-  class: "w-16 shrink-0 text-right text-xs text-gray-700"
-}, Ri = { class: "flex flex-col" }, zi = {
-  key: 0,
-  class: "flex py-1"
-}, Bi = {
-  key: 0,
-  class: "relative mr-2 flex-none"
-}, Ni = ["src", "alt"], Ei = {
-  key: 0,
-  class: "absolute right-1 bottom-1 inline-block h-4 rounded-full bg-gray-900 px-1 align-middle text-xs leading-4 font-semibold text-white",
-  "data-testid": "imageCount"
-}, Yi = {
-  key: 0,
-  class: "pt-1 text-xs font-medium text-gray-700"
-}, pv = /* @__PURE__ */ _e({
-  __name: "DpaMediaItem",
-  props: {
-    genre: { default: "text" },
-    isFulfilled: { type: Boolean, default: !1 },
-    imgSrc: { default: "" },
-    imgAlt: { default: "" },
-    imgCount: { default: 0 },
-    disabled: { type: Boolean, default: !1 }
-  },
-  setup(e) {
-    const t = e, n = C(() => ({
-      audio: t.isFulfilled ? "audio-filled" : "audio-circled",
-      video: t.isFulfilled ? "video-filled" : "video-circled",
-      text: t.isFulfilled ? "text-filled" : "text-circled",
-      picture: t.isFulfilled ? "picture-filled" : "picture-circled",
-      graphic: t.isFulfilled ? "graphic-filled" : "graphic-circled"
-    })[t.genre]), a = C(() => {
-      const { isFulfilled: r } = t;
-      return r ? t.disabled ? "cursor-not-allowed transition shadow-sm border border-gray-300" : "cursor-pointer transition shadow-sm hover:shadow-md group border border-gray-300 hover:border-gray-500" : "cursor-auto";
-    });
-    return (r, o) => (h(), D("div", {
-      class: J(["mb-px w-full bg-white pt-2 pr-4 pb-3 pl-3 md:pt-3", a.value]),
-      "data-testid": "rootDiv"
-    }, [
-      G("div", {
-        class: J(["flex", {
-          "flex-col-reverse": r.$slots.timePublished,
-          "flex-col": !r.$slots.timePublished,
-          "px-1": r.isFulfilled
-        }])
-      }, [
-        G("div", Ti, [
-          G("div", Ai, [
-            Oe(lt, {
-              size: "small",
-              name: n.value,
-              class: "mr-2 shrink-0 fill-current text-gray-700"
-            }, null, 8, ["name"]),
-            G("span", Si, [
-              K(r.$slots, "description")
-            ])
-          ]),
-          r.$slots.planning ? (h(), D("span", Oi, [
-            K(r.$slots, "planning")
-          ])) : I("", !0)
-        ]),
-        G("div", Ri, [
-          r.imgSrc || r.$slots.default ? (h(), D("div", zi, [
-            r.imgSrc ? (h(), D("div", Bi, [
-              G("img", {
-                src: r.imgSrc,
-                class: "h-14 object-cover",
-                alt: `Thumbnail${r.imgAlt ? ` :${r.imgAlt}` : ""}`
-              }, null, 8, Ni),
-              r.imgCount > 1 ? (h(), D("span", Ei, Pe(r.imgCount), 1)) : I("", !0)
-            ])) : I("", !0),
-            r.$slots.default ? (h(), D("h3", {
-              key: 1,
-              class: J(["text-sm leading-5 font-medium group-hover:underline", {
-                "ml-6": !r.isFulfilled,
-                "mr-1": r.$slots.planning,
-                "pr-16": r.$slots.planning
-              }])
-            }, [
-              K(r.$slots, "default")
-            ], 2)) : I("", !0)
-          ])) : I("", !0),
-          r.$slots.textLength ? (h(), D("span", {
-            key: 1,
-            class: J(["text-xs text-gray-700", r.isFulfilled ? "" : "ml-6"])
-          }, [
-            K(r.$slots, "textLength")
-          ], 2)) : I("", !0)
-        ]),
-        r.$slots.timePublished ? (h(), D("span", Yi, [
-          K(r.$slots, "timePublished")
-        ])) : I("", !0)
-      ], 2)
-    ], 2));
-  }
-});
-let cr;
-const Qr = {
-  mounted(e, t) {
-    const n = t.instance;
-    if (typeof t.value != "function") {
-      const r = n?.$options.name;
-      let o = `[vue-click-away:] provided expression '${t.value}' is not a function, but has to be`;
-      r && (o += `Found in component '${r}'`), console.warn(o);
-    }
-    const { bubble: a } = t.modifiers;
-    cr = (r) => {
-      const o = r.target;
-      (a || !e.contains(o) && e !== r.target) && t.value(r);
-    }, document.addEventListener("mousedown", cr);
-  },
-  unmounted() {
-    document.removeEventListener("mousedown", cr);
-  }
-}, wt = [];
-for (let e = 0; e < 256; ++e)
-  wt.push((e + 256).toString(16).slice(1));
-function Ii(e, t = 0) {
-  return (wt[e[t + 0]] + wt[e[t + 1]] + wt[e[t + 2]] + wt[e[t + 3]] + "-" + wt[e[t + 4]] + wt[e[t + 5]] + "-" + wt[e[t + 6]] + wt[e[t + 7]] + "-" + wt[e[t + 8]] + wt[e[t + 9]] + "-" + wt[e[t + 10]] + wt[e[t + 11]] + wt[e[t + 12]] + wt[e[t + 13]] + wt[e[t + 14]] + wt[e[t + 15]]).toLowerCase();
-}
-let fr;
-const Li = new Uint8Array(16);
-function Fi() {
-  if (!fr) {
-    if (typeof crypto > "u" || !crypto.getRandomValues)
-      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    fr = crypto.getRandomValues.bind(crypto);
-  }
-  return fr(Li);
-}
-const Vi = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Ao = { randomUUID: Vi };
-function Gr(e, t, n) {
-  if (Ao.randomUUID && !e)
-    return Ao.randomUUID();
-  e = e || {};
-  const a = e.random ?? e.rng?.() ?? Fi();
-  if (a.length < 16)
-    throw new Error("Random bytes length must be >= 16");
-  return a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, Ii(a);
+  return Vi(ii(e));
 }
 const Wi = ["data-testid"], Ui = ["for"], Hi = ["id", "aria-invalid", "aria-errormessage", "aria-label", "readonly", "disabled", "placeholder"], ji = ["id", "aria-invalid", "aria-errormessage", "aria-label", "readonly", "disabled", "type", "autocomplete", "is-date-time-picker", "placeholder"], qi = ["id"], Qi = {
   key: 3,
@@ -3142,7 +3142,7 @@ const Wi = ["data-testid"], Ui = ["for"], Hi = ["id", "aria-invalid", "aria-erro
     ul(() => {
       i.value = "errors" in a;
     });
-    const c = C(() => o.id || `id-${Gr()}`), f = C(() => `${c.value}-addon-text`), m = C(
+    const c = C(() => o.id || `id-${Qr()}`), f = C(() => `${c.value}-addon-text`), m = C(
       () => i.value ? "error" : o.inputStatus
     ), p = C(() => m.value === "error" ? o.errorMessage : m.value === "warning" ? o.warningMessage : m.value === "info" ? o.infoText : ""), k = C(() => u.value ? {
       default: "text-blue-default",
@@ -3299,7 +3299,7 @@ const Kr = /* @__PURE__ */ Mn(Gi, [["render", Xi]]), Ji = ["data-testid"], Zi =
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const n = t, a = e, r = C(() => a.id || `id-${Gr()}`), o = (l) => {
+    const n = t, a = e, r = C(() => a.id || `id-${Qr()}`), o = (l) => {
       const s = l.target;
       n("change", s.checked);
     };
@@ -3528,7 +3528,7 @@ const Kr = /* @__PURE__ */ Mn(Gi, [["render", Xi]]), Ji = ["data-testid"], Zi =
         [pa, g.options && g.options.length && s.value]
       ])
     ])), [
-      [y(Qr), m]
+      [y(qr), m]
     ]);
   }
 }), lu = { class: "flex items-center gap-1" }, su = {
@@ -11870,98 +11870,7 @@ const um = ({
 Object.entries($m).forEach(([e, t]) => {
   e !== "default" && (vo[e] = t);
 });
-const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE__ */ _e({
-  __name: "UiFilterButton",
-  props: {
-    title: { default: "" },
-    variant: { default: "white-rounded" },
-    buttonWidth: { default: "max" },
-    chevronIcon: { default: "chevron-down" },
-    rotateIcon: { type: Boolean, default: !1 },
-    iconSize: { default: "xs" },
-    size: { default: "small" },
-    disabled: { type: Boolean, default: !1 },
-    active: { type: Boolean, default: !1 },
-    hasIcon: { type: Boolean, default: !0 },
-    iconLeft: { default: null },
-    iconLeftClass: { default: void 0 },
-    iconRightClass: { default: void 0 }
-  },
-  emits: ["click"],
-  setup(e, { emit: t }) {
-    const n = t, a = e, r = {
-      "blue-rounded": "bg-blue-default hover:bg-blue-dark",
-      "white-rounded": "bg-white hover:border-gray-700 border border-gray-400",
-      blank: "bg-transparent hover:bg-gray-300",
-      "blue-blank": "bg-transparent hover:bg-gray-300",
-      "transparent-rounded": "bg-transparent border border-gray-400 hover:border-gray-700"
-    }, o = {
-      "blue-rounded": "text-white",
-      "white-rounded": "text-gray-800 hover:text-gray-900",
-      blank: "text-gray-800 hover:text-gray-900",
-      "blue-blank": "text-blue-default hover:text-blue-dark",
-      "transparent-rounded": "text-gray-800"
-    }, l = C(() => a.disabled ? a.variant === "blank" ? "border border-transparent" : "bg-white border border-gray-400" : a.active ? r[a.variant].includes("border") ? "bg-blue-default hover:bg-blue-dark border border-blue-default hover:border-blue-dark" : "bg-blue-default hover:bg-blue-dark" : r[a.variant]), s = C(() => a.disabled ? "text-gray-400" : a.active ? "text-white" : o[a.variant]), i = () => {
-      a.disabled || n("click");
-    };
-    return (u, c) => (h(), D("div", {
-      class: J(
-        y(nt)(
-          "w-full pr-4 pl-3",
-          u.$attrs.class,
-          "flex cursor-pointer items-center rounded-full select-none",
-          l.value,
-          u.buttonWidth === "full" ? "w-full" : "max-w-max",
-          a.size === "xs" ? "py-0.5" : "py-1.5"
-        )
-      ),
-      onClick: i
-    }, [
-      G("button", {
-        class: "w-full rounded-full focus:outline-hidden focus-visible:outline-blue",
-        disabled: u.disabled,
-        type: "button",
-        "data-testid": "filter-button"
-      }, [
-        G("span", {
-          "data-testid": "filterbutton-title",
-          class: J(["flex w-full items-center justify-between text-left text-sm leading-normal font-medium", `${s.value} ${a.size === "xs" ? "text-xs" : "text-sm"}`])
-        }, [
-          u.hasIcon && u.iconLeft ? (h(), ye(lt, {
-            key: 0,
-            name: u.iconLeft,
-            size: u.iconSize,
-            class: J([
-              "flex-none",
-              y(nt)(
-                {
-                  "mr-2": u.title.length !== 0
-                },
-                u.iconLeftClass
-              )
-            ])
-          }, null, 8, ["name", "size", "class"])) : I("", !0),
-          G("span", Cm, Pe(u.title), 1),
-          u.hasIcon ? (h(), ye(lt, {
-            key: 1,
-            name: u.chevronIcon,
-            class: J([
-              y(nt)(
-                {
-                  "origin-center rotate-180": u.rotateIcon,
-                  "ml-2": u.title.length !== 0
-                },
-                u.iconRightClass
-              ),
-              "flex-none"
-            ]),
-            size: u.iconSize
-          }, null, 8, ["name", "class", "size"])) : I("", !0)
-        ], 2)
-      ], 8, Dm)
-    ], 2));
-  }
-}), Xo = {
+const Xo = {
   lessThanXSeconds: {
     standalone: {
       one: "weniger als 1 Sekunde",
@@ -12116,11 +12025,11 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
       other: "fast {{count}} Jahren"
     }
   }
-}, Pm = (e, t, n) => {
+}, Dm = (e, t, n) => {
   let a;
   const r = n?.addSuffix ? Xo[e].withPreposition : Xo[e].standalone;
   return typeof r == "string" ? a = r : t === 1 ? a = r.one : a = r.other.replace("{{count}}", String(t)), n?.addSuffix ? n.comparison && n.comparison > 0 ? "in " + a : "vor " + a : a;
-}, Tm = {
+}, Cm = {
   full: "EEEE, do MMMM y",
   // Montag, 7. Januar 2018
   long: "do MMMM y",
@@ -12129,45 +12038,45 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
   // 7. Jan. 2018
   short: "dd.MM.y"
   // 07.01.2018
-}, Am = {
+}, Pm = {
   full: "HH:mm:ss zzzz",
   long: "HH:mm:ss z",
   medium: "HH:mm:ss",
   short: "HH:mm"
-}, Sm = {
+}, Tm = {
   full: "{{date}} 'um' {{time}}",
   long: "{{date}} 'um' {{time}}",
   medium: "{{date}} {{time}}",
   short: "{{date}} {{time}}"
-}, Om = {
+}, Am = {
   date: Ha({
-    formats: Tm,
+    formats: Cm,
     defaultWidth: "full"
   }),
   time: Ha({
-    formats: Am,
+    formats: Pm,
     defaultWidth: "full"
   }),
   dateTime: Ha({
-    formats: Sm,
+    formats: Tm,
     defaultWidth: "full"
   })
-}, Rm = {
+}, Sm = {
   lastWeek: "'letzten' eeee 'um' p",
   yesterday: "'gestern um' p",
   today: "'heute um' p",
   tomorrow: "'morgen um' p",
   nextWeek: "eeee 'um' p",
   other: "P"
-}, zm = (e, t, n, a) => Rm[e], Bm = {
+}, Om = (e, t, n, a) => Sm[e], Rm = {
   narrow: ["v.Chr.", "n.Chr."],
   abbreviated: ["v.Chr.", "n.Chr."],
   wide: ["vor Christus", "nach Christus"]
-}, Nm = {
+}, zm = {
   narrow: ["1", "2", "3", "4"],
   abbreviated: ["Q1", "Q2", "Q3", "Q4"],
   wide: ["1. Quartal", "2. Quartal", "3. Quartal", "4. Quartal"]
-}, Ir = {
+}, Yr = {
   narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
   abbreviated: [
     "Jan",
@@ -12197,8 +12106,8 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
     "November",
     "Dezember"
   ]
-}, Em = {
-  narrow: Ir.narrow,
+}, Bm = {
+  narrow: Yr.narrow,
   abbreviated: [
     "Jan.",
     "Feb.",
@@ -12213,8 +12122,8 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
     "Nov.",
     "Dez."
   ],
-  wide: Ir.wide
-}, Ym = {
+  wide: Yr.wide
+}, Nm = {
   narrow: ["S", "M", "D", "M", "D", "F", "S"],
   short: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
   abbreviated: ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."],
@@ -12227,7 +12136,7 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
     "Freitag",
     "Samstag"
   ]
-}, Im = {
+}, Em = {
   narrow: {
     am: "vm.",
     pm: "nm.",
@@ -12258,7 +12167,7 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
     evening: "Abend",
     night: "Nacht"
   }
-}, Lm = {
+}, Ym = {
   narrow: {
     am: "vm.",
     pm: "nm.",
@@ -12289,49 +12198,49 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
     evening: "abends",
     night: "nachts"
   }
-}, Fm = (e) => Number(e) + ".", Vm = {
-  ordinalNumber: Fm,
+}, Im = (e) => Number(e) + ".", Lm = {
+  ordinalNumber: Im,
   era: qt({
-    values: Bm,
+    values: Rm,
     defaultWidth: "wide"
   }),
   quarter: qt({
-    values: Nm,
+    values: zm,
     defaultWidth: "wide",
     argumentCallback: (e) => e - 1
   }),
   month: qt({
-    values: Ir,
-    formattingValues: Em,
+    values: Yr,
+    formattingValues: Bm,
     defaultWidth: "wide"
   }),
   day: qt({
-    values: Ym,
+    values: Nm,
     defaultWidth: "wide"
   }),
   dayPeriod: qt({
-    values: Im,
+    values: Em,
     defaultWidth: "wide",
-    formattingValues: Lm,
+    formattingValues: Ym,
     defaultFormattingWidth: "wide"
   })
-}, Wm = /^(\d+)(\.)?/i, Um = /\d+/i, Hm = {
+}, Fm = /^(\d+)(\.)?/i, Vm = /\d+/i, Wm = {
   narrow: /^(v\.? ?Chr\.?|n\.? ?Chr\.?)/i,
   abbreviated: /^(v\.? ?Chr\.?|n\.? ?Chr\.?)/i,
   wide: /^(vor Christus|vor unserer Zeitrechnung|nach Christus|unserer Zeitrechnung)/i
-}, jm = {
+}, Um = {
   any: [/^v/i, /^n/i]
-}, qm = {
+}, Hm = {
   narrow: /^[1234]/i,
   abbreviated: /^q[1234]/i,
   wide: /^[1234](\.)? Quartal/i
-}, Qm = {
+}, jm = {
   any: [/1/i, /2/i, /3/i, /4/i]
-}, Gm = {
+}, qm = {
   narrow: /^[jfmasond]/i,
   abbreviated: /^(j[aä]n|feb|mär[z]?|apr|mai|jun[i]?|jul[i]?|aug|sep|okt|nov|dez)\.?/i,
   wide: /^(januar|februar|märz|april|mai|juni|juli|august|september|oktober|november|dezember)/i
-}, Km = {
+}, Qm = {
   narrow: [
     /^j/i,
     /^f/i,
@@ -12360,18 +12269,18 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
     /^n/i,
     /^d/i
   ]
-}, Xm = {
+}, Gm = {
   narrow: /^[smdmf]/i,
   short: /^(so|mo|di|mi|do|fr|sa)/i,
   abbreviated: /^(son?|mon?|die?|mit?|don?|fre?|sam?)\.?/i,
   wide: /^(sonntag|montag|dienstag|mittwoch|donnerstag|freitag|samstag)/i
-}, Jm = {
+}, Km = {
   any: [/^so/i, /^mo/i, /^di/i, /^mi/i, /^do/i, /^f/i, /^sa/i]
-}, Zm = {
+}, Xm = {
   narrow: /^(vm\.?|nm\.?|Mitternacht|Mittag|morgens|nachm\.?|abends|nachts)/i,
   abbreviated: /^(vorm\.?|nachm\.?|Mitternacht|Mittag|morgens|nachm\.?|abends|nachts)/i,
   wide: /^(vormittags|nachmittags|Mitternacht|Mittag|morgens|nachmittags|abends|nachts)/i
-}, ep = {
+}, Jm = {
   any: {
     am: /^v/i,
     pm: /^n/i,
@@ -12384,117 +12293,208 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
     night: /nachts/i
     // will never be matched. Night is matched by `pm`
   }
-}, tp = {
+}, Zm = {
   ordinalNumber: Nl({
-    matchPattern: Wm,
-    parsePattern: Um,
+    matchPattern: Fm,
+    parsePattern: Vm,
     valueCallback: (e) => parseInt(e)
   }),
   era: Qt({
-    matchPatterns: Hm,
+    matchPatterns: Wm,
     defaultMatchWidth: "wide",
-    parsePatterns: jm,
+    parsePatterns: Um,
     defaultParseWidth: "any"
   }),
   quarter: Qt({
-    matchPatterns: qm,
+    matchPatterns: Hm,
     defaultMatchWidth: "wide",
-    parsePatterns: Qm,
+    parsePatterns: jm,
     defaultParseWidth: "any",
     valueCallback: (e) => e + 1
   }),
   month: Qt({
-    matchPatterns: Gm,
+    matchPatterns: qm,
     defaultMatchWidth: "wide",
-    parsePatterns: Km,
+    parsePatterns: Qm,
     defaultParseWidth: "any"
   }),
   day: Qt({
-    matchPatterns: Xm,
+    matchPatterns: Gm,
     defaultMatchWidth: "wide",
-    parsePatterns: Jm,
+    parsePatterns: Km,
     defaultParseWidth: "any"
   }),
   dayPeriod: Qt({
-    matchPatterns: Zm,
+    matchPatterns: Xm,
     defaultMatchWidth: "wide",
-    parsePatterns: ep,
+    parsePatterns: Jm,
     defaultParseWidth: "any"
   })
-}, ap = {
+}, ep = {
   code: "de",
-  formatDistance: Pm,
-  formatLong: Om,
-  formatRelative: zm,
-  localize: Vm,
-  match: tp,
+  formatDistance: Dm,
+  formatLong: Am,
+  formatRelative: Om,
+  localize: Lm,
+  match: Zm,
   options: {
     weekStartsOn: 1,
     firstWeekContainsDate: 4
   }
-}, np = { class: "flex w-full flex-col md:w-37 md:border-r-2 md:border-r-gray-200" }, rp = { class: "p-3 text-xs leading-4 font-semibold tracking-wider text-gray-700" }, op = {
-  key: 0,
-  class: "p-2"
-}, lp = { class: "flex w-full justify-between border-t-2 border-t-gray-200 p-0" }, xv = /* @__PURE__ */ _e({
-  __name: "UiDatePicker",
+}, tp = ["disabled"], ap = { class: "w-full grow truncate" }, Ir = /* @__PURE__ */ _e({
+  __name: "UiFilterButton",
   props: {
-    definesRange: { type: Boolean, default: !0 },
-    multiCalendars: { type: Boolean, default: !0 },
-    enableTimePicker: { type: Boolean, default: !1 },
-    autoApply: { type: Boolean, default: !0 },
-    closeOnAutoApply: { type: Boolean, default: !0 },
-    roundedEdges: { type: Boolean, default: !0 },
-    locale: { default: "de" },
-    placeholderText: { default: "" },
-    quickFilterRanges: { default: null },
-    quickFilterHeadline: { default: "" },
-    selectedDate: { default: "" },
-    autoPosition: { type: Boolean, default: !1 },
-    leftSidebar: { type: Boolean, default: !0 },
-    actionArea: { type: Boolean, default: !0 },
-    actionAreaExtraContent: { default: "" },
-    cancel: { default: "" },
-    submit: { default: "" },
-    firstAvailableDate: { default: 1948 },
-    minDate: { default: () => /* @__PURE__ */ new Date("1948-01-01") },
-    maxDate: { default: void 0 },
-    autoRange: { default: void 0 },
-    maxRange: { default: void 0 },
-    activeState: { type: Boolean, default: !1 },
-    disabledState: { type: Boolean, default: !1 },
-    monthPicker: { type: Boolean, default: !1 },
-    customFormatCallback: { default: void 0 },
-    inputLabel: { default: "" },
+    title: { default: "" },
+    variant: { default: "white-rounded" },
+    buttonWidth: { default: "max" },
+    chevronIcon: { default: "chevron-down" },
+    rotateIcon: { type: Boolean, default: !1 },
+    iconSize: { default: "xs" },
+    size: { default: "small" },
+    disabled: { type: Boolean, default: !1 },
+    active: { type: Boolean, default: !1 },
+    hasIcon: { type: Boolean, default: !0 },
     iconLeft: { default: null },
-    inline: { type: Boolean, default: !1 },
-    utc: { type: Boolean, default: !0 },
-    teleport: { type: [Boolean, String], default: void 0 },
-    closeOnScroll: { type: Boolean, default: !1 },
-    enableQuickfilterToggle: { type: Boolean, default: !0 }
+    iconLeftClass: { default: void 0 },
+    iconRightClass: { default: void 0 }
   },
-  emits: ["date-changed", "close", "open", "reset", "datepickerQuickfilterClick"],
+  emits: ["click"],
   setup(e, { emit: t }) {
-    const n = t, a = e, r = H(), o = H(), l = H({
-      autoRange: a.autoRange,
-      maxRange: a.maxRange
-    }), s = H({
-      menu: "datepicker-wrapper",
-      calendar: "datepicker-calendar-instance",
-      calendarCell: "datepicker-cell"
-    });
-    rn(() => {
-      o.value = a?.selectedDate;
-    });
-    const i = H(!1), u = () => {
-      r.value?.closeMenu();
-    }, c = (b, O) => {
-      n("datepickerQuickfilterClick", O), Array.isArray(b) ? o.value = b.map((P) => new Date(P)) : o.value = b, w(o.value), u();
-    }, f = (b) => {
-      const O = Pt(b[0], "dd.MM.yyyy"), P = Pt(b[1], "dd.MM.yyyy");
-      return O + "-" + P;
-    }, m = (b) => {
-      const O = Pt(new Date(b), "dd.MM.yyyy"), P = Pt(Rl(new Date(b)), "MMMM yyyy", {
-        locale: ap
+    const n = t, a = e, r = {
+      "blue-rounded": "bg-blue-default hover:bg-blue-dark",
+      "white-rounded": "bg-white hover:border-gray-700 border border-gray-400",
+      blank: "bg-transparent hover:bg-gray-300",
+      "blue-blank": "bg-transparent hover:bg-gray-300",
+      "transparent-rounded": "bg-transparent border border-gray-400 hover:border-gray-700"
+    }, o = {
+      "blue-rounded": "text-white",
+      "white-rounded": "text-gray-800 hover:text-gray-900",
+      blank: "text-gray-800 hover:text-gray-900",
+      "blue-blank": "text-blue-default hover:text-blue-dark",
+      "transparent-rounded": "text-gray-800"
+    }, l = C(() => a.disabled ? a.variant === "blank" ? "border border-transparent" : "bg-white border border-gray-400" : a.active ? r[a.variant].includes("border") ? "bg-blue-default hover:bg-blue-dark border border-blue-default hover:border-blue-dark" : "bg-blue-default hover:bg-blue-dark" : r[a.variant]), s = C(() => a.disabled ? "text-gray-400" : a.active ? "text-white" : o[a.variant]), i = () => {
+      a.disabled || n("click");
+    };
+    return (u, c) => (h(), D("div", {
+      class: J(
+        y(nt)(
+          "w-full px-3",
+          u.$attrs.class,
+          "flex cursor-pointer items-center rounded-full select-none",
+          l.value,
+          u.buttonWidth === "full" ? "w-full" : "max-w-max",
+          a.size === "xs" ? "py-0.5" : "py-1.5"
+        )
+      ),
+      onClick: i
+    }, [
+      G("button", {
+        class: "w-full rounded-full focus:outline-hidden focus-visible:outline-blue",
+        disabled: u.disabled,
+        type: "button",
+        "data-testid": "filter-button"
+      }, [
+        G("span", {
+          "data-testid": "filterbutton-title",
+          class: J(["flex w-full items-center justify-between text-left text-sm leading-normal font-medium", `${s.value} ${a.size === "xs" ? "text-xs" : "text-sm"}`])
+        }, [
+          u.hasIcon && u.iconLeft ? (h(), ye(lt, {
+            key: 0,
+            name: u.iconLeft,
+            size: u.iconSize,
+            class: J([
+              "flex-none",
+              y(nt)(
+                {
+                  "mr-2": u.title.length !== 0
+                },
+                u.iconLeftClass
+              )
+            ])
+          }, null, 8, ["name", "size", "class"])) : I("", !0),
+          G("span", ap, Pe(u.title), 1),
+          u.hasIcon ? (h(), ye(lt, {
+            key: 1,
+            name: u.chevronIcon,
+            class: J([
+              y(nt)(
+                {
+                  "origin-center rotate-180": u.rotateIcon,
+                  "ml-2": u.title.length !== 0
+                },
+                u.iconRightClass
+              ),
+              "flex-none"
+            ]),
+            size: u.iconSize
+          }, null, 8, ["name", "class", "size"])) : I("", !0)
+        ], 2)
+      ], 8, tp)
+    ], 2));
+  }
+}), np = { class: "flex w-full flex-col md:w-37 md:border-r-2 md:border-r-gray-200" }, rp = { class: "p-3 text-xs leading-4 font-semibold tracking-wider text-gray-700" }, op = {
+  key: 0,
+  class: "p-2"
+}, lp = { class: "flex w-full justify-between border-t-2 border-t-gray-200 p-0" }, xv = /* @__PURE__ */ _e({
+  __name: "UiDatePicker",
+  props: {
+    definesRange: { type: Boolean, default: !0 },
+    multiCalendars: { type: Boolean, default: !0 },
+    enableTimePicker: { type: Boolean, default: !1 },
+    autoApply: { type: Boolean, default: !0 },
+    closeOnAutoApply: { type: Boolean, default: !0 },
+    roundedEdges: { type: Boolean, default: !0 },
+    locale: { default: "de" },
+    placeholderText: { default: "" },
+    quickFilterRanges: { default: null },
+    quickFilterHeadline: { default: "" },
+    selectedDate: { default: "" },
+    autoPosition: { type: Boolean, default: !1 },
+    leftSidebar: { type: Boolean, default: !0 },
+    actionArea: { type: Boolean, default: !0 },
+    actionAreaExtraContent: { default: "" },
+    cancel: { default: "" },
+    submit: { default: "" },
+    firstAvailableDate: { default: 1948 },
+    minDate: { default: () => /* @__PURE__ */ new Date("1948-01-01") },
+    maxDate: { default: void 0 },
+    autoRange: { default: void 0 },
+    maxRange: { default: void 0 },
+    activeState: { type: Boolean, default: !1 },
+    disabledState: { type: Boolean, default: !1 },
+    monthPicker: { type: Boolean, default: !1 },
+    customFormatCallback: { default: void 0 },
+    inputLabel: { default: "" },
+    iconLeft: { default: null },
+    inline: { type: Boolean, default: !1 },
+    utc: { type: Boolean, default: !0 },
+    teleport: { type: [Boolean, String], default: void 0 },
+    closeOnScroll: { type: Boolean, default: !1 },
+    enableQuickfilterToggle: { type: Boolean, default: !0 }
+  },
+  emits: ["date-changed", "close", "open", "reset", "datepickerQuickfilterClick"],
+  setup(e, { emit: t }) {
+    const n = t, a = e, r = H(), o = H(), l = H({
+      autoRange: a.autoRange,
+      maxRange: a.maxRange
+    }), s = H({
+      menu: "datepicker-wrapper",
+      calendar: "datepicker-calendar-instance",
+      calendarCell: "datepicker-cell"
+    });
+    rn(() => {
+      o.value = a?.selectedDate;
+    });
+    const i = H(!1), u = () => {
+      r.value?.closeMenu();
+    }, c = (b, O) => {
+      n("datepickerQuickfilterClick", O), Array.isArray(b) ? o.value = b.map((P) => new Date(P)) : o.value = b, w(o.value), u();
+    }, f = (b) => {
+      const O = Pt(b[0], "dd.MM.yyyy"), P = Pt(b[1], "dd.MM.yyyy");
+      return O + "-" + P;
+    }, m = (b) => {
+      const O = Pt(new Date(b), "dd.MM.yyyy"), P = Pt(Rl(new Date(b)), "MMMM yyyy", {
+        locale: ep
       });
       return a.monthPicker ? P : O;
     }, p = (b) => a.customFormatCallback ? a.customFormatCallback(b) : a.definesRange ? f(b) : m(b), k = C(() => {
@@ -12568,7 +12568,7 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
         }
       ), kt({
         "dp-input": ge(({ value: P }) => [
-          b.roundedEdges ? (h(), ye(Yr, {
+          b.roundedEdges ? (h(), ye(Ir, {
             key: 0,
             id: "desktop-datepicker",
             rounded: "",
@@ -12646,7 +12646,7 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
                   !$.value && b.enableQuickfilterToggle ? "hidden" : "md:block"
                 ])
               }, [
-                Oe(Yr, {
+                Oe(Ir, {
                   "data-testid": P.label,
                   variant: P.isSelected ? "blue-blank" : "blank",
                   title: P.label,
@@ -12661,90 +12661,20 @@ const Dm = ["disabled"], Cm = { class: "w-full grow truncate" }, Yr = /* @__PURE
       ]), 1040, ["modelValue", "inline", "utc", "class", "text-input", "text-input-options", "ui", "multi-calendars", "locale", "enable-time-picker", "auto-apply", "close-on-auto-apply", "min-date", "max-date", "year-range", "auto-position", "disabled", "keep-action-row", "month-picker", "teleport", "config"])
     ]));
   }
-}), sp = {
-  class: "fixed inset-0 z-50 max-h-screen",
-  role: "dialog"
-}, ip = /* @__PURE__ */ _e({
-  __name: "UiOverlay",
-  emits: ["close"],
-  setup(e, { emit: t }) {
-    const n = t;
-    return (a, r) => (h(), D("div", sp, [
-      G("div", {
-        class: "fixed inset-0 h-screen bg-black opacity-60",
-        "data-testid": "background",
-        style: { "z-index": "-1" },
-        onClick: r[0] || (r[0] = (o) => n("close"))
-      }),
-      K(a.$slots, "default")
-    ]));
-  }
-}), up = ["disabled", "aria-label"], Fn = /* @__PURE__ */ _e({
-  __name: "UiIconButton",
-  props: {
-    iconName: {},
-    title: {},
-    disabled: { type: Boolean, default: !1 },
-    backgroundColor: { default: "blue" },
-    iconColor: { default: "white" },
-    size: { default: "small" }
-  },
-  emits: ["click"],
-  setup(e, { emit: t }) {
-    const n = t, a = e, r = {
-      blue: "hover:bg-blue-dark bg-blue-default disabled:bg-gray-300 disabled:hover:bg-none",
-      none: "hover:bg-gray-100 active:bg-blue-default disabled:hover:bg-transparent",
-      "gray-hover": "hover:bg-gray-300 disabled:hover:bg-none"
-    }, o = {
-      blue: "text-blue-default hover:text-blue-dark disabled:text-gray-400 active:text-white",
-      gray: "text-gray-800 hover:text-gray-900 disabled:text-gray-400 active:text-white",
-      white: "text-white disabled:text-gray-400"
-    }, l = {
-      small: {
-        iconSize: "small",
-        buttonSize: "h-6 w-6"
-      },
-      medium: {
-        iconSize: "large",
-        buttonSize: "h-8 w-8"
-      },
-      large: {
-        iconSize: "large",
-        buttonSize: "h-12 w-12"
-      },
-      xl: {
-        iconSize: "large",
-        buttonSize: "h-16 w-16"
-      }
-    }, s = C(() => r[a.backgroundColor]), i = C(() => o[a.iconColor]), u = C(() => l[a.size].buttonSize), c = C(() => l[a.size].iconSize);
-    return (f, m) => (h(), D("button", {
-      disabled: f.disabled,
-      "aria-label": f.title,
-      class: J(["group flex flex-none items-center justify-center rounded-full focus:outline-hidden focus-visible:outline-blue", [i.value, s.value, u.value]]),
-      type: "button",
-      onClick: m[0] || (m[0] = (p) => n("click", p))
-    }, [
-      Oe(lt, {
-        class: "flex items-center justify-center",
-        name: f.iconName,
-        size: c.value
-      }, null, 8, ["name", "size"])
-    ], 10, up));
-  }
 });
-function dp(e) {
+function sp(e) {
   return Hr() ? (jr(e), !0) : !1;
 }
-const Mr = /* @__PURE__ */ new WeakMap(), cp = /* @__NO_SIDE_EFFECTS__ */ (...e) => {
+const Mr = /* @__PURE__ */ new WeakMap(), ip = /* @__NO_SIDE_EFFECTS__ */ (...e) => {
   var t;
   const n = e[0], a = (t = jn()) == null ? void 0 : t.proxy;
   if (a == null && !fl())
     throw new Error("injectLocal must be called in setup");
   return a && Mr.has(a) && n in Mr.get(a) ? Mr.get(a)[n] : Vs(...e);
-}, fp = typeof window < "u" && typeof document < "u";
+}, up = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const mp = Object.prototype.toString, pp = (e) => mp.call(e) === "[object Object]";
-function hp(e, t) {
+const dp = Object.prototype.toString, cp = (e) => dp.call(e) === "[object Object]";
+function fp(e, t) {
   var n;
   if (typeof e == "number")
     return e + t;
@@ -12757,13 +12687,13 @@ function vn(e) {
 function $r(e) {
   return Array.isArray(e) ? e : [e];
 }
-function vp(e) {
+function mp(e) {
   return jn();
 }
-function yp(e, t = !0, n) {
-  vp() ? Ze(e, n) : t ? e() : Mt(e);
+function pp(e, t = !0, n) {
+  mp() ? Ze(e, n) : t ? e() : Mt(e);
 }
-function gp(e, t, n) {
+function hp(e, t, n) {
   return ut(
     e,
     t,
@@ -12773,8 +12703,8 @@ function gp(e, t, n) {
     }
   );
 }
-const yo = fp ? window : void 0;
-function bp(e) {
+const yo = up ? window : void 0;
+function vp(e) {
   var t;
   const n = la(e);
   return (t = n?.$el) != null ? t : n;
@@ -12785,11 +12715,11 @@ function gs(...e) {
   }, a = (s, i, u, c) => (s.addEventListener(i, u, c), () => s.removeEventListener(i, u, c)), r = C(() => {
     const s = $r(la(e[0])).filter((i) => i != null);
     return s.every((i) => typeof i != "string") ? s : void 0;
-  }), o = gp(
+  }), o = hp(
     () => {
       var s, i;
       return [
-        (i = (s = r.value) == null ? void 0 : s.map((u) => bp(u))) != null ? i : [yo].filter((u) => u != null),
+        (i = (s = r.value) == null ? void 0 : s.map((u) => vp(u))) != null ? i : [yo].filter((u) => u != null),
         $r(la(r.value ? e[1] : e[0])),
         $r(y(r.value ? e[2] : e[1])),
         // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
@@ -12799,7 +12729,7 @@ function gs(...e) {
     ([s, i, u, c]) => {
       if (n(), !s?.length || !i?.length || !u?.length)
         return;
-      const f = pp(c) ? { ...c } : c;
+      const f = cp(c) ? { ...c } : c;
       t.push(
         ...s.flatMap(
           (m) => i.flatMap(
@@ -12812,28 +12742,28 @@ function gs(...e) {
   ), l = () => {
     o(), n();
   };
-  return dp(n), l;
+  return sp(n), l;
 }
 // @__NO_SIDE_EFFECTS__
-function wp() {
+function yp() {
   const e = Ua(!1), t = jn();
   return t && Ze(() => {
     e.value = !0;
   }, t), e;
 }
 // @__NO_SIDE_EFFECTS__
-function kp(e) {
-  const t = /* @__PURE__ */ wp();
+function gp(e) {
+  const t = /* @__PURE__ */ yp();
   return C(() => (t.value, !!e()));
 }
-const xp = Symbol("vueuse-ssr-width");
+const bp = Symbol("vueuse-ssr-width");
 // @__NO_SIDE_EFFECTS__
 function bs() {
-  const e = fl() ? /* @__PURE__ */ cp(xp, null) : null;
+  const e = fl() ? /* @__PURE__ */ ip(bp, null) : null;
   return typeof e == "number" ? e : void 0;
 }
 function fn(e, t = {}) {
-  const { window: n = yo, ssrWidth: a = /* @__PURE__ */ bs() } = t, r = /* @__PURE__ */ kp(() => n && "matchMedia" in n && typeof n.matchMedia == "function"), o = Ua(typeof a == "number"), l = Ua(), s = Ua(!1), i = (u) => {
+  const { window: n = yo, ssrWidth: a = /* @__PURE__ */ bs() } = t, r = /* @__PURE__ */ gp(() => n && "matchMedia" in n && typeof n.matchMedia == "function"), o = Ua(typeof a == "number"), l = Ua(), s = Ua(!1), i = (u) => {
     s.value = u.matches;
   };
   return rn(() => {
@@ -12851,13 +12781,13 @@ function fn(e, t = {}) {
   }), gs(l, "change", i, { passive: !0 }), C(() => s.value);
 }
 // @__NO_SIDE_EFFECTS__
-function _p(e, t = {}) {
+function wp(e, t = {}) {
   function n(p, k) {
     let w = la(e[la(p)]);
-    return k != null && (w = hp(w, k)), typeof w == "number" && (w = `${w}px`), w;
+    return k != null && (w = fp(w, k)), typeof w == "number" && (w = `${w}px`), w;
   }
   const { window: a = yo, strategy: r = "min-width", ssrWidth: o = /* @__PURE__ */ bs() } = t, l = typeof o == "number", s = l ? Ua(!1) : { value: !0 };
-  l && yp(() => s.value = !!a);
+  l && pp(() => s.value = !!a);
   function i(p, k) {
     return !s.value && l ? p === "min" ? o >= vn(k) : o <= vn(k) : a ? a.matchMedia(`(${p}-width: ${k})`).matches : !1;
   }
@@ -12904,62 +12834,132 @@ function _p(e, t = {}) {
     }
   });
 }
-const Mp = {
-  key: 1,
-  class: "flex justify-between px-4 py-6 lg:px-6"
-}, _v = /* @__PURE__ */ _e({
-  __name: "UiDialog",
+const kp = ["disabled", "aria-label"], Fn = /* @__PURE__ */ _e({
+  __name: "UiIconButton",
   props: {
-    scrollable: { type: Boolean, default: !1 },
-    maxWidth: { default: "600px" },
-    maxHeight: { default: "" },
-    roundedBorder: { type: Boolean, default: !1 },
-    hasPaddingY: { type: Boolean, default: !0 },
-    hasPaddingX: { type: Boolean, default: !0 },
-    headerClasses: { default: "" },
-    mainClasses: { default: "" },
-    hasCloseButton: { type: Boolean, default: !1 },
-    closeOnClickOutside: { type: Boolean, default: !0 },
-    positionTop: { default: "50%" },
-    closeOnEsc: { type: Boolean, default: !1 }
+    iconName: {},
+    title: {},
+    disabled: { type: Boolean, default: !1 },
+    backgroundColor: { default: "blue" },
+    iconColor: { default: "white" },
+    size: { default: "small" }
   },
-  emits: ["close"],
+  emits: ["click"],
   setup(e, { emit: t }) {
-    const n = t, a = e, r = () => {
-      a.closeOnClickOutside && n("close");
-    }, o = (l) => {
-      a.closeOnEsc && l.key === "Escape" && n("close");
-    };
-    return gs(document, "keyup", (l) => o(l)), (l, s) => (h(), ye(ip, { onClose: r }, {
-      default: ge(() => [
-        G("div", {
-          class: J([{
-            "overflow-y-auto": l.scrollable,
-            "rounded-[24px]": l.roundedBorder
-          }, "fixed bg-white shadow-lg"]),
-          style: qe([`
-      max-height: ${l.maxHeight};
-      max-width: ${l.maxWidth};
-      top: ${l.positionTop}
-      `, { left: "50%", transform: "translate(-50%, -50%)", width: "calc(100% - 2rem)" }]),
-          "data-testid": "container"
-        }, [
-          l.$slots.header ? (h(), D("header", {
-            key: 0,
-            class: J(
-              y(nt)(
-                "flex h-12 items-center justify-between bg-gray-100 py-3 pr-2 pl-4 lg:h-14 lg:py-4 lg:pr-3 lg:pl-6",
-                l.headerClasses,
-                { "rounded-t-[24px]": l.roundedBorder }
-              )
-            )
-          }, [
-            K(l.$slots, "header"),
-            l.hasCloseButton ? (h(), ye(Fn, {
-              key: 0,
-              title: "Close dialog",
-              "icon-name": "close",
-              "background-color": "none",
+    const n = t, a = e, r = {
+      blue: "hover:bg-blue-dark bg-blue-default disabled:bg-gray-300 disabled:hover:bg-none",
+      none: "hover:bg-gray-100 active:bg-blue-default disabled:hover:bg-transparent",
+      "gray-hover": "hover:bg-gray-300 disabled:hover:bg-none"
+    }, o = {
+      blue: "text-blue-default hover:text-blue-dark disabled:text-gray-400 active:text-white",
+      gray: "text-gray-800 hover:text-gray-900 disabled:text-gray-400 active:text-white",
+      white: "text-white disabled:text-gray-400"
+    }, l = {
+      small: {
+        iconSize: "small",
+        buttonSize: "h-6 w-6"
+      },
+      medium: {
+        iconSize: "large",
+        buttonSize: "h-8 w-8"
+      },
+      large: {
+        iconSize: "large",
+        buttonSize: "h-12 w-12"
+      },
+      xl: {
+        iconSize: "large",
+        buttonSize: "h-16 w-16"
+      }
+    }, s = C(() => r[a.backgroundColor]), i = C(() => o[a.iconColor]), u = C(() => l[a.size].buttonSize), c = C(() => l[a.size].iconSize);
+    return (f, m) => (h(), D("button", {
+      disabled: f.disabled,
+      "aria-label": f.title,
+      class: J(["group flex flex-none items-center justify-center rounded-full focus:outline-hidden focus-visible:outline-blue", [i.value, s.value, u.value]]),
+      type: "button",
+      onClick: m[0] || (m[0] = (p) => n("click", p))
+    }, [
+      Oe(lt, {
+        class: "flex items-center justify-center",
+        name: f.iconName,
+        size: c.value
+      }, null, 8, ["name", "size"])
+    ], 10, kp));
+  }
+}), xp = {
+  class: "fixed inset-0 z-50 max-h-screen",
+  role: "dialog"
+}, _p = /* @__PURE__ */ _e({
+  __name: "UiOverlay",
+  emits: ["close"],
+  setup(e, { emit: t }) {
+    const n = t;
+    return (a, r) => (h(), D("div", xp, [
+      G("div", {
+        class: "fixed inset-0 h-screen bg-black opacity-60",
+        "data-testid": "background",
+        style: { "z-index": "-1" },
+        onClick: r[0] || (r[0] = (o) => n("close"))
+      }),
+      K(a.$slots, "default")
+    ]));
+  }
+}), Mp = {
+  key: 1,
+  class: "flex justify-between px-4 py-6 lg:px-6"
+}, _v = /* @__PURE__ */ _e({
+  __name: "UiDialog",
+  props: {
+    scrollable: { type: Boolean, default: !1 },
+    maxWidth: { default: "600px" },
+    maxHeight: { default: "" },
+    roundedBorder: { type: Boolean, default: !1 },
+    hasPaddingY: { type: Boolean, default: !0 },
+    hasPaddingX: { type: Boolean, default: !0 },
+    headerClasses: { default: "" },
+    mainClasses: { default: "" },
+    hasCloseButton: { type: Boolean, default: !1 },
+    closeOnClickOutside: { type: Boolean, default: !0 },
+    positionTop: { default: "50%" },
+    closeOnEsc: { type: Boolean, default: !1 }
+  },
+  emits: ["close"],
+  setup(e, { emit: t }) {
+    const n = t, a = e, r = () => {
+      a.closeOnClickOutside && n("close");
+    }, o = (l) => {
+      a.closeOnEsc && l.key === "Escape" && n("close");
+    };
+    return gs(document, "keyup", (l) => o(l)), (l, s) => (h(), ye(_p, { onClose: r }, {
+      default: ge(() => [
+        G("div", {
+          class: J([{
+            "overflow-y-auto": l.scrollable,
+            "rounded-[24px]": l.roundedBorder
+          }, "fixed bg-white shadow-lg"]),
+          style: qe([`
+      max-height: ${l.maxHeight};
+      max-width: ${l.maxWidth};
+      top: ${l.positionTop}
+      `, { left: "50%", transform: "translate(-50%, -50%)", width: "calc(100% - 2rem)" }]),
+          "data-testid": "container"
+        }, [
+          l.$slots.header ? (h(), D("header", {
+            key: 0,
+            class: J(
+              y(nt)(
+                "flex h-12 items-center justify-between bg-gray-100 py-3 pr-2 pl-4 lg:h-14 lg:py-4 lg:pr-3 lg:pl-6",
+                l.headerClasses,
+                { "rounded-t-[24px]": l.roundedBorder }
+              )
+            )
+          }, [
+            K(l.$slots, "header"),
+            l.hasCloseButton ? (h(), ye(Fn, {
+              key: 0,
+              title: "Close dialog",
+              "icon-name": "close",
+              "background-color": "none",
               "icon-color": "gray",
               size: "medium",
               class: "hover:bg-gray-400 active:bg-gray-500",
@@ -14253,7 +14253,7 @@ const bh = ["placeholder", "value"], wh = /* @__PURE__ */ _e({
       a("reset");
     };
     return (w, x) => Tt((h(), D("div", kh, [
-      Oe(Yr, {
+      Oe(Ir, {
         ref_key: "uiMenuActivator",
         ref: r,
         variant: w.buttonVariant,
@@ -14396,23 +14396,10 @@ const bh = ["placeholder", "value"], wh = /* @__PURE__ */ _e({
         _: 3
       }, 8, ["name"])
     ])), [
-      [y(Qr), f]
+      [y(qr), f]
     ]);
   }
-}), Cv = /* @__PURE__ */ Mn(Ph, [["__scopeId", "data-v-0c8cf3b3"]]), Pv = /* @__PURE__ */ _e({
-  __name: "UiMenuList",
-  props: {
-    class: { default: void 0 }
-  },
-  setup(e) {
-    return (t, n) => (h(), D("ul", {
-      class: J(y(nt)("max-h-80 overflow-y-auto", t.$props.class)),
-      tabindex: "0"
-    }, [
-      K(t.$slots, "default")
-    ], 2));
-  }
-}), Tv = /* @__PURE__ */ _e({
+}), Cv = /* @__PURE__ */ Mn(Ph, [["__scopeId", "data-v-fb7f8501"]]), Pv = /* @__PURE__ */ _e({
   __name: "UiMenuItem",
   props: {
     class: { default: void 0 },
@@ -14446,6 +14433,19 @@ const bh = ["placeholder", "value"], wh = /* @__PURE__ */ _e({
       _: 3
     }, 16, ["selectable", "check-box-menu", "icon-size", "image-shape", "checkbox-size", "check-box-color", "class"]));
   }
+}), Tv = /* @__PURE__ */ _e({
+  __name: "UiMenuList",
+  props: {
+    class: { default: void 0 }
+  },
+  setup(e) {
+    return (t, n) => (h(), D("ul", {
+      class: J(y(nt)("max-h-80 overflow-y-auto", t.$props.class)),
+      tabindex: "0"
+    }, [
+      K(t.$slots, "default")
+    ], 2));
+  }
 }), Th = { class: "relative size-full border-none" }, Ah = { class: "absolute top-12 right-3 z-10 block border-t bg-white px-4 py-3 shadow-lg" }, Av = /* @__PURE__ */ _e({
   __name: "UiOverlayMenu",
   props: {
@@ -14462,7 +14462,7 @@ const bh = ["placeholder", "value"], wh = /* @__PURE__ */ _e({
       ])
     ])), [
       [pa, r.isOpen],
-      [y(Qr), a]
+      [y(qr), a]
     ]);
   }
 }), Sh = { class: "flex items-center text-sm" }, Oh = ["name", "value", "checked", "disabled"], Sv = /* @__PURE__ */ _e({
@@ -14515,693 +14515,7 @@ const bh = ["placeholder", "value"], wh = /* @__PURE__ */ _e({
       ]))), 128))
     ], 2));
   }
-}), Ov = /* @__PURE__ */ _e({
-  __name: "UiSection",
-  props: {
-    size: { default: "wide" },
-    verticalPadding: { default: "large" },
-    borderTop: { type: Boolean, default: !1 },
-    borderBottom: { type: Boolean, default: !1 }
-  },
-  setup(e) {
-    const t = e, n = {
-      wide: "w-full  md:px-28 text-gray-900 lg:flex",
-      small: "w-full lg:mx-auto lg:w-2/3"
-    }, a = {
-      small: "lg:py-12 pt-8 pb-12",
-      large: "py-24",
-      none: "py-0"
-    }, r = C(() => {
-      const o = t.borderTop ? "border-t" : "", l = t.borderBottom ? "border-b" : "";
-      return `${o} ${l}`;
-    });
-    return (o, l) => (h(), D("section", {
-      class: J([r.value, "w-full border-gray-200 bg-white"])
-    }, [
-      G("div", {
-        class: J([n[o.size], a[o.verticalPadding]]),
-        "data-testid": "inner"
-      }, [
-        K(o.$slots, "default")
-      ], 2)
-    ], 2));
-  }
-}), Rv = /* @__PURE__ */ _e({
-  __name: "UiSectionDivider",
-  props: {
-    size: { default: "large" },
-    customClasses: { default: "" }
-  },
-  setup(e) {
-    const t = e, n = {
-      small: "h-px",
-      large: "h-4"
-    }, a = C(() => n[t.size]);
-    return (r, o) => (h(), D("div", {
-      class: J([[a.value, r.customClasses], "bg-gray-100"])
-    }, null, 2));
-  }
-}), zv = /* @__PURE__ */ _e({
-  __name: "UiSkeletonBox",
-  props: {
-    maxWidth: { default: 100 },
-    minWidth: { default: 80 },
-    dynamicSize: { type: Boolean, default: !1 }
-  },
-  setup(e) {
-    const t = e, n = C(() => t.dynamicSize && `${Math.floor(
-      Math.random() * (t.maxWidth - t.minWidth) + t.minWidth
-    )}%`);
-    return (a, r) => (h(), D("span", {
-      class: J(["inline-block animate-pulse rounded-sm bg-gray-200", {
-        "h-4 w-full": a.dynamicSize
-      }]),
-      style: qe({ width: n.value })
-    }, null, 6));
-  }
-}), Rh = {
-  key: 0,
-  class: "mx-auto",
-  width: "100",
-  height: "40",
-  viewBox: "0 0 100 40",
-  xmlns: "http://www.w3.org/2000/svg"
-}, Bv = /* @__PURE__ */ _e({
-  __name: "UiSpinner",
-  props: {
-    color: { default: "blue" },
-    variant: { default: "spinner" }
-  },
-  setup(e) {
-    const t = e, n = C(() => ({
-      blue: "text-blue-default",
-      green: "text-green-primary",
-      white: "text-white"
-    })[t.color]);
-    return (a, r) => (h(), D("div", {
-      class: J(n.value)
-    }, [
-      a.variant === "bubbles" ? (h(), D("svg", Rh, [...r[0] || (r[0] = [
-        G("circle", {
-          cx: "25",
-          cy: "20",
-          r: "3.5",
-          fill: "currentColor"
-        }, [
-          G("animateTransform", {
-            attributeName: "transform",
-            type: "translate",
-            dur: "1.8s",
-            values: "0,0;-25,-20;0,0;25,20;0,0",
-            repeatCount: "indefinite",
-            easing: "ease-in-out",
-            begin: "0.16s"
-          }),
-          G("animateTransform", {
-            attributeName: "transform",
-            additive: "sum",
-            type: "scale",
-            dur: "1.8s",
-            values: "1; 2; 1; 0; 1",
-            repeatCount: "indefinite",
-            easing: "ease-in-out",
-            begin: "0.16s"
-          })
-        ], -1),
-        G("circle", {
-          cx: "50",
-          cy: "20",
-          r: "3.5",
-          fill: "currentColor"
-        }, [
-          G("animateTransform", {
-            attributeName: "transform",
-            type: "translate",
-            dur: "1.8s",
-            values: "0,0;-50,-20;0,0;50,20;0,0",
-            repeatCount: "indefinite",
-            easing: "ease-in-out",
-            begin: "0.26s"
-          }),
-          G("animateTransform", {
-            attributeName: "transform",
-            additive: "sum",
-            type: "scale",
-            dur: "1.8s",
-            values: "1; 2; 1; 0; 1",
-            repeatCount: "indefinite",
-            easing: "ease-in-out",
-            begin: "0.26s"
-          })
-        ], -1),
-        G("circle", {
-          cx: "75",
-          cy: "20",
-          r: "3.5",
-          fill: "currentColor"
-        }, [
-          G("animateTransform", {
-            attributeName: "transform",
-            type: "translate",
-            dur: "1.8s",
-            values: "0,0;-75,-20;0,0;75,20;0,0",
-            repeatCount: "indefinite",
-            easing: "ease-in-out",
-            begin: "0.42s"
-          }),
-          G("animateTransform", {
-            attributeName: "transform",
-            additive: "sum",
-            type: "scale",
-            dur: "1.8s",
-            values: "1; 2; 1; 0; 1",
-            repeatCount: "indefinite",
-            easing: "ease-in-out",
-            begin: "0.42s"
-          })
-        ], -1)
-      ])])) : (h(), ye(lt, {
-        key: 1,
-        name: "spinner",
-        class: "animate-spin",
-        size: "large"
-      }))
-    ], 2));
-  }
-}), zh = { class: "text-sm leading-5 font-normal" }, Nv = /* @__PURE__ */ _e({
-  __name: "UiSnackbar",
-  props: {
-    isShown: { type: Boolean, default: !1 },
-    position: { default: "left" },
-    iconName: { default: null },
-    iconSize: { default: "large" },
-    type: { default: "info" }
-  },
-  emits: ["input", "action-click"],
-  setup(e, { emit: t }) {
-    const n = t, a = e;
-    return ut(
-      () => a.isShown,
-      (r) => {
-        r && n("input", r);
-      }
-    ), (r, o) => (h(), ye(It, {
-      "enter-active-class": "duration-200 ease-out",
-      "enter-from-class": "transform opacity-0",
-      "enter-to-class": "opacity-100",
-      "leave-active-class": "duration-200 ease-in",
-      "leave-from-class": "opacity-100",
-      "leave-to-class": "transform opacity-0"
-    }, {
-      default: ge(() => [
-        r.isShown ? (h(), D("div", {
-          key: 0,
-          role: "status",
-          class: J(["fixed bottom-5 sm:bottom-12", {
-            "left-5 sm:left-12": r.position === "left",
-            "right-5 sm:right-12": r.position === "right"
-          }])
-        }, [
-          G("div", {
-            class: J(["flex items-center rounded-full px-4 py-3 shadow-md ease-in", {
-              "bg-red-500 text-white": r.type === "error",
-              "bg-gray-900 text-white": r.type === "info",
-              "bg-green-primary text-white": r.type === "success"
-            }])
-          }, [
-            r.iconName || r.type === "error" ? (h(), ye(lt, {
-              key: 0,
-              name: r.iconName || "alert-fill",
-              size: r.iconSize,
-              class: "mr-2 text-white"
-            }, null, 8, ["name", "size"])) : I("", !0),
-            G("p", zh, [
-              K(r.$slots, "default")
-            ]),
-            r.$slots.action ? (h(), D("button", {
-              key: 1,
-              ref: "actionBtn",
-              type: "button",
-              class: "ml-3 cursor-pointer text-sm leading-5 font-bold hover:underline focus:outline-hidden focus-visible:underline",
-              onClick: o[0] || (o[0] = (l) => n("action-click"))
-            }, [
-              K(r.$slots, "action")
-            ], 512)) : I("", !0)
-          ], 2)
-        ], 2)) : I("", !0)
-      ]),
-      _: 3
-    }));
-  }
-}), Bh = ["for"], Nh = { class: "relative" }, Eh = ["id", "aria-checked", "disabled", "aria-label"], Ev = /* @__PURE__ */ _e({
-  __name: "UiToggleButton",
-  props: {
-    modelValue: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    labelText: { default: "" },
-    labelSpace: { default: "default" },
-    labelTextSize: { default: "xs" },
-    labelPosition: { default: "left" },
-    labelVisible: { type: Boolean, default: !0 },
-    color: { default: "blue" },
-    size: { default: "small" }
-  },
-  emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const n = H(`toggle-id-${Gr()}`), a = t, r = e, o = C(() => r.labelPosition === "left" ? r.labelSpace === "default" ? "mr-3" : "mr-12" : r.labelSpace === "default" ? "ml-3" : "ml-12"), l = C(() => {
-      switch (r.labelTextSize) {
-        case "xs":
-          return "text-xs";
-        case "sm":
-          return "text-sm";
-        case "md":
-          return "text-md";
-        case "lg":
-          return "text-lg";
-        default:
-          return "text-xs";
-      }
-    }), s = C(() => r.labelPosition === "left"), i = C(() => r.color === "blue" ? "bg-blue-default" : "bg-green-primary"), u = C(() => r.size === "small" ? "h-3 w-6" : "h-4 w-10"), c = C(() => r.size === "small" ? "h-4 w-4 top-[-2px]" : "h-6 w-6 top-[-4px]");
-    return (f, m) => (h(), D("div", null, [
-      G("label", {
-        for: n.value,
-        class: "flex cursor-pointer items-center"
-      }, [
-        f.$slots.default ? (h(), D("div", {
-          key: 0,
-          class: J(["whitespace-nowrap", {
-            [o.value]: !0,
-            "order-2": !s.value,
-            "sr-only": !f.labelVisible
-          }])
-        }, [
-          K(f.$slots, "default")
-        ], 2)) : I("", !0),
-        s.value && !f.$slots.default ? (h(), D("div", {
-          key: 1,
-          class: J(["leading-4 font-normal whitespace-nowrap text-gray-800", [o.value, l.value]])
-        }, Pe(f.labelText), 3)) : I("", !0),
-        G("div", Nh, [
-          G("input", {
-            id: n.value,
-            type: "checkbox",
-            "data-testid": "toggleButton",
-            role: "checkbox",
-            "aria-checked": f.modelValue,
-            tabindex: "0",
-            class: "sr-only",
-            disabled: f.disabled,
-            "aria-label": f.labelText,
-            onClick: m[0] || (m[0] = (p) => a("update:modelValue", !f.modelValue))
-          }, null, 8, Eh),
-          G("div", {
-            class: J(["line rounded-full shadow-inner transition-opacity duration-200 ease-in-out", {
-              "opacity-50": f.modelValue,
-              [i.value]: f.modelValue,
-              "bg-gray-300": !f.modelValue,
-              [u.value]: !0
-            }])
-          }, null, 2),
-          G("div", {
-            class: J([{
-              "translate-x-full": f.modelValue,
-              [i.value]: f.modelValue,
-              "bg-gray-500": !f.modelValue,
-              [c.value]: !0
-            }, "dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"])
-          }, null, 2)
-        ]),
-        !s.value && !f.$slots.default ? (h(), D("div", {
-          key: 2,
-          class: J(["leading-4 font-normal whitespace-nowrap text-gray-800", [o.value, l.value]])
-        }, Pe(f.labelText), 3)) : I("", !0)
-      ], 8, Bh)
-    ]));
-  }
-}), Yh = ["data-placement"], Ih = { class: "pb-1 text-sm font-semibold" }, Lh = { class: "text-sm" }, Fh = ["data-placement"], Yv = /* @__PURE__ */ _e({
-  __name: "UiTooltip",
-  props: {
-    position: { default: "bottom" },
-    structuredLayout: { type: Boolean, default: !1 },
-    structuredInfo: { default: () => [] },
-    fixed: { type: Boolean, default: !0 },
-    multilines: { type: Boolean, default: !1 },
-    tooltipClasses: { default: "" },
-    floatingUiOptions: { default: null },
-    transitionClasses: { default: () => ({
-      top: "scale-95 opacity-0 -translate-y-2",
-      "top-start": "scale-95 opacity-0 -translate-y-2",
-      "top-end": "scale-95 opacity-0 -translate-y-2",
-      right: "scale-95 opacity-0 translate-x-2",
-      "bottom-end": "scale-95 opacity-0 translate-y-2",
-      bottom: "scale-95 opacity-0 translate-y-2",
-      "bottom-start": "scale-95 opacity-0 translate-y-2",
-      left: "scale-95 opacity-0 -translate-x-2"
-    }) },
-    enterActiveClasses: { default: "motion-safe:transition duration-300 delay-500" },
-    leaveActiveClasses: { default: ":motion-safe:transition" },
-    animate: { type: Boolean, default: !1 }
-  },
-  setup(e) {
-    const t = e, n = C(() => t.animate ? t.transitionClasses[t.position] : ""), a = C(() => t.animate ? t.enterActiveClasses : ""), r = C(() => t.animate ? t.leaveActiveClasses : ""), o = H(!1), l = H(), s = H(), { floatingStyles: i, placement: u } = Rs(
-      l,
-      s,
-      {
-        strategy: t.fixed ? "fixed" : "absolute",
-        placement: t.position,
-        whileElementsMounted: Ss,
-        ...t.floatingUiOptions ? t.floatingUiOptions : {}
-      }
-    );
-    return (c, f) => (h(), D("div", null, [
-      G("div", {
-        ref_key: "activatorElm",
-        ref: l,
-        "data-testid": "activator",
-        tabindex: "1",
-        onMouseenter: f[0] || (f[0] = (m) => o.value = !0),
-        onFocus: f[1] || (f[1] = (m) => o.value = !0),
-        onMouseleave: f[2] || (f[2] = (m) => o.value = !1),
-        onBlur: f[3] || (f[3] = (m) => o.value = !1)
-      }, [
-        K(c.$slots, "activator")
-      ], 544),
-      (h(), ye(cl, {
-        disabled: !c.fixed,
-        to: "body"
-      }, [
-        c.structuredLayout ? (h(), D("div", {
-          key: 0,
-          ref_key: "tooltipElm",
-          ref: s,
-          style: qe(y(i)),
-          "data-testid": "structuredTooltip",
-          "data-placement": y(u)
-        }, [
-          Oe(It, {
-            "enter-active-class": a.value,
-            "leave-active-class": r.value,
-            "leave-to-class": n.value,
-            "enter-from-class": n.value
-          }, {
-            default: ge(() => [
-              Tt(G("ul", {
-                "data-testid": "tooltipElement",
-                class: J(["my-1 w-72 rounded-2xl border border-gray-300 bg-white text-xs leading-5 shadow-lg", [c.tooltipClasses]])
-              }, [
-                K(c.$slots, "default", {}, () => [
-                  (h(!0), D(xe, null, Ee(c.structuredInfo, ({ title: m, description: p }, k) => (h(), D("li", {
-                    key: `info-${k}`,
-                    class: J([
-                      "mx-4 py-3 text-left",
-                      k < c.structuredInfo.length - 1 ? "border-b border-b-gray-100" : ""
-                    ])
-                  }, [
-                    G("h4", Ih, Pe(m), 1),
-                    G("p", Lh, Pe(p), 1)
-                  ], 2))), 128))
-                ])
-              ], 2), [
-                [pa, o.value]
-              ])
-            ]),
-            _: 3
-          }, 8, ["enter-active-class", "leave-active-class", "leave-to-class", "enter-from-class"])
-        ], 12, Yh)) : (h(), D("div", {
-          key: 1,
-          ref_key: "tooltipElm",
-          ref: s,
-          "data-testid": "tooltip",
-          style: qe(y(i)),
-          "data-placement": y(u)
-        }, [
-          Oe(It, {
-            "enter-active-class": a.value,
-            "leave-active-class": r.value,
-            "leave-to-class": n.value,
-            "enter-from-class": n.value
-          }, {
-            default: ge(() => [
-              Tt(G("div", {
-                "data-testid": "tooltipElement",
-                class: J(["flex items-center bg-gray-900 px-2 py-half text-xs leading-5 text-white", [
-                  c.tooltipClasses,
-                  c.multilines ? "h-auto max-w-[300px] flex-wrap rounded-2xl" : "h-6 w-max rounded-full"
-                ]])
-              }, [
-                K(c.$slots, "default")
-              ], 2), [
-                [pa, o.value]
-              ])
-            ]),
-            _: 3
-          }, 8, ["enter-active-class", "leave-active-class", "leave-to-class", "enter-from-class"])
-        ], 12, Fh))
-      ], 8, ["disabled"]))
-    ]));
-  }
-}), Vh = {
-  key: 0,
-  class: "col-span-1 flex items-center pr-5 text-sm lg:py-2"
-}, Wh = { class: "font-medium" }, Uh = { class: "flex items-center" }, Hh = ["value", "placeholder", "onInput", "onKeyup", "onKeydown"], Iv = /* @__PURE__ */ _e({
-  __name: "UiSearchInput",
-  props: {
-    hasAddEntryOption: { type: Boolean, default: !1 },
-    label: { default: "" },
-    modelValue: {},
-    placeholder: { default: "Default placeholder" }
-  },
-  emits: ["update:modelValue", "handleKeypress", "blur"],
-  setup(e, { emit: t }) {
-    const n = e, a = H([""]), r = rn(() => {
-      a.value = n.modelValue;
-    }), o = H(null), l = async () => {
-      a.value.push(""), o.value && (await Mt(), o.value[o.value?.length - 1].focus());
-    }, s = C(() => a.value[a.value.length - 1].length > 0 && n.hasAddEntryOption), i = (x, g) => {
-      n.hasAddEntryOption && g.length === 0 && x !== 0 && a.value.splice(x, 1);
-    }, u = t;
-    function c(x, g) {
-      r(), !(g.length === 0 && x > 0) && (a.value[x] = g, u("update:modelValue", a.value));
-    }
-    function f(x, g, $) {
-      const b = [...a.value];
-      b[x] = g, u("handleKeypress", { event: $, value: b });
-    }
-    function m() {
-      u("blur", a.value);
-    }
-    const p = (x) => x === a.value.length - 1, k = C(() => n.label.length > 0), w = C(() => {
-      const x = "border-b border-b-gray-200 self-start shrink-0";
-      return k.value ? ["lg:col-start-2 lg:text-base", x] : [x];
-    });
-    return (x, g) => (h(), D("div", {
-      class: J(["mb-4 grid text-gray-900 lg:mb-0 lg:grid-rows-1 lg:gap-y-5", {
-        "lg:grid-cols-[224px_1fr]": k.value,
-        "lg:grid-cols-1": !k.value
-      }])
-    }, [
-      k.value ? (h(), D("div", Vh, [
-        G("label", Wh, Pe(x.label), 1),
-        K(x.$slots, "tooltip")
-      ])) : I("", !0),
-      (h(!0), D(xe, null, Ee(a.value, ($, b) => (h(), D("div", {
-        key: b,
-        class: J(w.value)
-      }, [
-        G("div", Uh, [
-          G("input", {
-            ref_for: !0,
-            ref_key: "inputs",
-            ref: o,
-            value: a.value[b],
-            type: "text",
-            class: "w-full py-1 pb-2 text-sm focus:outline-hidden",
-            placeholder: x.placeholder,
-            onInput: (O) => c(b, O.target.value),
-            onBlur: m,
-            onKeyup: Ca((O) => i(b, O.target.value), ["delete"]),
-            onKeydown: (O) => f(
-              b,
-              O.target.value,
-              O
-            )
-          }, null, 40, Hh),
-          x.hasAddEntryOption && p(b) ? (h(), ye(Fn, {
-            key: 0,
-            "icon-name": "plus-circle",
-            "icon-color": "gray",
-            "background-color": "none",
-            size: "medium",
-            title: "Add Row",
-            "data-testid": "add-entry",
-            disabled: !s.value,
-            onClick: l
-          }, null, 8, ["disabled"])) : I("", !0)
-        ])
-      ], 2))), 128))
-    ], 2));
-  }
-}), jh = { class: "relative flex h-full" }, qh = { class: "flex h-full grow-0 flex-row items-center" }, Qh = {
-  key: 0,
-  class: "flex h-full grow-0 flex-row items-center overflow-hidden"
-}, Gh = ["value", "placeholder"], Kh = { class: "flex items-center justify-center" }, Lv = /* @__PURE__ */ _e({
-  __name: "UiSearchBar",
-  props: {
-    modelValue: { default: "" },
-    placeholder: { default: "" },
-    backgroundColor: { default: "gray" },
-    isFilterChipEditable: { type: Boolean, default: !0 },
-    hasChips: { type: Boolean, default: !0 },
-    executeSearchButtonTitle: { default: "Execute Search" },
-    resetSearchButtonTittle: { default: "Reset Search" },
-    hasShadow: { type: Boolean, default: !1 },
-    slotClass: { default: void 0 },
-    resetButtonWrapperClass: { default: void 0 },
-    resetButtonClass: { default: void 0 },
-    showResetButtonOnMobile: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue", "blur", "focus", "reset", "search", "submit"],
-  setup(e, { expose: t, emit: n }) {
-    const a = n, r = e, o = H(!1), l = H(!1), s = H(), i = C(() => r.modelValue === "" && r.isFilterChipEditable), u = {
-      gray: "bg-gray-100",
-      white: "bg-white"
-    }, c = {
-      gray: "from-gray-100",
-      white: "from-white"
-    }, f = C(() => c[r.backgroundColor]), m = C(() => u[r.backgroundColor]), p = C(() => r.backgroundColor === "gray" ? "gray-hover" : "none"), k = ({ target: P }) => {
-      a("update:modelValue", P.value);
-    }, w = () => {
-      s.value?.focus();
-    }, x = (P) => {
-      o.value = !0, a("focus", P);
-    }, g = (P) => {
-      o.value = !1, a("blur", P);
-    }, $ = () => {
-      o.value = !1, s.value?.blur(), a("submit", r.modelValue);
-    }, b = () => {
-      o.value = !1, s.value?.blur(), a("reset", r.modelValue);
-    }, O = () => {
-      o.value = !1, s.value?.blur(), a("search", r.modelValue);
-    };
-    return t({
-      searchInputRef: s
-    }), (P, _) => (h(), D("div", {
-      class: J(["h-12 w-full overflow-hidden rounded-full border-2 border-transparent focus-within:border-blue-default hover:border-gray-400 hover:focus-within:border-blue-default", [
-        m.value,
-        {
-          shadow: P.hasShadow
-        }
-      ]])
-    }, [
-      G("div", jh, [
-        G("div", qh, [
-          K(P.$slots, "nonEditableChips")
-        ]),
-        o.value ? I("", !0) : (h(), D("div", Qh, [
-          K(P.$slots, "editableChips")
-        ])),
-        G("div", {
-          class: "h-full grow",
-          onClick: _[3] || (_[3] = (T) => w())
-        }, [
-          G("input", {
-            ref_key: "searchInputRef",
-            ref: s,
-            value: P.modelValue,
-            class: J(["size-full bg-transparent outline-hidden placeholder:text-gray-700 lg:text-sm", [
-              P.isFilterChipEditable ? "px-4" : "px-2",
-              !o.value && P.hasChips ? "text-transparent" : "",
-              !o.value && (P.modelValue || !P.isFilterChipEditable) ? "absolute" : ""
-            ]]),
-            spellcheck: "false",
-            type: "text",
-            placeholder: P.isFilterChipEditable ? P.placeholder : "",
-            onInput: _[0] || (_[0] = (T) => k(T)),
-            onKeyup: Ca($, ["enter"]),
-            onFocus: _[1] || (_[1] = (T) => x(T)),
-            onBlur: _[2] || (_[2] = (T) => g(T))
-          }, null, 42, Gh)
-        ]),
-        G("div", {
-          class: J(["pointer-events-none relative flex h-full flex-none overflow-hidden", o.value ? "" : "-ml-12"])
-        }, [
-          o.value ? I("", !0) : (h(), D("div", {
-            key: 0,
-            class: J(["h-full w-12 flex-none bg-linear-to-l", f.value])
-          }, null, 2)),
-          G("div", {
-            class: J(
-              y(nt)(
-                "pointer-events-auto flex items-center px-2",
-                P.slotClass,
-                m.value
-              )
-            )
-          }, [
-            G("div", null, [
-              K(P.$slots, "searchCriteriaButton")
-            ]),
-            G("div", null, [
-              K(P.$slots, "extendedSearchButton")
-            ]),
-            G("div", {
-              class: J(y(nt)("mx-2", P.resetButtonWrapperClass))
-            }, [
-              G("div", {
-                class: J(
-                  y(nt)(
-                    "flex-none items-center justify-center",
-                    P.resetButtonClass,
-                    "h-full",
-                    P.showResetButtonOnMobile ? "flex" : "hidden lg:flex",
-                    m.value
-                  )
-                )
-              }, [
-                Oe(Fn, {
-                  disabled: i.value && !o.value,
-                  "icon-name": "close",
-                  title: P.resetSearchButtonTittle,
-                  "background-color": p.value,
-                  "icon-color": o.value ? "blue" : "gray",
-                  size: "medium",
-                  onClick: b
-                }, null, 8, ["disabled", "title", "background-color", "icon-color"])
-              ], 2)
-            ], 2),
-            G("div", {
-              class: J(["flex h-full w-12 flex-none items-center justify-center", m.value])
-            }, [
-              G("div", Kh, [
-                _[6] || (_[6] = G("div", { class: "h-8 w-2 border-l border-gray-300" }, null, -1)),
-                Oe(Fn, {
-                  "icon-name": "search",
-                  title: P.executeSearchButtonTitle,
-                  "background-color": o.value || l.value ? "blue" : "none",
-                  "icon-color": o.value || l.value ? "white" : "gray",
-                  size: "medium",
-                  onClick: O,
-                  onMouseover: _[4] || (_[4] = (T) => l.value = !0),
-                  onMouseleave: _[5] || (_[5] = (T) => l.value = !1)
-                }, null, 8, ["title", "background-color", "icon-color"])
-              ])
-            ], 2)
-          ], 2)
-        ], 2)
-      ])
-    ], 2));
-  }
-}), $a = [
-  "e53935",
-  "f50057",
-  "8e24aa",
-  "2196f3",
-  "00acc1",
-  "00897b",
-  "00e676",
-  "ffff00",
-  "ffb300"
-], Zt = {
+}), Zt = {
   aliceblue: [240, 248, 255],
   antiquewhite: [250, 235, 215],
   aqua: [0, 255, 255],
@@ -15559,7 +14873,7 @@ ce.rgb.cmyk = function(e) {
   const t = e[0] / 255, n = e[1] / 255, a = e[2] / 255, r = Math.min(1 - t, 1 - n, 1 - a), o = (1 - t - r) / (1 - r) || 0, l = (1 - n - r) / (1 - r) || 0, s = (1 - a - r) / (1 - r) || 0;
   return [o * 100, l * 100, s * 100, r * 100];
 };
-function Xh(e, t) {
+function Rh(e, t) {
   return (e[0] - t[0]) ** 2 + (e[1] - t[1]) ** 2 + (e[2] - t[2]) ** 2;
 }
 ce.rgb.keyword = function(e) {
@@ -15568,7 +14882,7 @@ ce.rgb.keyword = function(e) {
     return t;
   let n = Number.POSITIVE_INFINITY, a;
   for (const r of Object.keys(Zt)) {
-    const o = Zt[r], l = Xh(e, o);
+    const o = Zt[r], l = Rh(e, o);
     l < n && (n = l, a = r);
   }
   return a;
@@ -15868,7 +15182,7 @@ ce.gray.hex = function(e) {
 ce.rgb.gray = function(e) {
   return [(e[0] + e[1] + e[2]) / 3 / 255 * 100];
 };
-function Jh() {
+function zh() {
   const e = {}, t = Object.keys(ce);
   for (let { length: n } = t, a = 0; a < n; a++)
     e[t[a]] = {
@@ -15879,8 +15193,8 @@ function Jh() {
     };
   return e;
 }
-function Zh(e) {
-  const t = Jh(), n = [e];
+function Bh(e) {
+  const t = zh(), n = [e];
   for (t[e].distance = 0; n.length > 0; ) {
     const a = n.pop(), r = Object.keys(ce[a]);
     for (let { length: o } = r, l = 0; l < o; l++) {
@@ -15890,35 +15204,35 @@ function Zh(e) {
   }
   return t;
 }
-function ev(e, t) {
+function Nh(e, t) {
   return function(n) {
     return t(e(n));
   };
 }
-function tv(e, t) {
+function Eh(e, t) {
   const n = [t[e].parent, e];
   let a = ce[t[e].parent][e], r = t[e].parent;
   for (; t[r].parent; )
-    n.unshift(t[r].parent), a = ev(ce[t[r].parent][r], a), r = t[r].parent;
+    n.unshift(t[r].parent), a = Nh(ce[t[r].parent][r], a), r = t[r].parent;
   return a.conversion = n, a;
 }
-function av(e) {
-  const t = Zh(e), n = {}, a = Object.keys(t);
+function Yh(e) {
+  const t = Bh(e), n = {}, a = Object.keys(t);
   for (let { length: r } = a, o = 0; o < r; o++) {
     const l = a[o];
-    t[l].parent !== null && (n[l] = tv(l, t));
+    t[l].parent !== null && (n[l] = Eh(l, t));
   }
   return n;
 }
-const vt = {}, nv = Object.keys(ce);
-function rv(e) {
+const vt = {}, Ih = Object.keys(ce);
+function Lh(e) {
   const t = function(...n) {
     const a = n[0];
     return a == null ? a : (a.length > 1 && (n = a), e(n));
   };
   return "conversion" in e && (t.conversion = e.conversion), t;
 }
-function ov(e) {
+function Fh(e) {
   const t = function(...n) {
     const a = n[0];
     if (a == null)
@@ -15932,347 +15246,826 @@ function ov(e) {
   };
   return "conversion" in e && (t.conversion = e.conversion), t;
 }
-for (const e of nv) {
-  vt[e] = {}, Object.defineProperty(vt[e], "channels", { value: ce[e].channels }), Object.defineProperty(vt[e], "labels", { value: ce[e].labels });
-  const t = av(e), n = Object.keys(t);
-  for (const a of n) {
-    const r = t[a];
-    vt[e][a] = ov(r), vt[e][a].raw = rv(r);
+for (const e of Ih) {
+  vt[e] = {}, Object.defineProperty(vt[e], "channels", { value: ce[e].channels }), Object.defineProperty(vt[e], "labels", { value: ce[e].labels });
+  const t = Yh(e), n = Object.keys(t);
+  for (const a of n) {
+    const r = t[a];
+    vt[e][a] = Fh(r), vt[e][a].raw = Lh(r);
+  }
+}
+const Ns = [
+  // To be honest, I don't really feel like keyword belongs in color convert, but eh.
+  "keyword",
+  // Gray conflicts with some method names, and has its own method defined.
+  "gray",
+  // Shouldn't really be in color-convert either...
+  "hex"
+], Vr = {};
+for (const e of Object.keys(vt))
+  Vr[[...vt[e].labels].sort().join("")] = e;
+const Wr = {};
+function st(e, t) {
+  if (!(this instanceof st))
+    return new st(e, t);
+  if (t && t in Ns && (t = null), t && !(t in vt))
+    throw new Error("Unknown model: " + t);
+  let n, a;
+  if (e == null)
+    this.model = "rgb", this.color = [0, 0, 0], this.valpha = 1;
+  else if (e instanceof st)
+    this.model = e.model, this.color = [...e.color], this.valpha = e.valpha;
+  else if (typeof e == "string") {
+    const r = mt.get(e);
+    if (r === null)
+      throw new Error("Unable to parse color from string: " + e);
+    this.model = r.model, a = vt[this.model].channels, this.color = r.value.slice(0, a), this.valpha = typeof r.value[a] == "number" ? r.value[a] : 1;
+  } else if (e.length > 0) {
+    this.model = t || "rgb", a = vt[this.model].channels;
+    const r = Array.prototype.slice.call(e, 0, a);
+    this.color = Ur(r, a), this.valpha = typeof e[a] == "number" ? e[a] : 1;
+  } else if (typeof e == "number")
+    this.model = "rgb", this.color = [
+      e >> 16 & 255,
+      e >> 8 & 255,
+      e & 255
+    ], this.valpha = 1;
+  else {
+    this.valpha = 1;
+    const r = Object.keys(e);
+    "alpha" in e && (r.splice(r.indexOf("alpha"), 1), this.valpha = typeof e.alpha == "number" ? e.alpha : 0);
+    const o = r.sort().join("");
+    if (!(o in Vr))
+      throw new Error("Unable to parse color from object: " + JSON.stringify(e));
+    this.model = Vr[o];
+    const { labels: l } = vt[this.model], s = [];
+    for (n = 0; n < l.length; n++)
+      s.push(e[l[n]]);
+    this.color = Ur(s);
+  }
+  if (Wr[this.model])
+    for (a = vt[this.model].channels, n = 0; n < a; n++) {
+      const r = Wr[this.model][n];
+      r && (this.color[n] = r(this.color[n]));
+    }
+  this.valpha = Math.max(0, Math.min(1, this.valpha)), Object.freeze && Object.freeze(this);
+}
+st.prototype = {
+  toString() {
+    return this.string();
+  },
+  toJSON() {
+    return this[this.model]();
+  },
+  string(e) {
+    let t = this.model in mt.to ? this : this.rgb();
+    t = t.round(typeof e == "number" ? e : 1);
+    const n = t.valpha === 1 ? t.color : [...t.color, this.valpha];
+    return mt.to[t.model](...n);
+  },
+  percentString(e) {
+    const t = this.rgb().round(typeof e == "number" ? e : 1), n = t.valpha === 1 ? t.color : [...t.color, this.valpha];
+    return mt.to.rgb.percent(...n);
+  },
+  array() {
+    return this.valpha === 1 ? [...this.color] : [...this.color, this.valpha];
+  },
+  object() {
+    const e = {}, { channels: t } = vt[this.model], { labels: n } = vt[this.model];
+    for (let a = 0; a < t; a++)
+      e[n[a]] = this.color[a];
+    return this.valpha !== 1 && (e.alpha = this.valpha), e;
+  },
+  unitArray() {
+    const e = this.rgb().color;
+    return e[0] /= 255, e[1] /= 255, e[2] /= 255, this.valpha !== 1 && e.push(this.valpha), e;
+  },
+  unitObject() {
+    const e = this.rgb().object();
+    return e.r /= 255, e.g /= 255, e.b /= 255, this.valpha !== 1 && (e.alpha = this.valpha), e;
+  },
+  round(e) {
+    return e = Math.max(e || 0, 0), new st([...this.color.map(Wh(e)), this.valpha], this.model);
+  },
+  alpha(e) {
+    return e !== void 0 ? new st([...this.color, Math.max(0, Math.min(1, e))], this.model) : this.valpha;
+  },
+  // Rgb
+  red: Ke("rgb", 0, ft(255)),
+  green: Ke("rgb", 1, ft(255)),
+  blue: Ke("rgb", 2, ft(255)),
+  hue: Ke(["hsl", "hsv", "hsl", "hwb", "hcg"], 0, (e) => (e % 360 + 360) % 360),
+  saturationl: Ke("hsl", 1, ft(100)),
+  lightness: Ke("hsl", 2, ft(100)),
+  saturationv: Ke("hsv", 1, ft(100)),
+  value: Ke("hsv", 2, ft(100)),
+  chroma: Ke("hcg", 1, ft(100)),
+  gray: Ke("hcg", 2, ft(100)),
+  white: Ke("hwb", 1, ft(100)),
+  wblack: Ke("hwb", 2, ft(100)),
+  cyan: Ke("cmyk", 0, ft(100)),
+  magenta: Ke("cmyk", 1, ft(100)),
+  yellow: Ke("cmyk", 2, ft(100)),
+  black: Ke("cmyk", 3, ft(100)),
+  x: Ke("xyz", 0, ft(95.047)),
+  y: Ke("xyz", 1, ft(100)),
+  z: Ke("xyz", 2, ft(108.833)),
+  l: Ke("lab", 0, ft(100)),
+  a: Ke("lab", 1),
+  b: Ke("lab", 2),
+  keyword(e) {
+    return e !== void 0 ? new st(e) : vt[this.model].keyword(this.color);
+  },
+  hex(e) {
+    return e !== void 0 ? new st(e) : mt.to.hex(...this.rgb().round().color);
+  },
+  hexa(e) {
+    if (e !== void 0)
+      return new st(e);
+    const t = this.rgb().round().color;
+    let n = Math.round(this.valpha * 255).toString(16).toUpperCase();
+    return n.length === 1 && (n = "0" + n), mt.to.hex(...t) + n;
+  },
+  rgbNumber() {
+    const e = this.rgb().color;
+    return (e[0] & 255) << 16 | (e[1] & 255) << 8 | e[2] & 255;
+  },
+  luminosity() {
+    const e = this.rgb().color, t = [];
+    for (const [n, a] of e.entries()) {
+      const r = a / 255;
+      t[n] = r <= 0.04045 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4;
+    }
+    return 0.2126 * t[0] + 0.7152 * t[1] + 0.0722 * t[2];
+  },
+  contrast(e) {
+    const t = this.luminosity(), n = e.luminosity();
+    return t > n ? (t + 0.05) / (n + 0.05) : (n + 0.05) / (t + 0.05);
+  },
+  level(e) {
+    const t = this.contrast(e);
+    return t >= 7 ? "AAA" : t >= 4.5 ? "AA" : "";
+  },
+  isDark() {
+    const e = this.rgb().color;
+    return (e[0] * 2126 + e[1] * 7152 + e[2] * 722) / 1e4 < 128;
+  },
+  isLight() {
+    return !this.isDark();
+  },
+  negate() {
+    const e = this.rgb();
+    for (let t = 0; t < 3; t++)
+      e.color[t] = 255 - e.color[t];
+    return e;
+  },
+  lighten(e) {
+    const t = this.hsl();
+    return t.color[2] += t.color[2] * e, t;
+  },
+  darken(e) {
+    const t = this.hsl();
+    return t.color[2] -= t.color[2] * e, t;
+  },
+  saturate(e) {
+    const t = this.hsl();
+    return t.color[1] += t.color[1] * e, t;
+  },
+  desaturate(e) {
+    const t = this.hsl();
+    return t.color[1] -= t.color[1] * e, t;
+  },
+  whiten(e) {
+    const t = this.hwb();
+    return t.color[1] += t.color[1] * e, t;
+  },
+  blacken(e) {
+    const t = this.hwb();
+    return t.color[2] += t.color[2] * e, t;
+  },
+  grayscale() {
+    const e = this.rgb().color, t = e[0] * 0.3 + e[1] * 0.59 + e[2] * 0.11;
+    return st.rgb(t, t, t);
+  },
+  fade(e) {
+    return this.alpha(this.valpha - this.valpha * e);
+  },
+  opaquer(e) {
+    return this.alpha(this.valpha + this.valpha * e);
+  },
+  rotate(e) {
+    const t = this.hsl();
+    let n = t.color[0];
+    return n = (n + e) % 360, n = n < 0 ? 360 + n : n, t.color[0] = n, t;
+  },
+  mix(e, t) {
+    if (!e || !e.rgb)
+      throw new Error('Argument to "mix" was not a Color instance, but rather an instance of ' + typeof e);
+    const n = e.rgb(), a = this.rgb(), r = t === void 0 ? 0.5 : t, o = 2 * r - 1, l = n.alpha() - a.alpha(), s = ((o * l === -1 ? o : (o + l) / (1 + o * l)) + 1) / 2, i = 1 - s;
+    return st.rgb(
+      s * n.red() + i * a.red(),
+      s * n.green() + i * a.green(),
+      s * n.blue() + i * a.blue(),
+      n.alpha() * r + a.alpha() * (1 - r)
+    );
+  }
+};
+for (const e of Object.keys(vt)) {
+  if (Ns.includes(e))
+    continue;
+  const { channels: t } = vt[e];
+  st.prototype[e] = function(...n) {
+    return this.model === e ? new st(this) : n.length > 0 ? new st(n, e) : new st([...Uh(vt[this.model][e].raw(this.color)), this.valpha], e);
+  }, st[e] = function(...n) {
+    let a = n[0];
+    return typeof a == "number" && (a = Ur(n, t)), new st(a, e);
+  };
+}
+function Vh(e, t) {
+  return Number(e.toFixed(t));
+}
+function Wh(e) {
+  return function(t) {
+    return Vh(t, e);
+  };
+}
+function Ke(e, t, n) {
+  e = Array.isArray(e) ? e : [e];
+  for (const a of e)
+    (Wr[a] ||= [])[t] = n;
+  return e = e[0], function(a) {
+    let r;
+    return a !== void 0 ? (n && (a = n(a)), r = this[e](), r.color[t] = a, r) : (r = this[e]().color[t], n && (r = n(r)), r);
+  };
+}
+function ft(e) {
+  return function(t) {
+    return Math.max(0, Math.min(e, t));
+  };
+}
+function Uh(e) {
+  return Array.isArray(e) ? e : [e];
+}
+function Ur(e, t) {
+  for (let n = 0; n < t; n++)
+    typeof e[n] != "number" && (e[n] = 0);
+  return e;
+}
+const $a = [
+  "e53935",
+  "f50057",
+  "8e24aa",
+  "2196f3",
+  "00acc1",
+  "00897b",
+  "00e676",
+  "ffff00",
+  "ffb300"
+], Hh = { class: "flex" }, jh = ["id", "aria-checked", "onClick"], qh = ["aria-checked"], Ov = /* @__PURE__ */ _e({
+  __name: "UiColorPicker",
+  props: {
+    modelValue: { default: `#${$a[0]}` }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const n = e, a = t, r = H($a[0]);
+    ut(
+      () => n.modelValue,
+      () => {
+        const s = n.modelValue?.substring(1);
+        r.value = s || $a[0], s || a("update:modelValue", `#${r.value}`);
+      },
+      { immediate: !0 }
+    );
+    const o = C({
+      get() {
+        return `#${r.value}`;
+      },
+      set(s) {
+        r.value = s.substring(1), a("update:modelValue", `#${r.value}`);
+      }
+    }), l = C(() => {
+      const s = st(`#${r.value}`), i = s.contrast(st.rgb(77, 77, 77));
+      return s.contrast(st("white")) >= i ? "text-white" : "text-gray-800";
+    });
+    return (s, i) => (h(), D("div", Hh, [
+      (h(!0), D(xe, null, Ee(y($a), (u, c) => (h(), D("div", {
+        id: `color-${u}`,
+        key: `ui-cp-${c}`,
+        class: "mr-3 flex size-4 rotate-45 cursor-pointer items-center justify-center",
+        style: qe({ backgroundColor: `#${u}` }),
+        "aria-checked": r.value === u,
+        onClick: (f) => {
+          r.value = u, a("update:modelValue", `#${u}`);
+        }
+      }, [
+        r.value === u ? (h(), ye(lt, {
+          key: 0,
+          id: "cp-checmark",
+          name: "checkmark",
+          class: J(["-rotate-45", l.value]),
+          size: "xs"
+        }, null, 8, ["class"])) : I("", !0)
+      ], 12, jh))), 128)),
+      G("div", {
+        class: "UiColorPicker-inputWrapper flex size-4 rotate-45 items-center justify-center",
+        style: qe({
+          backgroundColor: y($a).includes(r.value) ? "" : o.value
+        }),
+        "aria-checked": !y($a).includes(r.value)
+      }, [
+        Tt(G("input", {
+          "onUpdate:modelValue": i[0] || (i[0] = (u) => o.value = u),
+          type: "color",
+          class: "UiColorPicker-input absolute z-10 size-inherit cursor-pointer bg-gray-200 opacity-0"
+        }, null, 512), [
+          [dl, o.value]
+        ]),
+        y($a).includes(r.value) ? (h(), ye(lt, {
+          key: 0,
+          name: "color-palette",
+          size: "medium",
+          class: "-rotate-45"
+        })) : (h(), ye(lt, {
+          key: 1,
+          id: "cp-checmark",
+          name: "checkmark",
+          class: J(["-rotate-45", l.value]),
+          size: "xs"
+        }, null, 8, ["class"]))
+      ], 12, qh)
+    ]));
   }
-}
-const Ns = [
-  // To be honest, I don't really feel like keyword belongs in color convert, but eh.
-  "keyword",
-  // Gray conflicts with some method names, and has its own method defined.
-  "gray",
-  // Shouldn't really be in color-convert either...
-  "hex"
-], Vr = {};
-for (const e of Object.keys(vt))
-  Vr[[...vt[e].labels].sort().join("")] = e;
-const Wr = {};
-function st(e, t) {
-  if (!(this instanceof st))
-    return new st(e, t);
-  if (t && t in Ns && (t = null), t && !(t in vt))
-    throw new Error("Unknown model: " + t);
-  let n, a;
-  if (e == null)
-    this.model = "rgb", this.color = [0, 0, 0], this.valpha = 1;
-  else if (e instanceof st)
-    this.model = e.model, this.color = [...e.color], this.valpha = e.valpha;
-  else if (typeof e == "string") {
-    const r = mt.get(e);
-    if (r === null)
-      throw new Error("Unable to parse color from string: " + e);
-    this.model = r.model, a = vt[this.model].channels, this.color = r.value.slice(0, a), this.valpha = typeof r.value[a] == "number" ? r.value[a] : 1;
-  } else if (e.length > 0) {
-    this.model = t || "rgb", a = vt[this.model].channels;
-    const r = Array.prototype.slice.call(e, 0, a);
-    this.color = Ur(r, a), this.valpha = typeof e[a] == "number" ? e[a] : 1;
-  } else if (typeof e == "number")
-    this.model = "rgb", this.color = [
-      e >> 16 & 255,
-      e >> 8 & 255,
-      e & 255
-    ], this.valpha = 1;
-  else {
-    this.valpha = 1;
-    const r = Object.keys(e);
-    "alpha" in e && (r.splice(r.indexOf("alpha"), 1), this.valpha = typeof e.alpha == "number" ? e.alpha : 0);
-    const o = r.sort().join("");
-    if (!(o in Vr))
-      throw new Error("Unable to parse color from object: " + JSON.stringify(e));
-    this.model = Vr[o];
-    const { labels: l } = vt[this.model], s = [];
-    for (n = 0; n < l.length; n++)
-      s.push(e[l[n]]);
-    this.color = Ur(s);
+}), Qh = { class: "relative flex h-full" }, Gh = { class: "flex h-full grow-0 flex-row items-center" }, Kh = {
+  key: 0,
+  class: "flex h-full grow-0 flex-row items-center overflow-hidden"
+}, Xh = ["value", "placeholder"], Jh = { class: "flex items-center justify-center" }, Rv = /* @__PURE__ */ _e({
+  __name: "UiSearchBar",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    backgroundColor: { default: "gray" },
+    isFilterChipEditable: { type: Boolean, default: !0 },
+    hasChips: { type: Boolean, default: !0 },
+    executeSearchButtonTitle: { default: "Execute Search" },
+    resetSearchButtonTittle: { default: "Reset Search" },
+    hasShadow: { type: Boolean, default: !1 },
+    slotClass: { default: void 0 },
+    resetButtonWrapperClass: { default: void 0 },
+    resetButtonClass: { default: void 0 },
+    showResetButtonOnMobile: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "blur", "focus", "reset", "search", "submit"],
+  setup(e, { expose: t, emit: n }) {
+    const a = n, r = e, o = H(!1), l = H(!1), s = H(), i = C(() => r.modelValue === "" && r.isFilterChipEditable), u = {
+      gray: "bg-gray-100",
+      white: "bg-white"
+    }, c = {
+      gray: "from-gray-100",
+      white: "from-white"
+    }, f = C(() => c[r.backgroundColor]), m = C(() => u[r.backgroundColor]), p = C(() => r.backgroundColor === "gray" ? "gray-hover" : "none"), k = ({ target: P }) => {
+      a("update:modelValue", P.value);
+    }, w = () => {
+      s.value?.focus();
+    }, x = (P) => {
+      o.value = !0, a("focus", P);
+    }, g = (P) => {
+      o.value = !1, a("blur", P);
+    }, $ = () => {
+      o.value = !1, s.value?.blur(), a("submit", r.modelValue);
+    }, b = () => {
+      o.value = !1, s.value?.blur(), a("reset", r.modelValue);
+    }, O = () => {
+      o.value = !1, s.value?.blur(), a("search", r.modelValue);
+    };
+    return t({
+      searchInputRef: s
+    }), (P, _) => (h(), D("div", {
+      class: J(["h-12 w-full overflow-hidden rounded-full border-2 border-transparent focus-within:border-blue-default hover:border-gray-400 hover:focus-within:border-blue-default", [
+        m.value,
+        {
+          shadow: P.hasShadow
+        }
+      ]])
+    }, [
+      G("div", Qh, [
+        G("div", Gh, [
+          K(P.$slots, "nonEditableChips")
+        ]),
+        o.value ? I("", !0) : (h(), D("div", Kh, [
+          K(P.$slots, "editableChips")
+        ])),
+        G("div", {
+          class: "h-full grow",
+          onClick: _[3] || (_[3] = (T) => w())
+        }, [
+          G("input", {
+            ref_key: "searchInputRef",
+            ref: s,
+            value: P.modelValue,
+            class: J(["size-full bg-transparent outline-hidden placeholder:text-gray-700 lg:text-sm", [
+              P.isFilterChipEditable ? "px-4" : "px-2",
+              !o.value && P.hasChips ? "text-transparent" : "",
+              !o.value && (P.modelValue || !P.isFilterChipEditable) ? "absolute" : ""
+            ]]),
+            spellcheck: "false",
+            type: "text",
+            placeholder: P.isFilterChipEditable ? P.placeholder : "",
+            onInput: _[0] || (_[0] = (T) => k(T)),
+            onKeyup: Ca($, ["enter"]),
+            onFocus: _[1] || (_[1] = (T) => x(T)),
+            onBlur: _[2] || (_[2] = (T) => g(T))
+          }, null, 42, Xh)
+        ]),
+        G("div", {
+          class: J(["pointer-events-none relative flex h-full flex-none overflow-hidden", o.value ? "" : "-ml-12"])
+        }, [
+          o.value ? I("", !0) : (h(), D("div", {
+            key: 0,
+            class: J(["h-full w-12 flex-none bg-linear-to-l", f.value])
+          }, null, 2)),
+          G("div", {
+            class: J(
+              y(nt)(
+                "pointer-events-auto flex items-center px-2",
+                P.slotClass,
+                m.value
+              )
+            )
+          }, [
+            G("div", null, [
+              K(P.$slots, "searchCriteriaButton")
+            ]),
+            G("div", null, [
+              K(P.$slots, "extendedSearchButton")
+            ]),
+            G("div", {
+              class: J(y(nt)("mx-2", P.resetButtonWrapperClass))
+            }, [
+              G("div", {
+                class: J(
+                  y(nt)(
+                    "flex-none items-center justify-center",
+                    P.resetButtonClass,
+                    "h-full",
+                    P.showResetButtonOnMobile ? "flex" : "hidden lg:flex",
+                    m.value
+                  )
+                )
+              }, [
+                Oe(Fn, {
+                  disabled: i.value && !o.value,
+                  "icon-name": "close",
+                  title: P.resetSearchButtonTittle,
+                  "background-color": p.value,
+                  "icon-color": o.value ? "blue" : "gray",
+                  size: "medium",
+                  onClick: b
+                }, null, 8, ["disabled", "title", "background-color", "icon-color"])
+              ], 2)
+            ], 2),
+            G("div", {
+              class: J(["flex h-full w-12 flex-none items-center justify-center", m.value])
+            }, [
+              G("div", Jh, [
+                _[6] || (_[6] = G("div", { class: "h-8 w-2 border-l border-gray-300" }, null, -1)),
+                Oe(Fn, {
+                  "icon-name": "search",
+                  title: P.executeSearchButtonTitle,
+                  "background-color": o.value || l.value ? "blue" : "none",
+                  "icon-color": o.value || l.value ? "white" : "gray",
+                  size: "medium",
+                  onClick: O,
+                  onMouseover: _[4] || (_[4] = (T) => l.value = !0),
+                  onMouseleave: _[5] || (_[5] = (T) => l.value = !1)
+                }, null, 8, ["title", "background-color", "icon-color"])
+              ])
+            ], 2)
+          ], 2)
+        ], 2)
+      ])
+    ], 2));
   }
-  if (Wr[this.model])
-    for (a = vt[this.model].channels, n = 0; n < a; n++) {
-      const r = Wr[this.model][n];
-      r && (this.color[n] = r(this.color[n]));
-    }
-  this.valpha = Math.max(0, Math.min(1, this.valpha)), Object.freeze && Object.freeze(this);
-}
-st.prototype = {
-  toString() {
-    return this.string();
-  },
-  toJSON() {
-    return this[this.model]();
-  },
-  string(e) {
-    let t = this.model in mt.to ? this : this.rgb();
-    t = t.round(typeof e == "number" ? e : 1);
-    const n = t.valpha === 1 ? t.color : [...t.color, this.valpha];
-    return mt.to[t.model](...n);
-  },
-  percentString(e) {
-    const t = this.rgb().round(typeof e == "number" ? e : 1), n = t.valpha === 1 ? t.color : [...t.color, this.valpha];
-    return mt.to.rgb.percent(...n);
-  },
-  array() {
-    return this.valpha === 1 ? [...this.color] : [...this.color, this.valpha];
-  },
-  object() {
-    const e = {}, { channels: t } = vt[this.model], { labels: n } = vt[this.model];
-    for (let a = 0; a < t; a++)
-      e[n[a]] = this.color[a];
-    return this.valpha !== 1 && (e.alpha = this.valpha), e;
-  },
-  unitArray() {
-    const e = this.rgb().color;
-    return e[0] /= 255, e[1] /= 255, e[2] /= 255, this.valpha !== 1 && e.push(this.valpha), e;
-  },
-  unitObject() {
-    const e = this.rgb().object();
-    return e.r /= 255, e.g /= 255, e.b /= 255, this.valpha !== 1 && (e.alpha = this.valpha), e;
-  },
-  round(e) {
-    return e = Math.max(e || 0, 0), new st([...this.color.map(sv(e)), this.valpha], this.model);
-  },
-  alpha(e) {
-    return e !== void 0 ? new st([...this.color, Math.max(0, Math.min(1, e))], this.model) : this.valpha;
-  },
-  // Rgb
-  red: Ke("rgb", 0, ft(255)),
-  green: Ke("rgb", 1, ft(255)),
-  blue: Ke("rgb", 2, ft(255)),
-  hue: Ke(["hsl", "hsv", "hsl", "hwb", "hcg"], 0, (e) => (e % 360 + 360) % 360),
-  saturationl: Ke("hsl", 1, ft(100)),
-  lightness: Ke("hsl", 2, ft(100)),
-  saturationv: Ke("hsv", 1, ft(100)),
-  value: Ke("hsv", 2, ft(100)),
-  chroma: Ke("hcg", 1, ft(100)),
-  gray: Ke("hcg", 2, ft(100)),
-  white: Ke("hwb", 1, ft(100)),
-  wblack: Ke("hwb", 2, ft(100)),
-  cyan: Ke("cmyk", 0, ft(100)),
-  magenta: Ke("cmyk", 1, ft(100)),
-  yellow: Ke("cmyk", 2, ft(100)),
-  black: Ke("cmyk", 3, ft(100)),
-  x: Ke("xyz", 0, ft(95.047)),
-  y: Ke("xyz", 1, ft(100)),
-  z: Ke("xyz", 2, ft(108.833)),
-  l: Ke("lab", 0, ft(100)),
-  a: Ke("lab", 1),
-  b: Ke("lab", 2),
-  keyword(e) {
-    return e !== void 0 ? new st(e) : vt[this.model].keyword(this.color);
-  },
-  hex(e) {
-    return e !== void 0 ? new st(e) : mt.to.hex(...this.rgb().round().color);
-  },
-  hexa(e) {
-    if (e !== void 0)
-      return new st(e);
-    const t = this.rgb().round().color;
-    let n = Math.round(this.valpha * 255).toString(16).toUpperCase();
-    return n.length === 1 && (n = "0" + n), mt.to.hex(...t) + n;
-  },
-  rgbNumber() {
-    const e = this.rgb().color;
-    return (e[0] & 255) << 16 | (e[1] & 255) << 8 | e[2] & 255;
+}), Zh = {
+  key: 0,
+  class: "col-span-1 flex items-center pr-5 text-sm lg:py-2"
+}, ev = { class: "font-medium" }, tv = { class: "flex items-center" }, av = ["value", "placeholder", "onInput", "onKeyup", "onKeydown"], zv = /* @__PURE__ */ _e({
+  __name: "UiSearchInput",
+  props: {
+    hasAddEntryOption: { type: Boolean, default: !1 },
+    label: { default: "" },
+    modelValue: {},
+    placeholder: { default: "Default placeholder" }
   },
-  luminosity() {
-    const e = this.rgb().color, t = [];
-    for (const [n, a] of e.entries()) {
-      const r = a / 255;
-      t[n] = r <= 0.04045 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4;
+  emits: ["update:modelValue", "handleKeypress", "blur"],
+  setup(e, { emit: t }) {
+    const n = e, a = H([""]), r = rn(() => {
+      a.value = n.modelValue;
+    }), o = H(null), l = async () => {
+      a.value.push(""), o.value && (await Mt(), o.value[o.value?.length - 1].focus());
+    }, s = C(() => a.value[a.value.length - 1].length > 0 && n.hasAddEntryOption), i = (x, g) => {
+      n.hasAddEntryOption && g.length === 0 && x !== 0 && a.value.splice(x, 1);
+    }, u = t;
+    function c(x, g) {
+      r(), !(g.length === 0 && x > 0) && (a.value[x] = g, u("update:modelValue", a.value));
     }
-    return 0.2126 * t[0] + 0.7152 * t[1] + 0.0722 * t[2];
-  },
-  contrast(e) {
-    const t = this.luminosity(), n = e.luminosity();
-    return t > n ? (t + 0.05) / (n + 0.05) : (n + 0.05) / (t + 0.05);
-  },
-  level(e) {
-    const t = this.contrast(e);
-    return t >= 7 ? "AAA" : t >= 4.5 ? "AA" : "";
-  },
-  isDark() {
-    const e = this.rgb().color;
-    return (e[0] * 2126 + e[1] * 7152 + e[2] * 722) / 1e4 < 128;
-  },
-  isLight() {
-    return !this.isDark();
-  },
-  negate() {
-    const e = this.rgb();
-    for (let t = 0; t < 3; t++)
-      e.color[t] = 255 - e.color[t];
-    return e;
-  },
-  lighten(e) {
-    const t = this.hsl();
-    return t.color[2] += t.color[2] * e, t;
-  },
-  darken(e) {
-    const t = this.hsl();
-    return t.color[2] -= t.color[2] * e, t;
-  },
-  saturate(e) {
-    const t = this.hsl();
-    return t.color[1] += t.color[1] * e, t;
-  },
-  desaturate(e) {
-    const t = this.hsl();
-    return t.color[1] -= t.color[1] * e, t;
-  },
-  whiten(e) {
-    const t = this.hwb();
-    return t.color[1] += t.color[1] * e, t;
-  },
-  blacken(e) {
-    const t = this.hwb();
-    return t.color[2] += t.color[2] * e, t;
-  },
-  grayscale() {
-    const e = this.rgb().color, t = e[0] * 0.3 + e[1] * 0.59 + e[2] * 0.11;
-    return st.rgb(t, t, t);
-  },
-  fade(e) {
-    return this.alpha(this.valpha - this.valpha * e);
+    function f(x, g, $) {
+      const b = [...a.value];
+      b[x] = g, u("handleKeypress", { event: $, value: b });
+    }
+    function m() {
+      u("blur", a.value);
+    }
+    const p = (x) => x === a.value.length - 1, k = C(() => n.label.length > 0), w = C(() => {
+      const x = "border-b border-b-gray-200 self-start shrink-0";
+      return k.value ? ["lg:col-start-2 lg:text-base", x] : [x];
+    });
+    return (x, g) => (h(), D("div", {
+      class: J(["mb-4 grid text-gray-900 lg:mb-0 lg:grid-rows-1 lg:gap-y-5", {
+        "lg:grid-cols-[224px_1fr]": k.value,
+        "lg:grid-cols-1": !k.value
+      }])
+    }, [
+      k.value ? (h(), D("div", Zh, [
+        G("label", ev, Pe(x.label), 1),
+        K(x.$slots, "tooltip")
+      ])) : I("", !0),
+      (h(!0), D(xe, null, Ee(a.value, ($, b) => (h(), D("div", {
+        key: b,
+        class: J(w.value)
+      }, [
+        G("div", tv, [
+          G("input", {
+            ref_for: !0,
+            ref_key: "inputs",
+            ref: o,
+            value: a.value[b],
+            type: "text",
+            class: "w-full py-1 pb-2 text-sm focus:outline-hidden",
+            placeholder: x.placeholder,
+            onInput: (O) => c(b, O.target.value),
+            onBlur: m,
+            onKeyup: Ca((O) => i(b, O.target.value), ["delete"]),
+            onKeydown: (O) => f(
+              b,
+              O.target.value,
+              O
+            )
+          }, null, 40, av),
+          x.hasAddEntryOption && p(b) ? (h(), ye(Fn, {
+            key: 0,
+            "icon-name": "plus-circle",
+            "icon-color": "gray",
+            "background-color": "none",
+            size: "medium",
+            title: "Add Row",
+            "data-testid": "add-entry",
+            disabled: !s.value,
+            onClick: l
+          }, null, 8, ["disabled"])) : I("", !0)
+        ])
+      ], 2))), 128))
+    ], 2));
+  }
+}), Bv = /* @__PURE__ */ _e({
+  __name: "UiSection",
+  props: {
+    size: { default: "wide" },
+    verticalPadding: { default: "large" },
+    borderTop: { type: Boolean, default: !1 },
+    borderBottom: { type: Boolean, default: !1 }
   },
-  opaquer(e) {
-    return this.alpha(this.valpha + this.valpha * e);
+  setup(e) {
+    const t = e, n = {
+      wide: "w-full  md:px-28 text-gray-900 lg:flex",
+      small: "w-full lg:mx-auto lg:w-2/3"
+    }, a = {
+      small: "lg:py-12 pt-8 pb-12",
+      large: "py-24",
+      none: "py-0"
+    }, r = C(() => {
+      const o = t.borderTop ? "border-t" : "", l = t.borderBottom ? "border-b" : "";
+      return `${o} ${l}`;
+    });
+    return (o, l) => (h(), D("section", {
+      class: J([r.value, "w-full border-gray-200 bg-white"])
+    }, [
+      G("div", {
+        class: J([n[o.size], a[o.verticalPadding]]),
+        "data-testid": "inner"
+      }, [
+        K(o.$slots, "default")
+      ], 2)
+    ], 2));
+  }
+}), Nv = /* @__PURE__ */ _e({
+  __name: "UiSectionDivider",
+  props: {
+    size: { default: "large" },
+    customClasses: { default: "" }
   },
-  rotate(e) {
-    const t = this.hsl();
-    let n = t.color[0];
-    return n = (n + e) % 360, n = n < 0 ? 360 + n : n, t.color[0] = n, t;
+  setup(e) {
+    const t = e, n = {
+      small: "h-px",
+      large: "h-4"
+    }, a = C(() => n[t.size]);
+    return (r, o) => (h(), D("div", {
+      class: J([[a.value, r.customClasses], "bg-gray-100"])
+    }, null, 2));
+  }
+}), Ev = /* @__PURE__ */ _e({
+  __name: "UiSkeletonBox",
+  props: {
+    maxWidth: { default: 100 },
+    minWidth: { default: 80 },
+    dynamicSize: { type: Boolean, default: !1 }
   },
-  mix(e, t) {
-    if (!e || !e.rgb)
-      throw new Error('Argument to "mix" was not a Color instance, but rather an instance of ' + typeof e);
-    const n = e.rgb(), a = this.rgb(), r = t === void 0 ? 0.5 : t, o = 2 * r - 1, l = n.alpha() - a.alpha(), s = ((o * l === -1 ? o : (o + l) / (1 + o * l)) + 1) / 2, i = 1 - s;
-    return st.rgb(
-      s * n.red() + i * a.red(),
-      s * n.green() + i * a.green(),
-      s * n.blue() + i * a.blue(),
-      n.alpha() * r + a.alpha() * (1 - r)
-    );
+  setup(e) {
+    const t = e, n = C(() => t.dynamicSize && `${Math.floor(
+      Math.random() * (t.maxWidth - t.minWidth) + t.minWidth
+    )}%`);
+    return (a, r) => (h(), D("span", {
+      class: J(["inline-block animate-pulse rounded-sm bg-gray-200", {
+        "h-4 w-full": a.dynamicSize
+      }]),
+      style: qe({ width: n.value })
+    }, null, 6));
   }
-};
-for (const e of Object.keys(vt)) {
-  if (Ns.includes(e))
-    continue;
-  const { channels: t } = vt[e];
-  st.prototype[e] = function(...n) {
-    return this.model === e ? new st(this) : n.length > 0 ? new st(n, e) : new st([...iv(vt[this.model][e].raw(this.color)), this.valpha], e);
-  }, st[e] = function(...n) {
-    let a = n[0];
-    return typeof a == "number" && (a = Ur(n, t)), new st(a, e);
-  };
-}
-function lv(e, t) {
-  return Number(e.toFixed(t));
-}
-function sv(e) {
-  return function(t) {
-    return lv(t, e);
-  };
-}
-function Ke(e, t, n) {
-  e = Array.isArray(e) ? e : [e];
-  for (const a of e)
-    (Wr[a] ||= [])[t] = n;
-  return e = e[0], function(a) {
-    let r;
-    return a !== void 0 ? (n && (a = n(a)), r = this[e](), r.color[t] = a, r) : (r = this[e]().color[t], n && (r = n(r)), r);
-  };
-}
-function ft(e) {
-  return function(t) {
-    return Math.max(0, Math.min(e, t));
-  };
-}
-function iv(e) {
-  return Array.isArray(e) ? e : [e];
-}
-function Ur(e, t) {
-  for (let n = 0; n < t; n++)
-    typeof e[n] != "number" && (e[n] = 0);
-  return e;
-}
-const uv = { class: "flex" }, dv = ["id", "aria-checked", "onClick"], cv = ["aria-checked"], Fv = /* @__PURE__ */ _e({
-  __name: "UiColorPicker",
+}), nv = { class: "text-sm leading-5 font-normal" }, Yv = /* @__PURE__ */ _e({
+  __name: "UiSnackbar",
   props: {
-    modelValue: { default: `#${$a[0]}` }
+    isShown: { type: Boolean, default: !1 },
+    position: { default: "left" },
+    iconName: { default: null },
+    iconSize: { default: "large" },
+    type: { default: "info" }
   },
-  emits: ["update:modelValue"],
+  emits: ["input", "action-click"],
   setup(e, { emit: t }) {
-    const n = e, a = t, r = H($a[0]);
-    ut(
-      () => n.modelValue,
-      () => {
-        const s = n.modelValue?.substring(1);
-        r.value = s || $a[0], s || a("update:modelValue", `#${r.value}`);
-      },
-      { immediate: !0 }
-    );
-    const o = C({
-      get() {
-        return `#${r.value}`;
-      },
-      set(s) {
-        r.value = s.substring(1), a("update:modelValue", `#${r.value}`);
+    const n = t, a = e;
+    return ut(
+      () => a.isShown,
+      (r) => {
+        r && n("input", r);
       }
-    }), l = C(() => {
-      const s = st(`#${r.value}`), i = s.contrast(st.rgb(77, 77, 77));
-      return s.contrast(st("white")) >= i ? "text-white" : "text-gray-800";
-    });
-    return (s, i) => (h(), D("div", uv, [
-      (h(!0), D(xe, null, Ee(y($a), (u, c) => (h(), D("div", {
-        id: `color-${u}`,
-        key: `ui-cp-${c}`,
-        class: "mr-3 flex size-4 rotate-45 cursor-pointer items-center justify-center",
-        style: qe({ backgroundColor: `#${u}` }),
-        "aria-checked": r.value === u,
-        onClick: (f) => {
-          r.value = u, a("update:modelValue", `#${u}`);
-        }
-      }, [
-        r.value === u ? (h(), ye(lt, {
-          key: 0,
-          id: "cp-checmark",
-          name: "checkmark",
-          class: J(["-rotate-45", l.value]),
-          size: "xs"
-        }, null, 8, ["class"])) : I("", !0)
-      ], 12, dv))), 128)),
-      G("div", {
-        class: "UiColorPicker-inputWrapper flex size-4 rotate-45 items-center justify-center",
-        style: qe({
-          backgroundColor: y($a).includes(r.value) ? "" : o.value
-        }),
-        "aria-checked": !y($a).includes(r.value)
-      }, [
-        Tt(G("input", {
-          "onUpdate:modelValue": i[0] || (i[0] = (u) => o.value = u),
-          type: "color",
-          class: "UiColorPicker-input absolute z-10 size-inherit cursor-pointer bg-gray-200 opacity-0"
-        }, null, 512), [
-          [dl, o.value]
-        ]),
-        y($a).includes(r.value) ? (h(), ye(lt, {
+    ), (r, o) => (h(), ye(It, {
+      "enter-active-class": "duration-200 ease-out",
+      "enter-from-class": "transform opacity-0",
+      "enter-to-class": "opacity-100",
+      "leave-active-class": "duration-200 ease-in",
+      "leave-from-class": "opacity-100",
+      "leave-to-class": "transform opacity-0"
+    }, {
+      default: ge(() => [
+        r.isShown ? (h(), D("div", {
           key: 0,
-          name: "color-palette",
-          size: "medium",
-          class: "-rotate-45"
-        })) : (h(), ye(lt, {
-          key: 1,
-          id: "cp-checmark",
-          name: "checkmark",
-          class: J(["-rotate-45", l.value]),
-          size: "xs"
-        }, null, 8, ["class"]))
-      ], 12, cv)
-    ]));
+          role: "status",
+          class: J(["fixed bottom-5 sm:bottom-12", {
+            "left-5 sm:left-12": r.position === "left",
+            "right-5 sm:right-12": r.position === "right"
+          }])
+        }, [
+          G("div", {
+            class: J(["flex items-center rounded-full px-4 py-3 shadow-md ease-in", {
+              "bg-red-500 text-white": r.type === "error",
+              "bg-gray-900 text-white": r.type === "info",
+              "bg-green-primary text-white": r.type === "success"
+            }])
+          }, [
+            r.iconName || r.type === "error" ? (h(), ye(lt, {
+              key: 0,
+              name: r.iconName || "alert-fill",
+              size: r.iconSize,
+              class: "mr-2 text-white"
+            }, null, 8, ["name", "size"])) : I("", !0),
+            G("p", nv, [
+              K(r.$slots, "default")
+            ]),
+            r.$slots.action ? (h(), D("button", {
+              key: 1,
+              ref: "actionBtn",
+              type: "button",
+              class: "ml-3 cursor-pointer text-sm leading-5 font-bold hover:underline focus:outline-hidden focus-visible:underline",
+              onClick: o[0] || (o[0] = (l) => n("action-click"))
+            }, [
+              K(r.$slots, "action")
+            ], 512)) : I("", !0)
+          ], 2)
+        ], 2)) : I("", !0)
+      ]),
+      _: 3
+    }));
+  }
+}), rv = {
+  key: 0,
+  class: "mx-auto",
+  width: "100",
+  height: "40",
+  viewBox: "0 0 100 40",
+  xmlns: "http://www.w3.org/2000/svg"
+}, Iv = /* @__PURE__ */ _e({
+  __name: "UiSpinner",
+  props: {
+    color: { default: "blue" },
+    variant: { default: "spinner" }
+  },
+  setup(e) {
+    const t = e, n = C(() => ({
+      blue: "text-blue-default",
+      green: "text-green-primary",
+      white: "text-white"
+    })[t.color]);
+    return (a, r) => (h(), D("div", {
+      class: J(n.value)
+    }, [
+      a.variant === "bubbles" ? (h(), D("svg", rv, [...r[0] || (r[0] = [
+        G("circle", {
+          cx: "25",
+          cy: "20",
+          r: "3.5",
+          fill: "currentColor"
+        }, [
+          G("animateTransform", {
+            attributeName: "transform",
+            type: "translate",
+            dur: "1.8s",
+            values: "0,0;-25,-20;0,0;25,20;0,0",
+            repeatCount: "indefinite",
+            easing: "ease-in-out",
+            begin: "0.16s"
+          }),
+          G("animateTransform", {
+            attributeName: "transform",
+            additive: "sum",
+            type: "scale",
+            dur: "1.8s",
+            values: "1; 2; 1; 0; 1",
+            repeatCount: "indefinite",
+            easing: "ease-in-out",
+            begin: "0.16s"
+          })
+        ], -1),
+        G("circle", {
+          cx: "50",
+          cy: "20",
+          r: "3.5",
+          fill: "currentColor"
+        }, [
+          G("animateTransform", {
+            attributeName: "transform",
+            type: "translate",
+            dur: "1.8s",
+            values: "0,0;-50,-20;0,0;50,20;0,0",
+            repeatCount: "indefinite",
+            easing: "ease-in-out",
+            begin: "0.26s"
+          }),
+          G("animateTransform", {
+            attributeName: "transform",
+            additive: "sum",
+            type: "scale",
+            dur: "1.8s",
+            values: "1; 2; 1; 0; 1",
+            repeatCount: "indefinite",
+            easing: "ease-in-out",
+            begin: "0.26s"
+          })
+        ], -1),
+        G("circle", {
+          cx: "75",
+          cy: "20",
+          r: "3.5",
+          fill: "currentColor"
+        }, [
+          G("animateTransform", {
+            attributeName: "transform",
+            type: "translate",
+            dur: "1.8s",
+            values: "0,0;-75,-20;0,0;75,20;0,0",
+            repeatCount: "indefinite",
+            easing: "ease-in-out",
+            begin: "0.42s"
+          }),
+          G("animateTransform", {
+            attributeName: "transform",
+            additive: "sum",
+            type: "scale",
+            dur: "1.8s",
+            values: "1; 2; 1; 0; 1",
+            repeatCount: "indefinite",
+            easing: "ease-in-out",
+            begin: "0.42s"
+          })
+        ], -1)
+      ])])) : (h(), ye(lt, {
+        key: 1,
+        name: "spinner",
+        class: "animate-spin",
+        size: "large"
+      }))
+    ], 2));
   }
-}), Vv = /* @__PURE__ */ _e({
+}), Lv = /* @__PURE__ */ _e({
   __name: "UiTextButton",
   props: {
     color: { default: "blue" },
@@ -16335,6 +16128,213 @@ const uv = { class: "flex" }, dv = ["id", "aria-checked", "onClick"], cv = ["ari
       _: 3
     }, 8, ["href", "class", "target"]));
   }
+}), ov = ["for"], lv = { class: "relative" }, sv = ["id", "aria-checked", "disabled", "aria-label"], Fv = /* @__PURE__ */ _e({
+  __name: "UiToggleButton",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    labelText: { default: "" },
+    labelSpace: { default: "default" },
+    labelTextSize: { default: "xs" },
+    labelPosition: { default: "left" },
+    labelVisible: { type: Boolean, default: !0 },
+    color: { default: "blue" },
+    size: { default: "small" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const n = H(`toggle-id-${Qr()}`), a = t, r = e, o = C(() => r.labelPosition === "left" ? r.labelSpace === "default" ? "mr-3" : "mr-12" : r.labelSpace === "default" ? "ml-3" : "ml-12"), l = C(() => {
+      switch (r.labelTextSize) {
+        case "xs":
+          return "text-xs";
+        case "sm":
+          return "text-sm";
+        case "md":
+          return "text-md";
+        case "lg":
+          return "text-lg";
+        default:
+          return "text-xs";
+      }
+    }), s = C(() => r.labelPosition === "left"), i = C(() => r.color === "blue" ? "bg-blue-default" : "bg-green-primary"), u = C(() => r.size === "small" ? "h-3 w-6" : "h-4 w-10"), c = C(() => r.size === "small" ? "h-4 w-4 top-[-2px]" : "h-6 w-6 top-[-4px]");
+    return (f, m) => (h(), D("div", null, [
+      G("label", {
+        for: n.value,
+        class: "flex cursor-pointer items-center"
+      }, [
+        f.$slots.default ? (h(), D("div", {
+          key: 0,
+          class: J(["whitespace-nowrap", {
+            [o.value]: !0,
+            "order-2": !s.value,
+            "sr-only": !f.labelVisible
+          }])
+        }, [
+          K(f.$slots, "default")
+        ], 2)) : I("", !0),
+        s.value && !f.$slots.default ? (h(), D("div", {
+          key: 1,
+          class: J(["leading-4 font-normal whitespace-nowrap text-gray-800", [o.value, l.value]])
+        }, Pe(f.labelText), 3)) : I("", !0),
+        G("div", lv, [
+          G("input", {
+            id: n.value,
+            type: "checkbox",
+            "data-testid": "toggleButton",
+            role: "checkbox",
+            "aria-checked": f.modelValue,
+            tabindex: "0",
+            class: "sr-only",
+            disabled: f.disabled,
+            "aria-label": f.labelText,
+            onClick: m[0] || (m[0] = (p) => a("update:modelValue", !f.modelValue))
+          }, null, 8, sv),
+          G("div", {
+            class: J(["line rounded-full shadow-inner transition-opacity duration-200 ease-in-out", {
+              "opacity-50": f.modelValue,
+              [i.value]: f.modelValue,
+              "bg-gray-300": !f.modelValue,
+              [u.value]: !0
+            }])
+          }, null, 2),
+          G("div", {
+            class: J([{
+              "translate-x-full": f.modelValue,
+              [i.value]: f.modelValue,
+              "bg-gray-500": !f.modelValue,
+              [c.value]: !0
+            }, "dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"])
+          }, null, 2)
+        ]),
+        !s.value && !f.$slots.default ? (h(), D("div", {
+          key: 2,
+          class: J(["leading-4 font-normal whitespace-nowrap text-gray-800", [o.value, l.value]])
+        }, Pe(f.labelText), 3)) : I("", !0)
+      ], 8, ov)
+    ]));
+  }
+}), iv = ["data-placement"], uv = { class: "pb-1 text-sm font-semibold" }, dv = { class: "text-sm" }, cv = ["data-placement"], Vv = /* @__PURE__ */ _e({
+  __name: "UiTooltip",
+  props: {
+    position: { default: "bottom" },
+    structuredLayout: { type: Boolean, default: !1 },
+    structuredInfo: { default: () => [] },
+    fixed: { type: Boolean, default: !0 },
+    multilines: { type: Boolean, default: !1 },
+    tooltipClasses: { default: "" },
+    floatingUiOptions: { default: null },
+    transitionClasses: { default: () => ({
+      top: "scale-95 opacity-0 -translate-y-2",
+      "top-start": "scale-95 opacity-0 -translate-y-2",
+      "top-end": "scale-95 opacity-0 -translate-y-2",
+      right: "scale-95 opacity-0 translate-x-2",
+      "bottom-end": "scale-95 opacity-0 translate-y-2",
+      bottom: "scale-95 opacity-0 translate-y-2",
+      "bottom-start": "scale-95 opacity-0 translate-y-2",
+      left: "scale-95 opacity-0 -translate-x-2"
+    }) },
+    enterActiveClasses: { default: "motion-safe:transition duration-300 delay-500" },
+    leaveActiveClasses: { default: ":motion-safe:transition" },
+    animate: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, n = C(() => t.animate ? t.transitionClasses[t.position] : ""), a = C(() => t.animate ? t.enterActiveClasses : ""), r = C(() => t.animate ? t.leaveActiveClasses : ""), o = H(!1), l = H(), s = H(), { floatingStyles: i, placement: u } = Rs(
+      l,
+      s,
+      {
+        strategy: t.fixed ? "fixed" : "absolute",
+        placement: t.position,
+        whileElementsMounted: Ss,
+        ...t.floatingUiOptions ? t.floatingUiOptions : {}
+      }
+    );
+    return (c, f) => (h(), D("div", null, [
+      G("div", {
+        ref_key: "activatorElm",
+        ref: l,
+        "data-testid": "activator",
+        tabindex: "1",
+        onMouseenter: f[0] || (f[0] = (m) => o.value = !0),
+        onFocus: f[1] || (f[1] = (m) => o.value = !0),
+        onMouseleave: f[2] || (f[2] = (m) => o.value = !1),
+        onBlur: f[3] || (f[3] = (m) => o.value = !1)
+      }, [
+        K(c.$slots, "activator")
+      ], 544),
+      (h(), ye(cl, {
+        disabled: !c.fixed,
+        to: "body"
+      }, [
+        c.structuredLayout ? (h(), D("div", {
+          key: 0,
+          ref_key: "tooltipElm",
+          ref: s,
+          style: qe(y(i)),
+          "data-testid": "structuredTooltip",
+          "data-placement": y(u)
+        }, [
+          Oe(It, {
+            "enter-active-class": a.value,
+            "leave-active-class": r.value,
+            "leave-to-class": n.value,
+            "enter-from-class": n.value
+          }, {
+            default: ge(() => [
+              Tt(G("ul", {
+                "data-testid": "tooltipElement",
+                class: J(["my-1 w-72 rounded-2xl border border-gray-300 bg-white text-xs leading-5 shadow-lg", [c.tooltipClasses]])
+              }, [
+                K(c.$slots, "default", {}, () => [
+                  (h(!0), D(xe, null, Ee(c.structuredInfo, ({ title: m, description: p }, k) => (h(), D("li", {
+                    key: `info-${k}`,
+                    class: J([
+                      "mx-4 py-3 text-left",
+                      k < c.structuredInfo.length - 1 ? "border-b border-b-gray-100" : ""
+                    ])
+                  }, [
+                    G("h4", uv, Pe(m), 1),
+                    G("p", dv, Pe(p), 1)
+                  ], 2))), 128))
+                ])
+              ], 2), [
+                [pa, o.value]
+              ])
+            ]),
+            _: 3
+          }, 8, ["enter-active-class", "leave-active-class", "leave-to-class", "enter-from-class"])
+        ], 12, iv)) : (h(), D("div", {
+          key: 1,
+          ref_key: "tooltipElm",
+          ref: s,
+          "data-testid": "tooltip",
+          style: qe(y(i)),
+          "data-placement": y(u)
+        }, [
+          Oe(It, {
+            "enter-active-class": a.value,
+            "leave-active-class": r.value,
+            "leave-to-class": n.value,
+            "enter-from-class": n.value
+          }, {
+            default: ge(() => [
+              Tt(G("div", {
+                "data-testid": "tooltipElement",
+                class: J(["flex items-center bg-gray-900 px-2 py-half text-xs leading-5 text-white", [
+                  c.tooltipClasses,
+                  c.multilines ? "h-auto max-w-[300px] flex-wrap rounded-2xl" : "h-6 w-max rounded-full"
+                ]])
+              }, [
+                K(c.$slots, "default")
+              ], 2), [
+                [pa, o.value]
+              ])
+            ]),
+            _: 3
+          }, 8, ["enter-active-class", "leave-active-class", "leave-to-class", "enter-from-class"])
+        ], 12, cv))
+      ], 8, ["disabled"]))
+    ]));
+  }
 }), fv = {
   sm: "40rem",
   md: "48rem",
@@ -16343,42 +16343,42 @@ const uv = { class: "flex" }, dv = ["id", "aria-checked", "onClick"], cv = ["ari
   "2xl": "96rem"
 };
 function Wv() {
-  const t = (/* @__PURE__ */ _p(fv)).current(), n = C(() => t.value.includes("sm")), a = C(() => t.value.includes("md")), r = C(() => t.value.includes("lg")), o = C(() => t.value.includes("xl")), l = C(() => t.value.includes("2xl"));
+  const t = (/* @__PURE__ */ wp(fv)).current(), n = C(() => t.value.includes("sm")), a = C(() => t.value.includes("md")), r = C(() => t.value.includes("lg")), o = C(() => t.value.includes("xl")), l = C(() => t.value.includes("2xl"));
   return { currentBreakpoint: t, sm: n, md: a, lg: r, xl: o, "2xl": l };
 }
 export {
   Sv as A,
-  Ov as B,
-  Rv as C,
-  zv as D,
-  Bv as E,
-  Nv as F,
+  Rv as B,
+  zv as C,
+  Bv as D,
+  Nv as E,
+  wh as F,
   Ev as G,
   Yv as H,
   Iv as I,
   Lv as J,
-  wh as K,
-  Fv as L,
-  Vv as M,
-  Qr as N,
-  Wv as O,
+  Fv as K,
+  Vv as L,
+  Wv as M,
+  qr as N,
+  nt as O,
   yv as U,
   Mn as _,
   pv as a,
   hv as b,
-  nt as c,
-  vv as d,
-  En as e,
-  gv as f,
-  tu as g,
-  bv as h,
-  wv as i,
-  kv as j,
+  vv as c,
+  En as d,
+  gv as e,
+  tu as f,
+  bv as g,
+  wv as h,
+  kv as i,
+  Ov as j,
   xv as k,
   _v as l,
   Mv as m,
   $v as n,
-  Yr as o,
+  Ir as o,
   lt as p,
   Fn as q,
   Dv as r,
@@ -16388,6 +16388,6 @@ export {
   Cv as v,
   Pv as w,
   Tv as x,
-  ip as y,
+  _p as y,
   Av as z
 };