@ironsource/shared-ui 2.0.0-rc.3 → 2.0.0-rc.5

package/components/dropdown/common/Dropdown.common.js

@@ -0,0 +1,320 @@
+import { useToggle as Oe } from "../../../composables/useToggle.js";
+import { ref as u, computed as r, watch as b, useSlots as Ae, nextTick as D, toRaw as x, provide as Pe, onMounted as Se } from "vue";
+import { isObjectInArray as z } from "../../../utils/array.js";
+import { objectsEqual as Te } from "../../../utils/object.js";
+import { useClamp as we, useVirtualList as xe, onClickOutside as J } from "@vueuse/core";
+import { Mode as m, Type as k, DropdownContext as De } from "./DropdownContext.js";
+import { pxToRem as Ie } from "../../../utils/style.js";
+const Ve = (l, O, A) => {
+  const Q = (e, t) => l.multi ? z(e, t) : x(e) === t;
+  let E;
+  ((e) => {
+    e[e.None = 0] = "None", e[e.Next = 1] = "Next", e[e.Previous = -1] = "Previous", e[e.NextPage = 10] = "NextPage", e[e.PrevPage = -10] = "PrevPage";
+  })(E || (E = {}));
+  const a = u(
+    l.selected
+  ), n = r({
+    get() {
+      return a.value;
+    },
+    set(e) {
+      O("update:selected", e);
+    }
+  });
+  b(
+    () => l.selected,
+    () => {
+      a.value = l.selected;
+    }
+  );
+  const W = Ae(), P = u(null), d = u(null), C = u(null), I = u(null), V = u(null), S = u(null), Y = u(), p = u(null), H = u(null), L = u(null), Z = 8, F = r(() => S.value ? S.value.getBoundingClientRect().height + Z + l.distance : 0), c = u([]), T = u(-1), w = u(""), M = u([]), U = () => S.value?.focus(), [v, ee, le] = Oe({
+    disabled: l.disabled,
+    initialValue: l.defaultOpen
+  });
+  b(
+    () => l.disabled,
+    (e) => {
+      e !== void 0 && le(e);
+    }
+  );
+  const B = (e) => {
+    te.value = ee(e);
+  }, te = r({
+    get() {
+      return l.isOpen;
+    },
+    set(e) {
+      O("update:isOpen", e);
+    }
+  }), ae = r(() => s.value.length - 1), o = we(0, 0, ae), ue = r(() => n.value ? l.displayValue(n.value) : ""), ne = (e) => {
+    if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
+      return l.placeholder;
+    const t = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
+    return e.value.length == 1 && l.displayValue ? l.displayValue(e.value[0]) : t;
+  }, ie = r(() => {
+    if (!l.multi)
+      return n.value ? l.displayValue(n.value) : l.placeholder;
+    if (Array.isArray(a.value))
+      return ne(a);
+  }), q = r(() => {
+    if (Array.isArray(a.value))
+      return a.value.length === s.value.length;
+  }), re = r(() => !l.multi || !Array.isArray(a.value) ? !1 : a.value.length > 0 && a.value.length < s.value.length), N = (e) => {
+    w.value = e;
+  }, s = r(
+    () => l.options.filter((e) => l.onSearch(e, w.value))
+  ), oe = r(() => c.value[0]?.hasSubtitle), G = r(() => i.mode === m.Multi), K = r(
+    () => oe.value ? A.MULTILINE_LIST_HEIGHT : A.LIST_HEIGHT
+  ), {
+    list: $,
+    containerProps: X,
+    wrapperProps: se,
+    scrollTo: R
+  } = xe(s, {
+    itemHeight: K.value
+  });
+  b(
+    () => l.isOpen,
+    (e) => {
+      B(e);
+    }
+  ), b([T], async () => {
+    await D();
+  }), b(
+    [v, o, T],
+    async ([e], [t]) => {
+      v.value && (await D(), T.value !== -1 && e !== t && setTimeout(() => {
+        R(T.value);
+      }), o.value && setTimeout(() => {
+        R(o.value);
+      }));
+    }
+  );
+  const f = (e, t = !1) => {
+    l.disabled || (B(e), D(() => {
+      v.value && O("opened"), v.value || O("closed"), P.value && t && P.value.focus();
+    }));
+  };
+  b(v, (e) => {
+    if (e) {
+      G.value && Array.isArray(n.value) && (M.value = x(n.value).slice());
+      return;
+    }
+    U();
+  });
+  const ce = () => {
+    ve(), n.value = a.value;
+  }, ve = () => {
+    if (q.value) {
+      a.value = [];
+      return;
+    }
+    if (Array.isArray(a.value)) {
+      if (a.value.length === s.value.length) {
+        a.value = [];
+        return;
+      }
+      a.value = s.value;
+    }
+  }, de = () => {
+    a.value = [];
+  }, _ = (e, t) => {
+    if (e = x(e), c.value[t]?.disabled)
+      return;
+    if (T.value = t, i.mode !== m.Multi) {
+      l.keepOpen || f(!1), i.goToOption(
+        0
+        /* None */
+      ), n.value = e, N(""), U(), i.type === k.Search && d.value && (d.value.value = l.displayValue(e));
+      return;
+    }
+    if (!Array.isArray(a.value))
+      return;
+    d.value?.focus();
+    const g = x(a.value);
+    if (z(g, e)) {
+      a.value = g.filter(
+        (h) => !Te(h, e)
+      );
+      return;
+    } else {
+      a.value = [...g, e];
+      return;
+    }
+  }, fe = (e) => c.value[e]?.disabled, i = {
+    activeIndex: o,
+    options: c,
+    selectedOption: n,
+    labelRef: V,
+    activeOption: I,
+    listRef: P,
+    clearable: l.clearable,
+    type: W.input ? k.Search : k.Dropdown,
+    mode: l.multi ? m.Multi : m.Single,
+    query: w,
+    selectedValue: ue,
+    toggle: f,
+    disabled: l.disabled,
+    open: v,
+    mandatory: l.mandatory,
+    size: l.size,
+    placeholder: l.placeholder,
+    select: _,
+    clearSelection: () => {
+      N(""), n.value = i.mode === m.Single ? null : [], d.value && (d.value.value = "");
+    },
+    search: N,
+    goToOption: async (e) => {
+      if (!v.value)
+        return;
+      let t = o.value + e;
+      const y = c.value.filter(
+        (h) => h.disabled
+      ).length, g = s.value.length - y;
+      for (t > g && (t = g + 1); ; ) {
+        if (!c.value[t]?.disabled) {
+          I.value = s.value[t], o.value = t;
+          return;
+        }
+        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!fe(o.value)) {
+          I.value = s.value[t], o.value = t;
+          return;
+        }
+      }
+    },
+    registerInput: (e) => {
+      d.value = e.value;
+    },
+    registerOption: (e, t, y) => {
+      c.value = [...c.value, { id: e, disabled: t, hasSubtitle: y }];
+    },
+    unRegisterOption(e) {
+      c.value = c.value.filter((t) => t.id !== e);
+    }
+  };
+  Pe(De, i), J(
+    P,
+    () => {
+      v.value && j();
+    },
+    {
+      ignore: [
+        S,
+        p,
+        H,
+        L,
+        d,
+        X.ref
+      ]
+    }
+  );
+  const ge = () => {
+    d.value && (d.value.value = i.query.value = "");
+  };
+  Se(async () => {
+    l.autoFocus && (await D(), setTimeout(() => {
+      C.value.focus();
+    })), i.goToOption(0);
+  });
+  const he = () => {
+    n.value = a.value, O("apply", n.value), f(!1), ge();
+  }, j = () => {
+    G.value && Array.isArray(M.value) && (n.value = x(M.value).slice()), w.value = "", f(!1);
+  }, ye = (e) => {
+    if (!l.disableKeyboardEvents)
+      switch (e.key) {
+        case "Space":
+        case "Enter":
+        case "ArrowUp":
+        case "ArrowDown":
+          f(!0), e.preventDefault();
+      }
+  }, be = (e) => {
+    if (!l.disableKeyboardEvents)
+      switch (e.key) {
+        case "ArrowUp": {
+          i.goToOption(
+            -1
+            /* Previous */
+          ), e.preventDefault(), e.stopPropagation();
+          break;
+        }
+        case "ArrowDown": {
+          i.goToOption(
+            1
+            /* Next */
+          ), e.preventDefault(), e.stopPropagation();
+          break;
+        }
+        case "Escape": {
+          f(!1), e.preventDefault();
+          break;
+        }
+        case "PageUp": {
+          i.goToOption(
+            10
+            /* NextPage */
+          ), e.preventDefault();
+          break;
+        }
+        case "PageDown": {
+          i.goToOption(
+            -10
+            /* PrevPage */
+          ), e.preventDefault();
+          break;
+        }
+        case "Enter": {
+          if (!v.value) {
+            f(!0);
+            return;
+          }
+          _(s.value[o.value], o.value), i.mode === m.Single && !l.keepOpen && f(!1), e.preventDefault();
+          break;
+        }
+      }
+  }, me = r(() => {
+    const e = $.value.length, t = l.showSelectAll ? 1 : 0, y = e > A.MAX_NUMBER_OF_OPTIONS, g = e + t;
+    let h = y ? A.MAX_NUMBER_OF_OPTIONS + 0.5 : g;
+    return l.noResultsText && h === 0 && (h = h + 1), Ie(
+      h * K.value + A.PADDING_PX
+    );
+  });
+  return {
+    onKeydown: be,
+    location: F,
+    open: v,
+    toggleMenu: f,
+    onButtonKeydown: ye,
+    displayedValue: ie,
+    labelRef: V,
+    query: w,
+    containerProps: X,
+    calculateTableHeight: me,
+    wrapperProps: se,
+    filteredOptions: s,
+    allSelected: q,
+    isIndeterminate: re,
+    onSelectAll: ce,
+    virtualOptions: $,
+    isSelected: Q,
+    selectedOption: n,
+    onSelect: _,
+    activeIndex: o,
+    onCancel: j,
+    onApply: he,
+    scrollTo: R,
+    onClickOutside: J,
+    listRef: P,
+    buttonRef: S,
+    apply: p,
+    cancel: H,
+    el: C,
+    triggerRef: Y,
+    clearAll: L,
+    onClearAllSelections: de
+  };
+};
+export {
+  Ve as dropdownCommon
+};

package/components/dropdown/common/DropdownContext.js

@@ -0,0 +1,21 @@
+import { inject as t } from "vue";
+var e = /* @__PURE__ */ ((r) => (r[r.Multi = 0] = "Multi", r[r.Single = 1] = "Single", r))(e || {}), c = /* @__PURE__ */ ((r) => (r[r.Search = 0] = "Search", r[r.Dropdown = 1] = "Dropdown", r))(c || {});
+const a = Symbol(
+  "DropdownContext"
+);
+function i(r) {
+  const n = t(a, null);
+  if (n === null) {
+    const o = new Error(
+      `<${r} /> is missing a parent <Dropdown /> component.`
+    );
+    throw Error.captureStackTrace && Error.captureStackTrace(o, i), o;
+  }
+  return n;
+}
+export {
+  a as DropdownContext,
+  e as Mode,
+  c as Type,
+  i as useDropdownContext
+};

package/components/dropdown/common/Label.vue.d.ts

@@ -1,2 +1,9 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+    default?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/dropdown/common/Label.vue.js

@@ -1,41 +1,7 @@
-import { defineComponent, openBlock, createElementBlock, unref, normalizeClass, createVNode, withCtx, renderSlot, createBlock, createTextVNode, createCommentVNode } from 'vue';
-/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
-import Text from '../../typography/Text.vue.js';
-import { useDropdownContext } from './DropdownContext.vue.js';
-import { useId } from '../../../composables/useId.vue.js';
-/* empty css                                                       */
-import "../../../Label.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Label",
-  setup(__props) {
-    const id = `is-system-label-${useId().value}`;
-    const api = useDropdownContext("label");
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", {
-        id,
-        ref: unref(api).labelRef,
-        class: normalizeClass(["label", { "label--disabled": unref(api).disabled }])
-      }, [
-        createVNode(unref(Text), null, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
-          _: 3
-        }),
-        unref(api).mandatory ? (openBlock(), createBlock(unref(Text), {
-          key: 0,
-          size: "lg",
-          class: "mandatory"
-        }, {
-          default: withCtx(() => [
-            createTextVNode("*")
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-var Label = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5151f81e"]]);
-
-export { Label as default };
+import e from "./Label.vue2.js";
+/* empty css            */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Label.vue_vue_type_style_index_0_scoped_5faaafce_lang.css"; //*');
+const t = /* @__PURE__ */ o(e, [["__scopeId", "data-v-5faaafce"]]);
+export {
+  t as default
+};

package/components/dropdown/common/Label.vue2.js

@@ -0,0 +1,36 @@
+ import "../../../Label.vue_vue_type_style_index_0_scoped_5faaafce_lang.css"; import { defineComponent as n, openBlock as l, createElementBlock as d, unref as e, normalizeClass as m, createVNode as c, withCtx as o, renderSlot as i, createBlock as u, createTextVNode as f, createCommentVNode as p } from "vue";
+import "../../typography/Heading.vue.js";
+import a from "../../typography/Text.vue.js";
+import { useDropdownContext as b } from "./DropdownContext.js";
+import { useId as _ } from "../../../composables/useId.js";
+const h = /* @__PURE__ */ n({
+  __name: "Label",
+  setup(x) {
+    const r = `is-system-label-${_().value}`, t = b("label");
+    return (s, C) => (l(), d("label", {
+      id: r,
+      ref: e(t).labelRef,
+      class: m(["label", { "label--disabled": e(t).disabled }])
+    }, [
+      c(e(a), null, {
+        default: o(() => [
+          i(s.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 3
+      }),
+      e(t).mandatory ? (l(), u(e(a), {
+        key: 0,
+        size: "lg",
+        class: "mandatory"
+      }, {
+        default: o(() => [
+          f("*")
+        ]),
+        _: 1
+      })) : p("", !0)
+    ], 2));
+  }
+});
+export {
+  h as default
+};

package/components/dropdown/common/Option.common.d.ts

@@ -0,0 +1,9 @@
+export declare const optionCommon: (props: any) => {
+    selected: import("vue").ComputedRef<boolean>;
+    isMulti: import("vue").ComputedRef<boolean>;
+    id: string;
+    onClick: (event: Event) => void;
+    api: import("./DropdownContext").DropdownContextProps;
+    el: import("vue").Ref<HTMLDivElement>;
+    active: import("vue").ComputedRef<any>;
+};

package/components/dropdown/common/Option.common.js

@@ -0,0 +1,24 @@
+import { ref as s, onMounted as m, onUnmounted as v, computed as o, toRaw as i } from "vue";
+import { useId as f } from "../../../composables/useId.js";
+import { useDropdownContext as O, Mode as l } from "./DropdownContext.js";
+const A = (t) => {
+  const e = O("Option"), n = f().value, u = s(null), c = (d) => {
+    t.selectAllOption ? d.stopPropagation() : e.select(t.option);
+  };
+  m(() => e.registerOption(n, t.disabled, !!t.subtitle)), v(() => {
+    e.unRegisterOption(n);
+  });
+  const r = o(() => e.mode === l.Multi), a = o(() => t.active !== null ? t.active : e.activeIndex.value !== null ? e.activeOption.value === t.option : !1);
+  return {
+    selected: o(() => t.selectedProp ? !0 : e.mode === l.Multi && Array.isArray(e.selectedOption.value) ? i(e.selectedOption.value.includes(t.option)) : i(e.selectedOption.value) === i(t.option)),
+    isMulti: r,
+    id: n,
+    onClick: c,
+    api: e,
+    el: u,
+    active: a
+  };
+};
+export {
+  A as optionCommon
+};

package/components/dropdown/common/Option.vue.d.ts

@@ -1,5 +1,5 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    option?: unknown;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    option?: any;
     subtitle?: string;
     disabled?: boolean;
     selectedProp?: boolean;
@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     selectAllOption: boolean;
     active: any;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    option?: unknown;
+    option?: any;
     subtitle?: string;
     disabled?: boolean;
     selectedProp?: boolean;
@@ -35,6 +35,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     subtitle: string;
     selectAllOption: boolean;
     active: boolean;
+}>, {
+    image?(_: {}): any;
+    "icon-start"?(_: {}): any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -47,7 +51,15 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

package/components/dropdown/common/Option.vue.js

@@ -1,133 +1,7 @@
-import { defineComponent, ref, onMounted, onUnmounted, computed, toRaw, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createBlock, createCommentVNode, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, withModifiers } from 'vue';
-/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
-import Text from '../../typography/Text.vue.js';
-import { useDropdownContext, Mode } from './DropdownContext.vue.js';
-import { useId } from '../../../composables/useId.vue.js';
-import Checkbox from '../../checkbox/Checkbox.vue.js';
-import Icon from '../../icon/v3/Icon.vue.js';
-import { NOOP } from '@vue/shared';
-/* empty css                                                        */
-import "../../../Option.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = {
-  key: 1,
-  class: "image"
+import o from "./Option.vue2.js";
+/* empty css             */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Option.vue_vue_type_style_index_0_scoped_2432f13f_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-2432f13f"]]);
+export {
+  s as default
 };
-const _hoisted_2 = {
-  key: 2,
-  class: "start-icon"
-};
-const _hoisted_3 = { class: "text-container" };
-const _hoisted_4 = { key: 0 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Option",
-  props: {
-    option: { default: null },
-    subtitle: { default: "" },
-    disabled: { type: Boolean, default: false },
-    selectedProp: { type: Boolean },
-    isIndeterminate: { type: Boolean, default: false },
-    selectAllOption: { type: Boolean, default: false },
-    active: { type: Boolean, default: null }
-  },
-  setup(__props) {
-    const props = __props;
-    const api = useDropdownContext("Option");
-    const id = useId().value;
-    const el = ref(null);
-    const onClick = (event) => {
-      if (!props.selectAllOption) {
-        api.select(props.option);
-      } else {
-        event.stopPropagation();
-      }
-    };
-    onMounted(() => api.registerOption(id, props.disabled, !!props.subtitle));
-    onUnmounted(() => {
-      api.unRegisterOption(id);
-    });
-    const isMulti = computed(() => api.mode === Mode.Multi);
-    const active = computed(() => {
-      if (props.active !== null)
-        return props.active;
-      return api.activeIndex.value !== null ? api.activeOption.value === props.option : false;
-    });
-    const selected = computed(() => {
-      if (props.selectedProp) {
-        return true;
-      }
-      if (api.mode === Mode.Multi && Array.isArray(api.selectedOption.value)) {
-        return toRaw(api.selectedOption.value.includes(props.option));
-      }
-      return toRaw(api.selectedOption.value) === toRaw(props.option);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
-        class: normalizeClass(["item-container", {
-          "item-container--disabled": __props.disabled,
-          "item-container--active": unref(active),
-          "item-container--selected": unref(selected),
-          "item-container--multi": unref(isMulti)
-        }])
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(["item", {
-            "item--multi": unref(isMulti),
-            "item--with-icon": _ctx.$slots["icon-start"] || _ctx.$slots.image
-          }])
-        }, [
-          unref(isMulti) ? (openBlock(), createBlock(unref(Checkbox), {
-            key: 0,
-            id: unref(id).toString(),
-            tabindex: "-1",
-            class: "checkbox",
-            size: "sm",
-            "is-checked": unref(selected),
-            "is-indeterminate": __props.isIndeterminate && !__props.option,
-            onClick: _cache[0] || (_cache[0] = ($event) => __props.disabled ? unref(NOOP)() : onClick($event))
-          }, null, 8, ["id", "is-checked", "is-indeterminate"])) : createCommentVNode("", true),
-          _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            renderSlot(_ctx.$slots, "image", {}, void 0, true)
-          ])) : createCommentVNode("", true),
-          _ctx.$slots["icon-start"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
-            renderSlot(_ctx.$slots, "icon-start", {}, void 0, true)
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3, [
-            createVNode(unref(Text), { size: "sm" }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "default", {}, void 0, true)
-              ]),
-              _: 3
-            }),
-            __props.subtitle ? (openBlock(), createBlock(unref(Text), {
-              key: 0,
-              class: "subtitle",
-              size: "xs"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(__props.subtitle), 1)
-              ]),
-              _: 1
-            })) : createCommentVNode("", true)
-          ])
-        ], 2),
-        unref(api).clearable && unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createElementVNode("button", {
-            class: "clear-button",
-            onClick: _cache[1] || (_cache[1] = withModifiers(($event) => unref(api).clearSelection(), ["prevent", "stop"]))
-          }, [
-            createVNode(unref(Icon), {
-              name: "close",
-              width: "8",
-              height: 8
-            })
-          ])
-        ])) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-var Option = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5ad6a3f4"]]);
-
-export { Option as default };