@adyen/bento-vue2 1.47.1 → 1.48.0

package/dist/chunks/{input-field.DUf6qDBc.js → input-field.3V5IblWw.js}

@@ -1,16 +1,16 @@
-import { defineComponent as Q, useAttrs as Z, useSlots as ee, ref as u, provide as te, inject as ae, toRef as oe, computed as r, toRefs as ne } from "vue";
-import { a as re, I as ie, B as se } from "./dropdown.ndl5cKe0.js";
-import { p as de, d as B, B as le } from "./typography.J1v_SPG3.js";
+import { defineComponent as G, useAttrs as Q, useSlots as ee, ref as u, provide as te, inject as ae, toRef as oe, computed as r, toRefs as ne } from "vue";
+import { a as re, I as ie, B as se } from "./dropdown.DWgwNFNB.js";
+import { p as de, d as R, B as le } from "./typography.J1v_SPG3.js";
 import { g as p } from "./generate-uid.NJ8tVoha.js";
-import { g as ue } from "./get-slot-text.Cgn-E48s.js";
+import { g as ue } from "./get-slot-text.BQS5Olxm.js";
 import { u as pe } from "./aria-label.CaUURpnB.js";
 import { u as ce } from "./i18n.BQkEbtPM.js";
 import { u as fe } from "./use-form-layout-loading.D3lALhtC.js";
 import { u as _e } from "./use-has-slot.C9lQZ6nz.js";
 import { F as be, E as ye } from "./error-message.Da-p1QIA.js";
-import { n as ve } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { n as he } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-field.css";
-var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(s || {}), i = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(i || {}), c = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(c || {}), E = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(E || {}), he = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.ESCAPE_PRESSED = "escape-pressed", a.UPDATE_DROPDOWN = "update:dropdown", a.DROPDOWN_INPUT = "dropdown-input", a.FOCUS = "focus", a.CHANGE = "change", a.BLUR = "blur", a.KEYDOWN = "keydown", a))(he || {});
+var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(s || {}), i = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(i || {}), c = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(c || {}), E = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(E || {}), ve = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.ESCAPE_PRESSED = "escape-pressed", a.UPDATE_DROPDOWN = "update:dropdown", a.DROPDOWN_INPUT = "dropdown-input", a.FOCUS = "focus", a.CHANGE = "change", a.BLUR = "blur", a.KEYDOWN = "keydown", a))(ve || {});
 const me = {
   "en-US": {
     ariaLabelDropdownFallback: "{inputLabel} Dropdown",
@@ -18,7 +18,7 @@ const me = {
   }
 }, we = {
   i18n: { messages: me }
-}, De = /* @__PURE__ */ Q({
+}, De = /* @__PURE__ */ G({
   ...we,
   __name: "input-field",
   props: {
@@ -88,6 +88,10 @@ const me = {
      * Setting this property to true will set the input field to read only state.
      */
     readonly: { type: Boolean, default: !1 },
+    /**
+     * Renders a font numeric style with slashed zeros instead of normal ones.
+     */
+    slashedZero: { type: Boolean, default: !1 },
     /**
      * Static text that displayed before or after input value
      * Applicable to the Static Value variant
@@ -130,7 +134,7 @@ const me = {
   },
   emits: ["update:dropdown", "blur", "change", "dropdown-input", "escape-pressed", "focus", "keydown", "keyup", "input"],
   setup(a, { expose: t, emit: o }) {
-    const e = a, n = Z(), f = ee(), { t: v } = ce(), _ = _e(f), g = u(null), A = u(null), k = p("input"), h = p("input-dropdown"), m = p("input-static-value"), T = p("input-description"), I = p("input-error"), w = u(!1);
+    const e = a, n = Q(), f = ee(), { t: h } = ce(), _ = _e(f), g = u(null), A = u(null), k = p("input"), v = p("input-dropdown"), m = p("input-static-value"), T = p("input-description"), I = p("input-error"), w = u(!1);
     te(re, !0);
     const F = ae(ie, u(void 0)), M = () => {
       w.value = !0, o("focus");
@@ -148,9 +152,9 @@ const me = {
       () => l.value && e.dropdownPosition === i.END
     ), D = r(
       () => !e.disabled && !b.value && (!!e.errorMessage || e.error)
-    ), W = r(() => l.value === !0 && d.value === !0 ? `${m} ${h}` : l.value === !0 ? `${h}` : d.value === !0 ? `${m}` : null), O = r(() => v("ariaLabelFallback")), L = r(
-      () => v("ariaLabelDropdownFallback", { inputLabel: P.value })
-    ), N = u(n["aria-label"]), { ariaLabel: C } = ne(e), P = pe({
+    ), W = r(() => l.value === !0 && d.value === !0 ? `${m} ${v}` : l.value === !0 ? `${v}` : d.value === !0 ? `${m}` : null), O = r(() => h("ariaLabelFallback")), L = r(
+      () => h("ariaLabelDropdownFallback", { inputLabel: B.value })
+    ), N = u(n["aria-label"]), { ariaLabel: C } = ne(e), B = pe({
       ariaLabel: N.value,
       // TODO: take this line away when the aria-label props is removed
       label: C,
@@ -161,30 +165,31 @@ const me = {
       [`b-input-field--${c.CONDENSED}`]: e.condensed,
       [`b-input-field--${c.DISABLED}`]: e.disabled,
       [`b-input-field--${c.READONLY}`]: b.value,
-      [`b-input-field--${c.ERROR}`]: D.value
-    })), J = r(() => ({
+      [`b-input-field--${c.ERROR}`]: D.value,
+      "b-input-field--slashed-zero": e.slashedZero
+    })), z = r(() => ({
       "aria-label": L.value,
       ...e.dropdown
-    })), X = (y) => {
-      const G = y.target.value;
-      !e.disabled && !b.value && o("input", G);
-    }, z = (y) => {
+    })), J = (y) => {
+      const Z = y.target.value;
+      !e.disabled && !b.value && o("input", Z);
+    }, X = (y) => {
       o("dropdown-input", y), o("update:dropdown", { ...e == null ? void 0 : e.dropdown, value: y });
     }, S = () => {
       g.value.focus();
-    }, R = () => {
+    }, P = () => {
       e.variant === "dropdown" ? A.value.focus() : S();
     };
     return t({
       focusInput: S,
-      focus: R
-    }), Object.values(E).includes(e.type) || de(`"bento-input-field" dropdown does not support the type ${e.type}`), e.error && B(
+      focus: P
+    }), Object.values(E).includes(e.type) || de(`"bento-input-field" dropdown does not support the type ${e.type}`), e.error && R(
       'BentoInputField "error" property',
       `Use the BentoInputField "errorMessage" property instead to indicate that there is a modifier error.
             Having the field as "undefined" will hide/remove the error.
             <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), _("defaultIconBefore") && B(
+    ), _("defaultIconBefore") && R(
       'BentoInputField "defaultIconBefore" slot',
       `Use the BentoInputField "iconBefore" slot instead to add an icon at the left side of the input field
             <bento-input-field>
@@ -193,7 +198,7 @@ const me = {
               	</template>
             </bento-input-field>`,
       "2.0.0"
-    ), { __sfc: !0, attrs: n, slots: f, props: e, emit: o, t: v, hasSlot: _, inputFieldElement: g, inputDropdownElement: A, inputFieldId: k, dropdownId: h, staticValueId: m, descriptionId: T, errorId: I, isFocused: w, hint: F, onFocus: M, onBlur: V, isReadOnly: b, shouldShowStaticValue: d, isDefaultVariant: U, isPaymentMethodVariant: x, shouldDisplayStaticValueAtStart: H, shouldDisplayStaticValueAtEnd: $, shouldShowDropdown: l, shouldDisplayDropdownAtStart: Y, shouldDisplayDropdownAtEnd: j, shouldShowError: D, computedAriaOwns: W, computedAriaLabelFallbackMessage: O, computedAriaLabelDropdowFallback: L, ariaLabelAttribute: N, ariaLabel: C, computedAriaLabel: P, computedAriaDescribedBy: q, inputFieldConditionalClasses: K, inputFieldDropdownProps: J, onInput: X, onDropdownInput: z, focusInput: S, focus: R, BentoDropdown: se, BentoTypography: le, ErrorMessage: ye, FieldLabel: be };
+    ), { __sfc: !0, attrs: n, slots: f, props: e, emit: o, t: h, hasSlot: _, inputFieldElement: g, inputDropdownElement: A, inputFieldId: k, dropdownId: v, staticValueId: m, descriptionId: T, errorId: I, isFocused: w, hint: F, onFocus: M, onBlur: V, isReadOnly: b, shouldShowStaticValue: d, isDefaultVariant: U, isPaymentMethodVariant: x, shouldDisplayStaticValueAtStart: H, shouldDisplayStaticValueAtEnd: $, shouldShowDropdown: l, shouldDisplayDropdownAtStart: Y, shouldDisplayDropdownAtEnd: j, shouldShowError: D, computedAriaOwns: W, computedAriaLabelFallbackMessage: O, computedAriaLabelDropdowFallback: L, ariaLabelAttribute: N, ariaLabel: C, computedAriaLabel: B, computedAriaDescribedBy: q, inputFieldConditionalClasses: K, inputFieldDropdownProps: z, onInput: J, onDropdownInput: X, focusInput: S, focus: P, BentoDropdown: se, BentoTypography: le, ErrorMessage: ye, FieldLabel: be };
   }
 });
 var Se = function() {
@@ -211,13 +216,13 @@ var Se = function() {
   } } }, "input", e.attrs, !1)), e.hint && e.isFocused && t.value ? o(e.BentoTypography, { staticClass: "b-input-field__hint", attrs: { el: "span" } }, [t._v(" " + t._s(e.hint) + " ")]) : t._e()], 1), e.hasSlot("iconAfter") ? o("span", { staticClass: "b-input-field__icon-after", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0, "data-testid": "input-text__icon-after" } }, [t._t("iconAfter")], 2) : t._e(), e.shouldDisplayStaticValueAtEnd ? o(e.BentoTypography, { staticClass: "b-input-field__static-value b-input-field__static-value--end", attrs: { id: e.staticValueId, el: "span", variant: "body" } }, [t._t("staticValue")], 2) : t._e(), e.shouldDisplayDropdownAtEnd ? o("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--end", attrs: { id: e.dropdownId, "data-testid": "input-field-dropdown-container-end" }, on: { click: function(n) {
     n.stopPropagation();
   } } }, [t.dropdown ? o(e.BentoDropdown, t._b({ ref: "inputDropdownElement", attrs: { id: e.dropdownId, disabled: t.disabled, readonly: e.isReadOnly }, on: { input: e.onDropdownInput } }, "bento-dropdown", e.inputFieldDropdownProps, !1)) : t._e()], 1) : t._e()], 1), e.shouldShowError && t.errorMessage ? o(e.ErrorMessage, { staticClass: "b-input-field__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), e.hasSlot("description") ? o("span", { staticClass: "b-input-field__description", attrs: { id: e.descriptionId }, on: { click: e.focusInput } }, [o(e.BentoTypography, { attrs: { el: "span", variant: "body" } }, [t._t("description", null, { id: "description" })], 2)], 1) : t._e()], 1);
-}, Ee = [], ge = /* @__PURE__ */ ve(
+}, Ee = [], ge = /* @__PURE__ */ he(
   De,
   Se,
   Ee,
   !1,
   null,
-  "a09de9f9"
+  "39d64ed1"
 );
 const Fe = ge.exports;
 export {
@@ -226,6 +231,6 @@ export {
   i as b,
   c,
   E as d,
-  he as e
+  ve as e
 };
-//# sourceMappingURL=input-field.DUf6qDBc.js.map
+//# sourceMappingURL=input-field.3V5IblWw.js.map

package/dist/chunks/input-field.3V5IblWw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.3V5IblWw.js","sources":["../../src/components/input-field/input-field.types.ts","../../src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldVariant {\n    DEFAULT = 'default',\n    PAYMENT_METHOD = 'payment-method',\n    STATIC_VALUE = 'static-value',\n    DROPDOWN = 'dropdown',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldElementPosition {\n    START = 'start',\n    END = 'end',\n}\n\nexport enum BentoInputFieldStateClass {\n    CONDENSED = 'condensed',\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\ntype DropdownProps = InstanceType<typeof BentoDropdown>['$props'];\nexport type BentoInputDropdownProps = {\n    items: DropdownProps['items'];\n    value: DropdownProps['value'];\n    dynamicFiltering?: DropdownProps['dynamicFiltering'];\n    'aria-label'?: string;\n};\n\n/**\n * @deprecated The use of these enums is no longer supported.\n * Use `v-on:` or `@` to listen to the events being emitted.\n * This enum will be removed in 2.0.\n */\nexport enum BentoInputFieldEvent {\n    INPUT = 'input',\n    ESCAPE_PRESSED = 'escape-pressed',\n    UPDATE_DROPDOWN = 'update:dropdown',\n    DROPDOWN_INPUT = 'dropdown-input',\n    FOCUS = 'focus',\n    CHANGE = 'change',\n    BLUR = 'blur',\n    KEYDOWN = 'keydown',\n}\n","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        data-testid=\"input-text-container\"\n        :class=\"inputFieldConditionalClasses\"\n        el=\"div\"\n        variant=\"body\"\n    >\n        <field-label\n            v-if=\"hasSlot('default')\"\n            :for=\"inputFieldId\"\n            data-testid=\"input-field-label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n            @click=\"focusInput\"\n        >\n            <slot></slot>\n        </field-label>\n\n        <div class=\"b-input-field__input-box\" data-testid=\"input-box\" :aria-disabled=\"disabled\" @click=\"focusInput\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"isDefaultVariant && (hasSlot('defaultIconBefore') || hasSlot('iconBefore'))\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-before\"\n            >\n                <slot v-if=\"hasSlot('iconBefore')\" name=\"iconBefore\" />\n                <slot v-if=\"hasSlot('defaultIconBefore') && !hasSlot('iconBefore')\" name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"isPaymentMethodVariant && hasSlot('paymentMethod')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__payment-method\"\n            >\n                <slot name=\"paymentMethod\" />\n            </span>\n\n            <!-- Dropdown at start -->\n            <div\n                v-if=\"shouldDisplayDropdownAtStart\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--start\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n\n            <!-- Static Value at start -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtStart\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--start\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n            <div class=\"b-input-field__input-container\">\n                <input\n                    :id=\"inputFieldId\"\n                    v-bind=\"attrs\"\n                    ref=\"inputFieldElement\"\n                    class=\"b-input-field__input\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-describedby=\"computedAriaDescribedBy\"\n                    :aria-owns=\"computedAriaOwns\"\n                    :aria-invalid=\"shouldShowError\"\n                    :placeholder=\"placeholder\"\n                    :type=\"type\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onInput\"\n                    @change=\"emit('change')\"\n                    @focus=\"onFocus\"\n                    @blur=\"onBlur\"\n                    @keydown=\"emit('keydown', $event)\"\n                    @keyup=\"emit('keyup', $event)\"\n                    @keydown.esc=\"emit('escape-pressed')\"\n                />\n\n                <!-- Hint at the end -->\n                <bento-typography v-if=\"hint && isFocused && value\" el=\"span\" class=\"b-input-field__hint\">\n                    {{ hint }}\n                </bento-typography>\n            </div>\n\n            <span\n                v-if=\"hasSlot('iconAfter')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-after\"\n                data-testid=\"input-text__icon-after\"\n            >\n                <slot name=\"iconAfter\" />\n            </span>\n\n            <!-- Static Value at the end -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtEnd\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--end\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                data-testid=\"input-field-dropdown-container-end\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n        </div>\n\n        <error-message\n            v-if=\"shouldShowError && !!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-input-field__error-message\"\n        />\n\n        <span v-if=\"hasSlot('description')\" :id=\"descriptionId\" class=\"b-input-field__description\" @click=\"focusInput\">\n            <bento-typography el=\"span\" variant=\"body\">\n                <slot id=\"description\" name=\"description\" />\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, PropType, provide, Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/core/utils/ts';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import {\n        INPUT_FIELD_COMPONENT_INJECTION_KEY,\n        INPUT_FIELD_HINT_INJECTION_KEY,\n    } from '@/components/input-field/input-field.keys';\n\n    // Composables\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoListboxSelectedValue } from '@/types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Indicates whether the element is exposed to an accessibility API.\n         */\n        ariaHidden: { type: Boolean, default: true },\n\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Text that labels an the input element\n         */\n        ariaLabel: { type: String, default: undefined },\n\n        /**\n         * Reduces height of the input\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Disables the possibility of changing value in the input-field\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Dropdown props for the small selectable dropdown menu.\n         * Properties supported:\n         *\n         *  - `value`: Selected value of the dropdown\n         *  - `items`: List of available items\n         *  - `aria-label`: Text that labels the dropdown element\n         *\n         */\n        dropdown: {\n            type: Object as PropType<BentoInputDropdownProps>,\n            default: undefined,\n        },\n\n        /**\n         * Position of the dropdown before or after input value\n         */\n        dropdownPosition: {\n            type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n            default: BentoInputFieldElementPosition.START,\n            validator: (value: BentoInputFieldElementPosition) =>\n                Object.values(BentoInputFieldElementPosition).includes(value),\n        },\n\n        /**\n         * Adds error validation class for outlining input-field.\n         *\n         * @deprecated Use \"errorMessage\" prop instead\n         */\n        error: { type: Boolean, default: false },\n\n        /**\n         * Renders input-field with an error state and the error message beneath the input box\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * Highlights the dropdown is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Text displayed as the placeholder of the input-field\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Highlights the dropdown is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Setting this property to true will set the input field to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Renders a font numeric style with slashed zeros instead of normal ones.\n         */\n        slashedZero: { type: Boolean, default: false },\n\n        /**\n         * Static text that displayed before or after input value\n         * Applicable to the Static Value variant\n         */\n        staticValue: { type: String, default: '' },\n\n        /**\n         * Position of Static Value before or after input value\n         */\n        staticValuePosition: {\n            type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n            default: BentoInputFieldElementPosition.START,\n            validator: (value: BentoInputFieldElementPosition) =>\n                Object.values(BentoInputFieldElementPosition).includes(value),\n        },\n\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * A string specifying the type of control to render.\n         * All `input` types are available but only `search`, `text` and `number` are fully supported.\n         *\n         * If `type` is `search`, use `bento-search-bar` instead.\n         */\n        type: {\n            type: String as PropType<BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type']>,\n            default: BentoInputFieldType.TEXT,\n        },\n\n        /**\n         * Text displayed as the value of the input-field\n         */\n        value: { type: [String, Number] as PropType<BentoInputFieldValue>, default: undefined },\n\n        /**\n         * Describes the different variants for the input element\n         */\n        variant: {\n            type: String as PropType<BentoInputFieldVariant | `${BentoInputFieldVariant}`>,\n            default: BentoInputFieldVariant.DEFAULT,\n            validator: (value: BentoInputFieldVariant) => Object.values(BentoInputFieldVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"update:dropdown\", \"blur\", \"change\", \"dropdown-input\", \"escape-pressed\", \"focus\", \"keydown\", \"keyup\", \"input\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const hasSlot = useHasSlot(slots);\n    const inputFieldElement = ref(null);\n    const inputDropdownElement = ref(null);\n    const inputFieldId = generateUid('input');\n    const dropdownId = generateUid('input-dropdown');\n    const staticValueId = generateUid('input-static-value');\n    const descriptionId = generateUid('input-description');\n    const errorId = generateUid('input-error');\n    const isFocused = ref(false);\n\n    // Provide INPUT_FIELD_COMPONENT_INJECTION_KEY as true, to set the input only dropdown size variant in the BentoDropdown comp\n    provide(INPUT_FIELD_COMPONENT_INJECTION_KEY, true);\n    // Renders the input with a hint if a string is provided\n    const hint = inject<Ref<string | undefined>>(INPUT_FIELD_HINT_INJECTION_KEY, ref(undefined));\n\n    const onFocus = () => {\n        isFocused.value = true;\n        emit('focus');\n    };\n\n    const onBlur = () => {\n        isFocused.value = false;\n        emit('blur');\n    };\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const shouldShowStaticValue = computed(\n        () => props.variant === BentoInputFieldVariant.STATIC_VALUE && !!slots.staticValue\n    );\n\n    const isDefaultVariant = computed(() => props.variant === BentoInputFieldVariant.DEFAULT);\n\n    const isPaymentMethodVariant = computed(() => props.variant === BentoInputFieldVariant.PAYMENT_METHOD);\n\n    const shouldDisplayStaticValueAtStart = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayStaticValueAtEnd = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowDropdown = computed(() => props.variant === BentoInputFieldVariant.DROPDOWN && !!props.dropdown);\n    const shouldDisplayDropdownAtStart = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayDropdownAtEnd = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowError = computed(\n        () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.error)\n    );\n\n    const computedAriaOwns = computed(() => {\n        if (shouldShowDropdown.value === true && shouldShowStaticValue.value === true) {\n            return `${staticValueId} ${dropdownId}`;\n        }\n        if (shouldShowDropdown.value === true) {\n            return `${dropdownId}`;\n        }\n        if (shouldShowStaticValue.value === true) {\n            return `${staticValueId}`;\n        }\n        return null;\n    });\n\n    // vue-i18n issue with t() used in script - direct usage in template works\n    // requires either createI18n({ legacy: false }) or to be wrapped in computed()\n    const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback'));\n    const computedAriaLabelDropdowFallback = computed(() =>\n        t('ariaLabelDropdownFallback', { inputLabel: computedAriaLabel.value })\n    );\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: hasSlot('default')\n            ? (getSlotText(slots)('default') as string)\n            : computedAriaLabelFallbackMessage,\n    });\n\n    const computedAriaDescribedBy = computed(\n        () =>\n            `${hasSlot('description') ? descriptionId : ''} ${\n                shouldShowError.value && !!props.errorMessage ? errorId : ''\n            }`\n    );\n\n    const inputFieldConditionalClasses = computed(() => ({\n        [`b-input-field--${BentoInputFieldStateClass.CONDENSED}`]: props.condensed,\n        [`b-input-field--${BentoInputFieldStateClass.DISABLED}`]: props.disabled,\n        [`b-input-field--${BentoInputFieldStateClass.READONLY}`]: isReadOnly.value,\n        [`b-input-field--${BentoInputFieldStateClass.ERROR}`]: shouldShowError.value,\n        [`b-input-field--slashed-zero`]: props.slashedZero,\n    }));\n\n    const inputFieldDropdownProps = computed(() => ({\n        'aria-label': computedAriaLabelDropdowFallback.value,\n        ...props.dropdown,\n    }));\n\n    const onInput = (event: Event) => {\n        const inputValue = (event.target as HTMLInputElement).value;\n        if (!props.disabled && !isReadOnly.value) {\n            emit('input', inputValue);\n        }\n    };\n\n    const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n        emit('dropdown-input', selectedValue);\n        emit('update:dropdown', { ...props?.dropdown, value: selectedValue });\n    };\n\n    const focusInput = () => {\n        inputFieldElement.value.focus();\n    };\n\n    const focus = () => {\n        if (props.variant === 'dropdown') {\n            inputDropdownElement.value.focus();\n        } else {\n            focusInput();\n        }\n    };\n\n    // Expose method so that other components can focus on it in Vue3\n    defineExpose({\n        focusInput,\n        focus,\n    });\n\n    if (!Object.values(BentoInputFieldType).includes(props.type as BentoInputFieldType)) {\n        printDevelopmentWarning(`\"bento-input-field\" dropdown does not support the type ${props.type}`);\n    }\n\n    /**\n     * Deprecations\n     */\n    if (props.error) {\n        deprecate(\n            'BentoInputField \"error\" property',\n            `Use the BentoInputField \"errorMessage\" property instead to indicate that there is a modifier error.\n            Having the field as \"undefined\" will hide/remove the error.\n            <bento-dropdown errorMessage=\"Error message text\" />`,\n            '2.0.0'\n        );\n    }\n\n    if (hasSlot('defaultIconBefore')) {\n        deprecate(\n            'BentoInputField \"defaultIconBefore\" slot',\n            `Use the BentoInputField \"iconBefore\" slot instead to add an icon at the left side of the input field\n            <bento-input-field>\n              \\t<template #iconBefore>\n                \\t\\t<my-icon-goes-here />\n              \\t</template>\n            </bento-input-field>`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input field component is used to create interactive controls for web-based\n     * forms in order to accept data from the user.\n     *\n     * @example\n     * import { BentoInputField } from '@adyen/bento-vue2'\n     *\n     * const inputValue = ref('');\n     *\n     * export default {\n     *      components: { BentoInputField },\n     *      tempate: `\n     *          <bento-input-field\n     *              :value=\"inputValue\"\n     *              :input=\"newValue => inputValue.value = newValue\"\n     *          >\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field.scss\" />\n"],"names":["BentoInputFieldVariant","BentoInputFieldVariant2","BentoInputFieldElementPosition","BentoInputFieldElementPosition2","BentoInputFieldStateClass","BentoInputFieldStateClass2","BentoInputFieldType","BentoInputFieldType2","BentoInputFieldEvent","BentoInputFieldEvent2","__default__","messages","attrs","useAttrs","slots","useSlots","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputDropdownElement","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","isFocused","provide","INPUT_FIELD_COMPONENT_INJECTION_KEY","hint","inject","INPUT_FIELD_HINT_INJECTION_KEY","onFocus","emit","onBlur","isReadOnly","useFormLayoutFieldLoading","toRef","props","shouldShowStaticValue","computed","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","computedAriaLabelFallbackMessage","computedAriaLabelDropdowFallback","computedAriaLabel","ariaLabelAttribute","ariaLabel","toRefs","useAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","inputFieldDropdownProps","onInput","event","inputValue","onDropdownInput","selectedValue","focusInput","focus","expose","printDevelopmentWarning","deprecate"],"mappings":"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"}

package/dist/chunks/{inspector.types.8071wkf0.js → inspector.types.GOl_-hXm.js}

@@ -1,6 +1,6 @@
 import { defineComponent as c, ref as l, computed as p } from "vue";
 import { B as d } from "./typography.J1v_SPG3.js";
-import { B as _ } from "./button.BX6ZJxF7.js";
+import { B as _ } from "./button.CdAFZa4V.js";
 import { B as u } from "./focus-trap.CGypVwG6.js";
 import { B as f } from "./loading-indicator.z8COalOc.js";
 import { E as m } from "./expand.CwwKq7Uc.js";
@@ -67,4 +67,4 @@ export {
   j as B,
   U as i
 };
-//# sourceMappingURL=inspector.types.8071wkf0.js.map
+//# sourceMappingURL=inspector.types.GOl_-hXm.js.map

package/dist/chunks/{inspector.types.8071wkf0.js.map → inspector.types.GOl_-hXm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"inspector.types.8071wkf0.js","sources":["../../src/components/inspector/inspector.vue","../../src/components/inspector/inspector.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-inspector\" :class=\"conditionalClass\">\n        <div class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside v-if=\"isOpen\" class=\"b-inspector__container-wrapper\" :aria-labelledby=\"titleId\">\n                <bento-focus-trap class=\"b-inspector__container\">\n                    <div class=\"b-inspector__header\">\n                        <bento-typography :id=\"titleId\" el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                            {{ title }}\n                        </bento-typography>\n                        <div class=\"b-inspector__icons\">\n                            <bento-button v-if=\"expandable\" variant=\"tertiary\" @click=\"emit('expand')\">\n                                <template #iconLeft><expand-icon :svg-title=\"t('expand')\"></expand-icon></template>\n                            </bento-button>\n                            <bento-button variant=\"tertiary\" @click=\"emit('update:is-open', false)\">\n                                <template #iconLeft><cross-icon :svg-title=\"t('close')\"></cross-icon></template>\n                            </bento-button>\n                        </div>\n                    </div>\n                    <div class=\"b-inspector__content\">\n                        <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                        <slot v-else name=\"content\" />\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoInspectorSize } from './inspector.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  expandable: { type: Boolean, default: false },\n  isOpen: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  size: { default: 'small' },\n  title: null\n});\n\n    const emit = defineEmits([\"update:is-open\", \"expand\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const titleId = generateUid('inspectorTitle');\n    const lastFocusedElement = ref<HTMLElement>(null);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n    }));\n\n    const setFocus = () => {\n        if (props.isOpen) {\n            lastFocusedElement.value = document.activeElement as HTMLElement;\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            lastFocusedElement.value?.focus();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  @update:is-open=\"isOpen = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n","export const BentoInspectorSizeOptions = ['small', 'large'] as const;\n\nexport type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];\n"],"names":["__default__","messages","t","useI18n","titleId","generateUid","lastFocusedElement","ref","conditionalClass","computed","props","_a","BentoInspectorSizeOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;GAmGIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;iBAzCA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,gBAAA,GACAC,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAC,EAAA,IAAA,EAAA,GAAA;AAAA,IACL,EAAA;mHAGpC,MAAA;;AACI,MAAAA,EAAA,SACIJ,EAAA,QAAA,SAAA,iBAIAK,IAAAL,EAAA,UAAA,QAAAK,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;qBCzEKC,IAAA,CAAA,SAAA,OAAA;"}
+{"version":3,"file":"inspector.types.GOl_-hXm.js","sources":["../../src/components/inspector/inspector.vue","../../src/components/inspector/inspector.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-inspector\" :class=\"conditionalClass\">\n        <div class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside v-if=\"isOpen\" class=\"b-inspector__container-wrapper\" :aria-labelledby=\"titleId\">\n                <bento-focus-trap class=\"b-inspector__container\">\n                    <div class=\"b-inspector__header\">\n                        <bento-typography :id=\"titleId\" el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                            {{ title }}\n                        </bento-typography>\n                        <div class=\"b-inspector__icons\">\n                            <bento-button v-if=\"expandable\" variant=\"tertiary\" @click=\"emit('expand')\">\n                                <template #iconLeft><expand-icon :svg-title=\"t('expand')\"></expand-icon></template>\n                            </bento-button>\n                            <bento-button variant=\"tertiary\" @click=\"emit('update:is-open', false)\">\n                                <template #iconLeft><cross-icon :svg-title=\"t('close')\"></cross-icon></template>\n                            </bento-button>\n                        </div>\n                    </div>\n                    <div class=\"b-inspector__content\">\n                        <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                        <slot v-else name=\"content\" />\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoInspectorSize } from './inspector.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  expandable: { type: Boolean, default: false },\n  isOpen: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  size: { default: 'small' },\n  title: null\n});\n\n    const emit = defineEmits([\"update:is-open\", \"expand\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const titleId = generateUid('inspectorTitle');\n    const lastFocusedElement = ref<HTMLElement>(null);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n    }));\n\n    const setFocus = () => {\n        if (props.isOpen) {\n            lastFocusedElement.value = document.activeElement as HTMLElement;\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            lastFocusedElement.value?.focus();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  @update:is-open=\"isOpen = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n","export const BentoInspectorSizeOptions = ['small', 'large'] as const;\n\nexport type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];\n"],"names":["__default__","messages","t","useI18n","titleId","generateUid","lastFocusedElement","ref","conditionalClass","computed","props","_a","BentoInspectorSizeOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;GAmGIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;iBAzCA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,gBAAA,GACAC,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAC,EAAA,IAAA,EAAA,GAAA;AAAA,IACL,EAAA;mHAGpC,MAAA;;AACI,MAAAA,EAAA,SACIJ,EAAA,QAAA,SAAA,iBAIAK,IAAAL,EAAA,UAAA,QAAAK,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;qBCzEKC,IAAA,CAAA,SAAA,OAAA;"}

package/dist/chunks/{keyboard-navigation.Clz1jOaA.js → keyboard-navigation.pB8weElW.js}

@@ -12,6 +12,7 @@ const d = (s) => (e) => {
     case "Tab":
       s.dispatchEvent(new CustomEvent(t.TAB, { detail: e }));
       break;
+    // Space
     case " ":
       s.dispatchEvent(new CustomEvent(t.SPACE, { detail: e }));
       break;
@@ -62,4 +63,4 @@ export {
   t as B,
   r as a
 };
-//# sourceMappingURL=keyboard-navigation.Clz1jOaA.js.map
+//# sourceMappingURL=keyboard-navigation.pB8weElW.js.map

package/dist/chunks/{keyboard-navigation.Clz1jOaA.js.map → keyboard-navigation.pB8weElW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"keyboard-navigation.Clz1jOaA.js","sources":["../../src/types/keyboard-navigation.ts","../../src/directives/keyboard-navigation/keyboard-navigation.ts"],"sourcesContent":["export enum BentoKeyboardNavigationKeyDownEvent {\n    ARROW_DOWN = 'keydown:arrow-down',\n    ARROW_LEFT = 'keydown:arrow-left',\n    ARROW_RIGHT = 'keydown:arrow-right',\n    ARROW_UP = 'keydown:arrow-up',\n    END = 'keydown:end',\n    ENTER = 'keydown:enter',\n    ESCAPE = 'keydown:escape',\n    HOME = 'keydown:home',\n    PAGE_DOWN = 'keydown:page-down',\n    PAGE_UP = 'keydown:page-up',\n    SHIFT_PAGE_DOWN = 'keydown:shift-page-down',\n    SHIFT_PAGE_UP = 'keydown:shift-page-up',\n    TAB = 'keydown:tab',\n    SPACE = 'keydown:space',\n}\n","import { listen } from '@/utils/ts/events';\nimport { Binding } from './keyboard-navigation.types';\nimport { BentoKeyboardNavigationKeyDownEvent } from '@/types';\nimport type { DirectiveHook } from 'vue';\n\nconst onKeyEvent = (el: Element) => (event: KeyboardEvent) => {\n    switch (event.key) {\n        case 'Esc':\n        case 'Escape':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ESCAPE, { detail: event }));\n            break;\n        case 'Enter':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ENTER, { detail: event }));\n            break;\n        case 'Tab':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.TAB, { detail: event }));\n            break;\n        // Space\n        case ' ':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.SPACE, { detail: event }));\n            break;\n        case 'Right':\n        case 'ArrowRight':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_RIGHT, { detail: event }));\n            break;\n        case 'Left':\n        case 'ArrowLeft':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_LEFT, { detail: event }));\n            break;\n        case 'Up':\n        case 'ArrowUp':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_UP, { detail: event }));\n            break;\n        case 'Down':\n        case 'ArrowDown':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN, { detail: event }));\n            break;\n        case 'PageUp':\n            if (event.shiftKey) {\n                el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.SHIFT_PAGE_UP, { detail: event }));\n            } else {\n                el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.PAGE_UP, { detail: event }));\n            }\n            break;\n        case 'PageDown':\n            if (event.shiftKey) {\n                el.dispatchEvent(\n                    new CustomEvent(BentoKeyboardNavigationKeyDownEvent.SHIFT_PAGE_DOWN, { detail: event })\n                );\n            } else {\n                el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.PAGE_DOWN, { detail: event }));\n            }\n            break;\n        case 'Home':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.HOME, { detail: event }));\n            break;\n        case 'End':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.END, { detail: event }));\n            break;\n        default:\n            break;\n    }\n};\n\nconst bindDirective: DirectiveHook<Element> = (el, binding: Binding<undefined>) => {\n    // Register the listener cleanup function\n    // eslint-disable-next-line no-param-reassign, dot-notation\n    binding['keyDownListener'] = listen(el, 'keydown', onKeyEvent(el));\n};\n\nconst unbindDirective: DirectiveHook<Element> = (_, binding: Binding<undefined>) => {\n    if (binding.keyDownListener) {\n        binding.keyDownListener();\n    }\n};\n\nexport const BentoKeyboardNavigationDirective = {\n    // Vue 2 Directive hooks\n    bind: bindDirective,\n    unbind: unbindDirective,\n    // Vue 3 Directive hooks\n    beforeMount: bindDirective,\n    unmounted: unbindDirective,\n};\n"],"names":["BentoKeyboardNavigationKeyDownEvent","onKeyEvent","el","event","bindDirective","binding","listen","unbindDirective","_","BentoKeyboardNavigationDirective"],"mappings":";AAAY,IAAAA,sBAAAA,OACRA,EAAA,aAAa,sBACbA,EAAA,aAAa,sBACbA,EAAA,cAAc,uBACdA,EAAA,WAAW,oBACXA,EAAA,MAAM,eACNA,EAAA,QAAQ,iBACRA,EAAA,SAAS,kBACTA,EAAA,OAAO,gBACPA,EAAA,YAAY,qBACZA,EAAA,UAAU,mBACVA,EAAA,kBAAkB,2BAClBA,EAAA,gBAAgB,yBAChBA,EAAA,MAAM,eACNA,EAAA,QAAQ,iBAdAA,IAAAA,KAAA,CAAA,CAAA;ACKZ,MAAMC,IAAa,CAACC,MAAgB,CAACC,MAAyB;AAC1D,UAAQA,EAAM,KAAK;AAAA,IACf,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,QAAQ,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC/F;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,OAAO,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC9F;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,KAAK,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC5F;AAAA,IAEJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,OAAO,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC9F;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,aAAa,EAAE,QAAQG,EAAM,CAAC,CAAC;AACpG;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,YAAY,EAAE,QAAQG,EAAM,CAAC,CAAC;AACnG;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,UAAU,EAAE,QAAQG,EAAM,CAAC,CAAC;AACjG;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,YAAY,EAAE,QAAQG,EAAM,CAAC,CAAC;AACnG;AAAA,IACJ,KAAK;AACD,MAAIA,EAAM,WACHD,EAAA,cAAc,IAAI,YAAYF,EAAoC,eAAe,EAAE,QAAQG,EAAM,CAAC,CAAC,IAEnGD,EAAA,cAAc,IAAI,YAAYF,EAAoC,SAAS,EAAE,QAAQG,EAAM,CAAC,CAAC;AAEpG;AAAA,IACJ,KAAK;AACD,MAAIA,EAAM,WACHD,EAAA;AAAA,QACC,IAAI,YAAYF,EAAoC,iBAAiB,EAAE,QAAQG,EAAO,CAAA;AAAA,MAC1F,IAEGD,EAAA,cAAc,IAAI,YAAYF,EAAoC,WAAW,EAAE,QAAQG,EAAM,CAAC,CAAC;AAEtG;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,MAAM,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC7F;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,KAAK,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC5F;AAAA,EAEA;AAEZ,GAEMC,IAAwC,CAACF,GAAIG,MAAgC;AAG/E,EAAAA,EAAQ,kBAAqBC,EAAOJ,GAAI,WAAWD,EAAWC,CAAE,CAAC;AACrE,GAEMK,IAA0C,CAACC,GAAGH,MAAgC;AAChF,EAAIA,EAAQ,mBACRA,EAAQ,gBAAgB;AAEhC,GAEaI,IAAmC;AAAA;AAAA,EAE5C,MAAML;AAAA,EACN,QAAQG;AAAA;AAAA,EAER,aAAaH;AAAA,EACb,WAAWG;AACf;"}
+{"version":3,"file":"keyboard-navigation.pB8weElW.js","sources":["../../src/types/keyboard-navigation.ts","../../src/directives/keyboard-navigation/keyboard-navigation.ts"],"sourcesContent":["export enum BentoKeyboardNavigationKeyDownEvent {\n    ARROW_DOWN = 'keydown:arrow-down',\n    ARROW_LEFT = 'keydown:arrow-left',\n    ARROW_RIGHT = 'keydown:arrow-right',\n    ARROW_UP = 'keydown:arrow-up',\n    END = 'keydown:end',\n    ENTER = 'keydown:enter',\n    ESCAPE = 'keydown:escape',\n    HOME = 'keydown:home',\n    PAGE_DOWN = 'keydown:page-down',\n    PAGE_UP = 'keydown:page-up',\n    SHIFT_PAGE_DOWN = 'keydown:shift-page-down',\n    SHIFT_PAGE_UP = 'keydown:shift-page-up',\n    TAB = 'keydown:tab',\n    SPACE = 'keydown:space',\n}\n","import { listen } from '@/utils/ts/events';\nimport { Binding } from './keyboard-navigation.types';\nimport { BentoKeyboardNavigationKeyDownEvent } from '@/types';\nimport type { DirectiveHook } from 'vue';\n\nconst onKeyEvent = (el: Element) => (event: KeyboardEvent) => {\n    switch (event.key) {\n        case 'Esc':\n        case 'Escape':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ESCAPE, { detail: event }));\n            break;\n        case 'Enter':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ENTER, { detail: event }));\n            break;\n        case 'Tab':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.TAB, { detail: event }));\n            break;\n        // Space\n        case ' ':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.SPACE, { detail: event }));\n            break;\n        case 'Right':\n        case 'ArrowRight':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_RIGHT, { detail: event }));\n            break;\n        case 'Left':\n        case 'ArrowLeft':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_LEFT, { detail: event }));\n            break;\n        case 'Up':\n        case 'ArrowUp':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_UP, { detail: event }));\n            break;\n        case 'Down':\n        case 'ArrowDown':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN, { detail: event }));\n            break;\n        case 'PageUp':\n            if (event.shiftKey) {\n                el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.SHIFT_PAGE_UP, { detail: event }));\n            } else {\n                el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.PAGE_UP, { detail: event }));\n            }\n            break;\n        case 'PageDown':\n            if (event.shiftKey) {\n                el.dispatchEvent(\n                    new CustomEvent(BentoKeyboardNavigationKeyDownEvent.SHIFT_PAGE_DOWN, { detail: event })\n                );\n            } else {\n                el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.PAGE_DOWN, { detail: event }));\n            }\n            break;\n        case 'Home':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.HOME, { detail: event }));\n            break;\n        case 'End':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.END, { detail: event }));\n            break;\n        default:\n            break;\n    }\n};\n\nconst bindDirective: DirectiveHook<Element> = (el, binding: Binding<undefined>) => {\n    // Register the listener cleanup function\n    // eslint-disable-next-line no-param-reassign, dot-notation\n    binding['keyDownListener'] = listen(el, 'keydown', onKeyEvent(el));\n};\n\nconst unbindDirective: DirectiveHook<Element> = (_, binding: Binding<undefined>) => {\n    if (binding.keyDownListener) {\n        binding.keyDownListener();\n    }\n};\n\nexport const BentoKeyboardNavigationDirective = {\n    // Vue 2 Directive hooks\n    bind: bindDirective,\n    unbind: unbindDirective,\n    // Vue 3 Directive hooks\n    beforeMount: bindDirective,\n    unmounted: unbindDirective,\n};\n"],"names":["BentoKeyboardNavigationKeyDownEvent","onKeyEvent","el","event","bindDirective","binding","listen","unbindDirective","_","BentoKeyboardNavigationDirective"],"mappings":";AAAY,IAAAA,sBAAAA,OACRA,EAAA,aAAa,sBACbA,EAAA,aAAa,sBACbA,EAAA,cAAc,uBACdA,EAAA,WAAW,oBACXA,EAAA,MAAM,eACNA,EAAA,QAAQ,iBACRA,EAAA,SAAS,kBACTA,EAAA,OAAO,gBACPA,EAAA,YAAY,qBACZA,EAAA,UAAU,mBACVA,EAAA,kBAAkB,2BAClBA,EAAA,gBAAgB,yBAChBA,EAAA,MAAM,eACNA,EAAA,QAAQ,iBAdAA,IAAAA,KAAA,CAAA,CAAA;ACKZ,MAAMC,IAAa,CAACC,MAAgB,CAACC,MAAyB;AAC1D,UAAQA,EAAM,KAAK;AAAA,IACf,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,QAAQ,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC/F;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,OAAO,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC9F;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,KAAK,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC5F;AAAA;AAAA,IAEJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,OAAO,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC9F;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,aAAa,EAAE,QAAQG,EAAM,CAAC,CAAC;AACpG;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,YAAY,EAAE,QAAQG,EAAM,CAAC,CAAC;AACnG;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,UAAU,EAAE,QAAQG,EAAM,CAAC,CAAC;AACjG;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,YAAY,EAAE,QAAQG,EAAM,CAAC,CAAC;AACnG;AAAA,IACJ,KAAK;AACD,MAAIA,EAAM,WACHD,EAAA,cAAc,IAAI,YAAYF,EAAoC,eAAe,EAAE,QAAQG,EAAM,CAAC,CAAC,IAEnGD,EAAA,cAAc,IAAI,YAAYF,EAAoC,SAAS,EAAE,QAAQG,EAAM,CAAC,CAAC;AAEpG;AAAA,IACJ,KAAK;AACD,MAAIA,EAAM,WACHD,EAAA;AAAA,QACC,IAAI,YAAYF,EAAoC,iBAAiB,EAAE,QAAQG,EAAO,CAAA;AAAA,MAC1F,IAEGD,EAAA,cAAc,IAAI,YAAYF,EAAoC,WAAW,EAAE,QAAQG,EAAM,CAAC,CAAC;AAEtG;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,MAAM,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC7F;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,KAAK,EAAE,QAAQG,EAAM,CAAC,CAAC;AAC5F;AAAA,EAEA;AAEZ,GAEMC,IAAwC,CAACF,GAAIG,MAAgC;AAG/E,EAAAA,EAAQ,kBAAqBC,EAAOJ,GAAI,WAAWD,EAAWC,CAAE,CAAC;AACrE,GAEMK,IAA0C,CAACC,GAAGH,MAAgC;AAChF,EAAIA,EAAQ,mBACRA,EAAQ,gBAAgB;AAEhC,GAEaI,IAAmC;AAAA;AAAA,EAE5C,MAAML;AAAA,EACN,QAAQG;AAAA;AAAA,EAER,aAAaH;AAAA,EACb,WAAWG;AACf;"}

package/dist/chunks/{link.UOEUR35A.js → link.DZlbzVSB.js}

@@ -1,31 +1,38 @@
-import { defineComponent as f, computed as l } from "vue";
-import { RouterLink as d } from "vue-router";
-import { B as g } from "./typography.J1v_SPG3.js";
+import { defineComponent as g, computed as r } from "vue";
+import { RouterLink as m } from "vue-router";
+import { g as k } from "./generate-uid.NJ8tVoha.js";
+import { B as v } from "./typography.J1v_SPG3.js";
+import { u as y } from "./i18n.BQkEbtPM.js";
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/link.css";
 var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.QUIET = "quiet", a))(s || {});
 let c = 0;
-const m = {
+const b = {
   beforeCreate() {
     this.uuid = c.toString(), c += 1;
   }
 };
-var v = function() {
+var x = function() {
   var t = this, e = t._self._c;
   return e("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#00112C", d: "M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z" } })]);
-}, y = [], k = /* @__PURE__ */ p(
-  m,
-  v,
-  y,
+}, h = [], C = /* @__PURE__ */ p(
+  b,
+  x,
+  h,
   !1,
   null,
   null
 );
-const h = k.exports, b = {
+const B = C.exports, T = {
+  "en-US": {
+    opensInNewTab: "Opens in new tab"
+  }
+}, L = {
   name: "bento-link",
-  inheritAttrs: !1
-}, x = /* @__PURE__ */ f({
-  ...b,
+  inheritAttrs: !1,
+  i18n: { messages: T }
+}, $ = /* @__PURE__ */ g({
+  ...L,
   props: {
     to: null,
     replace: { type: Boolean },
@@ -48,33 +55,33 @@ const h = k.exports, b = {
   },
   emits: ["click"],
   setup(a, { emit: t }) {
-    const e = a, n = (o) => o, r = l(() => ({
+    const e = a, { t: n } = y(), l = k("external-link"), u = (o) => o, _ = r(() => ({
       "b-link": !e.isButton,
       [`b-link--${s.QUIET}`]: e.variant === s.QUIET,
       "b-link--truncate": e.truncate
-    })), u = l(() => e.external ? e.target ?? "_blank" : e.target), _ = l(() => !(e.isButton || e.isNotRouting));
-    return { __sfc: !0, props: e, getAttributeTitle: n, conditionalClasses: r, computedTarget: u, showExternalLinkIcon: _, emit: t, onClick: (o, i) => {
+    })), d = r(() => e.external ? e.target ?? "_blank" : e.target), f = r(() => !(e.isButton || e.isNotRouting));
+    return { __sfc: !0, t: n, props: e, externalLinkId: l, getAttributeTitle: u, conditionalClasses: _, computedTarget: d, showExternalLinkIcon: f, emit: t, onClick: (o, i) => {
       t("click", o), i && i();
-    }, RouterLink: d, BentoTypography: g, ExternalLinkIcon: h };
+    }, RouterLink: m, BentoTypography: v, ExternalLinkIcon: B };
   }
 });
-var C = function() {
+var I = function() {
   var t = this, e = t._self._c, n = t._self._setupProxy;
-  return t.external || t.isNotRouting ? e("a", t._b({ class: n.conditionalClasses, attrs: { href: t.$props.to.toString(), title: n.getAttributeTitle(t.$attrs.title), target: n.computedTarget }, on: { click: n.onClick } }, "a", t.$attrs, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2), n.showExternalLinkIcon ? e("span", { staticClass: "b-link__external-link-icon" }, [e(n.ExternalLinkIcon)], 1) : t._e()], 2) : e(n.RouterLink, t._b({ class: n.conditionalClasses, attrs: { target: t.target, to: n.props.to, custom: "" }, nativeOn: { click: function(r) {
+  return t.external || t.isNotRouting ? e("a", t._b({ class: n.conditionalClasses, attrs: { "aria-describedby": n.externalLinkId, href: t.$props.to.toString(), title: n.getAttributeTitle(t.$attrs.title), target: n.computedTarget }, on: { click: n.onClick } }, "a", t.$attrs, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2), n.showExternalLinkIcon ? e("span", { staticClass: "b-link__external-link-icon", attrs: { "aria-hidden": "true" } }, [e(n.ExternalLinkIcon)], 1) : t._e(), t.external ? e("span", { staticClass: "b-link--visually-hidden", attrs: { id: n.externalLinkId } }, [t._v(t._s(n.t("opensInNewTab")))]) : t._e()], 2) : e(n.RouterLink, t._b({ class: n.conditionalClasses, attrs: { target: t.target, to: n.props.to, custom: "" }, nativeOn: { click: function(l) {
     return n.onClick.apply(null, arguments);
   } } }, "router-link", { ...t.$attrs, ...t.$props }, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2)], 2);
-}, B = [], T = /* @__PURE__ */ p(
-  x,
-  C,
-  B,
+}, w = [], E = /* @__PURE__ */ p(
+  $,
+  I,
+  w,
   !1,
   null,
-  "e0617c9b"
+  "355f8490"
 );
-const I = T.exports;
+const Q = E.exports;
 export {
-  I as B,
-  h as E,
+  Q as B,
+  B as E,
   s as a
 };
-//# sourceMappingURL=link.UOEUR35A.js.map
+//# sourceMappingURL=link.DZlbzVSB.js.map

package/dist/chunks/link.DZlbzVSB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.DZlbzVSB.js","sources":["../../../core/src/components/link/link.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/external-link.vue","../../src/components/link/link.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoLinkVariant {\n    DEFAULT = 'default',\n    QUIET = 'quiet',\n}\n\nexport interface LinkProps {\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography component.\n     */\n    disableTypography?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link and renders an external link icon.\n     */\n    external?: boolean;\n\n    /**\n     * Set to true if used inside a `BentoButton` component.\n     */\n    isButton?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    isNotRouting?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    /**\n     * Set to true to truncate link. Doesn't work with disableTypography.\n     */\n    truncate?: boolean;\n\n    /**\n     * Link variant type affecting visual style.\n     * @values default, quiet\n     */\n    variant?: BentoLinkVariant | `${BentoLinkVariant}`;\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <a\n        v-if=\"external || isNotRouting\"\n        :class=\"conditionalClasses\"\n        v-bind=\"$attrs\"\n        :aria-describedby=\"externalLinkId\"\n        :href=\"$props.to.toString()\"\n        :title=\"getAttributeTitle($attrs.title)\"\n        :target=\"computedTarget\"\n        @click=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n        <span v-if=\"showExternalLinkIcon\" aria-hidden=\"true\" class=\"b-link__external-link-icon\">\n            <external-link-icon />\n        </span>\n        <span v-if=\"external\" :id=\"externalLinkId\" class=\"b-link--visually-hidden\">{{ t('opensInNewTab') }}</span>\n    </a>\n    <router-link\n        v-else\n        v-bind=\"{ ...$attrs, ...$props }\"\n        :class=\"conditionalClasses\"\n        :target=\"target\"\n        :to=\"props.to\"\n        custom\n        @click.native=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </router-link>\n</template>\n\n<script setup lang=\"ts\">\n    import { RouterLink } from 'vue-router';\n    import { computed } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLinkVariant } from '@/core/components/link/link.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { RouterLinkSlotArgument } from 'vue-router/types/router.d.ts';\n    import ExternalLinkIcon from '@adyen/ui-assets-icons-16/vue/external-link';\n    import type { BentoLinkProps } from './link.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  to: null,\n  replace: { type: Boolean },\n  append: { type: Boolean },\n  tag: null,\n  activeClass: null,\n  exact: { type: Boolean },\n  exactPath: { type: Boolean },\n  exactPathActiveClass: null,\n  event: null,\n  exactActiveClass: null,\n  ariaCurrentValue: null,\n  disableTypography: { type: Boolean },\n  external: { type: Boolean },\n  isButton: { type: Boolean },\n  isNotRouting: { type: Boolean },\n  target: { default: null },\n  truncate: { type: Boolean },\n  variant: { default: BentoLinkVariant.DEFAULT }\n});\n\n    const externalLinkId = generateUid('external-link');\n\n    const getAttributeTitle = (attributesTitle: unknown) => attributesTitle as string;\n\n    const conditionalClasses = computed(() => ({\n        'b-link': !props.isButton,\n        [`b-link--${BentoLinkVariant.QUIET}`]: props.variant === BentoLinkVariant.QUIET,\n        [`b-link--truncate`]: props.truncate,\n    }));\n\n    const computedTarget = computed(() => (props.external ? (props.target ?? '_blank') : props.target));\n    const showExternalLinkIcon = computed(() => !(props.isButton || props.isNotRouting));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent, navigateCallback?: RouterLinkSlotArgument['navigate']) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Extends the `router-link` from the `vue-router` NPM package.\n     *\n     * @example\n     * import { BentoLink } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLink },\n     *     template: `\n     *       <bento-link to=\"/\">\n     *           link\n     *       </bento-link>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-link',\n        inheritAttrs: false,\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","uuid","_sfc_main$1","__default__","messages","t","useI18n","externalLinkId","generateUid","getAttributeTitle","attributesTitle","conditionalClasses","computed","props","computedTarget","showExternalLinkIcon","e","navigateCallback","emit"],"mappings":";;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACEZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;GCoGIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAAA,EACQ,MAAA,EAAA,UAAAC,EAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;iBAlEA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAuBAC,IAAAC,EAAA,eAAA,GAEAC,IAAA,CAAAC,MAAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,UAAA,CAAAC,EAAA;AAAA,MACtB,CAAA,WAAAd,EAAA,KAAA,EAAA,GAAAc,EAAA,YAAAd,EAAA;AAAA,MACyD,oBAAAc,EAAA;AAAA,IAC9C,EAAA,GAGhCC,IAAAF,EAAA,MAAAC,EAAA,WAAAA,EAAA,UAAA,WAAAA,EAAA,MAAA,GACAE,IAAAH,EAAA,MAAA,EAAAC,EAAA,YAAAA,EAAA,aAAA;sKAIA,CAAAG,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/chunks/{listbox-option-tag.Co0ycEdQ.js → listbox-option-tag.XbvBQqlt.js}

@@ -1,5 +1,5 @@
 import { defineComponent as n, computed as e } from "vue";
-import { B as r } from "./tag.-YNhsBv7.js";
+import { B as r } from "./tag.3fthBtwc.js";
 import { B as s } from "./typography.J1v_SPG3.js";
 import { n as i } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/listbox-option-tag.css";
@@ -41,4 +41,4 @@ const u = m.exports;
 export {
   u as L
 };
-//# sourceMappingURL=listbox-option-tag.Co0ycEdQ.js.map
+//# sourceMappingURL=listbox-option-tag.XbvBQqlt.js.map

package/dist/chunks/{listbox-option-tag.Co0ycEdQ.js.map → listbox-option-tag.XbvBQqlt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-option-tag.Co0ycEdQ.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<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","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"listbox-option-tag.XbvBQqlt.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<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","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/{menu.Dq7RlryT.js → menu.DYopJZ12.js}

@@ -1,6 +1,6 @@
 import { defineComponent as x, computed as C, ref as i, inject as P, onMounted as U, provide as W } from "vue";
 import { g as w } from "./generate-uid.NJ8tVoha.js";
-import { a as O, B as H } from "./popover.nev0GndY.js";
+import { a as O, B as H } from "./popover.C-LwO38X.js";
 import { B as D, D as j } from "./divider.Cc4JFWG_.js";
 import { B as q, u as G } from "./teleport.B5fwsT5y.js";
 import { u as V } from "./use-has-slot.C9lQZ6nz.js";
@@ -9,7 +9,7 @@ import { n as g } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { C as Y, a as R } from "./chevron-left.PIu6yPqe.js";
 import { a as E, B as Z } from "./base-button.-gx_u8Bd.js";
 import { B as z } from "./typography.J1v_SPG3.js";
-import { B as Q } from "./toggle-button.Cf8C7p6e.js";
+import { B as Q } from "./toggle-button.BX_9vB0d.js";
 import "../assets/menu.css";
 const X = x({
   name: "menu-item",
@@ -532,4 +532,4 @@ export {
   xe as O,
   d as a
 };
-//# sourceMappingURL=menu.Dq7RlryT.js.map
+//# sourceMappingURL=menu.DYopJZ12.js.map