@adyen/bento-vue2 1.11.0 → 1.12.0

package/dist/assets/index8.css

@@ -1 +1 @@
-.b-button-actions[data-v-cabe4e52]{container-type:inline-size;flex-grow:1}.b-button-actions__container-wrapper[data-v-cabe4e52]{display:flex;flex-direction:column;gap:var(--b-button-actions-vertical-stack-row-gap)}.b-button-actions__button-wrapper>*[data-v-cabe4e52]{width:100%}@container (min-width: 242px){.b-button-actions--buttons-start[data-v-cabe4e52]{flex-direction:row;justify-content:start}.b-button-actions--buttons-end[data-v-cabe4e52]{column-gap:var(--b-button-actions-buttons-end-column-gap);flex-direction:row;justify-content:flex-end}.b-button-actions--fill-container[data-v-cabe4e52]{column-gap:var(--b-button-actions-fill-container-column-gap);display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.b-button-actions--space-between[data-v-cabe4e52]{flex-direction:unset;justify-content:space-between}}
+.b-data-grid-columns[data-v-5e73c453]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-data-grid-columns[data-v-5e73c453],.b-data-grid-columns[data-v-5e73c453]:before,.b-data-grid-columns[data-v-5e73c453]:after{box-sizing:border-box}.b-data-grid-columns *[data-v-5e73c453],.b-data-grid-columns *[data-v-5e73c453]:before,.b-data-grid-columns *[data-v-5e73c453]:after{box-sizing:border-box}.b-data-grid-columns[data-v-5e73c453] ::-webkit-scrollbar{height:14px;width:14px}.b-data-grid-columns[data-v-5e73c453] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-data-grid-columns--frozen[data-v-5e73c453]{display:flex;left:0;position:sticky;z-index:var(--b-data-grid-columns-frozen-z-index)}.b-data-grid-columns--frozen-separator[data-v-5e73c453]{border-right:var(--b-data-grid-columns-frozen-border-right-width) solid var(--b-data-grid-columns-frozen-border-right-color)}.b-data-grid-columns--unfrozen[data-v-5e73c453]{display:flex}.b-data-grid-columns--config-settings-margin[data-v-5e73c453]{margin-right:var(--b-data-grid-config-settings-column-and-row-margin)}.b-data-grid-columns__column[data-v-5e73c453]{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-5e73c453]{cursor:pointer}.b-data-grid-columns__column--sortable[data-v-5e73c453]:hover{background-color:var(--b-data-grid-column-hover-background-color)}.b-data-grid-columns__column--padding-left-unset[data-v-5e73c453]{padding-left:0}.b-data-grid-columns__column--padding-right-unset[data-v-5e73c453]{padding-right:0}.b-data-grid-columns__column--overflow-ellipsis *[data-v-5e73c453]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-data-grid-columns__column--numeric[data-v-5e73c453]{justify-content:flex-end;text-align:right}.b-data-grid-columns__column--is-re-ordering-target-left[data-v-5e73c453]: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));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);left:0}.b-data-grid-columns__column--is-re-ordering-target-right[data-v-5e73c453]: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));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);right:0}.b-data-grid-columns__column[draggable=true][data-v-5e73c453]{cursor:move;cursor:grab}.b-data-grid-columns__column--is-re-ordering[data-v-5e73c453],.b-data-grid-columns__column--is-re-ordering *[data-v-5e73c453]{background-color:var(--b-data-grid-column-draggable-ghost-background-color);cursor:grabbing}.b-data-grid-columns__column-header[data-v-5e73c453]{align-items:center;display:flex;gap:var(--b-data-grid-column-header-gap)}.b-data-grid-columns__column-separator-container[data-v-5e73c453]{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-5e73c453]{right:var(--b-data-grid-resizer-width)}.b-data-grid-columns__column-separator-container--is-resizeable[data-v-5e73c453]{cursor:ew-resize}.b-data-grid-columns__column-separator[data-v-5e73c453]{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-5e73c453]{border-color:var(--b-data-grid-column-separator-resizeable-hover-color)}.b-data-grid-columns__column-actions[data-v-5e73c453]{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-5e73c453]{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-5e73c453]{color:var(--b-data-grid-column-sort-icon-color);display:inline-flex;margin-top:-2px}.b-data-grid-columns__column-sort-icon[data-v-5e73c453]:nth-child(2){margin-top:-8px}.b-data-grid-columns__column--sortable:hover .b-data-grid-columns__column-sort-icon[data-v-5e73c453]{color:var(--b-data-grid-column-hover-sort-icon-color)}.b-data-grid-columns__column-sort-icon--sorted[data-v-5e73c453],.b-data-grid-columns__column--sortable:hover .b-data-grid-columns__column-sort-icon--sorted[data-v-5e73c453]{color:var(--b-data-grid-column-sort-icon-sorted-color)}.b-data-grid-columns__menu[data-v-5e73c453]{display:flex}@media (min-width: 376px){.b-data-grid-columns__menu[data-v-5e73c453] .b-menu__popover{width:200px}}.b-data-grid-columns__select-column[data-v-5e73c453]{display:flex;gap:var(--b-data-grid-columns-select-column-gap);padding-left:var(--b-data-grid-columns-select-column-padding-left);padding-right:var(--b-data-grid-columns-select-column-padding-right)}.b-data-grid-columns__select-column-menu[data-v-5e73c453]{align-items:center;display:flex;height:var(--b-data-grid-column-height)}.b-data-grid-config-settings-column-row[data-v-246774cd]{scrollbar-color:var(--b-color-background-quaternary) transparent;-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-246774cd],.b-data-grid-config-settings-column-row[data-v-246774cd]:before,.b-data-grid-config-settings-column-row[data-v-246774cd]:after{box-sizing:border-box}.b-data-grid-config-settings-column-row *[data-v-246774cd],.b-data-grid-config-settings-column-row *[data-v-246774cd]:before,.b-data-grid-config-settings-column-row *[data-v-246774cd]:after{box-sizing:border-box}.b-data-grid-config-settings-column-row[data-v-246774cd] ::-webkit-scrollbar{height:14px;width:14px}.b-data-grid-config-settings-column-row[data-v-246774cd] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media (hover: hover){.b-data-grid-config-settings-column-row[data-v-246774cd]:hover{background-color:var(--b-data-grid-config-column-row-hover-background-color)}}.b-data-grid-config-settings-column-row__freeze-icon[data-v-246774cd]{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-246774cd]{color:var(--b-data-grid-config-column-row-freeze-icon-frozen-color)}.b-data-grid-config-settings[data-v-86ff67f7]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-data-grid-config-settings[data-v-86ff67f7],.b-data-grid-config-settings[data-v-86ff67f7]:before,.b-data-grid-config-settings[data-v-86ff67f7]:after{box-sizing:border-box}.b-data-grid-config-settings *[data-v-86ff67f7],.b-data-grid-config-settings *[data-v-86ff67f7]:before,.b-data-grid-config-settings *[data-v-86ff67f7]:after{box-sizing:border-box}.b-data-grid-config-settings[data-v-86ff67f7] ::-webkit-scrollbar{height:14px;width:14px}.b-data-grid-config-settings[data-v-86ff67f7] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-data-grid-config-settings__button-and-separator[data-v-86ff67f7]{align-items:center;background-color:var(--b-data-grid-config-settings-button-and-separator-background-color);display:flex;padding:var(--b-data-grid-config-settings-button-and-separator-padding)}.b-data-grid-config-settings__button-container[data-v-86ff67f7]{display:flex;margin:var(--b-data-grid-config-settings-button-margin);padding:var(--b-data-grid-config-settings-button-padding)}.b-data-grid-config-settings__column-separator[data-v-86ff67f7]{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-86ff67f7]{max-height:540px;min-width:285px;overflow:auto}.b-data-grid-config-settings__panel[data-v-86ff67f7] .b-popover__content{padding:14px 0}.b-data-grid-config-settings__panel-header[data-v-86ff67f7]{align-items:center;display:flex;justify-content:space-between;padding:var(--b-data-grid-config-panel-header-padding)}.b-data-grid-config-settings__condensed-view-settings[data-v-86ff67f7]{border-bottom:1px solid var(--b-data-grid-config-condensed-view-border-color);padding:var(--b-data-grid-config-condensed-view-padding)}.b-data-grid-config-settings__condensed-view-title[data-v-86ff67f7]{display:block;padding:var(--b-data-grid-config-condensed-view-title-padding)}.b-data-grid-config-settings__column-visibility-settings[data-v-86ff67f7]{padding:var(--b-data-grid-config-column-visibility-padding)}.b-data-grid-config-settings__column-visibility-header[data-v-86ff67f7]{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-86ff67f7]{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-86ff67f7]{margin:var(--b-data-grid-config-column-visibility-search-margin)}.b-data-grid-config-settings__column-visibility-toggles[data-v-86ff67f7]{display:flex;flex-direction:column}.b-data-grid-config-settings__column-visibility-empty-search-message[data-v-86ff67f7]{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-lazy-load[data-v-434be84c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-data-grid-lazy-load-background-color);border-top:var(--b-data-grid-lazy-load-border);display:flex;justify-content:center;padding:var(--b-data-grid-lazy-load-padding);position:relative;z-index:var(--b-data-grid-lazy-load-z-index)}.b-data-grid-lazy-load[data-v-434be84c],.b-data-grid-lazy-load[data-v-434be84c]:before,.b-data-grid-lazy-load[data-v-434be84c]:after{box-sizing:border-box}.b-data-grid-lazy-load *[data-v-434be84c],.b-data-grid-lazy-load *[data-v-434be84c]:before,.b-data-grid-lazy-load *[data-v-434be84c]:after{box-sizing:border-box}.b-data-grid-lazy-load[data-v-434be84c] ::-webkit-scrollbar{height:14px;width:14px}.b-data-grid-lazy-load[data-v-434be84c] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}svg.ui-assets-icons-16{display:inline-flex;flex-shrink:0}svg.ui-assets-icons-16,svg.ui-assets-icons-16 *{fill:currentcolor}.b-data-grid-cell-actions[data-v-bf15c0be]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;display:flex;height:100%;justify-content:end;position:absolute;right:0;top:0;width:100%}.b-data-grid-cell-actions[data-v-bf15c0be],.b-data-grid-cell-actions[data-v-bf15c0be]:before,.b-data-grid-cell-actions[data-v-bf15c0be]:after{box-sizing:border-box}.b-data-grid-cell-actions *[data-v-bf15c0be],.b-data-grid-cell-actions *[data-v-bf15c0be]:before,.b-data-grid-cell-actions *[data-v-bf15c0be]:after{box-sizing:border-box}.b-data-grid-cell-actions[data-v-bf15c0be] ::-webkit-scrollbar{height:14px;width:14px}.b-data-grid-cell-actions[data-v-bf15c0be] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-data-grid-cell-actions__animation-enter-active[data-v-bf15c0be]{animation:fade-in-udi8gvx-bf15c0be var(--b-data-grid-cell-actions-animation-duration) var(--b-animation-easing-linear),enter-udi8gvx-bf15c0be var(--b-data-grid-cell-actions-animation-duration) var(--b-animation-easing-enter),scale-up-udi8gvx-bf15c0be var(--b-data-grid-cell-actions-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-udi8gvx-bf15c0be{0%{opacity:0}to{opacity:1}}@keyframes scale-up-udi8gvx-bf15c0be{0%{scale:1}to{scale:1}}@keyframes enter-udi8gvx-bf15c0be{0%{translate:8px 0}to{translate:0 0}}.b-data-grid-cell-actions__background-gradient[data-v-bf15c0be]{background:var(--b-data-grid-cell-actions-background-gradient-background);height:100%;width:var(--b-data-grid-cell-actions-background-gradient-width)}.b-data-grid-cell-actions__actions[data-v-bf15c0be]{align-items:center;display:flex;flex-direction:row;gap:var(--b-data-grid-cell-actions-gap);height:100%;justify-content:flex-end;padding:var(--b-data-grid-cell-actions-padding)}.b-data-grid[data-v-88f55fed]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}.b-data-grid[data-v-88f55fed],.b-data-grid[data-v-88f55fed]:before,.b-data-grid[data-v-88f55fed]:after{box-sizing:border-box}.b-data-grid *[data-v-88f55fed],.b-data-grid *[data-v-88f55fed]:before,.b-data-grid *[data-v-88f55fed]:after{box-sizing:border-box}.b-data-grid[data-v-88f55fed] ::-webkit-scrollbar{height:14px;width:14px}.b-data-grid[data-v-88f55fed] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-data-grid--outline[data-v-88f55fed]{border:var(--b-data-grid-border-width) solid var(--b-data-grid-border-color);border-radius:var(--b-data-grid-border-radius)}.b-data-grid--outline .b-data-grid__columns-row[data-v-88f55fed]{border-top-left-radius:var(--b-data-grid-border-radius);border-top-right-radius:var(--b-data-grid-border-radius)}.b-data-grid--outline>div[data-v-88f55fed]:first-child{border-top-left-radius:var(--b-data-grid-border-radius);border-top-right-radius:var(--b-data-grid-border-radius)}.b-data-grid--outline>div[data-v-88f55fed]: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--scroll[data-v-88f55fed]{display:flex;flex-direction:column;height:100%}.b-data-grid--sticky-filters .b-data-grid__filters[data-v-88f55fed]{position:sticky;z-index:var(--b-data-grid-filters-z-index)}.b-data-grid__body[data-v-88f55fed]{overflow-x:auto;width:100%}.b-data-grid__header[data-v-88f55fed]{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-88f55fed]{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-88f55fed]{-ms-overflow-style:none;scrollbar-width:none;display:flex;overflow-x:scroll}.b-data-grid__columns-row[data-v-88f55fed] ::-webkit-scrollbar{display:none}.b-data-grid__row-cell-set--frozen[data-v-88f55fed]{display:flex;left:0;position:sticky;z-index:var(--b-data-grid-rows-frozen-z-index)}.b-data-grid__row-cell-set--frozen-separator[data-v-88f55fed]{border-right:var(--b-data-grid-columns-frozen-border-right-width) solid var(--b-data-grid-columns-frozen-border-right-color)}.b-data-grid__row-cell-set--unfrozen[data-v-88f55fed]{display:flex}.b-data-grid__row-cell-set--config-settings-margin[data-v-88f55fed]{margin-right:var(--b-data-grid-config-settings-column-and-row-margin)}.b-data-grid__column-headers[data-v-88f55fed]{background-color:var(--b-data-grid-column-headers-background-color);position:sticky;z-index:var(--b-data-grid-column-headers-z-index)}.b-data-grid__column-headers[data-v-88f55fed]:focus-within{z-index:var(--b-data-grid-column-headers-focus-within-z-index)}.b-data-grid__rows>*[data-v-88f55fed]: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-88f55fed]{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-88f55fed]:hover,.b-data-grid__row:hover .b-data-grid__cell[data-v-88f55fed]{background-color:var(--b-data-grid-row-hover-background-color)}.b-data-grid__row[data-v-88f55fed]:hover .b-link{text-decoration:underline}.b-data-grid__row[data-v-88f55fed]:last-child{box-shadow:unset}.b-data-grid--outline .b-data-grid__row[data-v-88f55fed]: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-88f55fed]{cursor:pointer}.b-data-grid__row--disabled[data-v-88f55fed]{color:var(--b-data-grid-row-disabled-color);cursor:not-allowed}.b-data-grid__row--is-re-ordering[data-v-88f55fed]{cursor:grabbing}.b-data-grid__row--highlighted[data-v-88f55fed],.b-data-grid__row--highlighted .b-data-grid__cell[data-v-88f55fed]{background-color:var(--b-data-grid-row-highlighted-background-color)}.b-data-grid__cell[data-v-88f55fed]{background-color:var(--b-data-grid-cell-background-color);padding:var(--b-data-grid-cell-padding);position:relative}.b-data-grid__cell[data-v-88f55fed]:focus-visible{animation:outer-ring-default-88f55fed var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);outline:none;z-index:1}@keyframes outer-ring-default-88f55fed{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-data-grid__cell--condensed[data-v-88f55fed]{padding:var(--b-data-grid-cell-condensed-padding)}.b-data-grid__cell--padding-left-unset[data-v-88f55fed]{padding-left:0}.b-data-grid__cell--padding-right-unset[data-v-88f55fed]{padding-right:0}.b-data-grid__cell--overflow-ellipsis *[data-v-88f55fed]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-data-grid__cell--numeric[data-v-88f55fed]{justify-content:flex-end;text-align:right}.b-data-grid__cell--is-column-re-ordering[data-v-88f55fed]{background-color:var(--b-data-grid-column-draggable-ghost-background-color);cursor:grabbing}.b-data-grid__cell--is-column-re-order-target-left[data-v-88f55fed],.b-data-grid__cell--is-column-re-order-target-right[data-v-88f55fed]{position:relative}.b-data-grid__cell--is-column-re-order-target-left[data-v-88f55fed]: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));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);left:0}.b-data-grid__cell--is-column-re-order-target-right[data-v-88f55fed]: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));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);right:0}.b-data-grid__select-cell[data-v-88f55fed]{margin-left:var(--b-data-grid-select-cell-margin-left)}.b-data-grid__footer[data-v-88f55fed]{padding:var(--b-data-grid-footer-padding)}.b-data-grid__filters[data-v-88f55fed]{background-color:var(--b-data-grid-filters-background-color);border-bottom:var(--b-data-grid-filters-border-width) solid var(--b-data-grid-filters-border-color);justify-content:flex-end;padding:var(--b-data-grid-filters-padding);position:relative}.b-data-grid__filters[data-v-88f55fed]:focus-within{z-index:var(--b-data-grid-filters-focus-within-z-index)}.b-data-grid__pagination[data-v-88f55fed]{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);position:relative;z-index:var(--b-data-grid-pagination-z-index)}.b-data-grid__pagination--padding-left-unset[data-v-88f55fed]{padding-left:0}.b-data-grid__pagination--padding-right-unset[data-v-88f55fed]{padding-right:0}.b-data-grid__pagination--sticky[data-v-88f55fed]{bottom:0;padding:var(--b-data-grid-pagination-sticky-padding);position:sticky}.b-data-grid--outline .b-data-grid__pagination[data-v-88f55fed]{padding:var(--b-data-grid-pagination-outline-padding)}.b-data-grid__loading[data-v-88f55fed]{align-items:center;display:flex;flex-direction:column;height:400px;justify-content:center;width:100%}.b-data-grid__loading-indicator[data-v-88f55fed]{margin:var(--b-data-grid-loading-indicator-margin)}.b-data-grid__empty-state[data-v-88f55fed]{padding:var(--b-data-grid-empty-state-padding)}.b-data-grid__config-settings[data-v-88f55fed]{display:flex;height:calc(100% - var(--b-data-grid-columns-border-width));position:absolute;right:0;z-index:var(--b-data-grid-config-settings-z-index)}

package/dist/assets/index9.css

@@ -1 +1 @@
-.b-action-bar[data-v-d2278799]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;bottom:var(--b-action-bar-bottom);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;width:100%;z-index:var(--b-action-bar-z-index)}.b-action-bar[data-v-d2278799],.b-action-bar[data-v-d2278799]:before,.b-action-bar[data-v-d2278799]:after{box-sizing:border-box}.b-action-bar *[data-v-d2278799],.b-action-bar *[data-v-d2278799]:before,.b-action-bar *[data-v-d2278799]:after{box-sizing:border-box}.b-action-bar[data-v-d2278799] ::-webkit-scrollbar{height:14px;width:14px}.b-action-bar[data-v-d2278799] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-action-bar__container[data-v-d2278799]{align-items:center;background-color:var(--b-action-bar-container-background-color);border-radius:var(--b-action-bar-container-border-radius);color:var(--b-action-bar-container-color);display:flex;padding:var(--b-action-bar-container-padding);pointer-events:all;width:var(--b-action-bar-container-width)}@media (min-width: 500px){.b-action-bar__container[data-v-d2278799]{width:auto}}.b-action-bar__close-button[data-v-d2278799]{align-items:center;display:flex;margin-right:var(--b-action-bar-close-button-margin-right-mobile)}@media (min-width: 500px){.b-action-bar__close-button[data-v-d2278799]{margin-right:var(--b-action-bar-close-button-margin-right)}}.b-action-bar__selection[data-v-d2278799]{margin-right:var(--b-action-bar-selection-margin-right-mobile);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-legacy-theme .b-action-bar__selection[data-v-d2278799]{font-weight:600}@media (min-width: 500px){.b-action-bar__selection[data-v-d2278799]{margin-right:var(--b-action-bar-selection-margin-right);width:120px}}.b-action-bar__actions[data-v-d2278799]{container-type:normal}.b-action-bar__actions[data-v-d2278799] .b-button-actions__container-wrapper{flex-direction:row}.b-action-bar--extra-spacing[data-v-d2278799]{bottom:var(--b-action-bar-bottom-extra-spacing)}.b-action-bar__animation-enter-active[data-v-d2278799]{animation:fade-in-ukx4guu-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-linear),enter-ukx4guu-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-enter),scale-up-ukx4guu-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-ukx4guu-d2278799{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ukx4guu-d2278799{0%{scale:.9}to{scale:1}}@keyframes enter-ukx4guu-d2278799{0%{translate:0 8px}to{translate:0 0}}.b-action-bar__animation-leave-active[data-v-d2278799]{animation:fade-out-ukx4gx2-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-linear),exit-ukx4gx2-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-exit),scale-down-ukx4gx2-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-ukx4gx2-d2278799{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ukx4gx2-d2278799{0%{scale:1}to{scale:.9}}@keyframes exit-ukx4gx2-d2278799{0%{translate:0 0}to{translate:0 8px}}
+.b-date-picker[data-v-408106fe]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column}.b-date-picker[data-v-408106fe],.b-date-picker[data-v-408106fe]:before,.b-date-picker[data-v-408106fe]:after{box-sizing:border-box}.b-date-picker *[data-v-408106fe],.b-date-picker *[data-v-408106fe]:before,.b-date-picker *[data-v-408106fe]:after{box-sizing:border-box}.b-date-picker[data-v-408106fe] ::-webkit-scrollbar{height:14px;width:14px}.b-date-picker[data-v-408106fe] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-legacy-theme .b-date-picker[data-v-408106fe] .b-dropdown-default-textbox--opened{border-radius:6px}.b-legacy-theme .b-date-picker__container[data-v-408106fe]{border:var(--b-date-picker-container-border);box-shadow:var(--b-date-picker-container-box-shadow);width:var(--b-date-picker-container-width)}.b-date-picker__description[data-v-408106fe]{color:var(--b-date-picker-description-color);margin-top:var(--b-date-picker-description-margin-top)}.b-date-picker__description--error[data-v-408106fe]{margin-top:var(--b-date-picker-description-error-margin-top)}.b-date-picker__error-message[data-v-408106fe]{margin-top:var(--b-date-picker-error-message-margin-top)}.b-date-picker__error-message[data-v-408106fe]:not(:first-of-type){margin-top:var(--b-date-picker-description-error-margin-top)}

package/dist/avatar-image.js

@@ -1,4 +1,4 @@
-import { A as t, B as e, a as o } from "./chunks/index.aaedd8f9.js";
+import { A as t, B as e, a as o } from "./chunks/index.14758ff7.js";
 export {
   t as AvatarImage,
   e as BentoAvatarImageColor,

package/dist/button.js

@@ -1,10 +1,10 @@
-import { a as v, B as o } from "./chunks/button.bb5b4909.js";
-import { b as I } from "./chunks/button.bb5b4909.js";
+import { a as v, B as o } from "./chunks/button.133f145e.js";
+import { b as I } from "./chunks/button.133f145e.js";
 import { defineComponent as p, computed as i } from "vue";
-import { B as u } from "./chunks/loading-button.fb025a2e.js";
-import { a as k } from "./chunks/loading-button.fb025a2e.js";
+import { B as u } from "./chunks/loading-button.44d698b9.js";
+import { a as k } from "./chunks/loading-button.44d698b9.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index8.css";
+import "./assets/index16.css";
 var l = /* @__PURE__ */ ((n) => (n.BUTTONS_END = "buttons-end", n.FILL_CONTAINER = "fill-container", n.SPACE_BETWEEN = "space-between", n.VERTICAL_STACK = "vertical-stack", n))(l || {}), _ = /* @__PURE__ */ ((n) => (n.BUTTONS_START = "buttons-start", n))(_ || {});
 const c = { ...l, ..._ }, g = p({
   name: "bento-button-actions",

package/dist/card.js

@@ -1,5 +1,5 @@
 import { defineComponent as T, ref as h, watch as p, computed as n } from "vue";
-import { B as H } from "./chunks/index.b0a89960.js";
+import { B as H } from "./chunks/index.99a2184a.js";
 import { a as I, C as D } from "./chunks/chevron-up.81185563.js";
 import { u as M } from "./chunks/use-has-slot.fbeb19ec.js";
 import { g as O } from "./chunks/unique-id.a2a2b458.js";
@@ -8,7 +8,7 @@ import { o as z } from "./chunks/resize.a041304d.js";
 import { u as R } from "./chunks/use-expandable-content-height.62fc84e5.js";
 import { BentoButtonActions as W, BentoButtonActionsLayout as y } from "./button.js";
 import { n as F } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index10.css";
+import "./assets/index15.css";
 var u = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(u || {}), i = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(i || {});
 const N = {
   "en-US": {
@@ -104,25 +104,25 @@ const N = {
   },
   emits: ["click", "expanded"],
   setup(e, { emit: a, slots: t }) {
-    const { t: d } = U(), o = M(t), c = h(null), f = O("card"), l = h(!e.closed);
+    const { t: d } = U(), o = M(t), c = h(null), v = O("card"), l = h(!e.closed);
     p(
       () => e.closed,
       (s) => {
         l.value = !s;
       }
     );
-    const r = n(() => o("default") || o("description") || o("header")), v = n(() => o("default") || o("header")), b = n(
+    const r = n(() => o("default") || o("description") || o("header")), g = n(() => o("default") || o("header")), _ = n(
       () => {
         var s;
         return (o("content") || ((s = e.actions) == null ? void 0 : s.length)) && (!e.expandable || e.expandable && l.value);
       }
-    ), g = n(() => e.expandable && !e.disabled ? 0 : -1), x = n(() => ({
+    ), f = n(() => e.expandable && !e.disabled ? 0 : -1), x = n(() => ({
       [`b-card--${e.background}`]: e.background,
       "b-card--expandable": e.expandable,
       "b-card--disabled": e.expandable && e.disabled
     })), m = n(() => ({
       "b-card__header--expandable": e.expandable,
-      "b-card__header--without-body": !e.expandable && !b.value
+      "b-card__header--without-body": !e.expandable && !_.value
     })), w = n(() => ({
       "b-card__toggle--small-text": e.titleSize === i.SMALL
     })), S = n(() => ({
@@ -146,7 +146,7 @@ const N = {
         strongest: e.titleSize === i.SMALL,
         wide: e.titleSize === i.SMALL
       })
-    ), { updateContentHeight: _, contentHeight: C } = R(c, l), B = n(
+    ), { updateContentHeight: b, contentHeight: C } = R(c, l), B = n(
       () => e.expandable && C.value ? { "max-height": C.value } : {}
     );
     return p(
@@ -154,12 +154,12 @@ const N = {
       () => {
         let s = null;
         !s && c.value && (s = z(c.value, () => {
-          c.value && _();
+          c.value && b();
         }));
       }
     ), {
       // Values
-      cardId: f,
+      cardId: v,
       cardConditionalClasses: x,
       cardBodyConditionalClasses: S,
       cardHeaderConditionalClasses: m,
@@ -167,11 +167,11 @@ const N = {
       cardActionsConditionalClasses: A,
       cardTitleWrapperConditionalClasses: E,
       cardToggleConditionalClasses: w,
-      showCardBody: b,
+      showCardBody: _,
       showContent: l,
-      tabIndex: g,
+      tabIndex: f,
       showHeader: r,
-      showTitleWrapper: v,
+      showTitleWrapper: g,
       typography: L,
       // Expand animation
       contentDiv: c,
@@ -183,7 +183,7 @@ const N = {
       },
       t: d,
       toggleExpansion: () => {
-        !e.disabled && e.expandable && (l.value = !l.value, a("expanded", l.value), _());
+        !e.disabled && e.expandable && (l.value = !l.value, a("expanded", l.value), b());
       }
     };
   }
@@ -194,14 +194,14 @@ var P = function() {
     return !d.type.indexOf("key") && a._k(d.keyCode, "enter", 13, d.key, "Enter") ? null : a.toggleExpansion.apply(null, arguments);
   }, function(d) {
     return !d.type.indexOf("key") && a._k(d.keyCode, "space", 32, d.key, [" ", "Spacebar"]) ? null : a.toggleExpansion.apply(null, arguments);
-  }] } }, [t("div", { staticClass: "b-card__header-wrapper" }, [a.showTitleWrapper ? t("div", { staticClass: "b-card__header-slot-wrapper" }, [t("div", { staticClass: "b-card__title-wrapper", class: a.cardTitleWrapperConditionalClasses }, [a.expandable ? t("div", { staticClass: "b-card__toggle", class: a.cardToggleConditionalClasses }, [a.showContent ? t("chevron-up-icon", { attrs: { "svg-title": a.t("hideCardContent"), "aria-hidden": "true" } }) : t("chevron-down-icon", { attrs: { "svg-title": a.t("showCardContent"), "aria-hidden": "true" } })], 1) : a._e(), a.hasSlot("default") ? t("bento-typography", a._b({ staticClass: "b-card__title" }, "bento-typography", a.typography, !1), [a._t("default")], 2) : a._e()], 1), a.hasSlot("header") ? [a._t("header")] : a._e()], 2) : a._e(), a.hasSlot("description") ? t("bento-typography", { staticClass: "b-card__description", attrs: { el: "div", variant: "body" } }, [a._t("description")], 2) : a._e()], 1)]) : a._e(), t("Transition", { attrs: { name: "b-card__animation" } }, [a.showCardBody ? t("div", { style: a.contentMaxHeight }, [t("div", { ref: "contentDiv", staticClass: "b-card__body", class: a.cardBodyConditionalClasses, attrs: { id: a.expandable ? a.cardId : null } }, [a.hasSlot("content") ? t("div", { staticClass: "b-card__content", class: a.cardContentConditionalClasses }, [a._t("content")], 2) : a._e(), a.actions ? t("div", { staticClass: "b-card__actions", class: a.cardActionsConditionalClasses }, [t("bento-button-actions", { attrs: { actions: a.actions, layout: a.actionsLayout } })], 1) : a._e()])]) : a._e()])], 1);
+  }] } }, [t("div", { staticClass: "b-card__header-wrapper" }, [a.showTitleWrapper ? t("div", { staticClass: "b-card__header-slot-wrapper" }, [t("div", { staticClass: "b-card__title-wrapper", class: a.cardTitleWrapperConditionalClasses }, [a.expandable ? t("div", { staticClass: "b-card__toggle", class: a.cardToggleConditionalClasses }, [a.showContent ? t("chevron-up-icon", { attrs: { "svg-title": a.t("hideCardContent"), "aria-hidden": "true" } }) : t("chevron-down-icon", { attrs: { "svg-title": a.t("showCardContent"), "aria-hidden": "true" } })], 1) : a._e(), a.hasSlot("default") ? t("bento-typography", a._b({ staticClass: "b-card__title" }, "bento-typography", a.typography, !1), [a._t("default")], 2) : a._e()], 1), a.hasSlot("header") ? [a._t("header")] : a._e()], 2) : a._e(), a.hasSlot("description") ? t("bento-typography", { staticClass: "b-card__description", attrs: { el: "div", variant: "body" } }, [a._t("description")], 2) : a._e()], 1)]) : a._e(), t("Transition", { attrs: { name: "b-card__animation" } }, [a.showCardBody ? t("div", { staticClass: "b-card__wrapper", style: a.contentMaxHeight }, [t("div", { ref: "contentDiv", staticClass: "b-card__body", class: a.cardBodyConditionalClasses, attrs: { id: a.expandable ? a.cardId : null } }, [a.hasSlot("content") ? t("div", { staticClass: "b-card__content", class: a.cardContentConditionalClasses }, [a._t("content")], 2) : a._e(), a.actions ? t("div", { staticClass: "b-card__actions", class: a.cardActionsConditionalClasses }, [t("bento-button-actions", { attrs: { actions: a.actions, layout: a.actionsLayout } })], 1) : a._e()])]) : a._e()])], 1);
 }, Y = [], q = /* @__PURE__ */ F(
   j,
   P,
   Y,
   !1,
   null,
-  "f25b077b",
+  "17b60dc8",
   null,
   null
 );

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../src/components/card/card.types.ts","../src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\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 v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\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            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideCardContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showCardContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } 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\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    type MessageSchema = (typeof messages)['en-US'];\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        i18n: { messages },\n        name: 'bento-card',\n        components: { ChevronUpIcon, ChevronDownIcon, BentoTypography, BentoButtonActions },\n        props: {\n            /**\n             * Defines the color of card background\n             */\n            background: {\n                type: String as PropType<BentoCardBackground | `${BentoCardBackground}`>,\n                default: BentoCardBackground.PRIMARY,\n                validator: (value: BentoCardBackground) => Object.values(BentoCardBackground).includes(value),\n            },\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize: {\n                type: String as PropType<BentoCardTitleSize | `${BentoCardTitleSize}`>,\n                default: BentoCardTitleSize.DEFAULT,\n                validator: (value: BentoCardTitleSize) => Object.values(BentoCardTitleSize).includes(value),\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             * 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 | `${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 { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const hasSlot = useHasSlot(slots);\n            const contentDiv = ref<HTMLDivElement>(null);\n\n            const cardId = generateUid('card');\n            const showContent = ref(!props.closed);\n            watch(\n                () => props.closed,\n                value => {\n                    showContent.value = !value;\n                }\n            );\n            const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n            const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n            const showCardBody = computed(\n                () =>\n                    (hasSlot('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 cardToggleConditionalClasses = computed(() => ({\n                'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n            }));\n\n            const cardBodyConditionalClasses = computed(() => ({\n                'b-card__body--expandable': props.expandable && hasSlot('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('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 cardTitleWrapperConditionalClasses = computed(() => ({\n                'b-card__title-wrapper--truncated': hasSlot('header'),\n            }));\n\n            const typography = computed(\n                () =>\n                    ({\n                        el: 'div',\n                        variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                        strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                        wide: props.titleSize === BentoCardTitleSize.SMALL,\n                    } as InstanceType<typeof BentoTypography>['$props'])\n            );\n\n            // Toggle open and close logic and animation\n            const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n            const contentMaxHeight = computed(() =>\n                props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n            );\n\n            watch(\n                () => contentDiv.value,\n                () => {\n                    let observer: ResizeObserver | null = null;\n                    if (!observer && contentDiv.value) {\n                        observer = observeSizeOfElement(contentDiv.value, () => {\n                            if (contentDiv.value) {\n                                updateContentHeight();\n                            }\n                        });\n                    }\n                }\n            );\n\n            const toggleExpansion = () => {\n                if (!props.disabled && props.expandable) {\n                    showContent.value = !showContent.value;\n                    emit('expanded', showContent.value);\n                    updateContentHeight();\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                cardTitleWrapperConditionalClasses,\n                cardToggleConditionalClasses,\n                showCardBody,\n                showContent,\n                tabIndex,\n                showHeader,\n                showTitleWrapper,\n                typography,\n\n                // Expand animation\n                contentDiv,\n                contentMaxHeight,\n\n                // Methods\n                hasSlot,\n                onClick,\n                t,\n                toggleExpansion,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","_sfc_main","defineComponent","messages","ChevronUpIcon","ChevronDownIcon","BentoTypography","BentoButtonActions","value","BentoButtonActionsLayout","props","emit","slots","t","useI18n","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","watch","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement"],"mappings":"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"}
+{"version":3,"file":"card.js","sources":["../src/components/card/card.types.ts","../src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\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 v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\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            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideCardContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showCardContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } 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\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    type MessageSchema = (typeof messages)['en-US'];\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        i18n: { messages },\n        name: 'bento-card',\n        components: { ChevronUpIcon, ChevronDownIcon, BentoTypography, BentoButtonActions },\n        props: {\n            /**\n             * Defines the color of card background\n             */\n            background: {\n                type: String as PropType<BentoCardBackground | `${BentoCardBackground}`>,\n                default: BentoCardBackground.PRIMARY,\n                validator: (value: BentoCardBackground) => Object.values(BentoCardBackground).includes(value),\n            },\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize: {\n                type: String as PropType<BentoCardTitleSize | `${BentoCardTitleSize}`>,\n                default: BentoCardTitleSize.DEFAULT,\n                validator: (value: BentoCardTitleSize) => Object.values(BentoCardTitleSize).includes(value),\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             * 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 | `${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 { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const hasSlot = useHasSlot(slots);\n            const contentDiv = ref<HTMLDivElement>(null);\n\n            const cardId = generateUid('card');\n            const showContent = ref(!props.closed);\n            watch(\n                () => props.closed,\n                value => {\n                    showContent.value = !value;\n                }\n            );\n            const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n            const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n            const showCardBody = computed(\n                () =>\n                    (hasSlot('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 cardToggleConditionalClasses = computed(() => ({\n                'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n            }));\n\n            const cardBodyConditionalClasses = computed(() => ({\n                'b-card__body--expandable': props.expandable && hasSlot('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('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 cardTitleWrapperConditionalClasses = computed(() => ({\n                'b-card__title-wrapper--truncated': hasSlot('header'),\n            }));\n\n            const typography = computed(\n                () =>\n                    ({\n                        el: 'div',\n                        variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                        strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                        wide: props.titleSize === BentoCardTitleSize.SMALL,\n                    } as InstanceType<typeof BentoTypography>['$props'])\n            );\n\n            // Toggle open and close logic and animation\n            const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n            const contentMaxHeight = computed(() =>\n                props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n            );\n\n            watch(\n                () => contentDiv.value,\n                () => {\n                    let observer: ResizeObserver | null = null;\n                    if (!observer && contentDiv.value) {\n                        observer = observeSizeOfElement(contentDiv.value, () => {\n                            if (contentDiv.value) {\n                                updateContentHeight();\n                            }\n                        });\n                    }\n                }\n            );\n\n            const toggleExpansion = () => {\n                if (!props.disabled && props.expandable) {\n                    showContent.value = !showContent.value;\n                    emit('expanded', showContent.value);\n                    updateContentHeight();\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                cardTitleWrapperConditionalClasses,\n                cardToggleConditionalClasses,\n                showCardBody,\n                showContent,\n                tabIndex,\n                showHeader,\n                showTitleWrapper,\n                typography,\n\n                // Expand animation\n                contentDiv,\n                contentMaxHeight,\n\n                // Methods\n                hasSlot,\n                onClick,\n                t,\n                toggleExpansion,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","_sfc_main","defineComponent","messages","ChevronUpIcon","ChevronDownIcon","BentoTypography","BentoButtonActions","value","BentoButtonActionsLayout","props","emit","slots","t","useI18n","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","watch","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement"],"mappings":"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"}

package/dist/checkbox.js

@@ -1,13 +1,13 @@
-import { B as y, b as l } from "./chunks/checkbox.c684c20a.js";
-import { a as D } from "./chunks/checkbox.c684c20a.js";
+import { B as y, b as l } from "./chunks/checkbox.d8b810c7.js";
+import { a as D } from "./chunks/checkbox.d8b810c7.js";
 import { defineComponent as g, toRef as v, computed as n, watch as c, ref as x } from "vue";
 import { g as E } from "./chunks/unique-id.a2a2b458.js";
-import { d as k } from "./chunks/index.b0a89960.js";
+import { d as k } from "./chunks/index.99a2184a.js";
 import { u as C } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { C as S } from "./chunks/controls-group.d25f5044.js";
-import { E as M } from "./chunks/field-label.a0c54b7d.js";
+import { C as S } from "./chunks/controls-group.bf152dea.js";
+import { E as M } from "./chunks/field-label.66f52c8f.js";
 import { n as I } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index11.css";
+import "./assets/index21.css";
 var s = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(s || {});
 const p = "bento-checkbox-group", T = g({
   name: p,

package/dist/chunks/{base-button.bd61ab14.js → base-button.1f07b7c1.js}

@@ -1,5 +1,5 @@
 import { defineComponent as b, computed as r, ref as _ } from "vue";
-import { B as d } from "./index.b0a89960.js";
+import { B as d } from "./index.99a2184a.js";
 import { u as f } from "./use-has-slot.fbeb19ec.js";
 import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/base-button.css";
@@ -85,4 +85,4 @@ export {
   U as B,
   s as a
 };
-//# sourceMappingURL=base-button.bd61ab14.js.map
+//# sourceMappingURL=base-button.1f07b7c1.js.map

package/dist/chunks/{base-button.bd61ab14.js.map → base-button.1f07b7c1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-button.bd61ab14.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;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;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-button.1f07b7c1.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;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;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/base-modal.9d63bdaf.js

@@ -0,0 +1,200 @@
+import { defineComponent as S, useSlots as R, useAttrs as k, ref as h, computed as i, watch as A, onMounted as P } from "vue";
+import { B as F } from "./index.99a2184a.js";
+import { a as N } from "./button.133f145e.js";
+import { B as x } from "./index.3b7d40b7.js";
+import { B as U } from "./index.2cfe4a09.js";
+import { u as z } from "./use-has-slot.fbeb19ec.js";
+import { u as q } from "./i18n.eb5b985b.js";
+import { C as W } from "./cross.04678d81.js";
+import { G as H, a as K } from "./grid-layout.e0025286.js";
+import { n as Q } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import "../assets/base-modal.css";
+var Y = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(Y || {}), C = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(C || {}), m = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(m || {}), _ = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(_ || {}), j = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(j || {}), J = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(J || {});
+const V = {
+  "en-US": {
+    ariaLabelFallback: "modal",
+    close: "Close"
+  }
+}, X = S({
+  i18n: { messages: V },
+  name: "base-modal"
+}), Z = /* @__PURE__ */ S({
+  ...X,
+  props: {
+    /**
+     * 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".
+     * But you may change the color of 1-st action to red with 'critial' key
+     * Not more than 3 action buttons can be provided
+     * Or 2 action buttons and 1 Label for them
+     *
+     * 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,
+      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,
+      default: m.SMALLER
+    },
+    /**
+     * If provided, manages the padding of the whole modal container
+     */
+    customPadding: { type: String, default: null },
+    /**
+     * Hides a cross icon on the right side of the title
+     */
+    hideCloseButton: { type: Boolean, required: !0 },
+    /**
+     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
+     */
+    initiallyOpen: { type: Boolean, default: !1 },
+    /**
+     * If set to true, it allows the modal to be closed by clicking outside of it
+     */
+    isDismissible: { type: Boolean, required: !0 },
+    /**
+     * Controls the modal's state from the outside. Set it to true to open the modal
+     */
+    isOpen: { type: Boolean, required: !0 },
+    /**
+     * Defines whether the modal will be an alert modal
+     */
+    modalRole: { type: String, default: _.DIALOG },
+    /**
+     * Allows the inner elments to overflow the dialog
+     */
+    overflowVisible: { type: Boolean, default: !1 },
+    /**
+     * Sets the width of the modal
+     */
+    size: {
+      type: String,
+      default: C.SMALL
+    },
+    /**
+     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
+     */
+    withColumnLayout: { type: Boolean, default: !1 }
+  },
+  emits: ["close-modal"],
+  setup(e, { expose: a, emit: o }) {
+    const t = e, n = 500, { t: y } = q(), g = R(), v = k(), d = z(g), r = h(null), c = h(!1), B = i(() => t.isDismissible && !t.hideCloseButton), O = i(() => {
+      if (!t.customPadding)
+        return {};
+      const s = {
+        paddingLeft: t.customPadding,
+        paddingRight: t.customPadding
+      }, l = { ...s, paddingTop: void 0, paddingBottom: void 0 };
+      return d("default") || (l.paddingTop = t.customPadding), d("actions") || (l.paddingBottom = t.customPadding), {
+        header: { ...s, paddingTop: t.customPadding },
+        content: l,
+        actions: { ...s, paddingBottom: t.customPadding }
+      };
+    }), E = i(() => v["aria-label"] ?? y("ariaLabelFallback")), p = i(() => t.withColumnLayout && t.size === C.LARGE), f = () => {
+      r.value.showModal();
+    }, L = () => {
+      o("close-modal");
+    }, D = () => {
+      c.value && (r.value.close(), L(), c.value = !1);
+    }, u = () => {
+      r.value.open && (c.value = !0);
+    }, b = (s) => {
+      s && s.preventDefault(), !(!t.isDismissible && t.modalRole === _.DIALOG) && u();
+    }, M = ({ target: s }) => {
+      s && s.tagName === _.DIALOG.toUpperCase() && b();
+    }, G = i(() => ({
+      [`b-modal-base__container--${t.size}`]: t.size,
+      "b-modal-base__container--hide": c.value,
+      "b-modal-base__container--overflow-visible": t.overflowVisible,
+      "b-modal-base__container--column-layout": p.value
+    })), I = i(() => ({
+      "b-modal-base__content--column-layout": p.value,
+      "b-modal-base__content--with-header": d("default"),
+      "b-modal-base__content--with-actions": d("actions")
+    })), T = i(() => t.columnsSize === m.SMALLER ? [
+      { small: 4, medium: 4, large: 4 },
+      { small: 8, medium: 8, large: 8 }
+    ] : t.columnsSize === m.BIGGER ? [
+      { small: 8, medium: 8, large: 8 },
+      { small: 4, medium: 4, large: 4 }
+    ] : [
+      { small: 6, medium: 6, large: 6 },
+      { small: 6, medium: 6, large: 6 }
+    ]);
+    return A(
+      () => [t.isOpen, r.value],
+      ([s, l], [, w]) => {
+        if (!l)
+          return;
+        s ? f() : !w || u();
+      }
+    ), A(
+      () => t.actions,
+      () => {
+        var s, l;
+        ((l = (s = t.actions) == null ? void 0 : s[0]) == null ? void 0 : l.state) === "success" && setTimeout(u, n);
+      },
+      { deep: !0 }
+    ), P(() => {
+      t.isOpen && r.value && f();
+    }), a({
+      internalModalActionClose: b
+    }), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, t: y, slots: g, attrs: v, hasSlot: d, modal: r, isClosing: c, emit: o, props: t, showCloseButton: B, customPaddingStyles: O, computedAriaLabel: E, hasColumnLayout: p, openModal: f, emitCloseEvent: L, closeModalAfterAnimation: D, startCloseModalAnimation: u, internalModalActionClose: b, closeModalOnClickOutside: M, modalConditionalClasses: G, modalContentConditionalClasses: I, computedColumnWidth: T, BentoTypography: F, BentoButton: N, BentoDivider: x, BentoFocusTrap: U, GridLayout: H, GridLayoutContainerType: K, CrossIcon: W };
+  }
+});
+var $ = function() {
+  var a = this, o = a._self._c, t = a._self._setupProxy;
+  return o("div", { staticClass: "b-modal-base" }, [o("dialog", { ref: "modal", staticClass: "b-modal-base__container", class: t.modalConditionalClasses, attrs: { role: a.modalRole, "aria-label": t.computedAriaLabel, open: a.initiallyOpen }, on: { animationend: t.closeModalAfterAnimation, click: function(n) {
+    a.isDismissible && t.closeModalOnClickOutside(n);
+  }, keydown: function(n) {
+    return !n.type.indexOf("key") && a._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : t.internalModalActionClose.apply(null, arguments);
+  } } }, [a.isOpen || a.initiallyOpen ? o(t.BentoFocusTrap, [o("div", { staticClass: "b-modal-base__wrapper" }, [t.hasSlot("default") || t.showCloseButton ? o("div", { staticClass: "b-modal-base__header-container", style: t.customPaddingStyles.header }, [o("div", { staticClass: "b-modal-base__header" }, [o(t.BentoTypography, { staticClass: "b-modal-base__title", attrs: { "aria-label": "base modal title", el: "span", variant: "title", stronger: "" } }, [t.hasSlot("default") ? a._t("default") : a._e()], 2), t.showCloseButton ? o(t.BentoButton, { staticClass: "b-modal-base__close-button", attrs: { variant: "tertiary", type: "button" }, on: { click: t.internalModalActionClose } }, [o(t.CrossIcon, { attrs: { "svg-title": t.t("close") } })], 1) : a._e()], 1), t.hasColumnLayout ? o(t.BentoDivider, { staticClass: "b-modal-base__divider" }) : a._e()], 1) : a._e(), o("div", { staticClass: "b-modal-base__content", class: t.modalContentConditionalClasses, style: t.customPaddingStyles.content }, [t.hasSlot("content") || t.hasSlot("content-col-1") && t.hasSlot("content-col-2") ? o(t.BentoTypography, { attrs: { "aria-label": "base modal content", el: "div", variant: "body", stronger: "" } }, [t.hasColumnLayout ? o(t.GridLayout, { staticClass: "b-modal-base__grid", attrs: { "column-width": t.computedColumnWidth, "container-type": t.GridLayoutContainerType.NORMAL, "no-gap": "" }, scopedSlots: a._u([{ key: "col-1", fn: function() {
+    return [a._t("content-col-1")];
+  }, proxy: !0 }, { key: "col-2", fn: function() {
+    return [a._t("content-col-2")];
+  }, proxy: !0 }], null, !0) }) : a._t("content")], 2) : a._e()], 1), t.hasSlot("actions") ? o("div", { staticClass: "b-modal-base__actions-container", style: t.customPaddingStyles.actions }, [t.hasColumnLayout ? o(t.BentoDivider, { staticClass: "b-modal-base__divider" }) : a._e(), o("div", { staticClass: "b-modal-base__actions", attrs: { "aria-label": "modal actions" } }, [a._t("actions")], 2)], 1) : a._e()])]) : a._e()], 1)]);
+}, tt = [], et = /* @__PURE__ */ Q(
+  Z,
+  $,
+  tt,
+  !1,
+  null,
+  "3c74866f",
+  null,
+  null
+);
+const _t = et.exports;
+export {
+  Y as B,
+  C as a,
+  m as b,
+  _ as c,
+  j as d,
+  J as e,
+  _t as f
+};
+//# sourceMappingURL=base-modal.9d63bdaf.js.map