@adyen/bento-vue2 1.65.0 → 1.66.0

package/dist/chunks/date.BfyWX2PY.js

@@ -0,0 +1,160 @@
+import { defineComponent as o, computed as s } from "vue";
+import { u as t } from "./i18n.BQkEbtPM.js";
+import { B as c } from "./typography.J1v_SPG3.js";
+import { n as y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/date.css";
+var i = /* @__PURE__ */ ((_) => (_.SHORT_MONTH = "LLL", _.DAY_OF_MONTH = "d", _.LONG_WEEKDAY = "EEEE", _.SHORT_TIME_WITH_PERIOD = "h:mm aa", _.SHORT_TIME_WITHOUT_PERIOD = "H:mm", _.EXACT_TIME_WITH_PERIOD = "h:mm:ss aa", _.EXACT_TIME_WITHOUT_PERIOD = "H:mm:ss", _.LONG_DATE = "LLLL dd, yyyy", _.SHORT_DATE = "LLL dd, yyyy", _.FULL_DATE_EXACT_TIME_WITH_PERIOD = "LLL dd, yyyy, h:mm:ss aa", _.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm:ss", _.FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD = "LLL dd, yyyy, h:mm:ss aa O", _.FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm:ss O", _.FULL_DATE_TIME_WITH_PERIOD = "LLL dd, yyyy, h:mm aa", _.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD = "LLL dd, yyyy, h:mm aa O", _.FULL_DATE_TIME_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm", _.FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm O", _))(i || {});
+const T = {
+  SHORT_MONTH: {
+    month: "short"
+  },
+  DAY_OF_MONTH: {
+    day: "numeric"
+  },
+  LONG_WEEKDAY: {
+    weekday: "long"
+  },
+  SHORT_TIME_WITH_PERIOD: {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: !0
+  },
+  SHORT_TIME_WITHOUT_PERIOD: {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: !1
+  },
+  EXACT_TIME_WITH_PERIOD: {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: !0
+  },
+  EXACT_TIME_WITHOUT_PERIOD: {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: !1
+  },
+  LONG_DATE: {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  },
+  SHORT_DATE: {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  },
+  FULL_DATE_TIME_WITH_PERIOD: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: !0
+  },
+  FULL_DATE_TIME_WITHOUT_PERIOD: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: !1
+  },
+  FULL_DATE_EXACT_TIME_WITH_PERIOD: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: !0
+  },
+  FULL_DATE_EXACT_TIME_WITHOUT_PERIOD: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: !1
+  },
+  FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: !0,
+    timeZoneName: "short"
+  },
+  FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: !1,
+    timeZoneName: "short"
+  },
+  FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: !0,
+    timeZoneName: "short"
+  },
+  FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: !1,
+    timeZoneName: "short"
+  }
+}, L = {
+  name: "bento-date"
+}, d = /* @__PURE__ */ o({
+  ...L,
+  props: {
+    date: { default: null },
+    format: { default: i.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD },
+    disableTypography: { type: Boolean, default: !1 }
+  },
+  setup(_) {
+    const r = _, { locale: n } = t(void 0, !0), e = Object.entries(i).reduce(
+      (m, [u, E]) => (m[E.toString()] = u, m),
+      {}
+    ), I = s(() => {
+      if (!r.date)
+        return "";
+      const m = typeof r.date == "string" ? new Date(r.date) : r.date, u = e == null ? void 0 : e[r.format];
+      let E;
+      return u && (T != null && T[u]) && (E = T == null ? void 0 : T[u]), new Intl.DateTimeFormat(n.value, E).format(m);
+    });
+    return { __sfc: !0, BentoDateFormatPresets: T, props: r, locale: n, bentoDateFormatKeyValuePairs: e, formattedDate: I, BentoTypography: c };
+  }
+});
+var O = function() {
+  var r = this, n = r._self._c, e = r._self._setupProxy;
+  return n("div", { staticClass: "b-date" }, [r.disableTypography ? [r._v(r._s(e.formattedDate))] : n(e.BentoTypography, { staticClass: "b-date__label", attrs: { el: "span", variant: "body", strong: "" } }, [r._v(" " + r._s(e.formattedDate) + " ")])], 2);
+}, a = [], h = /* @__PURE__ */ y(
+  d,
+  O,
+  a,
+  !1,
+  null,
+  "02030534"
+);
+const f = h.exports;
+export {
+  f as B,
+  i as a
+};
+//# sourceMappingURL=date.BfyWX2PY.js.map

package/dist/chunks/date.BfyWX2PY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.BfyWX2PY.js","sources":["../../src/components/date/date.types.ts","../../src/components/date/date.vue"],"sourcesContent":["export enum BentoDateFormat {\n    // MONTH\n    SHORT_MONTH = 'LLL', // Jun\n\n    // DAY\n    DAY_OF_MONTH = 'd', // 1, 2, ..., 31,\n    LONG_WEEKDAY = 'EEEE', // Friday\n\n    // TIME\n    SHORT_TIME_WITH_PERIOD = `h:mm aa`, // 2:44 PM\n    SHORT_TIME_WITHOUT_PERIOD = 'H:mm', // 14:45\n    EXACT_TIME_WITH_PERIOD = 'h:mm:ss aa', // 2:05:11 PM\n    EXACT_TIME_WITHOUT_PERIOD = 'H:mm:ss', // 14:05:11\n\n    // DATE\n    LONG_DATE = 'LLLL dd, yyyy', // June 30, 2023\n    SHORT_DATE = 'LLL dd, yyyy', // Jun 30, 2023\n    FULL_DATE_EXACT_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm:ss aa`, // June 30, 2023, 2:54:10 PM\n    FULL_DATE_EXACT_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss`, // June 30, 2023, 14:54:42\n    FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm:ss aa O`, // June 30, 2023, 2:56:07 PM GMT+2\n    FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss O`, // June 30, 2023, 14:56:28 GMT+2\n    FULL_DATE_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm aa`, // Jun 30, 2023, 2:48 PM\n    FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm aa O`, // Jun 30, 2023, 2:44 PM GMT+2\n    FULL_DATE_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm`, // Jun 30, 2023, 14:48\n    FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm O`, // Jun 30, 2023, 14:43 GMT+2\n}\n\nexport interface BentoDateProps {\n    /**\n     * The date to format. The data can be supplied as:\n     * - a Date object.\n     * - a number of milliseconds elapsed since the epoch.\n     * - a date string e.g. '2023-07-31T10:55:22+02:00'.\n     */\n    date?: Date | number | string | null;\n    /**\n     * The string format of the date to be displayed\n     */\n    format?: BentoDateFormat | `${BentoDateFormat}`;\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography\n     */\n    disableTypography?: boolean;\n}\n","<template>\n    <div class=\"b-date\">\n        <bento-typography v-if=\"!disableTypography\" class=\"b-date__label\" el=\"span\" variant=\"body\" strong>\n            {{ formattedDate }}\n        </bento-typography>\n        <template v-else>{{ formattedDate }}</template>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoDateFormat, type BentoDateProps } from './date.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoTypography } from '@/components/typography';\n\n    const props = defineProps({\n  date: { default: null },\n  format: { default: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD },\n  disableTypography: { type: Boolean, default: false }\n});\n\n    const { locale } = useI18n(undefined, true);\n\n    /**\n     * This is a reverse mapping of the BentoDateFormat enum.\n     * It allows us to get the key of the enum by its value, which is then used to look up the\n     * corresponding formatting options in `BentoDateFormatPresets`.\n     */\n    const bentoDateFormatKeyValuePairs = Object.entries(BentoDateFormat).reduce<\n        Record<BentoDateFormat, keyof typeof BentoDateFormat>\n    >(\n        (acc, [key, value]) => {\n            acc[value.toString()] = key;\n            return acc;\n        },\n        {} as Record<BentoDateFormat, keyof typeof BentoDateFormat>\n    );\n\n    const formattedDate = computed(() => {\n        // If null, return empty string\n        if (!props.date) {\n            return '';\n        }\n        const datePropAsDateObject = typeof props.date === 'string' ? new Date(props.date) : props.date;\n\n        const formatKeyEntry = bentoDateFormatKeyValuePairs?.[props.format];\n\n        let dateFormat: Intl.DateTimeFormatOptions | undefined = undefined;\n        // Translate the key of the enum to the Intl.DateTimeFormatOptions configuration object\n        if (formatKeyEntry && BentoDateFormatPresets?.[formatKeyEntry]) {\n            dateFormat = BentoDateFormatPresets?.[formatKeyEntry];\n        }\n        return new Intl.DateTimeFormat(locale.value, dateFormat).format(datePropAsDateObject);\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The format presets to use when being supplied with a key name in BentoDateFormat.\n     * They translate to configuration options that are used in the Intl.DateTimeFormat function\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n     */\n    const BentoDateFormatPresets: { [key in keyof typeof BentoDateFormat]: Intl.DateTimeFormatOptions } = {\n        SHORT_MONTH: {\n            month: 'short',\n        },\n        DAY_OF_MONTH: {\n            day: 'numeric',\n        },\n        LONG_WEEKDAY: {\n            weekday: 'long',\n        },\n        SHORT_TIME_WITH_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n        },\n        SHORT_TIME_WITHOUT_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n        },\n        EXACT_TIME_WITH_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n        },\n        EXACT_TIME_WITHOUT_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: false,\n        },\n        LONG_DATE: {\n            year: 'numeric',\n            month: 'long',\n            day: 'numeric',\n        },\n        SHORT_DATE: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n        },\n        FULL_DATE_TIME_WITH_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n        },\n        FULL_DATE_TIME_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n        },\n        FULL_DATE_EXACT_TIME_WITH_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n        },\n        FULL_DATE_EXACT_TIME_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: '2-digit',\n            minute: '2-digit',\n            second: '2-digit',\n            hour12: false,\n        },\n        FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: false,\n            timeZoneName: 'short',\n        },\n    };\n\n    /**\n     * A Date component is used to display a formatted date value.\n     *\n     * @example\n     * import { BentoDate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDate },\n     *     template: `\n     *          <bento-date :date=\"dateObject\" :format=\"BentoDateFormat.LONG_DATE\"/>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-date',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date.scss\" />\n"],"names":["BentoDateFormat","BentoDateFormat2","BentoDateFormatPresets","__default__","locale","useI18n","bentoDateFormatKeyValuePairs","acc","key","value","formattedDate","computed","props","datePropAsDateObject","formatKeyEntry","dateFormat"],"mappings":"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"}

package/dist/chunks/{dropdown-tag.DKhxBV52.js → dropdown-tag.DYg5l6HT.js}

@@ -1,6 +1,6 @@
 import { defineComponent as a, computed as i, toRefs as m } from "vue";
 import { B as v } from "./avatar.BgwjpLQO.js";
-import { B as p } from "./dropdown.DV7uhHNP.js";
+import { B as p } from "./dropdown.BWsU98dn.js";
 import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { d as y, B as b } from "./typography.J1v_SPG3.js";
 import { u as w } from "./use-country-items.HFnjuDsG.js";
@@ -212,4 +212,4 @@ export {
   nt as d,
   st as e
 };
-//# sourceMappingURL=dropdown-tag.DKhxBV52.js.map
+//# sourceMappingURL=dropdown-tag.DYg5l6HT.js.map

package/dist/chunks/{dropdown-tag.DKhxBV52.js.map → dropdown-tag.DYg5l6HT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dropdown-tag.DKhxBV52.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 v-slot=\"{ label, data }\" v-bind=\"$props\" :items=\"dropdownItems\" @input=\"onInput\">\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\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    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ label }\" v-bind=\"$props\" :items=\"countryItems\" @input=\"onInput\">\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType, toRefs } from 'vue';\n    import { BentoCountryListboxOptions } from './dropdown-country.types';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\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 {string} value.label - Use BentoDropdown instead of custom labels\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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', 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</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    });\n</script>\n","<template>\n    <bento-dropdown v-slot=\"slotProps\" v-bind=\"$props\" @input=\"onInput\">\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types';\n    import { ListboxOptionTag } from '@/internal';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country 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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\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    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ value, label }\" v-bind=\"$props\" @input=\"onInput\">\n            <bento-payment-method :type=\"value\" :label=\"label\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\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    });\n</script>\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        @input=\"onInput\"\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, PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '../../../../../types';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\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    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","onInput","selectedValue","emit","dropdownItems","computed","props","value","label","src","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","deprecate","__default__$2","__default__$1","__default__","tagItems","_a"],"mappings":";;;;;;;;;;AAkEI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;iBApCAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEAE,IAAAC,EAAA,MAAAC,EAAA,MAAA,IAAA,CAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,KAAAC,EAAA,OAAA,EAAA,OAAAF,GAAA,OAAAC,GAAA,MAAAC,EAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;sBCqDAC,IAAAV,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7CAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEA,EAAA,SAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAAP,CAAA,GACAQ,IAAAC,EAAAJ,GAAAC,CAAA;AAEA,YAAAD,EAAA,UAAA,YAAAC,EAAA,MAAA,KAAA,CAAAI,MAAAA,EAAA,KAAA,MACIC;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;sBCQRC,IAAAlB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;0CAlCA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;;;;;;;;;;;;;;;;sBCkCAiB,IAAAnB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;0CAlCA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;;;;;;;;;;;;;;;;sBCsCAkB,IAAApB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;iBAlCAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEAmB,IAAAhB,EAAA,MAAA;;AAAA,cAAAiB,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,IAAA,CAAA,EAAA,OAAAd,GAAA,OAAAD,GAAA,SAAAI,EAAA,OAAA,EAAA,OAAAH,GAAA,OAAAD,GAAA,MAAAI,EAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dropdown-tag.DYg5l6HT.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 v-slot=\"{ label, data }\" v-bind=\"$props\" :items=\"dropdownItems\" @input=\"onInput\">\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\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    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ label }\" v-bind=\"$props\" :items=\"countryItems\" @input=\"onInput\">\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType, toRefs } from 'vue';\n    import { BentoCountryListboxOptions } from './dropdown-country.types';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\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 {string} value.label - Use BentoDropdown instead of custom labels\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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', 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</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    });\n</script>\n","<template>\n    <bento-dropdown v-slot=\"slotProps\" v-bind=\"$props\" @input=\"onInput\">\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types';\n    import { ListboxOptionTag } from '@/internal';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country 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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\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    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ value, label }\" v-bind=\"$props\" @input=\"onInput\">\n            <bento-payment-method :type=\"value\" :label=\"label\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\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    });\n</script>\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        @input=\"onInput\"\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, PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '../../../../../types';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\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\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\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    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","onInput","selectedValue","emit","dropdownItems","computed","props","value","label","src","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","deprecate","__default__$2","__default__$1","__default__","tagItems","_a"],"mappings":";;;;;;;;;;AAkEI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;iBApCAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEAE,IAAAC,EAAA,MAAAC,EAAA,MAAA,IAAA,CAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,KAAAC,EAAA,OAAA,EAAA,OAAAF,GAAA,OAAAC,GAAA,MAAAC,EAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;sBCqDAC,IAAAV,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7CAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEA,EAAA,SAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAAP,CAAA,GACAQ,IAAAC,EAAAJ,GAAAC,CAAA;AAEA,YAAAD,EAAA,UAAA,YAAAC,EAAA,MAAA,KAAA,CAAAI,MAAAA,EAAA,KAAA,MACIC;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;sBCQRC,IAAAlB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;0CAlCA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;;;;;;;;;;;;;;;;sBCkCAiB,IAAAnB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;0CAlCA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;;;;;;;;;;;;;;;;sBCsCAkB,IAAApB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;iBAlCAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEAmB,IAAAhB,EAAA,MAAA;;AAAA,cAAAiB,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,IAAA,CAAA,EAAA,OAAAd,GAAA,OAAAD,GAAA,SAAAI,EAAA,OAAA,EAAA,OAAAH,GAAA,OAAAD,GAAA,MAAAI,EAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}