@adyen/bento-vue2 1.97.0 → 1.98.0

package/dist/chunks/draggable.D5WFD5eX.js

@@ -0,0 +1,193 @@
+import { ref as c, defineComponent as O, computed as B, watch as C, nextTick as L } from "vue";
+import { u as U, a as A } from "./draggable-handle.BnRkhlee.js";
+import { u as z } from "./index.B6WW_F-J.js";
+import { c as k, d as _ } from "./index.BPUMyryR.js";
+import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/draggable.css";
+const K = k(() => {
+  const l = c(!1);
+  return typeof window < "u" && (_(
+    window,
+    "keydown",
+    (a) => {
+      a.key === "Tab" && (l.value = !0);
+    },
+    { capture: !0 }
+  ), _(
+    window,
+    "mousedown",
+    () => {
+      l.value = !1;
+    },
+    { capture: !0 }
+  ), _(
+    window,
+    "touchstart",
+    () => {
+      l.value = !1;
+    },
+    { capture: !0, passive: !0 }
+  ), _(window, "blur", () => {
+    l.value = !1;
+  })), { isKeyboardUser: l };
+}), G = {
+  "de-DE": {
+    youHaveMovedFromPositionToPosition: "Sie haben {itemLabel} von Position {indexOrigin} an Position {indexTarget} von {total} verschoben."
+  },
+  "en-GB": {
+    youHaveMovedFromPositionToPosition: "You have moved {itemLabel} from position {indexOrigin} to position {indexTarget} of {total}."
+  },
+  "en-US": {
+    youHaveMovedFromPositionToPosition: "You have moved {itemLabel} from position {indexOrigin} to position {indexTarget} of {total}."
+  },
+  "es-ES": {
+    youHaveMovedFromPositionToPosition: "Has movido {itemLabel} de la posición {indexOrigin} a la posición {indexTarget} de {total}."
+  },
+  "es-MX": {
+    youHaveMovedFromPositionToPosition: "Has movido {itemLabel} de la posición {indexOrigin} a la posición {indexTarget} de {total}."
+  },
+  "fr-FR": {
+    youHaveMovedFromPositionToPosition: "Vous avez déplacé {itemLabel} de la position {indexOrigin} à la position {indexTarget} sur {total}."
+  },
+  "it-IT": {
+    youHaveMovedFromPositionToPosition: "Hai spostato {itemLabel} dalla posizione {indexOrigin} alla posizione {indexTarget} di {total}."
+  },
+  "ja-JP": {
+    youHaveMovedFromPositionToPosition: "{itemLabel} を {indexOrigin} の位置から {total} の {indexTarget} の位置に移動しました。"
+  },
+  "pt-BR": {
+    youHaveMovedFromPositionToPosition: "Você moveu {itemLabel} da posição {indexOrigin} para a posição {indexTarget} de {total}."
+  },
+  "zh-CN": {
+    youHaveMovedFromPositionToPosition: "您已将 {itemLabel} 从 {indexOrigin} 位置移动到 {indexTarget} 位置（共 {total} 个位置）。"
+  }
+}, V = {
+  name: "bento-draggable",
+  model: { prop: "items", event: "update:items" },
+  i18n: { messages: G }
+}, X = /* @__PURE__ */ O({
+  ...V,
+  props: {
+    announcement: { default: "" },
+    disableAutoSort: { type: Boolean, default: !1 },
+    el: { default: "div" },
+    items: { default: () => [] },
+    options: { default: () => ({}) }
+  },
+  emits: ["update:items"],
+  setup(l, { expose: a, emit: m }) {
+    const o = l, v = ">:not(.b-draggable__announcement)", i = c(null), f = c(!1), u = c([]), d = c(null), P = B(() => {
+      var e;
+      return i.value ? {
+        ...o.options,
+        draggable: ((e = o.options) == null ? void 0 : e.draggable) ?? v,
+        onStart: (t) => {
+          var n, s;
+          f.value = !0, (n = o.options) != null && n.onStart && ((s = o.options) == null || s.onStart(t));
+        },
+        onEnd: (t) => {
+          setTimeout(() => {
+            var n, s;
+            f.value = !1, (n = o.options) != null && n.onEnd && ((s = o.options) == null || s.onEnd(t));
+          });
+        },
+        onSort: (t) => {
+          var n;
+          if ((n = o.options) != null && n.onSort) {
+            o.options.onSort(t);
+            return;
+          }
+          if (!o.disableAutoSort) {
+            const { oldIndex: s, newIndex: g, from: b, to: D } = t;
+            b === D && b === i.value && s !== void 0 && g !== void 0 && r(s, g);
+          }
+        }
+      } : {};
+    }), { announcementMessage: w, announce: T } = U(), { t: h } = z(), { draggableElement: y } = A(i, P), { isKeyboardUser: I } = K(), p = async (e) => {
+      if (await L(), e !== -1 && i.value) {
+        const t = i.value.children[e], n = t == null ? void 0 : t.querySelector(".b-draggable-handle button");
+        await L(), n == null || n.focus();
+      }
+    }, r = async (e, t) => {
+      if (e < 0 || t < 0 || e >= o.items.length || t >= o.items.length || e === t)
+        return;
+      const n = Array.from(o.items), [s] = n.splice(e, 1);
+      n.splice(t, 0, s), d.value = s, m("update:items", n.filter(Boolean));
+      const g = s.label, b = (o == null ? void 0 : o.announcement) || h("youHaveMovedFromPositionToPosition", {
+        itemLabel: g,
+        indexOrigin: e + 1,
+        indexTarget: t + 1,
+        total: o.items.length
+      });
+      o.announcement !== "disabled" && T(b);
+    }, M = (e) => r(e, e - 1), E = (e) => r(e, e + 1), H = (e) => r(e, e - 1), S = (e) => r(e, e + 1), F = (e) => r(e, 0), R = (e) => r(e, o.items.length - 1), x = (e) => ({
+      up: e === 0,
+      top: e === 0,
+      down: e === o.items.length - 1,
+      bottom: e === o.items.length - 1,
+      left: !0,
+      right: !0
+    });
+    return C(
+      () => o.items,
+      async (e) => {
+        if (e) {
+          if (I.value && e.length > 0 && u.value.length > 0) {
+            if (d.value) {
+              const t = e.indexOf(d.value);
+              t !== -1 && await p(t), d.value = null;
+            } else if (e.length > u.value.length) {
+              const t = e.findIndex((n) => !u.value.includes(n));
+              t !== -1 && await p(t);
+            }
+          }
+          u.value = [...e];
+        }
+      },
+      { deep: !0, immediate: !0 }
+    ), a({
+      /**
+       * A ref to the container DOM element.
+       */
+      containerRef: i,
+      /**
+       * The underlying SortableJS instance, which provides methods like `toArray()`, `sort()`, and `destroy()`.
+       */
+      draggableElement: y,
+      /**
+       * A boolean ref that is `true` when an item is being dragged.
+       */
+      isDragging: f,
+      /**
+       * Announces a message to screen reader users via the live region.
+       */
+      announce: T,
+      /**
+       * Moves an item from one index to another and emits the updated list.
+       */
+      moveItem: r,
+      /**
+       * Programmatically focuses the draggable handle button at the given index.
+       */
+      focus: p
+    }), { __sfc: !0, ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS: v, props: o, emit: m, containerRef: i, isDragging: f, internalItems: u, lastMovedItem: d, computedOptions: P, announcementMessage: w, announce: T, t: h, draggableElement: y, isKeyboardUser: I, focus: p, moveItem: r, moveItemUp: M, moveItemDown: E, moveItemLeft: H, moveItemRight: S, moveItemTop: F, moveItemBottom: R, disabledMenuItems: x };
+  }
+});
+var Y = function() {
+  var a = this, m = a._self._c, o = a._self._setupProxy;
+  return m(a.el, { ref: "containerRef", tag: "component" }, [a._l(a.items, function(v, i) {
+    return a._t("default", null, { item: v, index: i, moveUp: () => o.moveItemUp(i), moveRight: () => o.moveItemRight(i), moveDown: () => o.moveItemDown(i), moveLeft: () => o.moveItemLeft(i), moveTop: () => o.moveItemTop(i), moveBottom: () => o.moveItemBottom(i), disabledMenus: o.disabledMenuItems(i) });
+  }), m("div", { staticClass: "b-draggable__announcement", attrs: { role: "status", "aria-live": "polite" } }, [a._v(" " + a._s(o.announcementMessage) + " ")])], 2);
+}, j = [], q = /* @__PURE__ */ N(
+  X,
+  Y,
+  j,
+  !1,
+  null,
+  "72c4db16"
+);
+const ee = q.exports;
+export {
+  ee as d
+};
+//# sourceMappingURL=draggable.D5WFD5eX.js.map

package/dist/chunks/draggable.D5WFD5eX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.D5WFD5eX.js","sources":["../../src/components/draggable/composables/use-track-keyboard-user/use-track-keyboard-user.ts","../../src/components/draggable/draggable.vue"],"sourcesContent":["import { createGlobalState, useEventListener } from '@vueuse/core';\nimport { ref } from 'vue';\n\nexport const useTrackKeyboardUser = createGlobalState(() => {\n    // 1. Define this OUTSIDE the setup function so it acts as a global singleton\n    const isKeyboardUser = ref(false);\n\n    if (typeof window !== 'undefined') {\n        // Switch to keyboard mode on Tab\n        useEventListener(\n            window,\n            'keydown',\n            e => {\n                if (e.key === 'Tab') {\n                    isKeyboardUser.value = true;\n                }\n            },\n            { capture: true }\n        );\n\n        // Switch back to mouse mode on click/touch\n        useEventListener(\n            window,\n            'mousedown',\n            () => {\n                isKeyboardUser.value = false;\n            },\n            { capture: true }\n        );\n\n        useEventListener(\n            window,\n            'touchstart',\n            () => {\n                isKeyboardUser.value = false;\n            },\n            { capture: true, passive: true }\n        );\n\n        useEventListener(window, 'blur', () => {\n            isKeyboardUser.value = false;\n        });\n    }\n\n    return { isKeyboardUser };\n});\n","<template>\n    <component :is=\"el\" ref=\"containerRef\">\n        <slot\n            v-for=\"(item, index) of items\"\n            :item=\"item\"\n            :index=\"index\"\n            :move-up=\"() => moveItemUp(index)\"\n            :move-right=\"() => moveItemRight(index)\"\n            :move-down=\"() => moveItemDown(index)\"\n            :move-left=\"() => moveItemLeft(index)\"\n            :move-top=\"() => moveItemTop(index)\"\n            :move-bottom=\"() => moveItemBottom(index)\"\n            :disabled-menus=\"disabledMenuItems(index)\"\n            name=\"default\"\n        ></slot>\n        <div class=\"b-draggable__announcement\" role=\"status\" aria-live=\"polite\">\n            {{ announcementMessage }}\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import type {\n        BentoDraggableEmits,\n        BentoDraggableItems,\n        BentoDraggableOptions,\n        BentoDraggableProps,\n        BentoDraggableSortableEvent,\n    } from './draggable.types';\n    import { useBentoDraggable } from './composables/use-bento-draggable/use-bento-draggable';\n    import { useDraggableAnnouncement } from './composables/use-draggable-announcement';\n    import { useTrackKeyboardUser } from './composables/use-track-keyboard-user';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS = '>:not(.b-draggable__announcement)';\n\n    const props = defineProps({\n  announcement: { default: '' },\n  disableAutoSort: { type: Boolean, default: false },\n  el: { default: 'div' },\n  items: { default: () => [] },\n  options: { default: () => ({}) }\n});\n\n    const emit = defineEmits([\"update:items\"]);\n\n    /**\n     * Reference to the container of the draggable elements.\n     */\n    const containerRef = ref<HTMLElement | null>(null);\n    /**\n     * Indicates if there is an element being dragged inside the container.\n     */\n    const isDragging = ref<boolean>(false);\n\n    /**\n     * Internal copy of items used to track position changes for focus restoration.\n     */\n    const internalItems = ref<BentoDraggableItems>([]);\n\n    /**\n     * Tracks the item being moved via keyboard so focus can be restored to the correct element.\n     */\n    const lastMovedItem = ref<BentoDraggableItems[number] | null>(null);\n\n    const computedOptions = computed<BentoDraggableOptions>(() => {\n        if (!containerRef.value) {\n            return {};\n        }\n\n        return {\n            ...props.options,\n            draggable: props.options?.draggable ?? ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS,\n            onStart: (event: BentoDraggableSortableEvent) => {\n                isDragging.value = true;\n\n                if (props.options?.onStart) {\n                    props.options?.onStart(event);\n                }\n            },\n            onEnd: (event: BentoDraggableSortableEvent) => {\n                // This is a hack to move the event to the end of the event queue.\n                // cf this issue: https://github.com/SortableJS/Sortable/issues/1184\n                setTimeout(() => {\n                    isDragging.value = false;\n\n                    if (props.options?.onEnd) {\n                        props.options?.onEnd(event);\n                    }\n                });\n            },\n            onSort: (event: BentoDraggableSortableEvent) => {\n                // Always execute the user's custom onSort callback if provided\n                if (props.options?.onSort) {\n                    props.options.onSort(event);\n                    return;\n                }\n\n                // Automatically sync the v-model unless the user explicitly disabled it\n                if (!props.disableAutoSort) {\n                    const { oldIndex, newIndex, from, to } = event;\n\n                    if (\n                        from === to &&\n                        from === containerRef.value &&\n                        oldIndex !== undefined &&\n                        newIndex !== undefined\n                    ) {\n                        moveItem(oldIndex, newIndex);\n                    }\n                }\n            },\n        };\n    });\n\n    /**\n     * Handle reordering announcements for screen readers.\n     */\n    const { announcementMessage, announce } = useDraggableAnnouncement();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const { draggableElement } = useBentoDraggable(containerRef, computedOptions);\n\n    // When moving items between sibling `bento-draggable`, the item may be removed, causing the DOM to be destroyed and temporarily lose focus\n    // This is an alternative to query element `:focus-within` as the `:focus-within` will be gone until the other `bento-draggable` adds it into the list\n    const { isKeyboardUser } = useTrackKeyboardUser();\n\n    /**\n     * Focuses the draggable handle button at the given index.\n     * Waits for the next tick to ensure the DOM has been updated before focusing.\n     *\n     * @param index - The index of the item whose handle should receive focus.\n     */\n    const focus = async (index: number) => {\n        await nextTick();\n\n        if (index !== -1 && containerRef.value) {\n            const itemElement = containerRef.value.children[index] as HTMLElement;\n            const button = itemElement?.querySelector<HTMLButtonElement>('.b-draggable-handle button');\n            await nextTick();\n            button?.focus();\n        }\n    };\n\n    /**\n     * Moves an item from one position to another within the list,\n     * emits the updated list, and announces the change for screen readers.\n     *\n     * @param indexOrigin - The current index of the item to move.\n     * @param indexTarget - The desired index to move the item to.\n     */\n    const moveItem = async (indexOrigin: number, indexTarget: number) => {\n        if (\n            indexOrigin < 0 ||\n            indexTarget < 0 ||\n            indexOrigin >= props.items.length ||\n            indexTarget >= props.items.length ||\n            indexOrigin === indexTarget\n        ) {\n            return;\n        }\n\n        const newList = Array.from(props.items as BentoDraggableItems);\n        const [removed] = newList.splice(indexOrigin, 1);\n        newList.splice(indexTarget, 0, removed);\n\n        lastMovedItem.value = removed;\n\n        // Occasionally, there may be race conditions where the index is out-of-date due to the fast drag-and-drop or\n        // other async operations like onEnd > setTimeout.\n        // Filtering out null/undefined values ensures the list remains valid.\n        emit('update:items', newList.filter(Boolean));\n\n        const itemLabel = removed.label;\n\n        const message =\n            props?.announcement ||\n            t('youHaveMovedFromPositionToPosition', {\n                itemLabel,\n                indexOrigin: indexOrigin + 1,\n                indexTarget: indexTarget + 1,\n                total: props.items.length,\n            });\n\n        if (props.announcement !== 'disabled') {\n            announce(message);\n        }\n    };\n\n    const moveItemUp = (index: number) => moveItem(index, index - 1);\n\n    const moveItemDown = (index: number) => moveItem(index, index + 1);\n\n    const moveItemLeft = (index: number) => moveItem(index, index - 1);\n\n    const moveItemRight = (index: number) => moveItem(index, index + 1);\n\n    const moveItemTop = (index: number) => moveItem(index, 0);\n\n    const moveItemBottom = (index: number) => moveItem(index, props.items.length - 1);\n\n    /**\n     * Returns a pre-calculated disabled menus object for the current item.\n     */\n    const disabledMenuItems = (index: number) => {\n        return {\n            up: index === 0,\n            top: index === 0,\n            down: index === props.items.length - 1,\n            bottom: index === props.items.length - 1,\n            left: true,\n            right: true,\n        };\n    };\n\n    /**\n     * Watch for items changes and restore focus automatically\n     */\n    watch(\n        () => props.items,\n        async newItems => {\n            if (!newItems) {\n                return;\n            }\n\n            if (isKeyboardUser.value && newItems.length > 0 && internalItems.value.length > 0) {\n                if (lastMovedItem.value) {\n                    // Within-list reorder: focus the moved item at its new position\n                    const movedItemIndex = newItems.indexOf(lastMovedItem.value);\n\n                    if (movedItemIndex !== -1) {\n                        await focus(movedItemIndex);\n                    }\n\n                    lastMovedItem.value = null;\n                } else if (newItems.length > internalItems.value.length) {\n                    // Cross-list addition: focus the newly added item\n                    const newItemIndex = newItems.findIndex(item => !internalItems.value.includes(item));\n\n                    if (newItemIndex !== -1) {\n                        await focus(newItemIndex);\n                    }\n                }\n            }\n\n            internalItems.value = [...newItems];\n        },\n        { deep: true, immediate: true }\n    );\n\n    defineExpose({\n        /**\n         * A ref to the container DOM element.\n         */\n        containerRef,\n        /**\n         * The underlying SortableJS instance, which provides methods like `toArray()`, `sort()`, and `destroy()`.\n         */\n        draggableElement,\n        /**\n         * A boolean ref that is `true` when an item is being dragged.\n         */\n        isDragging,\n        /**\n         * Announces a message to screen reader users via the live region.\n         */\n        announce,\n        /**\n         * Moves an item from one index to another and emits the updated list.\n         */\n        moveItem,\n        /**\n         * Programmatically focuses the draggable handle button at the given index.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Drag and drop container that transforms a list of items into draggable elements.\n     * The library is based on SortableJS.\n     * @see {@link https://github.com/SortableJS/Sortable#readme | SortableJS documentation}\n     *\n     * @example\n     * import { BentoDraggable, BentoDraggableHandle, type BentoDraggableEvents } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDraggable, BentoDraggableHandle },\n     *     template: `\n     *          <bento-draggable\n     *              v-model=\"items\"\n     *              condensed\n     *              :options=\"{\n     *                  group: 'nested',\n     *                  animation: 150\n     *              }\"\n     *          >\n     *              <template #default=\"{ item, index, moveUp, moveDown }\">\n     *                  <div :key=\"item.id\">\n     *                      <bento-draggable-handle\n     *                          :label=\"item.label\"\n     *                          @move-up=\"moveUp\"\n     *                          @move-down=\"moveDown\"\n     *                      />\n     *                  </div>\n     *              </template>\n     *          </bento-draggable>\n     *     `,\n     *      setup () {\n     *          const items = ref([\n     *              { id: '1', label: 'Item 1' },\n     *              { id: '2', label: 'Item 2' }\n     *          ]);\n     *          return {\n     *              items,\n     *          }\n     *      }\n     * }\n     */\n\n    export default {\n        name: 'bento-draggable',\n        model: { prop: 'items', event: 'update:items' },\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./draggable.scss\" />\n"],"names":["useTrackKeyboardUser","createGlobalState","isKeyboardUser","ref","useEventListener","e","__default__","messages","ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS","containerRef","isDragging","internalItems","lastMovedItem","computedOptions","computed","props","_a","event","_b","oldIndex","newIndex","from","to","moveItem","announcementMessage","announce","useDraggableAnnouncement","t","useI18n","draggableElement","useBentoDraggable","focus","index","nextTick","itemElement","button","indexOrigin","indexTarget","newList","removed","emit","itemLabel","message","moveItemUp","moveItemDown","moveItemLeft","moveItemRight","moveItemTop","moveItemBottom","disabledMenuItems","watch","newItems","movedItemIndex","newItemIndex","item","expose"],"mappings":"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"}

package/dist/chunks/{drawer.WW7G9cSC.js → drawer.BuCNjIKQ.js}

@@ -1,6 +1,6 @@
 import { defineComponent as l, computed as o } from "vue";
 import { B as u, a as m } from "./es6.Cu3DYUPA.js";
-import { b as _ } from "./index.CJYgd0QI.js";
+import { b as _ } from "./index.BPUMyryR.js";
 import { u as c } from "./index.B6WW_F-J.js";
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/drawer.css";
@@ -71,4 +71,4 @@ const O = C.exports;
 export {
   O as d
 };
-//# sourceMappingURL=drawer.WW7G9cSC.js.map
+//# sourceMappingURL=drawer.BuCNjIKQ.js.map

package/dist/chunks/{drawer.WW7G9cSC.js.map → drawer.BuCNjIKQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"drawer.WW7G9cSC.js","sources":["../../src/components/drawer/drawer.vue"],"sourcesContent":["<template>\n    <div class=\"b-drawer\">\n        <Transition name=\"b-drawer__animation\">\n            <aside\n                v-show=\"isDrawerOpen\"\n                :id=\"props.drawerId\"\n                class=\"b-drawer__drawer\"\n                :class=\"conditionalDrawerClass\"\n                :aria-label=\"computedDrawerLabel\"\n            >\n                <div class=\"b-drawer__drawer-content\">\n                    <slot name=\"drawer\" />\n                </div>\n            </aside>\n        </Transition>\n\n        <div class=\"b-drawer__page\">\n            <div class=\"b-drawer__page-content\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import messages from './messages.json';\n    import { type BentoDrawerProps } from './drawer.types';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@adyen/bento-vue-i18n-demi';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  isDrawerOpen: { type: Boolean, default: false },\n  drawerId: null,\n  drawerLabel: { default: '' }\n});\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n        m: BMediaQueryMMax,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isSmallDevice = breakpoints.smallerOrEqual('m');\n    const isMobileDevice = breakpoints.smallerOrEqual('s');\n\n    const computedDrawerLabel = computed(() => {\n        return props.drawerLabel || t('menu');\n    });\n\n    const conditionalDrawerClass = computed(() => ({\n        'b-drawer__drawer--overlay-content': isSmallDevice.value,\n        'b-drawer__drawer--full-width': isMobileDevice.value,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The `bento-drawer` component provides a responsive drawer-based navigation system.\n     *\n     * @usage\n     * <bento-drawer\n     *     drawer-id=\"main-drawer\"\n     *     drawer-label=\"Main drawer\"\n     *     :is-drawer-open=\"true\"\n     * >\n     *     <template #menu>Drawer menu items</template>\n     *     <template #page>Main page content</template>\n     * </bento-drawer>\n     */\n    export default {\n        name: 'bento-drawer',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./drawer.scss\" />\n"],"names":["__default__","messages","breakpoints","useBreakpoints","BMediaQuerySMax","BMediaQueryMMax","t","useI18n","isSmallDevice","isMobileDevice","computedDrawerLabel","computed","props","conditionalDrawerClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EIA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;iBArCAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,MAC5B,GAAAC;AAAA,IACA,CAAA,GAGP,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAN,EAAA,eAAA,GAAA,GACAO,IAAAP,EAAA,eAAA,GAAA,GAEAQ,IAAAC,EAAA,MACIC,EAAA,eAAAN,EAAA,MAAA,CAAoC,GAGxCO,IAAAF,EAAA,OAAA;AAAA,MAA+C,qCAAAH,EAAA;AAAA,MACQ,gCAAAC,EAAA;AAAA,IACJ,EAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"drawer.BuCNjIKQ.js","sources":["../../src/components/drawer/drawer.vue"],"sourcesContent":["<template>\n    <div class=\"b-drawer\">\n        <Transition name=\"b-drawer__animation\">\n            <aside\n                v-show=\"isDrawerOpen\"\n                :id=\"props.drawerId\"\n                class=\"b-drawer__drawer\"\n                :class=\"conditionalDrawerClass\"\n                :aria-label=\"computedDrawerLabel\"\n            >\n                <div class=\"b-drawer__drawer-content\">\n                    <slot name=\"drawer\" />\n                </div>\n            </aside>\n        </Transition>\n\n        <div class=\"b-drawer__page\">\n            <div class=\"b-drawer__page-content\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import messages from './messages.json';\n    import { type BentoDrawerProps } from './drawer.types';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@adyen/bento-vue-i18n-demi';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  isDrawerOpen: { type: Boolean, default: false },\n  drawerId: null,\n  drawerLabel: { default: '' }\n});\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n        m: BMediaQueryMMax,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isSmallDevice = breakpoints.smallerOrEqual('m');\n    const isMobileDevice = breakpoints.smallerOrEqual('s');\n\n    const computedDrawerLabel = computed(() => {\n        return props.drawerLabel || t('menu');\n    });\n\n    const conditionalDrawerClass = computed(() => ({\n        'b-drawer__drawer--overlay-content': isSmallDevice.value,\n        'b-drawer__drawer--full-width': isMobileDevice.value,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The `bento-drawer` component provides a responsive drawer-based navigation system.\n     *\n     * @usage\n     * <bento-drawer\n     *     drawer-id=\"main-drawer\"\n     *     drawer-label=\"Main drawer\"\n     *     :is-drawer-open=\"true\"\n     * >\n     *     <template #menu>Drawer menu items</template>\n     *     <template #page>Main page content</template>\n     * </bento-drawer>\n     */\n    export default {\n        name: 'bento-drawer',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./drawer.scss\" />\n"],"names":["__default__","messages","breakpoints","useBreakpoints","BMediaQuerySMax","BMediaQueryMMax","t","useI18n","isSmallDevice","isMobileDevice","computedDrawerLabel","computed","props","conditionalDrawerClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EIA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;iBArCAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,MAC5B,GAAAC;AAAA,IACA,CAAA,GAGP,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAN,EAAA,eAAA,GAAA,GACAO,IAAAP,EAAA,eAAA,GAAA,GAEAQ,IAAAC,EAAA,MACIC,EAAA,eAAAN,EAAA,MAAA,CAAoC,GAGxCO,IAAAF,EAAA,OAAA;AAAA,MAA+C,qCAAAH,EAAA;AAAA,MACQ,gCAAAC,EAAA;AAAA,IACJ,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dropdown-tag.BqSrkuwj.js → dropdown-tag.LIt7SdwS.js}

@@ -1,12 +1,12 @@
 import { defineComponent as u, computed as w, toRefs as g, ref as v, watch as V } from "vue";
 import { B as D } from "./avatar.rwWPYJnt.js";
-import { B as p, f as C } from "./dropdown.CIEm6MBB.js";
+import { B as p, f as C } from "./dropdown.NTGSuWAw.js";
 import { u as _ } from "./form-field.D_2g7vaP.js";
 import { d as i, B as b } from "./typography.C8lPlsbD.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as M } from "./use-country-items.B4j8pAvW.js";
 import { a as h } from "./country.types.jjXwaoMl.js";
-import { L as $ } from "./listbox-option-tag.Ddyl2vuc.js";
+import { L as $ } from "./listbox-option-tag.BFW39wpD.js";
 import { B as T } from "./payment-method.B3CkgsAY.js";
 import "../assets/dropdown-tag.css";
 const U = u({
@@ -291,4 +291,4 @@ export {
   le as d,
   _e as e
 };
-//# sourceMappingURL=dropdown-tag.BqSrkuwj.js.map
+//# sourceMappingURL=dropdown-tag.LIt7SdwS.js.map

package/dist/chunks/{dropdown-tag.BqSrkuwj.js.map → dropdown-tag.LIt7SdwS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dropdown-tag.BqSrkuwj.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label, data }\"\n            v-bind=\"$props\"\n            :items=\"dropdownItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the avatar dropdown with.\n         * It must be an array of {@see BentoAvatarListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option.\n         * @property {string | number} value.value - Value of the option.\n         * @property {string} value.src - Image source of the avatar image.\n         */\n        items: {\n            type: Array as PropType<BentoAvatarListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownAvatar \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownAvatar\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Avatar Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n     * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownAvatar },\n     *     template: `\n     *          <bento-dropdown-avatar\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('user-id-1') // Default value\n     *         const options: BentoAvatarListboxOptions = [\n     *              { label: 'User 1', value: 'user-id-1' },\n     *              { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-avatar',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label }\"\n            v-bind=\"$props\"\n            :items=\"countryItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, toRefs } from 'vue';\n    import { type BentoCountryListboxOptions } from './dropdown-country.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoCountryVariant } from '@/components/country';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCountryListboxOptions }\n         * @deprecated Since v2.0.0. Use `BentoDropdown` instead.\n         * @property {BentoCountryCode | string} value.value - Country code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCountryListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Which label variant to display.\n         * @values iso, name, phone_code, capital\n         */\n        variant: {\n            type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n            default: BentoCountryVariant.CUSTOM,\n            validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const { variant, items } = toRefs(props);\n    const countryItems = useCountryItems(variant, items);\n\n    if (variant.value === 'custom' || items.value.some(item => item.label)) {\n        deprecate(\n            'BentoDropdownCountry \"custom\" variant and \"items\" prop \"label\" key',\n            'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels',\n            '2.0.0'\n        );\n    }\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCountry \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCountry\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Country Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-country\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-country',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"slotProps\"\n        v-bind=\"$props\"\n        :search=\"search\"\n        :items=\"filteredItems\"\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, ref, watch } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '@/internal/listbox/';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the currency dropdown with.\n         * It must be an array of {@see BentoCurrencyListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCurrencyListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n    watch(\n        () => props.items,\n        () => (filteredItems.value = props.items),\n        { immediate: true }\n    );\n\n    const search = props.search\n        ? props.search\n        : {\n              debounceTime: 500,\n              searchEvent: async (searchTerm: string) => {\n                  // Combine value and label to be able to search by the currency code\n                  const searchableItems = props.items.map(item => ({\n                      ...item,\n                      label: `${item.value} ${item.label}`,\n                  }));\n\n                  const searchResults = useSearchBarFilter(\n                      ref(searchTerm),\n                      ref<BentoCurrencyListboxOptions>(searchableItems),\n                      props?.search?.searchEvent,\n                      ref(false)\n                  ).value;\n\n                  // Restore original labels by removing the prepended value\n                  const normalizedResults = searchResults?.map(result => ({\n                      ...result,\n                      label: result.label.substring(result.value.length + 1),\n                  }));\n\n                  filteredItems.value = normalizedResults;\n              },\n          };\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCurrency \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCurrency\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency Dropdown showing a selectable list of currencies.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-currency\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-currency',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            class=\"b-dropdown-payment-method\"\n            v-bind=\"$props\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <template #display-value=\"{ label, value }\">\n                <bento-payment-method :type=\"value\" :label=\"label\" />\n            </template>\n\n            <template #default=\"{ value, label, description }\">\n                <div class=\"b-dropdown-payment-method__item\">\n                    <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n                    <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n                        <bento-typography el=\"span\">{{ label }}</bento-typography>\n                        <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n                            description\n                        }}</bento-typography>\n                    </div>\n                </div>\n            </template>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import { BentoTypography } from '@/components/typography';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the payment method dropdown with.\n         * It must be an array of {@see BentoPaymentMethodListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n         */\n        items: {\n            type: Array as PropType<BentoPaymentMethodListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownPaymentMethod \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownPaymentMethod\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Payment method Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n     * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownPaymentMethod },\n     *     template: `\n     *          <bento-dropdown-payment-method\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 'Visa'\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('ideal') // Default value\n     *         const options: BentoPaymentMethodListboxOptions = [\n     *              { label: 'Option 1', value: 'ideal' },\n     *              { label: 'Option 2', value: 'visa' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-payment-method',\n        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n    <bento-dropdown\n        v-slot=\"{ label, data }\"\n        v-bind=\"$props\"\n        class=\"b-dropdown-tag\"\n        :items=\"tagItems\"\n        show-slot-content-in-multiple\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the tag dropdown with.\n         * It must be an array of {@see BentoTagListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string | number} value.value - Value of the option\n         * @property {string} value.variant - The BentTag variant shown for the option.\n         */\n        items: {\n            type: Array as PropType<BentoTagListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownTag \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownTag\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Tag Dropdown showing a selectable list of tags.\n     *\n     * @example\n     * import { BentoDropdownTag } from '@adyen/bento-vue2';\n     * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownTag },\n     *     template: `\n     *          <bento-dropdown-tag\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('unique-id-1') // Default value\n     *         const options: BentoTagListboxOptions = [\n     *              { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n     *              { label: 'Online', value: 'unique-id-2', variant: 'green' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-tag',\n        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","onUpdateModelValue","selectedValue","dropdownItems","computed","props","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","searchResults","useSearchBarFilter","_a","normalizedResults","result","__default__$1","__default__","tagItems"],"mappings":"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"}
+{"version":3,"file":"dropdown-tag.LIt7SdwS.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label, data }\"\n            v-bind=\"$props\"\n            :items=\"dropdownItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the avatar dropdown with.\n         * It must be an array of {@see BentoAvatarListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option.\n         * @property {string | number} value.value - Value of the option.\n         * @property {string} value.src - Image source of the avatar image.\n         */\n        items: {\n            type: Array as PropType<BentoAvatarListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownAvatar \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownAvatar\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Avatar Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n     * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownAvatar },\n     *     template: `\n     *          <bento-dropdown-avatar\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('user-id-1') // Default value\n     *         const options: BentoAvatarListboxOptions = [\n     *              { label: 'User 1', value: 'user-id-1' },\n     *              { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-avatar',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label }\"\n            v-bind=\"$props\"\n            :items=\"countryItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, toRefs } from 'vue';\n    import { type BentoCountryListboxOptions } from './dropdown-country.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoCountryVariant } from '@/components/country';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCountryListboxOptions }\n         * @deprecated Since v2.0.0. Use `BentoDropdown` instead.\n         * @property {BentoCountryCode | string} value.value - Country code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCountryListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Which label variant to display.\n         * @values iso, name, phone_code, capital\n         */\n        variant: {\n            type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n            default: BentoCountryVariant.CUSTOM,\n            validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const { variant, items } = toRefs(props);\n    const countryItems = useCountryItems(variant, items);\n\n    if (variant.value === 'custom' || items.value.some(item => item.label)) {\n        deprecate(\n            'BentoDropdownCountry \"custom\" variant and \"items\" prop \"label\" key',\n            'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels',\n            '2.0.0'\n        );\n    }\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCountry \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCountry\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Country Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-country\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-country',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"slotProps\"\n        v-bind=\"$props\"\n        :search=\"search\"\n        :items=\"filteredItems\"\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, ref, watch } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '@/internal/listbox/';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the currency dropdown with.\n         * It must be an array of {@see BentoCurrencyListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCurrencyListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n    watch(\n        () => props.items,\n        () => (filteredItems.value = props.items),\n        { immediate: true }\n    );\n\n    const search = props.search\n        ? props.search\n        : {\n              debounceTime: 500,\n              searchEvent: async (searchTerm: string) => {\n                  // Combine value and label to be able to search by the currency code\n                  const searchableItems = props.items.map(item => ({\n                      ...item,\n                      label: `${item.value} ${item.label}`,\n                  }));\n\n                  const searchResults = useSearchBarFilter(\n                      ref(searchTerm),\n                      ref<BentoCurrencyListboxOptions>(searchableItems),\n                      props?.search?.searchEvent,\n                      ref(false)\n                  ).value;\n\n                  // Restore original labels by removing the prepended value\n                  const normalizedResults = searchResults?.map(result => ({\n                      ...result,\n                      label: result.label.substring(result.value.length + 1),\n                  }));\n\n                  filteredItems.value = normalizedResults;\n              },\n          };\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCurrency \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCurrency\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency Dropdown showing a selectable list of currencies.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-currency\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-currency',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            class=\"b-dropdown-payment-method\"\n            v-bind=\"$props\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <template #display-value=\"{ label, value }\">\n                <bento-payment-method :type=\"value\" :label=\"label\" />\n            </template>\n\n            <template #default=\"{ value, label, description }\">\n                <div class=\"b-dropdown-payment-method__item\">\n                    <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n                    <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n                        <bento-typography el=\"span\">{{ label }}</bento-typography>\n                        <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n                            description\n                        }}</bento-typography>\n                    </div>\n                </div>\n            </template>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import { BentoTypography } from '@/components/typography';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the payment method dropdown with.\n         * It must be an array of {@see BentoPaymentMethodListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n         */\n        items: {\n            type: Array as PropType<BentoPaymentMethodListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownPaymentMethod \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownPaymentMethod\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Payment method Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n     * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownPaymentMethod },\n     *     template: `\n     *          <bento-dropdown-payment-method\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 'Visa'\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('ideal') // Default value\n     *         const options: BentoPaymentMethodListboxOptions = [\n     *              { label: 'Option 1', value: 'ideal' },\n     *              { label: 'Option 2', value: 'visa' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-payment-method',\n        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n    <bento-dropdown\n        v-slot=\"{ label, data }\"\n        v-bind=\"$props\"\n        class=\"b-dropdown-tag\"\n        :items=\"tagItems\"\n        show-slot-content-in-multiple\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the tag dropdown with.\n         * It must be an array of {@see BentoTagListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string | number} value.value - Value of the option\n         * @property {string} value.variant - The BentTag variant shown for the option.\n         */\n        items: {\n            type: Array as PropType<BentoTagListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownTag \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownTag\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Tag Dropdown showing a selectable list of tags.\n     *\n     * @example\n     * import { BentoDropdownTag } from '@adyen/bento-vue2';\n     * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownTag },\n     *     template: `\n     *          <bento-dropdown-tag\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('unique-id-1') // Default value\n     *         const options: BentoTagListboxOptions = [\n     *              { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n     *              { label: 'Online', value: 'unique-id-2', variant: 'green' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-tag',\n        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","onUpdateModelValue","selectedValue","dropdownItems","computed","props","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","searchResults","useSearchBarFilter","_a","normalizedResults","result","__default__$1","__default__","tagItems"],"mappings":";;;;;;;;;;;AAsFI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA,EAAA,MAAA,aAAA;AAEV,CAAA;;;;;;;;;;;;;;;;;;iBAhDA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAA,CAAAC,MAAAJ,EAAAI,CAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,MAAA,IAAA,CAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,KAAAC,EAAA,OAAA,EAAA,OAAAF,GAAA,OAAAC,GAAA,MAAAC,EAAA,EAAA,CAAA;AAEA,WAAAH,EAAA,SACII;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;sBCsDRC,IAAAb,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA,EAAA,MAAA,aAAA;AAEV,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;iBAzDA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAA,CAAAC,MAAAJ,EAAAI,CAAA,GAEA,EAAA,SAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAAR,CAAA,GACAS,IAAAC,EAAAJ,GAAAC,CAAA;AAEA,YAAAD,EAAA,UAAA,YAAAC,EAAA,MAAA,KAAA,CAAAI,MAAAA,EAAA,KAAA,MACIP;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA,GAIRJ,EAAA,SACII;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;sBC+CRQ,IAAApB,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA,EAAA,MAAA,aAAA;AAEV,CAAA;;;;;;;;;;;;;;;;;iBAlFA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAA,CAAAC,MAAAJ,EAAAI,CAAA,GAEAgB,IAAAC,EAAA,CAAA,CAAA;AAEA,IAAAC;AAAA,MAAA,MAAAf,EAAA;AAAA,MACgB,MAAAa,EAAA,QAAAb,EAAA;AAAA,MACuB,EAAA,WAAA,GAAA;AAAA,IACjB;AAGtB,UAAAgB,IAAAhB,EAAA,SAAAA,EAAA,SAAA;AAAA,MAEM,cAAA;AAAA,MACkB,aAAA,OAAAiB,MAAA;;AAGV,cAAAC,IAAAlB,EAAA,MAAA,IAAA,CAAAW,OAAA;AAAA,UAAiD,GAAAA;AAAA,UAC1C,OAAA,GAAAA,EAAA,KAAA,IAAAA,EAAA,KAAA;AAAA,QAC+B,EAAA,GAGtCQ,IAAAC;AAAA,UAAsBN,EAAAG,CAAA;AAAA,UACJH,EAAAI,CAAA;AAAA,WACkCG,IAAArB,KAAA,gBAAAA,EAAA,WAAA,gBAAAqB,EAAA;AAAA,UACjCP,EAAA,EAAA;AAAA,QACN,EAAA,OAIbQ,IAAAH,KAAA,gBAAAA,EAAA,IAAA,CAAAI,OAAA;AAAA,UAAwD,GAAAA;AAAA,UACjD,OAAAA,EAAA,MAAA,UAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,QACkD;AAGzD,QAAAV,EAAA,QAAAS;AAAA,MAAsB;AAAA,IAC1B;AAGV,WAAAtB,EAAA,SACII;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;sBCaRoB,IAAAhC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA,EAAA,MAAA,aAAA;AAEV,CAAA;;;;;;;;;;;;;;;;;iBA9CA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAA,CAAAC,MAAAJ,EAAAI,CAAA;AAEA,WAAAG,EAAA,SACII;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;;sBCoBRqB,IAAAjC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA,EAAA,MAAA,aAAA;AAEV,CAAA;;;;;;;;;;;;;;;;;;iBA9CA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAA,CAAAC,MAAAJ,EAAAI,CAAA,GAEA6B,IAAA3B,EAAA,MAAA;;AAAA,cAAAsB,IAAArB,EAAA,UAAA,gBAAAqB,EAAA,IAAA,CAAA,EAAA,OAAAnB,GAAA,OAAAD,GAAA,SAAAK,EAAA,OAAA,EAAA,OAAAJ,GAAA,OAAAD,GAAA,MAAAK,EAAA;AAAA,KAAA;AAEA,WAAAN,EAAA,SACII;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;"}