@adyen/bento-vue2 1.68.2 → 1.69.0

package/dist/chunks/{input-field.5S-pUNxA.js → input-field.DnnXXill.js}

@@ -1,13 +1,13 @@
 import { defineComponent as oe, useAttrs as ae, useSlots as ne, ref as c, provide as re, inject as k, toRef as ie, computed as n, toRefs as se } from "vue";
-import { a as de, I as le, b as ue, B as pe } from "./dropdown.DazYAy4B.js";
-import { p as T, d as M, B as ce } from "./typography.J1v_SPG3.js";
+import { a as de, I as le, b as ue, B as pe } from "./dropdown.DB_MlO1F.js";
+import { p as T, d as M, B as ce } from "./typography.w3m-EY4E.js";
 import { g as f } from "./generate-uid.NJ8tVoha.js";
 import { g as fe } from "./get-slot-text.BQS5Olxm.js";
 import { u as _e } from "./aria-label.CaUURpnB.js";
 import { u as be } from "./i18n.BQkEbtPM.js";
 import { u as ye } from "./use-form-layout-loading.D3lALhtC.js";
 import { u as he } from "./use-has-slot.C9lQZ6nz.js";
-import { F as we, E as De } from "./error-message.BgxnwPLF.js";
+import { F as we, E as De } from "./error-message.PWgUfpvo.js";
 import { n as me } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-field.css";
 var d = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.PAYMENT_METHOD = "payment-method", o.STATIC_VALUE = "static-value", o.DROPDOWN = "dropdown", o))(d || {}), s = /* @__PURE__ */ ((o) => (o.START = "start", o.END = "end", o))(s || {}), _ = /* @__PURE__ */ ((o) => (o.CONDENSED = "condensed", o.DISABLED = "disabled", o.READONLY = "readonly", o.ERROR = "error", o))(_ || {}), A = /* @__PURE__ */ ((o) => (o.SEARCH = "search", o.TEXT = "text", o.NUMBER = "number", o))(A || {}), ve = /* @__PURE__ */ ((o) => (o.INPUT = "input", o.ESCAPE_PRESSED = "escape-pressed", o.UPDATE_DROPDOWN = "update:dropdown", o.DROPDOWN_INPUT = "dropdown-input", o.FOCUS = "focus", o.CHANGE = "change", o.BLUR = "blur", o.KEYDOWN = "keydown", o))(ve || {});
@@ -143,7 +143,7 @@ var Se = function() {
   Ie,
   !1,
   null,
-  "9f0ffde0"
+  "a002e555"
 );
 const Ve = ge.exports;
 export {
@@ -154,4 +154,4 @@ export {
   A as d,
   ve as e
 };
-//# sourceMappingURL=input-field.5S-pUNxA.js.map
+//# sourceMappingURL=input-field.DnnXXill.js.map

package/dist/chunks/input-field.DnnXXill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.DnnXXill.js","sources":["../../src/components/input-field/input-field.types.ts","../../src/components/input-field/input-field.vue"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/consistent-type-imports\nimport { 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    /**\n     * Text that labels the dropdown element\n     */\n    'aria-label'?: string;\n    /**\n     * Enables dynamic filtering\n     */\n    dynamicFiltering?: DropdownProps['dynamicFiltering'];\n    /**\n     * List of available items\n     */\n    items: DropdownProps['items'];\n    /**\n     * Sets the dropdown in read-only mode\n     */\n    readonly?: DropdownProps['readonly'];\n    /**\n     *  Selected value of the dropdown\n     */\n    value?: DropdownProps['value'];\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\nexport interface BentoInputFieldProps {\n    /**\n     * Indicates whether the element is exposed to an accessibility API.\n     */\n    ariaHidden?: boolean;\n\n    /**\n     * Text that labels an the input element\n     *\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Reduces height of the input\n     */\n    condensed?: boolean;\n\n    /**\n     * Disables the possibility of changing value in the input-field\n     */\n    disabled?: boolean;\n\n    /**\n     * Dropdown props for the small selectable dropdown menu.\n     * Properties supported:\n     *\n     *  - `aria-label`: Text that labels the dropdown element\n     *  - `dynamicFiltering`: Enables dynamic filtering\n     *  - `items`: List of available items\n     *  - `readonly`: Sets the dropdown in read-only mode\n     *  - `value`: Selected value of the dropdown\n     */\n    dropdown?: BentoInputDropdownProps;\n\n    /**\n     * Position of the dropdown before or after input value\n     */\n    dropdownPosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`;\n\n    /**\n     * Adds error validation class for outlining input-field.\n     *\n     * @deprecated Use \"errorMessage\" prop instead\n     */\n    error?: boolean;\n\n    /**\n     * Renders input-field with an error state and the error message beneath the input box\n     */\n    errorMessage?: string;\n\n    /**\n     * Highlights the dropdown is optional.\n     */\n    optional?: boolean;\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: string;\n\n    /**\n     * When present, indicates that the user must specify a value for the input before the owning form can be submitted.\n     * The `required` attribute is supported by input types like `text`, `search`, and `number`.\n     */\n    required?: boolean;\n\n    /**\n     * Setting this property to true will set the input field to read only state.\n     */\n    readonly?: boolean;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n\n    /**\n     * Static text that displayed before or after input value\n     * Applicable to the Static Value variant\n     */\n    staticValue?: string;\n\n    /**\n     * Position of Static Value before or after input value\n     */\n    staticValuePosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`;\n\n    /**\n     * Adds a info icon next to the label to display the passed tooltip message.\n     */\n    tooltipText?: string;\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?: BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type'];\n\n    /**\n     * Text displayed as the value of the input-field\n     */\n    value?: BentoInputFieldValue;\n\n    /**\n     * Describes the different variants for the input element\n     */\n    variant?: BentoInputFieldVariant | `${BentoInputFieldVariant}`;\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=\"isDropdownReadOnly\"\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                    :required=\"required\"\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=\"isDropdownReadOnly\"\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, provide, type 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        INPUT_FIELD_PARENT_COMPONENT_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        type BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        type BentoInputFieldProps,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { type 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  ariaHidden: { type: Boolean, default: true },\n  ariaLabel: { default: undefined },\n  condensed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  dropdown: { default: undefined },\n  dropdownPosition: { default: BentoInputFieldElementPosition.START },\n  error: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  required: { type: Boolean, default: false },\n  readonly: { type: Boolean, default: false },\n  slashedZero: { type: Boolean, default: false },\n  staticValue: { default: '' },\n  staticValuePosition: { default: BentoInputFieldElementPosition.START },\n  tooltipText: { default: null },\n  type: { default: BentoInputFieldType.TEXT },\n  value: { default: undefined },\n  variant: { default: BentoInputFieldVariant.DEFAULT }\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    const isDropdownReadOnly = computed<BentoInputDropdownProps['readonly']>(\n        () => isReadOnly.value || props.dropdown?.readonly\n    );\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    const inputFieldParentComponent = inject(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, '');\n\n    if (!Object.values(BentoInputFieldType).includes(props.type as BentoInputFieldType) && !inputFieldParentComponent) {\n        if (props.type === 'tel') {\n            printDevelopmentWarning(\n                `\"bento-input-field\" dropdown does not support the type '${props.type}', use \"bento-input-field-phone-number\" instead.`\n            );\n        } else if (props.type === 'password') {\n            printDevelopmentWarning(\n                `\"bento-input-field\" dropdown does not support the type '${props.type}', use \"bento-input-field-password\" instead.`\n            );\n        } else {\n            printDevelopmentWarning(`\"bento-input-field\" dropdown does not support the type '${props.type}'`);\n        }\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","isDropdownReadOnly","computed","_a","shouldShowStaticValue","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","inputFieldParentComponent","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","printDevelopmentWarning","deprecate"],"mappings":";;;;;;;;;;;;AAMY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,iBAAA,kBACAA,EAAA,eAAA,gBACAA,EAAA,WAAA,YAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,OAAA,QACAA,EAAA,SAAA,UAHQA,IAAAD,KAAA,CAAA,CAAA,GAqCAE,KAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,iBAAA,kBACAA,EAAA,kBAAA,mBACAA,EAAA,iBAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,OAAA,QACAA,EAAA,UAAA,WARQA,IAAAD,MAAA,CAAA,CAAA;;;;;;GCgWRE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtOAC,IAAAC,GAAA,GACAC,IAAAC,GAAA,GA0BA,EAAA,GAAAC,EAAA,IAAAC,GAAA,GACAC,IAAAC,GAAAL,CAAA,GACAM,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAC,EAAA,OAAA,GACAC,IAAAD,EAAA,gBAAA,GACAE,IAAAF,EAAA,oBAAA,GACAG,IAAAH,EAAA,mBAAA,GACAI,IAAAJ,EAAA,aAAA,GACAK,IAAAR,EAAA,EAAA;AAGA,IAAAS,GAAAC,IAAA,EAAA;AAEA,UAAAC,IAAAC,EAAAC,IAAAb,EAAA,MAAA,CAAA,GAEAc,IAAA,MAAA;AACI,MAAAN,EAAA,QAAA,IACAO,EAAA,OAAA;AAAA,IAAY,GAGhBC,IAAA,MAAA;AACI,MAAAR,EAAA,QAAA,IACAO,EAAA,MAAA;AAAA,IAAW,GAGf,EAAA,YAAAE,EAAA,IAAAC,GAAAC,GAAAC,GAAA,UAAA,CAAA,GACAC,IAAAC;AAAA,MAA2B,MAAA;;AAAA,eAAAL,EAAA,WAAAM,IAAAH,EAAA,aAAA,gBAAAG,EAAA;AAAA;AAAA,IACmB,GAG9CC,IAAAF;AAAA,MAA8B,MAAAF,EAAA,YAAAzC,EAAA,gBAAA,CAAA,CAAAc,EAAA;AAAA,IAC6C,GAG3EgC,IAAAH,EAAA,MAAAF,EAAA,YAAAzC,EAAA,OAAA,GAEA+C,IAAAJ,EAAA,MAAAF,EAAA,YAAAzC,EAAA,cAAA,GAEAgD,IAAAL;AAAA,MAAwC,MAAAE,EAAA,SAAAJ,EAAA,wBAAAvC,EAAA;AAAA,IAC8D,GAEtG+C,IAAAN;AAAA,MAAsC,MAAAE,EAAA,SAAAJ,EAAA,wBAAAvC,EAAA;AAAA,IACgE,GAGtGgD,IAAAP,EAAA,MAAAF,EAAA,YAAAzC,EAAA,YAAA,CAAA,CAAAyC,EAAA,QAAA,GACAU,IAAAR;AAAA,MAAqC,MAAAO,EAAA,SAAAT,EAAA,qBAAAvC,EAAA;AAAA,IAC2D,GAEhGkD,IAAAT;AAAA,MAAmC,MAAAO,EAAA,SAAAT,EAAA,qBAAAvC,EAAA;AAAA,IAC6D,GAGhGmD,IAAAV;AAAA,MAAwB,MAAA,CAAAF,EAAA,YAAA,CAAAH,EAAA,UAAA,CAAA,CAAAG,EAAA,gBAAAA,EAAA;AAAA,IACyD,GAGjFa,IAAAX,EAAA,MACIO,EAAA,UAAA,MAAAL,EAAA,UAAA,KACI,GAAAnB,CAAA,IAAAD,CAAA,KAEJyB,EAAA,UAAA,KACI,GAAAzB,CAAA,KAEJoB,EAAA,UAAA,KACI,GAAAnB,CAAA,KAEJ,IAAO,GAKX6B,IAAAZ,EAAA,MAAA3B,EAAA,mBAAA,CAAA,GACAwC,IAAAb;AAAA,MAAyC,MAAA3B,EAAA,6BAAA,EAAA,YAAAyC,EAAA,MAAA,CAAA;AAAA,IACiC,GAG1EC,IAAArC,EAAAT,EAAA,YAAA,CAAA,GACA,EAAA,WAAA+C,EAAA,IAAAC,GAAAnB,CAAA,GACAgB,IAAAI,GAAA;AAAA,MAAuC,WAAAH,EAAA;AAAA;AAAA,MACL,OAAAC;AAAA,MAEvB,iBAAAzC,EAAA,SAAA,IAAA4C,GAAAhD,CAAA,EAAA,SAAA,IAAAyC;AAAA,IAGD,CAAA,GAGVQ,IAAApB;AAAA,MAAgC,MAAA,GAAAzB,EAAA,aAAA,IAAAS,IAAA,EAAA,IAAA0B,EAAA,SAAAZ,EAAA,eAAAb,IAAA,EAAA;AAAA,IAIxB,GAGRoC,IAAArB,EAAA,OAAA;AAAA,MAAqD,CAAA,kBAAAvC,EAAA,SAAA,EAAA,GAAAqC,EAAA;AAAA,MACgB,CAAA,kBAAArC,EAAA,QAAA,EAAA,GAAAqC,EAAA;AAAA,MACD,CAAA,kBAAArC,EAAA,QAAA,EAAA,GAAAkC,EAAA;AAAA,MACK,CAAA,kBAAAlC,EAAA,KAAA,EAAA,GAAAiD,EAAA;AAAA,MACE,+BAAAZ,EAAA;AAAA,IAChC,EAAA,GAG3CwB,IAAAtB,EAAA,OAAA;AAAA,MAAgD,cAAAa,EAAA;AAAA,MACG,GAAAf,EAAA;AAAA,IACtC,EAAA,GAGbyB,IAAA,CAAAC,MAAA;AACI,YAAAC,KAAAD,EAAA,OAAA;AACA,MAAA,CAAA1B,EAAA,YAAA,CAAAH,EAAA,SACIF,EAAA,SAAAgC,EAAA;AAAA,IACJ,GAGJC,KAAA,CAAAC,MAAA;AACI,MAAAlC,EAAA,kBAAAkC,CAAA,GACAlC,EAAA,mBAAA,EAAA,GAAAK,KAAA,gBAAAA,EAAA,UAAA,OAAA6B,EAAA,CAAA;AAAA,IAAoE,GAGxEC,IAAA,MAAA;AACI,MAAAnD,EAAA,MAAA,MAAA;AAAA,IAA8B,GAGlCoD,IAAA,MAAA;AACI,MAAA/B,EAAA,YAAA,aACInB,EAAA,MAAA,MAAA,IAEAiD,EAAA;AAAA,IACJ;AAIJ,IAAAE,EAAA;AAAA,MAAa,YAAAF;AAAA,MACT,OAAAC;AAAA,IACA,CAAA;AAGJ,UAAAE,IAAAzC,EAAA0C,IAAA,EAAA;AAEA,WAAA,CAAA,OAAA,OAAArE,CAAA,EAAA,SAAAmC,EAAA,IAAA,KAAA,CAAAiC,MACIjC,EAAA,SAAA,QACImC;AAAA,MAAA,2DAAAnC,EAAA,IAAA;AAAA,IACyE,IACzEA,EAAA,SAAA,aAEAmC;AAAA,MAAA,2DAAAnC,EAAA,IAAA;AAAA,IACyE,IAGzEmC,EAAA,2DAAAnC,EAAA,IAAA,GAAA,IAORA,EAAA,SACIoC;AAAA,MAAA;AAAA,MACI;AAAA;AAAA;AAAA,MACA;AAAA,IAGA,GAIR3D,EAAA,mBAAA,KACI2D;AAAA,MAAA;AAAA,MACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MACA;AAAA,IAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{inspector.BI28vKQz.js → inspector.H05UI3LY.js}

@@ -1,8 +1,8 @@
 import { ref as l, watch as h, defineComponent as L, computed as v, nextTick as S } from "vue";
-import { d as x, B as k } from "./typography.J1v_SPG3.js";
-import { B as A } from "./button.hF-nD1Og.js";
-import { B as M } from "./loading-indicator.z8COalOc.js";
-import { B as I, s as O, g as H, a as w, f as D } from "./focus-trap.C-wIQqpO.js";
+import { d as x, B as k } from "./typography.w3m-EY4E.js";
+import { B as A } from "./button.B0hSQWOR.js";
+import { B as M } from "./loading-indicator.Iy1CVr_T.js";
+import { B as I, s as O, g as H, a as w, f as D } from "./focus-trap.B4C5TXxl.js";
 import { E as P } from "./expand.Bbielaja.js";
 import { C as R } from "./cross.CC_B-vG-.js";
 import { g as z } from "./generate-uid.NJ8tVoha.js";
@@ -108,10 +108,10 @@ var j = function() {
   q,
   !1,
   null,
-  "d530a2b2"
+  "62a28c4d"
 );
 const ct = J.exports;
 export {
   ct as B
 };
-//# sourceMappingURL=inspector.BI28vKQz.js.map
+//# sourceMappingURL=inspector.H05UI3LY.js.map

package/dist/chunks/inspector.H05UI3LY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.H05UI3LY.js","sources":["../../src/components/inspector/composables/use-focus-history/use-focus-history.ts","../../src/components/inspector/inspector.vue"],"sourcesContent":["import { ref, type Ref } from 'vue';\nimport { useActiveElement } from '@vueuse/core';\nimport { watch } from 'vue';\n\n/**\n * A composable to track the focus history within a target element.\n * @param targetEl The stable parent element to monitor for focus changes.\n */\nexport function useFocusHistory(targetEl: Ref<HTMLElement | null>) {\n    const MAX_HISTORY_LENGTH = 3;\n\n    const focusHistory = ref<Element[]>([]);\n\n    const currentActiveElement = useActiveElement();\n\n    // Edge case 1:\n    // While the inspector is opened, if user tabs through the data-grid to the inspector, and closes it,\n    // it returns to the last element on the data grid regardless if it is a data-grid-cell.\n    //\n    // Edge case 2:\n    // Buttons or actions teleported out of the data-grid may have the focus shifted into a different context.\n    watch(currentActiveElement, newlyFocusedElement => {\n        // Check if the newly focused element is a child of our target container.\n        if (!targetEl.value || !newlyFocusedElement || !targetEl.value.contains(newlyFocusedElement)) {\n            return;\n        }\n\n        // Add the focused element to the history\n        focusHistory.value.unshift(newlyFocusedElement);\n\n        if (focusHistory.value.length > MAX_HISTORY_LENGTH) {\n            focusHistory.value.pop();\n        }\n    });\n\n    /**\n     * Iterates through the focus history to find the first valid element\n     * that is still present in the DOM.\n     * @returns The first valid historical element, or null if none are found.\n     */\n    const findValidFocusFallback = (): HTMLElement | null => {\n        for (const el of focusHistory.value) {\n            if (el && document.body.contains(el as Node)) {\n                return el as HTMLElement;\n            }\n        }\n\n        return null; // No valid fallback found\n    };\n\n    return {\n        findValidFocusFallback,\n    };\n}\n","<template>\n    <div ref=\"wrapper\" class=\"b-inspector\" :class=\"conditionalClass\" @keydown=\"handleSectionFocus\">\n        <div ref=\"page\" 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\n                v-if=\"isOpen\"\n                ref=\"inspector\"\n                class=\"b-inspector__container-wrapper\"\n                :aria-label=\"inspectorAriaLabel\"\n                @keydown.tab=\"handleTabNavigation\"\n            >\n                <bento-focus-trap :disabled=\"!isCompact\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isCompact\">\n                                <bento-button\n                                    class=\"b-inspector__return-content\"\n                                    variant=\"secondary\"\n                                    condensed\n                                    :aria-describedby=\"returnToMainContentDescriptionId\"\n                                    @click=\"moveFocusBetweenSections\"\n                                >\n                                    {{ t('returnToMainContent') }}\n                                </bento-button>\n                                <span\n                                    :id=\"returnToMainContentDescriptionId\"\n                                    class=\"b-inspector__return-content-description\"\n                                    >{{ t('returnToMainContentDescription') }}</span\n                                >\n                            </template>\n                            <bento-typography 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                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { getNextFocusableElement } from '@/utils/ts/focus-trap.utils';\n    import { useElementSize } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { type BentoInspectorProps } from './inspector.types';\n    import { useFocusHistory } from './composables/use-focus-history/use-focus-history';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  activePage: { default: '' },\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  relativeLayout: { default: 'push-content' },\n  pageFocusAnchor: { default: null }\n});\n\n    const emit = defineEmits([\"update:is-open\", \"update:active-page\", \"expand\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription');\n    const wrapper = ref<HTMLElement>(null);\n    const inspector = ref<HTMLElement>(null);\n    const page = ref<HTMLElement>(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n\n    const isCompact = computed(() => {\n        const COMPACT_THRESHOLD_SMALL = 740;\n        const COMPACT_THRESHOLD_LARGE = 915;\n\n        // small inspector to occupy full screen if < 740px\n        // large inspector to occupy full screen if < 915px\n        const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE;\n\n        return wrapperWidth.value > 0 && wrapperWidth.value < threshold;\n    });\n\n    const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--${props.relativeLayout}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const { findValidFocusFallback } = useFocusHistory(page);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            await nextTick();\n            moveFocusInside(inspector.value, computedPageLastFocusedElement.value);\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            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isCompact.value) {\n            return;\n        }\n        const direction = event.shiftKey ? -1 : 1;\n        const focusableEl = getNextFocusableElement(direction, inspector.value);\n        // If the nextfocusableEl is the same as the activeElement that means it's the last focusable element\n        // inside the inspector, so the focus is moved back to the last focused element on the page\n        if (getActiveElement() === focusableEl) {\n            event.preventDefault();\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        }\n    };\n\n    const handleSectionFocus = event => {\n        const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S';\n        if (props.isOpen && !isCompact.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            focusElement(inspectorLastFocusedElement.value);\n        }\n    };\n\n    const focusElement = (element: HTMLElement) => {\n        if (!element) {\n            return;\n        }\n        element?.focus();\n        if (document.activeElement !== element) {\n            focusElement(element.parentElement);\n        }\n    };\n\n    watch(\n        () => props.activePage,\n        () => {\n            if (props.activePage) {\n                setFocus();\n            }\n        }\n    );\n\n    if (!props.activePage) {\n        deprecate(\n            'BentoInspector \"active-page\" as optional',\n            `Make sure to set the \"active-page\" prop and keep it in sync with \"update:active-page\".\n            \"active-page\" prop will be required in the next version`,\n            '2.0.0'\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     *                  :active-page=\"activePage\"\n     *                  expandable\n     *                  @update:is-open=\"isOpen = $event\"\n     *                  @update:active-page=\"activePage = $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"],"names":["useFocusHistory","targetEl","focusHistory","ref","currentActiveElement","useActiveElement","watch","newlyFocusedElement","el","__default__","messages","t","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","inspector","page","inspectorLastFocusedElement","wrapperWidth","useElementSize","isCompact","computed","threshold","props","computedPageLastFocusedElement","conditionalClass","inspectorAriaLabel","findValidFocusFallback","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","emit","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","deprecate"],"mappings":";;;;;;;;;;;;AAQO,SAAAA,EAAAC,GAAA;AAGH,QAAAC,IAAAC,EAAA,CAAA,CAAA,GAEAC,IAAAC,EAAA;AAQA,SAAAC,EAAAF,GAAA,CAAAG,MAAA;AAEI,IAAA,CAAAN,EAAA,SAAA,CAAAM,KAAA,CAAAN,EAAA,MAAA,SAAAM,CAAA,MAKAL,EAAA,MAAA,QAAAK,CAAA,GAEAL,EAAA,MAAA,SAAA,KACIA,EAAA,MAAA,IAAA;AAAA,EACJ,CAAA,GAkBJ;AAAA,IAAO,wBAVP,MAAA;AACI,iBAAAM,KAAAN,EAAA;AACI,YAAAM,KAAA,SAAA,KAAA,SAAAA,CAAA;AACI,iBAAAA;AAIR,aAAA;AAAA,IAAO;AAAA,EAIP;AAER;;;;;;;;;;;;;;;;;GC2KIC,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;;;iBApIA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,gCAAA,GACAC,IAAAZ,EAAA,IAAA,GACAa,IAAAb,EAAA,IAAA,GACAc,IAAAd,EAAA,IAAA,GACAe,IAAAf,EAAA,IAAA,GAEA,EAAA,OAAAgB,EAAA,IAAAC,EAAAL,CAAA,GAEAM,IAAAC,EAAA,MAAA;AAMI,YAAAC,IAAAC,EAAA,SAAA,UAAA,MAAA;AAEA,aAAAL,EAAA,QAAA,KAAAA,EAAA,QAAAI;AAAA,IAAsD,CAAA,GAG1DE,IAAAH,EAAA,MAAAE,EAAA,eAAA,GAEAE,IAAAJ,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAE,EAAA,IAAA,EAAA,GAAA;AAAA,MACL,CAAA,gBAAAA,EAAA,cAAA,EAAA,GAAA;AAAA,MACU,2BAAAH,EAAA;AAAA,IACH,EAAA,GAG3CM,IAAAL,EAAA,MAAA,GAAAX,EAAA,WAAA,CAAA,KAAAa,EAAA,KAAA,EAAA,GAEA,EAAA,wBAAAI,EAAA,IAAA5B,EAAAiB,CAAA,GAEAY,IAAA,YAAA;AACI,MAAAL,EAAA,UACI,MAAAM,EAAA,GACAC,EAAAf,EAAA,OAAAS,EAAA,KAAA,KAIAO,EAAAP,EAAA,SAAAG,EAAA,CAAA;AAAA,IACJ,GAGJK,IAAA,CAAAC,MAAA;AACI,UAAAb,EAAA;AACI;AAEJ,YAAAc,IAAAD,EAAA,WAAA,KAAA,GACAE,IAAAC,EAAAF,GAAAnB,EAAA,KAAA;AAGA,MAAAsB,EAAA,MAAAF,MACIF,EAAA,eAAA,GACAhB,EAAA,QAAA,SAAA,eACAc,EAAAP,EAAA,SAAAG,EAAA,CAAA,GAEAW,EAAA,sBAAA,MAAA;AAAA,IACJ,GAGJC,IAAA,CAAAN,MAAA;AACI,YAAAO,IAAAP,EAAA,YAAAA,EAAA,WAAAA,EAAA,QAAA;AACA,MAAAV,EAAA,UAAA,CAAAH,EAAA,SAAAoB,KACIC,EAAA;AAAA,IACJ,GAGJA,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,KAAA,KACIE,EAAA,QAAA,SAAA,eACAc,EAAAP,EAAA,SAAAG,EAAA,CAAA,GAEAW,EAAA,sBAAA,MAAA,KAEAP,EAAAd,EAAA,KAAA;AAAA,IACJ,GAGJc,IAAA,CAAAY,MAAA;AACI,MAAAA,MAGAA,KAAA,QAAAA,EAAA,SACA,SAAA,kBAAAA,KACIZ,EAAAY,EAAA,aAAA;AAAA,IACJ;AAGJ,WAAAtC;AAAA,MAAA,MAAAkB,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,cACIK,EAAA;AAAA,MACJ;AAAA,IACJ,GAGJL,EAAA,cACIqB;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/keyboard-navigation.pB8weElW.js.map

@@ -1 +1 @@
-{"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\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;"}
+{"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 { type 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\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/{layout-row.C_F2wX6d.js → layout-row.BWxn-eQ-.js}

@@ -1,6 +1,6 @@
 import { defineComponent as y, provide as R, toRef as $, computed as s, useSlots as x, inject as E, ref as _, watch as S, nextTick as g, onMounted as z } from "vue";
 import { n as w } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as T } from "./typography.J1v_SPG3.js";
+import { B as T } from "./typography.w3m-EY4E.js";
 import { u as B } from "./use-has-slot.C9lQZ6nz.js";
 import { f as I } from "./index.BdrLbvtJ.js";
 import "../assets/layout-row.css";
@@ -29,7 +29,7 @@ var k = function() {
   F,
   !1,
   null,
-  "6a60a8fd"
+  "79cd6989"
 );
 const Z = M.exports, W = ["3-9", "9-3", "4-8", "8-4", "6-6"], j = {}, N = /* @__PURE__ */ y({
   ...j,
@@ -38,10 +38,10 @@ const Z = M.exports, W = ["3-9", "9-3", "4-8", "8-4", "6-6"], j = {}, N = /* @__
     columnsLayout: { default: "6-6" }
   },
   setup(n) {
-    const o = n, l = x(), t = B(l), a = E(h, _("full-width")), e = _(null), m = _(null), f = _(null), u = s(() => a.value === "full-width"), d = s(() => W.includes(o.columnsLayout)), C = s(() => `b-layout-row--${a.value}`), b = s(() => ({
-      "b-layout-row__column-wrapper": u.value
+    const o = n, l = x(), t = B(l), e = E(h, _("full-width")), a = _(null), m = _(null), f = _(null), c = s(() => e.value === "full-width"), d = s(() => W.includes(o.columnsLayout)), C = s(() => `b-layout-row--${e.value}`), b = s(() => ({
+      "b-layout-row__column-wrapper": c.value
     })), L = s(() => {
-      const c = d.value ? o.columnsLayout.split("-") : [6, 6], r = (i) => u.value ? c[i] : a.value;
+      const u = d.value ? o.columnsLayout.split("-") : [6, 6], r = (i) => c.value ? u[i] : e.value;
       return {
         col1: `b-layout-row__column--${r(0)}`,
         col2: `b-layout-row__column--${r(1)}`
@@ -49,15 +49,15 @@ const Z = M.exports, W = ["3-9", "9-3", "4-8", "8-4", "6-6"], j = {}, N = /* @__
     });
     return S(
       I("(min-width: 768px)"),
-      async (c) => {
+      async (u) => {
         var i, p, v;
         await g();
-        const r = ((i = e.value) == null ? void 0 : i.firstChild) === m.value;
-        c && !r ? (p = e.value) == null || p.prepend(m.value) : !c && (o.columnsLayout === "3-9" || o.columnsLayout === "4-8") && ((v = e.value) == null || v.prepend(f.value));
+        const r = ((i = a.value) == null ? void 0 : i.firstChild) === m.value;
+        u && !r ? (p = a.value) == null || p.prepend(m.value) : !u && (o.columnsLayout === "3-9" || o.columnsLayout === "4-8") && ((v = a.value) == null || v.prepend(f.value));
       },
       { immediate: !0 }
     ), z(() => {
-      if (!u.value && (t("col-1") || t("col-2")))
+      if (!c.value && (t("col-1") || t("col-2")))
         throw new Error(
           "Column slots can only be used with the `full-width` size. Please check documentation for more info."
         );
@@ -65,7 +65,7 @@ const Z = M.exports, W = ["3-9", "9-3", "4-8", "8-4", "6-6"], j = {}, N = /* @__
         throw new Error(
           `${o.columnsLayout} is not a valid column layout. Please refer to the documentation for the list of available column layouts.`
         );
-    }), { __sfc: !0, props: o, slots: l, hasSlot: t, size: a, row: e, col1: m, col2: f, isFullWidth: u, isValidColumnLayout: d, conditionalRowClass: C, conditionalRowWithColumnsClass: b, conditionalColumnClass: L, BentoTypography: T };
+    }), { __sfc: !0, props: o, slots: l, hasSlot: t, size: e, row: a, col1: m, col2: f, isFullWidth: c, isValidColumnLayout: d, conditionalRowClass: C, conditionalRowWithColumnsClass: b, conditionalColumnClass: L, BentoTypography: T };
   }
 });
 var Y = function() {
@@ -77,11 +77,11 @@ var Y = function() {
   A,
   !1,
   null,
-  "3dbcb27f"
+  "ccc81c6f"
 );
 const q = H.exports;
 export {
   q as a,
   Z as l
 };
-//# sourceMappingURL=layout-row.C_F2wX6d.js.map
+//# sourceMappingURL=layout-row.BWxn-eQ-.js.map

package/dist/chunks/layout-row.BWxn-eQ-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-row.BWxn-eQ-.js","sources":["../../src/components/layout/layout.keys.ts","../../src/components/layout/layout.vue","../../src/components/layout/layout.types.ts","../../src/components/layout/components/layout-row/layout-row.vue"],"sourcesContent":["export const LAYOUT_SIZE_INJECTION_KEY = Symbol('Layout size inject key');\n","<template>\n    <component :is=\"wrapperElement\" class=\"b-layout\" :class=\"conditionalClasses\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef } from 'vue';\n    import { type BentoLayoutProps } from './layout.types';\n    import { LAYOUT_SIZE_INJECTION_KEY } from '@/components/layout/layout.keys';\n\n    const props = defineProps({\n  variant: { default: 'page' },\n  size: { default: 'full-width' }\n});\n\n    provide(LAYOUT_SIZE_INJECTION_KEY, toRef(props, 'size'));\n\n    const conditionalClasses = computed(() => ({\n        'b-layout--component': props.variant === 'component',\n    }));\n\n    const wrapperElement = props.variant === 'page' ? 'main' : 'div';\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Layout is a basic scaffolding of a page that defines spacing, some functionality and responsive behaviour of its top level sections.\n     *\n     * @example\n     * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLayout, BentoLayoutRow },\n     *     template: `\n     *          <bento-layout size=\"narrow\">\n     *              <bento-layout-row>\n     *                  Row 1\n     *              </bento-layout-row>\n     *              <bento-layout-row>\n     *                  Row 2\n     *              </bento-layout-row>\n     *          </bento-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./layout.scss\" />\n","/**\n * @private\n */\nexport const BentoLayoutVariantOptions = ['page', 'component'] as const;\nexport const BentoLayoutSizeOptions = ['full-width', 'narrow', 'half-width'] as const;\nexport const BentoLayoutRowColumnLayoutOptions = ['3-9', '9-3', '4-8', '8-4', '6-6'] as const;\n\n// Public\nexport type BentoLayoutVariant = (typeof BentoLayoutVariantOptions)[number];\nexport type BentoLayoutSize = (typeof BentoLayoutSizeOptions)[number];\nexport type BentoLayoutRowColumnLayout = (typeof BentoLayoutRowColumnLayoutOptions)[number];\n\nexport interface BentoLayoutProps {\n    /** Defines if the layout is used in a page or only a section */\n    variant?: BentoLayoutVariant;\n    /** Defines the size of the page */\n    size?: BentoLayoutSize;\n}\n\nexport interface BentoLayoutRowProps {\n    /** Sets the layout of the columns when multiple columns are used */\n    columnsLayout?: BentoLayoutRowColumnLayout;\n}\n","<template>\n    <bento-typography el=\"div\" class=\"b-layout-row\" :class=\"conditionalRowClass\">\n        <div v-if=\"hasSlot('default')\">\n            <slot />\n        </div>\n        <div v-else-if=\"hasSlot('col-1') && hasSlot('col-2')\" ref=\"row\" :class=\"conditionalRowWithColumnsClass\">\n            <div ref=\"col1\" :class=\"conditionalColumnClass.col1\">\n                <slot name=\"col-1\"></slot>\n            </div>\n            <div ref=\"col2\" :class=\"conditionalColumnClass.col2\">\n                <slot name=\"col-2\"></slot>\n            </div>\n        </div>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onMounted, ref, type Ref, useSlots, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import {\n        BentoLayoutRowColumnLayoutOptions,\n        type BentoLayoutRowProps,\n        type BentoLayoutSize,\n    } from '../../layout.types';\n    import { useMediaQuery } from '@vueuse/core';\n\n    import { LAYOUT_SIZE_INJECTION_KEY } from '@/components/layout/layout.keys';\n\n    const props = defineProps({\n  columnsLayout: { default: '6-6' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const size = inject<Ref<BentoLayoutSize>>(LAYOUT_SIZE_INJECTION_KEY, ref('full-width'));\n\n    const row = ref<HTMLElement>(null);\n    const col1 = ref<HTMLElement>(null);\n    const col2 = ref<HTMLElement>(null);\n\n    const isFullWidth = computed(() => size.value === 'full-width');\n    const isValidColumnLayout = computed(() => BentoLayoutRowColumnLayoutOptions.includes(props.columnsLayout));\n\n    const conditionalRowClass = computed(() => `b-layout-row--${size.value}`);\n\n    const conditionalRowWithColumnsClass = computed(() => ({\n        'b-layout-row__column-wrapper': isFullWidth.value,\n    }));\n\n    const conditionalColumnClass = computed(() => {\n        const columns = isValidColumnLayout.value ? props.columnsLayout.split('-') : [6, 6];\n        const getColumnModifier = index => (isFullWidth.value ? columns[index] : size.value);\n\n        return {\n            col1: `b-layout-row__column--${getColumnModifier(0)}`,\n            col2: `b-layout-row__column--${getColumnModifier(1)}`,\n        };\n    });\n\n    watch(\n        useMediaQuery('(min-width: 768px)'),\n        async isLargeScreen => {\n            await nextTick();\n            const areColumnsInTheRightOrder = row.value?.firstChild === col1.value;\n            if (isLargeScreen && !areColumnsInTheRightOrder) {\n                row.value?.prepend(col1.value);\n            } else if (!isLargeScreen && (props.columnsLayout === '3-9' || props.columnsLayout === '4-8')) {\n                row.value?.prepend(col2.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        if (!isFullWidth.value && (hasSlot('col-1') || hasSlot('col-2'))) {\n            throw new Error(\n                'Column slots can only be used with the `full-width` size. Please check documentation for more info.'\n            );\n        }\n\n        if (!isValidColumnLayout.value) {\n            throw new Error(\n                `${props.columnsLayout} is not a valid column layout. Please refer to the documentation for the list of available column layouts.`\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Page row is subcomponent of Layout meant to be used to generate the row layout.\n     *\n     * @example\n     * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLayout, BentoLayoutRow },\n     *     template: `\n     *          <bento-layout>\n     *              <bento-layout-row columns-layout=\"3-9\">\n     *                  <template #col-1>Narrow 3-9</template>\n     *                  <template #col-2>Wide 3-9</template>\n     *              </bento-layout-row>\n     *              <bento-layout-row>\n     *                  <template #col-1>6-6</template>\n     *                  <template #col-2>6-6</template>\n     *              </bento-layout-row>\n     *          </bento-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./layout-row.scss\" />\n"],"names":["LAYOUT_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","conditionalClasses","computed","wrapperElement","BentoLayoutRowColumnLayoutOptions","__default__","slots","useSlots","hasSlot","useHasSlot","size","inject","ref","row","col1","col2","isFullWidth","isValidColumnLayout","conditionalRowClass","conditionalRowWithColumnsClass","conditionalColumnClass","columns","getColumnModifier","index","watch","useMediaQuery","isLargeScreen","nextTick","areColumnsInTheRightOrder","_a","_b","_c","onMounted"],"mappings":";;;;;;AAAa,MAAAA,IAAA,OAAA,wBAAA,GC8CTC,IAAA,CAAA;;;;;;;;;AA9BA,IAAAC,EAAAF,GAAAG,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,uBAAAF,EAAA,YAAA;AAAA,IACE,EAAA,GAG7CG,IAAAH,EAAA,YAAA,SAAA,SAAA;;;;;;;;;;;;;;;qBCjBGI,IAAA,CAAA,OAAA,OAAA,OAAA,OAAA,KAAA,GC2GHC,IAAA,CAAA;;;;;;;iBA/EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAAf,GAAAgB,EAAA,YAAA,CAAA,GAEAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GAEAI,IAAAd,EAAA,MAAAQ,EAAA,UAAA,YAAA,GACAO,IAAAf,EAAA,MAAAE,EAAA,SAAAJ,EAAA,aAAA,CAAA,GAEAkB,IAAAhB,EAAA,MAAA,iBAAAQ,EAAA,KAAA,EAAA,GAEAS,IAAAjB,EAAA,OAAA;AAAA,MAAuD,gCAAAc,EAAA;AAAA,IACP,EAAA,GAGhDI,IAAAlB,EAAA,MAAA;AACI,YAAAmB,IAAAJ,EAAA,QAAAjB,EAAA,cAAA,MAAA,GAAA,IAAA,CAAA,GAAA,CAAA,GACAsB,IAAA,CAAAC,MAAAP,EAAA,QAAAK,EAAAE,CAAA,IAAAb,EAAA;AAEA,aAAA;AAAA,QAAO,MAAA,yBAAAY,EAAA,CAAA,CAAA;AAAA,QACgD,MAAA,yBAAAA,EAAA,CAAA,CAAA;AAAA,MACA;AAAA,IACvD,CAAA;AAGJ,WAAAE;AAAA,MAAAC,EAAA,oBAAA;AAAA,MACsC,OAAAC,MAAA;;AAE9B,cAAAC,EAAA;AACA,cAAAC,MAAAC,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,gBAAAf,EAAA;AACA,QAAAY,KAAA,CAAAE,KACIE,IAAAjB,EAAA,UAAA,QAAAiB,EAAA,QAAAhB,EAAA,SAA6B,CAAAY,MAAA1B,EAAA,kBAAA,SAAAA,EAAA,kBAAA,YAE7B+B,IAAAlB,EAAA,UAAA,QAAAkB,EAAA,QAAAhB,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBiB,EAAA,MAAA;AACI,UAAA,CAAAhB,EAAA,UAAAR,EAAA,OAAA,KAAAA,EAAA,OAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAIR,UAAA,CAAAS,EAAA;AACI,cAAA,IAAA;AAAA,UAAU,GAAAjB,EAAA,aAAA;AAAA,QACgB;AAAA,IAE9B,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{link.CXy_LoFI.js → link.B3F22FTY.js}

@@ -1,7 +1,7 @@
 import { defineComponent as v, computed as r } from "vue";
 import { RouterLink as m } from "vue-router";
 import { g as y } from "./generate-uid.NJ8tVoha.js";
-import { B as k } from "./typography.J1v_SPG3.js";
+import { B as k } from "./typography.w3m-EY4E.js";
 import { u as b } from "./i18n.BQkEbtPM.js";
 /* empty css              */
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -84,7 +84,7 @@ var w = function() {
   E,
   !1,
   null,
-  "6817077a"
+  "7930653c"
 );
 const V = R.exports;
 export {
@@ -92,4 +92,4 @@ export {
   T as E,
   s as a
 };
-//# sourceMappingURL=link.CXy_LoFI.js.map
+//# sourceMappingURL=link.B3F22FTY.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.B3F22FTY.js","sources":["../../src/components/link/link.types.ts","../../../ui-assets/icons-16/dist/vue/external-link.vue","../../src/components/link/link.vue"],"sourcesContent":["import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n\n/**\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 type BentoLinkProps = RouterLinkProps & {\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=\"#001222\" 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    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\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, ...nonForwardedProps }\"\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 { type BentoLinkProps, BentoLinkVariant } from './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 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    // Props that should not be forwarded to the underlying anchor element\n    const nonForwardedProps = {\n        variant: undefined,\n        isButton: undefined,\n        truncate: undefined,\n        disableTypography: undefined,\n        external: undefined,\n        isNotRouting: undefined,\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","nonForwardedProps","externalLinkId","generateUid","getAttributeTitle","attributesTitle","conditionalClasses","computed","props","computedTarget","showExternalLinkIcon","e","navigateCallback","emit"],"mappings":";;;;;;;;AAKY,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;;;;;;;;;;;;;;;;GC2GIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAAA,EACQ,MAAA,EAAA,UAAAC,EAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;iBA5EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAwBAC,IAAA;AAAA,MAA0B,SAAA;AAAA,MACb,UAAA;AAAA,MACC,UAAA;AAAA,MACA,mBAAA;AAAA,MACS,UAAA;AAAA,MACT,cAAA;AAAA,IACI,GAGlBC,IAAAC,EAAA,eAAA,GAEAC,IAAA,CAAAC,MAAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,UAAA,CAAAC,EAAA;AAAA,MACtB,CAAA,WAAAf,EAAA,KAAA,EAAA,GAAAe,EAAA,YAAAf,EAAA;AAAA,MACyD,oBAAAe,EAAA;AAAA,IAC9C,EAAA,GAGhCC,IAAAF,EAAA,MAAAC,EAAA,WAAAA,EAAA,UAAA,WAAAA,EAAA,MAAA,GACAE,IAAAH,EAAA,MAAA,EAAAC,EAAA,YAAAA,EAAA,aAAA;4LAIA,CAAAG,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{listbox-option-tag.D0Cql_R3.js → listbox-option-tag.On3eD2RE.js}

@@ -1,6 +1,6 @@
 import { defineComponent as n, computed as e } from "vue";
-import { B as s } from "./tag.CGkclKVL.js";
-import { B as r } from "./typography.J1v_SPG3.js";
+import { B as s } from "./tag.DfHE26ZN.js";
+import { B as r } from "./typography.w3m-EY4E.js";
 import { n as i } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/listbox-option-tag.css";
 const p = n({
@@ -35,10 +35,10 @@ var l = function() {
   _,
   !1,
   null,
-  "3998d23f"
+  "51846710"
 );
 const v = m.exports;
 export {
   v as L
 };
-//# sourceMappingURL=listbox-option-tag.D0Cql_R3.js.map
+//# sourceMappingURL=listbox-option-tag.On3eD2RE.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-option-tag.On3eD2RE.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=\"!!option.label\">\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, type PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, type 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/{loading-indicator.z8COalOc.js → loading-indicator.Iy1CVr_T.js}

@@ -38,11 +38,11 @@ var c = function() {
   m,
   !1,
   null,
-  "496bc682"
+  "1176674c"
 );
 const p = f.exports;
 export {
   p as B,
   e as a
 };
-//# sourceMappingURL=loading-indicator.z8COalOc.js.map
+//# sourceMappingURL=loading-indicator.Iy1CVr_T.js.map

package/dist/chunks/loading-indicator.Iy1CVr_T.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator.Iy1CVr_T.js","sources":["../../src/components/loading-indicator/loading-indicator.types.ts","../../src/components/loading-indicator/loading-indicator.vue"],"sourcesContent":["export enum BentoLoadingIndicatorEvent {\n    START = 'loading-start',\n    END = 'loading-end',\n}\n","<template>\n    <div class=\"b-loading-indicator\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"loading-indicator\" />\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, onUnmounted } from 'vue';\n    import { BentoLoadingIndicatorEvent } from './loading-indicator.types';\n\n    export default defineComponent({\n        name: 'bento-loading-indicator',\n        props: {\n            /**\n             * Displays the loading indicator in a small size\n             */\n            small: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a large size\n             */\n            large: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a white variant\n             */\n            inverse: { type: Boolean, default: false },\n        },\n        emits: [BentoLoadingIndicatorEvent.START, BentoLoadingIndicatorEvent.END],\n        setup(props, { emit }) {\n            onMounted(() => emit(BentoLoadingIndicatorEvent.START));\n\n            onUnmounted(() => emit(BentoLoadingIndicatorEvent.END));\n\n            const conditionalClasses = computed(() => ({\n                'b-loading-indicator--inverse': props.inverse,\n                'b-loading-indicator--small': props.small,\n                'b-loading-indicator--large': props.large,\n            }));\n\n            return {\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/loading-indicator/loading-indicator.scss\" />\n"],"names":["BentoLoadingIndicatorEvent","BentoLoadingIndicatorEvent2","_sfc_main","defineComponent","props","emit","onMounted","onUnmounted","computed"],"mappings":";;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,iBACAA,EAAA,MAAA,eAFQA,IAAAD,KAAA,CAAA,CAAA;ACQZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA,EAIA;AAAA,EACA,OAAA,CAAAH,EAAA,OAAAA,EAAA,GAAA;AAAA,EACA,MAAAI,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,WAAAC,EAAA,MAAAD,EAAAL,EAAA,KAAA,CAAA,GAEAO,EAAA,MAAAF,EAAAL,EAAA,GAAA,CAAA,GAQA;AAAA,MAAA,oBANAQ,EAAA,OAAA;AAAA,QAAA,gCAAAJ,EAAA;AAAA,QACA,8BAAAA,EAAA;AAAA,QACA,8BAAAA,EAAA;AAAA,MACA,EAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/minus-small.DJacLGTw.js.map

@@ -1 +1 @@
-{"version":3,"file":"minus-small.DJacLGTw.js","sources":["../../../core/src/components/internal/checkbox-input/checkbox-input.types.ts","../../../ui-assets/icons-16/dist/vue/minus-small.vue"],"sourcesContent":["export type MultiCheckboxInputType = Array<string | number>;\nexport type CheckboxInputType = boolean | MultiCheckboxInputType;\n\nexport enum CheckboxInputState {\n    UNCHECKED = 'unchecked',\n    CHECKED = 'checked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n    INDETERMINATE = 'indeterminate',\n}\n\nexport enum CheckboxInputEvent {\n    UPDATE = 'update:model-value',\n}\n\ninterface CheckboxInputGroupItem {\n    value: string | number;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>;\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=\"#001222\" d=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["CheckboxInputState","CheckboxInputEvent","uuid","_sfc_main"],"mappings":";;AAGY,IAAAA,sBAAAA,OACRA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,gBAAgB,iBANRA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACRA,EAAA,SAAS,sBADDA,IAAAA,KAAA,CAAA,CAAA;ACLZ,IAAAC,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}
+{"version":3,"file":"minus-small.DJacLGTw.js","sources":["../../src/components/internal/checkbox-input/checkbox-input.types.ts","../../../ui-assets/icons-16/dist/vue/minus-small.vue"],"sourcesContent":["export type MultiCheckboxInputType = Array<string | number>;\nexport type CheckboxInputType = boolean | MultiCheckboxInputType;\n\nexport enum CheckboxInputState {\n    UNCHECKED = 'unchecked',\n    CHECKED = 'checked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n    INDETERMINATE = 'indeterminate',\n}\n\nexport enum CheckboxInputEvent {\n    UPDATE = 'update:model-value',\n}\n\ninterface CheckboxInputGroupItem {\n    value: string | number;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>;\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=\"#001222\" d=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["CheckboxInputState","CheckboxInputEvent","uuid","_sfc_main"],"mappings":";;AAGY,IAAAA,sBAAAA,OACRA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,gBAAgB,iBANRA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACRA,EAAA,SAAS,sBADDA,IAAAA,KAAA,CAAA,CAAA;ACLZ,IAAAC,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/chunks/{modal-fullscreen.DHotw1RI.js → modal-fullscreen.BgmKDCl4.js}

@@ -1,18 +1,17 @@
-import { defineComponent as B, useSlots as P, onMounted as M, useListeners as N, toRefs as k, ref as r, computed as T, watch as D, nextTick as w, provide as _ } from "vue";
+import { defineComponent as P, useSlots as E, onMounted as k, useListeners as B, toRefs as M, ref as r, computed as T, watch as w, nextTick as D, provide as _ } from "vue";
 import "./index.Cl4_42j5.js";
-import { B as R } from "./button.hF-nD1Og.js";
-import { B as G } from "./focus-trap.C-wIQqpO.js";
-import { B as J } from "./typography.J1v_SPG3.js";
-import { u as E } from "./use-has-slot.C9lQZ6nz.js";
-import { D as K, B as U, b as Y, a as $ } from "./dialog-page.CLHZqQeU.js";
-import { B as j } from "./button-actions.Ju27CRNG.js";
-import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as z } from "./cross.CC_B-vG-.js";
-import { u as H } from "./i18n.BQkEbtPM.js";
-import { g as V } from "./generate-uid.NJ8tVoha.js";
-import { M as q } from "./modal-fullscreen.keys.CMba3hYp.js";
+import { B as R } from "./button.B0hSQWOR.js";
+import { B as G } from "./focus-trap.B4C5TXxl.js";
+import { B as J } from "./typography.w3m-EY4E.js";
+import { u as I } from "./use-has-slot.C9lQZ6nz.js";
+import { D as K, B as U, b as Y, a as $ } from "./dialog-page.CdJloGXQ.js";
+import { B as j, i as z } from "./toggle-button.DeECoGRn.js";
+import { n as S } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { C as H } from "./cross.CC_B-vG-.js";
+import { u as V } from "./i18n.BQkEbtPM.js";
+import { g as q } from "./generate-uid.NJ8tVoha.js";
 import "../assets/modal-fullscreen.css";
-const Q = {}, W = /* @__PURE__ */ B({
+const Q = {}, W = /* @__PURE__ */ P({
   ...Q,
   __name: "modal-fullscreen-page",
   props: {
@@ -62,8 +61,8 @@ const Q = {}, W = /* @__PURE__ */ B({
     }
   },
   setup(u) {
-    const e = u, a = P(), t = E(a);
-    return M(() => {
+    const e = u, a = E(), t = I(a);
+    return k(() => {
       if (e.actions && e.actions.length > 2)
         throw new Error("Not more than 2 action buttons may be provided in Bento Modal Fullscreen");
     }), { __sfc: !0, props: e, slots: a, hasSlot: t, BentoButtonActions: j, BentoTypography: J, DialogPage: K };
@@ -76,17 +75,17 @@ var X = function() {
   }, proxy: !0 }, { key: "content", fn: function() {
     return [a("div", { staticClass: "b-modal-fullscreen-page__content" }, [e._t("default")], 2)];
   }, proxy: !0 }], null, !0) });
-}, Z = [], ee = /* @__PURE__ */ I(
+}, Z = [], ee = /* @__PURE__ */ S(
   W,
   X,
   Z,
   !1,
   null,
-  "30654f2c"
+  "f90522fe"
 );
 const te = ee.exports;
 function ae() {
-  return N();
+  return !window || !B ? {} : B();
 }
 const se = {
   "en-US": {
@@ -100,7 +99,7 @@ const se = {
   }
 }, le = {
   i18n: { messages: se }
-}, oe = /* @__PURE__ */ B({
+}, oe = /* @__PURE__ */ P({
   ...le,
   __name: "modal-fullscreen",
   props: {
@@ -150,12 +149,12 @@ const se = {
   },
   emits: ["before-close", "update:active-page", "update:is-open"],
   setup(u, { emit: e }) {
-    const a = u, { activePage: t, isOpen: s } = k(a), { t: S } = H(), n = r(null), i = r(!1), f = V("modal-fullscreen"), p = r(!1), m = ae(), g = P(), x = E(g), A = T(() => ({
+    const a = u, { activePage: t, isOpen: s } = M(a), { t: x } = V(), n = r(null), i = r(!1), f = q("modal-fullscreen"), p = r(!1), m = ae(), g = E(), A = I(g), L = T(() => ({
       "b-modal-fullscreen--hide": i.value
-    })), L = () => {
+    })), O = () => {
       i.value && (n.value.close(), o.value[0] && e("update:active-page", o.value[0]), o.value = [], i.value = !1, p.value = !1, e("update:is-open", !1));
     };
-    function O() {
+    function F() {
       if (m["before-close"]) {
         e("before-close");
         return;
@@ -165,13 +164,13 @@ const se = {
     const d = () => {
       n.value.open && (i.value = !0);
     };
-    D(
+    w(
       () => s.value,
       async () => {
-        await w(), n.value && (s.value ? (p.value = !0, n.value.showModal(), o.value.length || o.value.push(t.value)) : n.value.open && d());
+        await D(), n.value && (s.value ? (p.value = !0, n.value.showModal(), o.value.length || o.value.push(t.value)) : n.value.open && d());
       },
       { immediate: !0 }
-    ), _(q, f);
+    ), _(z, f);
     const v = r(U.TRANSITION_LEVEL_DEEPER), c = r([]), o = r([]), y = (l) => e("update:active-page", l);
     _(Y, {
       activePage: t,
@@ -183,9 +182,9 @@ const se = {
     });
     const h = (l) => () => {
       var C;
-      c.value = (C = c.value) == null ? void 0 : C.filter((F) => F !== l);
+      c.value = (C = c.value) == null ? void 0 : C.filter((N) => N !== l);
     }, b = (l) => (l && c.value.push(l), { unregisterPage: h(l) });
-    return _($, b), { __sfc: !0, props: a, emit: e, activePage: t, isOpen: s, t: S, modal: n, isClosing: i, modalFullscreenId: f, internalIsOpen: p, listeners: m, slots: g, hasSlot: x, conditionalClasses: A, closeModalAfterAnimation: L, closeModal: O, startCloseModalAnimation: d, animation: v, pages: c, previousPages: o, updatePage: y, unregisterPage: h, registerPage: b, BentoButton: R, BentoFocusTrap: G, BentoModalFullscreenPage: te, CrossIcon: z };
+    return _($, b), { __sfc: !0, props: a, emit: e, activePage: t, isOpen: s, t: x, modal: n, isClosing: i, modalFullscreenId: f, internalIsOpen: p, listeners: m, slots: g, hasSlot: A, conditionalClasses: L, closeModalAfterAnimation: O, closeModal: F, startCloseModalAnimation: d, animation: v, pages: c, previousPages: o, updatePage: y, unregisterPage: h, registerPage: b, BentoButton: R, BentoFocusTrap: G, BentoModalFullscreenPage: te, CrossIcon: H };
   }
 });
 var ne = function() {
@@ -199,17 +198,17 @@ var ne = function() {
   }, proxy: !0 } : null], null, !0) }), a("div", { staticClass: "b-modal-fullscreen__close-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", "aria-label": t.t("close") }, on: { click: t.closeModal }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [a(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
   }, proxy: !0 }], null, !1, 4214210411) })], 1)], 2) : e._e()], 1);
-}, re = [], ue = /* @__PURE__ */ I(
+}, re = [], ue = /* @__PURE__ */ S(
   oe,
   ne,
   re,
   !1,
   null,
-  "5c2804e6"
+  "6c187e0c"
 );
-const Be = ue.exports;
+const Ce = ue.exports;
 export {
   te as B,
-  Be as m
+  Ce as m
 };
-//# sourceMappingURL=modal-fullscreen.DHotw1RI.js.map
+//# sourceMappingURL=modal-fullscreen.BgmKDCl4.js.map