@ddict/popup 1.0.6 → 1.0.8

package/dist/popup.es.js

@@ -1,1067 +1,2952 @@
-import { openBlock, createElementBlock, Fragment, withDirectives, createElementVNode, renderList, toDisplayString, vModelSelect, createCommentVNode, normalizeStyle, vModelText, vModelCheckbox, createVNode } from "vue";
-var helper = {
-  isRTL
-};
-function isRTL(locale) {
-  return ["ar", "fa", "iw", "yi", "ur", "pa"].indexOf(locale) > -1;
-}
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _sfc_main$8 = {
-  props: {
-    select: {
-      type: Object,
-      default: null
+import { computed as _, unref as R, shallowRef as an, watch as j, triggerRef as rt, onScopeDispose as Ye, ref as S, onUnmounted as St, inject as Ce, watchEffect as le, onMounted as de, cloneVNode as Ot, h as Oe, Fragment as X, defineComponent as se, provide as Qe, reactive as Et, nextTick as Q, toRaw as K, openBlock as P, createElementBlock as V, createElementVNode as I, mergeModels as un, useModel as cn, createBlock as xe, withCtx as Pe, createVNode as H, renderList as ge, normalizeClass as it, toDisplayString as ne, effectScope as It, markRaw as ae, hasInjectionContext as dn, getCurrentInstance as $t, isRef as be, isReactive as Ze, toRef as Be, getCurrentScope as Ct, toRefs as at, createCommentVNode as ue, withModifiers as fn, withDirectives as Xe, vModelCheckbox as vn, createTextVNode as pn, vModelText as Tt } from "vue";
+function _e(e, o, t) {
+  let n = t.initialDeps ?? [], l;
+  return () => {
+    var r, i, s, a;
+    let u;
+    t.key && ((r = t.debug) != null && r.call(t)) && (u = Date.now());
+    const v = e();
+    if (!(v.length !== n.length || v.some((m, w) => n[w] !== m)))
+      return l;
+    n = v;
+    let b;
+    if (t.key && ((i = t.debug) != null && i.call(t)) && (b = Date.now()), l = o(...v), t.key && ((s = t.debug) != null && s.call(t))) {
+      const m = Math.round((Date.now() - u) * 100) / 100, w = Math.round((Date.now() - b) * 100) / 100, $ = w / 16, M = (E, O) => {
+        for (E = String(E); E.length < O; )
+          E = " " + E;
+        return E;
+      };
+      console.info(
+        `%c⏱ ${M(w, 5)} /${M(m, 5)} ms`,
+        `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(
+          0,
+          Math.min(120 - 120 * $, 120)
+        )}deg 100% 31%);`,
+        t == null ? void 0 : t.key
+      );
     }
-  },
-  emits: ["select"],
-  data() {
-    return {
-      src: "",
-      target: "",
-      recents: {
-        src: [],
-        target: []
-      }
+    return (a = t == null ? void 0 : t.onChange) == null || a.call(t, l), l;
+  };
+}
+function Ue(e, o) {
+  if (e === void 0)
+    throw new Error("Unexpected undefined");
+  return e;
+}
+const hn = (e, o) => Math.abs(e - o) < 1, mn = (e, o, t) => {
+  let n;
+  return function(...l) {
+    e.clearTimeout(n), n = e.setTimeout(() => o.apply(this, l), t);
+  };
+}, gn = (e) => e, bn = (e) => {
+  const o = Math.max(e.startIndex - e.overscan, 0), t = Math.min(e.endIndex + e.overscan, e.count - 1), n = [];
+  for (let l = o; l <= t; l++)
+    n.push(l);
+  return n;
+}, yn = (e, o) => {
+  const t = e.scrollElement;
+  if (!t)
+    return;
+  const n = e.targetWindow;
+  if (!n)
+    return;
+  const l = (i) => {
+    const { width: s, height: a } = i;
+    o({ width: Math.round(s), height: Math.round(a) });
+  };
+  if (l(t.getBoundingClientRect()), !n.ResizeObserver)
+    return () => {
     };
-  },
-  watch: {
-    select(val) {
-      if (!val)
+  const r = new n.ResizeObserver((i) => {
+    const s = i[0];
+    if (s != null && s.borderBoxSize) {
+      const a = s.borderBoxSize[0];
+      if (a) {
+        l({ width: a.inlineSize, height: a.blockSize });
         return;
-      this.src = val.src;
-      this.target = val.target;
-      this.loadRecents();
+      }
     }
-  },
-  methods: {
-    onRecentSrc(src) {
-      this.src = src;
-      this.onSelect();
-    },
-    onRecentTarget(target) {
-      this.target = target;
-      this.onSelect();
+    l(t.getBoundingClientRect());
+  });
+  return r.observe(t, { box: "border-box" }), () => {
+    r.unobserve(t);
+  };
+}, ut = {
+  passive: !0
+}, _n = typeof window > "u" ? !0 : "onscrollend" in window, wn = (e, o) => {
+  const t = e.scrollElement;
+  if (!t)
+    return;
+  const n = e.targetWindow;
+  if (!n)
+    return;
+  let l = 0;
+  const r = _n ? () => {
+  } : mn(
+    n,
+    () => {
+      o(l, !1);
     },
-    swap() {
-      if (this.src === "auto")
+    e.options.isScrollingResetDelay
+  ), i = (u) => () => {
+    l = t[e.options.horizontal ? "scrollLeft" : "scrollTop"], r(), o(l, u);
+  }, s = i(!0), a = i(!1);
+  return a(), t.addEventListener("scroll", s, ut), t.addEventListener("scrollend", a, ut), () => {
+    t.removeEventListener("scroll", s), t.removeEventListener("scrollend", a);
+  };
+}, xn = (e, o, t) => {
+  if (o != null && o.borderBoxSize) {
+    const n = o.borderBoxSize[0];
+    if (n)
+      return Math.round(
+        n[t.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+  }
+  return Math.round(
+    e.getBoundingClientRect()[t.options.horizontal ? "width" : "height"]
+  );
+}, Sn = (e, {
+  adjustments: o = 0,
+  behavior: t
+}, n) => {
+  var l, r;
+  const i = e + o;
+  (r = (l = n.scrollElement) == null ? void 0 : l.scrollTo) == null || r.call(l, {
+    [n.options.horizontal ? "left" : "top"]: i,
+    behavior: t
+  });
+};
+class On {
+  constructor(o) {
+    this.unsubs = [], this.scrollElement = null, this.targetWindow = null, this.isScrolling = !1, this.scrollToIndexTimeoutId = null, this.measurementsCache = [], this.itemSizeCache = /* @__PURE__ */ new Map(), this.pendingMeasuredCacheIndexes = [], this.scrollRect = null, this.scrollOffset = null, this.scrollDirection = null, this.scrollAdjustments = 0, this.elementsCache = /* @__PURE__ */ new Map(), this.observer = /* @__PURE__ */ (() => {
+      let t = null;
+      const n = () => t || (!this.targetWindow || !this.targetWindow.ResizeObserver ? null : t = new this.targetWindow.ResizeObserver((l) => {
+        l.forEach((r) => {
+          this._measureElement(r.target, r);
+        });
+      }));
+      return {
+        disconnect: () => {
+          var l;
+          return (l = n()) == null ? void 0 : l.disconnect();
+        },
+        observe: (l) => {
+          var r;
+          return (r = n()) == null ? void 0 : r.observe(l, { box: "border-box" });
+        },
+        unobserve: (l) => {
+          var r;
+          return (r = n()) == null ? void 0 : r.unobserve(l);
+        }
+      };
+    })(), this.range = null, this.setOptions = (t) => {
+      Object.entries(t).forEach(([n, l]) => {
+        typeof l > "u" && delete t[n];
+      }), this.options = {
+        debug: !1,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: !1,
+        getItemKey: gn,
+        rangeExtractor: bn,
+        onChange: () => {
+        },
+        measureElement: xn,
+        initialRect: { width: 0, height: 0 },
+        scrollMargin: 0,
+        gap: 0,
+        indexAttribute: "data-index",
+        initialMeasurementsCache: [],
+        lanes: 1,
+        isScrollingResetDelay: 150,
+        enabled: !0,
+        ...t
+      };
+    }, this.notify = (t, n) => {
+      var l, r;
+      const { startIndex: i, endIndex: s } = this.range ?? {
+        startIndex: void 0,
+        endIndex: void 0
+      }, a = this.calculateRange();
+      (t || i !== (a == null ? void 0 : a.startIndex) || s !== (a == null ? void 0 : a.endIndex)) && ((r = (l = this.options).onChange) == null || r.call(l, this, n));
+    }, this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((t) => t()), this.unsubs = [], this.scrollElement = null, this.targetWindow = null, this.observer.disconnect(), this.elementsCache.clear();
+    }, this._didMount = () => () => {
+      this.cleanup();
+    }, this._willUpdate = () => {
+      var t;
+      const n = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== n) {
+        if (this.cleanup(), !n) {
+          this.notify(!1, !1);
+          return;
+        }
+        this.scrollElement = n, this.scrollElement && "ownerDocument" in this.scrollElement ? this.targetWindow = this.scrollElement.ownerDocument.defaultView : this.targetWindow = ((t = this.scrollElement) == null ? void 0 : t.window) ?? null, this._scrollToOffset(this.getScrollOffset(), {
+          adjustments: void 0,
+          behavior: void 0
+        }), this.unsubs.push(
+          this.options.observeElementRect(this, (l) => {
+            this.scrollRect = l, this.notify(!1, !1);
+          })
+        ), this.unsubs.push(
+          this.options.observeElementOffset(this, (l, r) => {
+            this.scrollAdjustments = 0, this.scrollDirection = r ? this.getScrollOffset() < l ? "forward" : "backward" : null, this.scrollOffset = l;
+            const i = this.isScrolling;
+            this.isScrolling = r, this.notify(i !== r, r);
+          })
+        );
+      }
+    }, this.getSize = () => this.options.enabled ? (this.scrollRect = this.scrollRect ?? this.options.initialRect, this.scrollRect[this.options.horizontal ? "width" : "height"]) : (this.scrollRect = null, 0), this.getScrollOffset = () => this.options.enabled ? (this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset == "function" ? this.options.initialOffset() : this.options.initialOffset), this.scrollOffset) : (this.scrollOffset = null, 0), this.getFurthestMeasurement = (t, n) => {
+      const l = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+      for (let i = n - 1; i >= 0; i--) {
+        const s = t[i];
+        if (l.has(s.lane))
+          continue;
+        const a = r.get(
+          s.lane
+        );
+        if (a == null || s.end > a.end ? r.set(s.lane, s) : s.end < a.end && l.set(s.lane, !0), l.size === this.options.lanes)
+          break;
+      }
+      return r.size === this.options.lanes ? Array.from(r.values()).sort((i, s) => i.end === s.end ? i.index - s.index : i.end - s.end)[0] : void 0;
+    }, this.getMeasurementOptions = _e(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey,
+        this.options.enabled
+      ],
+      (t, n, l, r, i) => (this.pendingMeasuredCacheIndexes = [], {
+        count: t,
+        paddingStart: n,
+        scrollMargin: l,
+        getItemKey: r,
+        enabled: i
+      }),
+      {
+        key: !1
+      }
+    ), this.getMeasurements = _e(
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
+      ({ count: t, paddingStart: n, scrollMargin: l, getItemKey: r, enabled: i }, s) => {
+        var a;
+        if (!i)
+          return this.measurementsCache = [], this.itemSizeCache.clear(), [];
+        this.measurementsCache.length === 0 && (this.measurementsCache = this.options.initialMeasurementsCache, this.measurementsCache.forEach((c) => {
+          this.itemSizeCache.set(c.key, c.size);
+        }));
+        const u = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        this.pendingMeasuredCacheIndexes = [];
+        const v = this.measurementsCache.slice(0, u);
+        for (let c = u; c < t; c++) {
+          let b = (a = this.measurementsCache[c]) == null ? void 0 : a.measureElement;
+          b || (b = (A) => {
+            const g = r(c), T = this.elementsCache.get(g);
+            if (!A) {
+              T && (this.observer.unobserve(T), this.elementsCache.delete(g));
+              return;
+            }
+            T !== A && (T && this.observer.unobserve(T), this.observer.observe(A), this.elementsCache.set(g, A)), A.isConnected && this.resizeItem(
+              c,
+              this.options.measureElement(A, void 0, this)
+            );
+          });
+          const m = r(c), w = this.options.lanes === 1 ? v[c - 1] : this.getFurthestMeasurement(v, c), $ = w ? w.end + this.options.gap : n + l, M = s.get(m), E = typeof M == "number" ? M : this.options.estimateSize(c), O = $ + E, D = w ? w.lane : c % this.options.lanes;
+          v[c] = {
+            index: c,
+            start: $,
+            size: E,
+            end: O,
+            key: m,
+            lane: D,
+            measureElement: b
+          };
+        }
+        return this.measurementsCache = v, v;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getMeasurements",
+        debug: () => this.options.debug
+      }
+    ), this.calculateRange = _e(
+      () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
+      (t, n, l) => this.range = t.length > 0 && n > 0 ? En({
+        measurements: t,
+        outerSize: n,
+        scrollOffset: l
+      }) : null,
+      {
+        key: process.env.NODE_ENV !== "production" && "calculateRange",
+        debug: () => this.options.debug
+      }
+    ), this.getIndexes = _e(
+      () => [
+        this.options.rangeExtractor,
+        this.calculateRange(),
+        this.options.overscan,
+        this.options.count
+      ],
+      (t, n, l, r) => n === null ? [] : t({
+        startIndex: n.startIndex,
+        endIndex: n.endIndex,
+        overscan: l,
+        count: r
+      }),
+      {
+        key: process.env.NODE_ENV !== "production" && "getIndexes",
+        debug: () => this.options.debug
+      }
+    ), this.indexFromElement = (t) => {
+      const n = this.options.indexAttribute, l = t.getAttribute(n);
+      return l ? parseInt(l, 10) : (console.warn(
+        `Missing attribute name '${n}={index}' on measured element.`
+      ), -1);
+    }, this._measureElement = (t, n) => {
+      const l = this.indexFromElement(t), r = this.getMeasurements()[l];
+      if (!r || !t.isConnected) {
+        this.elementsCache.forEach((s, a) => {
+          s === t && (this.observer.unobserve(t), this.elementsCache.delete(a));
+        });
         return;
-      if (!this.select.srcs[this.target] || !this.select.targets[this.src]) {
+      }
+      const i = this.elementsCache.get(r.key);
+      i !== t && (i && this.observer.unobserve(i), this.observer.observe(t), this.elementsCache.set(r.key, t)), this.resizeItem(l, this.options.measureElement(t, n, this));
+    }, this.resizeItem = (t, n) => {
+      const l = this.getMeasurements()[t];
+      if (!l)
         return;
+      const r = this.itemSizeCache.get(l.key) ?? l.size, i = n - r;
+      i !== 0 && ((this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(l, i, this) : l.start < this.getScrollOffset() + this.scrollAdjustments) && (process.env.NODE_ENV !== "production" && this.options.debug && console.info("correction", i), this._scrollToOffset(this.getScrollOffset(), {
+        adjustments: this.scrollAdjustments += i,
+        behavior: void 0
+      })), this.pendingMeasuredCacheIndexes.push(l.index), this.itemSizeCache = new Map(this.itemSizeCache.set(l.key, n)), this.notify(!0, !1));
+    }, this.measureElement = (t) => {
+      t && this._measureElement(t, void 0);
+    }, this.getVirtualItems = _e(
+      () => [this.getIndexes(), this.getMeasurements()],
+      (t, n) => {
+        const l = [];
+        for (let r = 0, i = t.length; r < i; r++) {
+          const s = t[r], a = n[s];
+          l.push(a);
+        }
+        return l;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getIndexes",
+        debug: () => this.options.debug
       }
-      const tmp = this.target;
-      this.target = this.src;
-      this.src = tmp;
-      this.onSelect();
+    ), this.getVirtualItemForOffset = (t) => {
+      const n = this.getMeasurements();
+      if (n.length !== 0)
+        return Ue(
+          n[Pt(
+            0,
+            n.length - 1,
+            (l) => Ue(n[l]).start,
+            t
+          )]
+        );
+    }, this.getOffsetForAlignment = (t, n) => {
+      const l = this.getSize(), r = this.getScrollOffset();
+      n === "auto" && (t <= r ? n = "start" : t >= r + l ? n = "end" : n = "start"), n === "start" ? t = t : n === "end" ? t = t - l : n === "center" && (t = t - l / 2);
+      const i = this.options.horizontal ? "scrollWidth" : "scrollHeight", a = (this.scrollElement ? "document" in this.scrollElement ? this.scrollElement.document.documentElement[i] : this.scrollElement[i] : 0) - l;
+      return Math.max(Math.min(a, t), 0);
+    }, this.getOffsetForIndex = (t, n = "auto") => {
+      t = Math.max(0, Math.min(t, this.options.count - 1));
+      const l = this.getMeasurements()[t];
+      if (!l)
+        return;
+      const r = this.getSize(), i = this.getScrollOffset();
+      if (n === "auto")
+        if (l.end >= i + r - this.options.scrollPaddingEnd)
+          n = "end";
+        else if (l.start <= i + this.options.scrollPaddingStart)
+          n = "start";
+        else
+          return [i, n];
+      const s = n === "end" ? l.end + this.options.scrollPaddingEnd : l.start - this.options.scrollPaddingStart;
+      return [this.getOffsetForAlignment(s, n), n];
+    }, this.isDynamicMode = () => this.elementsCache.size > 0, this.cancelScrollToIndex = () => {
+      this.scrollToIndexTimeoutId !== null && this.targetWindow && (this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId), this.scrollToIndexTimeoutId = null);
+    }, this.scrollToOffset = (t, { align: n = "start", behavior: l } = {}) => {
+      this.cancelScrollToIndex(), l === "smooth" && this.isDynamicMode() && console.warn(
+        "The `smooth` scroll behavior is not fully supported with dynamic size."
+      ), this._scrollToOffset(this.getOffsetForAlignment(t, n), {
+        adjustments: void 0,
+        behavior: l
+      });
+    }, this.scrollToIndex = (t, { align: n = "auto", behavior: l } = {}) => {
+      t = Math.max(0, Math.min(t, this.options.count - 1)), this.cancelScrollToIndex(), l === "smooth" && this.isDynamicMode() && console.warn(
+        "The `smooth` scroll behavior is not fully supported with dynamic size."
+      );
+      const r = this.getOffsetForIndex(t, n);
+      if (!r) return;
+      const [i, s] = r;
+      this._scrollToOffset(i, { adjustments: void 0, behavior: l }), l !== "smooth" && this.isDynamicMode() && this.targetWindow && (this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
+        if (this.scrollToIndexTimeoutId = null, this.elementsCache.has(
+          this.options.getItemKey(t)
+        )) {
+          const [u] = Ue(
+            this.getOffsetForIndex(t, s)
+          );
+          hn(u, this.getScrollOffset()) || this.scrollToIndex(t, { align: s, behavior: l });
+        } else
+          this.scrollToIndex(t, { align: s, behavior: l });
+      }));
+    }, this.scrollBy = (t, { behavior: n } = {}) => {
+      this.cancelScrollToIndex(), n === "smooth" && this.isDynamicMode() && console.warn(
+        "The `smooth` scroll behavior is not fully supported with dynamic size."
+      ), this._scrollToOffset(this.getScrollOffset() + t, {
+        adjustments: void 0,
+        behavior: n
+      });
+    }, this.getTotalSize = () => {
+      var t;
+      const n = this.getMeasurements();
+      let l;
+      return n.length === 0 ? l = this.options.paddingStart : l = this.options.lanes === 1 ? ((t = n[n.length - 1]) == null ? void 0 : t.end) ?? 0 : Math.max(
+        ...n.slice(-this.options.lanes).map((r) => r.end)
+      ), l - this.options.scrollMargin + this.options.paddingEnd;
+    }, this._scrollToOffset = (t, {
+      adjustments: n,
+      behavior: l
+    }) => {
+      this.options.scrollToFn(t, { behavior: l, adjustments: n }, this);
+    }, this.measure = () => {
+      var t, n;
+      this.itemSizeCache = /* @__PURE__ */ new Map(), (n = (t = this.options).onChange) == null || n.call(t, this, !1);
+    }, this.setOptions(o);
+  }
+}
+const Pt = (e, o, t, n) => {
+  for (; e <= o; ) {
+    const l = (e + o) / 2 | 0, r = t(l);
+    if (r < n)
+      e = l + 1;
+    else if (r > n)
+      o = l - 1;
+    else
+      return l;
+  }
+  return e > 0 ? e - 1 : 0;
+};
+function En({
+  measurements: e,
+  outerSize: o,
+  scrollOffset: t
+}) {
+  const n = e.length - 1, r = Pt(0, n, (s) => e[s].start, t);
+  let i = r;
+  for (; i < n && e[i].end < t + o; )
+    i++;
+  return { startIndex: r, endIndex: i };
+}
+function In(e) {
+  const o = new On(R(e)), t = an(o), n = o._didMount();
+  return j(
+    () => R(e).getScrollElement(),
+    (l) => {
+      l && o._willUpdate();
     },
-    onSelect() {
-      const select = JSON.parse(JSON.stringify(this.select));
-      select.src = this.src;
-      select.target = this.target;
-      this.$emit("select", select);
-      this.saveRecents(this.src, this.target);
+    {
+      immediate: !0
+    }
+  ), j(
+    () => R(e),
+    (l) => {
+      o.setOptions({
+        ...l,
+        onChange: (r, i) => {
+          var s;
+          rt(t), (s = l.onChange) == null || s.call(l, r, i);
+        }
+      }), o._willUpdate(), rt(t);
     },
-    loadRecents() {
-      const recents = JSON.parse(localStorage.getItem("recents"));
-      if (!recents)
+    {
+      immediate: !0
+    }
+  ), Ye(n), t;
+}
+function $n(e) {
+  return In(
+    _(() => ({
+      observeElementRect: yn,
+      observeElementOffset: wn,
+      scrollToFn: Sn,
+      ...R(e)
+    }))
+  );
+}
+function Cn(e, o, t) {
+  let n = S(t == null ? void 0 : t.value), l = _(() => e.value !== void 0);
+  return [_(() => l.value ? e.value : n.value), function(r) {
+    return l.value || (n.value = r), o == null ? void 0 : o(r);
+  }];
+}
+function Tn(e) {
+  typeof queueMicrotask == "function" ? queueMicrotask(e) : Promise.resolve().then(e).catch((o) => setTimeout(() => {
+    throw o;
+  }));
+}
+function Le() {
+  let e = [], o = { addEventListener(t, n, l, r) {
+    return t.addEventListener(n, l, r), o.add(() => t.removeEventListener(n, l, r));
+  }, requestAnimationFrame(...t) {
+    let n = requestAnimationFrame(...t);
+    o.add(() => cancelAnimationFrame(n));
+  }, nextFrame(...t) {
+    o.requestAnimationFrame(() => {
+      o.requestAnimationFrame(...t);
+    });
+  }, setTimeout(...t) {
+    let n = setTimeout(...t);
+    o.add(() => clearTimeout(n));
+  }, microTask(...t) {
+    let n = { current: !0 };
+    return Tn(() => {
+      n.current && t[0]();
+    }), o.add(() => {
+      n.current = !1;
+    });
+  }, style(t, n, l) {
+    let r = t.style.getPropertyValue(n);
+    return Object.assign(t.style, { [n]: l }), this.add(() => {
+      Object.assign(t.style, { [n]: r });
+    });
+  }, group(t) {
+    let n = Le();
+    return t(n), this.add(() => n.dispose());
+  }, add(t) {
+    return e.push(t), () => {
+      let n = e.indexOf(t);
+      if (n >= 0) for (let l of e.splice(n, 1)) l();
+    };
+  }, dispose() {
+    for (let t of e.splice(0)) t();
+  } };
+  return o;
+}
+function Pn() {
+  let e = Le();
+  return St(() => e.dispose()), e;
+}
+function Rn() {
+  let e = Pn();
+  return (o) => {
+    e.dispose(), e.nextFrame(o);
+  };
+}
+let kn = Symbol("headlessui.useid"), Nn = 0;
+function Te() {
+  return Ce(kn, () => `${++Nn}`)();
+}
+function k(e) {
+  var o;
+  if (e == null || e.value == null) return null;
+  let t = (o = e.value.$el) != null ? o : e.value;
+  return t instanceof Node ? t : null;
+}
+function te(e, o, ...t) {
+  if (e in o) {
+    let l = o[e];
+    return typeof l == "function" ? l(...t) : l;
+  }
+  let n = new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(o).map((l) => `"${l}"`).join(", ")}.`);
+  throw Error.captureStackTrace && Error.captureStackTrace(n, te), n;
+}
+var Vn = Object.defineProperty, Dn = (e, o, t) => o in e ? Vn(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, ct = (e, o, t) => (Dn(e, typeof o != "symbol" ? o + "" : o, t), t);
+let Ln = class {
+  constructor() {
+    ct(this, "current", this.detect()), ct(this, "currentId", 0);
+  }
+  set(o) {
+    this.current !== o && (this.currentId = 0, this.current = o);
+  }
+  reset() {
+    this.set(this.detect());
+  }
+  nextId() {
+    return ++this.currentId;
+  }
+  get isServer() {
+    return this.current === "server";
+  }
+  get isClient() {
+    return this.current === "client";
+  }
+  detect() {
+    return typeof window > "u" || typeof document > "u" ? "server" : "client";
+  }
+}, et = new Ln();
+function tt(e) {
+  if (et.isServer) return null;
+  if (e instanceof Node) return e.ownerDocument;
+  if (e != null && e.hasOwnProperty("value")) {
+    let o = k(e);
+    if (o) return o.ownerDocument;
+  }
+  return document;
+}
+let dt = ["[contentEditable=true]", "[tabindex]", "a[href]", "area[href]", "button:not([disabled])", "iframe", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])"].map((e) => `${e}:not([tabindex='-1'])`).join(",");
+var Mn = ((e) => (e[e.First = 1] = "First", e[e.Previous = 2] = "Previous", e[e.Next = 4] = "Next", e[e.Last = 8] = "Last", e[e.WrapAround = 16] = "WrapAround", e[e.NoScroll = 32] = "NoScroll", e))(Mn || {}), An = ((e) => (e[e.Error = 0] = "Error", e[e.Overflow = 1] = "Overflow", e[e.Success = 2] = "Success", e[e.Underflow = 3] = "Underflow", e))(An || {}), jn = ((e) => (e[e.Previous = -1] = "Previous", e[e.Next = 1] = "Next", e))(jn || {}), Rt = ((e) => (e[e.Strict = 0] = "Strict", e[e.Loose = 1] = "Loose", e))(Rt || {});
+function Fn(e, o = 0) {
+  var t;
+  return e === ((t = tt(e)) == null ? void 0 : t.body) ? !1 : te(o, { 0() {
+    return e.matches(dt);
+  }, 1() {
+    let n = e;
+    for (; n !== null; ) {
+      if (n.matches(dt)) return !0;
+      n = n.parentElement;
+    }
+    return !1;
+  } });
+}
+var zn = ((e) => (e[e.Keyboard = 0] = "Keyboard", e[e.Mouse = 1] = "Mouse", e))(zn || {});
+typeof window < "u" && typeof document < "u" && (document.addEventListener("keydown", (e) => {
+  e.metaKey || e.altKey || e.ctrlKey || (document.documentElement.dataset.headlessuiFocusVisible = "");
+}, !0), document.addEventListener("click", (e) => {
+  e.detail === 1 ? delete document.documentElement.dataset.headlessuiFocusVisible : e.detail === 0 && (document.documentElement.dataset.headlessuiFocusVisible = "");
+}, !0));
+function Bn(e, o = (t) => t) {
+  return e.slice().sort((t, n) => {
+    let l = o(t), r = o(n);
+    if (l === null || r === null) return 0;
+    let i = l.compareDocumentPosition(r);
+    return i & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : i & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
+  });
+}
+function Un() {
+  return /iPhone/gi.test(window.navigator.platform) || /Mac/gi.test(window.navigator.platform) && window.navigator.maxTouchPoints > 0;
+}
+function Hn() {
+  return /Android/gi.test(window.navigator.userAgent);
+}
+function kt() {
+  return Un() || Hn();
+}
+function Re(e, o, t) {
+  et.isServer || le((n) => {
+    document.addEventListener(e, o, t), n(() => document.removeEventListener(e, o, t));
+  });
+}
+function Wn(e, o, t) {
+  et.isServer || le((n) => {
+    window.addEventListener(e, o, t), n(() => window.removeEventListener(e, o, t));
+  });
+}
+function Gn(e, o, t = _(() => !0)) {
+  function n(r, i) {
+    if (!t.value || r.defaultPrevented) return;
+    let s = i(r);
+    if (s === null || !s.getRootNode().contains(s)) return;
+    let a = function u(v) {
+      return typeof v == "function" ? u(v()) : Array.isArray(v) || v instanceof Set ? v : [v];
+    }(e);
+    for (let u of a) {
+      if (u === null) continue;
+      let v = u instanceof HTMLElement ? u : k(u);
+      if (v != null && v.contains(s) || r.composed && r.composedPath().includes(v)) return;
+    }
+    return !Fn(s, Rt.Loose) && s.tabIndex !== -1 && r.preventDefault(), o(r, s);
+  }
+  let l = S(null);
+  Re("pointerdown", (r) => {
+    var i, s;
+    t.value && (l.value = ((s = (i = r.composedPath) == null ? void 0 : i.call(r)) == null ? void 0 : s[0]) || r.target);
+  }, !0), Re("mousedown", (r) => {
+    var i, s;
+    t.value && (l.value = ((s = (i = r.composedPath) == null ? void 0 : i.call(r)) == null ? void 0 : s[0]) || r.target);
+  }, !0), Re("click", (r) => {
+    kt() || l.value && (n(r, () => l.value), l.value = null);
+  }, !0), Re("touchend", (r) => n(r, () => r.target instanceof HTMLElement ? r.target : null), !0), Wn("blur", (r) => n(r, () => window.document.activeElement instanceof HTMLIFrameElement ? window.document.activeElement : null), !0);
+}
+function ft(e, o) {
+  if (e) return e;
+  let t = o ?? "button";
+  if (typeof t == "string" && t.toLowerCase() === "button") return "button";
+}
+function qn(e, o) {
+  let t = S(ft(e.value.type, e.value.as));
+  return de(() => {
+    t.value = ft(e.value.type, e.value.as);
+  }), le(() => {
+    var n;
+    t.value || k(o) && k(o) instanceof HTMLButtonElement && !((n = k(o)) != null && n.hasAttribute("type")) && (t.value = "button");
+  }), t;
+}
+function vt(e) {
+  return [e.screenX, e.screenY];
+}
+function Jn() {
+  let e = S([-1, -1]);
+  return { wasMoved(o) {
+    let t = vt(o);
+    return e.value[0] === t[0] && e.value[1] === t[1] ? !1 : (e.value = t, !0);
+  }, update(o) {
+    e.value = vt(o);
+  } };
+}
+function Kn({ container: e, accept: o, walk: t, enabled: n }) {
+  le(() => {
+    let l = e.value;
+    if (!l || n !== void 0 && !n.value) return;
+    let r = tt(e);
+    if (!r) return;
+    let i = Object.assign((a) => o(a), { acceptNode: o }), s = r.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, i, !1);
+    for (; s.nextNode(); ) t(s.currentNode);
+  });
+}
+var Ee = ((e) => (e[e.None = 0] = "None", e[e.RenderStrategy = 1] = "RenderStrategy", e[e.Static = 2] = "Static", e))(Ee || {}), Yn = ((e) => (e[e.Unmount = 0] = "Unmount", e[e.Hidden = 1] = "Hidden", e))(Yn || {});
+function fe({ visible: e = !0, features: o = 0, ourProps: t, theirProps: n, ...l }) {
+  var r;
+  let i = Vt(n, t), s = Object.assign(l, { props: i });
+  if (e || o & 2 && i.static) return He(s);
+  if (o & 1) {
+    let a = (r = i.unmount) == null || r ? 0 : 1;
+    return te(a, { 0() {
+      return null;
+    }, 1() {
+      return He({ ...l, props: { ...i, hidden: !0, style: { display: "none" } } });
+    } });
+  }
+  return He(s);
+}
+function He({ props: e, attrs: o, slots: t, slot: n, name: l }) {
+  var r, i;
+  let { as: s, ...a } = je(e, ["unmount", "static"]), u = (r = t.default) == null ? void 0 : r.call(t, n), v = {};
+  if (n) {
+    let c = !1, b = [];
+    for (let [m, w] of Object.entries(n)) typeof w == "boolean" && (c = !0), w === !0 && b.push(m);
+    c && (v["data-headlessui-state"] = b.join(" "));
+  }
+  if (s === "template") {
+    if (u = Nt(u ?? []), Object.keys(a).length > 0 || Object.keys(o).length > 0) {
+      let [c, ...b] = u ?? [];
+      if (!Zn(c) || b.length > 0) throw new Error(['Passing props on "template"!', "", `The current component <${l} /> is rendering a "template".`, "However we need to passthrough the following props:", Object.keys(a).concat(Object.keys(o)).map(($) => $.trim()).filter(($, M, E) => E.indexOf($) === M).sort(($, M) => $.localeCompare(M)).map(($) => `  - ${$}`).join(`
+`), "", "You can apply a few solutions:", ['Add an `as="..."` prop, to ensure that we render an actual element instead of a "template".', "Render a single element as the child so that we can forward the props onto that element."].map(($) => `  - ${$}`).join(`
+`)].join(`
+`));
+      let m = Vt((i = c.props) != null ? i : {}, a, v), w = Ot(c, m, !0);
+      for (let $ in m) $.startsWith("on") && (w.props || (w.props = {}), w.props[$] = m[$]);
+      return w;
+    }
+    return Array.isArray(u) && u.length === 1 ? u[0] : u;
+  }
+  return Oe(s, Object.assign({}, a, v), { default: () => u });
+}
+function Nt(e) {
+  return e.flatMap((o) => o.type === X ? Nt(o.children) : [o]);
+}
+function Vt(...e) {
+  if (e.length === 0) return {};
+  if (e.length === 1) return e[0];
+  let o = {}, t = {};
+  for (let n of e) for (let l in n) l.startsWith("on") && typeof n[l] == "function" ? (t[l] != null || (t[l] = []), t[l].push(n[l])) : o[l] = n[l];
+  if (o.disabled || o["aria-disabled"]) return Object.assign(o, Object.fromEntries(Object.keys(t).map((n) => [n, void 0])));
+  for (let n in t) Object.assign(o, { [n](l, ...r) {
+    let i = t[n];
+    for (let s of i) {
+      if (l instanceof Event && l.defaultPrevented) return;
+      s(l, ...r);
+    }
+  } });
+  return o;
+}
+function Qn(e) {
+  let o = Object.assign({}, e);
+  for (let t in o) o[t] === void 0 && delete o[t];
+  return o;
+}
+function je(e, o = []) {
+  let t = Object.assign({}, e);
+  for (let n of o) n in t && delete t[n];
+  return t;
+}
+function Zn(e) {
+  return e == null ? !1 : typeof e.type == "string" || typeof e.type == "object" || typeof e.type == "function";
+}
+var Dt = ((e) => (e[e.None = 1] = "None", e[e.Focusable = 2] = "Focusable", e[e.Hidden = 4] = "Hidden", e))(Dt || {});
+let Xn = se({ name: "Hidden", props: { as: { type: [Object, String], default: "div" }, features: { type: Number, default: 1 } }, setup(e, { slots: o, attrs: t }) {
+  return () => {
+    var n;
+    let { features: l, ...r } = e, i = { "aria-hidden": (l & 2) === 2 ? !0 : (n = r["aria-hidden"]) != null ? n : void 0, hidden: (l & 4) === 4 ? !0 : void 0, style: { position: "fixed", top: 1, left: 1, width: 1, height: 0, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0", ...(l & 4) === 4 && (l & 2) !== 2 && { display: "none" } } };
+    return fe({ ourProps: i, theirProps: r, slot: {}, attrs: t, slots: o, name: "Hidden" });
+  };
+} }), Lt = Symbol("Context");
+var Ie = ((e) => (e[e.Open = 1] = "Open", e[e.Closed = 2] = "Closed", e[e.Closing = 4] = "Closing", e[e.Opening = 8] = "Opening", e))(Ie || {});
+function eo() {
+  return Ce(Lt, null);
+}
+function to(e) {
+  Qe(Lt, e);
+}
+var W = ((e) => (e.Space = " ", e.Enter = "Enter", e.Escape = "Escape", e.Backspace = "Backspace", e.Delete = "Delete", e.ArrowLeft = "ArrowLeft", e.ArrowUp = "ArrowUp", e.ArrowRight = "ArrowRight", e.ArrowDown = "ArrowDown", e.Home = "Home", e.End = "End", e.PageUp = "PageUp", e.PageDown = "PageDown", e.Tab = "Tab", e))(W || {}), Mt = ((e) => (e[e.Left = 0] = "Left", e[e.Right = 2] = "Right", e))(Mt || {});
+function no(e) {
+  function o() {
+    document.readyState !== "loading" && (e(), document.removeEventListener("DOMContentLoaded", o));
+  }
+  typeof window < "u" && typeof document < "u" && (document.addEventListener("DOMContentLoaded", o), o());
+}
+let ie = [];
+no(() => {
+  function e(o) {
+    o.target instanceof HTMLElement && o.target !== document.body && ie[0] !== o.target && (ie.unshift(o.target), ie = ie.filter((t) => t != null && t.isConnected), ie.splice(10));
+  }
+  window.addEventListener("click", e, { capture: !0 }), window.addEventListener("mousedown", e, { capture: !0 }), window.addEventListener("focus", e, { capture: !0 }), document.body.addEventListener("click", e, { capture: !0 }), document.body.addEventListener("mousedown", e, { capture: !0 }), document.body.addEventListener("focus", e, { capture: !0 });
+});
+function oo(e) {
+  throw new Error("Unexpected object: " + e);
+}
+var B = ((e) => (e[e.First = 0] = "First", e[e.Previous = 1] = "Previous", e[e.Next = 2] = "Next", e[e.Last = 3] = "Last", e[e.Specific = 4] = "Specific", e[e.Nothing = 5] = "Nothing", e))(B || {});
+function pt(e, o) {
+  let t = o.resolveItems();
+  if (t.length <= 0) return null;
+  let n = o.resolveActiveIndex(), l = n ?? -1;
+  switch (e.focus) {
+    case 0: {
+      for (let r = 0; r < t.length; ++r) if (!o.resolveDisabled(t[r], r, t)) return r;
+      return n;
+    }
+    case 1: {
+      l === -1 && (l = t.length);
+      for (let r = l - 1; r >= 0; --r) if (!o.resolveDisabled(t[r], r, t)) return r;
+      return n;
+    }
+    case 2: {
+      for (let r = l + 1; r < t.length; ++r) if (!o.resolveDisabled(t[r], r, t)) return r;
+      return n;
+    }
+    case 3: {
+      for (let r = t.length - 1; r >= 0; --r) if (!o.resolveDisabled(t[r], r, t)) return r;
+      return n;
+    }
+    case 4: {
+      for (let r = 0; r < t.length; ++r) if (o.resolveId(t[r], r, t) === e.id) return r;
+      return n;
+    }
+    case 5:
+      return null;
+    default:
+      oo(e);
+  }
+}
+function At(e = {}, o = null, t = []) {
+  for (let [n, l] of Object.entries(e)) Ft(t, jt(o, n), l);
+  return t;
+}
+function jt(e, o) {
+  return e ? e + "[" + o + "]" : o;
+}
+function Ft(e, o, t) {
+  if (Array.isArray(t)) for (let [n, l] of t.entries()) Ft(e, jt(o, n.toString()), l);
+  else t instanceof Date ? e.push([o, t.toISOString()]) : typeof t == "boolean" ? e.push([o, t ? "1" : "0"]) : typeof t == "string" ? e.push([o, t]) : typeof t == "number" ? e.push([o, `${t}`]) : t == null ? e.push([o, ""]) : At(t, o, e);
+}
+function lo(e, o) {
+  return e === o;
+}
+var so = ((e) => (e[e.Open = 0] = "Open", e[e.Closed = 1] = "Closed", e))(so || {}), ro = ((e) => (e[e.Single = 0] = "Single", e[e.Multi = 1] = "Multi", e))(ro || {}), io = ((e) => (e[e.Pointer = 0] = "Pointer", e[e.Focus = 1] = "Focus", e[e.Other = 2] = "Other", e))(io || {});
+let zt = Symbol("ComboboxContext");
+function ve(e) {
+  let o = Ce(zt, null);
+  if (o === null) {
+    let t = new Error(`<${e} /> is missing a parent <Combobox /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(t, ve), t;
+  }
+  return o;
+}
+let Bt = Symbol("VirtualContext"), ao = se({ name: "VirtualProvider", setup(e, { slots: o }) {
+  let t = ve("VirtualProvider"), n = _(() => {
+    let s = k(t.optionsRef);
+    if (!s) return { start: 0, end: 0 };
+    let a = window.getComputedStyle(s);
+    return { start: parseFloat(a.paddingBlockStart || a.paddingTop), end: parseFloat(a.paddingBlockEnd || a.paddingBottom) };
+  }), l = $n(_(() => ({ scrollPaddingStart: n.value.start, scrollPaddingEnd: n.value.end, count: t.virtual.value.options.length, estimateSize() {
+    return 40;
+  }, getScrollElement() {
+    return k(t.optionsRef);
+  }, overscan: 12 }))), r = _(() => {
+    var s;
+    return (s = t.virtual.value) == null ? void 0 : s.options;
+  }), i = S(0);
+  return j([r], () => {
+    i.value += 1;
+  }), Qe(Bt, t.virtual.value ? l : null), () => [Oe("div", { style: { position: "relative", width: "100%", height: `${l.value.getTotalSize()}px` }, ref: (s) => {
+    if (s) {
+      if (typeof process < "u" && process.env.JEST_WORKER_ID !== void 0 || t.activationTrigger.value === 0) return;
+      t.activeOptionIndex.value !== null && t.virtual.value.options.length > t.activeOptionIndex.value && l.value.scrollToIndex(t.activeOptionIndex.value);
+    }
+  } }, l.value.getVirtualItems().map((s) => Ot(o.default({ option: t.virtual.value.options[s.index], open: t.comboboxState.value === 0 })[0], { key: `${i.value}-${s.index}`, "data-index": s.index, "aria-setsize": t.virtual.value.options.length, "aria-posinset": s.index + 1, style: { position: "absolute", top: 0, left: 0, transform: `translateY(${s.start}px)`, overflowAnchor: "none" } })))];
+} }), uo = se({ name: "Combobox", emits: { "update:modelValue": (e) => !0 }, props: { as: { type: [Object, String], default: "template" }, disabled: { type: [Boolean], default: !1 }, by: { type: [String, Function], nullable: !0, default: null }, modelValue: { type: [Object, String, Number, Boolean], default: void 0 }, defaultValue: { type: [Object, String, Number, Boolean], default: void 0 }, form: { type: String, optional: !0 }, name: { type: String, optional: !0 }, nullable: { type: Boolean, default: !1 }, multiple: { type: [Boolean], default: !1 }, immediate: { type: [Boolean], default: !1 }, virtual: { type: Object, default: null } }, inheritAttrs: !1, setup(e, { slots: o, attrs: t, emit: n }) {
+  let l = S(1), r = S(null), i = S(null), s = S(null), a = S(null), u = S({ static: !1, hold: !1 }), v = S([]), c = S(null), b = S(2), m = S(!1);
+  function w(d = (f) => f) {
+    let f = c.value !== null ? v.value[c.value] : null, y = d(v.value.slice()), x = y.length > 0 && y[0].dataRef.order.value !== null ? y.sort((L, G) => L.dataRef.order.value - G.dataRef.order.value) : Bn(y, (L) => k(L.dataRef.domRef)), N = f ? x.indexOf(f) : null;
+    return N === -1 && (N = null), { options: x, activeOptionIndex: N };
+  }
+  let $ = _(() => e.multiple ? 1 : 0), M = _(() => e.nullable), [E, O] = Cn(_(() => e.modelValue), (d) => n("update:modelValue", d), _(() => e.defaultValue)), D = _(() => E.value === void 0 ? te($.value, { 1: [], 0: void 0 }) : E.value), A = null, g = null;
+  function T(d) {
+    return te($.value, { 0() {
+      return O == null ? void 0 : O(d);
+    }, 1: () => {
+      let f = K(p.value.value).slice(), y = K(d), x = f.findIndex((N) => p.compare(y, K(N)));
+      return x === -1 ? f.push(y) : f.splice(x, 1), O == null ? void 0 : O(f);
+    } });
+  }
+  let h = _(() => {
+  });
+  j([h], ([d], [f]) => {
+    if (p.virtual.value && d && f && c.value !== null) {
+      let y = d.indexOf(f[c.value]);
+      y !== -1 ? c.value = y : c.value = null;
+    }
+  });
+  let p = { comboboxState: l, value: D, mode: $, compare(d, f) {
+    if (typeof e.by == "string") {
+      let y = e.by;
+      return (d == null ? void 0 : d[y]) === (f == null ? void 0 : f[y]);
+    }
+    return e.by === null ? lo(d, f) : e.by(d, f);
+  }, calculateIndex(d) {
+    return p.virtual.value ? e.by === null ? p.virtual.value.options.indexOf(d) : p.virtual.value.options.findIndex((f) => p.compare(f, d)) : v.value.findIndex((f) => p.compare(f.dataRef.value, d));
+  }, defaultValue: _(() => e.defaultValue), nullable: M, immediate: _(() => !1), virtual: _(() => null), inputRef: i, labelRef: r, buttonRef: s, optionsRef: a, disabled: _(() => e.disabled), options: v, change(d) {
+    O(d);
+  }, activeOptionIndex: _(() => {
+    if (m.value && c.value === null && (p.virtual.value ? p.virtual.value.options.length > 0 : v.value.length > 0)) {
+      if (p.virtual.value) {
+        let f = p.virtual.value.options.findIndex((y) => {
+          var x;
+          return !((x = p.virtual.value) != null && x.disabled(y));
+        });
+        if (f !== -1) return f;
+      }
+      let d = v.value.findIndex((f) => !f.dataRef.disabled);
+      if (d !== -1) return d;
+    }
+    return c.value;
+  }), activationTrigger: b, optionsPropsRef: u, closeCombobox() {
+    m.value = !1, !e.disabled && l.value !== 1 && (l.value = 1, c.value = null);
+  }, openCombobox() {
+    if (m.value = !0, !e.disabled && l.value !== 0) {
+      if (p.value.value) {
+        let d = p.calculateIndex(p.value.value);
+        d !== -1 && (c.value = d);
+      }
+      l.value = 0;
+    }
+  }, setActivationTrigger(d) {
+    b.value = d;
+  }, goToOption(d, f, y) {
+    m.value = !1, A !== null && cancelAnimationFrame(A), A = requestAnimationFrame(() => {
+      if (e.disabled || a.value && !u.value.static && l.value === 1) return;
+      if (p.virtual.value) {
+        c.value = d === B.Specific ? f : pt({ focus: d }, { resolveItems: () => p.virtual.value.options, resolveActiveIndex: () => {
+          var L, G;
+          return (G = (L = p.activeOptionIndex.value) != null ? L : p.virtual.value.options.findIndex((q) => {
+            var F;
+            return !((F = p.virtual.value) != null && F.disabled(q));
+          })) != null ? G : null;
+        }, resolveDisabled: (L) => p.virtual.value.disabled(L), resolveId() {
+          throw new Error("Function not implemented.");
+        } }), b.value = y ?? 2;
         return;
-      this.recents = recents;
-    },
-    saveRecents(src, target) {
-      if (!this.recents.src.includes(src)) {
-        this.recents.src.push(src);
       }
-      if (!this.recents.target.includes(target))
-        this.recents.target.push(target);
-      if (this.recents.src.length > 3)
-        this.recents.src.shift();
-      if (this.recents.target.length > 3)
-        this.recents.target.shift();
-      localStorage.setItem("recents", JSON.stringify(this.recents));
+      let x = w();
+      if (x.activeOptionIndex === null) {
+        let L = x.options.findIndex((G) => !G.dataRef.disabled);
+        L !== -1 && (x.activeOptionIndex = L);
+      }
+      let N = d === B.Specific ? f : pt({ focus: d }, { resolveItems: () => x.options, resolveActiveIndex: () => x.activeOptionIndex, resolveId: (L) => L.id, resolveDisabled: (L) => L.dataRef.disabled });
+      c.value = N, b.value = y ?? 2, v.value = x.options;
+    });
+  }, selectOption(d) {
+    let f = v.value.find((x) => x.id === d);
+    if (!f) return;
+    let { dataRef: y } = f;
+    T(y.value);
+  }, selectActiveOption() {
+    if (p.activeOptionIndex.value !== null) {
+      if (p.virtual.value) T(p.virtual.value.options[p.activeOptionIndex.value]);
+      else {
+        let { dataRef: d } = v.value[p.activeOptionIndex.value];
+        T(d.value);
+      }
+      p.goToOption(B.Specific, p.activeOptionIndex.value);
+    }
+  }, registerOption(d, f) {
+    let y = Et({ id: d, dataRef: f });
+    if (p.virtual.value) {
+      v.value.push(y);
+      return;
+    }
+    g && cancelAnimationFrame(g);
+    let x = w((N) => (N.push(y), N));
+    c.value === null && p.isSelected(f.value.value) && (x.activeOptionIndex = x.options.indexOf(y)), v.value = x.options, c.value = x.activeOptionIndex, b.value = 2, x.options.some((N) => !k(N.dataRef.domRef)) && (g = requestAnimationFrame(() => {
+      let N = w();
+      v.value = N.options, c.value = N.activeOptionIndex;
+    }));
+  }, unregisterOption(d, f) {
+    if (A !== null && cancelAnimationFrame(A), f && (m.value = !0), p.virtual.value) {
+      v.value = v.value.filter((x) => x.id !== d);
+      return;
     }
+    let y = w((x) => {
+      let N = x.findIndex((L) => L.id === d);
+      return N !== -1 && x.splice(N, 1), x;
+    });
+    v.value = y.options, c.value = y.activeOptionIndex, b.value = 2;
+  }, isSelected(d) {
+    return te($.value, { 0: () => p.compare(K(p.value.value), K(d)), 1: () => K(p.value.value).some((f) => p.compare(K(f), K(d))) });
+  }, isActive(d) {
+    return c.value === p.calculateIndex(d);
+  } };
+  Gn([i, s, a], () => p.closeCombobox(), _(() => l.value === 0)), Qe(zt, p), to(_(() => te(l.value, { 0: Ie.Open, 1: Ie.Closed })));
+  let C = _(() => {
+    var d;
+    return (d = k(i)) == null ? void 0 : d.closest("form");
+  });
+  return de(() => {
+    j([C], () => {
+      if (!C.value || e.defaultValue === void 0) return;
+      function d() {
+        p.change(e.defaultValue);
+      }
+      return C.value.addEventListener("reset", d), () => {
+        var f;
+        (f = C.value) == null || f.removeEventListener("reset", d);
+      };
+    }, { immediate: !0 });
+  }), () => {
+    var d, f, y;
+    let { name: x, disabled: N, form: L, ...G } = e, q = { open: l.value === 0, disabled: N, activeIndex: p.activeOptionIndex.value, activeOption: p.activeOptionIndex.value === null ? null : p.virtual.value ? p.virtual.value.options[(d = p.activeOptionIndex.value) != null ? d : 0] : (y = (f = p.options.value[p.activeOptionIndex.value]) == null ? void 0 : f.dataRef.value) != null ? y : null, value: D.value };
+    return Oe(X, [...x != null && D.value != null ? At({ [x]: D.value }).map(([F, rn]) => Oe(Xn, Qn({ features: Dt.Hidden, key: F, as: "input", type: "hidden", hidden: !0, readOnly: !0, form: L, disabled: N, name: F, value: rn }))) : [], fe({ theirProps: { ...t, ...je(G, ["by", "defaultValue", "immediate", "modelValue", "multiple", "nullable", "onUpdate:modelValue", "virtual"]) }, ourProps: {}, slot: q, slots: o, attrs: t, name: "Combobox" })]);
+  };
+} });
+se({ name: "ComboboxLabel", props: { as: { type: [Object, String], default: "label" }, id: { type: String, default: null } }, setup(e, { attrs: o, slots: t }) {
+  var n;
+  let l = (n = e.id) != null ? n : `headlessui-combobox-label-${Te()}`, r = ve("ComboboxLabel");
+  function i() {
+    var s;
+    (s = k(r.inputRef)) == null || s.focus({ preventScroll: !0 });
   }
-};
-const _hoisted_1$8 = {
-  key: 0,
-  class: "flex flex-row"
-};
-const _hoisted_2$8 = ["value"];
-const _hoisted_3$8 = {
-  key: 0,
+  return () => {
+    let s = { open: r.comboboxState.value === 0, disabled: r.disabled.value }, { ...a } = e, u = { id: l, ref: r.labelRef, onClick: i };
+    return fe({ ourProps: u, theirProps: a, slot: s, attrs: o, slots: t, name: "ComboboxLabel" });
+  };
+} });
+let co = se({ name: "ComboboxButton", props: { as: { type: [Object, String], default: "button" }, id: { type: String, default: null } }, setup(e, { attrs: o, slots: t, expose: n }) {
+  var l;
+  let r = (l = e.id) != null ? l : `headlessui-combobox-button-${Te()}`, i = ve("ComboboxButton");
+  n({ el: i.buttonRef, $el: i.buttonRef });
+  function s(v) {
+    i.disabled.value || (i.comboboxState.value === 0 ? i.closeCombobox() : (v.preventDefault(), i.openCombobox()), Q(() => {
+      var c;
+      return (c = k(i.inputRef)) == null ? void 0 : c.focus({ preventScroll: !0 });
+    }));
+  }
+  function a(v) {
+    switch (v.key) {
+      case W.ArrowDown:
+        v.preventDefault(), v.stopPropagation(), i.comboboxState.value === 1 && i.openCombobox(), Q(() => {
+          var c;
+          return (c = i.inputRef.value) == null ? void 0 : c.focus({ preventScroll: !0 });
+        });
+        return;
+      case W.ArrowUp:
+        v.preventDefault(), v.stopPropagation(), i.comboboxState.value === 1 && (i.openCombobox(), Q(() => {
+          i.value.value || i.goToOption(B.Last);
+        })), Q(() => {
+          var c;
+          return (c = i.inputRef.value) == null ? void 0 : c.focus({ preventScroll: !0 });
+        });
+        return;
+      case W.Escape:
+        if (i.comboboxState.value !== 0) return;
+        v.preventDefault(), i.optionsRef.value && !i.optionsPropsRef.value.static && v.stopPropagation(), i.closeCombobox(), Q(() => {
+          var c;
+          return (c = i.inputRef.value) == null ? void 0 : c.focus({ preventScroll: !0 });
+        });
+        return;
+    }
+  }
+  let u = qn(_(() => ({ as: e.as, type: o.type })), i.buttonRef);
+  return () => {
+    var v, c;
+    let b = { open: i.comboboxState.value === 0, disabled: i.disabled.value, value: i.value.value }, { ...m } = e, w = { ref: i.buttonRef, id: r, type: u.value, tabindex: "-1", "aria-haspopup": "listbox", "aria-controls": (v = k(i.optionsRef)) == null ? void 0 : v.id, "aria-expanded": i.comboboxState.value === 0, "aria-labelledby": i.labelRef.value ? [(c = k(i.labelRef)) == null ? void 0 : c.id, r].join(" ") : void 0, disabled: i.disabled.value === !0 ? !0 : void 0, onKeydown: a, onClick: s };
+    return fe({ ourProps: w, theirProps: m, slot: b, attrs: o, slots: t, name: "ComboboxButton" });
+  };
+} }), fo = se({ name: "ComboboxInput", props: { as: { type: [Object, String], default: "input" }, static: { type: Boolean, default: !1 }, unmount: { type: Boolean, default: !0 }, displayValue: { type: Function }, defaultValue: { type: String, default: void 0 }, id: { type: String, default: null } }, emits: { change: (e) => !0 }, setup(e, { emit: o, attrs: t, slots: n, expose: l }) {
+  var r;
+  let i = (r = e.id) != null ? r : `headlessui-combobox-input-${Te()}`, s = ve("ComboboxInput"), a = _(() => tt(k(s.inputRef))), u = { value: !1 };
+  l({ el: s.inputRef, $el: s.inputRef });
+  function v() {
+    s.change(null);
+    let g = k(s.optionsRef);
+    g && (g.scrollTop = 0), s.goToOption(B.Nothing);
+  }
+  let c = _(() => {
+    var g;
+    let T = s.value.value;
+    return k(s.inputRef) ? typeof e.displayValue < "u" && T !== void 0 ? (g = e.displayValue(T)) != null ? g : "" : typeof T == "string" ? T : "" : "";
+  });
+  de(() => {
+    j([c, s.comboboxState, a], ([g, T], [h, p]) => {
+      if (u.value) return;
+      let C = k(s.inputRef);
+      C && ((p === 0 && T === 1 || g !== h) && (C.value = g), requestAnimationFrame(() => {
+        var d;
+        if (u.value || !C || ((d = a.value) == null ? void 0 : d.activeElement) !== C) return;
+        let { selectionStart: f, selectionEnd: y } = C;
+        Math.abs((y ?? 0) - (f ?? 0)) === 0 && f === 0 && C.setSelectionRange(C.value.length, C.value.length);
+      }));
+    }, { immediate: !0 }), j([s.comboboxState], ([g], [T]) => {
+      if (g === 0 && T === 1) {
+        if (u.value) return;
+        let h = k(s.inputRef);
+        if (!h) return;
+        let p = h.value, { selectionStart: C, selectionEnd: d, selectionDirection: f } = h;
+        h.value = "", h.value = p, f !== null ? h.setSelectionRange(C, d, f) : h.setSelectionRange(C, d);
+      }
+    });
+  });
+  let b = S(!1);
+  function m() {
+    b.value = !0;
+  }
+  function w() {
+    Le().nextFrame(() => {
+      b.value = !1;
+    });
+  }
+  let $ = Rn();
+  function M(g) {
+    switch (u.value = !0, $(() => {
+      u.value = !1;
+    }), g.key) {
+      case W.Enter:
+        if (u.value = !1, s.comboboxState.value !== 0 || b.value) return;
+        if (g.preventDefault(), g.stopPropagation(), s.activeOptionIndex.value === null) {
+          s.closeCombobox();
+          return;
+        }
+        s.selectActiveOption(), s.mode.value === 0 && s.closeCombobox();
+        break;
+      case W.ArrowDown:
+        return u.value = !1, g.preventDefault(), g.stopPropagation(), te(s.comboboxState.value, { 0: () => s.goToOption(B.Next), 1: () => s.openCombobox() });
+      case W.ArrowUp:
+        return u.value = !1, g.preventDefault(), g.stopPropagation(), te(s.comboboxState.value, { 0: () => s.goToOption(B.Previous), 1: () => {
+          s.openCombobox(), Q(() => {
+            s.value.value || s.goToOption(B.Last);
+          });
+        } });
+      case W.Home:
+        if (g.shiftKey) break;
+        return u.value = !1, g.preventDefault(), g.stopPropagation(), s.goToOption(B.First);
+      case W.PageUp:
+        return u.value = !1, g.preventDefault(), g.stopPropagation(), s.goToOption(B.First);
+      case W.End:
+        if (g.shiftKey) break;
+        return u.value = !1, g.preventDefault(), g.stopPropagation(), s.goToOption(B.Last);
+      case W.PageDown:
+        return u.value = !1, g.preventDefault(), g.stopPropagation(), s.goToOption(B.Last);
+      case W.Escape:
+        if (u.value = !1, s.comboboxState.value !== 0) return;
+        g.preventDefault(), s.optionsRef.value && !s.optionsPropsRef.value.static && g.stopPropagation(), s.nullable.value && s.mode.value === 0 && s.value.value === null && v(), s.closeCombobox();
+        break;
+      case W.Tab:
+        if (u.value = !1, s.comboboxState.value !== 0) return;
+        s.mode.value === 0 && s.activationTrigger.value !== 1 && s.selectActiveOption(), s.closeCombobox();
+        break;
+    }
+  }
+  function E(g) {
+    o("change", g), s.nullable.value && s.mode.value === 0 && g.target.value === "" && v(), s.openCombobox();
+  }
+  function O(g) {
+    var T, h, p;
+    let C = (T = g.relatedTarget) != null ? T : ie.find((d) => d !== g.currentTarget);
+    if (u.value = !1, !((h = k(s.optionsRef)) != null && h.contains(C)) && !((p = k(s.buttonRef)) != null && p.contains(C)) && s.comboboxState.value === 0) return g.preventDefault(), s.mode.value === 0 && (s.nullable.value && s.value.value === null ? v() : s.activationTrigger.value !== 1 && s.selectActiveOption()), s.closeCombobox();
+  }
+  function D(g) {
+    var T, h, p;
+    let C = (T = g.relatedTarget) != null ? T : ie.find((d) => d !== g.currentTarget);
+    (h = k(s.buttonRef)) != null && h.contains(C) || (p = k(s.optionsRef)) != null && p.contains(C) || s.disabled.value || s.immediate.value && s.comboboxState.value !== 0 && (s.openCombobox(), Le().nextFrame(() => {
+      s.setActivationTrigger(1);
+    }));
+  }
+  let A = _(() => {
+    var g, T, h, p;
+    return (p = (h = (T = e.defaultValue) != null ? T : s.defaultValue.value !== void 0 ? (g = e.displayValue) == null ? void 0 : g.call(e, s.defaultValue.value) : null) != null ? h : s.defaultValue.value) != null ? p : "";
+  });
+  return () => {
+    var g, T, h, p, C, d, f;
+    let y = { open: s.comboboxState.value === 0 }, { displayValue: x, onChange: N, ...L } = e, G = { "aria-controls": (g = s.optionsRef.value) == null ? void 0 : g.id, "aria-expanded": s.comboboxState.value === 0, "aria-activedescendant": s.activeOptionIndex.value === null ? void 0 : s.virtual.value ? (T = s.options.value.find((q) => !s.virtual.value.disabled(q.dataRef.value) && s.compare(q.dataRef.value, s.virtual.value.options[s.activeOptionIndex.value]))) == null ? void 0 : T.id : (h = s.options.value[s.activeOptionIndex.value]) == null ? void 0 : h.id, "aria-labelledby": (d = (p = k(s.labelRef)) == null ? void 0 : p.id) != null ? d : (C = k(s.buttonRef)) == null ? void 0 : C.id, "aria-autocomplete": "list", id: i, onCompositionstart: m, onCompositionend: w, onKeydown: M, onInput: E, onFocus: D, onBlur: O, role: "combobox", type: (f = t.type) != null ? f : "text", tabIndex: 0, ref: s.inputRef, defaultValue: A.value, disabled: s.disabled.value === !0 ? !0 : void 0 };
+    return fe({ ourProps: G, theirProps: L, slot: y, attrs: t, slots: n, features: Ee.RenderStrategy | Ee.Static, name: "ComboboxInput" });
+  };
+} }), vo = se({ name: "ComboboxOptions", props: { as: { type: [Object, String], default: "ul" }, static: { type: Boolean, default: !1 }, unmount: { type: Boolean, default: !0 }, hold: { type: [Boolean], default: !1 } }, setup(e, { attrs: o, slots: t, expose: n }) {
+  let l = ve("ComboboxOptions"), r = `headlessui-combobox-options-${Te()}`;
+  n({ el: l.optionsRef, $el: l.optionsRef }), le(() => {
+    l.optionsPropsRef.value.static = e.static;
+  }), le(() => {
+    l.optionsPropsRef.value.hold = e.hold;
+  });
+  let i = eo(), s = _(() => i !== null ? (i.value & Ie.Open) === Ie.Open : l.comboboxState.value === 0);
+  Kn({ container: _(() => k(l.optionsRef)), enabled: _(() => l.comboboxState.value === 0), accept(u) {
+    return u.getAttribute("role") === "option" ? NodeFilter.FILTER_REJECT : u.hasAttribute("role") ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
+  }, walk(u) {
+    u.setAttribute("role", "none");
+  } });
+  function a(u) {
+    u.preventDefault();
+  }
+  return () => {
+    var u, v, c;
+    let b = { open: l.comboboxState.value === 0 }, m = { "aria-labelledby": (c = (u = k(l.labelRef)) == null ? void 0 : u.id) != null ? c : (v = k(l.buttonRef)) == null ? void 0 : v.id, id: r, ref: l.optionsRef, role: "listbox", "aria-multiselectable": l.mode.value === 1 ? !0 : void 0, onMousedown: a }, w = je(e, ["hold"]);
+    return fe({ ourProps: m, theirProps: w, slot: b, attrs: o, slots: l.virtual.value && l.comboboxState.value === 0 ? { ...t, default: () => [Oe(ao, {}, t.default)] } : t, features: Ee.RenderStrategy | Ee.Static, visible: s.value, name: "ComboboxOptions" });
+  };
+} }), po = se({ name: "ComboboxOption", props: { as: { type: [Object, String], default: "li" }, value: { type: [Object, String, Number, Boolean] }, disabled: { type: Boolean, default: !1 }, order: { type: [Number], default: null } }, setup(e, { slots: o, attrs: t, expose: n }) {
+  let l = ve("ComboboxOption"), r = `headlessui-combobox-option-${Te()}`, i = S(null), s = _(() => e.disabled);
+  n({ el: i, $el: i });
+  let a = _(() => {
+    var O;
+    return l.virtual.value ? l.activeOptionIndex.value === l.calculateIndex(e.value) : l.activeOptionIndex.value === null ? !1 : ((O = l.options.value[l.activeOptionIndex.value]) == null ? void 0 : O.id) === r;
+  }), u = _(() => l.isSelected(e.value)), v = Ce(Bt, null), c = _(() => ({ disabled: e.disabled, value: e.value, domRef: i, order: _(() => e.order) }));
+  de(() => l.registerOption(r, c)), St(() => l.unregisterOption(r, a.value)), le(() => {
+    let O = k(i);
+    O && (v == null || v.value.measureElement(O));
+  }), le(() => {
+    l.comboboxState.value === 0 && a.value && (l.virtual.value || l.activationTrigger.value !== 0 && Q(() => {
+      var O, D;
+      return (D = (O = k(i)) == null ? void 0 : O.scrollIntoView) == null ? void 0 : D.call(O, { block: "nearest" });
+    }));
+  });
+  function b(O) {
+    O.preventDefault(), O.button === Mt.Left && (s.value || (l.selectOption(r), kt() || requestAnimationFrame(() => {
+      var D;
+      return (D = k(l.inputRef)) == null ? void 0 : D.focus({ preventScroll: !0 });
+    }), l.mode.value === 0 && l.closeCombobox()));
+  }
+  function m() {
+    var O;
+    if (e.disabled || (O = l.virtual.value) != null && O.disabled(e.value)) return l.goToOption(B.Nothing);
+    let D = l.calculateIndex(e.value);
+    l.goToOption(B.Specific, D);
+  }
+  let w = Jn();
+  function $(O) {
+    w.update(O);
+  }
+  function M(O) {
+    var D;
+    if (!w.wasMoved(O) || e.disabled || (D = l.virtual.value) != null && D.disabled(e.value) || a.value) return;
+    let A = l.calculateIndex(e.value);
+    l.goToOption(B.Specific, A, 0);
+  }
+  function E(O) {
+    var D;
+    w.wasMoved(O) && (e.disabled || (D = l.virtual.value) != null && D.disabled(e.value) || a.value && (l.optionsPropsRef.value.hold || l.goToOption(B.Nothing)));
+  }
+  return () => {
+    let { disabled: O } = e, D = { active: a.value, selected: u.value, disabled: O }, A = { id: r, ref: i, role: "option", tabIndex: O === !0 ? void 0 : -1, "aria-disabled": O === !0 ? !0 : void 0, "aria-selected": u.value, disabled: void 0, onMousedown: b, onFocus: m, onPointerenter: $, onMouseenter: $, onPointermove: M, onMousemove: M, onPointerleave: E, onMouseleave: E }, g = je(e, ["order", "value"]);
+    return fe({ ourProps: A, theirProps: g, slot: D, attrs: t, slots: o, name: "ComboboxOption" });
+  };
+} });
+function ho(e, o) {
+  return P(), V("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    I("path", {
+      "fill-rule": "evenodd",
+      d: "M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+const ht = {
+  __name: "Select",
+  props: /* @__PURE__ */ un({
+    languages: {
+      type: Object,
+      required: !0
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const o = e, t = cn(e, "modelValue"), n = S(""), l = S(null), r = _(() => Object.entries(o.languages).filter(
+      ([, s]) => s.toLowerCase().includes(n.value.toLowerCase())
+    )), i = (s) => {
+      s.target.value = "", n.value = "", l.value && l.value.$el.click();
+    };
+    return (s, a) => (P(), xe(R(uo), {
+      modelValue: t.value,
+      "onUpdate:modelValue": a[2] || (a[2] = (u) => t.value = u),
+      as: "div",
+      class: "relative mt-1"
+    }, {
+      default: Pe(() => [
+        H(R(fo), {
+          class: "w-full border border-gray-300 rounded-md py-2 pl-3 pr-10 text-sm leading-5 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500",
+          onChange: a[0] || (a[0] = (u) => n.value = u.target.value),
+          displayValue: (u) => e.languages[u],
+          onFocus: a[1] || (a[1] = (u) => i(u))
+        }, null, 8, ["displayValue"]),
+        H(R(co), {
+          ref_key: "btnSelect",
+          ref: l,
+          class: "absolute inset-y-0 right-0 flex items-center pr-2"
+        }, {
+          default: Pe(() => [
+            H(R(ho), {
+              class: "h-5 w-5 text-gray-400",
+              "aria-hidden": "true"
+            })
+          ]),
+          _: 1
+        }, 512),
+        H(R(vo), { class: "absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-50" }, {
+          default: Pe(() => [
+            (P(!0), V(X, null, ge(r.value, ([u, v]) => (P(), xe(R(po), {
+              key: u,
+              value: u
+            }, {
+              default: Pe(({ active: c, selected: b }) => [
+                I("li", {
+                  class: it([
+                    "relative cursor-default select-none py-2 pl-3 pr-9",
+                    c ? "bg-[#3B5695] text-white" : "text-gray-900"
+                  ])
+                }, [
+                  I("span", {
+                    class: it(["block truncate", b && "font-semibold"])
+                  }, ne(v), 3)
+                ], 2)
+              ]),
+              _: 2
+            }, 1032, ["value"]))), 128))
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue"]));
+  }
+}, mo = { key: 0 }, go = /* @__PURE__ */ I("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   class: "h-6 w-6",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor"
-};
-const _hoisted_4$8 = /* @__PURE__ */ createElementVNode("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  "stroke-width": "2",
-  d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
-}, null, -1);
-const _hoisted_5$7 = [
-  _hoisted_4$8
-];
-const _hoisted_6$5 = {
-  key: 1,
+}, [
+  /* @__PURE__ */ I("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2",
+    d: "M13 7l5 5m0 0l-5 5m5-5H6"
+  })
+], -1), bo = [
+  go
+], yo = /* @__PURE__ */ I("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   class: "h-6 w-6",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor"
+}, [
+  /* @__PURE__ */ I("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2",
+    d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+  })
+], -1), _o = [
+  yo
+], wo = {
+  __name: "SwapBtn",
+  props: {
+    isBidirect: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["swap"],
+  setup(e, { emit: o }) {
+    const t = o;
+    return (n, l) => e.isBidirect ? (P(), V("button", {
+      key: 1,
+      onClick: l[0] || (l[0] = (r) => t("swap"))
+    }, _o)) : (P(), V("button", mo, bo));
+  }
 };
-const _hoisted_7$3 = /* @__PURE__ */ createElementVNode("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  "stroke-width": "2",
-  d: "M13 7l5 5m0 0l-5 5m5-5H6"
-}, null, -1);
-const _hoisted_8$2 = [
-  _hoisted_7$3
-];
-const _hoisted_9$2 = ["value"];
-const _hoisted_10$2 = {
-  key: 1,
-  class: "flex flex-row"
-};
-const _hoisted_11$2 = { class: "grow" };
-const _hoisted_12$2 = ["onClick"];
-const _hoisted_13$1 = { class: "grow" };
-const _hoisted_14$1 = ["onClick"];
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(Fragment, null, [
-    $props.select ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
-      withDirectives(createElementVNode("select", {
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.src = $event),
-        class: "select select-bordered grow",
-        onChange: _cache[1] || (_cache[1] = (...args) => $options.onSelect && $options.onSelect(...args))
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($props.select.srcs, (value, key) => {
-          return openBlock(), createElementBlock("option", {
-            value: key,
-            key
-          }, toDisplayString(value), 9, _hoisted_2$8);
-        }), 128))
-      ], 544), [
-        [vModelSelect, $data.src]
-      ]),
-      createElementVNode("button", {
-        class: "grow-0 ml-2 mr-2",
-        onClick: _cache[2] || (_cache[2] = (...args) => $options.swap && $options.swap(...args))
-      }, [
-        $data.src != "auto" ? (openBlock(), createElementBlock("svg", _hoisted_3$8, _hoisted_5$7)) : createCommentVNode("", true),
-        $data.src == "auto" ? (openBlock(), createElementBlock("svg", _hoisted_6$5, _hoisted_8$2)) : createCommentVNode("", true)
-      ]),
-      withDirectives(createElementVNode("select", {
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $data.target = $event),
-        class: "select select-bordered grow",
-        onChange: _cache[4] || (_cache[4] = (...args) => $options.onSelect && $options.onSelect(...args))
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($props.select.targets, (value, key) => {
-          return openBlock(), createElementBlock("option", {
-            value: key,
-            key
-          }, toDisplayString(value), 9, _hoisted_9$2);
-        }), 128))
-      ], 544), [
-        [vModelSelect, $data.target]
-      ])
-    ])) : createCommentVNode("", true),
-    $props.select && $data.src && $data.target && $data.recents ? (openBlock(), createElementBlock("div", _hoisted_10$2, [
-      createElementVNode("div", _hoisted_11$2, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($data.recents.src, (src) => {
-          return openBlock(), createElementBlock("span", {
-            key: src,
-            onClick: ($event) => $options.onRecentSrc(src),
-            class: "badge badge-sm ml-1 badge-outline"
-          }, toDisplayString($props.select.srcs[src]), 9, _hoisted_12$2);
-        }), 128))
-      ]),
-      createElementVNode("div", _hoisted_13$1, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($data.recents.target, (target) => {
-          return openBlock(), createElementBlock("span", {
-            key: target,
-            onClick: ($event) => $options.onRecentTarget(target),
-            class: "badge badge-sm ml-1 float-right mt-1"
-          }, toDisplayString($props.select.targets[target]), 9, _hoisted_14$1);
-        }), 128))
-      ])
-    ])) : createCommentVNode("", true)
-  ], 64);
+var Ut = !1;
+function ke(e, o, t) {
+  return Array.isArray(e) ? (e.length = Math.max(e.length, o), e.splice(o, 1, t), t) : (e[o] = t, t);
 }
-var Selects = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7]]);
-var config = {
-  INPUT_MAX_LENGTH: 5e3,
-  INPUT_DELAY: 1e3
-};
-var textarea = {
-  init,
-  autoResize
-};
-const MIN_HEIGHT = 100;
-const MAX_HEIGHT = 600;
-const PADDING = 10;
-function init(el, max_length) {
-  if (max_length) {
-    el.maxlength = max_length;
-  }
-  el.spellcheck = false;
-  setHeigtht(el, MIN_HEIGHT);
-}
-function autoResize(el) {
-  if (el.value == "") {
-    setHeigtht(el, MIN_HEIGHT);
+function We(e, o) {
+  if (Array.isArray(e)) {
+    e.splice(o, 1);
     return;
   }
-  if (el.scrollHeight < MIN_HEIGHT) {
-    setHeigtht(el, MIN_HEIGHT);
-    return;
+  delete e[o];
+}
+function xo() {
+  return Ht().__VUE_DEVTOOLS_GLOBAL_HOOK__;
+}
+function Ht() {
+  return typeof navigator < "u" && typeof window < "u" ? window : typeof globalThis < "u" ? globalThis : {};
+}
+const So = typeof Proxy == "function", Oo = "devtools-plugin:setup", Eo = "plugin:settings:set";
+let pe, Ge;
+function Io() {
+  var e;
+  return pe !== void 0 || (typeof window < "u" && window.performance ? (pe = !0, Ge = window.performance) : typeof globalThis < "u" && (!((e = globalThis.perf_hooks) === null || e === void 0) && e.performance) ? (pe = !0, Ge = globalThis.perf_hooks.performance) : pe = !1), pe;
+}
+function $o() {
+  return Io() ? Ge.now() : Date.now();
+}
+class Co {
+  constructor(o, t) {
+    this.target = null, this.targetQueue = [], this.onQueue = [], this.plugin = o, this.hook = t;
+    const n = {};
+    if (o.settings)
+      for (const i in o.settings) {
+        const s = o.settings[i];
+        n[i] = s.defaultValue;
+      }
+    const l = `__vue-devtools-plugin-settings__${o.id}`;
+    let r = Object.assign({}, n);
+    try {
+      const i = localStorage.getItem(l), s = JSON.parse(i);
+      Object.assign(r, s);
+    } catch {
+    }
+    this.fallbacks = {
+      getSettings() {
+        return r;
+      },
+      setSettings(i) {
+        try {
+          localStorage.setItem(l, JSON.stringify(i));
+        } catch {
+        }
+        r = i;
+      },
+      now() {
+        return $o();
+      }
+    }, t && t.on(Eo, (i, s) => {
+      i === this.plugin.id && this.fallbacks.setSettings(s);
+    }), this.proxiedOn = new Proxy({}, {
+      get: (i, s) => this.target ? this.target.on[s] : (...a) => {
+        this.onQueue.push({
+          method: s,
+          args: a
+        });
+      }
+    }), this.proxiedTarget = new Proxy({}, {
+      get: (i, s) => this.target ? this.target[s] : s === "on" ? this.proxiedOn : Object.keys(this.fallbacks).includes(s) ? (...a) => (this.targetQueue.push({
+        method: s,
+        args: a,
+        resolve: () => {
+        }
+      }), this.fallbacks[s](...a)) : (...a) => new Promise((u) => {
+        this.targetQueue.push({
+          method: s,
+          args: a,
+          resolve: u
+        });
+      })
+    });
   }
-  if (el.scrollHeight > MAX_HEIGHT) {
-    setHeigtht(el, MAX_HEIGHT);
-    return;
+  async setRealTarget(o) {
+    this.target = o;
+    for (const t of this.onQueue)
+      this.target.on[t.method](...t.args);
+    for (const t of this.targetQueue)
+      t.resolve(await this.target[t.method](...t.args));
+  }
+}
+function Wt(e, o) {
+  const t = e, n = Ht(), l = xo(), r = So && t.enableEarlyProxy;
+  if (l && (n.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !r))
+    l.emit(Oo, e, o);
+  else {
+    const i = r ? new Co(t, l) : null;
+    (n.__VUE_DEVTOOLS_PLUGINS__ = n.__VUE_DEVTOOLS_PLUGINS__ || []).push({
+      pluginDescriptor: t,
+      setupFn: o,
+      proxy: i
+    }), i && o(i.proxiedTarget);
+  }
+}
+/*!
+ * pinia v2.1.7
+ * (c) 2023 Eduardo San Martin Morote
+ * @license MIT
+ */
+let we;
+const $e = (e) => we = e, Gt = process.env.NODE_ENV !== "production" ? Symbol("pinia") : (
+  /* istanbul ignore next */
+  Symbol()
+);
+function ce(e) {
+  return e && typeof e == "object" && Object.prototype.toString.call(e) === "[object Object]" && typeof e.toJSON != "function";
+}
+var Z;
+(function(e) {
+  e.direct = "direct", e.patchObject = "patch object", e.patchFunction = "patch function";
+})(Z || (Z = {}));
+const Fe = typeof window < "u", Se = (process.env.NODE_ENV !== "production" || !1) && process.env.NODE_ENV !== "test" && Fe, mt = typeof window == "object" && window.window === window ? window : typeof self == "object" && self.self === self ? self : typeof global == "object" && global.global === global ? global : typeof globalThis == "object" ? globalThis : { HTMLElement: null };
+function To(e, { autoBom: o = !1 } = {}) {
+  return o && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type) ? new Blob(["\uFEFF", e], { type: e.type }) : e;
+}
+function nt(e, o, t) {
+  const n = new XMLHttpRequest();
+  n.open("GET", e), n.responseType = "blob", n.onload = function() {
+    Kt(n.response, o, t);
+  }, n.onerror = function() {
+    console.error("could not download file");
+  }, n.send();
+}
+function qt(e) {
+  const o = new XMLHttpRequest();
+  o.open("HEAD", e, !1);
+  try {
+    o.send();
+  } catch {
+  }
+  return o.status >= 200 && o.status <= 299;
+}
+function Ne(e) {
+  try {
+    e.dispatchEvent(new MouseEvent("click"));
+  } catch {
+    const t = document.createEvent("MouseEvents");
+    t.initMouseEvent("click", !0, !0, window, 0, 0, 0, 80, 20, !1, !1, !1, !1, 0, null), e.dispatchEvent(t);
+  }
+}
+const Ve = typeof navigator == "object" ? navigator : { userAgent: "" }, Jt = /Macintosh/.test(Ve.userAgent) && /AppleWebKit/.test(Ve.userAgent) && !/Safari/.test(Ve.userAgent), Kt = Fe ? (
+  // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView or mini program
+  typeof HTMLAnchorElement < "u" && "download" in HTMLAnchorElement.prototype && !Jt ? Po : (
+    // Use msSaveOrOpenBlob as a second approach
+    "msSaveOrOpenBlob" in Ve ? Ro : (
+      // Fallback to using FileReader and a popup
+      ko
+    )
+  )
+) : () => {
+};
+function Po(e, o = "download", t) {
+  const n = document.createElement("a");
+  n.download = o, n.rel = "noopener", typeof e == "string" ? (n.href = e, n.origin !== location.origin ? qt(n.href) ? nt(e, o, t) : (n.target = "_blank", Ne(n)) : Ne(n)) : (n.href = URL.createObjectURL(e), setTimeout(function() {
+    URL.revokeObjectURL(n.href);
+  }, 4e4), setTimeout(function() {
+    Ne(n);
+  }, 0));
+}
+function Ro(e, o = "download", t) {
+  if (typeof e == "string")
+    if (qt(e))
+      nt(e, o, t);
+    else {
+      const n = document.createElement("a");
+      n.href = e, n.target = "_blank", setTimeout(function() {
+        Ne(n);
+      });
+    }
+  else
+    navigator.msSaveOrOpenBlob(To(e, t), o);
+}
+function ko(e, o, t, n) {
+  if (n = n || open("", "_blank"), n && (n.document.title = n.document.body.innerText = "downloading..."), typeof e == "string")
+    return nt(e, o, t);
+  const l = e.type === "application/octet-stream", r = /constructor/i.test(String(mt.HTMLElement)) || "safari" in mt, i = /CriOS\/[\d]+/.test(navigator.userAgent);
+  if ((i || l && r || Jt) && typeof FileReader < "u") {
+    const s = new FileReader();
+    s.onloadend = function() {
+      let a = s.result;
+      if (typeof a != "string")
+        throw n = null, new Error("Wrong reader.result type");
+      a = i ? a : a.replace(/^data:[^;]*;/, "data:attachment/file;"), n ? n.location.href = a : location.assign(a), n = null;
+    }, s.readAsDataURL(e);
+  } else {
+    const s = URL.createObjectURL(e);
+    n ? n.location.assign(s) : location.href = s, n = null, setTimeout(function() {
+      URL.revokeObjectURL(s);
+    }, 4e4);
+  }
+}
+function z(e, o) {
+  const t = "🍍 " + e;
+  typeof __VUE_DEVTOOLS_TOAST__ == "function" ? __VUE_DEVTOOLS_TOAST__(t, o) : o === "error" ? console.error(t) : o === "warn" ? console.warn(t) : console.log(t);
+}
+function ot(e) {
+  return "_a" in e && "install" in e;
+}
+function Yt() {
+  if (!("clipboard" in navigator))
+    return z("Your browser doesn't support the Clipboard API", "error"), !0;
+}
+function Qt(e) {
+  return e instanceof Error && e.message.toLowerCase().includes("document is not focused") ? (z('You need to activate the "Emulate a focused page" setting in the "Rendering" panel of devtools.', "warn"), !0) : !1;
+}
+async function No(e) {
+  if (!Yt())
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(e.state.value)), z("Global state copied to clipboard.");
+    } catch (o) {
+      if (Qt(o))
+        return;
+      z("Failed to serialize the state. Check the console for more details.", "error"), console.error(o);
+    }
+}
+async function Vo(e) {
+  if (!Yt())
+    try {
+      Zt(e, JSON.parse(await navigator.clipboard.readText())), z("Global state pasted from clipboard.");
+    } catch (o) {
+      if (Qt(o))
+        return;
+      z("Failed to deserialize the state from clipboard. Check the console for more details.", "error"), console.error(o);
+    }
+}
+async function Do(e) {
+  try {
+    Kt(new Blob([JSON.stringify(e.state.value)], {
+      type: "text/plain;charset=utf-8"
+    }), "pinia-state.json");
+  } catch (o) {
+    z("Failed to export the state as JSON. Check the console for more details.", "error"), console.error(o);
+  }
+}
+let ee;
+function Lo() {
+  ee || (ee = document.createElement("input"), ee.type = "file", ee.accept = ".json");
+  function e() {
+    return new Promise((o, t) => {
+      ee.onchange = async () => {
+        const n = ee.files;
+        if (!n)
+          return o(null);
+        const l = n.item(0);
+        return o(l ? { text: await l.text(), file: l } : null);
+      }, ee.oncancel = () => o(null), ee.onerror = t, ee.click();
+    });
+  }
+  return e;
+}
+async function Mo(e) {
+  try {
+    const t = await Lo()();
+    if (!t)
+      return;
+    const { text: n, file: l } = t;
+    Zt(e, JSON.parse(n)), z(`Global state imported from "${l.name}".`);
+  } catch (o) {
+    z("Failed to import the state from JSON. Check the console for more details.", "error"), console.error(o);
+  }
+}
+function Zt(e, o) {
+  for (const t in o) {
+    const n = e.state.value[t];
+    n ? Object.assign(n, o[t]) : e.state.value[t] = o[t];
+  }
+}
+function Y(e) {
+  return {
+    _custom: {
+      display: e
+    }
+  };
+}
+const Xt = "🍍 Pinia (root)", qe = "_root";
+function Ao(e) {
+  return ot(e) ? {
+    id: qe,
+    label: Xt
+  } : {
+    id: e.$id,
+    label: e.$id
+  };
+}
+function jo(e) {
+  if (ot(e)) {
+    const t = Array.from(e._s.keys()), n = e._s;
+    return {
+      state: t.map((r) => ({
+        editable: !0,
+        key: r,
+        value: e.state.value[r]
+      })),
+      getters: t.filter((r) => n.get(r)._getters).map((r) => {
+        const i = n.get(r);
+        return {
+          editable: !1,
+          key: r,
+          value: i._getters.reduce((s, a) => (s[a] = i[a], s), {})
+        };
+      })
+    };
+  }
+  const o = {
+    state: Object.keys(e.$state).map((t) => ({
+      editable: !0,
+      key: t,
+      value: e.$state[t]
+    }))
+  };
+  return e._getters && e._getters.length && (o.getters = e._getters.map((t) => ({
+    editable: !1,
+    key: t,
+    value: e[t]
+  }))), e._customProperties.size && (o.customProperties = Array.from(e._customProperties).map((t) => ({
+    editable: !0,
+    key: t,
+    value: e[t]
+  }))), o;
+}
+function Fo(e) {
+  return e ? Array.isArray(e) ? e.reduce((o, t) => (o.keys.push(t.key), o.operations.push(t.type), o.oldValue[t.key] = t.oldValue, o.newValue[t.key] = t.newValue, o), {
+    oldValue: {},
+    keys: [],
+    operations: [],
+    newValue: {}
+  }) : {
+    operation: Y(e.type),
+    key: Y(e.key),
+    oldValue: e.oldValue,
+    newValue: e.newValue
+  } : {};
+}
+function zo(e) {
+  switch (e) {
+    case Z.direct:
+      return "mutation";
+    case Z.patchFunction:
+      return "$patch";
+    case Z.patchObject:
+      return "$patch";
+    default:
+      return "unknown";
   }
-  const el_height = el.style.height.replace("px", "");
-  if (el_height > el.scrollHeight) {
+}
+let me = !0;
+const De = [], re = "pinia:mutations", U = "pinia", { assign: Bo } = Object, Me = (e) => "🍍 " + e;
+function Uo(e, o) {
+  Wt({
+    id: "dev.esm.pinia",
+    label: "Pinia 🍍",
+    logo: "https://pinia.vuejs.org/logo.svg",
+    packageName: "pinia",
+    homepage: "https://pinia.vuejs.org",
+    componentStateTypes: De,
+    app: e
+  }, (t) => {
+    typeof t.now != "function" && z("You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html."), t.addTimelineLayer({
+      id: re,
+      label: "Pinia 🍍",
+      color: 15064968
+    }), t.addInspector({
+      id: U,
+      label: "Pinia 🍍",
+      icon: "storage",
+      treeFilterPlaceholder: "Search stores",
+      actions: [
+        {
+          icon: "content_copy",
+          action: () => {
+            No(o);
+          },
+          tooltip: "Serialize and copy the state"
+        },
+        {
+          icon: "content_paste",
+          action: async () => {
+            await Vo(o), t.sendInspectorTree(U), t.sendInspectorState(U);
+          },
+          tooltip: "Replace the state with the content of your clipboard"
+        },
+        {
+          icon: "save",
+          action: () => {
+            Do(o);
+          },
+          tooltip: "Save the state as a JSON file"
+        },
+        {
+          icon: "folder_open",
+          action: async () => {
+            await Mo(o), t.sendInspectorTree(U), t.sendInspectorState(U);
+          },
+          tooltip: "Import the state from a JSON file"
+        }
+      ],
+      nodeActions: [
+        {
+          icon: "restore",
+          tooltip: 'Reset the state (with "$reset")',
+          action: (n) => {
+            const l = o._s.get(n);
+            l ? typeof l.$reset != "function" ? z(`Cannot reset "${n}" store because it doesn't have a "$reset" method implemented.`, "warn") : (l.$reset(), z(`Store "${n}" reset.`)) : z(`Cannot reset "${n}" store because it wasn't found.`, "warn");
+          }
+        }
+      ]
+    }), t.on.inspectComponent((n, l) => {
+      const r = n.componentInstance && n.componentInstance.proxy;
+      if (r && r._pStores) {
+        const i = n.componentInstance.proxy._pStores;
+        Object.values(i).forEach((s) => {
+          n.instanceData.state.push({
+            type: Me(s.$id),
+            key: "state",
+            editable: !0,
+            value: s._isOptionsAPI ? {
+              _custom: {
+                value: K(s.$state),
+                actions: [
+                  {
+                    icon: "restore",
+                    tooltip: "Reset the state of this store",
+                    action: () => s.$reset()
+                  }
+                ]
+              }
+            } : (
+              // NOTE: workaround to unwrap transferred refs
+              Object.keys(s.$state).reduce((a, u) => (a[u] = s.$state[u], a), {})
+            )
+          }), s._getters && s._getters.length && n.instanceData.state.push({
+            type: Me(s.$id),
+            key: "getters",
+            editable: !1,
+            value: s._getters.reduce((a, u) => {
+              try {
+                a[u] = s[u];
+              } catch (v) {
+                a[u] = v;
+              }
+              return a;
+            }, {})
+          });
+        });
+      }
+    }), t.on.getInspectorTree((n) => {
+      if (n.app === e && n.inspectorId === U) {
+        let l = [o];
+        l = l.concat(Array.from(o._s.values())), n.rootNodes = (n.filter ? l.filter((r) => "$id" in r ? r.$id.toLowerCase().includes(n.filter.toLowerCase()) : Xt.toLowerCase().includes(n.filter.toLowerCase())) : l).map(Ao);
+      }
+    }), t.on.getInspectorState((n) => {
+      if (n.app === e && n.inspectorId === U) {
+        const l = n.nodeId === qe ? o : o._s.get(n.nodeId);
+        if (!l)
+          return;
+        l && (n.state = jo(l));
+      }
+    }), t.on.editInspectorState((n, l) => {
+      if (n.app === e && n.inspectorId === U) {
+        const r = n.nodeId === qe ? o : o._s.get(n.nodeId);
+        if (!r)
+          return z(`store "${n.nodeId}" not found`, "error");
+        const { path: i } = n;
+        ot(r) ? i.unshift("state") : (i.length !== 1 || !r._customProperties.has(i[0]) || i[0] in r.$state) && i.unshift("$state"), me = !1, n.set(r, i, n.state.value), me = !0;
+      }
+    }), t.on.editComponentState((n) => {
+      if (n.type.startsWith("🍍")) {
+        const l = n.type.replace(/^🍍\s*/, ""), r = o._s.get(l);
+        if (!r)
+          return z(`store "${l}" not found`, "error");
+        const { path: i } = n;
+        if (i[0] !== "state")
+          return z(`Invalid path for store "${l}":
+${i}
+Only state can be modified.`);
+        i[0] = "$state", me = !1, n.set(r, i, n.state.value), me = !0;
+      }
+    });
+  });
+}
+function Ho(e, o) {
+  De.includes(Me(o.$id)) || De.push(Me(o.$id)), Wt({
+    id: "dev.esm.pinia",
+    label: "Pinia 🍍",
+    logo: "https://pinia.vuejs.org/logo.svg",
+    packageName: "pinia",
+    homepage: "https://pinia.vuejs.org",
+    componentStateTypes: De,
+    app: e,
+    settings: {
+      logStoreChanges: {
+        label: "Notify about new/deleted stores",
+        type: "boolean",
+        defaultValue: !0
+      }
+      // useEmojis: {
+      //   label: 'Use emojis in messages ⚡️',
+      //   type: 'boolean',
+      //   defaultValue: true,
+      // },
+    }
+  }, (t) => {
+    const n = typeof t.now == "function" ? t.now.bind(t) : Date.now;
+    o.$onAction(({ after: i, onError: s, name: a, args: u }) => {
+      const v = en++;
+      t.addTimelineEvent({
+        layerId: re,
+        event: {
+          time: n(),
+          title: "🛫 " + a,
+          subtitle: "start",
+          data: {
+            store: Y(o.$id),
+            action: Y(a),
+            args: u
+          },
+          groupId: v
+        }
+      }), i((c) => {
+        oe = void 0, t.addTimelineEvent({
+          layerId: re,
+          event: {
+            time: n(),
+            title: "🛬 " + a,
+            subtitle: "end",
+            data: {
+              store: Y(o.$id),
+              action: Y(a),
+              args: u,
+              result: c
+            },
+            groupId: v
+          }
+        });
+      }), s((c) => {
+        oe = void 0, t.addTimelineEvent({
+          layerId: re,
+          event: {
+            time: n(),
+            logType: "error",
+            title: "💥 " + a,
+            subtitle: "end",
+            data: {
+              store: Y(o.$id),
+              action: Y(a),
+              args: u,
+              error: c
+            },
+            groupId: v
+          }
+        });
+      });
+    }, !0), o._customProperties.forEach((i) => {
+      j(() => R(o[i]), (s, a) => {
+        t.notifyComponentUpdate(), t.sendInspectorState(U), me && t.addTimelineEvent({
+          layerId: re,
+          event: {
+            time: n(),
+            title: "Change",
+            subtitle: i,
+            data: {
+              newValue: s,
+              oldValue: a
+            },
+            groupId: oe
+          }
+        });
+      }, { deep: !0 });
+    }), o.$subscribe(({ events: i, type: s }, a) => {
+      if (t.notifyComponentUpdate(), t.sendInspectorState(U), !me)
+        return;
+      const u = {
+        time: n(),
+        title: zo(s),
+        data: Bo({ store: Y(o.$id) }, Fo(i)),
+        groupId: oe
+      };
+      s === Z.patchFunction ? u.subtitle = "⤵️" : s === Z.patchObject ? u.subtitle = "🧩" : i && !Array.isArray(i) && (u.subtitle = i.type), i && (u.data["rawEvent(s)"] = {
+        _custom: {
+          display: "DebuggerEvent",
+          type: "object",
+          tooltip: "raw DebuggerEvent[]",
+          value: i
+        }
+      }), t.addTimelineEvent({
+        layerId: re,
+        event: u
+      });
+    }, { detached: !0, flush: "sync" });
+    const l = o._hotUpdate;
+    o._hotUpdate = ae((i) => {
+      l(i), t.addTimelineEvent({
+        layerId: re,
+        event: {
+          time: n(),
+          title: "🔥 " + o.$id,
+          subtitle: "HMR update",
+          data: {
+            store: Y(o.$id),
+            info: Y("HMR update")
+          }
+        }
+      }), t.notifyComponentUpdate(), t.sendInspectorTree(U), t.sendInspectorState(U);
+    });
+    const { $dispose: r } = o;
+    o.$dispose = () => {
+      r(), t.notifyComponentUpdate(), t.sendInspectorTree(U), t.sendInspectorState(U), t.getSettings().logStoreChanges && z(`Disposed "${o.$id}" store 🗑`);
+    }, t.notifyComponentUpdate(), t.sendInspectorTree(U), t.sendInspectorState(U), t.getSettings().logStoreChanges && z(`"${o.$id}" store installed 🆕`);
+  });
+}
+let en = 0, oe;
+function gt(e, o, t) {
+  const n = o.reduce((l, r) => (l[r] = K(e)[r], l), {});
+  for (const l in n)
+    e[l] = function() {
+      const r = en, i = t ? new Proxy(e, {
+        get(...a) {
+          return oe = r, Reflect.get(...a);
+        },
+        set(...a) {
+          return oe = r, Reflect.set(...a);
+        }
+      }) : e;
+      oe = r;
+      const s = n[l].apply(i, arguments);
+      return oe = void 0, s;
+    };
+}
+function Wo({ app: e, store: o, options: t }) {
+  if (o.$id.startsWith("__hot:"))
     return;
+  o._isOptionsAPI = !!t.state, gt(o, Object.keys(t.actions), o._isOptionsAPI);
+  const n = o._hotUpdate;
+  K(o)._hotUpdate = function(l) {
+    n.apply(this, arguments), gt(o, Object.keys(l._hmrPayload.actions), !!o._isOptionsAPI);
+  }, Ho(
+    e,
+    // FIXME: is there a way to allow the assignment from Store<Id, S, G, A> to StoreGeneric?
+    o
+  );
+}
+function Go() {
+  const e = It(!0), o = e.run(() => S({}));
+  let t = [], n = [];
+  const l = ae({
+    install(r) {
+      $e(l), l._a = r, r.provide(Gt, l), r.config.globalProperties.$pinia = l, Se && Uo(r, l), n.forEach((i) => t.push(i)), n = [];
+    },
+    use(r) {
+      return !this._a && !Ut ? n.push(r) : t.push(r), this;
+    },
+    _p: t,
+    // it's actually undefined here
+    // @ts-expect-error
+    _a: null,
+    _e: e,
+    _s: /* @__PURE__ */ new Map(),
+    state: o
+  });
+  return Se && typeof Proxy < "u" && l.use(Wo), l;
+}
+function tn(e, o) {
+  for (const t in o) {
+    const n = o[t];
+    if (!(t in e))
+      continue;
+    const l = e[t];
+    ce(l) && ce(n) && !be(n) && !Ze(n) ? e[t] = tn(l, n) : e[t] = n;
   }
-  setHeigtht(el, el.scrollHeight + PADDING);
+  return e;
 }
-function setHeigtht(el, height) {
-  el.style.height = `${height}px`;
+const nn = () => {
+};
+function bt(e, o, t, n = nn) {
+  e.push(o);
+  const l = () => {
+    const r = e.indexOf(o);
+    r > -1 && (e.splice(r, 1), n());
+  };
+  return !t && Ct() && Ye(l), l;
 }
-const LABEL_AUTO_TRANSLATE = "auto_translate";
-const _sfc_main$7 = {
-  props: {
-    data: {
-      type: Object,
-      default: null
+function he(e, ...o) {
+  e.slice().forEach((t) => {
+    t(...o);
+  });
+}
+const qo = (e) => e();
+function Je(e, o) {
+  e instanceof Map && o instanceof Map && o.forEach((t, n) => e.set(n, t)), e instanceof Set && o instanceof Set && o.forEach(e.add, e);
+  for (const t in o) {
+    if (!o.hasOwnProperty(t))
+      continue;
+    const n = o[t], l = e[t];
+    ce(l) && ce(n) && e.hasOwnProperty(t) && !be(n) && !Ze(n) ? e[t] = Je(l, n) : e[t] = n;
+  }
+  return e;
+}
+const Jo = process.env.NODE_ENV !== "production" ? Symbol("pinia:skipHydration") : (
+  /* istanbul ignore next */
+  Symbol()
+);
+function Ko(e) {
+  return !ce(e) || !e.hasOwnProperty(Jo);
+}
+const { assign: J } = Object;
+function yt(e) {
+  return !!(be(e) && e.effect);
+}
+function _t(e, o, t, n) {
+  const { state: l, actions: r, getters: i } = o, s = t.state.value[e];
+  let a;
+  function u() {
+    !s && (process.env.NODE_ENV === "production" || !n) && (t.state.value[e] = l ? l() : {});
+    const v = process.env.NODE_ENV !== "production" && n ? (
+      // use ref() to unwrap refs inside state TODO: check if this is still necessary
+      at(S(l ? l() : {}).value)
+    ) : at(t.state.value[e]);
+    return J(v, r, Object.keys(i || {}).reduce((c, b) => (process.env.NODE_ENV !== "production" && b in v && console.warn(`[🍍]: A getter cannot have the same name as another state property. Rename one of them. Found with "${b}" in store "${e}".`), c[b] = ae(_(() => {
+      $e(t);
+      const m = t._s.get(e);
+      return i[b].call(m, m);
+    })), c), {}));
+  }
+  return a = Ke(e, u, o, t, n, !0), a;
+}
+function Ke(e, o, t = {}, n, l, r) {
+  let i;
+  const s = J({ actions: {} }, t);
+  if (process.env.NODE_ENV !== "production" && !n._e.active)
+    throw new Error("Pinia destroyed");
+  const a = {
+    deep: !0
+    // flush: 'post',
+  };
+  process.env.NODE_ENV !== "production" && !Ut && (a.onTrigger = (d) => {
+    u ? m = d : u == !1 && !h._hotUpdating && (Array.isArray(m) ? m.push(d) : console.error("🍍 debuggerEvents should be an array. This is most likely an internal Pinia bug."));
+  });
+  let u, v, c = [], b = [], m;
+  const w = n.state.value[e];
+  !r && !w && (process.env.NODE_ENV === "production" || !l) && (n.state.value[e] = {});
+  const $ = S({});
+  let M;
+  function E(d) {
+    let f;
+    u = v = !1, process.env.NODE_ENV !== "production" && (m = []), typeof d == "function" ? (d(n.state.value[e]), f = {
+      type: Z.patchFunction,
+      storeId: e,
+      events: m
+    }) : (Je(n.state.value[e], d), f = {
+      type: Z.patchObject,
+      payload: d,
+      storeId: e,
+      events: m
+    });
+    const y = M = Symbol();
+    Q().then(() => {
+      M === y && (u = !0);
+    }), v = !0, he(c, f, n.state.value[e]);
+  }
+  const O = r ? function() {
+    const { state: f } = t, y = f ? f() : {};
+    this.$patch((x) => {
+      J(x, y);
+    });
+  } : (
+    /* istanbul ignore next */
+    process.env.NODE_ENV !== "production" ? () => {
+      throw new Error(`🍍: Store "${e}" is built using the setup syntax and does not implement $reset().`);
+    } : nn
+  );
+  function D() {
+    i.stop(), c = [], b = [], n._s.delete(e);
+  }
+  function A(d, f) {
+    return function() {
+      $e(n);
+      const y = Array.from(arguments), x = [], N = [];
+      function L(F) {
+        x.push(F);
+      }
+      function G(F) {
+        N.push(F);
+      }
+      he(b, {
+        args: y,
+        name: d,
+        store: h,
+        after: L,
+        onError: G
+      });
+      let q;
+      try {
+        q = f.apply(this && this.$id === e ? this : h, y);
+      } catch (F) {
+        throw he(N, F), F;
+      }
+      return q instanceof Promise ? q.then((F) => (he(x, F), F)).catch((F) => (he(N, F), Promise.reject(F))) : (he(x, q), q);
+    };
+  }
+  const g = /* @__PURE__ */ ae({
+    actions: {},
+    getters: {},
+    state: [],
+    hotState: $
+  }), T = {
+    _p: n,
+    // _s: scope,
+    $id: e,
+    $onAction: bt.bind(null, b),
+    $patch: E,
+    $reset: O,
+    $subscribe(d, f = {}) {
+      const y = bt(c, d, f.detached, () => x()), x = i.run(() => j(() => n.state.value[e], (N) => {
+        (f.flush === "sync" ? v : u) && d({
+          storeId: e,
+          type: Z.direct,
+          events: m
+        }, N);
+      }, J({}, a, f)));
+      return y;
     },
-    tts: {
-      type: Object,
-      default: null
+    $dispose: D
+  }, h = Et(process.env.NODE_ENV !== "production" || Se ? J(
+    {
+      _hmrPayload: g,
+      _customProperties: ae(/* @__PURE__ */ new Set())
+      // devtools custom properties
     },
-    replace: {
-      type: String,
-      default: ""
+    T
+    // must be added later
+    // setupStore
+  ) : T);
+  n._s.set(e, h);
+  const C = (n._a && n._a.runWithContext || qo)(() => n._e.run(() => (i = It()).run(o)));
+  for (const d in C) {
+    const f = C[d];
+    if (be(f) && !yt(f) || Ze(f))
+      process.env.NODE_ENV !== "production" && l ? ke($.value, d, Be(C, d)) : r || (w && Ko(f) && (be(f) ? f.value = w[d] : Je(f, w[d])), n.state.value[e][d] = f), process.env.NODE_ENV !== "production" && g.state.push(d);
+    else if (typeof f == "function") {
+      const y = process.env.NODE_ENV !== "production" && l ? f : A(d, f);
+      C[d] = y, process.env.NODE_ENV !== "production" && (g.actions[d] = f), s.actions[d] = f;
+    } else process.env.NODE_ENV !== "production" && yt(f) && (g.getters[d] = r ? (
+      // @ts-expect-error
+      t.getters[d]
+    ) : f, Fe && (C._getters || // @ts-expect-error: same
+    (C._getters = ae([]))).push(d));
+  }
+  if (J(h, C), J(K(h), C), Object.defineProperty(h, "$state", {
+    get: () => process.env.NODE_ENV !== "production" && l ? $.value : n.state.value[e],
+    set: (d) => {
+      if (process.env.NODE_ENV !== "production" && l)
+        throw new Error("cannot set hotState");
+      E((f) => {
+        J(f, d);
+      });
+    }
+  }), process.env.NODE_ENV !== "production" && (h._hotUpdate = ae((d) => {
+    h._hotUpdating = !0, d._hmrPayload.state.forEach((f) => {
+      if (f in h.$state) {
+        const y = d.$state[f], x = h.$state[f];
+        typeof y == "object" && ce(y) && ce(x) ? tn(y, x) : d.$state[f] = x;
+      }
+      ke(h, f, Be(d.$state, f));
+    }), Object.keys(h.$state).forEach((f) => {
+      f in d.$state || We(h, f);
+    }), u = !1, v = !1, n.state.value[e] = Be(d._hmrPayload, "hotState"), v = !0, Q().then(() => {
+      u = !0;
+    });
+    for (const f in d._hmrPayload.actions) {
+      const y = d[f];
+      ke(h, f, A(f, y));
+    }
+    for (const f in d._hmrPayload.getters) {
+      const y = d._hmrPayload.getters[f], x = r ? (
+        // special handling of options api
+        _(() => ($e(n), y.call(h, h)))
+      ) : y;
+      ke(h, f, x);
+    }
+    Object.keys(h._hmrPayload.getters).forEach((f) => {
+      f in d._hmrPayload.getters || We(h, f);
+    }), Object.keys(h._hmrPayload.actions).forEach((f) => {
+      f in d._hmrPayload.actions || We(h, f);
+    }), h._hmrPayload = d._hmrPayload, h._getters = d._getters, h._hotUpdating = !1;
+  })), Se) {
+    const d = {
+      writable: !0,
+      configurable: !0,
+      // avoid warning on devtools trying to display this property
+      enumerable: !1
+    };
+    ["_p", "_hmrPayload", "_getters", "_customProperties"].forEach((f) => {
+      Object.defineProperty(h, f, J({ value: h[f] }, d));
+    });
+  }
+  return n._p.forEach((d) => {
+    if (Se) {
+      const f = i.run(() => d({
+        store: h,
+        app: n._a,
+        pinia: n,
+        options: s
+      }));
+      Object.keys(f || {}).forEach((y) => h._customProperties.add(y)), J(h, f);
+    } else
+      J(h, i.run(() => d({
+        store: h,
+        app: n._a,
+        pinia: n,
+        options: s
+      })));
+  }), process.env.NODE_ENV !== "production" && h.$state && typeof h.$state == "object" && typeof h.$state.constructor == "function" && !h.$state.constructor.toString().includes("[native code]") && console.warn(`[🍍]: The "state" must be a plain object. It cannot be
+	state: () => new MyClass()
+Found in store "${h.$id}".`), w && r && t.hydrate && t.hydrate(h.$state, w), u = !0, v = !0, h;
+}
+function lt(e, o, t) {
+  let n, l;
+  const r = typeof o == "function";
+  if (typeof e == "string")
+    n = e, l = r ? t : o;
+  else if (l = e, n = e.id, process.env.NODE_ENV !== "production" && typeof n != "string")
+    throw new Error('[🍍]: "defineStore()" must be passed a store id as its first argument.');
+  function i(s, a) {
+    const u = dn();
+    if (s = // in test mode, ignore the argument provided as we can always retrieve a
+    // pinia instance with getActivePinia()
+    (process.env.NODE_ENV === "test" && we && we._testing ? null : s) || (u ? Ce(Gt, null) : null), s && $e(s), process.env.NODE_ENV !== "production" && !we)
+      throw new Error(`[🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
+See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
+This will fail in production.`);
+    s = we, s._s.has(n) || (r ? Ke(n, o, l, s) : _t(n, l, s), process.env.NODE_ENV !== "production" && (i._pinia = s));
+    const v = s._s.get(n);
+    if (process.env.NODE_ENV !== "production" && a) {
+      const c = "__hot:" + n, b = r ? Ke(c, o, l, s, !0) : _t(c, J({}, l), s, !0);
+      a._hotUpdate(b), delete s.state.value[c], s._s.delete(c);
+    }
+    if (process.env.NODE_ENV !== "production" && Fe) {
+      const c = $t();
+      if (c && c.proxy && // avoid adding stores that are just built for hot module replacement
+      !a) {
+        const b = c.proxy, m = "_pStores" in b ? b._pStores : b._pStores = {};
+        m[n] = v;
+      }
+    }
+    return v;
+  }
+  return i.$id = n, i;
+}
+const st = lt("language", () => {
+  const e = S("auto"), o = S("en"), t = S({
+    src: [],
+    target: []
+  }), n = _(() => t.value.src[e.value]), l = _(() => t.value.target[o.value]);
+  function r(a, u) {
+    e.value = a == null ? void 0 : a.src, o.value = a == null ? void 0 : a.target, t.value = u;
+  }
+  function i() {
+    if (!t.value.src[o.value] || !t.value.target[e.value]) return;
+    const a = e.value;
+    e.value = o.value, o.value = a;
+  }
+  function s(a) {
+    return t.value.src[a] || t.value.target[a];
+  }
+  return { languages: t, src: e, target: o, srcLabel: n, targetLabel: l, init: r, swap: i, getLabel: s };
+}), Yo = {
+  key: 0,
+  class: "flex flex-row"
+}, Qo = {
+  __name: "Selects",
+  setup(e) {
+    const o = st();
+    function t() {
+      o.swap();
+    }
+    return (n, l) => R(o).languages ? (P(), V("div", Yo, [
+      H(ht, {
+        modelValue: R(o).src,
+        "onUpdate:modelValue": l[0] || (l[0] = (r) => R(o).src = r),
+        languages: R(o).languages.src,
+        class: "grow"
+      }, null, 8, ["modelValue", "languages"]),
+      H(wo, {
+        isBidirect: R(o).src !== "auto",
+        class: "grow-0",
+        onSwap: t
+      }, null, 8, ["isBidirect"]),
+      H(ht, {
+        modelValue: R(o).target,
+        "onUpdate:modelValue": l[1] || (l[1] = (r) => R(o).target = r),
+        languages: R(o).languages.target,
+        class: "grow"
+      }, null, 8, ["modelValue", "languages"])
+    ])) : ue("", !0);
+  }
+}, Zo = {
+  INPUT_MAX_LENGTH: 5e3,
+  INPUT_DEBOUNCE: 500
+}, ze = (e, o) => {
+  const t = e.__vccOpts || e;
+  for (const [n, l] of o)
+    t[n] = l;
+  return t;
+}, Xo = {}, el = { class: "mr-2 loading loading-dots loading-xs" };
+function tl(e, o) {
+  return P(), V("span", el);
+}
+const nl = /* @__PURE__ */ ze(Xo, [["render", tl]]);
+function ol(e, { volume: o = 1, playbackRate: t = 1, soundEnabled: n = !0, interrupt: l = !1, autoplay: r = !1, onload: i, ...s } = {}) {
+  const a = S(null), u = S(!1), v = S(null), c = S(null);
+  function b() {
+    var E;
+    typeof i == "function" && i.call(this), v.value = (v.value || ((E = c.value) == null ? void 0 : E.duration()) || 0) * 1e3, r === !0 && (u.value = !0);
+  }
+  return de(async () => {
+    const E = await import("./howler-DJIW9wc6.js").then((O) => O.h);
+    a.value = E.default.Howl, c.value = new a.value({
+      src: R(e),
+      volume: R(o),
+      rate: R(t),
+      onload: b,
+      ...s
+    });
+  }), j(
+    () => [e],
+    () => {
+      a.value && a.value && c && c.value && (c.value = new a.value({
+        src: R(e),
+        volume: R(o),
+        rate: R(t),
+        onload: b,
+        ...s
+      }));
     }
-  },
-  data() {
-    return {
-      input: "",
-      INPUT_MAX_LENGTH: config.INPUT_MAX_LENGTH,
-      input_timeout: null,
-      player: new Audio(),
-      playing: false,
-      ttsIndex: 0,
-      auto_translate: true,
-      firstTime: true
-    };
-  },
-  computed: {
-    rtl() {
-      if (!this.data)
-        return false;
-      return helper.isRTL(this.data.src);
+  ), j(
+    () => [R(o), R(t)],
+    () => {
+      c.value && (c.value.volume(R(o)), c.value.rate(R(t)));
     }
-  },
-  watch: {
-    replace(new_input) {
-      this.input = new_input;
-      if (this.firstTime || !this.auto_translate) {
-        setTimeout(() => {
-          this.$refs.input.select();
-        }, 100);
-      }
-      this.firstTime = false;
+  ), {
+    play: (E) => {
+      typeof E > "u" && (E = {}), !(!c.value || !n && !E.forceSoundEnabled) && (l && c.value.stop(), E.playbackRate && c.value.rate(E.playbackRate), c.value.play(E.id), c.value.once("end", () => {
+        c.value && c.value && !c.value.playing() && (u.value = !1);
+      }), u.value = !0);
     },
-    tts() {
-      this.ttsIndex = 0;
+    sound: c,
+    isPlaying: u,
+    duration: v,
+    pause: (E) => {
+      c.value && (c.value.pause(typeof E == "number" ? E : void 0), u.value = !1);
     },
-    auto_translate(val) {
-      if (val)
-        this.translate();
-      localStorage.setItem(LABEL_AUTO_TRANSLATE, val);
+    stop: (E) => {
+      c.value && (c.value.stop(typeof E == "number" ? E : void 0), u.value = !1);
+    }
+  };
+}
+const ll = { class: "swap" }, sl = /* @__PURE__ */ I("svg", {
+  class: "swap-off fill-current h-4 w-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ I("path", { d: "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" })
+], -1), rl = /* @__PURE__ */ I("svg", {
+  class: "swap-on fill-current h-4 w-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ I("path", {
+    "fill-rule": "evenodd",
+    d: "M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z",
+    "clip-rule": "evenodd"
+  })
+], -1), il = {
+  __name: "SpeakBtn",
+  props: {
+    url: {
+      type: String,
+      default: ""
     }
   },
-  mounted() {
-    textarea.init(this.$refs.input, config.INPUT_MAX_LENGTH);
-    this.player.addEventListener("ended", () => {
-      this.ttsIndex++;
-      if (this.ttsIndex >= this.tts.src.length) {
-        this.stop();
-        return;
-      }
-      this.play();
-    });
-    this.$refs.input.addEventListener("input", () => {
-      textarea.autoResize(this.$refs.input);
-      if (!this.auto_translate)
-        return;
-      clearTimeout(this.input_timeout);
-      this.input_timeout = setTimeout(this.translate, config.INPUT_DELAY);
-    });
-    this.$refs.input.addEventListener("keyup", (e) => {
-      if (this.auto_translate)
-        return;
-      if (e && e.keyCode === 13)
-        this.translate();
-    });
-  },
-  created() {
-    const auto_translate = localStorage.getItem(LABEL_AUTO_TRANSLATE);
-    if (auto_translate === "false")
-      this.auto_translate = false;
-  },
-  methods: {
-    play() {
-      if (!this.tts.src) {
-        return;
+  setup(e) {
+    const o = e, { play: t, stop: n, isPlaying: l } = ol(o.url), r = S(!1);
+    j(
+      () => l.value,
+      (s) => {
+        r.value = s;
       }
-      this.player.src = this.tts.src[this.ttsIndex];
-      this.playing = true;
-      this.player.play().catch(() => {
-        this.playing = false;
-      });
-    },
-    stop() {
-      this.playing = false;
-      this.ttsIndex = 0;
-      this.player.pause();
-    },
-    clear() {
-      this.$emit("clear");
-      this.input = "";
-      textarea.init(this.$refs.input, config.INPUT_MAX_LENGTH);
-      this.$refs.input.focus();
-    },
-    translate() {
-      if (!this.input) {
-        this.clear();
+    );
+    function i() {
+      if (l.value) {
+        n();
         return;
       }
-      this.$emit("translate", this.input);
+      t();
     }
+    return (s, a) => (P(), V("button", {
+      class: "btn btn-xs btn-ghost btn-circle",
+      onClick: fn(i, ["prevent"])
+    }, [
+      I("label", ll, [
+        Xe(I("input", {
+          "onUpdate:modelValue": a[0] || (a[0] = (u) => r.value = u),
+          type: "checkbox"
+        }, null, 512), [
+          [vn, r.value]
+        ]),
+        sl,
+        rl
+      ])
+    ]));
   }
-};
-const _hoisted_1$7 = { class: "relative indicator w-full" };
-const _hoisted_2$7 = {
-  key: 0,
-  class: "absolute top-0 left-0 w-4/5 ml-2 text-sm truncate"
-};
-const _hoisted_3$7 = /* @__PURE__ */ createElementVNode("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-4 w-4 inline",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor"
-}, [
-  /* @__PURE__ */ createElementVNode("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "2",
-    d: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
-  })
-], -1);
-const _hoisted_4$7 = [
-  _hoisted_3$7
-];
-const _hoisted_5$6 = /* @__PURE__ */ createElementVNode("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-4 w-4 inline",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor"
-}, [
-  /* @__PURE__ */ createElementVNode("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "2",
-    d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-  }),
-  /* @__PURE__ */ createElementVNode("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "2",
-    d: "M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
-  })
-], -1);
-const _hoisted_6$4 = [
-  _hoisted_5$6
-];
-const _hoisted_7$2 = {
-  key: 2,
-  class: "ml-1"
-};
-const _hoisted_8$1 = { key: 0 };
-const _hoisted_9$1 = /* @__PURE__ */ createElementVNode("svg", {
+}, al = {}, ul = /* @__PURE__ */ I("svg", {
   xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5",
   fill: "none",
   viewBox: "0 0 24 24",
-  stroke: "currentColor"
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-5 h-5"
 }, [
-  /* @__PURE__ */ createElementVNode("path", {
+  /* @__PURE__ */ I("path", {
     "stroke-linecap": "round",
     "stroke-linejoin": "round",
-    "stroke-width": "2",
-    d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+    d: "m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
   })
-], -1);
-const _hoisted_10$1 = [
-  _hoisted_9$1
+], -1), cl = [
+  ul
 ];
-const _hoisted_11$1 = { class: "cursor-pointer label justify-start" };
-const _hoisted_12$1 = /* @__PURE__ */ createElementVNode("span", { class: "ml-1 label-text text-xs" }, "Auto translate", -1);
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", null, [
-    createElementVNode("div", _hoisted_1$7, [
-      $props.data ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
-        !$data.playing ? (openBlock(), createElementBlock("span", {
-          key: 0,
-          class: "pointer",
-          onClick: _cache[0] || (_cache[0] = (...args) => $options.play && $options.play(...args))
-        }, _hoisted_4$7)) : createCommentVNode("", true),
-        $data.playing ? (openBlock(), createElementBlock("span", {
-          key: 1,
-          class: "pointer",
-          onClick: _cache[1] || (_cache[1] = (...args) => $options.stop && $options.stop(...args))
-        }, _hoisted_6$4)) : createCommentVNode("", true),
-        $props.data.ddictSrc ? (openBlock(), createElementBlock("span", _hoisted_7$2, toDisplayString($props.data.ddictSrc), 1)) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList($props.data.sentences, (sentence, index) => {
-          return openBlock(), createElementBlock("span", {
-            key: `${sentence.src_translit}-${index}`,
-            class: "italic"
-          }, [
-            sentence.src_translit ? (openBlock(), createElementBlock("span", _hoisted_8$1, " \u2015 " + toDisplayString(sentence.src_translit), 1)) : createCommentVNode("", true)
-          ]);
-        }), 128))
-      ])) : createCommentVNode("", true),
-      $data.input != "" ? (openBlock(), createElementBlock("div", {
-        key: 1,
-        onClick: _cache[2] || (_cache[2] = (...args) => $options.clear && $options.clear(...args)),
-        class: "indicator-item m-3"
-      }, _hoisted_10$1)) : createCommentVNode("", true),
-      withDirectives(createElementVNode("textarea", {
-        id: "input",
-        ref: "input",
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $data.input = $event),
-        class: "text-lg textarea textarea-bordered w-full pt-5",
-        style: normalizeStyle({ "text-align": $options.rtl ? "right" : "left" }),
-        autofocus: ""
-      }, null, 4), [
-        [
-          vModelText,
-          $data.input,
-          void 0,
-          { trim: true }
-        ]
-      ])
-    ]),
-    createElementVNode("label", _hoisted_11$1, [
-      withDirectives(createElementVNode("input", {
-        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $data.auto_translate = $event),
-        type: "checkbox",
-        class: "toggle toggle-xs"
-      }, null, 512), [
-        [vModelCheckbox, $data.auto_translate]
-      ]),
-      _hoisted_12$1
-    ])
-  ]);
+function dl(e, o) {
+  return P(), V("button", {
+    class: "btn btn-xs btn-ghost btn-circle p-0",
+    onClick: o[0] || (o[0] = (...t) => e.onClick && e.onClick(...t))
+  }, cl);
 }
-var Input = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6]]);
-const _sfc_main$6 = {
+const fl = /* @__PURE__ */ ze(al, [["render", dl]]), vl = { class: "flex flex-row rounded-t-lg bg-white border border-b-0 px-1 pr-1 pt-1 gap-1 items-center" }, pl = { class: "text-sm italic" }, hl = { key: 0 }, ml = /* @__PURE__ */ I("div", { class: "flex-grow" }, " ", -1), on = {
+  __name: "TranslationBtnGroup",
   props: {
-    data: {
-      type: Object,
-      default: null
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    src: {
+      type: String,
+      default: ""
+    },
+    srcLabel: {
+      type: String,
+      default: ""
     },
     tts: {
-      type: Object,
-      default: null
+      type: String,
+      default: ""
+    },
+    phonetic: {
+      type: String,
+      default: ""
+    },
+    isClearBtn: {
+      type: Boolean,
+      default: !1
     }
   },
-  data() {
-    return {
-      player: new Audio(),
-      playing: false,
-      copied: false,
-      ttsIndex: 0
+  emits: ["clear"],
+  setup(e, { emit: o }) {
+    const t = e, n = o;
+    return (l, r) => (P(), V("div", vl, [
+      t.tts ? (P(), xe(il, {
+        key: 0,
+        url: t.tts
+      }, null, 8, ["url"])) : ue("", !0),
+      I("div", pl, [
+        pn(ne(e.srcLabel) + " ", 1),
+        e.phonetic ? (P(), V("span", hl, "― " + ne(t.phonetic), 1)) : ue("", !0)
+      ]),
+      ml,
+      t.loading ? (P(), xe(nl, { key: 1 })) : ue("", !0),
+      t.src && t.isClearBtn ? (P(), xe(fl, {
+        key: 2,
+        onClick: r[0] || (r[0] = (i) => n("clear"))
+      })) : ue("", !0)
+    ]));
+  }
+}, ye = lt("translation", () => {
+  const e = S(null), o = S(null), t = S({
+    src: null,
+    target: null
+  }), n = S(null), l = S([]), r = S([]), i = S([]), s = S({
+    src: null,
+    target: null
+  }), a = st(), u = _(() => a.getLabel(e.value)), v = _(() => a.getLabel(o.value));
+  function c(m) {
+    e.value = m.src, o.value = m.target, t.value = m.phonetic, n.value = m.result, l.value = m.dictionary, r.value = m.definitions, i.value = m.examples, s.value = m.tts;
+  }
+  function b() {
+    e.value = null, o.value = null, t.value = {
+      src: null,
+      target: null
+    }, n.value = null, l.value = [], r.value = [], i.value = [], s.value = {
+      src: null,
+      target: null
     };
-  },
-  computed: {
-    rtl() {
-      if (!this.data)
-        return false;
-      return helper.isRTL(this.data.target);
-    }
-  },
-  watch: {
-    data(data) {
-      if (!data) {
-        this.$refs.input.value = "";
-        textarea.init(this.$refs.input);
-        return;
+  }
+  return {
+    src: e,
+    srcLabel: u,
+    target: o,
+    targetLabel: v,
+    phonetic: t,
+    result: n,
+    dictionary: l,
+    definitions: r,
+    examples: i,
+    tts: s,
+    init: c,
+    reset: b
+  };
+});
+function gl(e) {
+  return Ct() ? (Ye(e), !0) : !1;
+}
+function Ae(e) {
+  return typeof e == "function" ? e() : R(e);
+}
+const bl = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const wt = () => {
+};
+function yl(e, o) {
+  function t(...n) {
+    return new Promise((l, r) => {
+      Promise.resolve(e(() => o.apply(this, n), { fn: o, thisArg: this, args: n })).then(l).catch(r);
+    });
+  }
+  return t;
+}
+function _l(e, o = {}) {
+  let t, n, l = wt;
+  const r = (s) => {
+    clearTimeout(s), l(), l = wt;
+  };
+  return (s) => {
+    const a = Ae(e), u = Ae(o.maxWait);
+    return t && r(t), a <= 0 || u !== void 0 && u <= 0 ? (n && (r(n), n = null), Promise.resolve(s())) : new Promise((v, c) => {
+      l = o.rejectOnCancel ? c : v, u && !n && (n = setTimeout(() => {
+        t && r(t), n = null, v(s());
+      }, u)), t = setTimeout(() => {
+        n && r(n), n = null, v(s());
+      }, a);
+    });
+  };
+}
+function wl(e, o = 200, t = {}) {
+  return yl(
+    _l(o, t),
+    e
+  );
+}
+function xt(e) {
+  var o;
+  const t = Ae(e);
+  return (o = t == null ? void 0 : t.$el) != null ? o : t;
+}
+const xl = bl ? window : void 0;
+function Sl() {
+  const e = S(!1), o = $t();
+  return o && de(() => {
+    e.value = !0;
+  }, o), e;
+}
+function Ol(e) {
+  const o = Sl();
+  return _(() => (o.value, !!e()));
+}
+function El(e, o, t = {}) {
+  const { window: n = xl, ...l } = t;
+  let r;
+  const i = Ol(() => n && "ResizeObserver" in n), s = () => {
+    r && (r.disconnect(), r = void 0);
+  }, a = _(() => Array.isArray(e) ? e.map((c) => xt(c)) : [xt(e)]), u = j(
+    a,
+    (c) => {
+      if (s(), i.value && n) {
+        r = new ResizeObserver(o);
+        for (const b of c)
+          b && r.observe(b, l);
       }
-      this.$refs.input.value = data.sentences.map((sentence) => sentence.trans).join("");
-      textarea.autoResize(this.$refs.input);
     },
-    tts() {
-      this.ttsIndex = 0;
+    { immediate: !0, flush: "post" }
+  ), v = () => {
+    s(), u();
+  };
+  return gl(v), {
+    isSupported: i,
+    stop: v
+  };
+}
+function ln(e) {
+  var o;
+  const t = S(e == null ? void 0 : e.element), n = S(e == null ? void 0 : e.input), l = (o = e == null ? void 0 : e.styleProp) != null ? o : "height", r = S(1);
+  function i() {
+    var s;
+    if (!t.value)
+      return;
+    let a = "";
+    t.value.style[l] = "1px", r.value = (s = t.value) == null ? void 0 : s.scrollHeight, e != null && e.styleTarget ? Ae(e.styleTarget).style[l] = `${r.value}px` : a = `${r.value}px`, t.value.style[l] = a;
+  }
+  return j([n, t], () => Q(i), { immediate: !0 }), j(r, () => {
+    var s;
+    return (s = e == null ? void 0 : e.onResize) == null ? void 0 : s.call(e);
+  }), El(t, () => i()), e != null && e.watch && j(e.watch, i, { immediate: !0, deep: !0 }), {
+    textarea: t,
+    input: n,
+    triggerResize: i
+  };
+}
+const Il = {
+  __name: "Input",
+  props: {
+    text: {
+      type: String,
+      default: ""
     }
   },
-  mounted() {
-    textarea.init(this.$refs.input);
-    textarea.autoResize(this.$refs.input);
-    this.player.addEventListener("ended", () => {
-      this.ttsIndex++;
-      if (this.ttsIndex >= this.tts.target.length) {
-        this.stop();
-        return;
-      }
-      this.play();
-    });
-  },
-  methods: {
-    play() {
-      if (!this.tts.target) {
+  emits: ["change", "clear"],
+  setup(e, { emit: o }) {
+    const t = ye(), l = S(e.text), r = _(() => t.src), i = _(() => t.srcLabel), s = _(() => {
+      var w;
+      return (w = t.phonetic) == null ? void 0 : w.src;
+    }), a = _(() => {
+      var w;
+      return (w = t.tts) == null ? void 0 : w.src;
+    }), { textarea: u } = ln({ input: l, styleProp: "minHeight" }), v = o, c = wl(() => {
+      v("change", l.value);
+    }, Zo.INPUT_DEBOUNCE);
+    function b() {
+      if (!l.value) {
+        m();
         return;
       }
-      this.player.src = this.tts.target[this.ttsIndex];
-      this.playing = true;
-      this.player.play().catch(() => {
-        this.playing = false;
-      });
-    },
-    stop() {
-      this.playing = false;
-      this.ttsIndex = 0;
-      this.player.pause();
-    },
-    copy() {
-      const val = this.$refs.input.value;
-      if (!val)
-        return;
-      navigator.clipboard.writeText(val);
-      this.copied = true;
-      setTimeout(() => {
-        this.copied = false;
-      }, 500);
+      c();
+    }
+    function m() {
+      v("clear"), l.value = "", u.value.focus();
     }
+    return (w, $) => (P(), V(X, null, [
+      H(on, {
+        src: r.value,
+        srcLabel: i.value,
+        tts: a.value,
+        phonetic: s.value,
+        isClearBtn: !0,
+        onClear: m
+      }, null, 8, ["src", "srcLabel", "tts", "phonetic"]),
+      Xe(I("textarea", {
+        ref_key: "textarea",
+        ref: u,
+        "onUpdate:modelValue": $[0] || ($[0] = (M) => l.value = M),
+        class: "w-full border border-t-0 rounded-b-lg outline-none outline-0 p-3 pt-0",
+        autofocus: "",
+        rows: "2",
+        onInput: b
+      }, null, 544), [
+        [
+          Tt,
+          l.value,
+          void 0,
+          { trim: !0 }
+        ]
+      ])
+    ], 64));
   }
-};
-const _hoisted_1$6 = { class: "relative indicator w-full" };
-const _hoisted_2$6 = {
-  key: 0,
-  class: "absolute top-0 left-0 w-2/3 ml-2 text-sm truncate"
-};
-const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-4 w-4 inline",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor"
-}, [
-  /* @__PURE__ */ createElementVNode("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "2",
-    d: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
-  })
-], -1);
-const _hoisted_4$6 = [
-  _hoisted_3$6
-];
-const _hoisted_5$5 = /* @__PURE__ */ createElementVNode("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-4 w-4 inline",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor"
-}, [
-  /* @__PURE__ */ createElementVNode("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "2",
-    d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-  }),
-  /* @__PURE__ */ createElementVNode("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "2",
-    d: "M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
-  })
-], -1);
-const _hoisted_6$3 = [
-  _hoisted_5$5
-];
-const _hoisted_7$1 = {
-  key: 2,
-  class: "ml-1"
-};
-const _hoisted_8 = {
-  key: 0,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor"
-};
-const _hoisted_9 = /* @__PURE__ */ createElementVNode("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  "stroke-width": "2",
-  d: "M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
-}, null, -1);
-const _hoisted_10 = [
-  _hoisted_9
-];
-const _hoisted_11 = {
-  key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5",
-  viewBox: "0 0 20 20",
-  fill: "currentColor"
-};
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("path", { d: "M8 2a1 1 0 000 2h2a1 1 0 100-2H8z" }, null, -1);
-const _hoisted_13 = /* @__PURE__ */ createElementVNode("path", { d: "M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z" }, null, -1);
-const _hoisted_14 = [
-  _hoisted_12,
-  _hoisted_13
-];
-const _hoisted_15 = {
-  key: 0,
-  class: "label justify-end"
-};
-const _hoisted_16 = /* @__PURE__ */ createElementVNode("span", { class: "text-xs" }, "Powered by Google Translate.", -1);
-const _hoisted_17 = [
-  _hoisted_16
-];
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(Fragment, null, [
-    createElementVNode("div", _hoisted_1$6, [
-      $props.data ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
-        !$data.playing ? (openBlock(), createElementBlock("span", {
-          key: 0,
-          class: "pointer",
-          onClick: _cache[0] || (_cache[0] = (...args) => $options.play && $options.play(...args))
-        }, _hoisted_4$6)) : createCommentVNode("", true),
-        $data.playing ? (openBlock(), createElementBlock("span", {
-          key: 1,
-          class: "pointer",
-          onClick: _cache[1] || (_cache[1] = (...args) => $options.stop && $options.stop(...args))
-        }, _hoisted_6$3)) : createCommentVNode("", true),
-        $props.data.ddictTarget ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString($props.data.ddictTarget), 1)) : createCommentVNode("", true)
-      ])) : createCommentVNode("", true),
-      $props.data ? (openBlock(), createElementBlock("div", {
-        key: 1,
-        onClick: _cache[2] || (_cache[2] = (...args) => $options.copy && $options.copy(...args)),
-        class: "indicator-item m-3"
-      }, [
-        !$data.copied ? (openBlock(), createElementBlock("svg", _hoisted_8, _hoisted_10)) : createCommentVNode("", true),
-        $data.copied ? (openBlock(), createElementBlock("svg", _hoisted_11, _hoisted_14)) : createCommentVNode("", true)
-      ])) : createCommentVNode("", true),
-      createElementVNode("textarea", {
-        ref: "input",
-        class: "text-lg textarea textarea-bordered w-full pt-5",
-        style: normalizeStyle({ "text-align": $options.rtl ? "right" : "left" }),
+}, $l = /* @__PURE__ */ ze(Il, [["__scopeId", "data-v-601b7a18"]]), sn = lt("loader", () => ({ loading: S(!1) })), Cl = {
+  __name: "Result",
+  setup(e) {
+    const o = ye(), t = _(() => o.result), n = _(() => o.target), l = _(() => o.targetLabel), r = _(() => {
+      var v;
+      return (v = o.phonetic) == null ? void 0 : v.target;
+    }), i = _(() => {
+      var v;
+      return (v = o.tts) == null ? void 0 : v.target;
+    }), s = sn(), { textarea: a, input: u } = ln({ input: t, styleProp: "minHeight" });
+    return (v, c) => (P(), V(X, null, [
+      H(on, {
+        loading: R(s).loading,
+        src: n.value,
+        srcLabel: l.value,
+        tts: i.value,
+        phonetic: r.value
+      }, null, 8, ["loading", "src", "srcLabel", "tts", "phonetic"]),
+      Xe(I("textarea", {
+        ref_key: "textarea",
+        ref: a,
+        "onUpdate:modelValue": c[0] || (c[0] = (b) => be(u) ? u.value = b : null),
+        class: "w-full border border-t-0 rounded-b-lg outline-none outline-0 p-3 pt-0",
         readonly: "",
+        rows: "2",
         spellcheck: "false"
-      }, null, 4)
-    ]),
-    $props.data ? (openBlock(), createElementBlock("p", _hoisted_15, _hoisted_17)) : createCommentVNode("", true)
-  ], 64);
-}
-var Result = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5]]);
-const _sfc_main$5 = {
-  props: {
-    data: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      name: "Definitions"
-    };
+      }, null, 512), [
+        [Tt, R(u)]
+      ])
+    ], 64));
   }
-};
-const _hoisted_1$5 = { key: 0 };
-const _hoisted_2$5 = { class: "card-body p-4" };
-const _hoisted_3$5 = { class: "card-title font-bold" };
-const _hoisted_4$5 = { class: "list-decimal" };
-const _hoisted_5$4 = { class: "capitalize font-bold" };
-const _hoisted_6$2 = /* @__PURE__ */ createElementVNode("br", null, null, -1);
-const _hoisted_7 = {
-  key: 0,
-  class: "italic"
-};
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.data.definitions ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
-    createElementVNode("div", _hoisted_2$5, [
-      createElementVNode("h2", _hoisted_3$5, toDisplayString($data.name), 1),
-      createElementVNode("ul", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($props.data.definitions, (dict, index) => {
-          return openBlock(), createElementBlock("li", {
-            key: `${dict.pos}-${index}`,
-            class: "mb-2"
+}, Tl = /* @__PURE__ */ ze(Cl, [["__scopeId", "data-v-6c3a2370"]]), Pl = { class: "card border bg-white rounded-lg" }, Rl = { class: "card-body p-4" }, kl = /* @__PURE__ */ I("h2", { class: "card-title" }, "Translations", -1), Nl = { class: "capitalize font-bold" }, Vl = { class: "list-none list-inside" }, Dl = ["onClick"], Ll = { class: "italic" }, Ml = {
+  __name: "Dictionary",
+  setup(e) {
+    const o = ye(), t = _(() => o.dictionary);
+    return (n, l) => (P(), V("div", Pl, [
+      I("div", Rl, [
+        kl,
+        I("ul", null, [
+          (P(!0), V(X, null, ge(t.value, (r, i) => (P(), V("li", {
+            key: `${r.pos}-${i}`,
+            class: "mb-3"
           }, [
-            createElementVNode("ul", _hoisted_4$5, [
-              createElementVNode("h5", _hoisted_5$4, toDisplayString(dict.pos), 1),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(dict.entry, (entry, index2) => {
-                return openBlock(), createElementBlock("li", {
-                  key: `${entry.definition_id}-${index2}`,
-                  class: "ml-5 mb-2"
-                }, [
-                  createElementVNode("span", null, toDisplayString(entry.gloss), 1),
-                  _hoisted_6$2,
-                  entry.example ? (openBlock(), createElementBlock("small", _hoisted_7, '"' + toDisplayString(entry.example) + '"', 1)) : createCommentVNode("", true)
-                ]);
-              }), 128))
+            I("h5", Nl, ne(r.pos), 1),
+            I("ul", Vl, [
+              (P(!0), V(X, null, ge(r.items, (s, a) => (P(), V("li", {
+                key: `${s.word}-${a}`
+              }, [
+                I("span", {
+                  class: "badge badge-neutral text-white cursor-pointer",
+                  onClick: (u) => n.translate(s.word)
+                }, ne(s.word), 9, Dl),
+                I("small", Ll, " ― " + ne(s.reverse_translation.join(", ")), 1)
+              ]))), 128))
             ])
-          ]);
-        }), 128))
+          ]))), 128))
+        ])
       ])
-    ])
-  ])) : createCommentVNode("", true);
-}
-var DictSrc = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$4]]);
-const _sfc_main$4 = {
-  props: {
-    data: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      name: "Translations"
-    };
-  },
-  methods: {
-    translate(word) {
-      this.$emit("translate", word);
-    }
+    ]));
   }
-};
-const _hoisted_1$4 = { key: 0 };
-const _hoisted_2$4 = { class: "card-body p-4" };
-const _hoisted_3$4 = { class: "card-title" };
-const _hoisted_4$4 = { class: "capitalize font-bold" };
-const _hoisted_5$3 = ["onClick"];
-const _hoisted_6$1 = {
+}, Al = { class: "card border bg-white rounded-lg" }, jl = { class: "card-body p-4" }, Fl = /* @__PURE__ */ I("h2", { class: "card-title font-bold" }, "Definitions", -1), zl = { class: "capitalize font-bold mb-0" }, Bl = { class: "list-decimal list-outside ml-5" }, Ul = /* @__PURE__ */ I("br", null, null, -1), Hl = {
   key: 0,
   class: "italic"
-};
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.data.dict ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
-    createElementVNode("div", _hoisted_2$4, [
-      createElementVNode("h2", _hoisted_3$4, toDisplayString($data.name), 1),
-      createElementVNode("ul", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($props.data.dict, (dict, index) => {
-          return openBlock(), createElementBlock("li", {
-            key: `${dict.pos}-${index}`,
-            class: "mb-2"
+}, Wl = {
+  __name: "Definition",
+  setup(e) {
+    const o = ye(), t = _(() => o.definitions);
+    return (n, l) => (P(), V("div", Al, [
+      I("div", jl, [
+        Fl,
+        I("ul", null, [
+          (P(!0), V(X, null, ge(t.value, (r, i) => (P(), V("li", {
+            key: `${r.pos}-${i}`,
+            class: "mb-3"
           }, [
-            createElementVNode("h5", _hoisted_4$4, toDisplayString(dict.pos), 1),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(dict.entry, (entry, index2) => {
-              return openBlock(), createElementBlock("div", {
-                key: `${entry.word}-${index2}`
+            I("h5", zl, ne(r.pos), 1),
+            I("ul", Bl, [
+              (P(!0), V(X, null, ge(r.items, (s, a) => (P(), V("li", {
+                key: `${s.gloss}-${a}`,
+                class: "mb-1"
               }, [
-                createElementVNode("span", {
-                  class: "badge bg-neutral",
-                  onClick: ($event) => $options.translate(entry.word)
-                }, toDisplayString(entry.word), 9, _hoisted_5$3),
-                entry.reverse_translation ? (openBlock(), createElementBlock("small", _hoisted_6$1, " \u2015 " + toDisplayString(entry.reverse_translation.join(", ")), 1)) : createCommentVNode("", true)
-              ]);
-            }), 128))
-          ]);
-        }), 128))
-      ])
-    ])
-  ])) : createCommentVNode("", true);
-}
-var DictTarget = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$3]]);
-const _sfc_main$3 = {
-  props: {
-    data: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      name: "Examples"
-    };
-  }
-};
-const _hoisted_1$3 = { key: 0 };
-const _hoisted_2$3 = { class: "card-body p-4" };
-const _hoisted_3$3 = { class: "card-title font-bold" };
-const _hoisted_4$3 = { class: "list-disc" };
-const _hoisted_5$2 = ["innerHTML"];
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.data.examples && $props.data.examples.example ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
-    createElementVNode("div", _hoisted_2$3, [
-      createElementVNode("h2", _hoisted_3$3, toDisplayString($data.name), 1),
-      createElementVNode("ul", _hoisted_4$3, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($props.data.examples.example, (example, index) => {
-          return openBlock(), createElementBlock("li", {
-            key: `${example.definition_id}-${index}`,
-            class: "ml-4 mb-2",
-            innerHTML: example.text
-          }, null, 8, _hoisted_5$2);
-        }), 128))
+                I("span", null, ne(s.gloss), 1),
+                Ul,
+                s.example ? (P(), V("small", Hl, '"' + ne(s.example) + '"', 1)) : ue("", !0)
+              ]))), 128))
+            ])
+          ]))), 128))
+        ])
       ])
-    ])
-  ])) : createCommentVNode("", true);
-}
-var Example = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
-const _sfc_main$2 = {
-  props: {
-    data: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      name: "Synonyms"
-    };
+    ]));
   }
-};
-const _hoisted_1$2 = { key: 0 };
-const _hoisted_2$2 = { class: "card-body p-4" };
-const _hoisted_3$2 = { class: "card-title font-bold" };
-const _hoisted_4$2 = { class: "capitalize font-bold" };
-const _hoisted_5$1 = ["onClick"];
-const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", null, null, -1);
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.data.synsets ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
-    createElementVNode("div", _hoisted_2$2, [
-      createElementVNode("h2", _hoisted_3$2, toDisplayString($data.name), 1),
-      createElementVNode("ul", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($props.data.synsets, (dict, index) => {
-          return openBlock(), createElementBlock("li", {
-            key: `${dict.pos}-${index}`,
-            class: "mb-2"
-          }, [
-            createElementVNode("h5", _hoisted_4$2, toDisplayString(dict.pos), 1),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(dict.entry, (entry, index2) => {
-              return openBlock(), createElementBlock("div", {
-                key: `${entry.definition_id}-${index2}`
-              }, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(entry.synonym, (synonym, index3) => {
-                  return openBlock(), createElementBlock("span", {
-                    key: `${synonym}-${index3}`
-                  }, [
-                    createElementVNode("span", {
-                      class: "badge bg-neutral mr-1",
-                      onClick: ($event) => _ctx.$emit("translate", synonym)
-                    }, toDisplayString(synonym), 9, _hoisted_5$1),
-                    _hoisted_6
-                  ]);
-                }), 128))
-              ]);
-            }), 128))
-          ]);
-        }), 128))
+}, Gl = { class: "card border bg-white rounded-lg" }, ql = { class: "card-body p-4" }, Jl = /* @__PURE__ */ I("h2", { class: "card-title font-bold" }, "Examples", -1), Kl = { class: "list-disc list-outside ml-5" }, Yl = ["innerHTML"], Ql = {
+  __name: "Example",
+  setup(e) {
+    const o = ye(), t = _(() => o.examples);
+    return (n, l) => (P(), V("div", Gl, [
+      I("div", ql, [
+        Jl,
+        I("ul", Kl, [
+          (P(!0), V(X, null, ge(t.value, (r, i) => (P(), V("li", {
+            key: `${r.definition_id}-${i}`,
+            innerHTML: r
+          }, null, 8, Yl))), 128))
+        ])
       ])
-    ])
-  ])) : createCommentVNode("", true);
-}
-var Syno = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
-const _sfc_main$1 = {
-  props: {
-    data: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      name: "See also"
-    };
+    ]));
   }
-};
-const _hoisted_1$1 = { key: 0 };
-const _hoisted_2$1 = { class: "card-body p-4" };
-const _hoisted_3$1 = { class: "card-title font-bold" };
-const _hoisted_4$1 = ["onClick"];
-const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", null, null, -1);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.data.related_words && $props.data.related_words.word ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
-    createElementVNode("div", _hoisted_2$1, [
-      createElementVNode("h2", _hoisted_3$1, toDisplayString($data.name), 1),
-      (openBlock(true), createElementBlock(Fragment, null, renderList($props.data.related_words.word, (word, index) => {
-        return openBlock(), createElementBlock("span", {
-          key: `${word}-${index}`
-        }, [
-          createElementVNode("span", {
-            class: "badge bg-neutral",
-            onClick: ($event) => _ctx.$emit("translate", word)
-          }, toDisplayString(word), 9, _hoisted_4$1),
-          _hoisted_5
-        ]);
-      }), 128))
-    ])
-  ])) : createCommentVNode("", true);
-}
-var More = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
-const _hoisted_1 = { class: "p-2" };
-const _hoisted_2 = { class: "mt-2 grid grid-cols-1 md:grid-cols-2 gap-3" };
-const _hoisted_3 = { class: "w-full" };
-const _hoisted_4 = { class: "w-full" };
-const __default__ = {
-  name: "Popup",
+}, Zl = { class: "p-2 bg-neutral-100" }, Xl = { class: "mt-2 grid grid-cols-1 md:grid-cols-2 gap-3" }, es = { class: "w-full" }, ts = { class: "w-full" }, ns = {
+  key: 0,
+  class: "mt-3 grid grid-cols-1 md:grid-cols-3 gap-3"
+}, ss = {
+  __name: "Popup",
   props: {
-    export_data: {
+    opt: {
       type: Object,
       default: null
     },
-    export_select: {
+    languages: {
       type: Object,
       default: null
     },
-    export_tts: {
+    translation: {
       type: Object,
       default: null
     }
   },
-  data() {
-    return {
-      data: null,
-      select: null,
-      tts: null,
-      replace: ""
-    };
-  },
-  computed: {
-    rtl() {
-      if (!this.data)
-        return false;
-      return helper.isRTL(this.data.target);
+  emits: ["opt", "translate"],
+  setup(e, { emit: o }) {
+    var b;
+    const t = Go(), n = ye(t), l = st(t), r = sn(t), i = e, s = o, a = S((b = i.translation) == null ? void 0 : b.text);
+    j(
+      () => i.translation,
+      (m) => {
+        r.loading = !1, n.init(m);
+      },
+      { immediate: !0 }
+    ), j([() => i.opt, () => i.languages], ([m, w]) => {
+      l.init(m, w);
+    }), j([() => l.src, () => l.target], ([m, w]) => {
+      s("opt", { src: m, target: w }), a.value && c();
+    }), de(() => {
+      l.init(i.opt, i.languages);
+    });
+    function u() {
+      a.value = "", n.reset();
     }
-  },
-  watch: {
-    export_data(data) {
-      this.data = data;
-      if (data.text && this.replace != data.text)
-        this.replace = data.text;
-    },
-    export_select(select) {
-      this.select = select;
-    },
-    export_tts(tts) {
-      this.tts = tts;
+    function v(m) {
+      m && (a.value = m, c());
     }
-  },
-  methods: {
-    clear() {
-      this.data = null;
-      this.$emit("clear");
-    },
-    translateReplace(input) {
-      return this.translate(input, true);
-    },
-    translateSwap(input) {
-      return this.translate(input, true, true);
-    },
-    translate(input, is_replace, is_swap) {
-      if (is_swap) {
-        if (!this.data.src || this.data.src === "auto" || !this.data.target) {
-          return;
-        }
-        const select = JSON.parse(JSON.stringify(this.select));
-        select.src = this.data.target;
-        select.target = this.data.src;
-        this.$emit("srctarget", select);
-      }
-      window.scrollTo(0, 0);
-      this.clear();
-      if (is_replace) {
-        this.replace = input;
-      }
-      this.$emit("translate", input);
-    },
-    onSelect(select) {
-      this.$emit("srctarget", select);
-      if (this.data) {
-        const input = this.data.sentences.map((sentence) => sentence.orig).join("");
-        this.$emit("translate", input);
-      }
+    function c() {
+      r.loading = !0, s("translate", {
+        src: l.src,
+        target: l.target,
+        text: a.value
+      });
     }
-  }
-};
-const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(Selects, {
-          select: _ctx.select,
-          onSelect: _ctx.onSelect
-        }, null, 8, ["select", "onSelect"]),
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("div", _hoisted_3, [
-            createVNode(Input, {
-              data: _ctx.data,
-              tts: _ctx.tts,
-              replace: _ctx.replace,
-              onTranslate: _ctx.translate,
-              onClear: _ctx.clear
-            }, null, 8, ["data", "tts", "replace", "onTranslate", "onClear"])
-          ]),
-          createElementVNode("div", _hoisted_4, [
-            createVNode(Result, {
-              data: _ctx.data,
-              tts: _ctx.tts
-            }, null, 8, ["data", "tts"])
-          ])
+    return (m, w) => (P(), V("div", Zl, [
+      H(Qo),
+      I("div", Xl, [
+        I("div", es, [
+          H($l, {
+            text: a.value,
+            onChange: v,
+            onClear: u
+          }, null, 8, ["text"])
         ]),
-        _ctx.data ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "mt-3 grid grid-cols-1 md:grid-cols-3 gap-3",
-          style: normalizeStyle({ "text-align": _ctx.rtl ? "right" : "left" })
-        }, [
-          createVNode(DictSrc, {
-            class: "card border",
-            data: _ctx.data
-          }, null, 8, ["data"]),
-          createVNode(DictTarget, {
-            class: "card border",
-            data: _ctx.data,
-            onTranslate: _ctx.translateSwap
-          }, null, 8, ["data", "onTranslate"]),
-          createVNode(Syno, {
-            class: "card border",
-            data: _ctx.data,
-            onTranslate: _ctx.translateReplace
-          }, null, 8, ["data", "onTranslate"]),
-          createVNode(More, {
-            class: "card border",
-            data: _ctx.data,
-            onTranslate: _ctx.translateReplace
-          }, null, 8, ["data", "onTranslate"])
-        ], 4)) : createCommentVNode("", true),
-        _ctx.data ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: "mt-5 grid grid-cols-1 gap-6",
-          style: normalizeStyle({ "text-align": _ctx.rtl ? "right" : "left" })
-        }, [
-          createVNode(Example, {
-            class: "card border",
-            data: _ctx.data
-          }, null, 8, ["data"])
-        ], 4)) : createCommentVNode("", true)
-      ]);
-    };
+        I("div", ts, [
+          H(Tl)
+        ])
+      ]),
+      i.translation ? (P(), V("div", ns, [
+        H(Ml),
+        H(Wl),
+        H(Ql)
+      ])) : ue("", !0)
+    ]));
   }
-});
-export { _sfc_main as default };
+};
+export {
+  ss as default
+};