@adyen/bento-vue3 1.0.0 → 1.1.1

package/dist/chunks/index.a169ce0d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.a169ce0d.js","sources":["../../../vue2/src/components/typography/typography.types.ts","../../../vue2/src/utils/ts/deprecate.ts","../../../vue2/src/components/typography/typography.vue"],"sourcesContent":["export enum BentoTypographyVariant {\n    CAPTION = 'caption',\n    BODY = 'body',\n    /** @deprecated Use \"TITLE\" instead. */\n    SUBTITLE = 'subtitle',\n    TITLE = 'title',\n}\n\nexport enum BentoTypographyModifier {\n    WIDE = 'wide',\n    STRONGER = 'stronger',\n    STRONGER_WIDE = 'stronger-wide',\n    STRONGEST = 'strongest',\n    STRONGEST_WIDE = 'strongest-wide',\n    MEDIUM = 'm',\n    LARGE = 'l',\n    MOBILE = 'mobile',\n}\n\nexport enum BentoTypographyElement {\n    H1 = 'h1',\n    H2 = 'h2',\n    H3 = 'h3',\n    H4 = 'h4',\n    H5 = 'h5',\n    H6 = 'h6',\n    DIV = 'div',\n    PARAGRAPH = 'p',\n    SPAN = 'span',\n}\n","const DEV_ENVIROMENT_NAMES = ['development', 'DEVELOPMENT', 'dev', 'DEV'];\n\nconst DEPRECATION_STYLES = ['color: red', 'background: yellow'].join(';');\n\n/**\n * Informs users about the deprecations in development mode only.\n *\n * @param title Indicates what is being deprecated.\n * @param deprecationMessage How to avoid the deprecation by giving an example of the alternatives. Backticks can be used to multi-line the message.\n * @param toBeRemovedInVersion The version it will be removed. Must be in X.Y.Z format.\n */\nexport function deprecate(title: string, deprecationMessage: string, toBeRemovedInVersion: string) {\n    const isDevelopmentEnviroment = DEV_ENVIROMENT_NAMES.includes(process.env.NODE_ENV);\n\n    if (isDevelopmentEnviroment) {\n        /* eslint-disable no-console */\n        console.warn(`%cDEPRECATED:\\x1b[0m ${title}`, DEPRECATION_STYLES);\n        // Format multi-line descriptions with the backtick\n        console.warn(`${deprecationMessage.replaceAll('\\t', '').replaceAll('  ', '').trim()}`);\n        console.warn(`To be removed in: %c${toBeRemovedInVersion}`, DEPRECATION_STYLES);\n        /* eslint-enable no-console */\n    }\n}\n","<template>\n    <component :is=\"el\" class=\"b-typography\" :class=\"conditionalClasses\" data-testid=\"typography\">\n        <slot />\n    </component>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTypographyElement, BentoTypographyModifier, BentoTypographyVariant } from './typography.types';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    /**\n     * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\n     * easily to text. The variants and properties match with those found in Figma.\n     *\n     * For example, seeing text with the typography styling of\n     *\n     * @example\n     * import { BentoTypography } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTypography },\n     *     template: `\n     *          <bento-typography>\n     *              ... text content\n     *          </bento-typography>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-typography',\n        inheritAttrs: true,\n        props: {\n            /**\n             * Sets the HTML DOM element.\n             * @values h1, h2, h3, h4, h5, h6, div, p, span\n             */\n            el: {\n                type: String as PropType<BentoTypographyElement>,\n                default: BentoTypographyElement.PARAGRAPH,\n                validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n            },\n\n            /**\n             * Adds the stronger class modifier.\n             * Applicable to Caption, Body and Subtitle variants.\n             */\n            stronger: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Adds the strongest class modifier.\n             * Applicable to Caption, Body and Subtitle variants.\n             */\n            strongest: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Sets the type of typography variant.\n             * @values caption, body, title.\n             */\n            variant: {\n                type: String as PropType<BentoTypographyVariant>,\n                default: BentoTypographyVariant.BODY,\n                validator: (value: BentoTypographyVariant) => Object.values(BentoTypographyVariant).includes(value),\n            },\n\n            /**\n             * Adds the medium class modifier.\n             * Applicable to the Title variant.\n             */\n            medium: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Adds the large class modifier.\n             * Applicable to the Title variant.\n             */\n            large: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Adds the medium class modifier.\n             * Applicable to tje Body variant.\n             */\n            wide: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            if (props.variant === BentoTypographyVariant.SUBTITLE) {\n                deprecate(\n                    'BentoTypography \"subtitle\" variant (BentoTypographyVariant.SUBTITLE)',\n                    `Use the \"title\" or \"BentoTypographyVariant.TITLE\" variant and (optionally) combine it with a size property. e.g. medium / large.\n                    <bento-typography :variant=\"BentoTypographyVariant.TITLE\" medium>`,\n                    '2.0.0'\n                );\n            }\n\n            const conditionalClasses = computed(() => ({\n                // Caption\n                [`b-typography--${BentoTypographyVariant.CAPTION}`]: props.variant === BentoTypographyVariant.CAPTION,\n                [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.WIDE}`]:\n                    props.variant === BentoTypographyVariant.CAPTION && props.wide,\n                [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.STRONGER}`]:\n                    props.variant === BentoTypographyVariant.CAPTION && props.stronger,\n\n                // Body\n                [`b-typography--${BentoTypographyVariant.BODY}`]: props.variant === BentoTypographyVariant.BODY,\n                [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.WIDE}`]:\n                    props.variant === BentoTypographyVariant.BODY && props.wide,\n                [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGER}`]:\n                    props.variant === BentoTypographyVariant.BODY && props.stronger,\n                [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGEST}`]:\n                    props.variant === BentoTypographyVariant.BODY && props.strongest,\n\n                // Subtitle\n                [`b-typography--${BentoTypographyVariant.SUBTITLE}`]: props.variant === BentoTypographyVariant.SUBTITLE,\n                [`b-typography--${BentoTypographyVariant.SUBTITLE}-${BentoTypographyModifier.STRONGER}`]:\n                    props.variant === BentoTypographyVariant.SUBTITLE && props.stronger,\n\n                // Title\n                [`b-typography--${BentoTypographyVariant.TITLE}`]:\n                    props.variant === BentoTypographyVariant.TITLE && !props.medium && !props.large,\n                [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.MEDIUM}`]:\n                    props.variant === BentoTypographyVariant.TITLE && props.medium,\n                [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.LARGE}`]:\n                    props.variant === BentoTypographyVariant.TITLE && props.large,\n            }));\n\n            return {\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./typography.scss\" />\n"],"names":["BentoTypographyVariant","BentoTypographyVariant2","BentoTypographyModifier","BentoTypographyModifier2","BentoTypographyElement","BentoTypographyElement2","DEV_ENVIROMENT_NAMES","DEPRECATION_STYLES","deprecate","title","deprecationMessage","toBeRemovedInVersion","_sfc_main","defineComponent","value","props","computed","openBlock","createBlock","resolveDynamicComponent","_ctx","normalizeClass"],"mappings":";;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,OAAA,QAEAA,EAAA,WAAA,YACAA,EAAA,QAAA,SALQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,WAAA,YACAA,EAAA,gBAAA,iBACAA,EAAA,YAAA,aACAA,EAAA,iBAAA,kBACAA,EAAA,SAAA,KACAA,EAAA,QAAA,KACAA,EAAA,SAAA,UARQA,IAAAD,KAAA,CAAA,CAAA,GAWAE,IAAA,kBAAAC,OACRA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,MAAA,OACAA,EAAA,YAAA,KACAA,EAAA,OAAA,QATQA,IAAAD,KAAA,CAAA,CAAA;ACnBZ,MAAAE,IAAA,CAAA,eAAA,eAAA,OAAA,KAAA,GAEAC,IAAA,CAAA,cAAA,oBAAA,EAAA,KAAA,GAAA;AASgB,SAAAC,EAAAC,GAAAC,GAAAC,GAAA;AAGZ,EAFAL,EAAA,SAAA,QAAA,IAAA,QAAA,MAII,QAAA,KAAA,wBAAAG,KAAAF,CAAA,GAEA,QAAA,KAAA,GAAAG,EAAA,WAAA,KAAA,EAAA,EAAA,WAAA,MAAA,EAAA,EAAA,KAAA,GAAA,GACA,QAAA,KAAA,uBAAAC,KAAAJ,CAAA;AAGR;ACOI,MAAAK,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,cAAA;AAAA,EACQ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACP,IAAA;AAAA,MAKC,MAAA;AAAA,MACM,SAAAT,EAAA;AAAA,MAC0B,WAAA,CAAAU,MAAA,OAAA,OAAAV,CAAA,EAAA,SAAAU,CAAA;AAAA,IACkE;AAAA;AAAA;AAAA;AAAA;AAAA,IACtG,UAAA;AAAA,MAMU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,WAAA;AAAA,MAMW,MAAA;AAAA,MACD,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,SAAA;AAAA,MAMS,MAAA;AAAA,MACC,SAAAd,EAAA;AAAA,MAC0B,WAAA,CAAAc,MAAA,OAAA,OAAAd,CAAA,EAAA,SAAAc,CAAA;AAAA,IACkE;AAAA;AAAA;AAAA;AAAA;AAAA,IACtG,QAAA;AAAA,MAMQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,OAAA;AAAA,MAMO,MAAA;AAAA,MACG,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAMM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA;AAEI,WAAAA,EAAA,YAAAf,EAAA,YACIQ;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA,GAmCR;AAAA,MAAO,oBA/BPQ,EAAA,OAAA;AAAA;AAAA,QAA2C,CAAA,iBAAAhB,EAAA,SAAA,GAAAe,EAAA,YAAAf,EAAA;AAAA,QAEuD,CAAA,iBAAAA,EAAA,WAAAE,EAAA,MAAA,GAAAa,EAAA,YAAAf,EAAA,WAAAe,EAAA;AAAA,QAEhC,CAAA,iBAAAf,EAAA,WAAAE,EAAA,UAAA,GAAAa,EAAA,YAAAf,EAAA,WAAAe,EAAA;AAAA;AAAA,QAEA,CAAA,iBAAAf,EAAA,MAAA,GAAAe,EAAA,YAAAf,EAAA;AAAA,QAG6B,CAAA,iBAAAA,EAAA,QAAAE,EAAA,MAAA,GAAAa,EAAA,YAAAf,EAAA,QAAAe,EAAA;AAAA,QAEhC,CAAA,iBAAAf,EAAA,QAAAE,EAAA,UAAA,GAAAa,EAAA,YAAAf,EAAA,QAAAe,EAAA;AAAA,QAEA,CAAA,iBAAAf,EAAA,QAAAE,EAAA,WAAA,GAAAa,EAAA,YAAAf,EAAA,QAAAe,EAAA;AAAA;AAAA,QAEA,CAAA,iBAAAf,EAAA,UAAA,GAAAe,EAAA,YAAAf,EAAA;AAAA,QAGoC,CAAA,iBAAAA,EAAA,YAAAE,EAAA,UAAA,GAAAa,EAAA,YAAAf,EAAA,YAAAe,EAAA;AAAA;AAAA,QAEhC,CAAA,iBAAAf,EAAA,OAAA,GAAAe,EAAA,YAAAf,EAAA,SAAA,CAAAe,EAAA,UAAA,CAAAA,EAAA;AAAA,QAIe,CAAA,iBAAAf,EAAA,SAAAE,EAAA,QAAA,GAAAa,EAAA,YAAAf,EAAA,SAAAe,EAAA;AAAA,QAElB,CAAA,iBAAAf,EAAA,SAAAE,EAAA,OAAA,GAAAa,EAAA,YAAAf,EAAA,SAAAe,EAAA;AAAA,MAEA,EAAA;AAAA,IAI5D;AAAA,EACJ;AAER,CAAA;;AA9IqE,SAAAE,EAAA,GAAAC,EAAAC,EAAAC,EAAA,EAAA,GAAA;AAAA,IAAwB,OAAAC,EAAA,CAAA,gBAAAD,EAAA,kBAAA,CAAA;AAAA;;;;;;;;;"}

package/dist/chunks/{index.1312f359.js → index.ba797d8f.js}

@@ -1,18 +1,17 @@
-import { defineComponent as T, toRefs as A, ref as I, computed as u, watch as L, resolveComponent as b, openBlock as n, createElementBlock as y, normalizeClass as D, withDirectives as F, createElementVNode as c, vModelCheckbox as R, createBlock as g, createCommentVNode as i, withCtx as h, renderSlot as B } from "vue";
+import { defineComponent as T, toRefs as I, ref as A, computed as u, watch as L, resolveComponent as f, openBlock as n, createElementBlock as y, normalizeClass as D, withDirectives as F, createElementVNode as c, vModelCheckbox as R, createBlock as g, createCommentVNode as s, withCtx as h, renderSlot as B } from "vue";
 import { C as $ } from "./checkmark-small.3e93a119.js";
-import { B as O, c as w, a as N } from "./index.1d501e31.js";
+import { B as O, a as w, b as N } from "./index.a169ce0d.js";
 import { g as P } from "./unique-id.a2a2b458.js";
 import { u as U } from "./aria-label.ac9651a5.js";
-import { u as Y } from "./use-default-slot-validator.83d977a1.js";
-import { h as k } from "./hasSlot.dceac207.js";
-import { g as j } from "./get-slot-text.2db867f8.js";
-import { _ as z } from "./_plugin-vue_export-helper.dad06003.js";
-import "../assets/index14.css";
-var s = /* @__PURE__ */ ((e) => (e.BEFORE = "before", e.AFTER = "after", e))(s || {}), _ = /* @__PURE__ */ ((e) => (e.LABEL_FIRST = "label-first", e))(_ || {});
+import { u as Y } from "./use-has-slot.068222e6.js";
+import { u as j } from "./use-default-slot-validator.83d977a1.js";
+import { g as z } from "./get-slot-text.2db867f8.js";
+import { _ as H } from "./_plugin-vue_export-helper.dad06003.js";
+import "../assets/index35.css";
+var i = /* @__PURE__ */ ((e) => (e.BEFORE = "before", e.AFTER = "after", e))(i || {}), k = /* @__PURE__ */ ((e) => (e.LABEL_FIRST = "label-first", e))(k || {});
 const M = T({
   name: "bento-toggle",
   components: { BentoTypography: O, CheckmarkSmall: $ },
-  inheritAttrs: !1,
   props: {
     /**
      * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label
@@ -34,8 +33,8 @@ const M = T({
      */
     labelPosition: {
       type: String,
-      default: s.BEFORE,
-      validator: (e) => Object.values(s).includes(e)
+      default: i.BEFORE,
+      validator: (e) => Object.values(i).includes(e)
     },
     /**
      * Setting this property to true will set the toggle to read only state.
@@ -54,14 +53,14 @@ const M = T({
   },
   emits: ["input"],
   setup(e, { slots: t, emit: m }) {
-    const { ariaLabel: f } = A(e), d = I(e.value), p = P("toggle-description"), r = k(t)("default"), o = k(t)("description");
-    Y("bento-toggle", r, o);
-    const a = u(() => t.default ? j(t)("default") : null), v = U({
-      ariaLabel: f,
-      label: a,
+    const d = Y(t), { ariaLabel: b } = I(e), p = A(e.value), r = P("toggle-description"), o = d("default"), a = d("description");
+    j("bento-toggle", o, a);
+    const _ = u(() => t.default ? z(t)("default") : null), v = U({
+      ariaLabel: b,
+      label: _,
       defaultFallback: "toggle"
-    }), S = u(() => p ?? null), C = u(() => ({
-      [`b-toggle--${_.LABEL_FIRST}`]: e.labelPosition === s.BEFORE,
+    }), S = u(() => r ?? null), C = u(() => ({
+      [`b-toggle--${k.LABEL_FIRST}`]: e.labelPosition === i.BEFORE,
       "b-toggle--disabled": e.disabled,
       "b-toggle--readonly": e.readonly
     })), E = (l) => {
@@ -72,21 +71,21 @@ const M = T({
     return L(
       () => e.value,
       (l) => {
-        d.value = l;
+        p.value = l;
       }
     ), {
       // Refs
-      toggleInput: d,
+      toggleInput: p,
       // Types
       BentoTypographyElement: w,
       BentoTypographyVariant: N,
       // Values
       computedAriaLabel: v,
       computedDescription: S,
-      defaultSlotValue: r,
-      descriptionSlotValue: o,
+      defaultSlotValue: o,
+      descriptionSlotValue: a,
       conditionalClasses: C,
-      descriptionId: p,
+      descriptionId: r,
       // Events
       onChange: E,
       onClick: V
@@ -96,12 +95,12 @@ const M = T({
 const q = ["aria-label", "aria-describedby", "disabled", "aria-readonly"], G = {
   class: "b-toggle__track",
   "aria-hidden": "true"
-}, H = { class: "b-toggle__handle" }, J = {
+}, J = { class: "b-toggle__handle" }, K = {
   key: 0,
   class: "b-toggle__label-container"
 };
-function K(e, t, m, f, d, p) {
-  const r = b("checkmark-small"), o = b("bento-typography");
+function Q(e, t, m, d, b, p) {
+  const r = f("checkmark-small"), o = f("bento-typography");
   return n(), y("label", {
     class: D(["b-toggle", e.conditionalClasses]),
     "data-testid": "label"
@@ -121,11 +120,11 @@ function K(e, t, m, f, d, p) {
       [R, e.toggleInput]
     ]),
     c("span", G, [
-      c("span", H, [
-        e.toggleInput ? (n(), g(r, { key: 0 })) : i("", !0)
+      c("span", J, [
+        e.toggleInput ? (n(), g(r, { key: 0 })) : s("", !0)
       ])
     ]),
-    e.defaultSlotValue ? (n(), y("span", J, [
+    e.defaultSlotValue ? (n(), y("span", K, [
       e.defaultSlotValue ? (n(), g(o, {
         key: 0,
         el: e.BentoTypographyElement.SPAN,
@@ -136,7 +135,7 @@ function K(e, t, m, f, d, p) {
           B(e.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["el", "variant"])) : i("", !0),
+      }, 8, ["el", "variant"])) : s("", !0),
       e.defaultSlotValue && e.descriptionSlotValue ? (n(), g(o, {
         key: 1,
         id: e.descriptionId,
@@ -148,14 +147,14 @@ function K(e, t, m, f, d, p) {
           B(e.$slots, "description", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["id", "el", "variant"])) : i("", !0)
-    ])) : i("", !0)
+      }, 8, ["id", "el", "variant"])) : s("", !0)
+    ])) : s("", !0)
   ], 2);
 }
-const le = /* @__PURE__ */ z(M, [["render", K], ["__scopeId", "data-v-74988cf7"]]);
+const ne = /* @__PURE__ */ H(M, [["render", Q], ["__scopeId", "data-v-8f65ec93"]]);
 export {
-  s as A,
-  le as B,
-  _ as a
+  i as A,
+  ne as B,
+  k as a
 };
-//# sourceMappingURL=index.1312f359.js.map
+//# sourceMappingURL=index.ba797d8f.js.map

package/dist/chunks/index.ba797d8f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ba797d8f.js","sources":["../../../vue2/src/types/label-position.ts","../../../vue2/src/components/toggle/toggle.types.ts","../../../vue2/src/components/toggle/toggle.vue"],"sourcesContent":["export enum AdlLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\n}\n","export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n","<template>\n    <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n        <input\n            v-model=\"toggleInput\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"computedDescription\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            role=\"switch\"\n            class=\"b-toggle__input\"\n            type=\"checkbox\"\n            @change=\"$event => onChange($event)\"\n            @click=\"onClick\"\n        />\n        <span class=\"b-toggle__track\" aria-hidden=\"true\">\n            <span class=\"b-toggle__handle\">\n                <checkmark-small v-if=\"toggleInput\" />\n            </span>\n        </span>\n        <span v-if=\"defaultSlotValue\" class=\"b-toggle__label-container\">\n            <bento-typography\n                v-if=\"defaultSlotValue\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                data-testid=\"inner-label\"\n            >\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"defaultSlotValue && descriptionSlotValue\"\n                :id=\"descriptionId\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';\n    import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import { BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { AdlLabelPosition } from '@/types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n\n    /**\n     * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n     *\n     * @usage\n     * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoToggle },\n     *     template: `\n     *         <bento-toggle\n     *              :value=\"toggleValue\"`\n     *              label-position=\"LabelPosition.BEFORE\"\n     *              @input=\"optionalHandler($event)\"\n     *          >\n     *          Label Text\n     *          </bento-toggle>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toggle',\n        components: { BentoTypography, CheckmarkSmall },\n        props: {\n            /**\n             * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n             */\n            ariaLabel: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Disable the toggle (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Position of the label relative to the toggle (optional)\n             * @values before, after\n             */\n            labelPosition: {\n                type: String as PropType<AdlLabelPosition>,\n                default: AdlLabelPosition.BEFORE,\n                validator: (value: AdlLabelPosition) => Object.values(AdlLabelPosition).includes(value),\n            },\n            /**\n             * Setting this property to true will set the toggle to read only state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates if the switch is \"on\" or \"off\"\n             */\n            value: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['input'],\n        setup(props, { slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n            const { ariaLabel } = toRefs(props);\n\n            const toggleInput = ref(props.value);\n            const descriptionId: string = generateUid('toggle-description');\n\n            const defaultSlotValue = hasSlot('default');\n            const descriptionSlotValue = hasSlot('description');\n\n            useDefaultSlotValidator('bento-toggle', defaultSlotValue, descriptionSlotValue);\n\n            const labelSlot = computed((): string => (slots.default ? getSlotText(slots)('default') : null));\n\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel,\n                label: labelSlot,\n                defaultFallback: 'toggle',\n            });\n\n            const computedDescription = computed((): string | null => descriptionId ?? null);\n\n            const conditionalClasses = computed((): { [key: string]: boolean } => ({\n                [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]: props.labelPosition === AdlLabelPosition.BEFORE,\n                'b-toggle--disabled': props.disabled,\n                'b-toggle--readonly': props.readonly,\n            }));\n\n            const onChange = (event: Event) => {\n                emit('input', (event.target as HTMLInputElement).checked);\n            };\n\n            // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n            const onClick = (event: Event) => {\n                if (props.readonly) {\n                    event.preventDefault();\n                }\n            };\n\n            watch(\n                () => props.value,\n                newValue => {\n                    toggleInput.value = newValue;\n                }\n            );\n\n            return {\n                // Refs\n                toggleInput,\n\n                // Types\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                computedAriaLabel,\n                computedDescription,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClasses,\n                descriptionId,\n\n                // Events\n                onChange,\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["AdlLabelPosition","AdlLabelPosition2","BentoTogglePropClass","BentoTogglePropClass2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmall","value","props","slots","emit","hasSlot","useHasSlot","ariaLabel","toRefs","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","getSlotText","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue","BentoTypographyElement","BentoTypographyVariant","_hoisted_1","openBlock","createElementBlock","normalizeClass","_ctx","_cache","$event","vModelCheckbox","createElementVNode","_hoisted_3","createBlock","_component_checkmark_small","createCommentVNode","_hoisted_4","_component_bento_typography"],"mappings":"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"}

package/dist/chunks/{index.ab64552a.js → index.c7182196.js}

@@ -1,16 +1,15 @@
-import { ref as p, computed as l, defineComponent as d, toRefs as u, resolveComponent as m, openBlock as r, createElementBlock as n, normalizeClass as _, createVNode as v, withCtx as y, createTextVNode as g, toDisplayString as f } from "vue";
-import { B as h, c as L, a as E } from "./index.1d501e31.js";
-import { _ as b } from "./_plugin-vue_export-helper.dad06003.js";
-import "../assets/index30.css";
+import { ref as d, computed as l, defineComponent as p, toRefs as u, resolveComponent as m, openBlock as r, createElementBlock as n, normalizeClass as _, createVNode as v, withCtx as y, createTextVNode as g, toDisplayString as b } from "vue";
+import { B as f, a as h, b as L } from "./index.a169ce0d.js";
+import { _ as E } from "./_plugin-vue_export-helper.dad06003.js";
+import "../assets/index16.css";
 const S = (a) => {
-  const e = p(a);
+  const e = d(a);
   return l(() => e.value ? e.value.trim().charAt(0).toUpperCase() : null);
 };
 var t = /* @__PURE__ */ ((a) => (a.LARGE = "large", a.SMALL = "small", a))(t || {}), s = /* @__PURE__ */ ((a) => (a.BLUE = "blue", a.GREEN = "green", a.RED = "red", a.YELLOW = "yellow", a))(s || {});
-const B = d({
+const B = p({
   name: "avatar-image",
-  components: { BentoTypography: h },
-  inheritAttrs: !1,
+  components: { BentoTypography: f },
   props: {
     /**
      * Image src to load the profile picture.
@@ -55,20 +54,20 @@ const B = d({
     }));
     return {
       // Enums
-      BentoTypographyElement: L,
-      BentoTypographyVariant: E,
+      BentoTypographyElement: h,
+      BentoTypographyVariant: L,
       // Values
       conditionalClasses: i,
       initials: o
     };
   }
 });
-const A = ["src"], T = {
+const T = ["src"], $ = {
   key: 1,
   class: "b-avatar-image__default",
   "data-testid": "avatar-content"
 };
-function $(a, e, o, i, O, R) {
+function A(a, e, o, i, O, R) {
   const c = m("bento-typography");
   return r(), n("div", {
     class: _(["b-avatar-image", a.conditionalClasses]),
@@ -81,25 +80,25 @@ function $(a, e, o, i, O, R) {
       class: "b-avatar-image__image",
       alt: "Profile picture",
       "data-testid": "avatar-content"
-    }, null, 8, A)) : (r(), n("div", T, [
+    }, null, 8, T)) : (r(), n("div", $, [
       v(c, {
         el: a.BentoTypographyElement.SPAN,
         variant: a.BentoTypographyVariant.BODY,
         strongest: ""
       }, {
         default: y(() => [
-          g(f(a.initials), 1)
+          g(b(a.initials), 1)
         ]),
         _: 1
       }, 8, ["el", "variant"])
     ]))
   ], 2);
 }
-const D = /* @__PURE__ */ b(B, [["render", $], ["__scopeId", "data-v-5711fa0e"]]);
+const D = /* @__PURE__ */ E(B, [["render", A], ["__scopeId", "data-v-de34bc7b"]]);
 export {
   D as A,
   s as B,
   t as a,
   S as u
 };
-//# sourceMappingURL=index.ab64552a.js.map
+//# sourceMappingURL=index.c7182196.js.map

package/dist/chunks/index.c7182196.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.c7182196.js","sources":["../../../vue2/src/composables/initials.ts","../../../vue2/src/components/avatar-image/avatar-image.types.ts","../../../vue2/src/components/avatar-image/avatar-image.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"Profile picture\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    export default defineComponent({\n        name: 'avatar-image',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Name of the user that will be used 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                default: null,\n            },\n            /**\n             * Variants supported for small and large.\n             * Default - large\n             */\n            variant: {\n                type: String as PropType<BentoAvatarImageVariant>,\n                default: BentoAvatarImageVariant.LARGE,\n                validator: (value: BentoAvatarImageVariant) => Object.values(BentoAvatarImageVariant).includes(value),\n            },\n            /**\n             * Avatar color. Defaults to yellow.\n             */\n            color: {\n                type: String as PropType<BentoAvatarImageColor>,\n                default: BentoAvatarImageColor.YELLOW,\n                validator: (value: BentoAvatarImageColor) => Object.values(BentoAvatarImageColor).includes(value),\n            },\n        },\n        setup(props) {\n            const { username } = toRefs(props);\n            const initials = useInitials(username);\n\n            const conditionalClasses = computed(() => ({\n                [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n                [`b-avatar-image--${props.color}`]: props.color,\n            }));\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                conditionalClasses,\n                initials,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","_sfc_main","defineComponent","BentoTypography","value","props","toRefs","initials","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","openBlock","createElementBlock","normalizeClass","_ctx","_hoisted_1","_hoisted_2","createVNode","_component_bento_typography"],"mappings":";;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACYR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,KAAA;AAAA,MAIE,MAAA;AAAA,MACK,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MAQU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,SAAA;AAAA,MAKS,MAAA;AAAA,MACC,SAAAN,EAAA;AAAA,MAC2B,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IACmE;AAAA;AAAA;AAAA;AAAA,IACxG,OAAA;AAAA,MAIO,MAAA;AAAA,MACG,SAAAL,EAAA;AAAA,MACyB,WAAA,CAAAK,MAAA,OAAA,OAAAL,CAAA,EAAA,SAAAK,CAAA;AAAA,IACiE;AAAA,EACpG;AAAA,EACJ,MAAAC,GAAA;AAEI,UAAA,EAAA,UAAAZ,EAAA,IAAAa,EAAAD,CAAA,GACAE,IAAAf,EAAAC,CAAA,GAEAe,IAAAZ,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,OAAA,GAAAQ,EAAA,YAAAR,EAAA;AAAA,MACyD,CAAA,mBAAAQ,EAAA,OAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;AAG9C,WAAA;AAAA;AAAA,MAAO,wBAAAI;AAAA,MAEH,wBAAAC;AAAA;AAAA,MACA,oBAAAF;AAAA,MAGA,UAAAD;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;EAzEsB,KAAA;AAAA,EAA0B,OAAA;AAAA;;;;AAFQ,SAAAI,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAkB,OAAAC,EAAA,CAAA,kBAAAC,EAAA,kBAAA,CAAA;AAAA,IAAqB,eAAA;AAAA,IAC7E,eAAA;AAAA,EAAA,GAAA;AAAA;MAAW,KAAA;AAAA,MAAO,KAAAA,EAAA;AAAA,MAA6B,OAAA;AAAA,MAAkB,KAAA;AAAA,MAC/E,eAAA;AAAA,IAAA,GAAA,MAAA,GAAAC,CAAA,MAAAJ,EAAA,GAAAC,EAAA,OAAAI,GAAA;AAAA,MACsDC,EAAAC,GAAA;AAAA,QAAmC,IAAAJ,EAAA,uBAAA;AAAA,QAAe,SAAAA,EAAA,uBAAA;AAAA;;;;;;;;;;;"}

package/dist/chunks/{listbox-option-tag.cca50ff3.js → listbox-option-tag.c293fa09.js}

@@ -1,13 +1,12 @@
-import { defineComponent as _, toRefs as C, computed as n, resolveComponent as i, openBlock as p, createElementBlock as d, createVNode as b, createBlock as y, withCtx as g, createTextVNode as v, toDisplayString as f, createCommentVNode as h, createElementVNode as L } from "vue";
-import { A as $, u as E, B as o, a as T } from "./index.ab64552a.js";
-import { B, c as A, a as S } from "./index.1d501e31.js";
+import { defineComponent as _, toRefs as C, computed as n, resolveComponent as i, openBlock as p, createElementBlock as b, createVNode as d, createBlock as y, withCtx as g, createTextVNode as v, toDisplayString as f, createCommentVNode as h, createElementVNode as L } from "vue";
+import { A as $, u as E, B as o, a as T } from "./index.c7182196.js";
+import { B, a as A, b as S } from "./index.a169ce0d.js";
 import { _ as O } from "./_plugin-vue_export-helper.dad06003.js";
 import { BentoTag as V } from "../tag.js";
 import "../assets/listbox-option-tag.css";
 const I = _({
   name: "bento-avatar",
   components: { AvatarImage: $, BentoTypography: B },
-  inheritAttrs: !1,
   props: {
     /**
      * Displays the user profile without the label.
@@ -36,9 +35,9 @@ const I = _({
     }
   },
   setup(e) {
-    const { username: r } = C(e), c = n(() => e.iconOnly ? e.username : null), u = n(() => e.src ? null : e.username), s = E(r), a = n(() => s.value ? s.value.charCodeAt(0) - 65 : null), t = n(() => {
+    const { username: r } = C(e), c = n(() => e.iconOnly ? e.username : null), u = n(() => e.src ? null : e.username), s = E(r), t = n(() => s.value ? s.value.charCodeAt(0) - 65 : null), a = n(() => {
       const m = 26 / Object.keys(o).length;
-      return a.value <= m ? o.YELLOW : a.value <= m * 2 ? o.BLUE : a.value <= m * 3 ? o.GREEN : o.RED;
+      return t.value <= m ? o.YELLOW : t.value <= m * 2 ? o.BLUE : t.value <= m * 3 ? o.GREEN : o.RED;
     });
     return {
       // Enums
@@ -48,18 +47,18 @@ const I = _({
       // Values
       computedAriaLabel: c,
       computedUsername: u,
-      avatarColor: t
+      avatarColor: a
     };
   }
 });
 const N = ["aria-label"];
-function k(e, r, c, u, s, a) {
-  const t = i("avatar-image"), l = i("bento-typography");
-  return p(), d("div", {
+function k(e, r, c, u, s, t) {
+  const a = i("avatar-image"), l = i("bento-typography");
+  return p(), b("div", {
     class: "b-avatar",
     "aria-label": e.computedAriaLabel
   }, [
-    b(t, {
+    d(a, {
       src: e.src,
       username: e.computedUsername,
       variant: e.BentoAvatarImageVariant.SMALL,
@@ -78,7 +77,7 @@ function k(e, r, c, u, s, a) {
     }, 8, ["el", "variant"]))
   ], 8, N);
 }
-const W = /* @__PURE__ */ O(I, [["render", k], ["__scopeId", "data-v-d63ba74a"]]), D = _({
+const W = /* @__PURE__ */ O(I, [["render", k], ["__scopeId", "data-v-b4b3df10"]]), D = _({
   name: "listbox-tag-option",
   components: {
     BentoTag: V,
@@ -104,11 +103,11 @@ const W = /* @__PURE__ */ O(I, [["render", k], ["__scopeId", "data-v-d63ba74a"]]
   }
 });
 const R = { class: "b-listbox-tag-option" }, U = { "aria-hidden": "true" };
-function j(e, r, c, u, s, a) {
-  const t = i("bento-tag"), l = i("bento-typography");
-  return p(), d("span", R, [
+function j(e, r, c, u, s, t) {
+  const a = i("bento-tag"), l = i("bento-typography");
+  return p(), b("span", R, [
     L("span", U, [
-      b(t, {
+      d(a, {
         class: "b-listbox-tag-option__tag",
         label: e.option.value.toString(),
         variant: e.variant
@@ -131,4 +130,4 @@ export {
   W as B,
   x as L
 };
-//# sourceMappingURL=listbox-option-tag.cca50ff3.js.map
+//# sourceMappingURL=listbox-option-tag.c293fa09.js.map

package/dist/chunks/listbox-option-tag.c293fa09.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-option-tag.c293fa09.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\n            v-if=\"!iconOnly\"\n            class=\"b-avatar__label\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n        >\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, BentoTypographyElement, BentoTypographyVariant } 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                BentoTypographyElement,\n                BentoTypographyVariant,\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=\"BentoTypographyElement.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, BentoTypographyElement } 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                // Enums\n                BentoTypographyElement,\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","BentoTypographyElement","BentoTypographyVariant","openBlock","createElementBlock","_ctx","createBlock","_component_bento_typography","_sfc_main","BentoTag","createElementVNode","_hoisted_2","createVNode","_component_bento_tag"],"mappings":";;;;;;AAoCI,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,MAEH,wBAAAC;AAAA,MACA,wBAAAC;AAAA;AAAA,MACA,mBAAAX;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AA5GuB,SAAAM,EAAA,GAAAC,EAAA,OAAA;AAAA,IAA6B,OAAA;AAAA;EAM9C,GAAA;AAAA;MAH6B,KAAAC,EAAA;AAAA,MACjB,UAAAA,EAAA;AAAA,MACF,SAAAA,EAAA,wBAAA;AAAA,MAGD,OAAAA,EAAA;AAAA,IAAA,GAAA,MAAA,GAAA,CAAA,OAAA,YAAA,WAAA,OAAA,CAAA;AAAA,IAMQA,EAAA,wBAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MALQ,KAAA;AAAA,MAClB,OAAA;AAAA,MACG,IAAAF,EAAA,uBAAA;AAAA,MAEM,SAAAA,EAAA,uBAAA;AAAA,IAAA,GAAA;AAAA;;;;;;;mFCKtBG,IAAAvB,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAwB;AAAA,IACR,iBAAAtB;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;AAAA,MAII,wBAAAa;AAAA,IAEA;AAAA,EACJ;AAER,CAAA;;;;;IA1C2GS,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;MAAkC,KAAA;AAAA,MAAO,IAAAA,EAAA,uBAAA;AAAA;;;;;;;;;;"}