@adyen/bento-vue3 1.7.0 → 1.7.1

package/dist/chunks/{index.77f35162.js → index.f9c4b579.js}

@@ -1,12 +1,12 @@
 import { defineComponent as _, openBlock as o, createElementBlock as u, renderSlot as m, inject as I, computed as c, resolveComponent as e, resolveDirective as T, normalizeClass as k, createElementVNode as a, createVNode as l, withCtx as d, createTextVNode as N, toDisplayString as D, createBlock as r, createCommentVNode as i, withDirectives as E } from "vue";
 import { _ as y } from "./_plugin-vue_export-helper.dad06003.js";
-import { a as V } from "./button.e5177388.js";
+import { a as V } from "./button.c77b7a17.js";
 import { BentoInfoIcon as L } from "../info-icon.js";
-import { B as O, a as p } from "./index.2bd3812b.js";
-import { C as U } from "./copy.86236c8d.js";
+import { B as O, a as p } from "./index.32ef1db1.js";
+import { C as U } from "./copy.9ad2bf43.js";
 import { S as j } from "./search.d18f9657.js";
-import { b as w } from "./tooltip.f769eb14.js";
-import "../assets/index40.css";
+import { b as w } from "./tooltip.f37cc883.js";
+import "../assets/index44.css";
 const R = _({
   name: "bento-structured-list"
 });
@@ -131,4 +131,4 @@ export {
   z as S,
   et as a
 };
-//# sourceMappingURL=index.77f35162.js.map
+//# sourceMappingURL=index.f9c4b579.js.map

package/dist/chunks/{index.77f35162.js.map → index.f9c4b579.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.77f35162.js","sources":["../../../vue2/src/components/structured-list/structured-list.vue","../../../vue2/src/components/structured-list/structured-list.keys.ts","../../../vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-structured-list',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\">\n            <bento-typography :variant=\"labelTypographyVariant\">\n                {{ label }}\n            </bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : $t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"$t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, PropType } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Directives\n    import { BentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-structured-list-item',\n        components: {\n            BentoButton,\n            BentoInfoIcon,\n            BentoTypography,\n            Copy,\n            SearchIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Label to display for the value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text to display in info icon tooltip in the label to display for the value\n             */\n            labelInfo: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Text to copy when the user clicks `Copy` icon\n             */\n            copy: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Function to trigger when user clicks `Search` icon\n             */\n            search: {\n                type: Function as PropType<(event: Event) => void>,\n                default: undefined,\n            },\n            /**\n             * Text to display when the user hovers over `Search` icon\n             */\n            searchTooltip: {\n                type: String,\n                default: undefined,\n            },\n        },\n        setup() {\n            const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n            const conditionalClasses = computed(() => ({\n                'b-structured-list-item--condensed': isCondensed,\n            }));\n\n            const labelTypographyVariant = computed(() =>\n                isCondensed ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                conditionalClasses,\n                labelTypographyVariant,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["_sfc_main$1","defineComponent","STRUCTURED_LIST_CONDENSED_INJECTION_KEY","_sfc_main","messages","BentoButton","BentoInfoIcon","BentoTypography","Copy","SearchIcon","BentoTooltipDirective","isCondensed","inject","conditionalClasses","computed","labelTypographyVariant","BentoTypographyVariant","_directive_bento_tooltip_directive","resolveDirective","createElementVNode","_hoisted_1","createVNode","_component_bento_typography","_ctx","withCtx","createCommentVNode","_hoisted_2","renderSlot","openBlock","createBlock","_component_copy","_component_search_icon"],"mappings":";;;;;;;;;AAgCI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;oFClCSC,IAAA,OAAA,+CAAA;;;;GCqETC,IAAAF,EAAA;AAAA,EAA+B,MAAA,EAAA,UAAAG,EAAA;AAAA,EACV,MAAA;AAAA,EACX,YAAA;AAAA,IACM,aAAAC;AAAA,IACR,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACJ,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACoC,OAAA;AAAA;AAAA;AAAA;AAAA,IAC7B,OAAA;AAAA,MAII,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,WAAA;AAAA,MAIW,MAAA;AAAA,MACD,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAIM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,QAAA;AAAA,MAIQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,eAAA;AAAA,MAIe,MAAA;AAAA,MACL,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,QAAA;AAEI,UAAAC,IAAAC,EAAAV,GAAA,EAAA,GAEAW,IAAAC,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCI,IAAAD;AAAA,MAA+B,MAAAH,IAAAK,EAAA,UAAAA,EAAA;AAAA,IAC2C;AAG1E,WAAA;AAAA;AAAA,MAAO,oBAAAH;AAAA,MAEH,wBAAAE;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;yHA/GME,IAAAC,EAAA,yBAAA;;;EAhBG,GAAA;AAAA,IAHcC,EAAA,MAAAC,GAAA;AAAA,MAAAC,EAAAC,GAAA,EAAA,SAAAC,EAAA,uBAAA,GAAA;AAAA,QAAH,SAAAC,EAAA,MAAA;AAAA;;QAEW,GAAA;AAAA,MAAA,GAAA,GAAA,CAAA,SAAA,CAAA;AAAA;QAA+C,KAAA;AAAA,QAAE,OAAA;AAAA;MAE5E,GAAA,MAAA,GAAA,CAAA,cAAA,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,IAAA,CAAA;AAAA,IAEoBN,EAAA,MAAAO,GAAA;AAAA,MAAAC,EAAAJ,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAsDA,EAAA,QAAAK,EAAA,GAAAC,EAAAC,GAAA;AAAA,QAAhB,KAAA;AAAA,QAAM,OAAA;AAAA;;;QAIpB,KAAA;AAAA,QACpC,OAAA;AAAA,QACM,SAAA;AAAA;MAEa,GAAA;AAAA,QACD,UAAAN,EAAA,MAAA;AAAA,UAAaH,EAAAU,GAAA;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"index.f9c4b579.js","sources":["../../../vue2/src/components/structured-list/structured-list.vue","../../../vue2/src/components/structured-list/structured-list.keys.ts","../../../vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-structured-list',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\">\n            <bento-typography :variant=\"labelTypographyVariant\">\n                {{ label }}\n            </bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : $t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"$t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, PropType } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Directives\n    import { BentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-structured-list-item',\n        components: {\n            BentoButton,\n            BentoInfoIcon,\n            BentoTypography,\n            Copy,\n            SearchIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Label to display for the value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text to display in info icon tooltip in the label to display for the value\n             */\n            labelInfo: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Text to copy when the user clicks `Copy` icon\n             */\n            copy: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Function to trigger when user clicks `Search` icon\n             */\n            search: {\n                type: Function as PropType<(event: Event) => void>,\n                default: undefined,\n            },\n            /**\n             * Text to display when the user hovers over `Search` icon\n             */\n            searchTooltip: {\n                type: String,\n                default: undefined,\n            },\n        },\n        setup() {\n            const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n            const conditionalClasses = computed(() => ({\n                'b-structured-list-item--condensed': isCondensed,\n            }));\n\n            const labelTypographyVariant = computed(() =>\n                isCondensed ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                conditionalClasses,\n                labelTypographyVariant,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["_sfc_main$1","defineComponent","STRUCTURED_LIST_CONDENSED_INJECTION_KEY","_sfc_main","messages","BentoButton","BentoInfoIcon","BentoTypography","Copy","SearchIcon","BentoTooltipDirective","isCondensed","inject","conditionalClasses","computed","labelTypographyVariant","BentoTypographyVariant","_directive_bento_tooltip_directive","resolveDirective","createElementVNode","_hoisted_1","createVNode","_component_bento_typography","_ctx","withCtx","createCommentVNode","_hoisted_2","renderSlot","openBlock","createBlock","_component_copy","_component_search_icon"],"mappings":";;;;;;;;;AAgCI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;oFClCSC,IAAA,OAAA,+CAAA;;;;GCqETC,IAAAF,EAAA;AAAA,EAA+B,MAAA,EAAA,UAAAG,EAAA;AAAA,EACV,MAAA;AAAA,EACX,YAAA;AAAA,IACM,aAAAC;AAAA,IACR,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACJ,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACoC,OAAA;AAAA;AAAA;AAAA;AAAA,IAC7B,OAAA;AAAA,MAII,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,WAAA;AAAA,MAIW,MAAA;AAAA,MACD,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAIM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,QAAA;AAAA,MAIQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,eAAA;AAAA,MAIe,MAAA;AAAA,MACL,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,QAAA;AAEI,UAAAC,IAAAC,EAAAV,GAAA,EAAA,GAEAW,IAAAC,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCI,IAAAD;AAAA,MAA+B,MAAAH,IAAAK,EAAA,UAAAA,EAAA;AAAA,IAC2C;AAG1E,WAAA;AAAA;AAAA,MAAO,oBAAAH;AAAA,MAEH,wBAAAE;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;yHA/GME,IAAAC,EAAA,yBAAA;;;EAhBG,GAAA;AAAA,IAHcC,EAAA,MAAAC,GAAA;AAAA,MAAAC,EAAAC,GAAA,EAAA,SAAAC,EAAA,uBAAA,GAAA;AAAA,QAAH,SAAAC,EAAA,MAAA;AAAA;;QAEW,GAAA;AAAA,MAAA,GAAA,GAAA,CAAA,SAAA,CAAA;AAAA;QAA+C,KAAA;AAAA,QAAE,OAAA;AAAA;MAE5E,GAAA,MAAA,GAAA,CAAA,cAAA,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,IAAA,CAAA;AAAA,IAEoBN,EAAA,MAAAO,GAAA;AAAA,MAAAC,EAAAJ,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAsDA,EAAA,QAAAK,EAAA,GAAAC,EAAAC,GAAA;AAAA,QAAhB,KAAA;AAAA,QAAM,OAAA;AAAA;;;QAIpB,KAAA;AAAA,QACpC,OAAA;AAAA,QACM,SAAA;AAAA;MAEa,GAAA;AAAA,QACD,UAAAN,EAAA,MAAA;AAAA,UAAaH,EAAAU,GAAA;AAAA;;;;;;;;;;;"}

package/dist/chunks/{listbox-option-tag.809ec40e.js → listbox-option-tag.67ee5da8.js}

@@ -1,6 +1,6 @@
 import { defineComponent as m, toRefs as O, computed as n, resolveComponent as c, openBlock as i, createElementBlock as d, createVNode as b, createBlock as v, withCtx as f, createTextVNode as g, toDisplayString as y, createCommentVNode as h, createElementVNode as C } from "vue";
-import { A as L, u as $, B as o, a as E } from "./index.6a665ade.js";
-import { B } from "./index.2bd3812b.js";
+import { A as L, u as $, B as o, a as E } from "./index.c60cc197.js";
+import { B } from "./index.32ef1db1.js";
 import { _ as A } from "./_plugin-vue_export-helper.dad06003.js";
 import { BentoTag as I } from "../tag.js";
 import "../assets/listbox-option-tag.css";
@@ -126,4 +126,4 @@ export {
   M as B,
   W as L
 };
-//# sourceMappingURL=listbox-option-tag.809ec40e.js.map
+//# sourceMappingURL=listbox-option-tag.67ee5da8.js.map

package/dist/chunks/{listbox-option-tag.809ec40e.js.map → listbox-option-tag.67ee5da8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-option-tag.809ec40e.js","sources":["../../../vue2/src/components/internal/avatar/avatar.vue","../../../vue2/src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from '@/components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoUserProfile } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoUserProfile },\n     *     template: `\n     *          <bento-user-profile :src=\"userAvatarSrc\" username=\"Jane\" />\n     */\n    export default defineComponent({\n        name: 'bento-avatar',\n        components: { AvatarImage, BentoTypography },\n        props: {\n            /**\n             * Displays the user profile without the label.\n             */\n            iconOnly: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Name of the user that will be used both in the label and to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n        },\n\n        setup(props) {\n            const { username } = toRefs(props);\n\n            const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n            const computedUsername = computed(() => (!props.src ? props.username : null));\n            const initials = useInitials(username);\n\n            // Returns the UTF-16 char code\n            const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n            // Returns a computed color based on the letter passed\n            const avatarColor = computed(() => {\n                const numberOfAlphabetLetters = 26;\n                const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n                const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n                if (charCode.value <= rangeStep) {\n                    return BentoAvatarImageColor.YELLOW;\n                }\n                if (charCode.value <= rangeStep * 2) {\n                    return BentoAvatarImageColor.BLUE;\n                }\n                if (charCode.value <= rangeStep * 3) {\n                    return BentoAvatarImageColor.GREEN;\n                }\n                return BentoAvatarImageColor.RED;\n            });\n\n            return {\n                // Enums\n                BentoAvatarImageVariant,\n\n                // Values\n                computedAriaLabel,\n                computedUsername,\n                avatarColor,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n","<template>\n    <span class=\"b-listbox-tag-option\">\n        <span aria-hidden=\"true\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main$1","defineComponent","AvatarImage","BentoTypography","props","username","toRefs","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","BentoAvatarImageVariant","openBlock","createElementBlock","_ctx","createBlock","_component_bento_typography","_sfc_main","BentoTag","createElementVNode","_hoisted_2","createVNode","_component_bento_tag"],"mappings":";;;;;;AA+BI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACqC,OAAA;AAAA;AAAA;AAAA;AAAA,IACpC,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MASU,MAAA;AAAA,MACA,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,KAAA;AAAA,MAKK,MAAA;AAAA,MACK,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA;AAGI,UAAA,EAAA,UAAAC,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAAC,EAAA,MAAAJ,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAK,IAAAD,EAAA,MAAAJ,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAM,IAAAC,EAAAN,CAAA,GAGAO,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGI,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACIC,EAAA,SAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,OAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;AAGjC,WAAA;AAAA;AAAA,MAAO,yBAAAC;AAAA;AAAA,MAEH,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AArGuB,SAAAI,EAAA,GAAAC,EAAA,OAAA;AAAA,IAA6B,OAAA;AAAA;EAM9C,GAAA;AAAA;MAH6B,KAAAC,EAAA;AAAA,MACjB,UAAAA,EAAA;AAAA,MACF,SAAAA,EAAA,wBAAA;AAAA,MAEa,OAAAA,EAAA;AAAA,IAAA,GAAA,MAAA,GAAA,CAAA,OAAA,YAAA,WAAA,OAAA,CAAA;AAAA,IAENA,EAAA,wBAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAFuC,KAAA;AAAA,MAAI,OAAA;AAAA,MAAc,IAAA;AAAA;;;;;;;;;mFCWhFC,IAAArB,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAsB;AAAA,IACR,iBAAApB;AAAA,EACA;AAAA,EACJ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACO,QAAA;AAAA,MAKK,MAAA;AAAA,MACE,UAAA;AAAA,IACI;AAAA,EACd;AAAA,EACJ,MAAAC,GAAA;AAII,WAAA;AAAA;AAAA,MAAO,SAFPI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;;;IAxC2GoB,EAAA,QAAAC,GAAA;AAAA,MAAvDC,EAAAC,GAAA;AAAA,QAA8B,OAAA;AAAA,QAAY,OAAAR,EAAA,OAAA,MAAA,SAAA;AAAA;MAElE,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA;AAAA,IAAY,CAAA;AAAA,IAAWA,EAAA,OAAA,SAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAAA,KAAA;AAAA,MAAM,IAAA;AAAA;;;;;;;;;;"}
+{"version":3,"file":"listbox-option-tag.67ee5da8.js","sources":["../../../vue2/src/components/internal/avatar/avatar.vue","../../../vue2/src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from '@/components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoUserProfile } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoUserProfile },\n     *     template: `\n     *          <bento-user-profile :src=\"userAvatarSrc\" username=\"Jane\" />\n     */\n    export default defineComponent({\n        name: 'bento-avatar',\n        components: { AvatarImage, BentoTypography },\n        props: {\n            /**\n             * Displays the user profile without the label.\n             */\n            iconOnly: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Name of the user that will be used both in the label and to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n        },\n\n        setup(props) {\n            const { username } = toRefs(props);\n\n            const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n            const computedUsername = computed(() => (!props.src ? props.username : null));\n            const initials = useInitials(username);\n\n            // Returns the UTF-16 char code\n            const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n            // Returns a computed color based on the letter passed\n            const avatarColor = computed(() => {\n                const numberOfAlphabetLetters = 26;\n                const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n                const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n                if (charCode.value <= rangeStep) {\n                    return BentoAvatarImageColor.YELLOW;\n                }\n                if (charCode.value <= rangeStep * 2) {\n                    return BentoAvatarImageColor.BLUE;\n                }\n                if (charCode.value <= rangeStep * 3) {\n                    return BentoAvatarImageColor.GREEN;\n                }\n                return BentoAvatarImageColor.RED;\n            });\n\n            return {\n                // Enums\n                BentoAvatarImageVariant,\n\n                // Values\n                computedAriaLabel,\n                computedUsername,\n                avatarColor,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n","<template>\n    <span class=\"b-listbox-tag-option\">\n        <span aria-hidden=\"true\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main$1","defineComponent","AvatarImage","BentoTypography","props","username","toRefs","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","BentoAvatarImageVariant","openBlock","createElementBlock","_ctx","createBlock","_component_bento_typography","_sfc_main","BentoTag","createElementVNode","_hoisted_2","createVNode","_component_bento_tag"],"mappings":";;;;;;AA+BI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACqC,OAAA;AAAA;AAAA;AAAA;AAAA,IACpC,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MASU,MAAA;AAAA,MACA,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,KAAA;AAAA,MAKK,MAAA;AAAA,MACK,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA;AAGI,UAAA,EAAA,UAAAC,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAAC,EAAA,MAAAJ,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAK,IAAAD,EAAA,MAAAJ,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAM,IAAAC,EAAAN,CAAA,GAGAO,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGI,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACIC,EAAA,SAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,OAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;AAGjC,WAAA;AAAA;AAAA,MAAO,yBAAAC;AAAA;AAAA,MAEH,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AArGuB,SAAAI,EAAA,GAAAC,EAAA,OAAA;AAAA,IAA6B,OAAA;AAAA;EAM9C,GAAA;AAAA;MAH6B,KAAAC,EAAA;AAAA,MACjB,UAAAA,EAAA;AAAA,MACF,SAAAA,EAAA,wBAAA;AAAA,MAEa,OAAAA,EAAA;AAAA,IAAA,GAAA,MAAA,GAAA,CAAA,OAAA,YAAA,WAAA,OAAA,CAAA;AAAA,IAENA,EAAA,wBAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAFuC,KAAA;AAAA,MAAI,OAAA;AAAA,MAAc,IAAA;AAAA;;;;;;;;;mFCWhFC,IAAArB,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAsB;AAAA,IACR,iBAAApB;AAAA,EACA;AAAA,EACJ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACO,QAAA;AAAA,MAKK,MAAA;AAAA,MACE,UAAA;AAAA,IACI;AAAA,EACd;AAAA,EACJ,MAAAC,GAAA;AAII,WAAA;AAAA;AAAA,MAAO,SAFPI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;;;IAxC2GoB,EAAA,QAAAC,GAAA;AAAA,MAAvDC,EAAAC,GAAA;AAAA,QAA8B,OAAA;AAAA,QAAY,OAAAR,EAAA,OAAA,MAAA,SAAA;AAAA;MAElE,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA;AAAA,IAAY,CAAA;AAAA,IAAWA,EAAA,OAAA,SAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAAA,KAAA;AAAA,MAAM,IAAA;AAAA;;;;;;;;;;"}

package/dist/chunks/{listbox.f6e5a11d.js → listbox.70dc835e.js}

@@ -1,15 +1,15 @@
 import { computed as b, ref as R, onMounted as Te, onUnmounted as Ge, watch as he, defineComponent as H, openBlock as S, createElementBlock as B, mergeProps as U, withKeys as be, renderSlot as Y, resolveComponent as C, createBlock as D, toHandlerKey as F, withCtx as T, normalizeProps as w, guardReactiveProps as K, createElementVNode as M, createVNode as A, createTextVNode as V, toDisplayString as G, createCommentVNode as le, withDirectives as J, vShow as ve, toRef as Oe, resolveDirective as ge, toHandlers as se, Fragment as ie, renderList as q, createSlots as oe, normalizeClass as me, pushScopeId as xe, popScopeId as Ye } from "vue";
 import { B as x, a as pe } from "./keyboard-navigation.ca47dfa8.js";
-import { B as ne } from "./index.2bd3812b.js";
+import { B as ne } from "./index.32ef1db1.js";
 import { BentoLoadingIndicator as Fe } from "../loading-indicator.js";
 import { BentoEmptyState as Ke } from "../empty-state.js";
 import { u as fe } from "./i18n.6c402773.js";
 import { d as ze } from "./debounce.b5ef6acf.js";
 import { C as We } from "./checkmark.83e4f1e0.js";
 import { _ as j } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as ye } from "./checkbox.3cdbdd52.js";
+import { B as ye } from "./checkbox.5d2e26b9.js";
 import { C as qe, a as He } from "./chevron-up.9bf21068.js";
-import { B as je, a as Se } from "./loading-button.746b7fa1.js";
+import { B as je, a as Se } from "./loading-button.bc08f016.js";
 import { o as Xe } from "./resize.a041304d.js";
 import "../assets/listbox.css";
 const Le = (e, t, d, p) => {
@@ -1303,4 +1303,4 @@ export {
   a,
   X as b
 };
-//# sourceMappingURL=listbox.f6e5a11d.js.map
+//# sourceMappingURL=listbox.70dc835e.js.map