@adyen/bento-mcp 0.4.0 → 0.5.0

package/dist/assets/components/internal/listbox/listbox.vue

@@ -1 +1 @@
-<template> <div :id="id" ref="listboxRef" v-bento-keyboard-navigation-directive class="b-listbox" tabindex="-1" v-bind="listboxContainerAttributes" :style="containerProps?.style" data-testid="listbox-container" @scroll="onListboxContainerScroll" > <div v-bind="wrapperProps"> <!-- Loading filtered items loading --> <div v-if="componentLoading" class="b-listbox__loading-filtered-items"> <bento-loading-indicator /> </div> <!-- Empty search message --> <div v-else-if="isSearchResultEmpty" class="b-listbox__empty-search-message"> <bento-empty-state v-if="emptyState" v-bind="limitedEmptyStateProps" /> <bento-typography v-else el="span">{{ noResultsMessage }}</bento-typography> </div> <template v-else> <!-- Multi select --> <template v-if="multiple"> <bento-listbox-multi-select ref="listboxItemRef" :has-more-items="hasMoreItems" v-bind="ariaAttributes" :items="items" :lazy-load-type="lazyLoadType" :static-categories="staticCategories" :selected-values="selectedValue" :searching="searching" :is-option-disabled="isOptionDisabled" v-on="listboxListeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox-multi-select> </template> <!-- Single select --> <template v-else> <bento-listbox-single-select ref="listboxItemRef" :items="virtualisedItems" v-bind="ariaAttributes" :selected-value="selectedValue" :static-categories="staticCategories" :is-option-disabled="isOptionDisabled" v-on="listboxListeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox-single-select> </template> <!-- Lazy Loading --> <div v-if="shouldDisplayShowMoreButton" class="b-listbox__lazy-load"> <bento-loading-button :state="loadingButtonState" variant="secondary" @click.capture="emitShowMore"> {{ showMoreButtonText }} </bento-loading-button> </div> <div v-else-if="loading" class="b-listbox__lazy-load"> <bento-loading-indicator /> </div> </template> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType, ref, toRef } from 'vue'; import { type BentoListboxEmptyStateProps, BentoListboxEvent, type BentoListboxIsOptionDisabled, BentoListboxLazyLoadType, type BentoListboxOptionItem, type BentoListboxOptions, type BentoListboxVirtulisationOptions, } from '@/types/listbox'; import { BentoKeyboardNavigationKeyDownEvent } from '@/types/keyboard-navigation'; import { BentoKeyboardNavigationDirective } from '@/directives'; import { BentoListboxSingleSelect } from './components/listbox-single-select'; import { BentoListboxMultiSelect } from './components/listbox-multi-select'; import { BentoTypography } from '@/components/typography'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { BentoLoadingButton, BentoLoadingButtonState } from '@/components/button'; import { BentoEmptyState } from '@/components/empty-state'; import { useI18n } from '@/utils/ts/i18n'; import { debounce } from '@/utils/ts/debounce'; import { useVirtualList } from '@/composables/use-virtual-list'; import type { HTMLAttributes } from 'vue/types/jsx.d.ts'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const DEFAULT_DROPDOWN_ITEM_HEIGHT = 36; /** * Listbox container. * It lists all the available options. * * @example * <bento-listbox * v-slot="{label, value}" * :id="listboxOptionsContainerId" * :aria-label="ariaLabel" * :disabled="disabled" * :multiple="multiple" * :selected="value" * :isOptionDisabled="option => option.value === 2" * :items="[{ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * }]" * @select="onOptionSelected" * > * </bento-listbox> */ export default defineComponent({ name: 'bento-listbox', components: { BentoEmptyState, BentoListboxSingleSelect, BentoListboxMultiSelect, BentoTypography, BentoLoadingIndicator, BentoLoadingButton, }, directives: { BentoKeyboardNavigationDirective }, i18n: { messages }, props: { /** * Defines a string value that labels an interactive element. */ ariaLabel: { type: String, default: null }, /** * Empty state props that will be used with the inner empty state component to be displayed when no search results are found. */ emptyState: { type: Object as PropType<BentoListboxEmptyStateProps>, default: undefined, }, /** * Indicates whether there are more items to load */ hasMoreItems: { type: Boolean, default: false }, /** * Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set. */ id: { type: String, required: true }, /** * Function that allows the options to be disabled * * @type {BentoListboxIsOptionDisabled} * @param {BentoListboxOptionItem} option - Listbox option object * @param {string} option.label - Option's label text * @param {string|number} option.value - Option's value * @param {unknown} option.data - Option's extra data to be passed to the default slot */ isOptionDisabled: { type: Function as PropType<BentoListboxIsOptionDisabled>, default: () => undefined, }, /** * The option elements to populate the listbox with. * It must be an array of {@see BentoListboxOptionItem } * * @property {string} value.label - Text to be displayed in the option * * @property {string,number} value.value - Value of the option */ items: { type: Array as PropType<BentoListboxOptions>, required: true, }, /** * Indicates if new options are lazy loading. */ loading: { type: Boolean, default: false }, /** * The type of `Lazy Load`. * Type "automatic" will enable infinite scrolling * Type "button" will enable lazy loading with "Show more" button */ lazyLoadType: { type: String as PropType<BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`>, default: BentoListboxLazyLoadType.NONE, validator: (value: BentoListboxLazyLoadType) => Object.values(BentoListboxLazyLoadType).includes(value), }, /** * Indicates the listbox is loading filtered items. */ componentLoading: { type: Boolean, default: false }, /** * If enabled, the user will be able to select multiple items. */ multiple: { type: Boolean, default: false }, /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories: { type: Boolean, default: false }, /** * Messaged displayed when no items are listed in the listbox */ noResultsMessage: { type: String, required: true }, /** * Flag that indicates that an external search it's being made * to filter out the items inside the the multi-select listbox * * If enabled, hides the "Select all" checkbox in "multiple" mode. */ searching: BentoListboxMultiSelect.props.searching, /** * The `input` value. * Providing an empty string or empty array will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected for single select */ selectedValue: { type: Array as PropType<BentoListboxOptions>, default: () => [], }, /** * Enables virtual scrolling if set to true or by providing an object with itemHeight function. * The itemHeight function is used to calculate the height of rendered item given it's index. */ virtualScroll: { type: [Boolean, Object] as PropType<BentoListboxVirtulisationOptions>, default: false, }, }, emits: [ BentoListboxEvent.SELECT, BentoListboxEvent.SPACE, BentoListboxEvent.SHOW_MORE, BentoListboxEvent.ENTER, BentoListboxEvent.ESCAPE, BentoListboxEvent.TAB, ], setup(props, { emit, slots }) { const listboxItemRef = ref([]); const items = toRef(props, 'items'); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isLazyLoadListbox = computed(() => props.lazyLoadType !== BentoListboxLazyLoadType.AUTOMATIC); const hasAutomaticLazyLoader = computed(() => props.lazyLoadType === BentoListboxLazyLoadType.AUTOMATIC); // Virtual scrolling const virtualScrollItemHeight = () => { if (typeof props?.virtualScroll === 'object' && props?.virtualScroll?.itemHeight) { return props.virtualScroll.itemHeight; } return DEFAULT_DROPDOWN_ITEM_HEIGHT; }; const { containerRef: listboxRef, containerProps, onScroll: onContainerScroll, list: virtualisedItems, wrapperProps, } = useVirtualList<BentoListboxOptionItem>(items, { itemHeight: virtualScrollItemHeight(), // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select disabled: props?.multiple || props?.virtualScroll === false || props?.lazyLoadType !== 'none', }); // Aria a11y const ariaAtomic = computed<HTMLAttributes['aria-atomic']>(() => props.componentLoading !== undefined || isLazyLoadListbox.value ? 'true' : undefined ); const ariaBusy = computed<HTMLAttributes['aria-busy']>(() => (isLazyLoadListbox.value && props.loading) || props.componentLoading ? 'true' : 'false' ); const ariaLive = computed<HTMLAttributes['aria-live']>(() => isLazyLoadListbox.value || props.componentLoading !== undefined ? 'polite' : undefined ); const ariaAttributes = computed( () => ({ 'aria-label': props.ariaLabel, 'aria-busy': ariaBusy.value, 'aria-atomic': ariaAtomic.value, 'aria-live': ariaLive.value, }) as HTMLAttributes ); const listboxContainerAttributes = computed( () => (props.componentLoading ? { ...ariaAttributes.value, role: 'alert', } : {}) as HTMLAttributes ); const onOptionSelected = eventName => (selectedItem: BentoListboxOptions) => { emit(eventName, selectedItem); }; const emitShowMore = () => { emit(BentoListboxEvent.SHOW_MORE); }; const emitShowMoreOnScrollEnd = debounce(() => { const container = listboxRef.value; if (!container) { return; } const isAtBottom = Math.round(container.scrollTop) + container.clientHeight >= container.scrollHeight; if (props.hasMoreItems && isAtBottom && !props.loading) { emitShowMore(); } }); const onListboxContainerScroll = () => { if (hasAutomaticLazyLoader.value) { emitShowMoreOnScrollEnd(); } else { onContainerScroll(); } }; const isSearchResultEmpty = computed(() => props.items?.length === 0); const shouldDisplayShowMoreButton = computed( () => props.lazyLoadType === BentoListboxLazyLoadType.BUTTON && props.hasMoreItems ); const loadingButtonState = computed(() => props.loading ? BentoLoadingButtonState.LOADING : BentoLoadingButtonState.START ); const showMoreButtonText = computed(() => (props.loading ? t('loading') : t('showMore'))); const limitedEmptyStateProps = computed<InstanceType<typeof BentoEmptyState>['$props']>(() => ({ ...props.emptyState, variant: 'condensed', })); const listboxListeners = { [BentoListboxEvent.SELECT]: onOptionSelected(BentoListboxEvent.SELECT), [BentoListboxEvent.SPACE]: onOptionSelected(BentoListboxEvent.SPACE), [BentoListboxEvent.TAB]: onOptionSelected(BentoListboxEvent.TAB), [BentoListboxEvent.ENTER]: onOptionSelected(BentoListboxEvent.ENTER), }; return { // Refs listboxRef, listboxItemRef, // a11y ariaAttributes, listboxContainerAttributes, // Values containerProps, isSearchResultEmpty, limitedEmptyStateProps, loadingButtonState, slots, shouldDisplayShowMoreButton, showMoreButtonText, virtualisedItems, wrapperProps, // Enums BentoKeyboardNavigationKeyDownEvent, BentoListboxEvent, // Methods onListboxContainerScroll, onOptionSelected, emitShowMore, listboxListeners, }; }, }); </script> <style lang="scss" scoped src="./listbox.scss" /> 
+<template> <div :id="id" ref="listboxRef" v-bento-keyboard-navigation-directive class="b-listbox" tabindex="-1" v-bind="listboxContainerAttributes" :style="containerProps?.style" data-testid="listbox-container" @scroll="onListboxContainerScroll" > <div v-bind="wrapperProps"> <!-- Loading filtered items loading --> <div v-if="componentLoading" class="b-listbox__loading-filtered-items"> <bento-loading-indicator /> </div> <!-- Empty search message --> <div v-else-if="isSearchResultEmpty" class="b-listbox__empty-search-message"> <bento-empty-state v-if="emptyState" v-bind="limitedEmptyStateProps" /> <bento-typography v-else el="span">{{ noResultsMessage }}</bento-typography> </div> <template v-else> <!-- Multi select --> <template v-if="multiple"> <bento-listbox-multi-select ref="listboxItemRef" :has-more-items="hasMoreItems" v-bind="ariaAttributes" :items="items" :lazy-load-type="lazyLoadType" :static-categories="staticCategories" :selected-values="selectedValue" :searching="searching" :is-option-disabled="isOptionDisabled" v-on="listboxListeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox-multi-select> </template> <!-- Single select --> <template v-else> <bento-listbox-single-select ref="listboxItemRef" :items="virtualisedItems" :total-item-count="totalItemCount" :scroll-to-index="scrollToIndex" :virtual-scroll-start-index="virtualScrollStartIndex" v-bind="ariaAttributes" :selected-value="selectedValue" :static-categories="staticCategories" :is-option-disabled="isOptionDisabled" v-on="listboxListeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox-single-select> </template> <!-- Lazy Loading --> <div v-if="shouldDisplayShowMoreButton" class="b-listbox__lazy-load"> <bento-loading-button :state="loadingButtonState" variant="secondary" @click.capture="emitShowMore"> {{ showMoreButtonText }} </bento-loading-button> </div> <div v-else-if="loading" class="b-listbox__lazy-load"> <bento-loading-indicator /> </div> </template> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType, ref, toRef } from 'vue'; import { type BentoListboxEmptyStateProps, BentoListboxEvent, type BentoListboxIsOptionDisabled, BentoListboxLazyLoadType, type BentoListboxOptionItem, type BentoListboxOptions, type BentoListboxVirtulisationOptions, } from '@/types/listbox'; import { BentoKeyboardNavigationKeyDownEvent } from '@/types/keyboard-navigation'; import { BentoKeyboardNavigationDirective } from '@/directives'; import { BentoListboxSingleSelect } from './components/listbox-single-select'; import { BentoListboxMultiSelect } from './components/listbox-multi-select'; import { BentoTypography } from '@/components/typography'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { BentoLoadingButton, BentoLoadingButtonState } from '@/components/button'; import { BentoEmptyState } from '@/components/empty-state'; import { useI18n } from '@/utils/ts/i18n'; import { debounce } from '@/utils/ts/debounce'; import { useVirtualList } from '@/composables/use-virtual-list'; import type { HTMLAttributes } from 'vue/types/jsx.d.ts'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const DEFAULT_DROPDOWN_ITEM_HEIGHT = 36; /** * Listbox container. * It lists all the available options. * * @example * <bento-listbox * v-slot="{label, value}" * :id="listboxOptionsContainerId" * :aria-label="ariaLabel" * :disabled="disabled" * :multiple="multiple" * :selected="value" * :isOptionDisabled="option => option.value === 2" * :items="[{ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * }]" * @select="onOptionSelected" * > * </bento-listbox> */ export default defineComponent({ name: 'bento-listbox', components: { BentoEmptyState, BentoListboxSingleSelect, BentoListboxMultiSelect, BentoTypography, BentoLoadingIndicator, BentoLoadingButton, }, directives: { BentoKeyboardNavigationDirective }, i18n: { messages }, props: { /** * Defines a string value that labels an interactive element. */ ariaLabel: { type: String, default: null }, /** * Empty state props that will be used with the inner empty state component to be displayed when no search results are found. */ emptyState: { type: Object as PropType<BentoListboxEmptyStateProps>, default: undefined, }, /** * Indicates whether there are more items to load */ hasMoreItems: { type: Boolean, default: false }, /** * Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set. */ id: { type: String, required: true }, /** * Function that allows the options to be disabled * * @type {BentoListboxIsOptionDisabled} * @param {BentoListboxOptionItem} option - Listbox option object * @param {string} option.label - Option's label text * @param {string|number} option.value - Option's value * @param {unknown} option.data - Option's extra data to be passed to the default slot */ isOptionDisabled: { type: Function as PropType<BentoListboxIsOptionDisabled>, default: () => undefined, }, /** * The option elements to populate the listbox with. * It must be an array of {@see BentoListboxOptionItem } * * @property {string} value.label - Text to be displayed in the option * * @property {string,number} value.value - Value of the option */ items: { type: Array as PropType<BentoListboxOptions>, required: true, }, /** * Indicates if new options are lazy loading. */ loading: { type: Boolean, default: false }, /** * The type of `Lazy Load`. * Type "automatic" will enable infinite scrolling * Type "button" will enable lazy loading with "Show more" button */ lazyLoadType: { type: String as PropType<BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`>, default: BentoListboxLazyLoadType.NONE, validator: (value: BentoListboxLazyLoadType) => Object.values(BentoListboxLazyLoadType).includes(value), }, /** * Indicates the listbox is loading filtered items. */ componentLoading: { type: Boolean, default: false }, /** * If enabled, the user will be able to select multiple items. */ multiple: { type: Boolean, default: false }, /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories: { type: Boolean, default: false }, /** * Messaged displayed when no items are listed in the listbox */ noResultsMessage: { type: String, required: true }, /** * Flag that indicates that an external search it's being made * to filter out the items inside the the multi-select listbox * * If enabled, hides the "Select all" checkbox in "multiple" mode. */ searching: BentoListboxMultiSelect.props.searching, /** * The `input` value. * Providing an empty string or empty array will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected for single select */ selectedValue: { type: Array as PropType<BentoListboxOptions>, default: () => [], }, /** * Enables virtual scrolling if set to true or by providing an object with itemHeight function. * The itemHeight function is used to calculate the height of rendered item given it's index. */ virtualScroll: { type: [Boolean, Object] as PropType<BentoListboxVirtulisationOptions>, default: false, }, }, emits: [ BentoListboxEvent.SELECT, BentoListboxEvent.SPACE, BentoListboxEvent.SHOW_MORE, BentoListboxEvent.ENTER, BentoListboxEvent.ESCAPE, BentoListboxEvent.TAB, ], setup(props, { emit, slots }) { const listboxItemRef = ref([]); const items = toRef(props, 'items'); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isLazyLoadListbox = computed(() => props.lazyLoadType !== BentoListboxLazyLoadType.AUTOMATIC); const hasAutomaticLazyLoader = computed(() => props.lazyLoadType === BentoListboxLazyLoadType.AUTOMATIC); // Virtual scrolling const virtualScrollItemHeight = () => { if (typeof props?.virtualScroll === 'object' && props?.virtualScroll?.itemHeight) { return props.virtualScroll.itemHeight; } return DEFAULT_DROPDOWN_ITEM_HEIGHT; }; const isVirtualScrollEnabled = !props?.multiple && props?.virtualScroll !== false && props?.lazyLoadType === 'none'; const { containerRef: listboxRef, containerProps, onScroll: onContainerScroll, list: virtualisedItems, wrapperProps, scrollToIndex, startIndex: virtualScrollStartIndex, } = useVirtualList<BentoListboxOptionItem>(items, { itemHeight: virtualScrollItemHeight(), // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select disabled: !isVirtualScrollEnabled, }); const totalItemCount = computed(() => (isVirtualScrollEnabled ? items.value.length : 0)); // Aria a11y const ariaAtomic = computed<HTMLAttributes['aria-atomic']>(() => props.componentLoading !== undefined || isLazyLoadListbox.value ? 'true' : undefined ); const ariaBusy = computed<HTMLAttributes['aria-busy']>(() => (isLazyLoadListbox.value && props.loading) || props.componentLoading ? 'true' : 'false' ); const ariaLive = computed<HTMLAttributes['aria-live']>(() => isLazyLoadListbox.value || props.componentLoading !== undefined ? 'polite' : undefined ); const ariaAttributes = computed( () => ({ 'aria-label': props.ariaLabel, 'aria-busy': ariaBusy.value, 'aria-atomic': ariaAtomic.value, 'aria-live': ariaLive.value, }) as HTMLAttributes ); const listboxContainerAttributes = computed( () => (props.componentLoading ? { ...ariaAttributes.value, role: 'alert', } : {}) as HTMLAttributes ); const onOptionSelected = eventName => (selectedItem: BentoListboxOptions) => { emit(eventName, selectedItem); }; const emitShowMore = () => { emit(BentoListboxEvent.SHOW_MORE); }; const emitShowMoreOnScrollEnd = debounce(() => { const container = listboxRef.value; if (!container) { return; } const isAtBottom = Math.round(container.scrollTop) + container.clientHeight >= container.scrollHeight; if (props.hasMoreItems && isAtBottom && !props.loading) { emitShowMore(); } }); const onListboxContainerScroll = () => { if (hasAutomaticLazyLoader.value) { emitShowMoreOnScrollEnd(); } else { onContainerScroll(); } }; const isSearchResultEmpty = computed(() => props.items?.length === 0); const shouldDisplayShowMoreButton = computed( () => props.lazyLoadType === BentoListboxLazyLoadType.BUTTON && props.hasMoreItems ); const loadingButtonState = computed(() => props.loading ? BentoLoadingButtonState.LOADING : BentoLoadingButtonState.START ); const showMoreButtonText = computed(() => (props.loading ? t('loading') : t('showMore'))); const limitedEmptyStateProps = computed<InstanceType<typeof BentoEmptyState>['$props']>(() => ({ ...props.emptyState, variant: 'condensed', })); const listboxListeners = { [BentoListboxEvent.SELECT]: onOptionSelected(BentoListboxEvent.SELECT), [BentoListboxEvent.SPACE]: onOptionSelected(BentoListboxEvent.SPACE), [BentoListboxEvent.TAB]: onOptionSelected(BentoListboxEvent.TAB), [BentoListboxEvent.ENTER]: onOptionSelected(BentoListboxEvent.ENTER), }; return { // Refs listboxRef, listboxItemRef, // a11y ariaAttributes, listboxContainerAttributes, // Values containerProps, isSearchResultEmpty, limitedEmptyStateProps, loadingButtonState, slots, shouldDisplayShowMoreButton, showMoreButtonText, virtualisedItems, wrapperProps, // Virtual scroll totalItemCount, scrollToIndex, virtualScrollStartIndex, // Enums BentoKeyboardNavigationKeyDownEvent, BentoListboxEvent, // Methods onListboxContainerScroll, onOptionSelected, emitShowMore, listboxListeners, }; }, }); </script> <style lang="scss" scoped src="./listbox.scss" /> 

package/dist/assets/components/internal/teleport/teleport.vue

@@ -1 +1 @@
-<!-- Taken from: https://github.com/Mechazawa/vue2-teleport/blob/master/src/Teleport.vue --> <template> <div v-if="isVue2" :class="classes"> <slot /> </div> <Teleport v-else :to="defaultTo" :where="where" :disabled="disabled" :class="classes"> <slot /> </Teleport> </template> <script setup lang="ts"> import { isVue2 } from 'vue-demi'; import { defineComponent, inject, type PropType } from 'vue'; import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys'; import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from '@/components/sidepanel/sidepanel.keys'; import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys'; import type { BentoTeleportProps } from './teleport.types'; </script> <script lang="ts"> export default defineComponent({ name: 'teleport', props: { to: { type: String as PropType<BentoTeleportProps['to']>, default: '', }, where: { type: String, default: 'after', }, disabled: Boolean as PropType<BentoTeleportProps['disabled']>, }, data: () => ({ childObserver: null, nodes: [], waiting: false, observer: null, parent: null, isVue2, }), computed: { classes() { if (this.disabled) { return ['b-teleport']; } return ['b-teleport', 'b-teleport--hidden']; }, defaultTo() { if (this.to) { return this.to; } const injectionKey = inject<string>(MODAL_DIALOG_ID_INJECTION_KEY, '') || inject<string>(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, '') || inject<string>(SIDEPANEL_DIALOG_ID_INJECTION_KEY, ''); const teleportElement = injectionKey ? `#${injectionKey}` : 'body'; return teleportElement; }, }, watch: { to: 'maybeMove', where: 'maybeMove', disabled(value) { if (value) { this.disable(); // Ensure all event done. this.$nextTick(() => { this.teardownObserver(); }); } else { this.bootObserver(); this.move(); } }, }, mounted() { // Store a reference to the nodes this.nodes = Array.from(this.$el.childNodes); if (!this.disabled) { this.bootObserver(); } // Move slot content to target this.maybeMove(); }, beforeDestroy() { // Fix nodes reference this.nodes = this.getComponentChildrenNode(); // Move back this.disable(); // Stop observing this.teardownObserver(); }, methods: { // Using a fragment is faster because it'll trigger only a single reflow // See https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment getFragment(): DocumentFragment { const fragment = document.createDocumentFragment(); this.nodes.forEach(node => fragment.appendChild(node)); return fragment; }, disable() { this.$el.appendChild(this.getFragment()); this.parent = null; }, move() { this.waiting = false; this.parent = document.querySelector(this.defaultTo); if (!this.parent) { this.disable(); this.waiting = true; return; } if (this.where === 'before') { this.parent.prepend(this.getFragment()); } else { this.parent.appendChild(this.getFragment()); } }, maybeMove() { if (!this.disabled) { this.move(); } }, onMutations(mutations) { // Makes sure the move operation is only done once let shouldMove = false; for (let i = 0; i < mutations.length; i++) { const mutation = mutations[i]; const filteredAddedNodes = Array.from(mutation.addedNodes).filter( node => !this.nodes.includes(node) ); if (Array.from(mutation.removedNodes).includes(this.parent)) { this.disable(); this.waiting = !this.disabled; } else if (this.waiting && filteredAddedNodes.length > 0) { shouldMove = true; } } if (shouldMove) { this.move(); } }, bootObserver() { if (this.observer) { return; } this.observer = new MutationObserver(mutations => this.onMutations(mutations)); this.observer.observe(document.body, { childList: true, subtree: true, attributes: false, characterData: false, }); if (this.childObserver) { return; } // watch childNodes change this.childObserver = new MutationObserver(mutations => { const childChangeRecord = mutations.find(i => i.target === this.$el); if (childChangeRecord) { // Remove old nodes before update position. this.nodes.forEach(node => node.parentNode && node.parentNode.removeChild(node)); this.nodes = this.getComponentChildrenNode(); this.maybeMove(); } }); this.childObserver.observe(this.$el, { childList: true, subtree: false, attributes: false, characterData: false, }); }, teardownObserver() { if (this.observer) { this.observer.disconnect(); this.observer = null; } if (this.childObserver) { this.childObserver.disconnect(); this.childObserver = null; } }, getComponentChildrenNode() { // Vue3 if (!isVue2) { return []; } // Trick for Vue3 type checking return (this as any).$vnode.componentOptions.children.map(i => i.elm).filter(i => i); }, }, }); </script> <style lang="scss" scoped src="./teleport.scss" /> 
+<!-- Taken from: https://github.com/Mechazawa/vue2-teleport/blob/master/src/Teleport.vue --> <template> <div v-if="isVue2" :class="classes"> <slot /> </div> <Teleport v-else :to="defaultTo" :where="where" :disabled="disabled" :class="classes"> <slot /> </Teleport> </template> <script setup lang="ts"> import { isVue2 } from 'vue-demi'; import { defineComponent, inject, type PropType } from 'vue'; import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys'; import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from '@/components/sidepanel/sidepanel.keys'; import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys'; import type { BentoTeleportProps } from './teleport.types'; </script> <script lang="ts"> export default defineComponent({ name: 'teleport', props: { to: { type: String as PropType<BentoTeleportProps['to']>, default: '', }, where: { type: String, default: 'after', }, disabled: Boolean as PropType<BentoTeleportProps['disabled']>, }, data: () => ({ childObserver: null, nodes: [], waiting: false, observer: null, parent: null, isVue2, }), computed: { classes() { if (this.disabled) { return ['b-teleport']; } return ['b-teleport', 'b-teleport--hidden']; }, defaultTo() { if (this.to) { return this.to; } const injectionKey = inject<string>(MODAL_DIALOG_ID_INJECTION_KEY, '') || inject<string>(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, '') || inject<string>(SIDEPANEL_DIALOG_ID_INJECTION_KEY, ''); const teleportElement = injectionKey ? `#${injectionKey}` : 'body'; return teleportElement; }, }, watch: { to: 'maybeMove', where: 'maybeMove', disabled(value) { if (!isVue2) { return; } if (value) { this.disable(); // Ensure all event done. this.$nextTick(() => { this.teardownObserver(); }); } else { this.bootObserver(); this.move(); } }, }, mounted() { // In Vue 3, the built-in <Teleport> handles DOM movement. // Manual DOM manipulation and MutationObservers must be skipped // to avoid conflicting with Vue 3's virtual DOM tracking. if (!isVue2) { return; } // Store a reference to the nodes this.nodes = Array.from(this.$el.childNodes); if (!this.disabled) { this.bootObserver(); } // Move slot content to target this.maybeMove(); }, beforeDestroy() { // In Vue 3, cleanup is not needed as the built-in <Teleport> manages its own lifecycle. if (!isVue2) { return; } // Fix nodes reference this.nodes = this.getComponentChildrenNode(); // Move back this.disable(); // Stop observing this.teardownObserver(); }, methods: { // Using a fragment is faster because it'll trigger only a single reflow // See https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment getFragment(): DocumentFragment { const fragment = document.createDocumentFragment(); this.nodes.forEach(node => fragment.appendChild(node)); return fragment; }, disable() { this.$el.appendChild(this.getFragment()); this.parent = null; }, move() { this.waiting = false; this.parent = document.querySelector(this.defaultTo); if (!this.parent) { this.disable(); this.waiting = true; return; } if (this.where === 'before') { this.parent.prepend(this.getFragment()); } else { this.parent.appendChild(this.getFragment()); } }, maybeMove() { if (!isVue2 || this.disabled) { return; } this.move(); }, onMutations(mutations) { // Makes sure the move operation is only done once let shouldMove = false; for (let i = 0; i < mutations.length; i++) { const mutation = mutations[i]; const filteredAddedNodes = Array.from(mutation.addedNodes).filter( node => !this.nodes.includes(node) ); if (Array.from(mutation.removedNodes).includes(this.parent)) { this.disable(); this.waiting = !this.disabled; } else if (this.waiting && filteredAddedNodes.length > 0) { shouldMove = true; } } if (shouldMove) { this.move(); } }, bootObserver() { if (this.observer) { return; } this.observer = new MutationObserver(mutations => this.onMutations(mutations)); this.observer.observe(document.body, { childList: true, subtree: true, attributes: false, characterData: false, }); if (this.childObserver) { return; } // watch childNodes change this.childObserver = new MutationObserver(mutations => { const childChangeRecord = mutations.find(i => i.target === this.$el); if (childChangeRecord) { // Remove old nodes before update position. this.nodes.forEach(node => node.parentNode && node.parentNode.removeChild(node)); this.nodes = this.getComponentChildrenNode(); this.maybeMove(); } }); this.childObserver.observe(this.$el, { childList: true, subtree: false, attributes: false, characterData: false, }); }, teardownObserver() { if (this.observer) { this.observer.disconnect(); this.observer = null; } if (this.childObserver) { this.childObserver.disconnect(); this.childObserver = null; } }, getComponentChildrenNode() { // Vue3 if (!isVue2) { return []; } // Trick for Vue3 type checking return (this as any).$vnode.componentOptions.children.map(i => i.elm).filter(i => i); }, }, }); </script> <style lang="scss" scoped src="./teleport.scss" /> 

package/dist/assets/components/link/link.types.ts

@@ -1 +1 @@
-import type { Location } from 'vue-router/types/router.d.ts'; // TODO: revert to import once fully migrated to Vue 3 // import type { RouterLinkProps } from 'vue-router/types/router.d.ts'; /** * Manually defined RouterLinkProps to ensure compatibility * with Vue Macros and Vue 2.7 / 3 monorepos. */ export interface RouterLinkProps { /** * Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to * `router.push()` internally, so the value can be either a string or a location descriptor object. */ to: string | Location; /** * Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will * not create a new history record. * * @default false */ replace?: boolean; /** * Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating * from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at * `/a/b`. * * @default false */ append?: boolean; /** * Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to * render to, and it will still listen to click events for navigation. * * @default "a" */ tag?: string; /** * Configure the active CSS class applied when the link is active. Note the default value can also be configured * globally via the `linkActiveClass` router constructor option. * * @default "router-link-active" */ activeClass?: string; /** * The default active class matching behavior is **inclusive match**. For example, `<RouterLink to="/a">` will get * this class applied as long as the current path starts with `/a/` or is `/a`. * * @default false */ exact?: boolean; /** * Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections. * * @default false */ exactPath?: boolean; /** * Configure the active CSS class applied when the link is active with exact path match. Note the default value can * also be configured globally via the `linkExactPathActiveClass` router constructor option. * * @default "router-link-exact-path-active" */ exactPathActiveClass?: string; /** * Specify the event(s) that can trigger the link navigation. * * @default 'click' */ event?: string | ReadonlyArray<string>; /** * Configure the active CSS class applied when the link is active with exact match. Note the default value can also be * configured globally via the `linkExactActiveClass` router constructor option. * * @default "router-link-exact-active" */ exactActiveClass?: string; /** * Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed * values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the * default of page should be the best fit. * * @default "page" */ ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'; } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoLinkVariant { DEFAULT = 'default', QUIET = 'quiet', } export type BentoLinkProps = RouterLinkProps & { /** * Disable the default typography for the component. Only use this when the component is inside another typography component. */ disableTypography?: boolean; /** * Set the rendered link to a regular external anchor link and renders an external link icon. */ external?: boolean; /** * Set to true if used inside a `BentoButton` component. */ isButton?: boolean; /** * Set the rendered link to a regular external anchor link. */ isNotRouting?: boolean; /** * Sets the target of the rendered link. */ target?: string; /** * Set to true to truncate link. Doesn't work with disableTypography. */ truncate?: boolean; /** * Link variant type affecting visual style. * @values default, quiet */ variant?: BentoLinkVariant | `${BentoLinkVariant}`; }; 
+import type { Location } from 'vue-router/types/router.d.ts'; // TODO: revert to import once fully migrated to Vue 3 // import type { RouterLinkProps } from 'vue-router/types/router.d.ts'; /** * Manually defined RouterLinkProps to ensure compatibility * with Vue Macros and Vue 2.7 / 3 monorepos. */ export interface RouterLinkProps { /** * Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to * `router.push()` internally, so the value can be either a string or a location descriptor object. */ to: string | Location; /** * Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will * not create a new history record. * * @default false */ replace?: boolean; /** * Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating * from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at * `/a/b`. * * @default false */ append?: boolean; /** * Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to * render to, and it will still listen to click events for navigation. * * @default "a" */ tag?: string; /** * Configure the active CSS class applied when the link is active. Note the default value can also be configured * globally via the `linkActiveClass` router constructor option. * * @default "router-link-active" */ activeClass?: string; /** * The default active class matching behavior is **inclusive match**. For example, `<RouterLink to="/a">` will get * this class applied as long as the current path starts with `/a/` or is `/a`. * * @default false */ exact?: boolean; /** * Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections. * * @default false */ exactPath?: boolean; /** * Configure the active CSS class applied when the link is active with exact path match. Note the default value can * also be configured globally via the `linkExactPathActiveClass` router constructor option. * * @default "router-link-exact-path-active" */ exactPathActiveClass?: string; /** * Specify the event(s) that can trigger the link navigation. * * @default 'click' */ event?: string | ReadonlyArray<string>; /** * Configure the active CSS class applied when the link is active with exact match. Note the default value can also be * configured globally via the `linkExactActiveClass` router constructor option. * * @default "router-link-exact-active" */ exactActiveClass?: string; /** * Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed * values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the * default of page should be the best fit. * * @default "page" */ ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'; } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoLinkVariant { DEFAULT = 'default', QUIET = 'quiet', } export type BentoLinkProps = RouterLinkProps & { /** * Disable the default typography for the component. Only use this when the component is inside another typography component. */ disableTypography?: boolean; /** * Set the rendered link to a regular external anchor link and renders an external link icon. */ external?: boolean; /** * Set to true if used inside a `BentoButton` component. */ isButton?: boolean; /** * Set the rendered link to a regular external anchor link. */ isNotRouting?: boolean; /** * Sets the target of the rendered link. */ target?: string; /** * Set to true to truncate link. Doesn't work with disableTypography. */ truncate?: boolean; /** * Link variant type affecting visual style. * @values default, quiet */ variant?: BentoLinkVariant | `${BentoLinkVariant}`; }; 

package/dist/assets/components/menu/menu.types.ts

@@ -1 +1 @@
-import { type OnClickOutsideOptions } from '@/directives/click-outside/types'; import { PopperContainerPosition } from '../popper-container/popper-container.types'; import { type BentoMenuItem } from './components/menu-item/menu-item.types'; import { type HTMLAttributes } from 'vue'; import { type BentoButtonProps } from '../button/button.types'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ const BentoMenuPositions = { ...PopperContainerPosition }; type BentoMenuPositions = PopperContainerPosition; export type * from './components/menu-item/menu-item.types'; export enum BentoMenuEvent { BACK = 'back', CLOSE = 'close', OPEN = 'open', } export interface BentoMenuButtonProps { 'aria-label'?: HTMLAttributes['aria-label']; condensed?: boolean; disabled?: boolean; variant?: BentoButtonProps['variant']; } export interface BentoMenuProps { /** * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton. */ button?: BentoMenuButtonProps; /** * Controls if the menu should close when an item is clicked. * Defaults to `true`. */ closeMenuOnItemSelect?: boolean; /** * The data to be displayed in the list */ data: Array<BentoMenuItem>; /** * Disables opening the menu when the down arrow key is pressed. */ disableArrowDownOpeningMenu?: boolean; /** * The position of where the menu should open. */ menuPosition?: BentoMenuPositions | `${BentoMenuPositions}`; /** * Instructs the menu popover to be visible outside of the containing container. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ menuFixedPositioning?: boolean; /** * Sets a custom width for the menu popover. Values are clamped between 150 - 350. */ menuWidth?: number; /** * Returns focus to the menu button after popover is closed. * Disable if focus management is delegated to the parent component. * Defaults to `true`. */ revertFocusToButton?: boolean; /** * Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node * (or `dialog` if popover is inside a dialog). */ teleport?: boolean; /** * Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node * (or `dialog` if popover is inside a dialog). * * @see {@link OnClickOutsideOptions} */ closeOnClickOutsideOptions?: OnClickOutsideOptions; } 
+import { type OnClickOutsideOptions } from '@/directives/click-outside/types'; import { PopperContainerPosition } from '../popper-container/popper-container.types'; import { type BentoMenuItem } from './components/menu-item/menu-item.types'; import { type HTMLAttributes } from 'vue'; import { type BentoButtonProps } from '../button/button.types'; /** * @deprecated Since v2.0.0. Use string literal instead. */ const BentoMenuPositions = { ...PopperContainerPosition }; type BentoMenuPositions = PopperContainerPosition; export type * from './components/menu-item/menu-item.types'; export enum BentoMenuEvent { BACK = 'back', CLOSE = 'close', OPEN = 'open', } export interface BentoMenuButtonProps { 'aria-label'?: HTMLAttributes['aria-label']; condensed?: boolean; disabled?: boolean; variant?: BentoButtonProps['variant']; } export interface BentoMenuProps { /** * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton. */ button?: BentoMenuButtonProps; /** * Controls if the menu should close when an item is clicked. * Defaults to `true`. */ closeMenuOnItemSelect?: boolean; /** * The data to be displayed in the list */ data: Array<BentoMenuItem>; /** * Disables opening the menu when the down arrow key is pressed. */ disableArrowDownOpeningMenu?: boolean; /** * The position of where the menu should open. */ menuPosition?: BentoMenuPositions | `${BentoMenuPositions}`; /** * Instructs the menu popover to be visible outside of the containing container. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ menuFixedPositioning?: boolean; /** * Sets a custom width for the menu popover. Values are clamped between 150 - 350. */ menuWidth?: number; /** * Returns focus to the menu button after popover is closed. * Disable if focus management is delegated to the parent component. * Defaults to `true`. */ revertFocusToButton?: boolean; /** * Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node * (or `dialog` if popover is inside a dialog). */ teleport?: boolean; /** * Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node * (or `dialog` if popover is inside a dialog). * * @see {@link OnClickOutsideOptions} */ closeOnClickOutsideOptions?: OnClickOutsideOptions; } 

package/dist/assets/components/menu/menu.vue

@@ -1 +1 @@
-<template> <div :class="computedClasses" class="b-menu" data-testid="menu" @keydown.down="onKeyDown" @keydown.up="onKeyUp" @keydown.esc="closeMenu()" > <bento-toggle-button ref="menuButtonRef" class="b-menu__toggle-button" aria-haspopup="true" v-bind="computedButtonPropsWithDefaults" :aria-controls="showMenu ? menuId : null" :toggled="showMenu" :inverse="isInverseColorSet" @click="toggleShowMenu" > <template v-if="!hasSlot('default') || hasSlot('iconLeft')" #iconLeft> <slot name="iconLeft"> <options-vertical-icon :title="t('menuButton')" /> </slot> </template> <template v-if="hasSlot('default')" #default> <slot /> </template> <template v-if="hasSlot('default')" #iconRight> <chevron-down-icon /> </template> </bento-toggle-button> <bento-teleport v-if="menuButtonRef" :disabled="!teleport"> <bento-popover v-if="menuButtonRef" :id="menuId" ref="popoverRef" :role="null" :open="showMenu" class="b-menu__popover" :style="computedMenuWidth" :target-element="menuButtonRef" :position="menuPosition" :fixed-positioning="menuFixedPositioning" :fallback-position="[ 'bottom-start', 'bottom-end', 'top-start', 'top-end', 'right-start', 'right-end', 'left-start', 'left-end', ]" :teleport="teleport" without-space > <menu-item-list ref="menuItemListRef" :close-menu-on-item-select="closeMenuOnItemSelect" :data="data" :focus-last-element="isLastElementFocused" :popover-width="menuWidth" @close="closeMenu" @menu-item-click="menuItemClick" /> </bento-popover> </bento-teleport> </div> </template> <script setup lang="ts"> import BentoToggleButton from '@/components/button/components/toggle-button/toggle-button.vue'; import { DIVIDER_INVERSE_INJECTION_KEY } from '@/components/divider/divider.keys'; import BentoPopover from '@/components/popover/popover.vue'; import { useClickOutside, useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { BentoTeleport } from '@/internal/teleport'; import { useI18n } from '@/utils/ts/i18n'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down'; import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical'; import { computed, inject, nextTick, onMounted, provide, ref, useSlots } from 'vue'; import MenuItemList from './components/menu-item-list/menu-item-list.vue'; import { MENU_INVERSE_INJECTION_KEY } from './menu.keys'; import { clampMenuWidth } from './composables/use-dynamic-menu-size/use-dynamic-menu-size'; import { type BentoMenuButtonProps, BentoMenuEvent, type BentoMenuProps } from './menu.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoMenuProps>(), { button: () => ({ variant: 'secondary', }) as BentoMenuButtonProps, closeMenuOnItemSelect: true, disableArrowDownOpeningMenu: false, menuPosition: 'bottom-start', menuFixedPositioning: false, menuWidth: null, revertFocusToButton: true, teleport: false, closeOnClickOutsideOptions: undefined, }); const emit = defineEmits<{ (e: BentoMenuEvent.CLOSE): void; (e: BentoMenuEvent.OPEN): void; (e: 'menu-item-click'): void; (e: 'click-outside'): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const menuButtonRef = ref(null); const menuItemListRef = ref(null); const showMenu = ref(false); const isLastElementFocused = ref(false); const popoverRef = ref<HTMLElement>(null); const menuId = generateUid('menu'); const isInverseColorSet = inject(MENU_INVERSE_INJECTION_KEY, ref(false)); provide(DIVIDER_INVERSE_INJECTION_KEY, isInverseColorSet); const computedClasses = computed(() => ({ 'b-menu--inverse': isInverseColorSet.value, })); const computedMenuWidth = computed(() => props.menuWidth ? { width: `${clampMenuWidth(props.menuWidth)}px` } : null ); const computedButtonPropsWithDefaults = computed<BentoMenuButtonProps>(() => { if (!props?.button) { return undefined; } return { variant: 'secondary', ...props.button, }; }); const openMenu = () => { showMenu.value = true; emit(BentoMenuEvent.OPEN); }; const closeMenu = async (revertFocus = props.revertFocusToButton) => { if (!showMenu.value) { return; } showMenu.value = false; if (revertFocus) { // ensure that menu is closed and re-rendering is completed before focusing await nextTick(); menuButtonRef.value?.$el?.focus(); } emit(BentoMenuEvent.CLOSE); }; const toggleShowMenu = (e: MouseEvent) => { e.stopPropagation(); if (!showMenu.value) { openMenu(); } else { closeMenu(); } }; const onKeyDown = (event: KeyboardEvent) => { event.preventDefault(); isLastElementFocused.value = false; if (!props.disableArrowDownOpeningMenu) { openMenu(); } }; const onKeyUp = (event: KeyboardEvent) => { event.preventDefault(); isLastElementFocused.value = true; openMenu(); }; const menuItemClick = () => { emit('menu-item-click'); }; // Ignore the events inside the Button and the Popover useClickOutside( popoverRef, () => { closeMenu(); emit('click-outside'); }, { ...props.closeOnClickOutsideOptions, ignore: [menuButtonRef, ...(props.closeOnClickOutsideOptions?.ignore ?? [])], } ); defineExpose({ /** * Control to enable programmatic closing of the menu */ closeMenu, }); onMounted(() => { if (hasSlot('iconRight')) { printDevelopmentWarning( '"bento-menu" no longer supports the "iconRight" slot. The right-aligned icon is now fixed by design.' ); } }); </script> <script lang="ts"> /** * Menu component to render a series of buttons. Csan render nested submenus. * * @example * import { BentoMenu } from '@adyen/bento-vue2'; * * export default { * components: { BentoMenu }, * template: ` * <bento-menu * :data=[ * { text: 'Menu item text', handler: () => { some code here } }, * { text: 'Another menu item text', handler: () => { some other code here }, critical: true } * ] * /> * } */ export default { i18n: { messages }, name: 'bento-menu', }; </script> <style lang="scss" scoped src="./menu.scss" /> 
+<template> <div :class="computedClasses" class="b-menu" data-testid="menu" @keydown.down="onKeyDown" @keydown.up="onKeyUp" @keydown.esc="closeMenu()" > <bento-toggle-button ref="menuButtonRef" class="b-menu__toggle-button" aria-haspopup="true" v-bind="computedButtonPropsWithDefaults" :aria-controls="showMenu ? menuId : null" :toggled="showMenu" :inverse="isInverseColorSet" @click="toggleShowMenu" > <template v-if="!hasSlot('default') || hasSlot('iconLeft')" #iconLeft> <slot name="iconLeft"> <options-vertical-icon :svg-title="t('menuButton')" /> </slot> </template> <template v-if="hasSlot('default')" #default> <slot /> </template> <template v-if="hasSlot('default')" #iconRight> <chevron-down-icon /> </template> </bento-toggle-button> <bento-teleport v-if="menuButtonRef" :disabled="!teleport"> <bento-popover v-if="menuButtonRef" :id="menuId" ref="popoverRef" :role="null" :open="showMenu" class="b-menu__popover" :style="computedMenuWidth" :target-element="menuButtonRef" :position="menuPosition" :fixed-positioning="menuFixedPositioning" :fallback-position="[ 'bottom-start', 'bottom-end', 'top-start', 'top-end', 'right-start', 'right-end', 'left-start', 'left-end', ]" :teleport="teleport" without-space > <menu-item-list ref="menuItemListRef" :close-menu-on-item-select="closeMenuOnItemSelect" :data="data" :focus-last-element="isLastElementFocused" :popover-width="menuWidth" @close="closeMenu" @menu-item-click="menuItemClick" /> </bento-popover> </bento-teleport> </div> </template> <script setup lang="ts"> import BentoToggleButton from '@/components/button/components/toggle-button/toggle-button.vue'; import { DIVIDER_INVERSE_INJECTION_KEY } from '@/components/divider/divider.keys'; import BentoPopover from '@/components/popover/popover.vue'; import { useClickOutside, useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { BentoTeleport } from '@/internal/teleport'; import { useI18n } from '@/utils/ts/i18n'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down'; import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical'; import { computed, inject, nextTick, onMounted, provide, ref, useSlots } from 'vue'; import MenuItemList from './components/menu-item-list/menu-item-list.vue'; import { MENU_INVERSE_INJECTION_KEY } from './menu.keys'; import { clampMenuWidth } from './composables/use-dynamic-menu-size/use-dynamic-menu-size'; import { type BentoMenuButtonProps, BentoMenuEvent, type BentoMenuProps } from './menu.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoMenuProps>(), { button: () => ({ variant: 'secondary', }) as BentoMenuButtonProps, closeMenuOnItemSelect: true, disableArrowDownOpeningMenu: false, menuPosition: 'bottom-start', menuFixedPositioning: false, menuWidth: null, revertFocusToButton: true, teleport: false, closeOnClickOutsideOptions: undefined, }); const emit = defineEmits<{ (e: BentoMenuEvent.CLOSE): void; (e: BentoMenuEvent.OPEN): void; (e: 'menu-item-click'): void; (e: 'click-outside'): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const menuButtonRef = ref(null); const menuItemListRef = ref(null); const showMenu = ref(false); const isLastElementFocused = ref(false); const popoverRef = ref<HTMLElement>(null); const menuId = generateUid('menu'); const isInverseColorSet = inject(MENU_INVERSE_INJECTION_KEY, ref(false)); provide(DIVIDER_INVERSE_INJECTION_KEY, isInverseColorSet); const computedClasses = computed(() => ({ 'b-menu--inverse': isInverseColorSet.value, })); const computedMenuWidth = computed(() => props.menuWidth ? { width: `${clampMenuWidth(props.menuWidth)}px` } : null ); const computedButtonPropsWithDefaults = computed<BentoMenuButtonProps>(() => { if (!props?.button) { return undefined; } return { variant: 'secondary', ...props.button, }; }); const openMenu = () => { showMenu.value = true; emit(BentoMenuEvent.OPEN); }; const closeMenu = async (revertFocus = props.revertFocusToButton) => { if (!showMenu.value) { return; } showMenu.value = false; if (revertFocus) { // ensure that menu is closed and re-rendering is completed before focusing await nextTick(); menuButtonRef.value?.$el?.focus(); } emit(BentoMenuEvent.CLOSE); }; const toggleShowMenu = (e: MouseEvent) => { e.stopPropagation(); if (!showMenu.value) { openMenu(); } else { closeMenu(); } }; const onKeyDown = (event: KeyboardEvent) => { event.preventDefault(); isLastElementFocused.value = false; if (!props.disableArrowDownOpeningMenu) { openMenu(); } }; const onKeyUp = (event: KeyboardEvent) => { event.preventDefault(); isLastElementFocused.value = true; openMenu(); }; const menuItemClick = () => { emit('menu-item-click'); }; // Ignore the events inside the Button and the Popover useClickOutside( popoverRef, () => { closeMenu(); emit('click-outside'); }, { ...props.closeOnClickOutsideOptions, ignore: [menuButtonRef, ...(props.closeOnClickOutsideOptions?.ignore ?? [])], } ); defineExpose({ /** * Control to enable programmatic closing of the menu */ closeMenu, }); onMounted(() => { if (hasSlot('iconRight')) { printDevelopmentWarning( '"bento-menu" no longer supports the "iconRight" slot. The right-aligned icon is now fixed by design.' ); } }); </script> <script lang="ts"> /** * Menu component to render a series of buttons. Csan render nested submenus. * * @example * import { BentoMenu } from '@adyen/bento-vue2'; * * export default { * components: { BentoMenu }, * template: ` * <bento-menu * :data=[ * { text: 'Menu item text', handler: () => { some code here } }, * { text: 'Another menu item text', handler: () => { some other code here }, critical: true } * ] * /> * } */ export default { i18n: { messages }, name: 'bento-menu', }; </script> <style lang="scss" scoped src="./menu.scss" /> 

package/dist/assets/components/modal/modal.types.ts

@@ -1 +1 @@
-import { type ComputedRef, type Ref } from 'vue'; /** * Public */ /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalVariant { DEFAULT = 'default', DIALOG = 'dialog', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalVariantMapping { DEFAULT = 'BentoModalDefault', DIALOG = 'BentoModalDialog', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalSize { SMALL = 'small', MEDIUM = 'medium', LARGE = 'large', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalColumnLayoutVariant { SMALLER = 'smaller', EQUAL = 'equal', BIGGER = 'bigger', } export enum BentoModalRole { DIALOG = 'dialog', ALERT_DIALOG = 'alertdialog', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalDialogType { CONFIRMATION = 'confirmation', DESTRUCTIVE = 'destructive', INFO = 'info', ACKNOWLEDGEMENT = 'acknowledgement', } export enum BentoModalEvent { CLOSE_MODAL = 'close-modal', } /** * Private */ export interface BentoModalConfigData { activePage: Ref<string>; height: Ref<string>; isAnimationActive: Ref<boolean>; pageCustomPadding: Ref<string>; showCloseButton: ComputedRef<boolean>; size: Ref<BentoModalSize | `${BentoModalSize}`>; } 
+import { type ComputedRef, type Ref } from 'vue'; /** * Public */ /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoModalVariant { DEFAULT = 'default', DIALOG = 'dialog', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoModalVariantMapping { DEFAULT = 'BentoModalDefault', DIALOG = 'BentoModalDialog', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoModalSize { SMALL = 'small', MEDIUM = 'medium', LARGE = 'large', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoModalColumnLayoutVariant { SMALLER = 'smaller', EQUAL = 'equal', BIGGER = 'bigger', } export enum BentoModalRole { DIALOG = 'dialog', ALERT_DIALOG = 'alertdialog', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoModalDialogType { CONFIRMATION = 'confirmation', DESTRUCTIVE = 'destructive', INFO = 'info', ACKNOWLEDGEMENT = 'acknowledgement', } export enum BentoModalEvent { CLOSE_MODAL = 'close-modal', } /** * Private */ export interface BentoModalConfigData { activePage: Ref<string>; height: Ref<string>; isAnimationActive: Ref<boolean>; pageCustomPadding: Ref<string>; showCloseButton: ComputedRef<boolean>; size: Ref<BentoModalSize | `${BentoModalSize}`>; } 

package/dist/assets/components/modal/modal.vue

@@ -1 +1 @@
-<template> <component :is="computedVariant" class="b-modal" :is-open="isOpen" :actions="actions" :initially-open="initiallyOpen" v-bind="customProps" @close-modal="onCloseModal" @update:active-page="emit('update:active-page', $event)" > <template v-if="hasSlot('default')" #default> <slot></slot> </template> <template v-if="hasSlot('content-col-1')" #content-col-1><slot name="content-col-1"></slot></template> <template v-if="hasSlot('content-col-2')" #content-col-2><slot name="content-col-2"></slot></template> <template v-if="hasSlot('content')" #content><slot name="content"></slot></template> </component> </template> <script setup lang="ts"> import { computed, defineComponent, type PropType, useAttrs, useSlots, watch } from 'vue'; import { BentoModalColumnLayoutVariant, BentoModalDialogType, BentoModalSize, BentoModalVariant, BentoModalVariantMapping, } from './modal.types'; import { BentoModalDefault, BentoModalDialog } from '@/components/modal/components'; import { useHasSlot } from '@/composables'; import { type BentoButtonActionsList } from '@/components/button'; import { deprecate } from '@/utils/ts/deprecate'; const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500; type BentoModalVariantProp = BentoModalVariant | `${BentoModalVariant}` | `${BentoModalVariantMapping}`; const slots = useSlots(); const hasSlot = useHasSlot(slots); const attrs = useAttrs(); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emitted when the modal is closed */ (e: 'close-modal'); }>(); const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * Text label that is displayed left to the action buttons */ actionsLabel: { type: String, default: null }, /** * Text that will be displayed in the content section of Modal */ content: { type: String, default: null }, /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize: { type: String as PropType<BentoModalColumnLayoutVariant | `${BentoModalColumnLayoutVariant}`>, default: BentoModalColumnLayoutVariant.SMALLER, validator: (value: BentoModalColumnLayoutVariant) => Object.values(BentoModalColumnLayoutVariant).includes(value), }, /** * If provided, manages the padding of the whole modal container */ customPadding: { type: String, default: null }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false }, /** * Changes the visual styling of action buttons */ dialogType: { type: String as PropType<BentoModalDialogType | `${BentoModalDialogType}`>, default: BentoModalDialogType.CONFIRMATION, validator: (value: BentoModalDialogType) => Object.values(BentoModalDialogType).includes(value), }, /** * Hides a cross icon on the right side of the title */ hideCloseButton: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed without performing an action */ isDismissible: { type: Boolean, default: null }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, default: false, }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * Sets the width of the modal */ size: { type: String as PropType<BentoModalSize | `${BentoModalSize}`>, default: BentoModalSize.SMALL, validator: (value: BentoModalSize) => Object.values(BentoModalSize).includes(value), }, /** * Choose between default or dialog versions of modal */ variant: { type: String as PropType<BentoModalVariantProp>, default: 'default', validator: (value: BentoModalVariantProp) => Object.values<BentoModalVariantProp>(BentoModalVariant).includes(value) || Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(value), }, /** * If provided, renders the modal's content in a two-column layout an wth dividers separating its content */ withColumnLayout: { type: Boolean, default: false }, }); const computedVariant = computed(() => { if (Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(props.variant)) { return props.variant; } return BentoModalVariantMapping[props.variant.toUpperCase()]; }); const customProps = computed(() => computedVariant.value === BentoModalVariantMapping.DEFAULT ? { activePage: props.activePage, hideCloseButton: props.hideCloseButton, size: props.size, customPadding: props.customPadding, actionsLabel: props.actionsLabel, destructiveActions: props.destructiveActions, isDismissible: props.isDismissible ?? true, withColumnLayout: props.withColumnLayout, columnsSize: props.columnsSize, ...attrs, } : { activePage: props.activePage, dialogType: props.dialogType, content: props.content, isDismissible: props.isDismissible ?? false, ...attrs, } ); const onCloseModal = () => { emit('close-modal'); }; // If the first button is a loading button then close the modal have 0.5 seconds // if the state is changed to 'success'. watch( () => props.actions, () => { if (props.actions?.[0]?.state === 'success') { setTimeout(onCloseModal, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME); } } ); if (Object.keys(attrs).includes('overflow-visible')) { deprecate( 'BentoModal "overflow-visible" property', `"overflow-visible" property was made redundant. BentoModal can work correctly without the need to pass the propery. Remove the "overflow-visible" prop from BentoModal to remove this error.`, '2.0.0' ); } </script> <script lang="ts"> /** * Modal is a window that appear over any other page content * and focus user attention exclusively on one task or piece of * information at the moment. * * @example * import { BentoModal } from '@adyen/bento-vue2'; * * export default { * components: { BentoModal }, * template: ` * <bento-modal :isOpen="true"> * Title of the Modal * <template #content> * Mandatory content slot * </template> * </bento-modal> * ` * }; */ export default defineComponent({ components: { BentoModalDefault, BentoModalDialog }, }); </script> 
+<template> <component :is="computedVariant" class="b-modal" :is-open="isOpen" :actions="actions" :initially-open="initiallyOpen" v-bind="customProps" @close-modal="handleInternalClose" @update:active-page="emit('update:active-page', $event)" > <template v-if="hasSlot('default')" #default> <slot></slot> </template> <template v-if="hasSlot('content-col-1')" #content-col-1><slot name="content-col-1"></slot></template> <template v-if="hasSlot('content-col-2')" #content-col-2><slot name="content-col-2"></slot></template> <template v-if="hasSlot('content')" #content><slot name="content"></slot></template> </component> </template> <script setup lang="ts"> import { computed, defineComponent, type PropType, useAttrs, useSlots, watch } from 'vue'; import { BentoModalColumnLayoutVariant, BentoModalDialogType, BentoModalSize, BentoModalVariant, BentoModalVariantMapping, } from './modal.types'; import { BentoModalDefault, BentoModalDialog } from '@/components/modal/components'; import { useHasSlot } from '@/composables'; import { type BentoButtonActionsList } from '@/components/button'; import { deprecate } from '@/utils/ts/deprecate'; const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500; type BentoModalVariantProp = BentoModalVariant | `${BentoModalVariant}` | `${BentoModalVariantMapping}`; const slots = useSlots(); const hasSlot = useHasSlot(slots); const attrs = useAttrs(); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emitted when the modal is closed */ (e: 'close-modal'); }>(); const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * Text label that is displayed left to the action buttons */ actionsLabel: { type: String, default: null }, /** * Text that will be displayed in the content section of Modal */ content: { type: String, default: null }, /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize: { type: String as PropType<BentoModalColumnLayoutVariant | `${BentoModalColumnLayoutVariant}`>, default: BentoModalColumnLayoutVariant.SMALLER, validator: (value: BentoModalColumnLayoutVariant) => Object.values(BentoModalColumnLayoutVariant).includes(value), }, /** * If provided, manages the padding of the whole modal container */ customPadding: { type: String, default: null }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false }, /** * Changes the visual styling of action buttons */ dialogType: { type: String as PropType<BentoModalDialogType | `${BentoModalDialogType}`>, default: BentoModalDialogType.CONFIRMATION, validator: (value: BentoModalDialogType) => Object.values(BentoModalDialogType).includes(value), }, /** * Hides a cross icon on the right side of the title */ hideCloseButton: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed without performing an action */ isDismissible: { type: Boolean, default: null }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, default: false, }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * Sets the width of the modal */ size: { type: String as PropType<BentoModalSize | `${BentoModalSize}`>, default: BentoModalSize.SMALL, validator: (value: BentoModalSize) => Object.values(BentoModalSize).includes(value), }, /** * Choose between default or dialog versions of modal */ variant: { type: String as PropType<BentoModalVariantProp>, default: 'default', validator: (value: BentoModalVariantProp) => Object.values<BentoModalVariantProp>(BentoModalVariant).includes(value) || Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(value), }, /** * If provided, renders the modal's content in a two-column layout an wth dividers separating its content */ withColumnLayout: { type: Boolean, default: false }, }); const computedVariant = computed(() => { if (Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(props.variant)) { return props.variant; } return BentoModalVariantMapping[props.variant.toUpperCase()]; }); const customProps = computed(() => computedVariant.value === BentoModalVariantMapping.DEFAULT ? { activePage: props.activePage, hideCloseButton: props.hideCloseButton, size: props.size, customPadding: props.customPadding, actionsLabel: props.actionsLabel, destructiveActions: props.destructiveActions, isDismissible: props.isDismissible ?? true, withColumnLayout: props.withColumnLayout, columnsSize: props.columnsSize, ...attrs, } : { activePage: props.activePage, dialogType: props.dialogType, content: props.content, isDismissible: props.isDismissible ?? false, ...attrs, } ); const onCloseModal = () => { emit('close-modal'); }; const handleInternalClose = () => { // Only emit if the modal is still open to prevent double emission from animationend if (props.isOpen) { onCloseModal(); } }; // If the first button is a loading button then close the modal have 0.5 seconds // if the state is changed to 'success'. watch( () => props.actions, () => { if (props.actions?.[0]?.state === 'success') { setTimeout(onCloseModal, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME); } } ); if (Object.keys(attrs).includes('overflow-visible')) { deprecate( 'BentoModal "overflow-visible" property', `"overflow-visible" property was made redundant. BentoModal can work correctly without the need to pass the propery. Remove the "overflow-visible" prop from BentoModal to remove this error.`, '2.0.0' ); } </script> <script lang="ts"> /** * Modal is a window that appear over any other page content * and focus user attention exclusively on one task or piece of * information at the moment. * * @example * import { BentoModal } from '@adyen/bento-vue2'; * * export default { * components: { BentoModal }, * template: ` * <bento-modal :isOpen="true"> * Title of the Modal * <template #content> * Mandatory content slot * </template> * </bento-modal> * ` * }; */ export default defineComponent({ components: { BentoModalDefault, BentoModalDialog }, }); </script> 

package/dist/assets/components/pagination/pagination.types.ts

@@ -1 +1 @@
-export interface BentoPaginationProps { /** * A brief description of the purpose of the navigation (for a11y). * Omit the term "navigation", as the screen reader will read both the role and the contents of the label. * @deprecated from version 2.0.0. Use the aria-label attribute instead. */ ariaLabel?: string; /** * Use to determine if the pager has a "next page". */ hasNext?: boolean; /** * Toggles the visibility of the "results per page" part of the pagination component. */ hidePageSize?: boolean; /** * Hides the page selection dropdown and displays a static "Page X of Y" text instead. * Useful for very large datasets where rendering all page options would cause performance issues. */ hidePageSelection?: boolean; /* * Determines whether to hide the dropdown that allows users to change the number of results per page. * When set to `true`, the current `itemsPerPage` value is displayed as plain static text. * This prop only takes effect if `hidePageSize` is `false`. */ hidePageSizeSelection?: boolean; /** * The current page number of the pager. */ page?: number; /** * The size of the items the pager is paging through. */ size?: number; /** * The total number of items the pager is paging through. */ totalCount?: number; /** * Enables virtual scrolling on all dropdowns if set to true. */ virtualScroll?: boolean; /** * The predefined list of numeric options available in the 'results per page' selection dropdown. */ pageSizeItems?: Array<number>; } 
+export interface BentoPaginationProps { /** * A brief description of the purpose of the navigation (for a11y). * Omit the term "navigation", as the screen reader will read both the role and the contents of the label. * @deprecated Since v2.0.0. Use `aria-label` instead. */ ariaLabel?: string; /** * Use to determine if the pager has a "next page". */ hasNext?: boolean; /** * Toggles the visibility of the "results per page" part of the pagination component. */ hidePageSize?: boolean; /** * Hides the page selection dropdown and displays a static "Page X of Y" text instead. * Useful for very large datasets where rendering all page options would cause performance issues. */ hidePageSelection?: boolean; /* * Determines whether to hide the dropdown that allows users to change the number of results per page. * When set to `true`, the current `itemsPerPage` value is displayed as plain static text. * This prop only takes effect if `hidePageSize` is `false`. */ hidePageSizeSelection?: boolean; /** * The current page number of the pager. */ page?: number; /** * The size of the items the pager is paging through. */ size?: number; /** * The total number of items the pager is paging through. */ totalCount?: number; /** * Enables virtual scrolling on all dropdowns if set to true. */ virtualScroll?: boolean; /** * The predefined list of numeric options available in the 'results per page' selection dropdown. */ pageSizeItems?: Array<number>; } 

package/dist/assets/components/payment-method/payment-method.types.ts

@@ -1 +1 @@
-export interface BentoPaymentMethodProps { /** * The label describing to the payment method icon. * @default null */ label?: string; /** * Render payment method icon in a smaller size * @default false */ small?: boolean; /** * The type of payment method to display. * @default 'Unknowncard' */ type?: string; } /** * A collection of all payment method types. * Directly map to payment icon SVG name. * @deprecated This enum is no longer actively maintained and may not include all available payment types. For full compatibility, please use a string for the `type` property in `BentoPaymentMethodProps` instead. */ export enum BentoPaymentMethodType { CTP = 'ctp', P24_LOGO = 'P24_logo', /** * @deprecated This enum KEY is no longer valid please do not use it. * */ TOUCH__N_GO = "Touch 'N Go", ABSA = 'absa', ACB = 'acb', ACCEL = 'accel', ACH = 'ach', ACHCOLOMBIA = 'achcolombia', ADYEN = 'adyen', ADYEN_TEST_VOUCHER = 'adyen_test_voucher', AFFIN = 'affin', AFFIRM = 'affirm', AFTERPAY_B2B = 'afterpay_b2b', AFTERPAY_DEFAULT = 'afterpay_default', AFTERPAY_DIRECTDEBIT = 'afterpay_directdebit', AFTERPAYTOUCH = 'afterpaytouch', AFTERPAYTOUCH_POS = 'afterpaytouch_pos', AGRIBANK = 'agribank', AIRBANK = 'airbank', ALASKA_OPTION = 'alaska_option', ALASKAOPTION = 'alaskaoption', ALBELLIGIFTCARD = 'albelligiftcard', ALELO = 'alelo', ALFA_BANK = 'alfa_bank', ALFABANK = 'alfabank', ALFAMART = 'alfamart', ALIPAY = 'alipay', ALIPAY_CONNECT = 'alipay_connect', ALIPAY_HK = 'alipay_hk', ALIPAY_WAP = 'alipay_wap', ALPHA_BANK = 'alpha_bank', AMAZONPAY = 'amazonpay', AMBANK = 'ambank', AMEX = 'amex', AMEX_AMAZONPAY = 'amex_amazonpay', AMEX_APPLEPAY = 'amex_applepay', AMEX_SAMSUNGPAY = 'amex_samsungpay', ANDROIDPAY = 'androidpay', APPLEPAY = 'applepay', ARGENCARD = 'argencard', ASIAPAY = 'asiapay', ASIAPAY_CIMBCLICK = 'asiapay_cimbclick', ASIAPAY_M2U = 'asiapay_m2u', ASIAPAY_ONEPAY = 'asiapay_onepay', ASIAPAY_UNIONPAY = 'asiapay_unionpay', ATH = 'ath', ATM_BERSAMA = 'atm_bersama', ATOME = 'atome', AURA = 'aura', AUTOPAY = 'autopay', B2S = 'b2s', BABYGIFTCARD = 'babygiftcard', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ BACNET = 'Bacnet', BACS = 'bacs', BALANCEPLATFORM = 'balanceplatform', BALOTO = 'baloto', BANAMEX = 'banamex', BANCONACIONAL = 'bancoNacional', BANCO_BRADESCO = 'banco_bradesco', BANCODOBRASIL = 'bancodobrasil', BANESE = 'banese', BANESE_CARD_CREDIT = 'banese_card_credit', BANESE_CARD_DEBIT = 'banese_card_debit', BANESE_CARD_PREPAID = 'banese_card_prepaid', BANGKOK_BANK = 'bangkok_bank', BANK = 'bank', BANKTRANSFER = 'bankTransfer', BANKTRANSFER_AT = 'bankTransfer_AT', BANKTRANSFER_AU = 'bankTransfer_AU', BANKTRANSFER_BE = 'bankTransfer_BE', BANKTRANSFER_BG = 'bankTransfer_BG', BANKTRANSFER_CH = 'bankTransfer_CH', BANKTRANSFER_CY = 'bankTransfer_CY', BANKTRANSFER_DE = 'bankTransfer_DE', BANKTRANSFER_DK = 'bankTransfer_DK', BANKTRANSFER_ES = 'bankTransfer_ES', BANKTRANSFER_FI = 'bankTransfer_FI', BANKTRANSFER_FR = 'bankTransfer_FR', BANKTRANSFER_GB = 'bankTransfer_GB', BANKTRANSFER_HU = 'bankTransfer_HU', BANKTRANSFER_IBAN = 'bankTransfer_IBAN', BANKTRANSFER_IE = 'bankTransfer_IE', BANKTRANSFER_IT = 'bankTransfer_IT', BANKTRANSFER_LU = 'bankTransfer_LU', BANKTRANSFER_MT = 'bankTransfer_MT', BANKTRANSFER_MX = 'bankTransfer_MX', BANKTRANSFER_NL = 'bankTransfer_NL', BANKTRANSFER_NO = 'bankTransfer_NO', BANKTRANSFER_PL = 'bankTransfer_PL', BANKTRANSFER_PT = 'bankTransfer_PT', BANKTRANSFER_SE = 'bankTransfer_SE', BANKTRANSFER_SK = 'bankTransfer_SK', BANK_RU = 'bank_ru', BANKAXEPT = 'bankaxept', BANKISLAM = 'bankislam', BANORTE = 'banorte', BAPRO = 'bapro', BCA = 'bca', BCMC = 'bcmc', BCMC_MOBILE = 'bcmc_mobile', BCMC_MOBILE_QR = 'bcmc_mobile_QR', BCMC_MOBILE_APP = 'bcmc_mobile_app', BCP = 'bcp', BEAUTYCADEAUKAART = 'beautycadeaukaart', BENEFIT = 'benefit', BIDV = 'bidv', BIGC = 'bigc', BIJCADEAUCARD = 'bijcadeaucard', BIJCARD = 'bijcard', BIJENKORF = 'bijenkorf', BIJPOINTS = 'bijpoints', BIJVOUCHER = 'bijvoucher', BILL99 = 'bill99', BILLDESK_BILLDESK_162 = 'billdesk/billdesk_162', BILLDESK_BILLDESK_CUB = 'billdesk/billdesk_cub', BILLDESK_BILLDESK_HDF = 'billdesk/billdesk_hdf', BILLDESK_BILLDESK_ICI = 'billdesk/billdesk_ici', BILLDESK_BILLDESK_ONLINE = 'billdesk/billdesk_online', BILLDESK_BILLDESK_PNB = 'billdesk/billdesk_pnb', BILLDESK_BILLDESK_SBI = 'billdesk/billdesk_sbi', BILLDESK_BILLDESK_UPI = 'billdesk/billdesk_upi', BILLDESK_BILLDESK_UTI = 'billdesk/billdesk_uti', BILLDESK_BILLDESK_WALLET = 'billdesk/billdesk_wallet', BILLDESK_162 = 'billdesk_162', BILLDESK_CUB = 'billdesk_cub', BILLDESK_HDF = 'billdesk_hdf', BILLDESK_ICI = 'billdesk_ici', BILLDESK_ONLINE = 'billdesk_online', BILLDESK_SBI = 'billdesk_sbi', BILLDESK_UPI = 'billdesk_upi', BILLDESK_UTI = 'billdesk_uti', BILLDESK_WALLET = 'billdesk_wallet', BITCOIN = 'bitcoin', BLIK = 'blik', BLOEMENGIFTCARD = 'bloemengiftcard', BNI = 'bni', BOKU = 'boku', BOLETO = 'boleto', BOLETOBANCARIO = 'boletobancario', BOLETOBANCARIO_BANCODOBRASIL = 'boletobancario_bancodobrasil', BOLETOBANCARIO_BRADESCO = 'boletobancario_bradesco', BOLETOBANCARIO_HSBC = 'boletobancario_hsbc', BOLETOBANCARIO_ITAU = 'boletobancario_itau', BOLETOBANCARIO_SANTANDER = 'boletobancario_santander', BR_SCHEMES = 'br_schemes', BRADESCO = 'bradesco', BUALUANGIBANKING = 'bualuangibanking', BUNQ = 'bunq', C_BEDRIJFSFIETSPLAN = 'c_bedrijfsfietsplan', C_BYPHONE = 'c_byphone', C_CASH = 'c_cash', C_FACTUUR = 'c_factuur', C_INVOICE = 'c_invoice', C_KAUFPERRECHNUNG = 'c_kaufperrechnung', C_OPREKENING = 'c_oprekening', C_POS = 'c_pos', C_VORKASSE = 'c_vorkasse', CABAL = 'cabal', CARD = 'card', CARNET = 'carnet', CARTEBANCAIRE = 'cartebancaire', CASHCOM = 'cashcom', CASHCOMGIFTCARD = 'cashcomgiftcard', CASHTICKET = 'cashticket', CASHU = 'cashu', CB = 'cb', CCAVENUE = 'ccavenue', CELLULANT = 'cellulant', CEN_PAY = 'cen_pay', CENCOSUD = 'cencosud', CENTRAL = 'central', CENTRAL_FOOD_HALL = 'central_food_hall', CESKA = 'ceska', CHEQUEDEJENEUR = 'chequedejeneur', CIMB = 'cimb', CLEARPAY = 'clearpay', CLICKANDBUY = 'clickandbuy', COBROEXPRESS = 'cobroexpress', CODENSA = 'codensa', COSTES = 'costes', COSTESGIFTCARD = 'costesgiftcard', CREDIT_UNION = 'credit_union', CREDTODOS = 'credtodos', CSOB = 'csob', CU24 = 'cu24', CUP = 'cup', CUP_AMAZONPAY = 'cup_amazonpay', DANA = 'dana', DANKORT = 'dankort', DANSKEBANK = 'danskebank', DECADEAUKAART = 'decadeaukaart', DIEAERZTEBANK = 'dieaerztebank', DINEROMAIL = 'dineromail', DINERS = 'diners', DINNER = 'dinner', DIRECTEBANKING = 'directEbanking', DIRECTDEBIT = 'directdebit', DIRECTDEBIT_BR_BANCODOBRASIL = 'directdebit_BR_bancodobrasil', DIRECTDEBIT_BR_ITAU = 'directdebit_BR_itau', DIRECTDEBIT_GB = 'directdebit_GB', DIRECTDEBIT_NL = 'directdebit_NL', DISCOVER = 'discover', DISCOVER_AMAZONPAY = 'discover_amazonpay', DISCOVER_ANDROIDPAY = 'discover_androidpay', DISCOVER_APPLEPAY = 'discover_applepay', DK = 'dk', DOKU = 'doku', DOKU_ALFAMART = 'doku_alfamart', DOKU_BCA_KLIKPAY = 'doku_bca_klikpay', DOKU_BCA_VA = 'doku_bca_va', DOKU_BNI = 'doku_bni', DOKU_BNI_VA = 'doku_bni_va', DOKU_BRI_VA = 'doku_bri_va', DOKU_BRIEPAY = 'doku_briepay', DOKU_CIMB_VA = 'doku_cimb_va', DOKU_DANAMON_VA = 'doku_danamon_va', DOKU_INDOMARET = 'doku_indomaret', DOKU_MANDIRI_CLICKPAY = 'doku_mandiri_clickpay', DOKU_MANDIRI_VA = 'doku_mandiri_va', DOKU_OVO = 'doku_ovo', DOKU_PERMATA_ATM = 'doku_permata_atm', DOKU_PERMATA_LITE_ATM = 'doku_permata_lite_atm', DOKU_SINARMAS_VA = 'doku_sinarmas_va', DOKU_WALLET = 'doku_wallet', DONGABANK = 'dongabank', DOTPAY = 'dotpay', DOTPAY_1 = 'dotpay/1', DOTPAY_10 = 'dotpay/10', DOTPAY_11 = 'dotpay/11', DOTPAY_16 = 'dotpay/16', DOTPAY_2 = 'dotpay/2', DOTPAY_21 = 'dotpay/21', DOTPAY_24 = 'dotpay/24', DOTPAY_31 = 'dotpay/31', DOTPAY_32 = 'dotpay/32', DOTPAY_35 = 'dotpay/35', DOTPAY_36 = 'dotpay/36', DOTPAY_38 = 'dotpay/38', DOTPAY_4 = 'dotpay/4', DOTPAY_44 = 'dotpay/44', DOTPAY_45 = 'dotpay/45', DOTPAY_46 = 'dotpay/46', DOTPAY_48 = 'dotpay/48', DOTPAY_50 = 'dotpay/50', DOTPAY_51 = 'dotpay/51', DOTPAY_52 = 'dotpay/52', DOTPAY_55 = 'dotpay/55', DOTPAY_56 = 'dotpay/56', DOTPAY_58 = 'dotpay/58', DOTPAY_59 = 'dotpay/59', DOTPAY_6 = 'dotpay/6', DOTPAY_60 = 'dotpay/60', DOTPAY_65 = 'dotpay/65', DOTPAY_66 = 'dotpay/66', DOTPAY_68 = 'dotpay/68', DOTPAY_7 = 'dotpay/7', DOTPAY_70 = 'dotpay/70', DOTPAY_72 = 'dotpay/72', DOTPAY_73 = 'dotpay/73', DOTPAY_74 = 'dotpay/74', DOTPAY_75 = 'dotpay/75', DOTPAY_76 = 'dotpay/76', DOTPAY_80 = 'dotpay/80', DOTPAY_81 = 'dotpay/81', DOTPAY_83 = 'dotpay/83', DOTPAY_84 = 'dotpay/84', DOTPAY_87 = 'dotpay/87', DOTPAY_88 = 'dotpay/88', DOTPAY_89 = 'dotpay/89', DOTPAY_90 = 'dotpay/90', DOTPAY_91 = 'dotpay/91', DOTPAY_92 = 'dotpay/92', DOTPAY_93 = 'dotpay/93', DRAGONPAY = 'dragonpay', DRAGONPAY_CREDITS = 'dragonpay_credits', DRAGONPAY_EBANKING = 'dragonpay_ebanking', DRAGONPAY_EBANKING_BDO = 'dragonpay_ebanking/bdo', DRAGONPAY_EBANKING_BOG = 'dragonpay_ebanking/bog', DRAGONPAY_EBANKING_BPI = 'dragonpay_ebanking/bpi', DRAGONPAY_EBANKING_BPIB = 'dragonpay_ebanking/bpib', DRAGONPAY_EBANKING_CBC = 'dragonpay_ebanking/cbc', DRAGONPAY_EBANKING_DPAY = 'dragonpay_ebanking/dpay', DRAGONPAY_EBANKING_LBPA = 'dragonpay_ebanking/lbpa', DRAGONPAY_EBANKING_MBTC = 'dragonpay_ebanking/mbtc', DRAGONPAY_EBANKING_RCBC = 'dragonpay_ebanking/rcbc', DRAGONPAY_EBANKING_UBP = 'dragonpay_ebanking/ubp', DRAGONPAY_EBANKING_UCPB = 'dragonpay_ebanking/ucpb', DRAGONPAY_GCASH = 'dragonpay_gcash', DRAGONPAY_OTC_BANKING = 'dragonpay_otc_banking', DRAGONPAY_OTC_BANKING_BDOA = 'dragonpay_otc_banking/bdoa', DRAGONPAY_OTC_BANKING_BDRX = 'dragonpay_otc_banking/bdrx', DRAGONPAY_OTC_BANKING_BOGX = 'dragonpay_otc_banking/bogx', DRAGONPAY_OTC_BANKING_BPXB = 'dragonpay_otc_banking/bpxb', DRAGONPAY_OTC_BANKING_CBCX = 'dragonpay_otc_banking/cbcx', DRAGONPAY_OTC_BANKING_EWBX = 'dragonpay_otc_banking/ewbx', DRAGONPAY_OTC_BANKING_LBXB = 'dragonpay_otc_banking/lbxb', DRAGONPAY_OTC_BANKING_MBTX = 'dragonpay_otc_banking/mbtx', DRAGONPAY_OTC_BANKING_PNBB = 'dragonpay_otc_banking/pnbb', DRAGONPAY_OTC_BANKING_PNXB = 'dragonpay_otc_banking/pnxb', DRAGONPAY_OTC_BANKING_RCXB = 'dragonpay_otc_banking/rcxb', DRAGONPAY_OTC_BANKING_RSXB = 'dragonpay_otc_banking/rsxb', DRAGONPAY_OTC_BANKING_SBCA = 'dragonpay_otc_banking/sbca', DRAGONPAY_OTC_BANKING_SBCB = 'dragonpay_otc_banking/sbcb', DRAGONPAY_OTC_BANKING_UBXB = 'dragonpay_otc_banking/ubxb', DRAGONPAY_OTC_BANKING_UCXB = 'dragonpay_otc_banking/ucxb', DRAGONPAY_OTC_INTERNATIONAL = 'dragonpay_otc_international', DRAGONPAY_OTC_NON_BANKING = 'dragonpay_otc_non_banking', DRAGONPAY_OTC_NON_BANKING_BAYD = 'dragonpay_otc_non_banking/bayd', DRAGONPAY_OTC_NON_BANKING_CEBL = 'dragonpay_otc_non_banking/cebl', DRAGONPAY_OTC_NON_BANKING_CEBP = 'dragonpay_otc_non_banking/cebp', DRAGONPAY_OTC_NON_BANKING_ECPY = 'dragonpay_otc_non_banking/ecpy', DRAGONPAY_OTC_NON_BANKING_LBC = 'dragonpay_otc_non_banking/lbc', DRAGONPAY_OTC_NON_BANKING_MLH = 'dragonpay_otc_non_banking/mlh', DRAGONPAY_OTC_NON_BANKING_RDS = 'dragonpay_otc_non_banking/rds', DRAGONPAY_OTC_NON_BANKING_RLNT = 'dragonpay_otc_non_banking/rlnt', DRAGONPAY_OTC_NON_BANKING_SMR = 'dragonpay_otc_non_banking/smr', DRAGONPAY_OTC_PHILIPPINES = 'dragonpay_otc_philippines', DRAGONPAY_SEVENELEVEN = 'dragonpay_seveneleven', DUITNOWQR = 'duitnowqr', EAGLEEYE_VOUCHER = 'eagleeye_voucher', EASYBANK = 'easybank', EBANKING_FI = 'ebanking_FI', EBUCKS = 'ebucks', ECONTEXT_ATM = 'econtext_atm', ECONTEXT_ONLINE = 'econtext_online', ECONTEXT_SEVEN_ELEVEN = 'econtext_seven_eleven', ECONTEXT_STORES = 'econtext_stores', EDENRED_MEAL_VOUCHER = 'edenred_meal_voucher', EFECTIVO_BANCOMER = 'efectivo_bancomer', EFECTIVO_IXE = 'efectivo_ixe', EFECTY = 'efecty', EFTPOS = 'eftpos', EFTPOS_AUSTRALIA = 'eftpos_australia', EFTPOS_AUSTRALIA_CHQ = 'eftpos_australia_chq', EFTPOS_AUSTRALIA_SAV = 'eftpos_australia_sav', ELECTRON = 'electron', ELECTRON_AMAZONPAY = 'electron_amazonpay', ELECTRON_APPLEPAY = 'electron_applepay', ELECTRON_SAMSUNGPAY = 'electron_samsungpay', ELEKSNET = 'eleksnet', ELO = 'elo', ELO_AMAZONPAY = 'elo_amazonpay', ELO_APPLEPAY = 'elo_applepay', ELODEBIT_AMAZONPAY = 'elodebit_amazonpay', ELV = 'elv', ENETS = 'enets', ENTERCASH = 'entercash', ENTERCASH_200 = 'entercash/200', ENTERCASH_204 = 'entercash/204', ENTERCASH_205 = 'entercash/205', ENTERCASH_206 = 'entercash/206', ENTERCASH_207 = 'entercash/207', ENTERCASH_208 = 'entercash/208', ENTERCASH_209 = 'entercash/209', ENTERCASH_211 = 'entercash/211', ENTERCASH_213 = 'entercash/213', ENTERCASH_216 = 'entercash/216', ENTERCASH_231 = 'entercash/231', ENTERCASH_232 = 'entercash/232', ENTERCASH_233 = 'entercash/233', ENTERCASH_234 = 'entercash/234', ENTERCASH_235 = 'entercash/235', ENTERCASH_240 = 'entercash/240', ENTERCASH_260 = 'entercash/260', ENTERCASH_265 = 'entercash/265', ENTERCASH_500 = 'entercash/500', ENTERCASH_505 = 'entercash/505', ENTERCASH_550 = 'entercash/550', ENTERCASH_551 = 'entercash/551', ENTERCASH_552 = 'entercash/552', ENTERCASH_553 = 'entercash/553', ENTERCASH_554 = 'entercash/554', ENTERCASH_555 = 'entercash/555', ENTERCASH_556 = 'entercash/556', ENTERCASH_557 = 'entercash/557', ENTERCASH_640 = 'entercash/640', ENTERCASH_720 = 'entercash/720', ENTERCASH_721 = 'entercash/721', ENTERCASH_722 = 'entercash/722', ENTERCASH_723 = 'entercash/723', ENTERCASH_724 = 'entercash/724', ENTERCASH_750 = 'entercash/750', ENTERCASH_751 = 'entercash/751', ENTERCASH_752 = 'entercash/752', ENTERCASH_753 = 'entercash/753', ENTERCASH_940 = 'entercash/940', ENTERCASH_941 = 'entercash/941', ENTERCASH_942 = 'entercash/942', ENTERCASH_943 = 'entercash/943', ENTERTAINMENTCARD = 'entertainmentcard', EPAY = 'epay', EPS = 'eps', EPS_09350598_7BA4_4AFB_B706_843E49A64759 = 'eps/09350598-7ba4-4afb-b706-843e49a64759', EPS_1190C4D1_B37A_487E_9355_E0A067F54A9F = 'eps/1190c4d1-b37a-487e-9355-e0a067f54a9f', EPS_1D48E2F7_604C_4D1D_894E_170635D1A645 = 'eps/1d48e2f7-604c-4d1d-894e-170635d1a645', EPS_242209E6_A81F_48BC_9041_A31306CB153F = 'eps/242209e6-a81f-48bc-9041-a31306cb153f', EPS_25942CC9_617D_42A1_89BA_D1AB5A05770A = 'eps/25942cc9-617d-42a1-89ba-d1ab5a05770a', EPS_31659756_FB43_4094_AFD5_82980FF48750 = 'eps/31659756-fb43-4094-afd5-82980ff48750', EPS_33FDC41FC_3D3D_4EE3_A1FE_CD79CFD58EA3 = 'eps/33fdc41fc-3d3d-4ee3-a1fe-cd79cfd58ea3', EPS_3ED7DA63_0924_424C_A822_2A0DFAAADCE1 = 'eps/3ed7da63-0924-424c-a822-2a0dfaaadce1', EPS_3FDC41FC_3D3D_4EE3_A1FE_CD79CFD58EA3 = 'eps/3fdc41fc-3d3d-4ee3-a1fe-cd79cfd58ea3', EPS_43B3AF24_7969_4701_A7CE_1F9FC6EEF834 = 'eps/43b3af24-7969-4701-a7ce-1f9fc6eef834', EPS_43DCA1AB_4BA3_41AC_B672_5518362CDE54 = 'eps/43dca1ab-4ba3-41ac-b672-5518362cde54', EPS_479FF5D2_6F44_4921_9330_6BF6763806E9 = 'eps/479ff5d2-6f44-4921-9330-6bf6763806e9', EPS_4A0A975B_0594_4B40_9068_39F77B3A91F9 = 'eps/4a0a975b-0594-4b40-9068-39f77b3a91f9', EPS_52D9DF19_F5C5_401F_89D9_38A8B36AE721 = 'eps/52d9df19-f5c5-401f-89d9-38a8b36ae721', EPS_54016D9D_31B0_4DB3_9EAF_CF9FBC58EE81 = 'eps/54016d9d-31b0-4db3-9eaf-cf9fbc58ee81', EPS_64669764_E6FC_401C_8F3D_26E9169BA6FF = 'eps/64669764-e6fc-401c-8f3d-26e9169ba6ff', EPS_6765E225_A0DC_4481_9666_E26303D4F221 = 'eps/6765e225-a0dc-4481-9666-e26303d4f221', EPS_68DB503B_EA48_4681_814B_10FC74064F68 = 'eps/68db503b-ea48-4681-814b-10fc74064f68', EPS_69A67A81_7518_463F_8527_3F1128AF1F93 = 'eps/69a67a81-7518-463f-8527-3f1128af1f93', EPS_7217D822_470C_4768_B346_A440E8CB7096 = 'eps/7217d822-470c-4768-b346-a440e8cb7096', EPS_744D26DA_90C9_49EB_9A0B_9A7F1FA3A8D2 = 'eps/744d26da-90c9-49eb-9a0b-9a7f1fa3a8d2', EPS_84F468DC_37B4_44AA_8301_50A16F746464 = 'eps/84f468dc-37b4-44aa-8301-50a16f746464', EPS_880CC8C4_D723_49AB_8299_DC35EAFC9385 = 'eps/880cc8c4-d723-49ab-8299-dc35eafc9385', EPS_89C79DA1_1B75_41E2_9254_118F36231BBD = 'eps/89c79da1-1b75-41e2-9254-118f36231bbd', EPS_8B0BFEEA_FBB0_4337_B3A1_0E25C0F060FC = 'eps/8b0bfeea-fbb0-4337-b3a1-0e25c0f060fc', EPS_958D1CF8_0D2D_4B21_B1F2_8383BB9F243F = 'eps/958d1cf8-0d2d-4b21-b1f2-8383bb9f243f', EPS_9C92D29B_A898_488E_836F_E93B911F9A94 = 'eps/9c92d29b-a898-488e-836f-e93b911f9a94', EPS_A990A73B_3D6B_4D91_9B8A_856428089B34 = 'eps/a990a73b-3d6b-4d91-9b8a-856428089b34', EPS_AA1DE16A_223F_494F_90F0_01FCE9C065FB = 'eps/aa1de16a-223f-494f-90f0-01fce9c065fb', EPS_B3B1554F_C9AE_4396_A62F_BAFFB8A2DE1C = 'eps/b3b1554f-c9ae-4396-a62f-baffb8a2de1c', EPS_B42DD796_8BDA_4893_ACC2_DDFAE9C9CDB7 = 'eps/b42dd796-8bda-4893-acc2-ddfae9c9cdb7', EPS_BA7199CC_F057_42F2_9856_2378ABF21638 = 'eps/ba7199cc-f057-42f2-9856-2378abf21638', EPS_BB7D223A_17D5_48AF_A6EF_8A2BF5A4E5D9 = 'eps/bb7d223a-17d5-48af-a6ef-8a2bf5a4e5d9', EPS_BBD44F4D_609B_454E_8D5A_E0D1AC21F15A = 'eps/bbd44f4d-609b-454e-8d5a-e0d1ac21f15a', EPS_C522E299_479C_4134_849F_A6EF0399A6E0 = 'eps/c522e299-479c-4134-849f-a6ef0399a6e0', EPS_CC4A034E_F8A1_4CE4_A96B_1CD251AF03B5 = 'eps/cc4a034e-f8a1-4ce4-a96b-1cd251af03b5', EPS_D5639C17_0207_4D49_8708_922181135AD1 = 'eps/d5639c17-0207-4d49-8708-922181135ad1', EPS_D5D5B133_1C0D_4C08_B2BE_3C9B116DC326 = 'eps/d5d5b133-1c0d-4c08-b2be-3c9b116dc326', EPS_E15C6132_430F_415C_AC95_C127ECB49D55 = 'eps/e15c6132-430f-415c-ac95-c127ecb49d55', EPS_E2E97AAA_DE4C_4E18_9431_D99790773433 = 'eps/e2e97aaa-de4c-4e18-9431-d99790773433', EPS_E590EB4F_B805_43F7_86A0_4EA3F560B18F = 'eps/e590eb4f-b805-43f7-86a0-4ea3f560b18f', EPS_E6819E7A_F663_414B_92EC_CF7C82D2F4E5 = 'eps/e6819e7a-f663-414b-92ec-cf7c82d2f4e5', EPS_EE9FC487_EBE0_486C_8101_17DCE5141A67 = 'eps/ee9fc487-ebe0-486c-8101-17dce5141a67', EPS_EFF103E6_843D_48B7_A6E6_FBD88F511B11 = 'eps/eff103e6-843d-48b7-a6e6-fbd88f511b11', EPS_F848C582_1B94_4E13_B58E_B3A2C68A3FBA = 'eps/f848c582-1b94-4e13-b58e-b3a2c68a3fba', ESA_PAY = 'esa_pay', EXPERTGIFTCARD = 'expertgiftcard', FACILYPAY = 'facilypay', FACILYPAY_10X = 'facilypay_10x', FACILYPAY_12X = 'facilypay_12x', FACILYPAY_3X = 'facilypay_3x', FACILYPAY_4X = 'facilypay_4x', FACILYPAY_6X = 'facilypay_6x', FAKTURA = 'faktura', FAMILYMART = 'familymart', FASHIONCHEQUE = 'fashioncheque', FAWRY = 'fawry', FIO_BANKA = 'fio_banka', FIS_MAYORSGIFTCARD = 'fis_mayorsgiftcard', FLEUROP = 'fleurop', FLEUROPBLOEMENBON = 'fleuropbloemenbon', FONQ = 'fonq', FONQGIFTCARD = 'fonqgiftcard', FORBRUGSFORENINGEN = 'forbrugsforeningen', FORTIS = 'fortis', FPX = 'fpx', FPX_ABB = 'fpx_abb', FPX_ABMB = 'fpx_abmb', FPX_AMB = 'fpx_amb', FPX_BIMB = 'fpx_bimb', FPX_BKRM = 'fpx_bkrm', FPX_CIMBCLICKS = 'fpx_cimbclicks', FPX_HLB = 'fpx_hlb', FPX_MB2U = 'fpx_mb2u', FPX_OCBC = 'fpx_ocbc', FPX_PBB = 'fpx_pbb', FPX_RHB = 'fpx_rhb', FPX_SCB = 'fpx_scb', FPX_UOB = 'fpx_uob', FRIESLAND_BANK = 'friesland_bank', GALLGALL = 'gallgall', GARTNER = 'gartner', GCASH = 'gcash', GE = 'ge', GENERIC_BANKTRANSFER = 'generic_banktransfer', GENERIC_WALLET = 'generic_wallet', GENERICGIFTCARD = 'genericgiftcard', GIFTCARD = 'giftcard', GIFTFOR2CARD = 'giftfor2card', GIROCARD = 'girocard', GIROPAY = 'giropay', GIVEX = 'givex', GLOBE_GCASH = 'globe_gcash', GLOBEGCASH = 'globegcash', GOLDSMITHSCARD = 'goldsmithscard', GOOGLEPAY = 'googlepay', GOOGLEWALLET = 'googlewallet', GOPAY_WALLET = 'gopay_wallet', GRABPAY = 'grabpay', GRABPAY_MY = 'grabpay_MY', GRABPAY_PH = 'grabpay_PH', GRABPAY_SG = 'grabpay_SG', GRABPAY_TH = 'grabpay_TH', GRABPAY_POS = 'grabpay_pos', GRUPO_MUTUAL = 'grupo_mutual', HALLMARK = 'hallmark', HALLMARKCARD = 'hallmarkcard', HANDELSBAN = 'handelsban', HANDELSBANKEN = 'handelsbanken', HANSABANK = 'hansabank', HDFC = 'hdfc', HELM = 'helm', HIPER = 'hiper', HIPERCARD = 'hipercard', HMLINGERIE = 'hmlingerie', HOMEWORKS = 'homeworks', HONG_LEONG = 'hong_leong', HSBC = 'hsbc', HYPO_ALPE_ADRIA = 'hypo_alpe_adria', HYPO_LANDESBANK_VORARLBERG = 'hypo_landesbank_vorarlberg', HYPO_NOE_GRUPPE = 'hypo_noe_gruppe', HYPO_TIROL_BANK = 'hypo_tirol_bank', HYUNDAI_CARD = 'hyundai_card', IDEAL = 'ideal', IDEAL_0021 = 'ideal/0021', IDEAL_0031 = 'ideal/0031', IDEAL_0161 = 'ideal/0161', IDEAL_0511 = 'ideal/0511', IDEAL_0721 = 'ideal/0721', IDEAL_0751 = 'ideal/0751', IDEAL_0761 = 'ideal/0761', IDEAL_0771 = 'ideal/0771', IDEAL_0801 = 'ideal/0801', IDEAL_0802 = 'ideal/0802', IDEAL_0803 = 'ideal/0803', IDEAL_0804 = 'ideal/0804', IDEAL_0805 = 'ideal/0805', IDEAL_1151 = 'ideal/1151', IGIVE = 'igive', IKANO = 'ikano', IMMO_BANK = 'immo-bank', INICISINIPAY_ACCOUNTTRANSFER = 'inicisIniPay_accounttransfer', INICISINIPAY_CREDITCARD = 'inicisIniPay_creditcard', INICISMOBILE_ACCOUNTTRANSFER = 'inicisMobile_accounttransfer', INICISMOBILE_CREDITCARD = 'inicisMobile_creditcard', INICISMOBILE_MOBILEPHONE = 'inicisMobile_mobilephone', INICIS_CREDITCARD = 'inicis_creditcard', INTERAC = 'interac', INTERAC_AMAZONPAY = 'interac_amazonpay', INTERAC_APPLEPAY = 'interac_applepay', INTERAC_CARD = 'interac_card', INTERBANK = 'interbank', INTERLINK = 'interlink', IPAY = 'ipay', IPAY88 = 'ipay88', ISRACARD = 'isracard', ITAU = 'itau', IVR = 'ivr', IVRLANDLINE = 'ivrLandline', IVRMOBILE = 'ivrMobile', IXE = 'ixe', JCB = 'jcb', JCB_APPLEPAY = 'jcb_applepay', JUST_PAY = 'just_pay', KADOWERELD = 'kadowereld', KAKAOPAY = 'kakaopay', KAREN_MILLEN = 'karen_millen', KARENMILLEN = 'karenmillen', KARENMILLENGIFTCARD = 'karenmillengiftcard', KASIKORNBANK = 'kasikornbank', KCP_BANKTRANSFER = 'kcp_banktransfer', KCP_CREDITCARD = 'kcp_creditcard', KCP_PAYCO = 'kcp_payco', KLARNA_PAY_LATER = 'klarna-pay-later', KLARNA_PAY_NOW = 'klarna-pay-now', KLARNA_SLICE = 'klarna-slice', KLARNA = 'klarna', KLARNA_ACCOUNT = 'klarna_account', KLARNA_B2B = 'klarna_b2b', KLARNA_PAYNOW = 'klarna_paynow', KLARNAPAYMENTS = 'klarnapayments', KLARNAPAYMENTS_ACCOUNT = 'klarnapayments_account', KLARNAPAYMENTS_B2B = 'klarnapayments_b2b', KMART = 'kmart', KNET = 'knet', KONBINI = 'konbini', KOREAN_LOCAL_CARD = 'korean_local_card', KRUNGSRI_ATM = 'krungsri_atm', KRUNGTHAI = 'krungthai', KRUNSGRI = 'krunsgri', LASER = 'laser', LAWESON = 'laweson', LHV = 'lhv', LIANLIANPAY_ABC = 'lianlianpay_abc', LIANLIANPAY_BCM = 'lianlianpay_bcm', LIANLIANPAY_BEA = 'lianlianpay_bea', LIANLIANPAY_BOB = 'lianlianpay_bob', LIANLIANPAY_BOC = 'lianlianpay_boc', LIANLIANPAY_CCIB = 'lianlianpay_ccib', LIANLIANPAY_CCOB = 'lianlianpay_ccob', LIANLIANPAY_CEB = 'lianlianpay_ceb', LIANLIANPAY_CGB = 'lianlianpay_cgb', LIANLIANPAY_CMB = 'lianlianpay_cmb', LIANLIANPAY_CMBC = 'lianlianpay_cmbc', LIANLIANPAY_CREDITCARD = 'lianlianpay_creditcard', LIANLIANPAY_DEBITCARD = 'lianlianpay_debitcard', LIANLIANPAY_EBANKING = 'lianlianpay_ebanking', LIANLIANPAY_EBANKING_CREDIT_01020000 = 'lianlianpay_ebanking_credit/01020000', LIANLIANPAY_EBANKING_CREDIT_01030000 = 'lianlianpay_ebanking_credit/01030000', LIANLIANPAY_EBANKING_CREDIT_01040000 = 'lianlianpay_ebanking_credit/01040000', LIANLIANPAY_EBANKING_CREDIT_01050000 = 'lianlianpay_ebanking_credit/01050000', LIANLIANPAY_EBANKING_CREDIT_03010000 = 'lianlianpay_ebanking_credit/03010000', LIANLIANPAY_EBANKING_CREDIT_03020000 = 'lianlianpay_ebanking_credit/03020000', LIANLIANPAY_EBANKING_CREDIT_03030000 = 'lianlianpay_ebanking_credit/03030000', LIANLIANPAY_EBANKING_CREDIT_03040000 = 'lianlianpay_ebanking_credit/03040000', LIANLIANPAY_EBANKING_CREDIT_03050000 = 'lianlianpay_ebanking_credit/03050000', LIANLIANPAY_EBANKING_CREDIT_03060000 = 'lianlianpay_ebanking_credit/03060000', LIANLIANPAY_EBANKING_CREDIT_03070000 = 'lianlianpay_ebanking_credit/03070000', LIANLIANPAY_EBANKING_CREDIT_03080000 = 'lianlianpay_ebanking_credit/03080000', LIANLIANPAY_EBANKING_CREDIT_03100000 = 'lianlianpay_ebanking_credit/03100000', LIANLIANPAY_EBANKING_CREDIT_03200000 = 'lianlianpay_ebanking_credit/03200000', LIANLIANPAY_EBANKING_CREDIT_1000000 = 'lianlianpay_ebanking_credit/1000000', LIANLIANPAY_EBANKING_CREDIT_4031000 = 'lianlianpay_ebanking_credit/4031000', LIANLIANPAY_EBANKING_DEBIT_01020000 = 'lianlianpay_ebanking_debit/01020000', LIANLIANPAY_EBANKING_DEBIT_01030000 = 'lianlianpay_ebanking_debit/01030000', LIANLIANPAY_EBANKING_DEBIT_01040000 = 'lianlianpay_ebanking_debit/01040000', LIANLIANPAY_EBANKING_DEBIT_01050000 = 'lianlianpay_ebanking_debit/01050000', LIANLIANPAY_EBANKING_DEBIT_03010000 = 'lianlianpay_ebanking_debit/03010000', LIANLIANPAY_EBANKING_DEBIT_03020000 = 'lianlianpay_ebanking_debit/03020000', LIANLIANPAY_EBANKING_DEBIT_03030000 = 'lianlianpay_ebanking_debit/03030000', LIANLIANPAY_EBANKING_DEBIT_03040000 = 'lianlianpay_ebanking_debit/03040000', LIANLIANPAY_EBANKING_DEBIT_03050000 = 'lianlianpay_ebanking_debit/03050000', LIANLIANPAY_EBANKING_DEBIT_03060000 = 'lianlianpay_ebanking_debit/03060000', LIANLIANPAY_EBANKING_DEBIT_03070000 = 'lianlianpay_ebanking_debit/03070000', LIANLIANPAY_EBANKING_DEBIT_03080000 = 'lianlianpay_ebanking_debit/03080000', LIANLIANPAY_EBANKING_DEBIT_03100000 = 'lianlianpay_ebanking_debit/03100000', LIANLIANPAY_EBANKING_DEBIT_03200000 = 'lianlianpay_ebanking_debit/03200000', LIANLIANPAY_EBANKING_DEBIT_1000000 = 'lianlianpay_ebanking_debit/1000000', LIANLIANPAY_EBANKING_DEBIT_4031000 = 'lianlianpay_ebanking_debit/4031000', LIANLIANPAY_EBANKING_ENTERPRISE_01020000 = 'lianlianpay_ebanking_enterprise/01020000', LIANLIANPAY_EBANKING_ENTERPRISE_01030000 = 'lianlianpay_ebanking_enterprise/01030000', LIANLIANPAY_EBANKING_ENTERPRISE_01040000 = 'lianlianpay_ebanking_enterprise/01040000', LIANLIANPAY_EBANKING_ENTERPRISE_01050000 = 'lianlianpay_ebanking_enterprise/01050000', LIANLIANPAY_EBANKING_ENTERPRISE_03010000 = 'lianlianpay_ebanking_enterprise/03010000', LIANLIANPAY_EBANKING_ENTERPRISE_03020000 = 'lianlianpay_ebanking_enterprise/03020000', LIANLIANPAY_EBANKING_ENTERPRISE_03030000 = 'lianlianpay_ebanking_enterprise/03030000', LIANLIANPAY_EBANKING_ENTERPRISE_03040000 = 'lianlianpay_ebanking_enterprise/03040000', LIANLIANPAY_EBANKING_ENTERPRISE_03050000 = 'lianlianpay_ebanking_enterprise/03050000', LIANLIANPAY_EBANKING_ENTERPRISE_03060000 = 'lianlianpay_ebanking_enterprise/03060000', LIANLIANPAY_EBANKING_ENTERPRISE_03070000 = 'lianlianpay_ebanking_enterprise/03070000', LIANLIANPAY_EBANKING_ENTERPRISE_03080000 = 'lianlianpay_ebanking_enterprise/03080000', LIANLIANPAY_EBANKING_ENTERPRISE_03100000 = 'lianlianpay_ebanking_enterprise/03100000', LIANLIANPAY_EBANKING_ENTERPRISE_03200000 = 'lianlianpay_ebanking_enterprise/03200000', LIANLIANPAY_EBANKING_ENTERPRISE_1000000 = 'lianlianpay_ebanking_enterprise/1000000', LIANLIANPAY_EBANKING_ENTERPRISE_4031000 = 'lianlianpay_ebanking_enterprise/4031000', LIANLIANPAY_HXB = 'lianlianpay_hxb', LIANLIANPAY_ICBC = 'lianlianpay_icbc', LIANLIANPAY_PAB = 'lianlianpay_pab', LIANLIANPAY_PSBC = 'lianlianpay_psbc', LIANLIANPAY_SPDB = 'lianlianpay_spdb', LOODS5GIFTCARD = 'loods5giftcard', LOODS5PREPAIDCARD = 'loods5prepaidcard', M_PAY = 'm_pay', MADA = 'mada', MADA_CARD = 'mada_card', MAESTRO = 'maestro', MAESTRO_AMAZONPAY = 'maestro_amazonpay', MAESTRO_APPLEPAY = 'maestro_applepay', MAESTRO_SAMSUNGPAY = 'maestro_samsungpay', MAESTROUK = 'maestrouk', MANDIRI = 'mandiri', MAPPINWEBBCARD = 'mappinwebbcard', MARITIME = 'maritime', MASTERPASS = 'masterpass', MAYBANK = 'maybank', MAYORS = 'mayors', MB = 'mb', MBANK = 'mbank', MBWAY = 'mbway', MC = 'mc', MC_AMAZONPAY = 'mc_amazonpay', MC_ANDROIDPAY = 'mc_androidpay', MC_APPLEPAY = 'mc_applepay', MC_SAMSUNGPAY = 'mc_samsungpay', MEALVOUCHER_FR_GROUPEUP = 'mealVoucher_FR_groupeup', MEALVOUCHER_FR_NATIXIS = 'mealVoucher_FR_natixis', MEALVOUCHER_FR_SODEXO = 'mealVoucher_FR_sodexo', MERCADOPAGO = 'mercadopago', MINISTOP = 'ministop', MIR = 'mir', MOBILE_SUICA = 'mobile_suica', MOBILEPAY = 'mobilepay', MOLPAY = 'molpay', MOLPAY_A = 'molpay_a', MOLPAY_ABMB = 'molpay_abmb', MOLPAY_ACB = 'molpay_acb', MOLPAY_AFFIN_EPG = 'molpay_affin_epg', MOLPAY_AGRIBANK = 'molpay_agribank', MOLPAY_ALIPAY = 'molpay_alipay', MOLPAY_AMB = 'molpay_amb', MOLPAY_BANGKOKBANK = 'molpay_bangkokbank', MOLPAY_BANKGKOKBANK = 'molpay_bankgkokbank', MOLPAY_BANKISLAM = 'molpay_bankislam', MOLPAY_BIDV = 'molpay_bidv', MOLPAY_BKRM = 'molpay_bkrm', MOLPAY_BOOST = 'molpay_boost', MOLPAY_CASH = 'molpay_cash', MOLPAY_CIMB = 'molpay_cimb', MOLPAY_CIMB_VA = 'molpay_cimb_va', MOLPAY_DONGABANK = 'molpay_dongabank', MOLPAY_EBANKING_MY = 'molpay_ebanking_MY', MOLPAY_EBANKING_TH = 'molpay_ebanking_TH', MOLPAY_EBANKING_TH_MOLPAY_BANGKOKBANK = 'molpay_ebanking_TH/molpay_bangkokbank', MOLPAY_EBANKING_TH_MOLPAY_KBANK = 'molpay_ebanking_TH/molpay_kbank', MOLPAY_EBANKING_TH_MOLPAY_KRUNGSRIBANK = 'molpay_ebanking_TH/molpay_krungsribank', MOLPAY_EBANKING_TH_MOLPAY_KRUNGTHAIBANK = 'molpay_ebanking_TH/molpay_krungthaibank', MOLPAY_EBANKING_TH_MOLPAY_SIAMCOMMERCIALBANK = 'molpay_ebanking_TH/molpay_siamcommercialbank', MOLPAY_EBANKING_VN = 'molpay_ebanking_VN', MOLPAY_EBANKING_VN_VTCPAY_ACB = 'molpay_ebanking_VN/vtcpay-acb', MOLPAY_EBANKING_VN_VTCPAY_AGRIBANK = 'molpay_ebanking_VN/vtcpay-agribank', MOLPAY_EBANKING_VN_VTCPAY_BIDV = 'molpay_ebanking_VN/vtcpay-bidv', MOLPAY_EBANKING_VN_VTCPAY_DONGABANK = 'molpay_ebanking_VN/vtcpay-dongabank', MOLPAY_EBANKING_VN_VTCPAY_MARITIMEBANK = 'molpay_ebanking_VN/vtcpay-maritimebank', MOLPAY_EBANKING_VN_VTCPAY_MB = 'molpay_ebanking_VN/vtcpay-mb', MOLPAY_EBANKING_VN_VTCPAY_SACOMBANK = 'molpay_ebanking_VN/vtcpay-sacombank', MOLPAY_EBANKING_VN_VTCPAY_TECHCOMBANK = 'molpay_ebanking_VN/vtcpay-techcombank', MOLPAY_EBANKING_VN_VTCPAY_VIETCOMBANK = 'molpay_ebanking_VN/vtcpay-vietcombank', MOLPAY_EBANKING_VN_VTCPAY_VIETINBANK = 'molpay_ebanking_VN/vtcpay-vietinbank', MOLPAY_EBANKING_FPX_MY = 'molpay_ebanking_fpx_MY', MOLPAY_EBANKING_FPX_MY_FPX_ABB = 'molpay_ebanking_fpx_MY/fpx_abb', MOLPAY_EBANKING_FPX_MY_FPX_ABMB = 'molpay_ebanking_fpx_MY/fpx_abmb', MOLPAY_EBANKING_FPX_MY_FPX_AMB = 'molpay_ebanking_fpx_MY/fpx_amb', MOLPAY_EBANKING_FPX_MY_FPX_BIMB = 'molpay_ebanking_fpx_MY/fpx_bimb', MOLPAY_EBANKING_FPX_MY_FPX_BKRM = 'molpay_ebanking_fpx_MY/fpx_bkrm', MOLPAY_EBANKING_FPX_MY_FPX_BMMB = 'molpay_ebanking_fpx_MY/fpx_bmmb', MOLPAY_EBANKING_FPX_MY_FPX_BSN = 'molpay_ebanking_fpx_MY/fpx_bsn', MOLPAY_EBANKING_FPX_MY_FPX_CIMBCLICKS = 'molpay_ebanking_fpx_MY/fpx_cimbclicks', MOLPAY_EBANKING_FPX_MY_FPX_HLB = 'molpay_ebanking_fpx_MY/fpx_hlb', MOLPAY_EBANKING_FPX_MY_FPX_HSBC = 'molpay_ebanking_fpx_MY/fpx_hsbc', MOLPAY_EBANKING_FPX_MY_FPX_KFH = 'molpay_ebanking_fpx_MY/fpx_kfh', MOLPAY_EBANKING_FPX_MY_FPX_MB2U = 'molpay_ebanking_fpx_MY/fpx_mb2u', MOLPAY_EBANKING_FPX_MY_FPX_OCBC = 'molpay_ebanking_fpx_MY/fpx_ocbc', MOLPAY_EBANKING_FPX_MY_FPX_PBB = 'molpay_ebanking_fpx_MY/fpx_pbb', MOLPAY_EBANKING_FPX_MY_FPX_RHB = 'molpay_ebanking_fpx_MY/fpx_rhb', MOLPAY_EBANKING_FPX_MY_FPX_SCB = 'molpay_ebanking_fpx_MY/fpx_scb', MOLPAY_EBANKING_FPX_MY_FPX_UOB = 'molpay_ebanking_fpx_MY/fpx_uob', MOLPAY_ENETSD = 'molpay_enetsd', MOLPAY_EPAY = 'molpay_epay', MOLPAY_ESAPAY = 'molpay_esapay', MOLPAY_FPX = 'molpay_fpx', MOLPAY_HLB = 'molpay_hlb', MOLPAY_KBANK = 'molpay_kbank', MOLPAY_KRUNGSRIBANK = 'molpay_krungsribank', MOLPAY_KRUNGTHAIBANK = 'molpay_krungthaibank', MOLPAY_MARITIMEBANK = 'molpay_maritimebank', MOLPAY_MAYBANK2U = 'molpay_maybank2u', MOLPAY_MB = 'molpay_mb', MOLPAY_NGANLUONG = 'molpay_nganluong', MOLPAY_OCBC = 'molpay_ocbc', MOLPAY_PAYLINK = 'molpay_paylink', MOLPAY_PAYSBUY = 'molpay_paysbuy', MOLPAY_POINTS = 'molpay_points', MOLPAY_PUBLICBANK = 'molpay_publicbank', MOLPAY_RHB = 'molpay_rhb', MOLPAY_SACOMBANK = 'molpay_sacombank', MOLPAY_SCB = 'molpay_scb', MOLPAY_SENHENG = 'molpay_senheng', MOLPAY_SIAMCOMMERCIALBANK = 'molpay_siamcommercialbank', MOLPAY_SINGPOST = 'molpay_singpost', MOLPAY_TECHCOMBANK = 'molpay_techcombank', MOLPAY_UOB = 'molpay_uob', MOLPAY_VIETCOMBANK = 'molpay_vietcombank', MOLPAY_VIETINBANK = 'molpay_vietinbank', MOLPAY_WALLET = 'molpay_wallet', MOMO_ATM = 'momo_atm', MOMO_WALLET = 'momo_wallet', MONETA = 'moneta', MONETA_CZ = 'moneta_cz', MONEYBOOKERS = 'moneybookers', MONEYMAIL = 'moneymail', MONEYOU = 'moneyou', MUCAP = 'mucap', MULA = 'mula', MULTIBANCO = 'multibanco', MULTICAJA = 'multicaja', MUSICALCARD = 'musicalcard', NAPS = 'naps', NARANJA = 'naranja', NATIONALEBIOSCOOPBON = 'nationalebioscoopbon', NATIONALETUINBON = 'nationaletuinbon', NATIONALEVERWENCADEAUBON = 'nationaleverwencadeaubon', NEDBANK = 'nedbank', NETAXEPT_BANKAXESS = 'netaxept_bankaxess', NETELLER = 'neteller', NETPLUS = 'netplus', NETS = 'nets', NETSCARD = 'netscard', NGANLUONG = 'nganluong', NOCARD = 'nocard', NORDEA = 'nordea', NYCE = 'nyce', OASIS = 'oasis', OASISGIFTCARD = 'oasisgiftcard', OBERTHUR = 'oberthur', OFFICE_MATE = 'office_mate', OMANNET = 'omannet', OMASP = 'omasp', ONEBIP = 'onebip', ONETWOTHREE = 'onetwothree', ONEY = 'oney', ONEY_CHIP = 'oney_chip', ONEY_POS = 'oney_pos', ONLINE_RU = 'online_RU', ONLINEBANKING_PL = 'onlineBanking_PL', OPENBANKING = 'openbanking', OPENBANKING_UK = 'openbanking_UK', OPENBANKING_UK_1 = 'openbanking_UK/1', OPENBANKING_UK_10 = 'openbanking_UK/10', OPENBANKING_UK_11 = 'openbanking_UK/11', OPENBANKING_UK_12 = 'openbanking_UK/12', OPENBANKING_UK_13 = 'openbanking_UK/13', OPENBANKING_UK_14 = 'openbanking_UK/14', OPENBANKING_UK_15 = 'openbanking_UK/15', OPENBANKING_UK_16 = 'openbanking_UK/16', OPENBANKING_UK_17 = 'openbanking_UK/17', OPENBANKING_UK_18 = 'openbanking_UK/18', OPENBANKING_UK_19 = 'openbanking_UK/19', OPENBANKING_UK_2 = 'openbanking_UK/2', OPENBANKING_UK_20 = 'openbanking_UK/20', OPENBANKING_UK_3 = 'openbanking_UK/3', OPENBANKING_UK_4 = 'openbanking_UK/4', OPENBANKING_UK_5 = 'openbanking_UK/5', OPENBANKING_UK_6 = 'openbanking_UK/6', OPENBANKING_UK_7 = 'openbanking_UK/7', OPENBANKING_UK_8 = 'openbanking_UK/8', OPENBANKING_UK_9 = 'openbanking_UK/9', OPENINVOICE = 'openinvoice', OXXO = 'oxxo', PAGOEFECTIVO = 'pagoefectivo', PAGOFACIL = 'pagofacil', PATHEGIFTCARD = 'pathegiftcard', PAY_EASY = 'pay_easy', PAY_POST = 'pay_post', PAY_U = 'pay_u', PAYBRIGHT = 'paybright', PAYBYBANK = 'paybybank', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_FIRSTTRUST = 'Paybybank_uk_Firsttrust', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_AIB = 'Paybybank_uk_aib', PAYBYBANK_UK_AMEX = 'paybybank_uk_amex', PAYBYBANK_UK_ARBUTHNOTLATHAM = 'paybybank_uk_arbuthnotlatham', PAYBYBANK_UK_BANKOFIRELAND = 'paybybank_uk_bankofireland', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_BANKOFSCOTLAND = 'Paybybank_uk_bankofscotland', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_BARCLAYS = 'Paybybank_uk_barclays', PAYBYBANK_UK_BBANK = 'paybybank_uk_bbank', PAYBYBANK_UK_C_HOARE_CO = 'paybybank_uk_c-hoare-co', PAYBYBANK_UK_CAPITALONE = 'paybybank_uk_capitalone', PAYBYBANK_UK_CASHPLUS = 'paybybank_uk_cashplus', PAYBYBANK_UK_CATERALLEN = 'paybybank_uk_caterallen', PAYBYBANK_UK_CLYDESDALE = 'paybybank_uk_clydesdale', PAYBYBANK_UK_COUTTS = 'paybybank_uk_coutts', PAYBYBANK_UK_CREATION = 'paybybank_uk_creation', PAYBYBANK_UK_CUMBERLAND = 'paybybank_uk_cumberland', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_DANSKEBANK = 'Paybybank_uk_danskebank', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_FIRSTDIRECT = 'Paybybank_uk_firstdirect', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_HALIFAX = 'Paybybank_uk_halifax', PAYBYBANK_UK_HANDELSBANKEN = 'paybybank_uk_handelsbanken', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_HSBC = 'Paybybank_uk_hsbc', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_LLOYDS = 'Paybybank_uk_lloyds', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_MONZO = 'Paybybank_uk_monzo', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_NATIONWIDE = 'Paybybank_uk_nationwide', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_NATWEST = 'Paybybank_uk_natwest', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_REVOLUT = 'Paybybank_uk_revolut', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_ROYALBANKOFSCOTLAND = 'Paybybank_uk_royalbankofscotland', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_SATANDER = 'Paybybank_uk_satander', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_STARLING = 'Paybybank_uk_starling', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_TSB = 'Paybybank_uk_tsb', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_ULSTERBANK = 'Paybybank_uk_ulsterbank', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_UTESCOBANK = 'Paybybank_uk_utescobank', PAYCO = 'payco', PAYEX = 'payex', PAYMAYA_WALLET = 'paymaya_wallet', PAYNOW = 'paynow', PAYPAL = 'paypal', PAYPAL_POS = 'paypal_pos', PAYSAFECARD = 'paysafecard', PAYSBUY = 'paysbuy', PAYSHOP = 'payshop', PAYTHRU = 'paythru', PAYTM = 'paytm', PAYTRAIL = 'paytrail', PAYU_IN = 'payu_IN', PAYU_IN_CASHCARD = 'payu_IN_cashcard', PAYU_IN_NB = 'payu_IN_nb', PAYU_IN_UPI = 'payu_IN_upi', PAYU_ZA_EFTPRO = 'payu_ZA_eftpro', PAYWITHGOOGLE = 'paywithgoogle', PERMATABANK = 'permatabank', PIX = 'pix', PLASTIX = 'plastix', PLATIKA = 'platika', PLUIMEN = 'pluimen', PLUIMGIFTCARD = 'pluimgiftcard', POCZTA_POLSKA = 'poczta_polska', PODIUMCARD = 'podiumcard', POLI = 'poli', POP_PANKKI = 'pop_pankki', POS = 'pos', POST_RUSSIA = 'post_russia', POSTBANK = 'postbank', POWER_BUY = 'power_buy', PPS = 'pps', PRIMEIROPAY_BOLETO = 'primeiropay_boleto', PROMPTPAY_QR = 'promptpay_qr', PROSODIE_ILLICADO = 'prosodie_illicado', PSB = 'psb', PSE = 'pse', PSE_PAYULATAM = 'pse_payulatam', PUBLIC_BANK = 'public_bank', PULSE = 'pulse', PULSE_PAY = 'pulse_pay', QBANK = 'qbank', QIWI = 'qiwi', QIWIWALLET = 'qiwiwallet', RAIFFEISEN = 'raiffeisen', RAKUTEN = 'rakuten', RAKUTEN_EDY = 'rakuten_edy', RAPIPAGO = 'rapipago', RATEPAY = 'ratepay', RATEPAY_DIRECTDEBIT = 'ratepay_directdebit', RAZER = 'razer', REDCOMPRA = 'redcompra', REGIOBANK = 'regiobank', RESTAURATIONHARDWARE_GIFTCART = 'restaurationhardware_giftcart', RESTORATIONHARDWARE = 'restorationhardware', RESURSBANK = 'resursbank', RESURSGIFTCARD = 'resursgiftcard', RHB = 'rhb', RISK = 'risk', RISPA = 'rispa', RITUALS = 'rituals', RIVIERAMAISONGIFTCARD = 'rivieramaisongiftcard', ROBINSON = 'robinson', ROMCARD = 'romcard', ROMCARD_CREDIT = 'romcard_credit', ROMCARD_DEBIT = 'romcard_debit', RSB = 'rsb', RUPAY = 'rupay', S_PANKKI = 's-pankki', SACOMBANK = 'sacombank', SAFETYPAY = 'safetypay', SAFETYPAY_CASH = 'safetypay_cash', SAMPO_PANKKI = 'sampo_pankki', SAMSUNGPAY = 'samsungpay', SANTANDER = 'santander', SARAIVA = 'saraiva', SBERBANK = 'sberbank', SCBEASY = 'scbeasy', SCOTIABANK = 'scotiabank', SEBDIRECTPAYMENT = 'sebdirectpayment', SEPA = 'sepa', SEPADIRECTDEBIT = 'sepadirectdebit', SEPADIRECTDEBIT_AMAZONPAY = 'sepadirectdebit_amazonpay', SEVENELEVEN = 'seveneleven', SF_CADEAU = 'sf_cadeau', SHAZAM = 'shazam', SHOPPING = 'shopping', SINARMAS = 'sinarmas', SINGAPORE_POST = 'singapore_post', SKANDIA = 'skandia', SKRILL = 'skrill', SMART = 'smart', SMARTMONEY = 'smartmoney', SMS = 'sms', SNS = 'sns', SODEXO = 'sodexo', SOFORT = 'sofort', SOLO = 'solo', SOROCRED = 'sorocred', SPARBANKEN = 'sparbanken', SPARDA_BANK = 'sparda-bank', SPAREBANK = 'sparebank', SPARKASSE = 'sparkasse', SPARNORD = 'sparnord', STANDARD_BANK = 'standard_bank', STAR = 'star', STORE = 'store', SUICA = 'suica', SVS = 'svs', SWEDBANK = 'swedbank', SWISH = 'swish', SWITCHDEVICE = 'switchdevice', SYNCHRONY = 'synchrony', SYNCHRONY_MERCHANT = 'synchrony/merchant', TAP = 'tap', TCSTESTGIFTCARD = 'tcstestgiftcard', TECHOM_BANK = 'techom_bank', TENPAY = 'tenpay', TERMINAL_RU = 'terminal_RU', TESCO = 'tesco', TESCO_LOTUS = 'tesco_lotus', THAI_WATSADU = 'thai_watsadu', THESTINGGIFTCARD = 'thestinggiftcard', TICKET = 'ticket', TMBINTERNETBANKING = 'tmbinternetbanking', TOPS_DAILY = 'tops_daily', TROY = 'troy', TRUSTLY = 'trustly', TRUSTPAY = 'trustpay', TWINT = 'twint', TWINT_POS = 'twint_pos', UBERCREDIT = 'ubercredit', UKASH = 'ukash', UNICREDIT = 'unicredit', UNIONPAY = 'unionpay', UNKNOWNCARD = 'unknowncard', UOB = 'uob', UOBDIRECTDEBIT = 'uobdirectdebit', UPI = 'upi', UPI_COLLECT = 'upi_collect', UPI_QR = 'upi_qr', VALE_REFEICAO = 'vale_refeicao', VALE_REFEICAO_PREPAID = 'vale_refeicao_prepaid', VALUELINK = 'valuelink', VIAS = 'vias', VIETCOMBANK = 'vietcombank', VIETINBANK = 'vietinbank', VIPPS = 'vipps', VIS_MAYORSGIFTCARD = 'vis_mayorsgiftcard', VISA = 'visa', VISA_AMAZONPAY = 'visa_amazonpay', VISA_ANDROIDPAY = 'visa_androidpay', VISA_APPLEPAY = 'visa_applepay', VISA_SAMSUNGPAY = 'visa_samsungpay', VISACHECKOUT = 'visacheckout', VISADANKORT = 'visadankort', VOLKSBANK = 'volksbank', VPAY = 'vpay', VR_BANK = 'vr_bank', VTCPAY_ACB = 'vtcpay-acb', VTCPAY_AGRIBANK = 'vtcpay-agribank', VTCPAY_BIDV = 'vtcpay-bidv', VTCPAY_DONGABANK = 'vtcpay-dongabank', VTCPAY_MARITIMEBANK = 'vtcpay-maritimebank', VTCPAY_MB = 'vtcpay-mb', VTCPAY_SACOMBANK = 'vtcpay-sacombank', VTCPAY_TECHCOMBANK = 'vtcpay-techcombank', VTCPAY_VIETCOMBANK = 'vtcpay-vietcombank', VTCPAY_VIETINBANK = 'vtcpay-vietinbank', VVVCADEAUBON = 'vvvcadeaubon', VVVGIFTCARD = 'vvvgiftcard', WALLET = 'wallet', WALLET_RU = 'wallet_RU', WALLET_RU_YANDEXMONEY = 'wallet_RU/yandexmoney', WALLIE = 'wallie', WAREHOUSE = 'warehouse', WAREHOUSEGIFTCARD = 'warehousegiftcard', WEBSHOPGIFTCARD = 'webshopgiftcard', WECHATPAY = 'wechatpay', WECHATPAYMINIPROGRAM = 'wechatpayMiniProgram', WECHATPAYQR = 'wechatpayQR', WECHATPAYSDK = 'wechatpaySDK', WECHATPAYWEB = 'wechatpayWeb', WECHATPAY_FULLBRAND = 'wechatpay_fullbrand', WECHATPAY_POS = 'wechatpay_pos', WEFASHIONGIFTCARD = 'wefashiongiftcard', WESTERNUNION = 'westernunion', WIJNCARD = 'wijncard', WINKELCHEQUE = 'winkelcheque', WOSCARD = 'woscard', XPONCARD = 'xponcard', YALO_PREPAID = 'yalo_prepaid', YANDEX = 'yandex', YANDEX_ALFACLICK = 'yandex_alfaclick', YANDEX_BANK_CARD = 'yandex_bank_card', YANDEX_CASH = 'yandex_cash', YANDEX_INSTALLMENTS = 'yandex_installments', YANDEX_PROMSVYAZBANK = 'yandex_promsvyazbank', YANDEX_QIWI = 'yandex_qiwi', YANDEX_SBERBANK = 'yandex_sberbank', YANDEX_WEBMONEY = 'yandex_webmoney', YANDEXMONEY = 'yandexmoney', YOURGIFT = 'yourgift', ZABKA = 'zabka', ZIP = 'zip', ZIP_POS = 'Zip_pos', } 
+export interface BentoPaymentMethodProps { /** * The label describing to the payment method icon. * @default null */ label?: string; /** * Render payment method icon in a smaller size * @default false */ small?: boolean; /** * The type of payment method to display. * @default 'Unknowncard' */ type?: string; } /** * A collection of all payment method types. * Directly map to payment icon SVG name. * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoPaymentMethodType { CTP = 'ctp', P24_LOGO = 'P24_logo', /** * @deprecated Since v2.0.0. Do not use. */ TOUCH__N_GO = "Touch 'N Go", ABSA = 'absa', ACB = 'acb', ACCEL = 'accel', ACH = 'ach', ACHCOLOMBIA = 'achcolombia', ADYEN = 'adyen', ADYEN_TEST_VOUCHER = 'adyen_test_voucher', AFFIN = 'affin', AFFIRM = 'affirm', AFTERPAY_B2B = 'afterpay_b2b', AFTERPAY_DEFAULT = 'afterpay_default', AFTERPAY_DIRECTDEBIT = 'afterpay_directdebit', AFTERPAYTOUCH = 'afterpaytouch', AFTERPAYTOUCH_POS = 'afterpaytouch_pos', AGRIBANK = 'agribank', AIRBANK = 'airbank', ALASKA_OPTION = 'alaska_option', ALASKAOPTION = 'alaskaoption', ALBELLIGIFTCARD = 'albelligiftcard', ALELO = 'alelo', ALFA_BANK = 'alfa_bank', ALFABANK = 'alfabank', ALFAMART = 'alfamart', ALIPAY = 'alipay', ALIPAY_CONNECT = 'alipay_connect', ALIPAY_HK = 'alipay_hk', ALIPAY_WAP = 'alipay_wap', ALPHA_BANK = 'alpha_bank', AMAZONPAY = 'amazonpay', AMBANK = 'ambank', AMEX = 'amex', AMEX_AMAZONPAY = 'amex_amazonpay', AMEX_APPLEPAY = 'amex_applepay', AMEX_SAMSUNGPAY = 'amex_samsungpay', ANDROIDPAY = 'androidpay', APPLEPAY = 'applepay', ARGENCARD = 'argencard', ASIAPAY = 'asiapay', ASIAPAY_CIMBCLICK = 'asiapay_cimbclick', ASIAPAY_M2U = 'asiapay_m2u', ASIAPAY_ONEPAY = 'asiapay_onepay', ASIAPAY_UNIONPAY = 'asiapay_unionpay', ATH = 'ath', ATM_BERSAMA = 'atm_bersama', ATOME = 'atome', AURA = 'aura', AUTOPAY = 'autopay', B2S = 'b2s', BABYGIFTCARD = 'babygiftcard', /** * @deprecated Since v2.0.0. Use string literal instead. */ BACNET = 'Bacnet', BACS = 'bacs', BALANCEPLATFORM = 'balanceplatform', BALOTO = 'baloto', BANAMEX = 'banamex', BANCONACIONAL = 'bancoNacional', BANCO_BRADESCO = 'banco_bradesco', BANCODOBRASIL = 'bancodobrasil', BANESE = 'banese', BANESE_CARD_CREDIT = 'banese_card_credit', BANESE_CARD_DEBIT = 'banese_card_debit', BANESE_CARD_PREPAID = 'banese_card_prepaid', BANGKOK_BANK = 'bangkok_bank', BANK = 'bank', BANKTRANSFER = 'bankTransfer', BANKTRANSFER_AT = 'bankTransfer_AT', BANKTRANSFER_AU = 'bankTransfer_AU', BANKTRANSFER_BE = 'bankTransfer_BE', BANKTRANSFER_BG = 'bankTransfer_BG', BANKTRANSFER_CH = 'bankTransfer_CH', BANKTRANSFER_CY = 'bankTransfer_CY', BANKTRANSFER_DE = 'bankTransfer_DE', BANKTRANSFER_DK = 'bankTransfer_DK', BANKTRANSFER_ES = 'bankTransfer_ES', BANKTRANSFER_FI = 'bankTransfer_FI', BANKTRANSFER_FR = 'bankTransfer_FR', BANKTRANSFER_GB = 'bankTransfer_GB', BANKTRANSFER_HU = 'bankTransfer_HU', BANKTRANSFER_IBAN = 'bankTransfer_IBAN', BANKTRANSFER_IE = 'bankTransfer_IE', BANKTRANSFER_IT = 'bankTransfer_IT', BANKTRANSFER_LU = 'bankTransfer_LU', BANKTRANSFER_MT = 'bankTransfer_MT', BANKTRANSFER_MX = 'bankTransfer_MX', BANKTRANSFER_NL = 'bankTransfer_NL', BANKTRANSFER_NO = 'bankTransfer_NO', BANKTRANSFER_PL = 'bankTransfer_PL', BANKTRANSFER_PT = 'bankTransfer_PT', BANKTRANSFER_SE = 'bankTransfer_SE', BANKTRANSFER_SK = 'bankTransfer_SK', BANK_RU = 'bank_ru', BANKAXEPT = 'bankaxept', BANKISLAM = 'bankislam', BANORTE = 'banorte', BAPRO = 'bapro', BCA = 'bca', BCMC = 'bcmc', BCMC_MOBILE = 'bcmc_mobile', BCMC_MOBILE_QR = 'bcmc_mobile_QR', BCMC_MOBILE_APP = 'bcmc_mobile_app', BCP = 'bcp', BEAUTYCADEAUKAART = 'beautycadeaukaart', BENEFIT = 'benefit', BIDV = 'bidv', BIGC = 'bigc', BIJCADEAUCARD = 'bijcadeaucard', BIJCARD = 'bijcard', BIJENKORF = 'bijenkorf', BIJPOINTS = 'bijpoints', BIJVOUCHER = 'bijvoucher', BILL99 = 'bill99', BILLDESK_BILLDESK_162 = 'billdesk/billdesk_162', BILLDESK_BILLDESK_CUB = 'billdesk/billdesk_cub', BILLDESK_BILLDESK_HDF = 'billdesk/billdesk_hdf', BILLDESK_BILLDESK_ICI = 'billdesk/billdesk_ici', BILLDESK_BILLDESK_ONLINE = 'billdesk/billdesk_online', BILLDESK_BILLDESK_PNB = 'billdesk/billdesk_pnb', BILLDESK_BILLDESK_SBI = 'billdesk/billdesk_sbi', BILLDESK_BILLDESK_UPI = 'billdesk/billdesk_upi', BILLDESK_BILLDESK_UTI = 'billdesk/billdesk_uti', BILLDESK_BILLDESK_WALLET = 'billdesk/billdesk_wallet', BILLDESK_162 = 'billdesk_162', BILLDESK_CUB = 'billdesk_cub', BILLDESK_HDF = 'billdesk_hdf', BILLDESK_ICI = 'billdesk_ici', BILLDESK_ONLINE = 'billdesk_online', BILLDESK_SBI = 'billdesk_sbi', BILLDESK_UPI = 'billdesk_upi', BILLDESK_UTI = 'billdesk_uti', BILLDESK_WALLET = 'billdesk_wallet', BITCOIN = 'bitcoin', BLIK = 'blik', BLOEMENGIFTCARD = 'bloemengiftcard', BNI = 'bni', BOKU = 'boku', BOLETO = 'boleto', BOLETOBANCARIO = 'boletobancario', BOLETOBANCARIO_BANCODOBRASIL = 'boletobancario_bancodobrasil', BOLETOBANCARIO_BRADESCO = 'boletobancario_bradesco', BOLETOBANCARIO_HSBC = 'boletobancario_hsbc', BOLETOBANCARIO_ITAU = 'boletobancario_itau', BOLETOBANCARIO_SANTANDER = 'boletobancario_santander', BR_SCHEMES = 'br_schemes', BRADESCO = 'bradesco', BUALUANGIBANKING = 'bualuangibanking', BUNQ = 'bunq', C_BEDRIJFSFIETSPLAN = 'c_bedrijfsfietsplan', C_BYPHONE = 'c_byphone', C_CASH = 'c_cash', C_FACTUUR = 'c_factuur', C_INVOICE = 'c_invoice', C_KAUFPERRECHNUNG = 'c_kaufperrechnung', C_OPREKENING = 'c_oprekening', C_POS = 'c_pos', C_VORKASSE = 'c_vorkasse', CABAL = 'cabal', CARD = 'card', CARNET = 'carnet', CARTEBANCAIRE = 'cartebancaire', CASHCOM = 'cashcom', CASHCOMGIFTCARD = 'cashcomgiftcard', CASHTICKET = 'cashticket', CASHU = 'cashu', CB = 'cb', CCAVENUE = 'ccavenue', CELLULANT = 'cellulant', CEN_PAY = 'cen_pay', CENCOSUD = 'cencosud', CENTRAL = 'central', CENTRAL_FOOD_HALL = 'central_food_hall', CESKA = 'ceska', CHEQUEDEJENEUR = 'chequedejeneur', CIMB = 'cimb', CLEARPAY = 'clearpay', CLICKANDBUY = 'clickandbuy', COBROEXPRESS = 'cobroexpress', CODENSA = 'codensa', COSTES = 'costes', COSTESGIFTCARD = 'costesgiftcard', CREDIT_UNION = 'credit_union', CREDTODOS = 'credtodos', CSOB = 'csob', CU24 = 'cu24', CUP = 'cup', CUP_AMAZONPAY = 'cup_amazonpay', DANA = 'dana', DANKORT = 'dankort', DANSKEBANK = 'danskebank', DECADEAUKAART = 'decadeaukaart', DIEAERZTEBANK = 'dieaerztebank', DINEROMAIL = 'dineromail', DINERS = 'diners', DINNER = 'dinner', DIRECTEBANKING = 'directEbanking', DIRECTDEBIT = 'directdebit', DIRECTDEBIT_BR_BANCODOBRASIL = 'directdebit_BR_bancodobrasil', DIRECTDEBIT_BR_ITAU = 'directdebit_BR_itau', DIRECTDEBIT_GB = 'directdebit_GB', DIRECTDEBIT_NL = 'directdebit_NL', DISCOVER = 'discover', DISCOVER_AMAZONPAY = 'discover_amazonpay', DISCOVER_ANDROIDPAY = 'discover_androidpay', DISCOVER_APPLEPAY = 'discover_applepay', DK = 'dk', DOKU = 'doku', DOKU_ALFAMART = 'doku_alfamart', DOKU_BCA_KLIKPAY = 'doku_bca_klikpay', DOKU_BCA_VA = 'doku_bca_va', DOKU_BNI = 'doku_bni', DOKU_BNI_VA = 'doku_bni_va', DOKU_BRI_VA = 'doku_bri_va', DOKU_BRIEPAY = 'doku_briepay', DOKU_CIMB_VA = 'doku_cimb_va', DOKU_DANAMON_VA = 'doku_danamon_va', DOKU_INDOMARET = 'doku_indomaret', DOKU_MANDIRI_CLICKPAY = 'doku_mandiri_clickpay', DOKU_MANDIRI_VA = 'doku_mandiri_va', DOKU_OVO = 'doku_ovo', DOKU_PERMATA_ATM = 'doku_permata_atm', DOKU_PERMATA_LITE_ATM = 'doku_permata_lite_atm', DOKU_SINARMAS_VA = 'doku_sinarmas_va', DOKU_WALLET = 'doku_wallet', DONGABANK = 'dongabank', DOTPAY = 'dotpay', DOTPAY_1 = 'dotpay/1', DOTPAY_10 = 'dotpay/10', DOTPAY_11 = 'dotpay/11', DOTPAY_16 = 'dotpay/16', DOTPAY_2 = 'dotpay/2', DOTPAY_21 = 'dotpay/21', DOTPAY_24 = 'dotpay/24', DOTPAY_31 = 'dotpay/31', DOTPAY_32 = 'dotpay/32', DOTPAY_35 = 'dotpay/35', DOTPAY_36 = 'dotpay/36', DOTPAY_38 = 'dotpay/38', DOTPAY_4 = 'dotpay/4', DOTPAY_44 = 'dotpay/44', DOTPAY_45 = 'dotpay/45', DOTPAY_46 = 'dotpay/46', DOTPAY_48 = 'dotpay/48', DOTPAY_50 = 'dotpay/50', DOTPAY_51 = 'dotpay/51', DOTPAY_52 = 'dotpay/52', DOTPAY_55 = 'dotpay/55', DOTPAY_56 = 'dotpay/56', DOTPAY_58 = 'dotpay/58', DOTPAY_59 = 'dotpay/59', DOTPAY_6 = 'dotpay/6', DOTPAY_60 = 'dotpay/60', DOTPAY_65 = 'dotpay/65', DOTPAY_66 = 'dotpay/66', DOTPAY_68 = 'dotpay/68', DOTPAY_7 = 'dotpay/7', DOTPAY_70 = 'dotpay/70', DOTPAY_72 = 'dotpay/72', DOTPAY_73 = 'dotpay/73', DOTPAY_74 = 'dotpay/74', DOTPAY_75 = 'dotpay/75', DOTPAY_76 = 'dotpay/76', DOTPAY_80 = 'dotpay/80', DOTPAY_81 = 'dotpay/81', DOTPAY_83 = 'dotpay/83', DOTPAY_84 = 'dotpay/84', DOTPAY_87 = 'dotpay/87', DOTPAY_88 = 'dotpay/88', DOTPAY_89 = 'dotpay/89', DOTPAY_90 = 'dotpay/90', DOTPAY_91 = 'dotpay/91', DOTPAY_92 = 'dotpay/92', DOTPAY_93 = 'dotpay/93', DRAGONPAY = 'dragonpay', DRAGONPAY_CREDITS = 'dragonpay_credits', DRAGONPAY_EBANKING = 'dragonpay_ebanking', DRAGONPAY_EBANKING_BDO = 'dragonpay_ebanking/bdo', DRAGONPAY_EBANKING_BOG = 'dragonpay_ebanking/bog', DRAGONPAY_EBANKING_BPI = 'dragonpay_ebanking/bpi', DRAGONPAY_EBANKING_BPIB = 'dragonpay_ebanking/bpib', DRAGONPAY_EBANKING_CBC = 'dragonpay_ebanking/cbc', DRAGONPAY_EBANKING_DPAY = 'dragonpay_ebanking/dpay', DRAGONPAY_EBANKING_LBPA = 'dragonpay_ebanking/lbpa', DRAGONPAY_EBANKING_MBTC = 'dragonpay_ebanking/mbtc', DRAGONPAY_EBANKING_RCBC = 'dragonpay_ebanking/rcbc', DRAGONPAY_EBANKING_UBP = 'dragonpay_ebanking/ubp', DRAGONPAY_EBANKING_UCPB = 'dragonpay_ebanking/ucpb', DRAGONPAY_GCASH = 'dragonpay_gcash', DRAGONPAY_OTC_BANKING = 'dragonpay_otc_banking', DRAGONPAY_OTC_BANKING_BDOA = 'dragonpay_otc_banking/bdoa', DRAGONPAY_OTC_BANKING_BDRX = 'dragonpay_otc_banking/bdrx', DRAGONPAY_OTC_BANKING_BOGX = 'dragonpay_otc_banking/bogx', DRAGONPAY_OTC_BANKING_BPXB = 'dragonpay_otc_banking/bpxb', DRAGONPAY_OTC_BANKING_CBCX = 'dragonpay_otc_banking/cbcx', DRAGONPAY_OTC_BANKING_EWBX = 'dragonpay_otc_banking/ewbx', DRAGONPAY_OTC_BANKING_LBXB = 'dragonpay_otc_banking/lbxb', DRAGONPAY_OTC_BANKING_MBTX = 'dragonpay_otc_banking/mbtx', DRAGONPAY_OTC_BANKING_PNBB = 'dragonpay_otc_banking/pnbb', DRAGONPAY_OTC_BANKING_PNXB = 'dragonpay_otc_banking/pnxb', DRAGONPAY_OTC_BANKING_RCXB = 'dragonpay_otc_banking/rcxb', DRAGONPAY_OTC_BANKING_RSXB = 'dragonpay_otc_banking/rsxb', DRAGONPAY_OTC_BANKING_SBCA = 'dragonpay_otc_banking/sbca', DRAGONPAY_OTC_BANKING_SBCB = 'dragonpay_otc_banking/sbcb', DRAGONPAY_OTC_BANKING_UBXB = 'dragonpay_otc_banking/ubxb', DRAGONPAY_OTC_BANKING_UCXB = 'dragonpay_otc_banking/ucxb', DRAGONPAY_OTC_INTERNATIONAL = 'dragonpay_otc_international', DRAGONPAY_OTC_NON_BANKING = 'dragonpay_otc_non_banking', DRAGONPAY_OTC_NON_BANKING_BAYD = 'dragonpay_otc_non_banking/bayd', DRAGONPAY_OTC_NON_BANKING_CEBL = 'dragonpay_otc_non_banking/cebl', DRAGONPAY_OTC_NON_BANKING_CEBP = 'dragonpay_otc_non_banking/cebp', DRAGONPAY_OTC_NON_BANKING_ECPY = 'dragonpay_otc_non_banking/ecpy', DRAGONPAY_OTC_NON_BANKING_LBC = 'dragonpay_otc_non_banking/lbc', DRAGONPAY_OTC_NON_BANKING_MLH = 'dragonpay_otc_non_banking/mlh', DRAGONPAY_OTC_NON_BANKING_RDS = 'dragonpay_otc_non_banking/rds', DRAGONPAY_OTC_NON_BANKING_RLNT = 'dragonpay_otc_non_banking/rlnt', DRAGONPAY_OTC_NON_BANKING_SMR = 'dragonpay_otc_non_banking/smr', DRAGONPAY_OTC_PHILIPPINES = 'dragonpay_otc_philippines', DRAGONPAY_SEVENELEVEN = 'dragonpay_seveneleven', DUITNOWQR = 'duitnowqr', EAGLEEYE_VOUCHER = 'eagleeye_voucher', EASYBANK = 'easybank', EBANKING_FI = 'ebanking_FI', EBUCKS = 'ebucks', ECONTEXT_ATM = 'econtext_atm', ECONTEXT_ONLINE = 'econtext_online', ECONTEXT_SEVEN_ELEVEN = 'econtext_seven_eleven', ECONTEXT_STORES = 'econtext_stores', EDENRED_MEAL_VOUCHER = 'edenred_meal_voucher', EFECTIVO_BANCOMER = 'efectivo_bancomer', EFECTIVO_IXE = 'efectivo_ixe', EFECTY = 'efecty', EFTPOS = 'eftpos', EFTPOS_AUSTRALIA = 'eftpos_australia', EFTPOS_AUSTRALIA_CHQ = 'eftpos_australia_chq', EFTPOS_AUSTRALIA_SAV = 'eftpos_australia_sav', ELECTRON = 'electron', ELECTRON_AMAZONPAY = 'electron_amazonpay', ELECTRON_APPLEPAY = 'electron_applepay', ELECTRON_SAMSUNGPAY = 'electron_samsungpay', ELEKSNET = 'eleksnet', ELO = 'elo', ELO_AMAZONPAY = 'elo_amazonpay', ELO_APPLEPAY = 'elo_applepay', ELODEBIT_AMAZONPAY = 'elodebit_amazonpay', ELV = 'elv', ENETS = 'enets', ENTERCASH = 'entercash', ENTERCASH_200 = 'entercash/200', ENTERCASH_204 = 'entercash/204', ENTERCASH_205 = 'entercash/205', ENTERCASH_206 = 'entercash/206', ENTERCASH_207 = 'entercash/207', ENTERCASH_208 = 'entercash/208', ENTERCASH_209 = 'entercash/209', ENTERCASH_211 = 'entercash/211', ENTERCASH_213 = 'entercash/213', ENTERCASH_216 = 'entercash/216', ENTERCASH_231 = 'entercash/231', ENTERCASH_232 = 'entercash/232', ENTERCASH_233 = 'entercash/233', ENTERCASH_234 = 'entercash/234', ENTERCASH_235 = 'entercash/235', ENTERCASH_240 = 'entercash/240', ENTERCASH_260 = 'entercash/260', ENTERCASH_265 = 'entercash/265', ENTERCASH_500 = 'entercash/500', ENTERCASH_505 = 'entercash/505', ENTERCASH_550 = 'entercash/550', ENTERCASH_551 = 'entercash/551', ENTERCASH_552 = 'entercash/552', ENTERCASH_553 = 'entercash/553', ENTERCASH_554 = 'entercash/554', ENTERCASH_555 = 'entercash/555', ENTERCASH_556 = 'entercash/556', ENTERCASH_557 = 'entercash/557', ENTERCASH_640 = 'entercash/640', ENTERCASH_720 = 'entercash/720', ENTERCASH_721 = 'entercash/721', ENTERCASH_722 = 'entercash/722', ENTERCASH_723 = 'entercash/723', ENTERCASH_724 = 'entercash/724', ENTERCASH_750 = 'entercash/750', ENTERCASH_751 = 'entercash/751', ENTERCASH_752 = 'entercash/752', ENTERCASH_753 = 'entercash/753', ENTERCASH_940 = 'entercash/940', ENTERCASH_941 = 'entercash/941', ENTERCASH_942 = 'entercash/942', ENTERCASH_943 = 'entercash/943', ENTERTAINMENTCARD = 'entertainmentcard', EPAY = 'epay', EPS = 'eps', EPS_09350598_7BA4_4AFB_B706_843E49A64759 = 'eps/09350598-7ba4-4afb-b706-843e49a64759', EPS_1190C4D1_B37A_487E_9355_E0A067F54A9F = 'eps/1190c4d1-b37a-487e-9355-e0a067f54a9f', EPS_1D48E2F7_604C_4D1D_894E_170635D1A645 = 'eps/1d48e2f7-604c-4d1d-894e-170635d1a645', EPS_242209E6_A81F_48BC_9041_A31306CB153F = 'eps/242209e6-a81f-48bc-9041-a31306cb153f', EPS_25942CC9_617D_42A1_89BA_D1AB5A05770A = 'eps/25942cc9-617d-42a1-89ba-d1ab5a05770a', EPS_31659756_FB43_4094_AFD5_82980FF48750 = 'eps/31659756-fb43-4094-afd5-82980ff48750', EPS_33FDC41FC_3D3D_4EE3_A1FE_CD79CFD58EA3 = 'eps/33fdc41fc-3d3d-4ee3-a1fe-cd79cfd58ea3', EPS_3ED7DA63_0924_424C_A822_2A0DFAAADCE1 = 'eps/3ed7da63-0924-424c-a822-2a0dfaaadce1', EPS_3FDC41FC_3D3D_4EE3_A1FE_CD79CFD58EA3 = 'eps/3fdc41fc-3d3d-4ee3-a1fe-cd79cfd58ea3', EPS_43B3AF24_7969_4701_A7CE_1F9FC6EEF834 = 'eps/43b3af24-7969-4701-a7ce-1f9fc6eef834', EPS_43DCA1AB_4BA3_41AC_B672_5518362CDE54 = 'eps/43dca1ab-4ba3-41ac-b672-5518362cde54', EPS_479FF5D2_6F44_4921_9330_6BF6763806E9 = 'eps/479ff5d2-6f44-4921-9330-6bf6763806e9', EPS_4A0A975B_0594_4B40_9068_39F77B3A91F9 = 'eps/4a0a975b-0594-4b40-9068-39f77b3a91f9', EPS_52D9DF19_F5C5_401F_89D9_38A8B36AE721 = 'eps/52d9df19-f5c5-401f-89d9-38a8b36ae721', EPS_54016D9D_31B0_4DB3_9EAF_CF9FBC58EE81 = 'eps/54016d9d-31b0-4db3-9eaf-cf9fbc58ee81', EPS_64669764_E6FC_401C_8F3D_26E9169BA6FF = 'eps/64669764-e6fc-401c-8f3d-26e9169ba6ff', EPS_6765E225_A0DC_4481_9666_E26303D4F221 = 'eps/6765e225-a0dc-4481-9666-e26303d4f221', EPS_68DB503B_EA48_4681_814B_10FC74064F68 = 'eps/68db503b-ea48-4681-814b-10fc74064f68', EPS_69A67A81_7518_463F_8527_3F1128AF1F93 = 'eps/69a67a81-7518-463f-8527-3f1128af1f93', EPS_7217D822_470C_4768_B346_A440E8CB7096 = 'eps/7217d822-470c-4768-b346-a440e8cb7096', EPS_744D26DA_90C9_49EB_9A0B_9A7F1FA3A8D2 = 'eps/744d26da-90c9-49eb-9a0b-9a7f1fa3a8d2', EPS_84F468DC_37B4_44AA_8301_50A16F746464 = 'eps/84f468dc-37b4-44aa-8301-50a16f746464', EPS_880CC8C4_D723_49AB_8299_DC35EAFC9385 = 'eps/880cc8c4-d723-49ab-8299-dc35eafc9385', EPS_89C79DA1_1B75_41E2_9254_118F36231BBD = 'eps/89c79da1-1b75-41e2-9254-118f36231bbd', EPS_8B0BFEEA_FBB0_4337_B3A1_0E25C0F060FC = 'eps/8b0bfeea-fbb0-4337-b3a1-0e25c0f060fc', EPS_958D1CF8_0D2D_4B21_B1F2_8383BB9F243F = 'eps/958d1cf8-0d2d-4b21-b1f2-8383bb9f243f', EPS_9C92D29B_A898_488E_836F_E93B911F9A94 = 'eps/9c92d29b-a898-488e-836f-e93b911f9a94', EPS_A990A73B_3D6B_4D91_9B8A_856428089B34 = 'eps/a990a73b-3d6b-4d91-9b8a-856428089b34', EPS_AA1DE16A_223F_494F_90F0_01FCE9C065FB = 'eps/aa1de16a-223f-494f-90f0-01fce9c065fb', EPS_B3B1554F_C9AE_4396_A62F_BAFFB8A2DE1C = 'eps/b3b1554f-c9ae-4396-a62f-baffb8a2de1c', EPS_B42DD796_8BDA_4893_ACC2_DDFAE9C9CDB7 = 'eps/b42dd796-8bda-4893-acc2-ddfae9c9cdb7', EPS_BA7199CC_F057_42F2_9856_2378ABF21638 = 'eps/ba7199cc-f057-42f2-9856-2378abf21638', EPS_BB7D223A_17D5_48AF_A6EF_8A2BF5A4E5D9 = 'eps/bb7d223a-17d5-48af-a6ef-8a2bf5a4e5d9', EPS_BBD44F4D_609B_454E_8D5A_E0D1AC21F15A = 'eps/bbd44f4d-609b-454e-8d5a-e0d1ac21f15a', EPS_C522E299_479C_4134_849F_A6EF0399A6E0 = 'eps/c522e299-479c-4134-849f-a6ef0399a6e0', EPS_CC4A034E_F8A1_4CE4_A96B_1CD251AF03B5 = 'eps/cc4a034e-f8a1-4ce4-a96b-1cd251af03b5', EPS_D5639C17_0207_4D49_8708_922181135AD1 = 'eps/d5639c17-0207-4d49-8708-922181135ad1', EPS_D5D5B133_1C0D_4C08_B2BE_3C9B116DC326 = 'eps/d5d5b133-1c0d-4c08-b2be-3c9b116dc326', EPS_E15C6132_430F_415C_AC95_C127ECB49D55 = 'eps/e15c6132-430f-415c-ac95-c127ecb49d55', EPS_E2E97AAA_DE4C_4E18_9431_D99790773433 = 'eps/e2e97aaa-de4c-4e18-9431-d99790773433', EPS_E590EB4F_B805_43F7_86A0_4EA3F560B18F = 'eps/e590eb4f-b805-43f7-86a0-4ea3f560b18f', EPS_E6819E7A_F663_414B_92EC_CF7C82D2F4E5 = 'eps/e6819e7a-f663-414b-92ec-cf7c82d2f4e5', EPS_EE9FC487_EBE0_486C_8101_17DCE5141A67 = 'eps/ee9fc487-ebe0-486c-8101-17dce5141a67', EPS_EFF103E6_843D_48B7_A6E6_FBD88F511B11 = 'eps/eff103e6-843d-48b7-a6e6-fbd88f511b11', EPS_F848C582_1B94_4E13_B58E_B3A2C68A3FBA = 'eps/f848c582-1b94-4e13-b58e-b3a2c68a3fba', ESA_PAY = 'esa_pay', EXPERTGIFTCARD = 'expertgiftcard', FACILYPAY = 'facilypay', FACILYPAY_10X = 'facilypay_10x', FACILYPAY_12X = 'facilypay_12x', FACILYPAY_3X = 'facilypay_3x', FACILYPAY_4X = 'facilypay_4x', FACILYPAY_6X = 'facilypay_6x', FAKTURA = 'faktura', FAMILYMART = 'familymart', FASHIONCHEQUE = 'fashioncheque', FAWRY = 'fawry', FIO_BANKA = 'fio_banka', FIS_MAYORSGIFTCARD = 'fis_mayorsgiftcard', FLEUROP = 'fleurop', FLEUROPBLOEMENBON = 'fleuropbloemenbon', FONQ = 'fonq', FONQGIFTCARD = 'fonqgiftcard', FORBRUGSFORENINGEN = 'forbrugsforeningen', FORTIS = 'fortis', FPX = 'fpx', FPX_ABB = 'fpx_abb', FPX_ABMB = 'fpx_abmb', FPX_AMB = 'fpx_amb', FPX_BIMB = 'fpx_bimb', FPX_BKRM = 'fpx_bkrm', FPX_CIMBCLICKS = 'fpx_cimbclicks', FPX_HLB = 'fpx_hlb', FPX_MB2U = 'fpx_mb2u', FPX_OCBC = 'fpx_ocbc', FPX_PBB = 'fpx_pbb', FPX_RHB = 'fpx_rhb', FPX_SCB = 'fpx_scb', FPX_UOB = 'fpx_uob', FRIESLAND_BANK = 'friesland_bank', GALLGALL = 'gallgall', GARTNER = 'gartner', GCASH = 'gcash', GE = 'ge', GENERIC_BANKTRANSFER = 'generic_banktransfer', GENERIC_WALLET = 'generic_wallet', GENERICGIFTCARD = 'genericgiftcard', GIFTCARD = 'giftcard', GIFTFOR2CARD = 'giftfor2card', GIROCARD = 'girocard', GIROPAY = 'giropay', GIVEX = 'givex', GLOBE_GCASH = 'globe_gcash', GLOBEGCASH = 'globegcash', GOLDSMITHSCARD = 'goldsmithscard', GOOGLEPAY = 'googlepay', GOOGLEWALLET = 'googlewallet', GOPAY_WALLET = 'gopay_wallet', GRABPAY = 'grabpay', GRABPAY_MY = 'grabpay_MY', GRABPAY_PH = 'grabpay_PH', GRABPAY_SG = 'grabpay_SG', GRABPAY_TH = 'grabpay_TH', GRABPAY_POS = 'grabpay_pos', GRUPO_MUTUAL = 'grupo_mutual', HALLMARK = 'hallmark', HALLMARKCARD = 'hallmarkcard', HANDELSBAN = 'handelsban', HANDELSBANKEN = 'handelsbanken', HANSABANK = 'hansabank', HDFC = 'hdfc', HELM = 'helm', HIPER = 'hiper', HIPERCARD = 'hipercard', HMLINGERIE = 'hmlingerie', HOMEWORKS = 'homeworks', HONG_LEONG = 'hong_leong', HSBC = 'hsbc', HYPO_ALPE_ADRIA = 'hypo_alpe_adria', HYPO_LANDESBANK_VORARLBERG = 'hypo_landesbank_vorarlberg', HYPO_NOE_GRUPPE = 'hypo_noe_gruppe', HYPO_TIROL_BANK = 'hypo_tirol_bank', HYUNDAI_CARD = 'hyundai_card', IDEAL = 'ideal', IDEAL_0021 = 'ideal/0021', IDEAL_0031 = 'ideal/0031', IDEAL_0161 = 'ideal/0161', IDEAL_0511 = 'ideal/0511', IDEAL_0721 = 'ideal/0721', IDEAL_0751 = 'ideal/0751', IDEAL_0761 = 'ideal/0761', IDEAL_0771 = 'ideal/0771', IDEAL_0801 = 'ideal/0801', IDEAL_0802 = 'ideal/0802', IDEAL_0803 = 'ideal/0803', IDEAL_0804 = 'ideal/0804', IDEAL_0805 = 'ideal/0805', IDEAL_1151 = 'ideal/1151', IGIVE = 'igive', IKANO = 'ikano', IMMO_BANK = 'immo-bank', INICISINIPAY_ACCOUNTTRANSFER = 'inicisIniPay_accounttransfer', INICISINIPAY_CREDITCARD = 'inicisIniPay_creditcard', INICISMOBILE_ACCOUNTTRANSFER = 'inicisMobile_accounttransfer', INICISMOBILE_CREDITCARD = 'inicisMobile_creditcard', INICISMOBILE_MOBILEPHONE = 'inicisMobile_mobilephone', INICIS_CREDITCARD = 'inicis_creditcard', INTERAC = 'interac', INTERAC_AMAZONPAY = 'interac_amazonpay', INTERAC_APPLEPAY = 'interac_applepay', INTERAC_CARD = 'interac_card', INTERBANK = 'interbank', INTERLINK = 'interlink', IPAY = 'ipay', IPAY88 = 'ipay88', ISRACARD = 'isracard', ITAU = 'itau', IVR = 'ivr', IVRLANDLINE = 'ivrLandline', IVRMOBILE = 'ivrMobile', IXE = 'ixe', JCB = 'jcb', JCB_APPLEPAY = 'jcb_applepay', JUST_PAY = 'just_pay', KADOWERELD = 'kadowereld', KAKAOPAY = 'kakaopay', KAREN_MILLEN = 'karen_millen', KARENMILLEN = 'karenmillen', KARENMILLENGIFTCARD = 'karenmillengiftcard', KASIKORNBANK = 'kasikornbank', KCP_BANKTRANSFER = 'kcp_banktransfer', KCP_CREDITCARD = 'kcp_creditcard', KCP_PAYCO = 'kcp_payco', KLARNA_PAY_LATER = 'klarna-pay-later', KLARNA_PAY_NOW = 'klarna-pay-now', KLARNA_SLICE = 'klarna-slice', KLARNA = 'klarna', KLARNA_ACCOUNT = 'klarna_account', KLARNA_B2B = 'klarna_b2b', KLARNA_PAYNOW = 'klarna_paynow', KLARNAPAYMENTS = 'klarnapayments', KLARNAPAYMENTS_ACCOUNT = 'klarnapayments_account', KLARNAPAYMENTS_B2B = 'klarnapayments_b2b', KMART = 'kmart', KNET = 'knet', KONBINI = 'konbini', KOREAN_LOCAL_CARD = 'korean_local_card', KRUNGSRI_ATM = 'krungsri_atm', KRUNGTHAI = 'krungthai', KRUNSGRI = 'krunsgri', LASER = 'laser', LAWESON = 'laweson', LHV = 'lhv', LIANLIANPAY_ABC = 'lianlianpay_abc', LIANLIANPAY_BCM = 'lianlianpay_bcm', LIANLIANPAY_BEA = 'lianlianpay_bea', LIANLIANPAY_BOB = 'lianlianpay_bob', LIANLIANPAY_BOC = 'lianlianpay_boc', LIANLIANPAY_CCIB = 'lianlianpay_ccib', LIANLIANPAY_CCOB = 'lianlianpay_ccob', LIANLIANPAY_CEB = 'lianlianpay_ceb', LIANLIANPAY_CGB = 'lianlianpay_cgb', LIANLIANPAY_CMB = 'lianlianpay_cmb', LIANLIANPAY_CMBC = 'lianlianpay_cmbc', LIANLIANPAY_CREDITCARD = 'lianlianpay_creditcard', LIANLIANPAY_DEBITCARD = 'lianlianpay_debitcard', LIANLIANPAY_EBANKING = 'lianlianpay_ebanking', LIANLIANPAY_EBANKING_CREDIT_01020000 = 'lianlianpay_ebanking_credit/01020000', LIANLIANPAY_EBANKING_CREDIT_01030000 = 'lianlianpay_ebanking_credit/01030000', LIANLIANPAY_EBANKING_CREDIT_01040000 = 'lianlianpay_ebanking_credit/01040000', LIANLIANPAY_EBANKING_CREDIT_01050000 = 'lianlianpay_ebanking_credit/01050000', LIANLIANPAY_EBANKING_CREDIT_03010000 = 'lianlianpay_ebanking_credit/03010000', LIANLIANPAY_EBANKING_CREDIT_03020000 = 'lianlianpay_ebanking_credit/03020000', LIANLIANPAY_EBANKING_CREDIT_03030000 = 'lianlianpay_ebanking_credit/03030000', LIANLIANPAY_EBANKING_CREDIT_03040000 = 'lianlianpay_ebanking_credit/03040000', LIANLIANPAY_EBANKING_CREDIT_03050000 = 'lianlianpay_ebanking_credit/03050000', LIANLIANPAY_EBANKING_CREDIT_03060000 = 'lianlianpay_ebanking_credit/03060000', LIANLIANPAY_EBANKING_CREDIT_03070000 = 'lianlianpay_ebanking_credit/03070000', LIANLIANPAY_EBANKING_CREDIT_03080000 = 'lianlianpay_ebanking_credit/03080000', LIANLIANPAY_EBANKING_CREDIT_03100000 = 'lianlianpay_ebanking_credit/03100000', LIANLIANPAY_EBANKING_CREDIT_03200000 = 'lianlianpay_ebanking_credit/03200000', LIANLIANPAY_EBANKING_CREDIT_1000000 = 'lianlianpay_ebanking_credit/1000000', LIANLIANPAY_EBANKING_CREDIT_4031000 = 'lianlianpay_ebanking_credit/4031000', LIANLIANPAY_EBANKING_DEBIT_01020000 = 'lianlianpay_ebanking_debit/01020000', LIANLIANPAY_EBANKING_DEBIT_01030000 = 'lianlianpay_ebanking_debit/01030000', LIANLIANPAY_EBANKING_DEBIT_01040000 = 'lianlianpay_ebanking_debit/01040000', LIANLIANPAY_EBANKING_DEBIT_01050000 = 'lianlianpay_ebanking_debit/01050000', LIANLIANPAY_EBANKING_DEBIT_03010000 = 'lianlianpay_ebanking_debit/03010000', LIANLIANPAY_EBANKING_DEBIT_03020000 = 'lianlianpay_ebanking_debit/03020000', LIANLIANPAY_EBANKING_DEBIT_03030000 = 'lianlianpay_ebanking_debit/03030000', LIANLIANPAY_EBANKING_DEBIT_03040000 = 'lianlianpay_ebanking_debit/03040000', LIANLIANPAY_EBANKING_DEBIT_03050000 = 'lianlianpay_ebanking_debit/03050000', LIANLIANPAY_EBANKING_DEBIT_03060000 = 'lianlianpay_ebanking_debit/03060000', LIANLIANPAY_EBANKING_DEBIT_03070000 = 'lianlianpay_ebanking_debit/03070000', LIANLIANPAY_EBANKING_DEBIT_03080000 = 'lianlianpay_ebanking_debit/03080000', LIANLIANPAY_EBANKING_DEBIT_03100000 = 'lianlianpay_ebanking_debit/03100000', LIANLIANPAY_EBANKING_DEBIT_03200000 = 'lianlianpay_ebanking_debit/03200000', LIANLIANPAY_EBANKING_DEBIT_1000000 = 'lianlianpay_ebanking_debit/1000000', LIANLIANPAY_EBANKING_DEBIT_4031000 = 'lianlianpay_ebanking_debit/4031000', LIANLIANPAY_EBANKING_ENTERPRISE_01020000 = 'lianlianpay_ebanking_enterprise/01020000', LIANLIANPAY_EBANKING_ENTERPRISE_01030000 = 'lianlianpay_ebanking_enterprise/01030000', LIANLIANPAY_EBANKING_ENTERPRISE_01040000 = 'lianlianpay_ebanking_enterprise/01040000', LIANLIANPAY_EBANKING_ENTERPRISE_01050000 = 'lianlianpay_ebanking_enterprise/01050000', LIANLIANPAY_EBANKING_ENTERPRISE_03010000 = 'lianlianpay_ebanking_enterprise/03010000', LIANLIANPAY_EBANKING_ENTERPRISE_03020000 = 'lianlianpay_ebanking_enterprise/03020000', LIANLIANPAY_EBANKING_ENTERPRISE_03030000 = 'lianlianpay_ebanking_enterprise/03030000', LIANLIANPAY_EBANKING_ENTERPRISE_03040000 = 'lianlianpay_ebanking_enterprise/03040000', LIANLIANPAY_EBANKING_ENTERPRISE_03050000 = 'lianlianpay_ebanking_enterprise/03050000', LIANLIANPAY_EBANKING_ENTERPRISE_03060000 = 'lianlianpay_ebanking_enterprise/03060000', LIANLIANPAY_EBANKING_ENTERPRISE_03070000 = 'lianlianpay_ebanking_enterprise/03070000', LIANLIANPAY_EBANKING_ENTERPRISE_03080000 = 'lianlianpay_ebanking_enterprise/03080000', LIANLIANPAY_EBANKING_ENTERPRISE_03100000 = 'lianlianpay_ebanking_enterprise/03100000', LIANLIANPAY_EBANKING_ENTERPRISE_03200000 = 'lianlianpay_ebanking_enterprise/03200000', LIANLIANPAY_EBANKING_ENTERPRISE_1000000 = 'lianlianpay_ebanking_enterprise/1000000', LIANLIANPAY_EBANKING_ENTERPRISE_4031000 = 'lianlianpay_ebanking_enterprise/4031000', LIANLIANPAY_HXB = 'lianlianpay_hxb', LIANLIANPAY_ICBC = 'lianlianpay_icbc', LIANLIANPAY_PAB = 'lianlianpay_pab', LIANLIANPAY_PSBC = 'lianlianpay_psbc', LIANLIANPAY_SPDB = 'lianlianpay_spdb', LOODS5GIFTCARD = 'loods5giftcard', LOODS5PREPAIDCARD = 'loods5prepaidcard', M_PAY = 'm_pay', MADA = 'mada', MADA_CARD = 'mada_card', MAESTRO = 'maestro', MAESTRO_AMAZONPAY = 'maestro_amazonpay', MAESTRO_APPLEPAY = 'maestro_applepay', MAESTRO_SAMSUNGPAY = 'maestro_samsungpay', MAESTROUK = 'maestrouk', MANDIRI = 'mandiri', MAPPINWEBBCARD = 'mappinwebbcard', MARITIME = 'maritime', MASTERPASS = 'masterpass', MAYBANK = 'maybank', MAYORS = 'mayors', MB = 'mb', MBANK = 'mbank', MBWAY = 'mbway', MC = 'mc', MC_AMAZONPAY = 'mc_amazonpay', MC_ANDROIDPAY = 'mc_androidpay', MC_APPLEPAY = 'mc_applepay', MC_SAMSUNGPAY = 'mc_samsungpay', MEALVOUCHER_FR_GROUPEUP = 'mealVoucher_FR_groupeup', MEALVOUCHER_FR_NATIXIS = 'mealVoucher_FR_natixis', MEALVOUCHER_FR_SODEXO = 'mealVoucher_FR_sodexo', MERCADOPAGO = 'mercadopago', MINISTOP = 'ministop', MIR = 'mir', MOBILE_SUICA = 'mobile_suica', MOBILEPAY = 'mobilepay', MOLPAY = 'molpay', MOLPAY_A = 'molpay_a', MOLPAY_ABMB = 'molpay_abmb', MOLPAY_ACB = 'molpay_acb', MOLPAY_AFFIN_EPG = 'molpay_affin_epg', MOLPAY_AGRIBANK = 'molpay_agribank', MOLPAY_ALIPAY = 'molpay_alipay', MOLPAY_AMB = 'molpay_amb', MOLPAY_BANGKOKBANK = 'molpay_bangkokbank', MOLPAY_BANKGKOKBANK = 'molpay_bankgkokbank', MOLPAY_BANKISLAM = 'molpay_bankislam', MOLPAY_BIDV = 'molpay_bidv', MOLPAY_BKRM = 'molpay_bkrm', MOLPAY_BOOST = 'molpay_boost', MOLPAY_CASH = 'molpay_cash', MOLPAY_CIMB = 'molpay_cimb', MOLPAY_CIMB_VA = 'molpay_cimb_va', MOLPAY_DONGABANK = 'molpay_dongabank', MOLPAY_EBANKING_MY = 'molpay_ebanking_MY', MOLPAY_EBANKING_TH = 'molpay_ebanking_TH', MOLPAY_EBANKING_TH_MOLPAY_BANGKOKBANK = 'molpay_ebanking_TH/molpay_bangkokbank', MOLPAY_EBANKING_TH_MOLPAY_KBANK = 'molpay_ebanking_TH/molpay_kbank', MOLPAY_EBANKING_TH_MOLPAY_KRUNGSRIBANK = 'molpay_ebanking_TH/molpay_krungsribank', MOLPAY_EBANKING_TH_MOLPAY_KRUNGTHAIBANK = 'molpay_ebanking_TH/molpay_krungthaibank', MOLPAY_EBANKING_TH_MOLPAY_SIAMCOMMERCIALBANK = 'molpay_ebanking_TH/molpay_siamcommercialbank', MOLPAY_EBANKING_VN = 'molpay_ebanking_VN', MOLPAY_EBANKING_VN_VTCPAY_ACB = 'molpay_ebanking_VN/vtcpay-acb', MOLPAY_EBANKING_VN_VTCPAY_AGRIBANK = 'molpay_ebanking_VN/vtcpay-agribank', MOLPAY_EBANKING_VN_VTCPAY_BIDV = 'molpay_ebanking_VN/vtcpay-bidv', MOLPAY_EBANKING_VN_VTCPAY_DONGABANK = 'molpay_ebanking_VN/vtcpay-dongabank', MOLPAY_EBANKING_VN_VTCPAY_MARITIMEBANK = 'molpay_ebanking_VN/vtcpay-maritimebank', MOLPAY_EBANKING_VN_VTCPAY_MB = 'molpay_ebanking_VN/vtcpay-mb', MOLPAY_EBANKING_VN_VTCPAY_SACOMBANK = 'molpay_ebanking_VN/vtcpay-sacombank', MOLPAY_EBANKING_VN_VTCPAY_TECHCOMBANK = 'molpay_ebanking_VN/vtcpay-techcombank', MOLPAY_EBANKING_VN_VTCPAY_VIETCOMBANK = 'molpay_ebanking_VN/vtcpay-vietcombank', MOLPAY_EBANKING_VN_VTCPAY_VIETINBANK = 'molpay_ebanking_VN/vtcpay-vietinbank', MOLPAY_EBANKING_FPX_MY = 'molpay_ebanking_fpx_MY', MOLPAY_EBANKING_FPX_MY_FPX_ABB = 'molpay_ebanking_fpx_MY/fpx_abb', MOLPAY_EBANKING_FPX_MY_FPX_ABMB = 'molpay_ebanking_fpx_MY/fpx_abmb', MOLPAY_EBANKING_FPX_MY_FPX_AMB = 'molpay_ebanking_fpx_MY/fpx_amb', MOLPAY_EBANKING_FPX_MY_FPX_BIMB = 'molpay_ebanking_fpx_MY/fpx_bimb', MOLPAY_EBANKING_FPX_MY_FPX_BKRM = 'molpay_ebanking_fpx_MY/fpx_bkrm', MOLPAY_EBANKING_FPX_MY_FPX_BMMB = 'molpay_ebanking_fpx_MY/fpx_bmmb', MOLPAY_EBANKING_FPX_MY_FPX_BSN = 'molpay_ebanking_fpx_MY/fpx_bsn', MOLPAY_EBANKING_FPX_MY_FPX_CIMBCLICKS = 'molpay_ebanking_fpx_MY/fpx_cimbclicks', MOLPAY_EBANKING_FPX_MY_FPX_HLB = 'molpay_ebanking_fpx_MY/fpx_hlb', MOLPAY_EBANKING_FPX_MY_FPX_HSBC = 'molpay_ebanking_fpx_MY/fpx_hsbc', MOLPAY_EBANKING_FPX_MY_FPX_KFH = 'molpay_ebanking_fpx_MY/fpx_kfh', MOLPAY_EBANKING_FPX_MY_FPX_MB2U = 'molpay_ebanking_fpx_MY/fpx_mb2u', MOLPAY_EBANKING_FPX_MY_FPX_OCBC = 'molpay_ebanking_fpx_MY/fpx_ocbc', MOLPAY_EBANKING_FPX_MY_FPX_PBB = 'molpay_ebanking_fpx_MY/fpx_pbb', MOLPAY_EBANKING_FPX_MY_FPX_RHB = 'molpay_ebanking_fpx_MY/fpx_rhb', MOLPAY_EBANKING_FPX_MY_FPX_SCB = 'molpay_ebanking_fpx_MY/fpx_scb', MOLPAY_EBANKING_FPX_MY_FPX_UOB = 'molpay_ebanking_fpx_MY/fpx_uob', MOLPAY_ENETSD = 'molpay_enetsd', MOLPAY_EPAY = 'molpay_epay', MOLPAY_ESAPAY = 'molpay_esapay', MOLPAY_FPX = 'molpay_fpx', MOLPAY_HLB = 'molpay_hlb', MOLPAY_KBANK = 'molpay_kbank', MOLPAY_KRUNGSRIBANK = 'molpay_krungsribank', MOLPAY_KRUNGTHAIBANK = 'molpay_krungthaibank', MOLPAY_MARITIMEBANK = 'molpay_maritimebank', MOLPAY_MAYBANK2U = 'molpay_maybank2u', MOLPAY_MB = 'molpay_mb', MOLPAY_NGANLUONG = 'molpay_nganluong', MOLPAY_OCBC = 'molpay_ocbc', MOLPAY_PAYLINK = 'molpay_paylink', MOLPAY_PAYSBUY = 'molpay_paysbuy', MOLPAY_POINTS = 'molpay_points', MOLPAY_PUBLICBANK = 'molpay_publicbank', MOLPAY_RHB = 'molpay_rhb', MOLPAY_SACOMBANK = 'molpay_sacombank', MOLPAY_SCB = 'molpay_scb', MOLPAY_SENHENG = 'molpay_senheng', MOLPAY_SIAMCOMMERCIALBANK = 'molpay_siamcommercialbank', MOLPAY_SINGPOST = 'molpay_singpost', MOLPAY_TECHCOMBANK = 'molpay_techcombank', MOLPAY_UOB = 'molpay_uob', MOLPAY_VIETCOMBANK = 'molpay_vietcombank', MOLPAY_VIETINBANK = 'molpay_vietinbank', MOLPAY_WALLET = 'molpay_wallet', MOMO_ATM = 'momo_atm', MOMO_WALLET = 'momo_wallet', MONETA = 'moneta', MONETA_CZ = 'moneta_cz', MONEYBOOKERS = 'moneybookers', MONEYMAIL = 'moneymail', MONEYOU = 'moneyou', MUCAP = 'mucap', MULA = 'mula', MULTIBANCO = 'multibanco', MULTICAJA = 'multicaja', MUSICALCARD = 'musicalcard', NAPS = 'naps', NARANJA = 'naranja', NATIONALEBIOSCOOPBON = 'nationalebioscoopbon', NATIONALETUINBON = 'nationaletuinbon', NATIONALEVERWENCADEAUBON = 'nationaleverwencadeaubon', NEDBANK = 'nedbank', NETAXEPT_BANKAXESS = 'netaxept_bankaxess', NETELLER = 'neteller', NETPLUS = 'netplus', NETS = 'nets', NETSCARD = 'netscard', NGANLUONG = 'nganluong', NOCARD = 'nocard', NORDEA = 'nordea', NYCE = 'nyce', OASIS = 'oasis', OASISGIFTCARD = 'oasisgiftcard', OBERTHUR = 'oberthur', OFFICE_MATE = 'office_mate', OMANNET = 'omannet', OMASP = 'omasp', ONEBIP = 'onebip', ONETWOTHREE = 'onetwothree', ONEY = 'oney', ONEY_CHIP = 'oney_chip', ONEY_POS = 'oney_pos', ONLINE_RU = 'online_RU', ONLINEBANKING_PL = 'onlineBanking_PL', OPENBANKING = 'openbanking', OPENBANKING_UK = 'openbanking_UK', OPENBANKING_UK_1 = 'openbanking_UK/1', OPENBANKING_UK_10 = 'openbanking_UK/10', OPENBANKING_UK_11 = 'openbanking_UK/11', OPENBANKING_UK_12 = 'openbanking_UK/12', OPENBANKING_UK_13 = 'openbanking_UK/13', OPENBANKING_UK_14 = 'openbanking_UK/14', OPENBANKING_UK_15 = 'openbanking_UK/15', OPENBANKING_UK_16 = 'openbanking_UK/16', OPENBANKING_UK_17 = 'openbanking_UK/17', OPENBANKING_UK_18 = 'openbanking_UK/18', OPENBANKING_UK_19 = 'openbanking_UK/19', OPENBANKING_UK_2 = 'openbanking_UK/2', OPENBANKING_UK_20 = 'openbanking_UK/20', OPENBANKING_UK_3 = 'openbanking_UK/3', OPENBANKING_UK_4 = 'openbanking_UK/4', OPENBANKING_UK_5 = 'openbanking_UK/5', OPENBANKING_UK_6 = 'openbanking_UK/6', OPENBANKING_UK_7 = 'openbanking_UK/7', OPENBANKING_UK_8 = 'openbanking_UK/8', OPENBANKING_UK_9 = 'openbanking_UK/9', OPENINVOICE = 'openinvoice', OXXO = 'oxxo', PAGOEFECTIVO = 'pagoefectivo', PAGOFACIL = 'pagofacil', PATHEGIFTCARD = 'pathegiftcard', PAY_EASY = 'pay_easy', PAY_POST = 'pay_post', PAY_U = 'pay_u', PAYBRIGHT = 'paybright', PAYBYBANK = 'paybybank', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_FIRSTTRUST = 'Paybybank_uk_Firsttrust', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_AIB = 'Paybybank_uk_aib', PAYBYBANK_UK_AMEX = 'paybybank_uk_amex', PAYBYBANK_UK_ARBUTHNOTLATHAM = 'paybybank_uk_arbuthnotlatham', PAYBYBANK_UK_BANKOFIRELAND = 'paybybank_uk_bankofireland', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_BANKOFSCOTLAND = 'Paybybank_uk_bankofscotland', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_BARCLAYS = 'Paybybank_uk_barclays', PAYBYBANK_UK_BBANK = 'paybybank_uk_bbank', PAYBYBANK_UK_C_HOARE_CO = 'paybybank_uk_c-hoare-co', PAYBYBANK_UK_CAPITALONE = 'paybybank_uk_capitalone', PAYBYBANK_UK_CASHPLUS = 'paybybank_uk_cashplus', PAYBYBANK_UK_CATERALLEN = 'paybybank_uk_caterallen', PAYBYBANK_UK_CLYDESDALE = 'paybybank_uk_clydesdale', PAYBYBANK_UK_COUTTS = 'paybybank_uk_coutts', PAYBYBANK_UK_CREATION = 'paybybank_uk_creation', PAYBYBANK_UK_CUMBERLAND = 'paybybank_uk_cumberland', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_DANSKEBANK = 'Paybybank_uk_danskebank', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_FIRSTDIRECT = 'Paybybank_uk_firstdirect', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_HALIFAX = 'Paybybank_uk_halifax', PAYBYBANK_UK_HANDELSBANKEN = 'paybybank_uk_handelsbanken', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_HSBC = 'Paybybank_uk_hsbc', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_LLOYDS = 'Paybybank_uk_lloyds', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_MONZO = 'Paybybank_uk_monzo', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_NATIONWIDE = 'Paybybank_uk_nationwide', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_NATWEST = 'Paybybank_uk_natwest', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_REVOLUT = 'Paybybank_uk_revolut', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_ROYALBANKOFSCOTLAND = 'Paybybank_uk_royalbankofscotland', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_SATANDER = 'Paybybank_uk_satander', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_STARLING = 'Paybybank_uk_starling', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_TSB = 'Paybybank_uk_tsb', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_ULSTERBANK = 'Paybybank_uk_ulsterbank', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_UTESCOBANK = 'Paybybank_uk_utescobank', PAYCO = 'payco', PAYEX = 'payex', PAYMAYA_WALLET = 'paymaya_wallet', PAYNOW = 'paynow', PAYPAL = 'paypal', PAYPAL_POS = 'paypal_pos', PAYSAFECARD = 'paysafecard', PAYSBUY = 'paysbuy', PAYSHOP = 'payshop', PAYTHRU = 'paythru', PAYTM = 'paytm', PAYTRAIL = 'paytrail', PAYU_IN = 'payu_IN', PAYU_IN_CASHCARD = 'payu_IN_cashcard', PAYU_IN_NB = 'payu_IN_nb', PAYU_IN_UPI = 'payu_IN_upi', PAYU_ZA_EFTPRO = 'payu_ZA_eftpro', PAYWITHGOOGLE = 'paywithgoogle', PERMATABANK = 'permatabank', PIX = 'pix', PLASTIX = 'plastix', PLATIKA = 'platika', PLUIMEN = 'pluimen', PLUIMGIFTCARD = 'pluimgiftcard', POCZTA_POLSKA = 'poczta_polska', PODIUMCARD = 'podiumcard', POLI = 'poli', POP_PANKKI = 'pop_pankki', POS = 'pos', POST_RUSSIA = 'post_russia', POSTBANK = 'postbank', POWER_BUY = 'power_buy', PPS = 'pps', PRIMEIROPAY_BOLETO = 'primeiropay_boleto', PROMPTPAY_QR = 'promptpay_qr', PROSODIE_ILLICADO = 'prosodie_illicado', PSB = 'psb', PSE = 'pse', PSE_PAYULATAM = 'pse_payulatam', PUBLIC_BANK = 'public_bank', PULSE = 'pulse', PULSE_PAY = 'pulse_pay', QBANK = 'qbank', QIWI = 'qiwi', QIWIWALLET = 'qiwiwallet', RAIFFEISEN = 'raiffeisen', RAKUTEN = 'rakuten', RAKUTEN_EDY = 'rakuten_edy', RAPIPAGO = 'rapipago', RATEPAY = 'ratepay', RATEPAY_DIRECTDEBIT = 'ratepay_directdebit', RAZER = 'razer', REDCOMPRA = 'redcompra', REGIOBANK = 'regiobank', RESTAURATIONHARDWARE_GIFTCART = 'restaurationhardware_giftcart', RESTORATIONHARDWARE = 'restorationhardware', RESURSBANK = 'resursbank', RESURSGIFTCARD = 'resursgiftcard', RHB = 'rhb', RISK = 'risk', RISPA = 'rispa', RITUALS = 'rituals', RIVIERAMAISONGIFTCARD = 'rivieramaisongiftcard', ROBINSON = 'robinson', ROMCARD = 'romcard', ROMCARD_CREDIT = 'romcard_credit', ROMCARD_DEBIT = 'romcard_debit', RSB = 'rsb', RUPAY = 'rupay', S_PANKKI = 's-pankki', SACOMBANK = 'sacombank', SAFETYPAY = 'safetypay', SAFETYPAY_CASH = 'safetypay_cash', SAMPO_PANKKI = 'sampo_pankki', SAMSUNGPAY = 'samsungpay', SANTANDER = 'santander', SARAIVA = 'saraiva', SBERBANK = 'sberbank', SCBEASY = 'scbeasy', SCOTIABANK = 'scotiabank', SEBDIRECTPAYMENT = 'sebdirectpayment', SEPA = 'sepa', SEPADIRECTDEBIT = 'sepadirectdebit', SEPADIRECTDEBIT_AMAZONPAY = 'sepadirectdebit_amazonpay', SEVENELEVEN = 'seveneleven', SF_CADEAU = 'sf_cadeau', SHAZAM = 'shazam', SHOPPING = 'shopping', SINARMAS = 'sinarmas', SINGAPORE_POST = 'singapore_post', SKANDIA = 'skandia', SKRILL = 'skrill', SMART = 'smart', SMARTMONEY = 'smartmoney', SMS = 'sms', SNS = 'sns', SODEXO = 'sodexo', SOFORT = 'sofort', SOLO = 'solo', SOROCRED = 'sorocred', SPARBANKEN = 'sparbanken', SPARDA_BANK = 'sparda-bank', SPAREBANK = 'sparebank', SPARKASSE = 'sparkasse', SPARNORD = 'sparnord', STANDARD_BANK = 'standard_bank', STAR = 'star', STORE = 'store', SUICA = 'suica', SVS = 'svs', SWEDBANK = 'swedbank', SWISH = 'swish', SWITCHDEVICE = 'switchdevice', SYNCHRONY = 'synchrony', SYNCHRONY_MERCHANT = 'synchrony/merchant', TAP = 'tap', TCSTESTGIFTCARD = 'tcstestgiftcard', TECHOM_BANK = 'techom_bank', TENPAY = 'tenpay', TERMINAL_RU = 'terminal_RU', TESCO = 'tesco', TESCO_LOTUS = 'tesco_lotus', THAI_WATSADU = 'thai_watsadu', THESTINGGIFTCARD = 'thestinggiftcard', TICKET = 'ticket', TMBINTERNETBANKING = 'tmbinternetbanking', TOPS_DAILY = 'tops_daily', TROY = 'troy', TRUSTLY = 'trustly', TRUSTPAY = 'trustpay', TWINT = 'twint', TWINT_POS = 'twint_pos', UBERCREDIT = 'ubercredit', UKASH = 'ukash', UNICREDIT = 'unicredit', UNIONPAY = 'unionpay', UNKNOWNCARD = 'unknowncard', UOB = 'uob', UOBDIRECTDEBIT = 'uobdirectdebit', UPI = 'upi', UPI_COLLECT = 'upi_collect', UPI_QR = 'upi_qr', VALE_REFEICAO = 'vale_refeicao', VALE_REFEICAO_PREPAID = 'vale_refeicao_prepaid', VALUELINK = 'valuelink', VIAS = 'vias', VIETCOMBANK = 'vietcombank', VIETINBANK = 'vietinbank', VIPPS = 'vipps', VIS_MAYORSGIFTCARD = 'vis_mayorsgiftcard', VISA = 'visa', VISA_AMAZONPAY = 'visa_amazonpay', VISA_ANDROIDPAY = 'visa_androidpay', VISA_APPLEPAY = 'visa_applepay', VISA_SAMSUNGPAY = 'visa_samsungpay', VISACHECKOUT = 'visacheckout', VISADANKORT = 'visadankort', VOLKSBANK = 'volksbank', VPAY = 'vpay', VR_BANK = 'vr_bank', VTCPAY_ACB = 'vtcpay-acb', VTCPAY_AGRIBANK = 'vtcpay-agribank', VTCPAY_BIDV = 'vtcpay-bidv', VTCPAY_DONGABANK = 'vtcpay-dongabank', VTCPAY_MARITIMEBANK = 'vtcpay-maritimebank', VTCPAY_MB = 'vtcpay-mb', VTCPAY_SACOMBANK = 'vtcpay-sacombank', VTCPAY_TECHCOMBANK = 'vtcpay-techcombank', VTCPAY_VIETCOMBANK = 'vtcpay-vietcombank', VTCPAY_VIETINBANK = 'vtcpay-vietinbank', VVVCADEAUBON = 'vvvcadeaubon', VVVGIFTCARD = 'vvvgiftcard', WALLET = 'wallet', WALLET_RU = 'wallet_RU', WALLET_RU_YANDEXMONEY = 'wallet_RU/yandexmoney', WALLIE = 'wallie', WAREHOUSE = 'warehouse', WAREHOUSEGIFTCARD = 'warehousegiftcard', WEBSHOPGIFTCARD = 'webshopgiftcard', WECHATPAY = 'wechatpay', WECHATPAYMINIPROGRAM = 'wechatpayMiniProgram', WECHATPAYQR = 'wechatpayQR', WECHATPAYSDK = 'wechatpaySDK', WECHATPAYWEB = 'wechatpayWeb', WECHATPAY_FULLBRAND = 'wechatpay_fullbrand', WECHATPAY_POS = 'wechatpay_pos', WEFASHIONGIFTCARD = 'wefashiongiftcard', WESTERNUNION = 'westernunion', WIJNCARD = 'wijncard', WINKELCHEQUE = 'winkelcheque', WOSCARD = 'woscard', XPONCARD = 'xponcard', YALO_PREPAID = 'yalo_prepaid', YANDEX = 'yandex', YANDEX_ALFACLICK = 'yandex_alfaclick', YANDEX_BANK_CARD = 'yandex_bank_card', YANDEX_CASH = 'yandex_cash', YANDEX_INSTALLMENTS = 'yandex_installments', YANDEX_PROMSVYAZBANK = 'yandex_promsvyazbank', YANDEX_QIWI = 'yandex_qiwi', YANDEX_SBERBANK = 'yandex_sberbank', YANDEX_WEBMONEY = 'yandex_webmoney', YANDEXMONEY = 'yandexmoney', YOURGIFT = 'yourgift', ZABKA = 'zabka', ZIP = 'zip', ZIP_POS = 'Zip_pos', } 

package/dist/assets/components/popover/popover.types.ts

@@ -1 +1 @@
-import { PopperContainerPosition } from '../popper-container/popper-container.types'; import type { Placement } from '@floating-ui/vue'; import type { BentoButtonActionsLayout, BentoButtonActionsList, } from '../button/components/button-actions/button-actions.types'; import { type VueNodeElement } from '@/types/elements'; import type { Options as FocusTrapOptions } from 'focus-trap/index'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export const BentoPopoverPositions = { ...PopperContainerPosition }; export type BentoPopoverPositions = PopperContainerPosition; export interface BentoPopoverProps { /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions?: BentoButtonActionsList; /** * Defines the layout in which the button actions is presented. * It can be one of: * * @values BUTTONS_END * @values FILL_CONTAINER * @values SPACE_BETWEEN * @values VERTICAL_STACK */ actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`; /** * Defines a string value that provides an accessible name for the popover. * @deprecated from version 2.0.0. Use the aria-label attribute instead. */ ariaLabel?: string; /** * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the "default" slot. */ divider?: boolean; /** * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it. * */ disableFocusTrap?: boolean; /** * Adds a "dismiss" icon that triggers the "dismiss" event. Requires the `title` prop to be set. */ dismissible?: boolean; /** * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...]. * Useful when not using auto as starting placement. * https://floating-ui.com/docs/flip#fallbackplacements */ fallbackPosition?: Array<Placement>; /** * Sets the size of the container to fit its content */ fitContent?: boolean; /** * Instructs popover to be visible outside of the containing container. * Useful when component would be used in limited containers like Modal, Side panel, etc. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ fixedPositioning?: boolean; /** * Toggles the popover open and closed */ open?: boolean; /** * Displays the popover in a large size. */ large?: boolean; /** * @deprecated * NOTE: This property no longer functions since moving to the floating-ui framework. */ modifiers?: Array<unknown>; /** * Popover's position relative to the target element. * Possible values are: * 'auto', 'auto-start', 'auto-end', * 'top', 'top-start', 'top-end' * 'right', 'right-start', 'right-end' * 'bottom', 'bottom-start', 'bottom-end' * 'left', 'left-start', 'left-end' */ position?: BentoPopoverPositions | `${BentoPopoverPositions}`; /** * Displays the popover in a small size. */ small?: boolean; /** * Indicates the title you want to give the popover. */ title?: string; /** * Popover's target element. * The popover will position itself relatively to target element, in specified position. */ targetElement: VueNodeElement; /** * Activates focus trap for both arrow and tab keys. */ trapAll?: boolean; /** * Configurations for the focus-trap when trap-all is active. */ trapAllOptions?: FocusTrapOptions; /** * Displays the popover without padding. */ withoutSpace?: boolean; /** * Allows content to appear outside of the popover. Used when there are nested popovers. */ overflowVisible?: boolean; } 
+import { PopperContainerPosition } from '../popper-container/popper-container.types'; import type { Placement } from '@floating-ui/vue'; import type { BentoButtonActionsLayout, BentoButtonActionsList, } from '../button/components/button-actions/button-actions.types'; import { type VueNodeElement } from '@/types/elements'; import type { Options as FocusTrapOptions } from 'focus-trap/index'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export const BentoPopoverPositions = { ...PopperContainerPosition }; export type BentoPopoverPositions = PopperContainerPosition; export interface BentoPopoverProps { /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions?: BentoButtonActionsList; /** * Defines the layout in which the button actions is presented. * It can be one of: * * @values BUTTONS_END * @values FILL_CONTAINER * @values SPACE_BETWEEN * @values VERTICAL_STACK */ actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`; /** * Defines a string value that provides an accessible name for the popover. * @deprecated Since v2.0.0. Use `aria-label` instead. */ ariaLabel?: string; /** * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the "default" slot. */ divider?: boolean; /** * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it. * */ disableFocusTrap?: boolean; /** * Adds a "dismiss" icon that triggers the "dismiss" event. Requires the `title` prop to be set. */ dismissible?: boolean; /** * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...]. * Useful when not using auto as starting placement. * https://floating-ui.com/docs/flip#fallbackplacements */ fallbackPosition?: Array<Placement>; /** * Sets the size of the container to fit its content */ fitContent?: boolean; /** * Instructs popover to be visible outside of the containing container. * Useful when component would be used in limited containers like Modal, Side panel, etc. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ fixedPositioning?: boolean; /** * Toggles the popover open and closed */ open?: boolean; /** * Displays the popover in a large size. */ large?: boolean; /** * @deprecated Since v2.0.0. Do not use. This property no longer functions since moving to the floating-ui framework. */ modifiers?: Array<unknown>; /** * Popover's position relative to the target element. * Possible values are: * 'auto', 'auto-start', 'auto-end', * 'top', 'top-start', 'top-end' * 'right', 'right-start', 'right-end' * 'bottom', 'bottom-start', 'bottom-end' * 'left', 'left-start', 'left-end' */ position?: BentoPopoverPositions | `${BentoPopoverPositions}`; /** * Displays the popover in a small size. */ small?: boolean; /** * Indicates the title you want to give the popover. */ title?: string; /** * Popover's target element. * The popover will position itself relatively to target element, in specified position. */ targetElement: VueNodeElement; /** * Activates focus trap for both arrow and tab keys. */ trapAll?: boolean; /** * Configurations for the focus-trap when trap-all is active. */ trapAllOptions?: FocusTrapOptions; /** * Displays the popover without padding. */ withoutSpace?: boolean; /** * Allows content to appear outside of the popover. Used when there are nested popovers. */ overflowVisible?: boolean; } 

package/dist/assets/components/popper-container/popper-container.types.ts

@@ -1 +1 @@
-export interface PopperContainerArrowProp { classes?: Array<string>; padding?: string; } export enum PopperContainerPositionBasic { TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', LEFT = 'left', } export enum PopperContainerPositionExtended { AUTO = 'auto', AUTO_START = 'auto-start', AUTO_END = 'auto-end', TOP_START = 'top-start', TOP_END = 'top-end', RIGHT_START = 'right-start', RIGHT_END = 'right-end', BOTTOM_START = 'bottom-start', BOTTOM_END = 'bottom-end', LEFT_START = 'left-start', LEFT_END = 'left-end', } // TODO: add more roles as we figure them out export enum PopperContainerAriaRole { TOOLTIP = 'tooltip', POPOVER = 'dialog', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export const PopperContainerPosition = { ...PopperContainerPositionBasic, ...PopperContainerPositionExtended }; export type PopperContainerPosition = PopperContainerPositionBasic | PopperContainerPositionExtended; export type FallbackPositionProp = Array<`${PopperContainerPosition}`> | `${PopperContainerPosition}`; 
+export interface PopperContainerArrowProp { classes?: Array<string>; padding?: string; } export enum PopperContainerPositionBasic { TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', LEFT = 'left', } export enum PopperContainerPositionExtended { AUTO = 'auto', AUTO_START = 'auto-start', AUTO_END = 'auto-end', TOP_START = 'top-start', TOP_END = 'top-end', RIGHT_START = 'right-start', RIGHT_END = 'right-end', BOTTOM_START = 'bottom-start', BOTTOM_END = 'bottom-end', LEFT_START = 'left-start', LEFT_END = 'left-end', } // TODO: add more roles as we figure them out export enum PopperContainerAriaRole { TOOLTIP = 'tooltip', POPOVER = 'dialog', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export const PopperContainerPosition = { ...PopperContainerPositionBasic, ...PopperContainerPositionExtended }; export type PopperContainerPosition = PopperContainerPositionBasic | PopperContainerPositionExtended; export type FallbackPositionProp = Array<`${PopperContainerPosition}`> | `${PopperContainerPosition}`; 

package/dist/assets/components/promo-banner/promo-banner.types.ts

@@ -1 +1 @@
-import { type BentoButtonActionObject } from '@/components/button'; import { type BentoButtonVariant } from '../button'; import { type BentoImageAspectRatio, type BentoImageProps } from '../image'; export interface BentoPromoBannerProps { /** * List of actions that will be used to render the buttons. * * Each object in the list should have a `title`, an `event` and a `variant`. * * `title`: Button's text. * `event`: Event triggered when clicking the Button. * `variant`: Button's style. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * variant: 'primary' * }, { * title: 'Secondary', * event: () => { ... } * variant: 'secondary' * }] * ``` */ actions?: Array<BentoPromoBannerAction>; /** * Defines the color of banner's background */ color?: `${BentoPromoBannerColor}`; /** * Defines whether the banner has a `Dismiss` button */ isDismissible?: boolean; /** * Defines whether the banner has a `Dismiss` button */ dismissButtonText?: string; /** * Defines the image used in the banner. * * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`. * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`. * * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows: * - `./1-1.png` with an aspect ratio of `1:1` * - `./2-1.png` with an aspect ratio of `2:1` * - `./16-9.png` with an aspect ratio of `16:9` */ image: BentoPromoBannerImage; /** * Defines style of the banner. * * The horizontal layout is responsive to the container size and * changes depending on the image aspect ratio. * * The vertical layout remains the same regardless of container size. */ layout?: `${BentoPromoBannerLayout}`; /** * Defines the title text to be shown on the banner */ title: string; } export type BentoPromoBannerImageAspectRatio = `${ | BentoImageAspectRatio.P16_9 | BentoImageAspectRatio.P2_1 | BentoImageAspectRatio.P1_1}`; export type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`; /** * @deprecated for usage with generic. Remove the generic and use it as `BentoPromoBannerAction`. */ // eslint-disable-next-line @typescript-eslint/no-unused-vars export type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & { variant: BentoPromoBannerButtonVariant; }; export interface BentoPromoBannerImage { src: BentoImageProps['src']; alt?: BentoImageProps['alt']; aspectRatio: BentoPromoBannerImageAspectRatio; } export enum BentoPromoBannerColor { BLUE = 'blue', GREY = 'grey', GREEN = 'green', } export enum BentoPromoBannerLayout { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } 
+import { type BentoButtonActionObject } from '@/components/button'; import { type BentoButtonVariant } from '../button'; import { type BentoImageAspectRatio, type BentoImageProps } from '../image'; export interface BentoPromoBannerProps { /** * List of actions that will be used to render the buttons. * * Each object in the list should have a `title`, an `event` and a `variant`. * * `title`: Button's text. * `event`: Event triggered when clicking the Button. * `variant`: Button's style. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * variant: 'primary' * }, { * title: 'Secondary', * event: () => { ... } * variant: 'secondary' * }] * ``` */ actions?: Array<BentoPromoBannerAction>; /** * Defines the color of banner's background */ color?: `${BentoPromoBannerColor}`; /** * Defines whether the banner has a `Dismiss` button */ isDismissible?: boolean; /** * Defines whether the banner has a `Dismiss` button */ dismissButtonText?: string; /** * Defines the image used in the banner. * * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`. * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`. * * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows: * - `./1-1.png` with an aspect ratio of `1:1` * - `./2-1.png` with an aspect ratio of `2:1` * - `./16-9.png` with an aspect ratio of `16:9` */ image: BentoPromoBannerImage; /** * Defines style of the banner. * * The horizontal layout is responsive to the container size and * changes depending on the image aspect ratio. * * The vertical layout remains the same regardless of container size. */ layout?: `${BentoPromoBannerLayout}`; /** * Defines the title text to be shown on the banner */ title: string; } export type BentoPromoBannerImageAspectRatio = `${ | BentoImageAspectRatio.P16_9 | BentoImageAspectRatio.P2_1 | BentoImageAspectRatio.P1_1}`; export type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`; /** * @deprecated Since v2.0.0. Use `BentoPromoBannerAction` without the generic instead. */ // eslint-disable-next-line @typescript-eslint/no-unused-vars export type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & { variant: BentoPromoBannerButtonVariant; }; export interface BentoPromoBannerImage { src: BentoImageProps['src']; alt?: BentoImageProps['alt']; aspectRatio: BentoPromoBannerImageAspectRatio; } export enum BentoPromoBannerColor { BLUE = 'blue', GREY = 'grey', GREEN = 'green', } export enum BentoPromoBannerLayout { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } 

package/dist/assets/components/radio-group/radio-group.types.ts

@@ -1 +1 @@
-import type { FormField, FormFieldEmits } from '../../types/form-field'; import type { BentoRadioButtonTag, BentoRadioButtonValue } from './components/radio-button'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoRadioGroupVariant { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } export type BentoRadioGroupValue = BentoRadioButtonValue; export interface BentoRadioGroupItem { value: BentoRadioGroupValue; label: string; description?: string; disabled?: boolean; readonly?: boolean; hasError?: boolean; tag?: BentoRadioButtonTag; } export type BentoRadioGroupItems = Array<BentoRadioGroupItem>; export type BentoRadioGroupEmits = FormFieldEmits<BentoRadioGroupValue>; export interface BentoRadioGroupProps extends FormField { /** * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone. * @default null */ formId?: string | null; /** * If set to true, renders all bento-radio-buttons in the group in an error state. * @deprecated Use "errorMessage" prop instead * @default false */ hasError?: boolean; /** * Shows/hides the group label. * @default null */ hideLabel?: boolean | null; /** * The radio group's items. * Required. */ items: BentoRadioGroupItems; /** * The name associated with the group. Required for accessibility purposes. * Required. */ label: string; /** * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value. * Defaults to no value selected. * @default null */ modelValue?: BentoRadioGroupValue | null; /** * The radio group's layout. It can be vertical or horizontal. Defaults to vertical. * @default BentoRadioGroupVariant.VERTICAL */ variant?: BentoRadioGroupVariant | `${BentoRadioGroupVariant}`; } 
+import type { FormField, FormFieldEmits } from '../../types/form-field'; import type { BentoRadioButtonTag, BentoRadioButtonValue } from './components/radio-button'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoRadioGroupVariant { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } export type BentoRadioGroupValue = BentoRadioButtonValue; export interface BentoRadioGroupItem { value: BentoRadioGroupValue; label: string; description?: string; disabled?: boolean; readonly?: boolean; hasError?: boolean; tag?: BentoRadioButtonTag; } export type BentoRadioGroupItems = Array<BentoRadioGroupItem>; export type BentoRadioGroupEmits = FormFieldEmits<BentoRadioGroupValue>; export interface BentoRadioGroupProps extends FormField { /** * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone. * @default null */ formId?: string | null; /** * If set to true, renders all bento-radio-buttons in the group in an error state. * @deprecated Since v2.0.0. Use `errorMessage` instead. * @default false */ hasError?: boolean; /** * Shows/hides the group label. * @default null */ hideLabel?: boolean | null; /** * The radio group's items. * Required. */ items: BentoRadioGroupItems; /** * The name associated with the group. Required for accessibility purposes. * Required. */ label: string; /** * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value. * Defaults to no value selected. * @default null */ modelValue?: BentoRadioGroupValue | null; /** * The radio group's layout. It can be vertical or horizontal. Defaults to vertical. * @default BentoRadioGroupVariant.VERTICAL */ variant?: BentoRadioGroupVariant | `${BentoRadioGroupVariant}`; } 

package/dist/assets/components/segmented-control/segmented-control.types.ts

@@ -1 +1 @@
-export type BentoSegmentedControlValue = string | number; export interface BentoSegmentedControlProps { /** * Accessible name describing the segmented control. * @deprecated from version 2.0.0. Use the aria-label attribute instead. */ ariaLabel?: string; /** * If set to true, renders the component full width. */ fullWidth?: boolean; /** * Items that will populate the segmented control. */ items: Array<BentoSegmentedControlItem>; /** * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value. */ modelValue?: BentoSegmentedControlValue; /** * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore. */ wrap?: boolean; } export interface BentoSegmentedControlItem { label: string; value: string | number; disabled?: boolean; } /** * @deprecated from version 2.0.0. Use "@update:model-value" or "v-model" instead */ export enum BentoSegmentedControlEvent { UPDATE = 'update:model-value', } 
+export type BentoSegmentedControlValue = string | number; export interface BentoSegmentedControlProps { /** * Accessible name describing the segmented control. * @deprecated Since v2.0.0. Use `aria-label` instead. */ ariaLabel?: string; /** * If set to true, renders the component full width. */ fullWidth?: boolean; /** * Items that will populate the segmented control. */ items: Array<BentoSegmentedControlItem>; /** * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value. */ modelValue?: BentoSegmentedControlValue; /** * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore. */ wrap?: boolean; } export interface BentoSegmentedControlItem { label: string; value: string | number; disabled?: boolean; } /** * @deprecated Since v2.0.0. Use `update:model-value` or `v-model` instead. */ export enum BentoSegmentedControlEvent { UPDATE = 'update:model-value', } 

package/dist/assets/components/status/status.types.ts

@@ -1 +1 @@
-/** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoStatusVariant { BLUE = 'blue', GREEN = 'green', GREY = 'grey', ORANGE = 'orange', RED = 'red', YELLOW = 'yellow', } export interface BentoStatusProps { /** * Defines the type and color of the Status */ variant: BentoStatusVariant | `${BentoStatusVariant}`; } 
+/** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoStatusVariant { BLUE = 'blue', GREEN = 'green', GREY = 'grey', ORANGE = 'orange', RED = 'red', YELLOW = 'yellow', } export interface BentoStatusProps { /** * Defines the type and color of the Status */ variant: BentoStatusVariant | `${BentoStatusVariant}`; } 

package/dist/assets/components/summary-grid/components/summary-grid-item/summary-grid-item.types.ts

@@ -1 +1 @@
-import type { BentoDashedUnderlineProps } from '@/components/dashed-underline'; import type { BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '../../summary-grid.types'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum SummaryGridItemType { AMOUNT = 'amount', PERCENTAGE = 'percentage', NUMERIC = 'numeric', TEXT = 'text', CUSTOM = 'custom', } export interface BaseSummaryGridItemProps { /** * Text to copy to the clipboard */ copy?: string; /** * The width of `summary-grid-item` fits its content */ fitContent?: boolean; /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText?: string; // amount, percentage and numeric props /** * Defines the size of the `summary-grid-item` text content */ // TODO implement logic for Large size size?: `${BentoSummaryGridItemSize}`; /** * Text used as a title */ title: string; /** * Shows colored trend label next to text content */ trend?: string; /** * Defines the color of trend label */ trendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Shows colored trend tag next to secondary metric value */ secondaryTrend?: string; /** * Defines the color of secondary trend tag */ secondaryTrendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Size of the popover of a dashed-underline title */ underlinePopoverSize?: BentoDashedUnderlineProps['popoverSize']; /** * Text showed in a dashed-underline title tooltip on hover */ underlineTooltipText?: string; } export interface BentoSummaryGridItemProps extends BaseSummaryGridItemProps { /** * Applies styling based on content type */ // TODO add text truncation for SummaryGridItemType.TEXT itemType?: `${SummaryGridItemType}`; } 
+import type { BentoDashedUnderlineProps } from '@/components/dashed-underline'; import type { BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '../../summary-grid.types'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum SummaryGridItemType { AMOUNT = 'amount', PERCENTAGE = 'percentage', NUMERIC = 'numeric', TEXT = 'text', CUSTOM = 'custom', } export interface BaseSummaryGridItemProps { /** * Text to copy to the clipboard */ copy?: string; /** * The width of `summary-grid-item` fits its content */ fitContent?: boolean; /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText?: string; // amount, percentage and numeric props /** * Defines the size of the `summary-grid-item` text content */ // TODO implement logic for Large size size?: `${BentoSummaryGridItemSize}`; /** * Text used as a title */ title: string; /** * Shows colored trend label next to text content */ trend?: string; /** * Defines the color of trend label */ trendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Shows colored trend tag next to secondary metric value */ secondaryTrend?: string; /** * Defines the color of secondary trend tag */ secondaryTrendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Size of the popover of a dashed-underline title */ underlinePopoverSize?: BentoDashedUnderlineProps['popoverSize']; /** * Text showed in a dashed-underline title tooltip on hover */ underlineTooltipText?: string; } export interface BentoSummaryGridItemProps extends BaseSummaryGridItemProps { /** * Applies styling based on content type */ // TODO add text truncation for SummaryGridItemType.TEXT itemType?: `${SummaryGridItemType}`; }