@ironsource/shared-ui 2.0.0-test.9 → 2.0.0

package/components/dropdown/v4/DropdownV4.vue2.js

@@ -1,388 +1,352 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_896b5344_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as Q, openBlock as d, createElementBlock as n, normalizeClass as $, unref as e, renderSlot as h, createElementVNode as r, createVNode as s, withCtx as o, Transition as Z, createTextVNode as u, toDisplayString as b, createCommentVNode as i, createBlock as g, isRef as _, mergeProps as P, withModifiers as A, Fragment as ee, renderList as te, toRaw as T, pushScopeId as le, popScopeId as ae } from "vue";
-import C from "../../button/v4/ButtonV4.vue.js";
-import de from "../common/Option.vue.js";
-import B from "../../icon/Icon.vue.js";
-import oe from "../../search/v4/SearchV4.vue.js";
-import "../../typography/Heading.vue.js";
-import y from "../../typography/Text.vue.js";
-import { Dropdown as ie } from "floating-vue";
-import { DropdownTestIdModifiers as c } from "../../../testids/index.js";
-import { dropdownCommon as ne } from "../common/Dropdown.common.js";
-const se = (t) => (le("data-v-896b5344"), t = t(), ae(), t), re = ["tabindex", "data-testid"], ue = { style: { display: "flex", width: "100%" } }, ce = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"], fe = {
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_571b7c2f_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as te, openBlock as a, createElementBlock as i, mergeProps as r, unref as e, renderSlot as h, createElementVNode as m, createVNode as n, withCtx as s, Transition as le, normalizeClass as R, isRef as oe, createCommentVNode as d, createTextVNode as p, toDisplayString as ae, withModifiers as V, Fragment as ie, renderList as ne, toRaw as w } from "vue";
+import I from "../../button/v4/ButtonV4.vue.js";
+import "../../button/v4/IconButtonV4.vue.js";
+import "./DropdownV4.vue.js";
+import de from "./DefaultDropdownTrigger.vue.js";
+import re from "./IconButtonDropdownTrigger.vue.js";
+import se from "./ChipDropdownTrigger.vue.js";
+import ue from "./OptionV4.vue.js";
+import ce from "../../search/v4/SearchV4.vue.js";
+import x from "../../typography/v4/Typography.vue.js";
+import { Dropdown as fe } from "floating-vue";
+import { DropdownTestIdModifiers as u } from "../../../testids/index.js";
+import { dropdownCommon as me } from "../common/Dropdown.common.js";
+import pe from "../../loader/v4/Loader.vue.js";
+import { useTestIdAttrs as ye } from "../../../utils/testIds.js";
+import { TRIGGERS as b } from "./Dropdown.types.js";
+const ge = ["tabindex"], he = { style: { display: "flex", width: "100%" } }, be = { key: 0 }, ke = { key: 1 }, Te = { key: 2 }, ve = {
   key: 0,
-  class: "image-slot"
-}, me = { class: "angle-down" }, ye = {
-  key: 0,
-  ref: "listRef",
-  class: "dropdown-title"
-}, pe = ["data-testid"], he = ["data-testid"], be = {
+  class: "inline-search-wrapper"
+}, Ce = {
   key: 0,
   class: "no-result-container"
-}, ke = {
+}, we = {
   key: 1,
   class: "loader"
-}, ve = /* @__PURE__ */ se(() => /* @__PURE__ */ r("svg", {
-  width: "100",
-  height: "100",
-  viewBox: "0 0 100 100"
-}, [
-  /* @__PURE__ */ r("circle", {
-    cx: "50",
-    cy: "50",
-    fill: "none",
-    stroke: "currentColor",
-    "stroke-width": "6",
-    r: "35",
-    "stroke-dasharray": "164.93361431346415 56.97787143782138"
-  }, [
-    /* @__PURE__ */ r("animateTransform", {
-      attributeName: "transform",
-      type: "rotate",
-      repeatCount: "indefinite",
-      dur: "1s",
-      values: "0 50 50;360 50 50",
-      keyTimes: "0;1"
-    })
-  ])
-], -1)), we = { key: 2 }, $e = ["aria-selected", "aria-disabled", "onClick"], ge = {
-  key: 0,
-  class: "actions"
-}, Pe = /* @__PURE__ */ Q({
+}, Ie = { key: 2 }, Se = ["aria-selected", "aria-disabled", "onClick"], Ae = {
+  key: 1,
+  class: "actions-wrapper"
+}, Be = { class: "actions-clear-all" }, Le = { class: "actions-apply-cancel" }, qe = /* @__PURE__ */ te({
   __name: "DropdownV4",
   props: {
     modelValue: { default: null },
+    selected: { default: null },
+    multi: { type: Boolean, default: !1 },
     placeholder: { default: "" },
     disabled: { type: Boolean, default: !1 },
-    mandatory: { type: Boolean, default: !1 },
-    helperText: { default: "" },
-    searchPlaceholder: { default: "" },
-    isOnTop: { type: Boolean, default: !1 },
-    multi: { type: Boolean, default: !1 },
-    title: { default: "" },
-    inlineSearch: { type: Boolean, default: !1 },
     popperClass: { default: "" },
-    noResultsText: { default: "No results found" },
     loading: { type: Boolean },
-    selected: { default: null },
+    testId: { default: "" },
+    isOpen: { type: Boolean },
+    options: null,
     showSelectAll: { type: Boolean },
     defaultOpen: { type: Boolean, default: !1 },
-    showButtonOnOpen: { type: Boolean, default: !0 },
-    autoFocus: { type: Boolean, default: !1 },
+    keepOpen: { type: Boolean, default: !1 },
+    autoSize: { type: Boolean, default: !1 },
+    disableKeyboardEvents: { type: Boolean, default: !1 },
+    isOnTop: { type: Boolean, default: !1 },
     distance: { default: 0 },
-    isOpen: { type: Boolean },
+    container: { default: "body" },
+    flip: { type: Boolean, default: !0 },
     skidding: { default: 0 },
     placement: { default: "bottom-start" },
-    clearable: { type: Boolean, default: !1 },
-    error: { default: "" },
+    triggerLabel: { default: "" },
+    triggerHelperText: { default: "" },
+    triggerFeedbackText: { default: "" },
+    triggerFeedbackVariant: { default: null },
     size: { default: "lg" },
-    displayValue: null,
-    options: null,
+    mandatory: { type: Boolean, default: !1 },
+    predefinedTrigger: { default: b.DEFAULT },
+    inlineSearch: { type: Boolean, default: !1 },
+    inlineSearchPlaceholder: { default: "Search" },
     onSearch: { type: Function, default: () => !0 },
-    theme: { default: "is-dropdown" },
-    container: { default: "body" },
-    flip: { type: Boolean, default: !0 },
-    keepOpen: { type: Boolean, default: !1 },
-    autoSize: { type: Boolean, default: !1 },
-    disableKeyboardEvents: { type: Boolean, default: !1 },
-    multiOptionsPlaceholderPrefix: { default: "" },
-    multiOptionsPlaceholderSuffix: { default: "" },
-    testId: { default: "" },
-    darkTheme: { type: Boolean, default: !0 },
-    valueToCopy: { default: "" }
+    noResultsText: { default: "No results found" },
+    searchAutoFocus: { type: Boolean, default: !0 },
+    onClear: { type: Function, default: () => !0 },
+    displayValue: null,
+    theme: { default: "light-theme-v4" }
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
-  setup(t, { expose: V, emit: N }) {
-    const K = t, {
-      onKeydown: p,
-      location: L,
-      open: m,
-      toggleMenu: I,
-      onButtonKeydown: k,
-      displayedValue: S,
-      labelRef: D,
-      query: v,
-      containerProps: H,
-      calculateTableHeight: F,
-      wrapperProps: M,
-      filteredOptions: G,
-      allSelected: z,
-      isIndeterminate: X,
-      onSelectAll: q,
-      virtualOptions: O,
-      isSelected: R,
-      selectedOption: E,
-      onSelect: x,
-      activeIndex: U,
-      onCancel: W,
-      onApply: Y,
-      scrollTo: j
-    } = ne(K, N), J = () => {
-    };
-    return V({
-      selectItem: x,
-      scrollTo: j
-    }), (f, a) => (d(), n("div", {
-      ref: "el",
-      class: $(["dropdown", { "dropdown--disabled": t.disabled }]),
-      tabindex: t.disabled ? -1 : 0,
-      "data-testid": `${t.testId}-${e(c).WRAPPER}`,
-      onKeydown: a[7] || (a[7] = //@ts-ignore
-      (...l) => e(p) && e(p)(...l))
-    }, [
-      h(f.$slots, "label", {}, void 0, !0),
-      r("div", ue, [
-        s(e(ie), {
+  setup(t, { expose: D, emit: z }) {
+    const S = t, P = {
+      MULTILINE_LIST_HEIGHT: 48,
+      LIST_HEIGHT: 32 + 4,
+      MAX_NUMBER_OF_OPTIONS: 7,
+      PADDING_PX: -4
+    }, {
+      onKeydown: y,
+      open: c,
+      toggleMenu: k,
+      onButtonKeydown: F,
+      displayedValue: $,
+      query: T,
+      containerProps: K,
+      calculateTableHeight: H,
+      wrapperProps: A,
+      filteredOptions: U,
+      allSelected: B,
+      isIndeterminate: G,
+      onSelectAll: M,
+      virtualOptions: L,
+      isSelected: O,
+      selectedOption: v,
+      onSelect: N,
+      activeIndex: X,
+      onCancel: q,
+      onApply: W,
+      scrollTo: Y,
+      listRef: j,
+      buttonRef: J,
+      apply: Q,
+      cancel: Z,
+      el: _,
+      onClearAllSelections: E,
+      clearAll: ee
+    } = me(S, z, P);
+    D({
+      selectItem: N,
+      scrollTo: Y
+    });
+    const f = ye(S.testId, u);
+    return (g, l) => (a(), i("div", r({
+      ref_key: "el",
+      ref: _,
+      class: ["dropdown", { "dropdown--disabled": t.disabled }],
+      tabindex: t.disabled ? -1 : 0
+    }, e(f)[e(u).WRAPPER], {
+      onKeydown: l[7] || (l[7] = //@ts-ignore
+      (...o) => e(y) && e(y)(...o))
+    }), [
+      h(g.$slots, "label", {}, void 0, !0),
+      m("div", he, [
+        n(e(fe), r({
           theme: t.theme,
           "popper-class": [
             t.popperClass,
-            t.darkTheme ? "dark-theme-v4" : "light-theme-v4",
-            t.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null
+            t.theme,
+            t.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null,
+            "v4-dropdown"
           ],
           placement: t.placement,
           skidding: t.isOnTop ? 0 : t.skidding,
-          distance: t.isOnTop ? -e(L) : t.distance,
+          distance: t.distance,
           flip: t.flip,
           triggers: [],
-          shown: !!e(m),
+          shown: !!e(c),
           "auto-hide": !1,
           container: t.container,
-          "auto-size": t.autoSize,
-          "data-testid": `${t.testId}-${e(c).TRIGGER}`
-        }, {
-          popper: o(() => [
-            s(Z, null, {
-              default: o(() => [
-                t.inlineSearch || t.title ? (d(), n("div", ye, [
-                  r("div", null, [
-                    t.title ? (d(), n("div", {
-                      key: 0,
-                      class: "dropdown-title__text",
-                      "data-testid": `${t.testId}-${e(c).TITLE}`
-                    }, [
-                      s(e(y), { strong: "" }, {
-                        default: o(() => [
-                          u(b(t.title), 1)
-                        ]),
-                        _: 1
-                      })
-                    ], 8, pe)) : i("", !0),
-                    t.inlineSearch ? (d(), g(e(oe), {
-                      key: 1,
-                      modelValue: e(v),
-                      "onUpdate:modelValue": a[4] || (a[4] = (l) => _(v) ? v.value = l : null),
-                      placeholder: t.searchPlaceholder,
-                      class: "dropdown-title__search",
-                      variant: "transparent",
-                      size: "md",
-                      "test-id": `${t.testId}-${e(c).SEARCH}`,
-                      onKeydown: e(p)
-                    }, null, 8, ["modelValue", "placeholder", "test-id", "onKeydown"])) : i("", !0)
-                  ]),
-                  e(m) ? (d(), n("div", {
+          "auto-size": t.autoSize
+        }, e(f)[e(u).TRIGGER]), {
+          popper: s(() => [
+            n(le, null, {
+              default: s(() => [
+                e(c) ? (a(), i("div", {
+                  key: 0,
+                  ref_key: "listRef",
+                  ref: j,
+                  class: R(["light-theme-v4", {
+                    "dropdown--disabled": t.disabled,
+                    "inline-search": t.inlineSearch
+                  }])
+                }, [
+                  e(c) ? (a(), i("div", {
                     key: 0,
                     class: "dropdown",
-                    onKeydown: a[6] || (a[6] = //@ts-ignore
-                    (...l) => e(p) && e(p)(...l))
+                    onKeydown: l[6] || (l[6] = //@ts-ignore
+                    (...o) => e(y) && e(y)(...o))
                   }, [
-                    h(f.$slots, "input-list", { open: e(m) }, void 0, !0),
-                    r("div", P(e(H), {
+                    e(c) && t.inlineSearch ? (a(), i("div", ve, [
+                      n(e(ce), {
+                        modelValue: e(T),
+                        "onUpdate:modelValue": [
+                          l[4] || (l[4] = (o) => oe(T) ? T.value = o : null),
+                          t.onClear
+                        ],
+                        placeholder: t.inlineSearchPlaceholder,
+                        variant: "transparent",
+                        size: "md",
+                        "auto-focus": t.searchAutoFocus,
+                        "test-id": t.testId,
+                        onKeydown: e(y)
+                      }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
+                    ])) : d("", !0),
+                    h(g.$slots, "input-list", { open: e(c) }, void 0, !0),
+                    m("div", r({
                       class: ["list-container", { "list-container--multi": t.multi }],
-                      style: { height: `${e(F)}rem` },
-                      "data-testid": `${t.testId}-${e(c).LIST_CONTAINER}`
+                      style: { height: `${e(H)}rem` }
+                    }, {
+                      ...e(K),
+                      ...e(f)[e(u).LIST_CONTAINER]
                     }), [
-                      r("ul", P(e(M), {
+                      m("ul", r(e(A), {
+                        style: {
+                          height: Number(e(A).style.height) - 4
+                        },
                         role: "listbox",
                         class: ["list", { "list--multi": t.multi }]
                       }), [
-                        !e(G).length && !t.loading ? (d(), n("li", be, [
-                          s(e(y), {
-                            size: "sm",
-                            class: "no-result"
-                          }, {
-                            default: o(() => [
-                              u(b(t.noResultsText), 1)
-                            ]),
-                            _: 1
-                          })
-                        ])) : i("", !0),
-                        t.loading ? (d(), n("li", ke, [
-                          s(e(B), {
-                            "font-size": "md",
-                            class: "loader-icon"
-                          }, {
-                            default: o(() => [
-                              ve
+                        !e(U).length && !t.loading ? (a(), i("li", Ce, [
+                          n(e(x), r({ variant: "body2" }, e(f)[e(u).NO_RESULT]), {
+                            default: s(() => [
+                              p(ae(t.noResultsText), 1)
                             ]),
                             _: 1
-                          }),
-                          s(e(y), null, {
-                            default: o(() => [
-                              u("Loading...")
+                          }, 16)
+                        ])) : d("", !0),
+                        t.loading ? (a(), i("li", we, [
+                          n(e(pe)),
+                          n(e(x), null, {
+                            default: s(() => [
+                              p("Loading...")
                             ]),
                             _: 1
                           })
-                        ])) : i("", !0),
-                        t.showSelectAll ? (d(), n("li", we, [
-                          s(de, {
-                            "aria-selected": e(z),
-                            "aria-disabled": !!t.disabled,
-                            "selected-prop": e(z),
-                            "is-indeterminate": e(X),
-                            "select-all-option": "",
-                            onClick: a[5] || (a[5] = A((l) => e(q)(), ["stop"]))
-                          }, {
-                            default: o(() => [
-                              u("Select all ")
+                        ])) : d("", !0),
+                        t.showSelectAll ? (a(), i("li", Ie, [
+                          n(e(ue), r(
+                            {
+                              "aria-selected": e(B),
+                              "aria-disabled": !!t.disabled,
+                              "selected-prop": e(B),
+                              "is-indeterminate": e(G),
+                              "select-all-option": ""
+                            },
+                            e(f)[e(u).SELECT_ALL],
+                            {
+                              onClick: l[5] || (l[5] = V((o) => e(M)(), ["stop"]))
+                            }
+                          ), {
+                            default: s(() => [
+                              p("Select all ")
                             ]),
                             _: 1
-                          }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
-                        ])) : i("", !0),
-                        e(O).length && !t.loading ? (d(!0), n(ee, { key: 3 }, te(e(O), ({ data: l, index: w }) => (d(), n("li", {
-                          key: w,
-                          "aria-selected": e(R)(T(e(E)), l),
+                          }, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
+                        ])) : d("", !0),
+                        e(L).length && !t.loading ? (a(!0), i(ie, { key: 3 }, ne(e(L), ({ data: o, index: C }) => (a(), i("li", {
+                          key: C,
+                          "aria-selected": e(O)(w(e(v)), o),
                           "aria-disabled": !!t.disabled,
-                          onClick: A(() => e(x)(l, w), ["stop"])
+                          onClick: V(() => e(N)(o, C), ["stop"])
                         }, [
-                          h(f.$slots, "default", {
-                            option: l,
-                            selected: e(R)(T(e(E)), l),
-                            active: T(e(U)) === w
+                          h(g.$slots, "default", {
+                            option: o,
+                            selected: e(O)(w(e(v)), o),
+                            active: w(e(X)) === C
                           }, void 0, !0)
-                        ], 8, $e))), 128)) : i("", !0)
+                        ], 8, Se))), 128)) : d("", !0)
                       ], 16)
-                    ], 16, he),
-                    t.multi ? (d(), n("div", ge, [
-                      s(e(C), {
-                        ref: "cancel",
-                        size: "small",
-                        variant: "outlined",
-                        color: "default",
-                        "test-id": `${t.testId}-${e(c).ACTION_CANCEL}`,
-                        onClick: e(W)
-                      }, {
-                        default: o(() => [
-                          u(" Cancel ")
-                        ]),
-                        _: 1
-                      }, 8, ["test-id", "onClick"]),
-                      s(e(C), {
-                        ref: "apply",
-                        "data-testid": "mutli-apply",
-                        size: "small",
-                        class: "apply-button",
-                        "test-id": `${t.testId}-${e(c).ACTION_APPLY}`,
-                        onClick: e(Y)
-                      }, {
-                        default: o(() => [
-                          u("Apply ")
-                        ]),
-                        _: 1
-                      }, 8, ["test-id", "onClick"])
-                    ])) : i("", !0)
-                  ], 32)) : i("", !0)
-                ], 512)) : i("", !0)
+                    ], 16),
+                    t.multi ? (a(), i("div", Ae, [
+                      m("div", Be, [
+                        n(e(I), r(
+                          {
+                            ref_key: "clearAll",
+                            ref: ee,
+                            size: "small",
+                            variant: "text",
+                            color: "primary"
+                          },
+                          e(f)[e(u).ACTION_CLEAR_ALL],
+                          { onClick: e(E) }
+                        ), {
+                          default: s(() => [
+                            p(" Clear all ")
+                          ]),
+                          _: 1
+                        }, 16, ["onClick"])
+                      ]),
+                      m("div", Le, [
+                        n(e(I), r(
+                          {
+                            ref_key: "cancel",
+                            ref: Z,
+                            size: "small",
+                            variant: "outlined",
+                            color: "primary"
+                          },
+                          e(f)[e(u).ACTION_CANCEL],
+                          { onClick: e(q) }
+                        ), {
+                          default: s(() => [
+                            p(" Cancel ")
+                          ]),
+                          _: 1
+                        }, 16, ["onClick"]),
+                        n(e(I), r({
+                          ref_key: "apply",
+                          ref: Q,
+                          "data-testid": "mutli-apply",
+                          size: "small",
+                          class: "apply-button"
+                        }, e(f)[e(u).ACTION_APPLY], { onClick: e(W) }), {
+                          default: s(() => [
+                            p("Apply ")
+                          ]),
+                          _: 1
+                        }, 16, ["onClick"])
+                      ])
+                    ])) : d("", !0)
+                  ], 32)) : d("", !0)
+                ], 2)) : d("", !0)
               ]),
               _: 3
             })
           ]),
-          default: o(() => [
-            r("div", {
-              class: $(["button__container", {
-                "button__container--open": !!e(m),
+          default: s(() => [
+            m("div", {
+              class: R(["button__container", {
+                "button__container--open": !!e(c),
                 [`button__container--${t.size}`]: !0,
                 "button__container--disabled": t.disabled
               }])
             }, [
-              f.$slots.input ? (d(), n("div", {
-                key: 0,
-                ref: "buttonRef",
-                onClick: a[0] || (a[0] = (l) => e(I)()),
-                onKeydown: a[1] || (a[1] = //@ts-ignore
-                (...l) => e(k) && e(k)(...l))
-              }, [
-                h(f.$slots, "input", {
-                  open: e(m),
-                  value: e(S),
-                  disabled: t.disabled
-                }, void 0, !0)
-              ], 544)) : i("", !0),
-              f.$slots.input ? i("", !0) : (d(), n("button", {
-                key: 1,
-                ref: "buttonRef",
-                disabled: t.disabled,
-                "aria-haspopup": !0,
-                "aria-expanded": !!e(m),
-                "aria-labelledby": e(D)?.id,
-                "aria-disabled": t.disabled,
-                class: $([{
-                  "button--open": !!e(m),
-                  [`button--${t.size}`]: !0,
-                  "button--disabled": t.disabled
-                }, "button"]),
-                onKeydown: a[2] || (a[2] = //@ts-ignore
-                (...l) => e(k) && e(k)(...l)),
-                onClick: a[3] || (a[3] = (l) => e(I)())
-              }, [
-                f.$slots.image ? (d(), n("div", fe, [
-                  h(f.$slots, "image", {}, void 0, !0)
-                ])) : i("", !0),
-                s(e(y), {
-                  size: "sm",
-                  "is-truncated": ""
-                }, {
-                  default: o(() => [
-                    u(b(e(S)), 1)
-                  ]),
-                  _: 1
-                }),
-                r("div", me, [
-                  s(e(B), {
-                    name: "angle-down",
-                    "font-size": "sm"
-                  })
-                ])
-              ], 42, ce))
+              h(g.$slots, "dropdown-trigger", {}, () => [
+                m("div", {
+                  ref_key: "buttonRef",
+                  ref: J
+                }, [
+                  !t.predefinedTrigger || t.predefinedTrigger === e(b).DEFAULT ? (a(), i("div", be, [
+                    n(e(de), {
+                      placeholder: e($),
+                      open: e(c),
+                      label: t.triggerLabel,
+                      "hover-help-text": t.triggerHelperText,
+                      "feedback-text": t.triggerFeedbackText,
+                      "feedback-variant": t.triggerFeedbackVariant,
+                      mandatory: t.mandatory,
+                      "test-id": t.testId,
+                      onKeydown: e(F),
+                      onClick: l[0] || (l[0] = (o) => e(k)())
+                    }, null, 8, ["placeholder", "open", "label", "hover-help-text", "feedback-text", "feedback-variant", "mandatory", "test-id", "onKeydown"])
+                  ])) : d("", !0),
+                  t.predefinedTrigger === e(b).ICON_BUTTON ? (a(), i("div", ke, [
+                    n(e(re), {
+                      onClick: l[1] || (l[1] = (o) => e(k)())
+                    })
+                  ])) : d("", !0),
+                  t.predefinedTrigger === e(b).CHIP ? (a(), i("div", Te, [
+                    n(e(se), {
+                      open: e(c),
+                      label: t.placeholder,
+                      "test-id": t.testId,
+                      options: t.options,
+                      "selected-option": e(v),
+                      "display-value": t.displayValue,
+                      multi: t.multi,
+                      onClick: l[2] || (l[2] = (o) => e(k)()),
+                      onClear: l[3] || (l[3] = (o) => e(E)())
+                    }, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi"])
+                  ])) : d("", !0)
+                ], 512)
+              ], !0)
             ], 2)
           ]),
           _: 3
-        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size", "data-testid"]),
-        r("div", null, [
-          s(e(C), {
-            color: "default",
-            onClick: J
-          }, {
-            default: o(() => [
-              s(e(B), { name: "lock" })
-            ]),
-            _: 1
-          })
-        ])
-      ]),
-      !t.error && t.helperText ? (d(), g(e(y), {
-        key: 0,
-        size: "caption",
-        class: "helper-text",
-        "test-id": `${t.testId}-${e(c).HELPER_TEXT}`
-      }, {
-        default: o(() => [
-          u(b(t.helperText), 1)
-        ]),
-        _: 1
-      }, 8, ["test-id"])) : i("", !0),
-      t.error ? (d(), g(e(y), {
-        key: 1,
-        size: "caption",
-        class: "helper-text helper-text--error",
-        "test-id": `${t.testId}-${e(c).HELPER_TEXT_ERROR}`
-      }, {
-        default: o(() => [
-          u(b(t.error), 1)
-        ]),
-        _: 1
-      }, 8, ["test-id"])) : i("", !0)
-    ], 42, re));
+        }, 16, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size"])
+      ])
+    ], 16, ge));
   }
 });
 export {
-  Pe as default
+  qe as default
 };