@adyen/bento-vue2 1.82.0 → 1.83.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.82.0",
+  "version": "1.83.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -15987,6 +15987,16 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "setElementRef",
+              "required": false,
+              "description": "Callback function to safely capture the underlying DOM element of the tab.\nUseful for anchoring tooltips, popovers, or tutorials.",
+              "value": {
+                "kind": "expression",
+                "type": "TSFunctionType"
+              },
+              "default": "undefined"
             }
           ],
           "slots": [
@@ -16866,6 +16876,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "tutorial-default-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/tutorial/__tests__/tutorial-default-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "tutorial-indicator",
           "description": "",
@@ -17238,7 +17256,7 @@
             {
               "name": "wide",
               "required": false,
-              "description": "Adds the medium class modifier.\nApplicable to tje Body variant.",
+              "description": "Adds the medium class modifier.\nApplicable to the Body variant.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.82.0",
+  "version": "1.83.1",
   "description": "Adyen Bento Vue2 components",
   "type": "module",
   "main": "dist/index.js",
@@ -49,7 +49,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.82.0"
+    "@adyen/bento-design-tokens": "1.83.1"
   },
   "dependenciesMeta": {
     "@adyen/bento-vue-i18n-demi": {
@@ -133,12 +133,12 @@
     "vue-template-compiler": "2.7.16",
     "vue-tsc": "1.0.24",
     "zod": "3.25.35",
-    "@adyen/bento-cli": "0.8.2",
+    "@adyen/bento-cli": "0.8.4",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-tailwind": "0.9.0",
-    "@adyen/bento-vue-i18n-demi": "0.1.0",
-    "@adyen/ui-assets-icons-16": "7.5.0",
-    "@adyen/ui-assets-payment-method-icons": "10.5.2"
+    "@adyen/bento-tailwind": "0.9.2",
+    "@adyen/ui-assets-icons-16": "7.5.2",
+    "@adyen/ui-assets-payment-method-icons": "10.5.4",
+    "@adyen/bento-vue-i18n-demi": "0.1.0"
   },
   "optionalDependencies": {
     "vue-router": "~3.6"

package/dist/chunks/selection-card-group.jykyd9iE.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"selection-card-group.jykyd9iE.js","sources":["../../src/components/selection-card/selection-card.types.ts","../../src/components/selection-card/selection-card.keys.ts","../../src/components/selection-card/selection-card.vue","../../src/components/selection-card/components/selection-card-group/selection-card-group.vue"],"sourcesContent":["import { type RadioInputValue } from '@/components/internal/radio-input';\nimport { type BentoCheckboxType } from '../checkbox/checkbox.types';\nimport { type VueNodeElement } from '@/types/elements';\n\nexport enum BentoSelectionCardState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string | number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n    content?: string | object;\n    description?: string;\n    disabled?: boolean;\n    dynamicContent?: string | object;\n    fullyClickable?: boolean;\n    hasError?: boolean;\n    icon?: VueNodeElement;\n    readonly?: boolean;\n    subtitle?: string;\n    title: string;\n    value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n    <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n        <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n            <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n                <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n                    <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\">\n                        <slot name=\"icon\" />\n                    </div>\n                    <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n                        <bento-typography\n                            v-if=\"subtitle\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"caption\"\n                        >\n                            {{ subtitle }}\n                        </bento-typography>\n                        <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n                        <bento-typography\n                            v-if=\"description\"\n                            id=\"descriptionId\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"body\"\n                        >\n                            {{ description }}\n                        </bento-typography>\n                    </label>\n                </div>\n                <radio-input\n                    v-if=\"isRadioInput\"\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedRadioInputModelValue\"\n                />\n                <checkbox-input\n                    v-else\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedCheckboxInputModelValue\"\n                />\n            </div>\n            <bento-typography\n                v-if=\"hasSlot('content')\"\n                ref=\"slotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"content\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('dynamicContent') && isChecked\"\n                ref=\"dynamicSlotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"dynamicContent\" />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoCheckboxType, type BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input';\n    import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/core/utils/ts';\n    import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n    import { BentoSelectionCardState } from './selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n    const props = defineProps({\n        /**\n         * The description of the selection card\n         */\n        description: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Disables the selection card\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.\n         */\n        fullyClickable: { type: Boolean, default: false },\n\n        /**\n         * Shows the selection card in error state\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * This property should not be used directly.\n         * It will be used by v-model directive on selection card component.\n         *\n         * When handling a single input, use a string or a number.\n         *\n         * When handling multiple inputs, use an array of keys.\n         * These keys exist as a set \"value\" prop for each input.\n         */\n        modelValue: {\n            type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Sets the selection card to readonly\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The subtitle of the selection card\n         */\n        subtitle: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * The title of the selection card\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates the value of the input that will be returned when it's checked.\n         */\n        value: {\n            type: [String, Number] as PropType<BentoSelectionCardValue>,\n            required: true,\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const inputId = generateUid('selection-card-input-id');\n    const descriptionId = generateUid('selection-card-description');\n\n    const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n        () => props.modelValue as RadioInputValue\n    );\n    const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n        () => props.modelValue as BentoCheckboxType\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-selection-card--checked': isChecked.value,\n        'b-selection-card--fully-clickable': props.fullyClickable,\n    }));\n\n    const containerConditionalClasses = computed(() => ({\n        [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n        [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n        [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n        'b-selection-card--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerTextConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n    }));\n\n    const slotConditionalClasses = computed(() => ({\n        'b-selection-card__slot--with-icon': hasSlot('icon'),\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: props.title,\n        label: props.value as string,\n    });\n\n    const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n    const isChecked: ComputedRef<boolean> = computed(() => {\n        if (isRadioInput.value) {\n            return props.value === props.modelValue;\n        }\n        if (!isCheckboxGroup.value) {\n            return props.modelValue as boolean;\n        }\n\n        return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n    });\n\n    const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n    const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n    const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null);\n    const slotRef = ref(null);\n    const dynamicSlotRef = ref(null);\n\n    // Handle click on the whole card area\n    const handleCardClick = (event: Event) => {\n        if (inputRef.value.$refs.inputRef === event.target) {\n            const newValue = toggleInput();\n            onChange(newValue);\n            return;\n        }\n\n        // Do nothing if disabled or readonly\n        if (props.disabled && props.readonly) {\n            return;\n        }\n\n        // If it's not fully clickable prevent selecting the card if the click\n        // originated in a slot\n        if (!props.fullyClickable) {\n            // Check if the click originated from the slot - in that case, do nothng\n            if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the dynamic slot - in that case, do nothng\n            if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n            if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n                return;\n            }\n        }\n\n        // If the click originated outside of these two areas, emit the change event\n        const newValue = toggleInput();\n\n        onChange(newValue);\n    };\n\n    const toggleInput = (): BentoSelectionCardModelValue => {\n        const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n            const index = newCheckedList.indexOf(props.value);\n\n            if (index === -1) {\n                newCheckedList.push(props.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            return newCheckedList;\n        }\n\n        if (isRadioInput.value) {\n            return props.value;\n        }\n        return currentValue;\n    };\n\n    const onChange = newValue => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', newValue);\n            emit('input', newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n     *\n     * @example\n     * import { BentoSelectionCard } from '@adyen/bento-vue2';\n     * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n     *\n     * export default {\n     *     components: { BentoSelectionCard, EmoticonHappyIcon },\n     *     template: `\n     *          <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n     *              <template #icon>\n     *                  <emoticon-happy-icon />\n     *              </template>\n     *          </bento-selection-card>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-selection-card',\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n    <controls-group\n        ref=\"containerRef\"\n        :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n        :label=\"label\"\n        :hide-label=\"hideLabel\"\n        :description=\"description\"\n        :disabled=\"disabled\"\n        :tooltip-text=\"tooltipText\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        :optional=\"optional\"\n        class=\"b-selection-card-group\"\n        component-name=\"selection-card-group\"\n    >\n        <div\n            v-if=\"!itemsPerRow || layout === 'vertical'\"\n            class=\"b-selection-card-group__items\"\n            :class=\"conditionalItemsClasses\"\n        >\n            <bento-selection-card\n                v-for=\"item in items\"\n                :key=\"`selection-card-${item.value}`\"\n                class=\"b-selection-card-group__item\"\n                v-bind=\"item\"\n                :model-value=\"inputValue\"\n                :readonly=\"readonly || item.readonly\"\n                :has-error=\"shouldShowGroupError\"\n                :disabled=\"disabled || item.disabled\"\n                @update:model-value=\"onInput\"\n            >\n                <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                    <slot name=\"icon\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('content') && item.content\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                    <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                </template>\n            </bento-selection-card>\n        </div>\n        <template v-else>\n            <div :key=\"`selection-card-group-layout-breakpoint-${currentBreakpoint}`\">\n                <grid-layout\n                    v-for=\"(row, rowIndex) in computedRows\"\n                    :key=\"`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`\"\n                    class=\"b-selection-card-group__items--wrap\"\n                    :column-width=\"computedColumnWidth\"\n                >\n                    <template v-for=\"(item, columnIndex) in row\" #[`col-${columnIndex+1}`]>\n                        <bento-selection-card\n                            :key=\"`selection-card-${item.value}`\"\n                            class=\"b-selection-card-group__item b-selection-card-group__item--full-height\"\n                            v-bind=\"item\"\n                            :model-value=\"inputValue\"\n                            :readonly=\"readonly || item.readonly\"\n                            :has-error=\"shouldShowGroupError\"\n                            :disabled=\"disabled || item.disabled\"\n                            @update:model-value=\"onInput\"\n                        >\n                            <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                                <slot name=\"icon\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('content') && item.content\" #content>\n                                <slot name=\"content\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                                <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                            </template>\n                        </bento-selection-card>\n                    </template>\n                </grid-layout>\n            </div>\n        </template>\n        <error-message\n            v-if=\"shouldShowGroupError\"\n            :id=\"errorMessageId\"\n            :error-message=\"errorMessage\"\n            class=\"b-selection-card-group__error-message\"\n        />\n    </controls-group>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, provide, ref, useSlots, watch } from 'vue';\n    import { useElementSize } from '@vueuse/core';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types';\n    import BentoSelectionCard from '../../selection-card.vue';\n    import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n    import { generateUid } from '@/core/utils/ts';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: null,\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  formId: { default: null },\n  hideLabel: { type: Boolean, default: null },\n  layout: { default: 'vertical' },\n  items: null,\n  itemsPerRow: { default: undefined },\n  modelValue: { default: null },\n  variant: { default: 'checkbox' }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const { emitValue } = useFormFieldEmits(emit);\n\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const conditionalItemsClasses = computed(() => ({\n        'b-selection-card-group__items--horizontal': props.layout === 'horizontal',\n    }));\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    // Error message logic\n    const errorMessageId = generateUid('error');\n    const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n    // itemsPerRow logic\n    const containerRef = ref<HTMLElement | null>(null);\n    const { width } = useElementSize(containerRef);\n\n    const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]);\n    const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]);\n\n    const currentBreakpoint = computed(() => {\n        if (width.value < smallBreakpoint.value) {\n            return 'small';\n        }\n        if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) {\n            return 'medium';\n        }\n        return 'large';\n    });\n\n    const computedItemsPerRow = computed(() => {\n        return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length;\n    });\n\n    const computedRows = computed(() => {\n        if (!props.itemsPerRow) {\n            return [];\n        }\n        const rows = [];\n        for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) {\n            rows.push(props.items.slice(i, i + computedItemsPerRow?.value));\n        }\n        return rows;\n    });\n\n    // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic\n    const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value);\n\n    /**\n     * Filling the columnWidth array with the same parameters per item to pass\n     * to the `grid-layout` layout so the each card can have\n     * the same width according to the screen size.\n     */\n    const computedColumnWidth = computed(() => {\n        return computedItemsPerRow?.value\n            ? new Array(computedItemsPerRow?.value).fill({\n                  // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy\n                  small: itemColumnWidth.value,\n                  medium: itemColumnWidth.value,\n                  large: itemColumnWidth.value,\n              })\n            : [];\n    });\n\n    const onInput = value => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n\n    const isRadioVariant = computed(() => props.variant === 'radio');\n\n    provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n\n    onMounted(() => {\n        if (props.itemsPerRow) {\n            Object.values(props.itemsPerRow).forEach(el => {\n                if (el && (el < 2 || el > 6)) {\n                    throw new Error(\n                        'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.'\n                    );\n                }\n            });\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Group of bento-selection-cards.\n     *\n     * @example\n     * import { BentoSelectionCardGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectionCardGroup },\n     *     template: `\n     *          <bento-selection-card-group\n     *              :items=\"[\n     *                    {\n     *                        title: 'Card 1',\n     *                        value: 'card-1',\n     *                        content: 'Slot content 1',\n     *                        icon: RetailIcon,\n     *                    },\n     *                    {\n     *                        title: 'Card 2',\n     *                        value: 'card-2',\n     *                        content: 'Slot content 2',\n     *                        icon: LeafIcon,\n     *                    },\n     *                ]\"\n     *          >\n     *             <template #icon=\"{ icon }\">\n     *                 <component :is=\"icon\"/>\n     *              </template>\n     *              <template #content=\"{ content }\">\n     *                  <div>{{ content }}</div>\n     *               </template>\n     *          </bento-selection-card-group>\n     *     `,\n     * }\n     */\n    export default {\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","_b","_a","_d","_c","_f","_e","newValue","currentValue","newCheckedList","index","emit","__default__","emitValue","useFormFieldEmits","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","containerRef","width","useElementSize","smallBreakpoint","BMediaQuerySMax","mediumBreakpoint","BMediaQueryMMax","currentBreakpoint","computedItemsPerRow","computedRows","rows","i","itemColumnWidth","computedColumnWidth","onInput","value","isRadioVariant","provide","onMounted","el"],"mappings":"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"}

package/dist/chunks/tab.DXE68qVf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab.DXE68qVf.js","sources":["../../src/components/tabs/utils/index.ts","../../src/components/tabs/tabs.types.ts","../../src/components/tabs/tabs.vue","../../src/components/tabs/components/tab.vue"],"sourcesContent":["import { type BentoTab } from '../components/tab.types';\n\n/**\n * Recursively gets the previous available tab index. It will loop through the tabs until it finds one\n * that is not disabled or hidden.\n * @param activeTabIndex The currently active tab index.\n * @param tabsValue An array of BentoTab objects.\n * @returns The index of the previous available tab.\n */\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: Array<BentoTab>) => {\n    // Prevent overflow\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    const currentTab = tabsValue[newActiveTabIndex];\n    if (currentTab.disabled || currentTab.hidden) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\n/**\n * Recursively gets the next available tab index. It will loop through the tabs until it finds one\n * that is not disabled or hidden.\n * @param activeTabIndex The currently active tab index.\n * @param tabsValue An array of BentoTab objects.\n * @returns The index of the next available tab.\n */\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: Array<BentoTab>) => {\n    // Prevent overflow\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    const currentTab = tabsValue[newActiveTabIndex];\n    if (currentTab.disabled || currentTab.hidden) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\n/**\n * Private\n */\nexport interface BentoStickyTabsOptions {\n    top?: Ref<number>;\n}\n\nexport type BentoTabsRegisterTab = (props: {\n    counter: Ref<number>;\n    disabled: Ref<boolean>;\n    hidden: Ref<boolean>;\n    title: Ref<string>;\n    withNotificationIndicator: Ref<boolean>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <div\n            ref=\"tablistwrapper\"\n            class=\"b-tabs__tab-list-wrapper\"\n            :class=\"tablistWrapperConditionalClasses\"\n            :style=\"tablistWrapperStyles\"\n        >\n            <fixed-scroller condensed :extra-padding-top=\"2\">\n                <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n                    <button\n                        v-for=\"{ counter, disabled, hidden, id, title, withNotificationIndicator } in tabs\"\n                        v-show=\"!hidden\"\n                        :id=\"id\"\n                        :key=\"id\"\n                        role=\"tab\"\n                        type=\"button\"\n                        class=\"b-tabs__tab\"\n                        :class=\"{\n                            'b-tabs__tab--active': activeTabId === id,\n                            'b-tabs__tab--disabled': disabled,\n                        }\"\n                        :aria-controls=\"`${id}-tabpanel`\"\n                        :aria-hidden=\"hidden ? 'true' : 'false'\"\n                        :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                        :tabindex=\"activeTabId === id && !disabled.value ? null : -1\"\n                        :disabled=\"isDisabled(disabled)\"\n                        @click=\"handleTabChange(id)\"\n                        @keydown.enter.space=\"handleTabChange(id)\"\n                    >\n                        <span class=\"b-tabs__tab-text\">\n                            <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                                {{ title }}\n                            </bento-typography>\n                            <bento-typography\n                                v-if=\"counter != null\"\n                                class=\"b-tabs__tab-counter\"\n                                el=\"span\"\n                                variant=\"body\"\n                                stronger\n                                :class=\"{\n                                    'b-tabs__tab-counter--active': activeTabId === id,\n                                }\"\n                            >\n                                {{ counter }}\n                            </bento-typography>\n                            <span\n                                v-if=\"withNotificationIndicator\"\n                                class=\"b-tabs__tab-notification-dot\"\n                                aria-hidden=\"true\"\n                            ></span>\n                        </span>\n                        <span v-show=\"activeTabId === id\" class=\"b-tabs__tab-underline\" aria-hidden=\"true\"></span>\n                    </button>\n                </div>\n            </fixed-scroller>\n        </div>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import {\n        computed,\n        defineComponent,\n        nextTick,\n        onUnmounted,\n        type PropType,\n        provide,\n        ref,\n        type Ref,\n        unref,\n        watch,\n    } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n    import { FixedScroller } from '@/internal';\n\n    // utils\n    import { generateUid } from '@/core/utils/ts';\n    import { getNextTabIndex, getPreviousTabIndex } from './utils';\n\n    // types\n    import { type Booleanish } from '@/types/prop-types';\n    import { type BentoTab } from './components/tab.types';\n    import { type BentoStickyTabsOptions, BentoTabsEvent, type BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n            FixedScroller,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n\n            /*\n             * Renders the tab with a sticky positioning.\n             */\n            sticky: { type: Boolean, default: false },\n\n            /**\n             * Additional configurable options for tabs rendered with a sticky positioning.\n             * It must be an object of type {@see BentoStickyTabsOption}\n             * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky.\n             */\n            stickyOptions: { type: Object as PropType<BentoStickyTabsOptions>, default: null },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<Array<BentoTab>> = ref([]);\n            const tablist = ref(null);\n            const tablistwrapper = ref();\n            const activeTabId = ref('');\n            const isPinnedByObserver = ref(false);\n            let observer;\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({\n                title,\n                disabled,\n                withNotificationIndicator,\n                counter,\n                hidden,\n            }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ counter, disabled, hidden, id, title, withNotificationIndicator });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish =>\n                (isDisabledTab ? 'disabled' : false) as Booleanish;\n\n            /* == Sticky tabs logic == */\n            const topOffset = computed(() => (props.stickyOptions?.top ? unref(props.stickyOptions.top) : 0));\n\n            const isPinned = computed(() => {\n                if (props.sticky && topOffset.value > 0) {\n                    return true;\n                }\n                return isPinnedByObserver.value;\n            });\n\n            const disconnectObserver = () => {\n                if (observer) {\n                    observer.disconnect();\n                    observer = null;\n                }\n                isPinnedByObserver.value = false;\n            };\n\n            const setupObserver = (element: HTMLDivElement) => {\n                // The observer is only needed when the tabs are sticky at the top of the screen (no top offset).\n                if (props.sticky && topOffset.value === 0) {\n                    observer = new IntersectionObserver(\n                        ([e]) => {\n                            isPinnedByObserver.value = e.intersectionRatio < 1;\n                        },\n                        { threshold: [1] }\n                    );\n                    observer.observe(element);\n                }\n            };\n\n            // This watcher manages the entire lifecycle of the observer.\n            watch(\n                [() => props.sticky, tablistwrapper, topOffset],\n                ([isSticky, element]) => {\n                    disconnectObserver();\n                    if (isSticky && element) {\n                        nextTick(() => setupObserver(element));\n                    }\n                },\n                { immediate: true }\n            );\n\n            onUnmounted(() => {\n                disconnectObserver();\n            });\n\n            const tablistWrapperConditionalClasses = computed(() => ({\n                'b-tabs__tab-list-wrapper--sticky': props.sticky,\n                'b-tabs__tab-list-wrapper--pinned': isPinned.value,\n            }));\n\n            const tablistWrapperStyles = computed(() =>\n                // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer.\n                // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/\n                props.sticky\n                    ? {\n                          top: `${(props.stickyOptions?.top ?? 0) - 1}px`,\n                      }\n                    : {}\n            );\n\n            return {\n                tabs,\n                tablist,\n                tablistwrapper,\n                activeTabId,\n                tablistWrapperConditionalClasses,\n                tablistWrapperStyles,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n","<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" class=\"b-tab\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <template v-if=\"activeTabId === id\">\n            <slot />\n        </template>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, onUnmounted, provide, ref, toRefs } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { type BentoTabsRegisterTab } from '../tabs.types';\n    import { type BentoTabProps, type BentoTabProvidedTitle } from './tab.types';\n\n    const props = defineProps({\n  counter: { default: null },\n  disabled: { type: Boolean, default: false },\n  hidden: { type: Boolean, default: false },\n  title: null,\n  withNotificationIndicator: { type: Boolean, default: false }\n});\n\n    // External title injection\n    const { counter, disabled, hidden, withNotificationIndicator } = toRefs(props);\n    const componentTitle = ref<BentoTabProps['title']>();\n    const setTitle: BentoTabProvidedTitle = (value: string) => {\n        componentTitle.value = value;\n    };\n    provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n    const computedTitle = computed<BentoTabProps['title']>(() => componentTitle.value ?? props.title);\n\n    const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n    const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n    const { id, unregisterTab } = registerTab({\n        counter,\n        disabled,\n        hidden,\n        title: computedTitle,\n        withNotificationIndicator,\n    });\n\n    onUnmounted(() => unregisterTab());\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Tab content which attaches a tab to the `bento-tabs` component\n     * and renders is content when it becomes active.\n     *\n     * @example\n     * import { BentoTab, BentoTabs } from '@adyen/bento-vue2';\n     *\n     * <template>\n     *    <bento-tabs>\n     *        <bento-tab\n     *            :counter=\"1\"\n     *            :disabled=\"false\"\n     *            :hidden=\"false\"\n     *            title=\"Tab's title\"\n     *            with-notification-indicator\n     *        >\n     *            Tab content\n     *        </bento-tab>\n     *    </bento-tabs>\n     * </template>\n     */\n    export default {\n        name: 'bento-tab',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./tab.scss\" />\n"],"names":["getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","currentTab","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main$1","defineComponent","BentoTypography","FixedScroller","props","emit","tabs","ref","tablist","tablistwrapper","activeTabId","isPinnedByObserver","observer","provide","TABS_ACTIVE_TAB_ID_KEY","unregisterTab","tabIdToRemove","_a","id","TABS_REGISTER_TAB_INJECTION_KEY","title","disabled","withNotificationIndicator","counter","hidden","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","handleTabChange","tabId","activeIndex","isDisabled","isDisabledTab","topOffset","computed","unref","isPinned","disconnectObserver","setupObserver","element","isSticky","onUnmounted","tablistWrapperConditionalClasses","tablistWrapperStyles","__default__","toRefs","componentTitle","setTitle","value","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","computedTitle","registerTab","inject"],"mappings":"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"}

package/dist/chunks/typography.hlOAxsEn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography.hlOAxsEn.js","sources":["../../src/components/typography/typography.types.ts","../../src/utils/ts/dev-environment.ts","../../src/utils/ts/print-development-warning.ts","../../src/utils/ts/deprecate.ts","../../src/components/typography/typography.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTypographyVariant {\n    CAPTION = 'caption',\n    BODY = 'body',\n    /** @deprecated Use \"TITLE\" instead. */\n    SUBTITLE = 'subtitle',\n    TITLE = 'title',\n}\n\nexport enum BentoTypographyModifier {\n    WIDE = 'wide',\n    STRONGER = 'stronger',\n    STRONGER_WIDE = 'stronger-wide',\n    STRONGEST = 'strongest',\n    STRONGEST_WIDE = 'strongest-wide',\n    MEDIUM = 'm',\n    LARGE = 'l',\n    MOBILE = 'mobile',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTypographyElement {\n    H1 = 'h1',\n    H2 = 'h2',\n    H3 = 'h3',\n    H4 = 'h4',\n    H5 = 'h5',\n    H6 = 'h6',\n    DIV = 'div',\n    PARAGRAPH = 'p',\n    SPAN = 'span',\n}\n","const DEV_ENVIROMENT_NAMES = ['development', 'DEVELOPMENT', 'dev', 'DEV'];\n\nexport const isDevelopmentEnviroment = () => DEV_ENVIROMENT_NAMES.includes(process.env.NODE_ENV);\n","import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n/**\n * Prints console.warn messages in development mode only.\n *\n * @see console.warn for what parameters you can use\n */\n\nexport function printDevelopmentWarning(...args: Parameters<typeof console.warn>) {\n    if (isDevelopmentEnviroment()) {\n        // eslint-disable-next-line no-console\n        console.warn(...args);\n    }\n}\n","import { printDevelopmentWarning } from './print-development-warning';\n\nconst DEPRECATION_STYLES = ['color: red', 'background: yellow'].join(';');\nconst shownMessages = new Set<string>();\n\n/**\n * Informs users about the deprecations in development mode only.\n *\n * @param title Indicates what is being deprecated.\n * @param deprecationMessage How to avoid the deprecation by giving an example of the alternatives. Backticks can be used to multi-line the message.\n * @param toBeRemovedInVersion The version it will be removed. Must be in X.Y.Z format.\n */\nexport function deprecate(title: string, deprecationMessage: string, toBeRemovedInVersion: string) {\n    // If the message is already showing, don't show it again\n    if (!shownMessages.has(title)) {\n        printDevelopmentWarning(`%cDEPRECATED:\\x1b[0m ${title}`, DEPRECATION_STYLES);\n        // Format multi-line descriptions with the backtick\n        printDevelopmentWarning(`${deprecationMessage.replaceAll('  ', '').trim()}`);\n        printDevelopmentWarning(`To be removed in: %c${toBeRemovedInVersion}`, DEPRECATION_STYLES);\n        shownMessages.add(title);\n    }\n}\n\n/**\n * Reset shownMessages set\n *\n * @deprecated For testing purposes only. Do not use.\n */\nexport function resetShownMessages() {\n    shownMessages.clear();\n}\n","<template>\n    <component :is=\"el\" class=\"b-typography\" :class=\"conditionalClasses\" data-testid=\"typography\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted } from 'vue';\n    import { BentoTypographyElement, BentoTypographyModifier, BentoTypographyVariant } from './typography.types';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n  el: { default: BentoTypographyElement.PARAGRAPH },\n  large: { type: Boolean, default: false },\n  medium: { type: Boolean, default: false },\n  richText: { type: Boolean },\n  stronger: { type: Boolean, default: false },\n  strongest: { type: Boolean, default: false },\n  variant: { default: BentoTypographyVariant.BODY },\n  wide: { type: Boolean, default: false }\n});\n\n    if (props.variant === BentoTypographyVariant.SUBTITLE) {\n        deprecate(\n            'BentoTypography \"subtitle\" variant (BentoTypographyVariant.SUBTITLE)',\n            `Use the \"title\" or \"BentoTypographyVariant.TITLE\" variant and (optionally) combine it with a size property. e.g. medium / large.\n                    <bento-typography :variant=\"BentoTypographyVariant.TITLE\" medium>`,\n            '2.0.0'\n        );\n    }\n\n    const conditionalClasses = computed(() => ({\n        // Rich text\n        ['b-typography--rich-text']: props.richText,\n        // Caption\n        [`b-typography--${BentoTypographyVariant.CAPTION}`]: props.variant === BentoTypographyVariant.CAPTION,\n        [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.WIDE}`]:\n            props.variant === BentoTypographyVariant.CAPTION && props.wide,\n        [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.STRONGER}`]:\n            props.variant === BentoTypographyVariant.CAPTION && props.stronger,\n\n        // Body\n        [`b-typography--${BentoTypographyVariant.BODY}`]: props.variant === BentoTypographyVariant.BODY,\n        [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.WIDE}`]:\n            props.variant === BentoTypographyVariant.BODY && props.wide,\n        [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGER}`]:\n            props.variant === BentoTypographyVariant.BODY && props.stronger,\n        [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGEST}`]:\n            props.variant === BentoTypographyVariant.BODY && props.strongest,\n\n        // Subtitle\n        [`b-typography--${BentoTypographyVariant.SUBTITLE}`]: props.variant === BentoTypographyVariant.SUBTITLE,\n        [`b-typography--${BentoTypographyVariant.SUBTITLE}-${BentoTypographyModifier.STRONGER}`]:\n            props.variant === BentoTypographyVariant.SUBTITLE && props.stronger,\n\n        // Title\n        [`b-typography--${BentoTypographyVariant.TITLE}`]:\n            props.variant === BentoTypographyVariant.TITLE && !props.medium && !props.large,\n        [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.MEDIUM}`]:\n            props.variant === BentoTypographyVariant.TITLE && props.medium,\n        [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.LARGE}`]:\n            props.variant === BentoTypographyVariant.TITLE && props.large,\n    }));\n\n    onMounted(() => {\n        if (props.richText && props.el !== 'div') {\n            throw new Error('Rich-text prop must be used with el=\"div\" for correct HTML semantics');\n        }\n\n        if (props.richText && props.variant === 'title') {\n            throw new Error('Rich-text prop cannot be used with the title variant.');\n        }\n\n        if (props.richText && props.variant === 'subtitle') {\n            throw new Error('Rich-text prop cannot be used with the subtitle variant.');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\n     * easily to text. The variants and properties match with those found in Figma.\n     *\n     * For example, seeing text with the typography styling of\n     *\n     * @example\n     * import { BentoTypography } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTypography },\n     *     template: `\n     *          <bento-typography>\n     *              ... text content\n     *          </bento-typography>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-typography',\n        inheritAttrs: true,\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./typography.scss\" />\n"],"names":["BentoTypographyVariant","BentoTypographyVariant2","BentoTypographyModifier","BentoTypographyModifier2","BentoTypographyElement","BentoTypographyElement2","DEV_ENVIROMENT_NAMES","isDevelopmentEnviroment","printDevelopmentWarning","args","DEPRECATION_STYLES","shownMessages","deprecate","title","deprecationMessage","toBeRemovedInVersion","__default__","props","conditionalClasses","computed","onMounted"],"mappings":"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"}