@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/assets/index5.css

@@ -0,0 +1 @@
+.b-segmented-control-button[data-v-3d11aefd]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:fit-content;min-height:20px;position:relative}.b-segmented-control-button[data-v-3d11aefd],.b-segmented-control-button[data-v-3d11aefd]:before,.b-segmented-control-button[data-v-3d11aefd]:after{box-sizing:border-box}.b-segmented-control-button *[data-v-3d11aefd],.b-segmented-control-button *[data-v-3d11aefd]:before,.b-segmented-control-button *[data-v-3d11aefd]:after{box-sizing:border-box}.b-segmented-control-button--disabled>*[data-v-3d11aefd]{cursor:not-allowed}.b-segmented-control-button--full-width[data-v-3d11aefd],.b-segmented-control-button--full-width .b-segmented-control-button__label-container[data-v-3d11aefd],.b-segmented-control-button--full-width .b-segmented-control-button__input[data-v-3d11aefd]{width:100%}.b-segmented-control-button--hug-content .b-segmented-control-button__label-container[data-v-3d11aefd],.b-segmented-control-button--hug-content .b-segmented-control-button__input[data-v-3d11aefd]{width:fit-content}.b-segmented-control-button__input[data-v-3d11aefd]{bottom:0;cursor:pointer;display:block;left:0;opacity:0;position:absolute;right:0;top:0}.b-segmented-control-button__input[data-v-3d11aefd]:disabled{cursor:not-allowed}.b-segmented-control-button__input:disabled+.b-segmented-control-button__label-container[data-v-3d11aefd]{color:var(--b-segmented-control-button-disabled-color);cursor:not-allowed}.b-segmented-control-button__input:hover:not(:disabled)+.b-segmented-control-button__label-container[data-v-3d11aefd]{background-color:var(--b-segmented-control-button-hover-background-color)}.b-segmented-control-button__input:focus-visible+.b-segmented-control-button__label-container[data-v-3d11aefd]{box-shadow:0 0 0 1px #fff,0 0 0 3px var(--b-focus-ring-color);transition:.1s cubic-bezier(.785,.135,.15,.86)}.b-segmented-control-button__input:checked+.b-segmented-control-button__label-container[data-v-3d11aefd]{background-color:var(--b-segmented-control-button-checked-background-color);padding:var(--b-segmented-control-button-checked-padding)}.b-segmented-control-button__input:checked:disabled+.b-segmented-control-button__label-container[data-v-3d11aefd]{color:var(--b-segmented-control-button-disabled-color)}.b-segmented-control-button__input:checked:hover:not(:disabled)+.b-segmented-control-button__label-container[data-v-3d11aefd]{background-color:var(--b-segmented-control-button-hover-background-color)}.b-segmented-control-button__label-container[data-v-3d11aefd]{align-items:center;border-radius:var(--b-segmented-control-button-border-radius);cursor:pointer;display:flex;justify-content:center;padding:var(--b-segmented-control-button-padding);white-space:nowrap;width:fit-content}.b-segmented-control-button__icon[data-v-3d11aefd]{margin-right:var(--b-segmented-control-button-icon-margin-right)}.b-segmented-control[data-v-8d0e9967]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-segmented-control-background-color);border:unset;border-radius:var(--b-segmented-control-border-radius);display:flex;margin-inline:0;padding:var(--b-segmented-control-padding);width:fit-content}.b-segmented-control[data-v-8d0e9967],.b-segmented-control[data-v-8d0e9967]:before,.b-segmented-control[data-v-8d0e9967]:after{box-sizing:border-box}.b-segmented-control *[data-v-8d0e9967],.b-segmented-control *[data-v-8d0e9967]:before,.b-segmented-control *[data-v-8d0e9967]:after{box-sizing:border-box}.b-segmented-control--full-width[data-v-8d0e9967]{justify-content:space-evenly;width:100%}.b-segmented-control--hidden[data-v-8d0e9967]{visibility:hidden}.b-segmented-control__item[data-v-8d0e9967]:not(:first-child){padding-left:var(--b-segmented-control-padding)}

package/dist/assets/index6.css

@@ -0,0 +1 @@
+.b-controls-group[data-v-d01b0fef]{border:0;margin:0;padding:0;width:fit-content}.b-controls-group--disabled[data-v-d01b0fef]{cursor:not-allowed}.b-controls-group__label[data-v-d01b0fef]{margin-bottom:12px}.b-controls-group__label--hidden[data-v-d01b0fef]{display:none}

package/dist/assets/index7.css

@@ -0,0 +1 @@
+.b-dropdown-tag[data-v-fb7ace74]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-dropdown-tag[data-v-fb7ace74],.b-dropdown-tag[data-v-fb7ace74]:before,.b-dropdown-tag[data-v-fb7ace74]:after{box-sizing:border-box}.b-dropdown-tag *[data-v-fb7ace74],.b-dropdown-tag *[data-v-fb7ace74]:before,.b-dropdown-tag *[data-v-fb7ace74]:after{box-sizing:border-box}.b-dropdown-tag[data-v-fb7ace74] .b-tag{overflow:hidden;white-space:nowrap}

package/dist/assets/index8.css

@@ -0,0 +1 @@
+.b-country[data-v-889009c7]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.b-country[data-v-889009c7],.b-country[data-v-889009c7]:before,.b-country[data-v-889009c7]:after{box-sizing:border-box}.b-country *[data-v-889009c7],.b-country *[data-v-889009c7]:before,.b-country *[data-v-889009c7]:after{box-sizing:border-box}.b-country__flag[data-v-889009c7]{align-items:center;display:flex}.b-country__flag-icon[data-v-889009c7]{height:16px;width:22px}.b-country__label[data-v-889009c7]{color:var(--b-country-label-color);padding:var(--b-country-label-padding)}

package/dist/assets/index9.css

@@ -0,0 +1 @@
+svg[data-v-4ebc0033]{display:inline-flex;flex-shrink:0}svg[data-v-4ebc0033],svg *[data-v-4ebc0033]{fill:currentcolor}svg[data-v-bda8fd91]{display:inline-flex;flex-shrink:0}svg[data-v-bda8fd91],svg *[data-v-bda8fd91]{fill:currentcolor}svg[data-v-23e56bf5]{display:inline-flex;flex-shrink:0}svg[data-v-23e56bf5],svg *[data-v-23e56bf5]{fill:currentcolor}svg[data-v-1954bfce]{display:inline-flex;flex-shrink:0}svg[data-v-1954bfce],svg *[data-v-1954bfce]{fill:currentcolor}svg[data-v-9da4de4c]{display:inline-flex;flex-shrink:0}svg[data-v-9da4de4c],svg *[data-v-9da4de4c]{fill:currentcolor}svg[data-v-2fe7aaf4]{display:inline-flex;flex-shrink:0}svg[data-v-2fe7aaf4],svg *[data-v-2fe7aaf4]{fill:currentcolor}svg[data-v-6e578b8e]{display:inline-flex;flex-shrink:0}svg[data-v-6e578b8e],svg *[data-v-6e578b8e]{fill:currentcolor}.b-data-grid-columns[data-v-2529fe45]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-data-grid-columns[data-v-2529fe45],.b-data-grid-columns[data-v-2529fe45]:before,.b-data-grid-columns[data-v-2529fe45]:after{box-sizing:border-box}.b-data-grid-columns *[data-v-2529fe45],.b-data-grid-columns *[data-v-2529fe45]:before,.b-data-grid-columns *[data-v-2529fe45]:after{box-sizing:border-box}.b-data-grid-columns--frozen[data-v-2529fe45]{border-right:var(--b-data-grid-columns-frozen-border-right-width) solid var(--b-data-grid-columns-frozen-border-right-color);display:flex;left:0;position:sticky;z-index:var(--b-data-grid-columns-frozen-z-index)}.b-data-grid-columns--unfrozen[data-v-2529fe45]{display:flex}.b-data-grid-columns--config-settings-margin[data-v-2529fe45]{margin-right:var(--b-data-grid-config-settings-column-and-row-margin)}.b-data-grid-columns__column[data-v-2529fe45]{background-color:var(--b-data-grid-column-background-color);color:var(--b-data-grid-column-color);display:flex;padding:var(--b-data-grid-column-padding);position:relative}.b-data-grid-columns__column--sortable[data-v-2529fe45]{cursor:pointer}.b-data-grid-columns__column--sortable[data-v-2529fe45]:hover{background-color:var(--b-data-grid-column-hover-background-color)}.b-data-grid-columns__column--padding-left-unset[data-v-2529fe45]{padding-left:0}.b-data-grid-columns__column--padding-right-unset[data-v-2529fe45]{padding-right:0}.b-data-grid-columns__column--overflow-ellipsis *[data-v-2529fe45]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-data-grid-columns__column--numeric[data-v-2529fe45]{justify-content:end;text-align:right}.b-data-grid-columns__column--is-re-ordering-target[data-v-2529fe45]:before{background-color:var(--b-data-grid-re-order-column-target-separator-background-color);content:"";height:calc(100% + var(--b-data-grid-columns-border-width));left:0;position:absolute;top:0;width:var(--b-data-grid-re-order-column-target-separator-width);z-index:var(--b-data-grid-re-order-column-target-separator-z-index)}.b-data-grid-columns__column[draggable=true][data-v-2529fe45]{cursor:move;cursor:grab}.b-data-grid-columns__column--is-re-ordering[data-v-2529fe45],.b-data-grid-columns__column--is-re-ordering *[data-v-2529fe45]{background-color:var(--b-data-grid-column-draggable-ghost-background-color);cursor:grabbing}.b-data-grid-columns__column-header[data-v-2529fe45]{align-items:center;display:flex;gap:var(--b-data-grid-column-header-gap)}.b-data-grid-columns__column-separator-container[data-v-2529fe45]{align-items:center;cursor:auto;display:flex;height:100%;justify-content:center;position:absolute;right:-4px;top:0;width:var(--b-data-grid-resizer-width);z-index:var(--b-data-grid-column-separator-z-index)}.b-data-grid-columns--unfrozen .b-data-grid-columns__column:last-child .b-data-grid-columns__column-separator-container[data-v-2529fe45]{right:var(--b-data-grid-resizer-width)}.b-data-grid-columns__column-separator-container--is-resizeable[data-v-2529fe45]{cursor:ew-resize}.b-data-grid-columns__column-separator[data-v-2529fe45]{border-right:var(--b-data-grid-column-separator-border-right-width) solid var(--b-data-grid-column-separator-border-right-color);display:block;height:var(--b-data-grid-column-separator-height);width:0}.b-data-grid-columns__column-separator-container--is-resizeable:hover .b-data-grid-columns__column-separator[data-v-2529fe45]{border-color:var(--b-data-grid-column-separator-resizeable-hover-color)}.b-data-grid-columns__column-actions[data-v-2529fe45]{display:flex;gap:var(--b-data-grid-column-actions-gap);margin-left:auto;padding-left:var(--b-data-grid-column-actions-padding-left)}.b-data-grid-columns__column-sort[data-v-2529fe45]{align-items:center;cursor:pointer;display:flex;flex-direction:column;height:20px;padding:var(--b-data-grid-column-sort-padding)}.b-data-grid-columns__column-sort-icon[data-v-2529fe45]{color:var(--b-data-grid-column-sort-icon-color);display:inline-flex;margin-top:-2px}.b-data-grid-columns__column-sort-icon[data-v-2529fe45]:nth-child(2){margin-top:-8px}.b-data-grid-columns__column--sortable:hover .b-data-grid-columns__column-sort-icon[data-v-2529fe45]{color:var(--b-data-grid-column-hover-sort-icon-color)}.b-data-grid-columns__column-sort-icon--sorted[data-v-2529fe45],.b-data-grid-columns__column--sortable:hover .b-data-grid-columns__column-sort-icon--sorted[data-v-2529fe45]{color:var(--b-data-grid-column-sort-icon-sorted-color)}.b-data-grid-columns__menu[data-v-2529fe45]{display:flex}@media (min-width: 376px){.b-data-grid-columns__menu[data-v-2529fe45] .b-menu__popover{width:200px}}svg[data-v-6e917c82]{display:inline-flex;flex-shrink:0}svg[data-v-6e917c82],svg *[data-v-6e917c82]{fill:currentcolor}.b-data-grid-config-settings-column-row[data-v-a1803741]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;display:flex;justify-content:space-between;padding:var(--b-data-grid-config-column-row-padding)}.b-data-grid-config-settings-column-row[data-v-a1803741],.b-data-grid-config-settings-column-row[data-v-a1803741]:before,.b-data-grid-config-settings-column-row[data-v-a1803741]:after{box-sizing:border-box}.b-data-grid-config-settings-column-row *[data-v-a1803741],.b-data-grid-config-settings-column-row *[data-v-a1803741]:before,.b-data-grid-config-settings-column-row *[data-v-a1803741]:after{box-sizing:border-box}@media (hover: hover){.b-data-grid-config-settings-column-row[data-v-a1803741]:hover{background-color:var(--b-data-grid-config-column-row-hover-background-color)}}.b-data-grid-config-settings-column-row__freeze-icon[data-v-a1803741]{color:var(--b-data-grid-config-column-row-freeze-icon-color);cursor:pointer}.b-data-grid-config-settings-column-row__freeze-icon--frozen[data-v-a1803741]{color:var(--b-data-grid-config-column-row-freeze-icon-frozen-color)}.b-data-grid-config-settings[data-v-0c769029]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-data-grid-config-settings[data-v-0c769029],.b-data-grid-config-settings[data-v-0c769029]:before,.b-data-grid-config-settings[data-v-0c769029]:after{box-sizing:border-box}.b-data-grid-config-settings *[data-v-0c769029],.b-data-grid-config-settings *[data-v-0c769029]:before,.b-data-grid-config-settings *[data-v-0c769029]:after{box-sizing:border-box}.b-data-grid-config-settings__button-and-seperator[data-v-0c769029]{align-items:center;background-color:var(--b-data-grid-config-settings-button-and-seperator-background-color);display:flex;height:calc(100% - var(--b-data-grid-columns-border-width));padding:var(--b-data-grid-config-settings-button-and-seperator-padding)}.b-data-grid-config-settings__button-container[data-v-0c769029]{display:flex;padding:var(--b-data-grid-config-settings-button-padding)}.b-data-grid-config-settings__column-separator[data-v-0c769029]{border-right:var(--b-data-grid-column-separator-border-right-width) solid var(--b-data-grid-column-separator-border-right-color);display:block;height:var(--b-data-grid-column-separator-height);width:0}.b-data-grid-config-settings__panel[data-v-0c769029]{min-width:285px}.b-data-grid-config-settings__panel[data-v-0c769029] .b-popover__content{padding:14px 0}.b-data-grid-config-settings__panel-header[data-v-0c769029]{align-items:center;display:flex;justify-content:space-between;padding:var(--b-data-grid-config-panel-header-padding)}.b-data-grid-config-settings__compact-view-settings[data-v-0c769029]{border-bottom:1px solid var(--b-data-grid-config-compact-view-border-color);padding:var(--b-data-grid-config-compact-view-padding)}.b-data-grid-config-settings__compact-view-title[data-v-0c769029]{display:block;padding:var(--b-data-grid-config-compact-view-title-padding)}.b-data-grid-config-settings__column-visibility-settings[data-v-0c769029]{padding:var(--b-data-grid-config-column-visibility-padding)}.b-data-grid-config-settings__column-visibility-header[data-v-0c769029]{display:flex;justify-content:space-between;padding:var(--b-data-grid-config-column-visibility-header-padding)}.b-data-grid-config-settings__column-visibility-show-all[data-v-0c769029]{background-color:var(--b-data-grid-config-column-visibility-show-all-background-color);border-radius:var(--b-data-grid-config-column-visibility-show-all-border-radius);margin:var(--b-data-grid-config-column-visibility-show-all-margin);padding:var(--b-data-grid-config-column-visibility-show-all-padding)}.b-data-grid-config-settings__column-visibility-search[data-v-0c769029]{margin:var(--b-data-grid-config-column-visibility-search-margin)}.b-data-grid-config-settings__column-visibility-toggles[data-v-0c769029]{display:flex;flex-direction:column}.b-data-grid-config-settings__column-visibility-empty-search-message[data-v-0c769029]{color:var(--b-data-grid-config-column-visibility-empty-search-message-color);padding:var(--b-data-grid-config-column-visibility-empty-search-message-padding);text-align:center}.b-data-grid[data-v-b65e5893]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}.b-data-grid[data-v-b65e5893],.b-data-grid[data-v-b65e5893]:before,.b-data-grid[data-v-b65e5893]:after{box-sizing:border-box}.b-data-grid *[data-v-b65e5893],.b-data-grid *[data-v-b65e5893]:before,.b-data-grid *[data-v-b65e5893]:after{box-sizing:border-box}.b-data-grid--outline[data-v-b65e5893]{border:var(--b-data-grid-border-width) solid var(--b-data-grid-border-color);border-radius:var(--b-data-grid-border-radius);overflow:hidden}.b-data-grid__body[data-v-b65e5893]{overflow-x:auto;width:100%}.b-data-grid__header[data-v-b65e5893]{border-bottom:var(--b-data-grid-columns-border-width) solid var(--b-data-grid-columns-border-color);padding:var(--b-data-grid-header-padding)}.b-data-grid__columns[data-v-b65e5893]{border-bottom:var(--b-data-grid-columns-border-width) solid var(--b-data-grid-columns-border-color);break-inside:avoid;display:flex;position:relative;width:fit-content}.b-data-grid__columns-row[data-v-b65e5893]{display:flex}.b-data-grid__row-cell-set--frozen[data-v-b65e5893]{border-right:var(--b-data-grid-rows-frozen-border-right-width) solid var(--b-data-grid-rows-frozen-border-right-color);display:flex;left:0;position:sticky;z-index:var(--b-data-grid-rows-frozen-z-index)}.b-data-grid__row-cell-set--unfrozen[data-v-b65e5893]{display:flex}.b-data-grid__row-cell-set--config-settings-margin[data-v-b65e5893]{margin-right:var(--b-data-grid-config-settings-column-and-row-margin)}.b-data-grid__rows>*[data-v-b65e5893]:not(:last-child){border-bottom:var(--b-data-grid-row-border-width) solid var(--b-data-grid-row-border-color)}.b-data-grid__row[data-v-b65e5893]{background-color:var(--b-data-grid-row-background-color);break-inside:avoid;color:var(--b-data-grid-row-color);display:flex;position:relative}.b-data-grid__row[data-v-b65e5893]:hover,.b-data-grid__row:hover .b-data-grid__cell[data-v-b65e5893]{background-color:var(--b-data-grid-row-hover-background-color)}.b-data-grid__row[data-v-b65e5893]:hover .b-link{text-decoration:underline}.b-data-grid__row[data-v-b65e5893]:last-child{box-shadow:unset}.b-data-grid--outline .b-data-grid__row[data-v-b65e5893]:last-child{border-bottom-left-radius:var(--b-data-grid-border-radius);border-bottom-right-radius:var(--b-data-grid-border-radius)}.b-data-grid__row--row-clicks-enabled[data-v-b65e5893]{cursor:pointer}.b-data-grid__row--disabled[data-v-b65e5893]{color:var(--b-data-grid-row-disabled-color);cursor:not-allowed}.b-data-grid__row--is-re-ordering[data-v-b65e5893]{cursor:grabbing}.b-data-grid__cell[data-v-b65e5893]{background-color:var(--b-data-grid-cell-background-color);padding:var(--b-data-grid-cell-padding)}.b-data-grid__cell--condensed[data-v-b65e5893]{padding:var(--b-data-grid-cell-condensed-padding)}.b-data-grid__cell--padding-left-unset[data-v-b65e5893]{padding-left:0}.b-data-grid__cell--padding-right-unset[data-v-b65e5893]{padding-right:0}.b-data-grid__cell--overflow-ellipsis *[data-v-b65e5893]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-data-grid__cell--numeric[data-v-b65e5893]{justify-content:end;text-align:right}.b-data-grid__cell--is-column-re-ordering[data-v-b65e5893]{background-color:var(--b-data-grid-column-draggable-ghost-background-color);cursor:grabbing}.b-data-grid__cell--is-column-re-order-target[data-v-b65e5893]{position:relative}.b-data-grid__cell--is-column-re-order-target[data-v-b65e5893]:before{background-color:var(--b-data-grid-re-order-column-target-separator-background-color);content:"";height:calc(100% + var(--b-data-grid-columns-border-width));left:0;position:absolute;top:0;width:var(--b-data-grid-re-order-column-target-separator-width);z-index:var(--b-data-grid-re-order-column-target-separator-z-index)}.b-data-grid__footer[data-v-b65e5893]{padding:var(--b-data-grid-footer-padding)}.b-data-grid__filters[data-v-b65e5893]{border-bottom:var(--b-data-grid-filters-border-width) solid var(--b-data-grid-filters-border-color);display:flex;justify-content:end;padding:var(--b-data-grid-filters-padding);position:relative}.b-data-grid__pagination[data-v-b65e5893]{background-color:var(--b-data-grid-pagination-background-color);border-top:var(--b-data-grid-pagination-border-width) solid var(--b-data-grid-pagination-border-color);padding:var(--b-data-grid-pagination-padding)}.b-data-grid__pagination--padding-left-unset[data-v-b65e5893]{padding-left:0}.b-data-grid__pagination--padding-right-unset[data-v-b65e5893]{padding-right:0}.b-data-grid__pagination--sticky[data-v-b65e5893]{bottom:0;padding:var(--b-data-grid-pagination-sticky-padding);position:sticky;z-index:var(--b-data-grid-pagination-z-index)}.b-data-grid--outline .b-data-grid__pagination[data-v-b65e5893]{padding:var(--b-data-grid-pagination-outline-padding)}.b-data-grid__loading[data-v-b65e5893]{align-items:center;display:flex;flex-direction:column;height:400px;justify-content:center;width:100%}.b-data-grid__loading-indicator[data-v-b65e5893]{margin:var(--b-data-grid-loading-indicator-margin)}.b-data-grid__config-settings[data-v-b65e5893]{display:flex;position:absolute;right:0;z-index:var(--b-data-grid-config-settings-z-index)}

package/dist/assets/info-filled.css

@@ -0,0 +1 @@
+svg[data-v-5b9448a4]{display:inline-flex;flex-shrink:0}svg[data-v-5b9448a4],svg *[data-v-5b9448a4]{fill:currentcolor}

package/dist/assets/listbox-option-tag.css

@@ -0,0 +1 @@
+.b-avatar[data-v-c8372cc1]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;display:flex}.b-avatar[data-v-c8372cc1],.b-avatar[data-v-c8372cc1]:before,.b-avatar[data-v-c8372cc1]:after{box-sizing:border-box}.b-avatar *[data-v-c8372cc1],.b-avatar *[data-v-c8372cc1]:before,.b-avatar *[data-v-c8372cc1]:after{box-sizing:border-box}.b-avatar__label[data-v-c8372cc1]{color:var(--b-avatar-label-color);padding:var(--b-avatar-label-padding)}.b-listbox-tag-option[data-v-d76afc70]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;display:flex}.b-listbox-tag-option[data-v-d76afc70],.b-listbox-tag-option[data-v-d76afc70]:before,.b-listbox-tag-option[data-v-d76afc70]:after{box-sizing:border-box}.b-listbox-tag-option *[data-v-d76afc70],.b-listbox-tag-option *[data-v-d76afc70]:before,.b-listbox-tag-option *[data-v-d76afc70]:after{box-sizing:border-box}.b-listbox-tag-option__tag[data-v-d76afc70]{min-width:45px}.b-listbox-tag-option__label[data-v-d76afc70]{padding:var(--b-listbox-option-tag-label-padding)}

package/dist/assets/listbox.css

@@ -0,0 +1 @@
+.b-listbox-option[data-v-962d938e]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;overflow-wrap:anywhere;padding:var(--b-listbox-option-padding)}.b-listbox-option[data-v-962d938e],.b-listbox-option[data-v-962d938e]:before,.b-listbox-option[data-v-962d938e]:after{box-sizing:border-box}@media (hover: hover){.b-listbox-option[data-v-962d938e]:hover:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-hover-background-color)}.b-listbox-option[data-v-962d938e]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-962d938e]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-962d938e]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-962d938e]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-hover-font-color)}.b-legacy-theme .b-listbox-option[data-v-962d938e]:hover:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-962d938e]:hover:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-hover-font-color)}}.b-listbox-option[data-v-962d938e]:focus-visible{outline:none}.b-listbox-option[data-v-962d938e]:focus-visible:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-focus-background-color);color:var(--b-listbox-option-focus-font-color)}.b-listbox-option[data-v-962d938e]:active:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-active-background-color)}.b-listbox-option[data-v-962d938e]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-962d938e]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-962d938e]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-962d938e]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-active-font-color)}.b-legacy-theme .b-listbox-option[data-v-962d938e]:active:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-962d938e]:active:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-active-description-color)}.b-listbox-option[data-v-962d938e] .b-listbox-single-select-option__text,.b-listbox-option[data-v-962d938e] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-962d938e] .b-listbox-single-select-option__description,.b-listbox-option[data-v-962d938e] .b-listbox-multi-select__option-description{margin-top:var(--b-listbox-option-description-margin-top)}.b-listbox-option[data-v-962d938e]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-962d938e]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-listbox-option-description-color)}.b-listbox-option--disabled[data-v-962d938e]{cursor:not-allowed}.b-listbox-option--disabled[data-v-962d938e],.b-listbox-option--disabled[data-v-962d938e] .b-avatar__label,.b-listbox-option--disabled[data-v-962d938e] .b-country__label,.b-listbox-option--disabled[data-v-962d938e] .b-payment-method__label{color:var(--b-listbox-option-disabled-font-color)}.b-listbox-option--selected[data-v-962d938e]:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-selected-background-color)}.b-listbox-option--selected[data-v-962d938e]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-962d938e]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-962d938e]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-962d938e]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-selected-font-color)}.b-listbox-option--selected[data-v-962d938e]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-962d938e]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-selected-description-color)}svg[data-v-4687fbd0]{display:inline-flex;flex-shrink:0}svg[data-v-4687fbd0],svg *[data-v-4687fbd0]{fill:currentcolor}.b-listbox-single-select-option[data-v-96a27d78]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-96a27d78]{align-items:center;display:flex;margin-left:var(--b-listbox-single-select-check-icon-margin)}.b-listbox-multi-select-option[data-v-1f8f90e2]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-listbox-multi-select-option-gap)}.b-listbox-multi-select-option[data-v-1f8f90e2],.b-listbox-multi-select-option[data-v-1f8f90e2]:before,.b-listbox-multi-select-option[data-v-1f8f90e2]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-64b4d895]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-64b4d895],.b-listbox-multi-select[data-v-64b4d895]:before,.b-listbox-multi-select[data-v-64b4d895]:after{box-sizing:border-box}.b-listbox-multi-select__divider[data-v-64b4d895]{background-color:var(--b-listbox-multi-select-divider-background-color);border:0;height:1px;margin:var(--b-listbox-multi-select-divider-margin)}.b-listbox-multi-select__option[data-v-64b4d895]{display:flex;gap:var(--b-listbox-multi-select-option-gap)}.b-listbox[data-v-b513c0c3]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-listbox-background-color);overflow-y:auto;padding:var(--b-listbox-padding)}.b-listbox[data-v-b513c0c3],.b-listbox[data-v-b513c0c3]:before,.b-listbox[data-v-b513c0c3]:after{box-sizing:border-box}.b-listbox *[data-v-b513c0c3],.b-listbox *[data-v-b513c0c3]:before,.b-listbox *[data-v-b513c0c3]:after{box-sizing:border-box}.b-listbox__empty-search-message[data-v-b513c0c3]{color:var(--b-listbox-empty-search-message-color);padding:var(--b-listbox-empty-search-message-padding);text-align:center}

package/dist/assets/search.css

@@ -0,0 +1 @@
+svg[data-v-493560a7]{display:inline-flex;flex-shrink:0}svg[data-v-493560a7],svg *[data-v-493560a7]{fill:currentcolor}

package/dist/assets/tooltip.css

@@ -0,0 +1 @@
+.b-tooltip[data-v-165c481a]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-tooltip-background-color);border-radius:var(--b-tooltip-border-radius);color:var(--b-tooltip-color);max-width:var(--b-tooltip-max-width);padding:var(--b-tooltip-padding);pointer-events:none;text-align:center;z-index:var(--b-tooltip-z-index)}.b-tooltip[data-v-165c481a],.b-tooltip[data-v-165c481a]:before,.b-tooltip[data-v-165c481a]:after{box-sizing:border-box}.b-tooltip *[data-v-165c481a],.b-tooltip *[data-v-165c481a]:before,.b-tooltip *[data-v-165c481a]:after{box-sizing:border-box}@media (max-width: 375px){.b-tooltip[data-v-165c481a]{max-width:100%}}.b-tooltip--hidden[data-v-165c481a]{display:none}.b-tooltip--hidden[data-v-165c481a] .b-tooltip__arrow:before{display:none}.b-tooltip[data-v-165c481a] .b-tooltip__arrow:before{color:var(--b-tooltip-background-color);display:block}

package/dist/avatar-image.js

@@ -0,0 +1,7 @@
+import { A as t, B as e, a as o } from "./chunks/index.e2141d95.js";
+export {
+  t as AvatarImage,
+  e as BentoAvatarImageColor,
+  o as BentoAvatarImageVariant
+};
+//# sourceMappingURL=avatar-image.js.map

package/dist/avatar-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-image.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/badge.js

@@ -0,0 +1,57 @@
+import "./assets/index.css";
+import { defineComponent as o, computed as i } from "vue";
+import { u as c } from "./chunks/aria-label.ac9651a5.js";
+import { n as _ } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+var s = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.ATTENTION = "attention", e.WARNING = "warning", e.CRITICAL = "critical", e.SUCCESS = "success", e))(s || {});
+const d = o({
+  name: "adl-badge",
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Types of flavour of Badge
+     * @values default, attention, warning, critical, success
+     */
+    variant: {
+      type: String,
+      default: s.DEFAULT,
+      validator: (e) => Object.values(s).includes(e)
+    },
+    /**
+     * For testing purposes you can decide which testId your adl-badge instance will have
+     */
+    testId: {
+      type: String,
+      default: "adl-badge"
+    }
+  },
+  setup(e, { slots: t }) {
+    var n, r;
+    const a = c({ label: (r = (n = t.default()[0]) == null ? void 0 : n.text) == null ? void 0 : r.trim(), defaultFallback: "badge" }), l = i(() => ({
+      [`adl2-badge--${e.variant}`]: !0
+    }));
+    return {
+      // Values
+      ariaLabel: a,
+      conditionalClasses: l
+    };
+  }
+});
+var u = function() {
+  var t = this, a = t._self._c;
+  return t._self._setupProxy, a("div", { staticClass: "adl2-badge", class: t.conditionalClasses, attrs: { "aria-label": t.ariaLabel, role: "status", "data-testid": t.testId } }, [t.$slots.icon ? t._t("icon") : t._e(), t._t("default")], 2);
+}, f = [], p = /* @__PURE__ */ _(
+  d,
+  u,
+  f,
+  !1,
+  null,
+  "a4285e51",
+  null,
+  null
+);
+const g = p.exports;
+export {
+  g as AdlBadge,
+  s as AdlBadgeVariant
+};
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../src/components/badge/badge.types.ts","../src/components/badge/badge.vue"],"sourcesContent":["export enum AdlBadgeVariant {\n    DEFAULT = 'default',\n    ATTENTION = 'attention',\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    SUCCESS = 'success',\n}\n","<template>\n    <div class=\"adl2-badge\" :class=\"conditionalClasses\" :aria-label=\"ariaLabel\" role=\"status\" :data-testid=\"testId\">\n        <slot v-if=\"$slots.icon\" name=\"icon\"></slot>\n        <slot></slot>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { AdlBadgeVariant } from './badge.types';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    export default defineComponent({\n        name: 'adl-badge',\n        inheritAttrs: false,\n        props: {\n            /**\n             * Types of flavour of Badge\n             * @values default, attention, warning, critical, success\n             */\n            variant: {\n                type: String as PropType<AdlBadgeVariant>,\n                default: AdlBadgeVariant.DEFAULT,\n                validator: (value: AdlBadgeVariant) => Object.values(AdlBadgeVariant).includes(value),\n            },\n            /**\n             * For testing purposes you can decide which testId your adl-badge instance will have\n             */\n            testId: {\n                type: String,\n                default: 'adl-badge',\n            },\n        },\n        setup(props, { slots }) {\n            const ariaLabel = useAriaLabel({ label: slots.default()[0]?.text?.trim(), defaultFallback: 'badge' });\n\n            const conditionalClasses = computed((): { [x: string]: boolean } => ({\n                [`adl2-badge--${props.variant}`]: true,\n            }));\n\n            return {\n                // Values\n                ariaLabel,\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./badge.scss\" />\n"],"names":["AdlBadgeVariant","AdlBadgeVariant2","_sfc_main","defineComponent","value","props","slots","ariaLabel","useAriaLabel","_b","_a","conditionalClasses","computed"],"mappings":";;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;ACYZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;;AAEA,UAAAC,IAAAC,EAAA,EAAA,QAAAC,KAAAC,IAAAJ,EAAA,QAAA,EAAA,CAAA,MAAA,gBAAAI,EAAA,SAAA,gBAAAD,EAAA,QAAA,iBAAA,QAAA,CAAA,GAEAE,IAAAC,EAAA,OAAA;AAAA,MAAA,CAAA,eAAAP,EAAA,SAAA,GAAA;AAAA,IACA,EAAA;AAGA,WAAA;AAAA;AAAA,MAAA,WAAAE;AAAA,MAEA,oBAAAI;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/button.js

@@ -0,0 +1,110 @@
+import "./assets/index21.css";
+import { B as e, a as s } from "./chunks/button.31b757d1.js";
+import { b as O } from "./chunks/button.31b757d1.js";
+import { n as r } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as D, c as E, a as N, b as P } from "./chunks/button-actions.59406268.js";
+import { defineComponent as c, computed as i } from "vue";
+import { BentoLoadingIndicator as d } from "./loading-indicator.js";
+import { C as u } from "./chunks/cross-circle-fill.0a1d738c.js";
+import { C as _ } from "./chunks/checkmark-circle-fill.d1aa324d.js";
+const f = {};
+var p = function() {
+  var t = this, o = t._self._c;
+  return o("div", { staticClass: "b-button-group" }, [t._t("default")], 2);
+}, v = [], b = /* @__PURE__ */ r(
+  f,
+  p,
+  v,
+  !1,
+  null,
+  "08f9732c",
+  null,
+  null
+);
+const G = b.exports;
+var a = /* @__PURE__ */ ((n) => (n.START = "start", n.LOADING = "loading", n.SUCCESS = "success", n.FAIL = "fail", n))(a || {});
+const m = c({
+  name: "bento-loading-button",
+  components: { BentoButton: e, Cross: u, Checkmark: _, BentoLoadingIndicator: d },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Reduces sizing of button
+     */
+    condensed: {
+      type: e.props.condensed.type,
+      default: !1
+    },
+    /**
+     * Disables button functonality
+     */
+    disabled: {
+      type: e.props.disabled.type,
+      default: !1
+    },
+    /**
+     * State of the button.
+     * @values start, loading, success, fail
+     */
+    state: {
+      type: String,
+      default: a.START,
+      validator: (n) => Object.values(a).includes(n)
+    },
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary
+     */
+    variant: {
+      type: e.props.variant.type,
+      default: s.PRIMARY,
+      validator: e.props.variant.validator
+    }
+  },
+  setup(n, { emit: t }) {
+    const o = i(() => ({
+      [`b-loading-button--${n.variant}-${a.LOADING}`]: n.state === a.LOADING && !n.disabled,
+      [`b-loading-button--${n.variant}-${a.SUCCESS}`]: n.state === a.SUCCESS
+    })), l = i(() => n.variant === s.PRIMARY);
+    return {
+      // Enums
+      BentoLoadingButtonState: a,
+      // Functions
+      onClick: () => {
+        n.state !== a.LOADING && t("click");
+      },
+      // Values
+      conditionalClasses: o,
+      isInverseLoadingIndicator: l
+    };
+  }
+});
+var B = function() {
+  var t = this, o = t._self._c;
+  return t._self._setupProxy, o("div", { staticClass: "b-loading-button", class: t.conditionalClasses, attrs: { "data-testid": "loading-button" } }, [o("bento-button", { attrs: { critical: t.state === t.BentoLoadingButtonState.FAIL, variant: t.variant, condensed: t.condensed, disabled: t.disabled }, on: { click: t.onClick }, scopedSlots: t._u([t.state !== t.BentoLoadingButtonState.START ? { key: "iconLeft", fn: function() {
+    return [o("span", { staticClass: "b-loading-button__icon", attrs: { "data-testid": "loading-button-rotating-icon" } }, [t.state === t.BentoLoadingButtonState.FAIL ? o("cross", { attrs: { "svg-title": "failed" } }) : t.state === t.BentoLoadingButtonState.SUCCESS ? o("checkmark", { attrs: { "svg-title": "succeded" } }) : t.state === t.BentoLoadingButtonState.LOADING ? o("bento-loading-indicator", { attrs: { small: "", inverse: t.isInverseLoadingIndicator } }) : t._e()], 1)];
+  }, proxy: !0 } : null], null, !0) }, [t._t("default")], 2)], 1);
+}, C = [], g = /* @__PURE__ */ r(
+  m,
+  B,
+  C,
+  !1,
+  null,
+  "40d4697b",
+  null,
+  null
+);
+const $ = g.exports;
+export {
+  e as BentoButton,
+  D as BentoButtonActions,
+  E as BentoButtonActionsLayout,
+  N as BentoButtonActionsLayoutBasic,
+  P as BentoButtonActionsLayoutExtended,
+  G as BentoButtonGroup,
+  O as BentoButtonPropClass,
+  s as BentoButtonVariant,
+  $ as BentoLoadingButton,
+  a as BentoLoadingButtonState
+};
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../src/components/button/components/loading-button/loading-button.types.ts","../src/components/button/components/loading-button/loading-button.vue"],"sourcesContent":["export enum BentoLoadingButtonState {\n    START = 'start',\n    LOADING = 'loading',\n    SUCCESS = 'success',\n    FAIL = 'fail',\n}\n\nexport type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>;\n","<template>\n    <div class=\"b-loading-button\" data-testid=\"loading-button\" :class=\"conditionalClasses\">\n        <bento-button\n            :critical=\"state === BentoLoadingButtonState.FAIL\"\n            :variant=\"variant\"\n            :condensed=\"condensed\"\n            :disabled=\"disabled\"\n            @click=\"onClick\"\n        >\n            <slot></slot>\n            <template v-if=\"state !== BentoLoadingButtonState.START\" #iconLeft>\n                <span class=\"b-loading-button__icon\" data-testid=\"loading-button-rotating-icon\">\n                    <cross v-if=\"state === BentoLoadingButtonState.FAIL\" svg-title=\"failed\" />\n                    <checkmark v-else-if=\"state === BentoLoadingButtonState.SUCCESS\" svg-title=\"succeded\" />\n                    <!-- TODO: Replace with new loading-indicator component -->\n                    <bento-loading-indicator\n                        v-else-if=\"state === BentoLoadingButtonState.LOADING\"\n                        small\n                        :inverse=\"isInverseLoadingIndicator\"\n                    />\n                </span>\n            </template>\n        </bento-button>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonVariant } from '@/components/button/button.types';\n    import { BentoLoadingButtonState } from './loading-button.types';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import BentoButton from '@/components/button/button.vue';\n    import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n\n    export default defineComponent({\n        name: 'bento-loading-button',\n        components: { BentoButton, Cross, Checkmark, BentoLoadingIndicator },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Reduces sizing of button\n             */\n            condensed: {\n                type: BentoButton.props.condensed.type,\n                default: false,\n            },\n\n            /**\n             * Disables button functonality\n             */\n            disabled: {\n                type: BentoButton.props.disabled.type,\n                default: false,\n            },\n\n            /**\n             * State of the button.\n             * @values start, loading, success, fail\n             */\n            state: {\n                type: String as PropType<BentoLoadingButtonState>,\n                default: BentoLoadingButtonState.START,\n                validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value),\n            },\n\n            /**\n             * Types of flavour of Button\n             * @values primary, secondary, tertiary\n             */\n            variant: {\n                type: BentoButton.props.variant.type,\n                default: BentoButtonVariant.PRIMARY,\n                validator: BentoButton.props.variant.validator,\n            },\n        },\n        setup(props, { emit }) {\n            const conditionalClasses = computed(() => ({\n                [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]:\n                    props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n                [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]:\n                    props.state === BentoLoadingButtonState.SUCCESS,\n            }));\n\n            const isInverseLoadingIndicator = computed(() => props.variant === BentoButtonVariant.PRIMARY);\n\n            const onClick = () => {\n                if (props.state !== BentoLoadingButtonState.LOADING) {\n                    emit('click');\n                }\n            };\n\n            return {\n                // Enums\n                BentoLoadingButtonState,\n\n                // Functions\n                onClick,\n\n                // Values\n                conditionalClasses,\n                isInverseLoadingIndicator,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./loading-button.scss\" />\n"],"names":["BentoLoadingButtonState","BentoLoadingButtonState2","_sfc_main","defineComponent","BentoButton","CrossCircleFillIcon","CheckedCircle","BentoLoadingIndicator","value","BentoButtonVariant","props","emit","conditionalClasses","computed","isInverseLoadingIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,OAAA,QAJQA,IAAAD,KAAA,CAAA,CAAA;ACmCZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,OAAAC,GAAA,WAAAC,GAAA,uBAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAAH,EAAA,MAAA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAKA,MAAAA,EAAA,MAAA,SAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAJ,EAAA;AAAA,MACA,WAAA,CAAAQ,MAAA,OAAA,OAAAR,CAAA,EAAA,SAAAQ,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAMA,MAAAJ,EAAA,MAAA,QAAA;AAAA,MACA,SAAAK,EAAA;AAAA,MACA,WAAAL,EAAA,MAAA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAM,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA;AAAA,MAAA,CAAA,qBAAAH,EAAA,WAAAV,EAAA,SAAA,GAAAU,EAAA,UAAAV,EAAA,WAAA,CAAAU,EAAA;AAAA,MAEA,CAAA,qBAAAA,EAAA,WAAAV,EAAA,SAAA,GAAAU,EAAA,UAAAV,EAAA;AAAA,IAEA,EAAA,GAGAc,IAAAD,EAAA,MAAAH,EAAA,YAAAD,EAAA,OAAA;AAQA,WAAA;AAAA;AAAA,MAAA,yBAAAT;AAAA;AAAA,MAEA,SARA,MAAA;AACA,QAAAU,EAAA,UAAAV,EAAA,WACAW,EAAA,OAAA;AAAA,MACA;AAAA;AAAA,MAQA,oBAAAC;AAAA,MAGA,2BAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/card.js

@@ -0,0 +1,178 @@
+import "./assets/index22.css";
+import { defineComponent as v, ref as w, computed as o } from "vue";
+import { BentoTypography as B, BentoTypographyElement as _, BentoTypographyVariant as r } from "./typography.js";
+import { a as S, C as k } from "./chunks/chevron-up.416431cd.js";
+import { h as d } from "./chunks/hasSlot.dceac207.js";
+import { g as A } from "./chunks/unique-id.a2a2b458.js";
+import { B as E, c as u } from "./chunks/button-actions.59406268.js";
+import { n as L } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+var y = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t))(y || {}), l = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.SMALL = "small", t))(l || {});
+const D = v({
+  name: "bento-card",
+  components: { ChevronUpIcon: S, ChevronDownIcon: k, BentoTypography: B, BentoButtonActions: E },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Defines the color of card background
+     */
+    background: {
+      type: String,
+      default: y.PRIMARY
+    },
+    /**
+     * Defines the title size of the card header
+     */
+    titleSize: {
+      type: String,
+      default: l.DEFAULT
+    },
+    /**
+     * The whole content of the card will be expandable in accordion manner
+     */
+    expandable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Initially sets the expandable card in a closed state
+     */
+    closed: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Disables the expandable card
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Defines the layout in which the button actions is presented.
+     * It can be one of:
+     *
+     * @values BUTTONS_START
+     * @values BUTTONS_END
+     * @values FILL_CONTAINER
+     * @values SPACE_BETWEEN
+     * @values VERTICAL_STACK
+     */
+    actionsLayout: {
+      type: String,
+      default: u.BUTTONS_END,
+      validator: (t) => Object.values(u).includes(t)
+    }
+  },
+  emits: ["click", "expanded"],
+  setup(t, { emit: a, slots: e }) {
+    const n = A("card"), s = w(!t.closed), c = o(() => d(e)("default") || d(e)("description")), b = o(
+      () => {
+        var i;
+        return (d(e)("content") || ((i = t.actions) == null ? void 0 : i.length)) && (!t.expandable || t.expandable && s.value);
+      }
+    ), p = o(() => t.expandable && !t.disabled ? 0 : -1), C = o(() => ({
+      [`b-card--${t.background}`]: t.background,
+      "b-card--expandable": t.expandable,
+      "b-card--disabled": t.expandable && t.disabled
+    })), h = o(() => ({
+      "b-card__header--expandable": t.expandable,
+      "b-card__header--without-body": !t.expandable && !b.value
+    })), f = o(() => ({
+      "b-card__body--expandable": t.expandable && d(e)("content"),
+      "b-card__body--without-header": !t.expandable && !c.value
+    })), x = o(() => ({
+      "b-card__content--without-header": !t.expandable && !c.value,
+      "b-card__content--expandable": t.expandable
+    })), g = o(() => {
+      const i = !t.expandable && t.actions && !d(e)("content");
+      return {
+        "b-card__actions--without-content": i,
+        "b-card__actions--without-content-and-with-header": i && c.value
+      };
+    }), m = o(() => ({
+      el: _.DIV,
+      variant: t.titleSize === l.DEFAULT ? r.SUBTITLE : r.BODY,
+      stronger: t.titleSize === l.DEFAULT,
+      strongest: t.titleSize === l.SMALL,
+      wide: t.titleSize === l.SMALL
+    }));
+    return {
+      // Values
+      cardId: n,
+      cardConditionalClasses: C,
+      cardBodyConditionalClasses: f,
+      cardHeaderConditionalClasses: h,
+      cardContentConditionalClasses: x,
+      cardActionsConditionalClasses: g,
+      showCardBody: b,
+      showContent: s,
+      tabIndex: p,
+      showHeader: c,
+      typography: m,
+      // Methods
+      onClick: () => {
+        t.disabled || a("click");
+      },
+      toggleExpansion: () => {
+        t.disabled || (s.value = !s.value, a("expanded", s.value));
+      },
+      hasSlot: d(e),
+      // Enums
+      BentoTypographyVariant: r,
+      BentoTypographyElement: _
+    };
+  }
+});
+var I = function() {
+  var a = this, e = a._self._c;
+  return a._self._setupProxy, e("div", { staticClass: "b-card", class: a.cardConditionalClasses, attrs: { "data-testid": "card" }, on: { click: a.onClick } }, [a.showHeader ? e("div", { staticClass: "b-card__header", class: a.cardHeaderConditionalClasses, attrs: { tabindex: a.tabIndex, "aria-controls": a.expandable ? a.cardId : null, "aria-expanded": a.expandable ? `${a.showContent}` : null }, on: { click: a.toggleExpansion, keypress: [function(n) {
+    return !n.type.indexOf("key") && a._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : a.toggleExpansion.apply(null, arguments);
+  }, function(n) {
+    return !n.type.indexOf("key") && a._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]) ? null : a.toggleExpansion.apply(null, arguments);
+  }] } }, [a.expandable ? e("span", { staticClass: "adl-accordion-item__caret", attrs: { "aria-hidden": "true" } }, [a.showContent ? e("chevron-up-icon", { attrs: { "svg-title": "show accordion item" } }) : e("chevron-down-icon", { attrs: { "svg-title": "hide accordion item" } })], 1) : a._e(), e("div", { staticClass: "b-card__title-wrapper" }, [a.hasSlot("default") ? e("bento-typography", a._b({ staticClass: "b-card__title", attrs: { "aria-label": "card title" } }, "bento-typography", a.typography, !1), [a._t("default")], 2) : a._e(), a.hasSlot("description") ? e("bento-typography", { staticClass: "b-card__description", attrs: { el: a.BentoTypographyElement.DIV, variant: a.BentoTypographyVariant.BODY } }, [a._t("description")], 2) : a._e()], 1)]) : a._e(), a.showCardBody ? e("div", { staticClass: "b-card__body", class: a.cardBodyConditionalClasses, attrs: { id: a.expandable ? a.cardId : null } }, [a.hasSlot("content") ? e("div", { staticClass: "b-card__content", class: a.cardContentConditionalClasses, attrs: { "aria-label": "card content" } }, [a._t("content")], 2) : a._e(), a.actions ? e("div", { staticClass: "b-card__actions", class: a.cardActionsConditionalClasses, attrs: { "aria-label": "card actions" } }, [e("bento-button-actions", { attrs: { actions: a.actions, layout: a.actionsLayout } })], 1) : a._e()]) : a._e()]);
+}, T = [], U = /* @__PURE__ */ L(
+  D,
+  I,
+  T,
+  !1,
+  null,
+  "38bb7d21",
+  null,
+  null
+);
+const j = U.exports;
+export {
+  j as BentoCard,
+  y as BentoCardBackground,
+  l as BentoCardTitleSize
+};
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../src/components/card/card.types.ts","../src/components/card/card.vue"],"sourcesContent":["export enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"tabIndex\"\n            :aria-controls=\"expandable ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <span v-if=\"expandable\" aria-hidden=\"true\" class=\"adl-accordion-item__caret\">\n                <chevron-up-icon v-if=\"showContent\" svg-title=\"show accordion item\" />\n                <chevron-down-icon v-else svg-title=\"hide accordion item\" />\n            </span>\n            <div class=\"b-card__title-wrapper\">\n                <bento-typography\n                    v-if=\"hasSlot('default')\"\n                    class=\"b-card__title\"\n                    aria-label=\"card title\"\n                    v-bind=\"typography\"\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-card__description\"\n                    :el=\"BentoTypographyElement.DIV\"\n                    :variant=\"BentoTypographyVariant.BODY\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <div\n            v-if=\"showCardBody\"\n            :id=\"expandable ? cardId : null\"\n            class=\"b-card__body\"\n            :class=\"cardBodyConditionalClasses\"\n        >\n            <div\n                v-if=\"hasSlot('content')\"\n                class=\"b-card__content\"\n                :class=\"cardContentConditionalClasses\"\n                aria-label=\"card content\"\n            >\n                <slot name=\"content\" />\n            </div>\n\n            <div\n                v-if=\"actions\"\n                class=\"b-card__actions\"\n                :class=\"cardActionsConditionalClasses\"\n                aria-label=\"card actions\"\n            >\n                <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import { generateUid } from '@/utils/ts/unique-id';\n\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default defineComponent({\n        name: 'bento-card',\n        components: { ChevronUpIcon, ChevronDownIcon, BentoTypography, BentoButtonActions },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Defines the color of card background\n             */\n            background: {\n                type: String as PropType<BentoCardBackground>,\n                default: BentoCardBackground.PRIMARY,\n            },\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize: {\n                type: String as PropType<BentoCardTitleSize>,\n                default: BentoCardTitleSize.DEFAULT,\n            },\n            /**\n             * The whole content of the card will be expandable in accordion manner\n             */\n            expandable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Initially sets the expandable card in a closed state\n             */\n            closed: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Disables the expandable card\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\n            },\n            /**\n             * Defines the layout in which the button actions is presented.\n             * It can be one of:\n             *\n             * @values BUTTONS_START\n             * @values BUTTONS_END\n             * @values FILL_CONTAINER\n             * @values SPACE_BETWEEN\n             * @values VERTICAL_STACK\n             */\n            actionsLayout: {\n                type: String as PropType<BentoButtonActionsLayout>,\n                default: BentoButtonActionsLayout.BUTTONS_END,\n                validator: (value: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(value),\n            },\n        },\n        emits: ['click', 'expanded'],\n        setup(props, { emit, slots }) {\n            const cardId = generateUid('card');\n            const showContent = ref(!props.closed);\n            const showHeader = computed(() => hasSlot(slots)('default') || hasSlot(slots)('description'));\n            const showCardBody = computed(\n                () =>\n                    (hasSlot(slots)('content') || props.actions?.length) &&\n                    (!props.expandable || (props.expandable && showContent.value))\n            );\n            const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n            const cardConditionalClasses = computed(() => ({\n                [`b-card--${props.background}`]: props.background,\n                'b-card--expandable': props.expandable,\n                'b-card--disabled': props.expandable && props.disabled,\n            }));\n\n            const cardHeaderConditionalClasses = computed(() => ({\n                'b-card__header--expandable': props.expandable,\n                'b-card__header--without-body': !props.expandable && !showCardBody.value,\n            }));\n\n            const cardBodyConditionalClasses = computed(() => ({\n                'b-card__body--expandable': props.expandable && hasSlot(slots)('content'),\n                'b-card__body--without-header': !props.expandable && !showHeader.value,\n            }));\n\n            const cardContentConditionalClasses = computed(() => ({\n                'b-card__content--without-header': !props.expandable && !showHeader.value,\n                'b-card__content--expandable': props.expandable,\n            }));\n\n            const cardActionsConditionalClasses = computed(() => {\n                const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot(slots)('content');\n\n                return {\n                    'b-card__actions--without-content': isNotExpandableWithoutContent,\n                    'b-card__actions--without-content-and-with-header':\n                        isNotExpandableWithoutContent && showHeader.value,\n                };\n            });\n\n            const typography = computed(() => ({\n                el: BentoTypographyElement.DIV,\n                variant:\n                    props.titleSize === BentoCardTitleSize.DEFAULT\n                        ? BentoTypographyVariant.SUBTITLE\n                        : BentoTypographyVariant.BODY,\n                stronger: props.titleSize === BentoCardTitleSize.DEFAULT,\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            }));\n\n            const toggleExpansion = () => {\n                if (!props.disabled) {\n                    showContent.value = !showContent.value;\n                    emit('expanded', showContent.value);\n                }\n            };\n\n            const onClick = () => {\n                if (!props.disabled) {\n                    emit('click');\n                }\n            };\n\n            return {\n                // Values\n                cardId,\n                cardConditionalClasses,\n                cardBodyConditionalClasses,\n                cardHeaderConditionalClasses,\n                cardContentConditionalClasses,\n                cardActionsConditionalClasses,\n                showCardBody,\n                showContent,\n                tabIndex,\n                showHeader,\n                typography,\n\n                // Methods\n                onClick,\n                toggleExpansion,\n                hasSlot: hasSlot(slots),\n\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","_sfc_main","defineComponent","ChevronUp","ChevronDown","BentoTypography","BentoButtonActions","BentoButtonActionsLayout","value","props","emit","slots","cardId","generateUid","showContent","ref","showHeader","computed","hasSlot","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","typography","BentoTypographyElement","BentoTypographyVariant"],"mappings":";;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACsFZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,eAAAC,GAAA,iBAAAC,GAAA,iBAAAC,GAAA,oBAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAT,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAE,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MA0BA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAWA,MAAA;AAAA,MACA,SAAAQ,EAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAD,CAAA,EAAA,SAAAC,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,UAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA,GACAC,IAAAC,EAAA,CAAAN,EAAA,MAAA,GACAO,IAAAC,EAAA,MAAAC,EAAAP,CAAA,EAAA,SAAA,KAAAO,EAAAP,CAAA,EAAA,aAAA,CAAA,GACAQ,IAAAF;AAAA,MAAA,MAAA;;AAAA,gBAAAC,EAAAP,CAAA,EAAA,SAAA,OAAAS,IAAAX,EAAA,YAAA,gBAAAW,EAAA,aAAA,CAAAX,EAAA,cAAAA,EAAA,cAAAK,EAAA;AAAA;AAAA,IAGA,GAEAO,IAAAJ,EAAA,MAAAR,EAAA,cAAA,CAAAA,EAAA,WAAA,IAAA,EAAA,GAEAa,IAAAL,EAAA,OAAA;AAAA,MAAA,CAAA,WAAAR,EAAA,YAAA,GAAAA,EAAA;AAAA,MACA,sBAAAA,EAAA;AAAA,MACA,oBAAAA,EAAA,cAAAA,EAAA;AAAA,IACA,EAAA,GAGAc,IAAAN,EAAA,OAAA;AAAA,MAAA,8BAAAR,EAAA;AAAA,MACA,gCAAA,CAAAA,EAAA,cAAA,CAAAU,EAAA;AAAA,IACA,EAAA,GAGAK,IAAAP,EAAA,OAAA;AAAA,MAAA,4BAAAR,EAAA,cAAAS,EAAAP,CAAA,EAAA,SAAA;AAAA,MACA,gCAAA,CAAAF,EAAA,cAAA,CAAAO,EAAA;AAAA,IACA,EAAA,GAGAS,IAAAR,EAAA,OAAA;AAAA,MAAA,mCAAA,CAAAR,EAAA,cAAA,CAAAO,EAAA;AAAA,MACA,+BAAAP,EAAA;AAAA,IACA,EAAA,GAGAiB,IAAAT,EAAA,MAAA;AACA,YAAAU,IAAA,CAAAlB,EAAA,cAAAA,EAAA,WAAA,CAAAS,EAAAP,CAAA,EAAA,SAAA;AAEA,aAAA;AAAA,QAAA,oCAAAgB;AAAA,QACA,oDAAAA,KAAAX,EAAA;AAAA,MAEA;AAAA,IACA,CAAA,GAGAY,IAAAX,EAAA,OAAA;AAAA,MAAA,IAAAY,EAAA;AAAA,MACA,SAAApB,EAAA,cAAAV,EAAA,UAAA+B,EAAA,WAAAA,EAAA;AAAA,MAIA,UAAArB,EAAA,cAAAV,EAAA;AAAA,MACA,WAAAU,EAAA,cAAAV,EAAA;AAAA,MACA,MAAAU,EAAA,cAAAV,EAAA;AAAA,IACA,EAAA;AAgBA,WAAA;AAAA;AAAA,MAAA,QAAAa;AAAA,MAEA,wBAAAU;AAAA,MACA,4BAAAE;AAAA,MACA,8BAAAD;AAAA,MACA,+BAAAE;AAAA,MACA,+BAAAC;AAAA,MACA,cAAAP;AAAA,MACA,aAAAL;AAAA,MACA,UAAAO;AAAA,MACA,YAAAL;AAAA,MACA,YAAAY;AAAA;AAAA,MACA,SAlBA,MAAA;AACA,QAAAnB,EAAA,YACAC,EAAA,OAAA;AAAA,MACA;AAAA,MAkBA,iBA5BA,MAAA;AACA,QAAAD,EAAA,aACAK,EAAA,QAAA,CAAAA,EAAA,OACAJ,EAAA,YAAAI,EAAA,KAAA;AAAA,MACA;AAAA,MAyBA,SAAAI,EAAAP,CAAA;AAAA;AAAA,MACA,wBAAAmB;AAAA,MAGA,wBAAAD;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/checkbox.js

@@ -0,0 +1,94 @@
+import "./assets/index23.css";
+import { B as a } from "./chunks/checkbox.fab16cce.js";
+import { a as A } from "./chunks/checkbox.fab16cce.js";
+import { defineComponent as l, computed as u, ref as c } from "vue";
+import { ControlsGroup as i } from "./controls-group.js";
+import { n as p } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+var n = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(n || {});
+const d = l({
+  name: "bento-checkbox-group",
+  components: { BentoCheckbox: a, ControlsGroup: i },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The checkbox group's items.
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
+     */
+    variant: {
+      type: String,
+      default: n.VERTICAL,
+      validator: (r) => Object.values(n).includes(r)
+    },
+    /**
+     * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.
+     */
+    formId: {
+      type: String,
+      default: null
+    },
+    /**
+     * If set to true, renders all checkboxes in the group in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If set to true, renders all checkboxes in the group in an error state.
+     */
+    hasError: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The name associated with the group. Required for accessibility purposes.
+     */
+    label: { type: String, required: !0 }
+  },
+  emits: ["input"],
+  setup(r, { emit: e }) {
+    const t = u(() => ({
+      "b-checkbox-group--horizontal": r.variant === n.HORIZONTAL
+    })), o = c([]);
+    return {
+      // Values
+      conditionalClasses: t,
+      modelValue: o,
+      // Methods
+      onInput: (s) => {
+        o.value = s, e("input", s);
+      }
+    };
+  }
+});
+var f = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("controls-group", { staticClass: "b-checkbox-group", class: e.conditionalClasses, attrs: { form: e.formId, disabled: e.disabled, label: e.label } }, e._l(e.items, function(o) {
+    return t("bento-checkbox", { key: o.value, attrs: { "model-value": e.modelValue, value: o.value, disabled: e.disabled || o.disabled, "has-error": e.hasError || o.hasError }, on: { input: e.onInput }, scopedSlots: e._u([o.description ? { key: "description", fn: function() {
+      return [e._v(e._s(o.description))];
+    }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(o.label) + " ")]);
+  }), 1);
+}, _ = [], b = /* @__PURE__ */ p(
+  d,
+  f,
+  _,
+  !1,
+  null,
+  "2861ffda",
+  null,
+  null
+);
+const C = b.exports;
+export {
+  a as BentoCheckbox,
+  C as BentoCheckboxGroup,
+  n as BentoCheckboxGroupVariant,
+  A as BentoCheckboxState
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["export enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n","<template>\n    <controls-group\n        class=\"b-checkbox-group\"\n        :class=\"conditionalClasses\"\n        :form=\"formId\"\n        :disabled=\"disabled\"\n        :label=\"label\"\n    >\n        <bento-checkbox\n            v-for=\"item in items\"\n            :key=\"item.value\"\n            :model-value=\"modelValue\"\n            :value=\"item.value\"\n            :disabled=\"disabled || item.disabled\"\n            :has-error=\"hasError || item.hasError\"\n            @input=\"onInput\"\n        >\n            {{ item.label }}\n            <template v-if=\"item.description\" #description>{{ item.description }}</template>\n        </bento-checkbox>\n    </controls-group>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { ControlsGroup } from '@/components/controls-group';\n    import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default defineComponent({\n        name: 'bento-checkbox-group',\n        components: { BentoCheckbox, ControlsGroup },\n        inheritAttrs: false,\n        props: {\n            /**\n             * The checkbox group's items.\n             */\n            items: {\n                type: Array as PropType<BentoCheckboxGroupItems>,\n                required: true,\n            },\n            /**\n             * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n             */\n            variant: {\n                type: String as PropType<BentoCheckboxGroupVariant>,\n                default: BentoCheckboxGroupVariant.VERTICAL,\n                validator: (value: BentoCheckboxGroupVariant) =>\n                    Object.values(BentoCheckboxGroupVariant).includes(value),\n            },\n            /**\n             * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n             */\n            formId: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in a disabled state.\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, renders all checkboxes in the group in an error state.\n             */\n            hasError: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The name associated with the group. Required for accessibility purposes.\n             */\n            label: { type: String, required: true },\n        },\n        emits: ['input'],\n        setup(props, { emit }) {\n            const conditionalClasses = computed(() => ({\n                'b-checkbox-group--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n            }));\n            const modelValue = ref([]);\n\n            const onInput = value => {\n                modelValue.value = value;\n                emit('input', value);\n            };\n\n            return {\n                // Values\n                conditionalClasses,\n                modelValue,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","value","props","emit","conditionalClasses","computed","modelValue","ref"],"mappings":";;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;ACgDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,eAAAC,GAAA,eAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAL,EAAA;AAAA,MACA,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA,EAIA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA;AAAA,MAAA,gCAAAH,EAAA,YAAAP,EAAA;AAAA,IACA,EAAA,GAEAW,IAAAC,EAAA,CAAA,CAAA;AAOA,WAAA;AAAA;AAAA,MAAA,oBAAAH;AAAA,MAEA,YAAAE;AAAA;AAAA,MACA,SARA,CAAAL,MAAA;AACA,QAAAK,EAAA,QAAAL,GACAE,EAAA,SAAAF,CAAA;AAAA,MAAA;AAAA,IASA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}