@adyen/bento-vue2 1.56.2 → 1.57.1

package/dist/assets/modal-fullscreen.css

@@ -1 +1 @@
-.b-modal-fullscreen-page[data-v-30654f2c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;overflow:hidden;position:absolute;width:100%}.b-modal-fullscreen-page[data-v-30654f2c],.b-modal-fullscreen-page[data-v-30654f2c]:before,.b-modal-fullscreen-page[data-v-30654f2c]:after{box-sizing:border-box}.b-modal-fullscreen-page *[data-v-30654f2c],.b-modal-fullscreen-page *[data-v-30654f2c]:before,.b-modal-fullscreen-page *[data-v-30654f2c]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-30654f2c] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-30654f2c] ::-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-modal-fullscreen-page__header[data-v-30654f2c]{align-items:center;display:flex;flex-grow:1;gap:var(--b-modal-fullscreen-header-gap);height:64px;overflow-x:auto;overflow-y:hidden;padding:var(--b-modal-fullscreen-header-padding)}.b-modal-fullscreen-page__header-section[data-v-30654f2c]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-30654f2c]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-30654f2c]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-30654f2c]{align-items:center;gap:var(--b-modal-fullscreen-header-gap);justify-content:end}.b-modal-fullscreen-page__title[data-v-30654f2c]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-30654f2c]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-30654f2c]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-30654f2c] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-30654f2c]{border-left:var(--b-modal-fullscreen-separator-border-left);height:26px;margin-right:var(--b-modal-fullscreen-separator-margin-right)}.b-modal-fullscreen-page__content[data-v-30654f2c]{height:100%;overflow:auto}.b-modal-fullscreen[data-v-cfb8d3ae]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-modal-fullscreen-background-color);border:0;color:var(--b-modal-fullscreen-color);height:100%;max-height:100%;max-width:100%;overflow:hidden;padding:0;width:100%}.b-modal-fullscreen[data-v-cfb8d3ae],.b-modal-fullscreen[data-v-cfb8d3ae]:before,.b-modal-fullscreen[data-v-cfb8d3ae]:after{box-sizing:border-box}.b-modal-fullscreen *[data-v-cfb8d3ae],.b-modal-fullscreen *[data-v-cfb8d3ae]:before,.b-modal-fullscreen *[data-v-cfb8d3ae]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-cfb8d3ae] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-cfb8d3ae] ::-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-modal-fullscreen__wrapper[data-v-cfb8d3ae]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen__close-button[data-v-cfb8d3ae]{align-items:center;background-color:var(--b-modal-fullscreen-background-color);display:flex;height:64px;padding-inline:var(--b-modal-fullscreen-close-button-padding-inline);position:absolute;right:0;z-index:var(--b-modal-fullscreen-close-button-z-index)}.b-modal-fullscreen[data-v-cfb8d3ae]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-cfb8d3ae]{animation:fade-in-u5i31l8-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),enter-u5i31l8-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-enter),scale-up-u5i31l8-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-u5i31l8-cfb8d3ae{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u5i31l8-cfb8d3ae{0%{scale:1}to{scale:1}}@keyframes enter-u5i31l8-cfb8d3ae{0%{translate:0 64px}to{translate:0 0}}.b-modal-fullscreen--hide[open][data-v-cfb8d3ae]{animation:fade-out-u5i31nw-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),exit-u5i31nw-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-exit),scale-down-u5i31nw-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-u5i31nw-cfb8d3ae{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u5i31nw-cfb8d3ae{0%{scale:1}to{scale:1}}@keyframes exit-u5i31nw-cfb8d3ae{0%{translate:0 0}to{translate:0 64px}}
+.b-modal-fullscreen-page[data-v-30654f2c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;overflow:hidden;position:absolute;width:100%}.b-modal-fullscreen-page[data-v-30654f2c],.b-modal-fullscreen-page[data-v-30654f2c]:before,.b-modal-fullscreen-page[data-v-30654f2c]:after{box-sizing:border-box}.b-modal-fullscreen-page *[data-v-30654f2c],.b-modal-fullscreen-page *[data-v-30654f2c]:before,.b-modal-fullscreen-page *[data-v-30654f2c]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-30654f2c] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-30654f2c] ::-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-modal-fullscreen-page__header[data-v-30654f2c]{align-items:center;display:flex;flex-grow:1;gap:var(--b-modal-fullscreen-header-gap);height:64px;overflow-x:auto;overflow-y:hidden;padding:var(--b-modal-fullscreen-header-padding)}.b-modal-fullscreen-page__header-section[data-v-30654f2c]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-30654f2c]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-30654f2c]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-30654f2c]{align-items:center;gap:var(--b-modal-fullscreen-header-gap);justify-content:end}.b-modal-fullscreen-page__title[data-v-30654f2c]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-30654f2c]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-30654f2c]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-30654f2c] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-30654f2c]{border-left:var(--b-modal-fullscreen-separator-border-left);height:26px;margin-right:var(--b-modal-fullscreen-separator-margin-right)}.b-modal-fullscreen-page__content[data-v-30654f2c]{height:100%;overflow:auto}.b-modal-fullscreen[data-v-cfb8d3ae]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-modal-fullscreen-background-color);border:0;color:var(--b-modal-fullscreen-color);height:100%;max-height:100%;max-width:100%;overflow:hidden;padding:0;width:100%}.b-modal-fullscreen[data-v-cfb8d3ae],.b-modal-fullscreen[data-v-cfb8d3ae]:before,.b-modal-fullscreen[data-v-cfb8d3ae]:after{box-sizing:border-box}.b-modal-fullscreen *[data-v-cfb8d3ae],.b-modal-fullscreen *[data-v-cfb8d3ae]:before,.b-modal-fullscreen *[data-v-cfb8d3ae]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-cfb8d3ae] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-cfb8d3ae] ::-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-modal-fullscreen__wrapper[data-v-cfb8d3ae]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen__close-button[data-v-cfb8d3ae]{align-items:center;background-color:var(--b-modal-fullscreen-background-color);display:flex;height:64px;padding-inline:var(--b-modal-fullscreen-close-button-padding-inline);position:absolute;right:0;z-index:var(--b-modal-fullscreen-close-button-z-index)}.b-modal-fullscreen[data-v-cfb8d3ae]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-cfb8d3ae]{animation:fade-in-ueugo5l-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),enter-ueugo5l-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-enter),scale-up-ueugo5l-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-ueugo5l-cfb8d3ae{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ueugo5l-cfb8d3ae{0%{scale:1}to{scale:1}}@keyframes enter-ueugo5l-cfb8d3ae{0%{translate:0 64px}to{translate:0 0}}.b-modal-fullscreen--hide[open][data-v-cfb8d3ae]{animation:fade-out-ueugo6i-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),exit-ueugo6i-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-exit),scale-down-ueugo6i-cfb8d3ae var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-ueugo6i-cfb8d3ae{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ueugo6i-cfb8d3ae{0%{scale:1}to{scale:1}}@keyframes exit-ueugo6i-cfb8d3ae{0%{translate:0 0}to{translate:0 64px}}

package/dist/assets/pagination.css

@@ -1 +1 @@
-.b-pagination-results-per-page[data-v-c28c6859]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;display:flex}.b-pagination-results-per-page[data-v-c28c6859],.b-pagination-results-per-page[data-v-c28c6859]:before,.b-pagination-results-per-page[data-v-c28c6859]:after{box-sizing:border-box}.b-pagination-results-per-page *[data-v-c28c6859],.b-pagination-results-per-page *[data-v-c28c6859]:before,.b-pagination-results-per-page *[data-v-c28c6859]:after{box-sizing:border-box}.b-pagination-results-per-page[data-v-c28c6859] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination-results-per-page[data-v-c28c6859] ::-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-pagination-results-per-page__dropdown-container[data-v-c28c6859]{align-items:center;display:flex}.b-pagination-results-per-page__dropdown[data-v-c28c6859]{margin:var(--b-pagination-results-per-page-margin);width:80px}.b-pagination-context[data-v-6ce0e160]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-pagination-context[data-v-6ce0e160],.b-pagination-context[data-v-6ce0e160]:before,.b-pagination-context[data-v-6ce0e160]:after{box-sizing:border-box}.b-pagination-context *[data-v-6ce0e160],.b-pagination-context *[data-v-6ce0e160]:before,.b-pagination-context *[data-v-6ce0e160]:after{box-sizing:border-box}.b-pagination-context[data-v-6ce0e160] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination-context[data-v-6ce0e160] ::-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-pagination-context__dropdown[data-v-6ce0e160]{display:inline-block;margin:var(--b-pagination-context-margin);width:80px}.b-pagination-context__dropdown[data-v-6ce0e160] .b-listbox-option{overflow-wrap:unset}.b-pagination-controls[data-v-65f213a4]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-pagination-controls-gap);list-style:none;margin:0;padding:0}.b-pagination-controls[data-v-65f213a4],.b-pagination-controls[data-v-65f213a4]:before,.b-pagination-controls[data-v-65f213a4]:after{box-sizing:border-box}.b-pagination-controls *[data-v-65f213a4],.b-pagination-controls *[data-v-65f213a4]:before,.b-pagination-controls *[data-v-65f213a4]:after{box-sizing:border-box}.b-pagination-controls[data-v-65f213a4] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination-controls[data-v-65f213a4] ::-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-pagination-controls__item[data-v-65f213a4]{display:flex}.b-pagination[data-v-b3d5cd4e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--b-pagination-color);container-type:inline-size}.b-pagination[data-v-b3d5cd4e],.b-pagination[data-v-b3d5cd4e]:before,.b-pagination[data-v-b3d5cd4e]:after{box-sizing:border-box}.b-pagination *[data-v-b3d5cd4e],.b-pagination *[data-v-b3d5cd4e]:before,.b-pagination *[data-v-b3d5cd4e]:after{box-sizing:border-box}.b-pagination[data-v-b3d5cd4e] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination[data-v-b3d5cd4e] ::-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-pagination__navigation[data-v-b3d5cd4e]{align-items:center;display:flex;flex-direction:column-reverse;gap:var(--b-pagination-navigation-small-container-gap)}.b-pagination__controls[data-v-b3d5cd4e],.b-pagination__context[data-v-b3d5cd4e]{align-items:center;display:flex;justify-content:center}.b-pagination__page-navigator[data-v-b3d5cd4e]{display:flex;flex-direction:column-reverse;gap:var(--b-pagination-page-navigator-small-container-gap)}.b-pagination__divider[data-v-b3d5cd4e]{display:none}@container (min-width: 410px){.b-pagination__page-navigator[data-v-b3d5cd4e]{flex-direction:row;gap:0;justify-content:center}.b-pagination__divider[data-v-b3d5cd4e]{border-right:var(--b-pagination-divider-border-width) solid var(--b-pagination-divider-border-color);display:block;margin:var(--b-pagination-divider-margin);width:0}}@container (min-width: 620px){.b-pagination__navigation[data-v-b3d5cd4e]{flex-direction:row;justify-content:space-between}.b-pagination__navigation--only-page-navigator[data-v-b3d5cd4e]{justify-content:flex-end}.b-pagination__page-navigator[data-v-b3d5cd4e]{justify-content:unset}.b-pagination__results-per-page[data-v-b3d5cd4e]{display:block}}
+.b-pagination-results-per-page[data-v-c28c6859]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;display:flex}.b-pagination-results-per-page[data-v-c28c6859],.b-pagination-results-per-page[data-v-c28c6859]:before,.b-pagination-results-per-page[data-v-c28c6859]:after{box-sizing:border-box}.b-pagination-results-per-page *[data-v-c28c6859],.b-pagination-results-per-page *[data-v-c28c6859]:before,.b-pagination-results-per-page *[data-v-c28c6859]:after{box-sizing:border-box}.b-pagination-results-per-page[data-v-c28c6859] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination-results-per-page[data-v-c28c6859] ::-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-pagination-results-per-page .b-pagination-results-per-page__dropdown[data-v-c28c6859]{min-width:80px}.b-pagination-results-per-page__dropdown-container[data-v-c28c6859]{align-items:center;display:flex}.b-pagination-results-per-page__dropdown[data-v-c28c6859]{margin:var(--b-pagination-results-per-page-margin);min-width:75px}.b-pagination-context[data-v-18345698]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-pagination-context[data-v-18345698],.b-pagination-context[data-v-18345698]:before,.b-pagination-context[data-v-18345698]:after{box-sizing:border-box}.b-pagination-context *[data-v-18345698],.b-pagination-context *[data-v-18345698]:before,.b-pagination-context *[data-v-18345698]:after{box-sizing:border-box}.b-pagination-context[data-v-18345698] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination-context[data-v-18345698] ::-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-pagination-context__dropdown[data-v-18345698]{display:inline-block;margin:var(--b-pagination-context-margin);min-width:75px}.b-pagination-context__dropdown[data-v-18345698] .b-listbox-option{overflow-wrap:unset}.b-pagination-controls[data-v-65f213a4]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-pagination-controls-gap);list-style:none;margin:0;padding:0}.b-pagination-controls[data-v-65f213a4],.b-pagination-controls[data-v-65f213a4]:before,.b-pagination-controls[data-v-65f213a4]:after{box-sizing:border-box}.b-pagination-controls *[data-v-65f213a4],.b-pagination-controls *[data-v-65f213a4]:before,.b-pagination-controls *[data-v-65f213a4]:after{box-sizing:border-box}.b-pagination-controls[data-v-65f213a4] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination-controls[data-v-65f213a4] ::-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-pagination-controls__item[data-v-65f213a4]{display:flex}.b-pagination[data-v-b3d5cd4e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--b-pagination-color);container-type:inline-size}.b-pagination[data-v-b3d5cd4e],.b-pagination[data-v-b3d5cd4e]:before,.b-pagination[data-v-b3d5cd4e]:after{box-sizing:border-box}.b-pagination *[data-v-b3d5cd4e],.b-pagination *[data-v-b3d5cd4e]:before,.b-pagination *[data-v-b3d5cd4e]:after{box-sizing:border-box}.b-pagination[data-v-b3d5cd4e] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination[data-v-b3d5cd4e] ::-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-pagination__navigation[data-v-b3d5cd4e]{align-items:center;display:flex;flex-direction:column;gap:var(--b-pagination-navigation-small-container-gap)}.b-pagination__controls[data-v-b3d5cd4e],.b-pagination__context[data-v-b3d5cd4e]{align-items:center;display:flex;justify-content:center}.b-pagination__page-navigator[data-v-b3d5cd4e]{display:flex;flex-direction:row;justify-content:center}.b-pagination__divider[data-v-b3d5cd4e]{border-right:var(--b-pagination-divider-border-width) solid var(--b-pagination-divider-border-color);display:block;margin:var(--b-pagination-divider-margin);width:0}@container (min-width: 504px){.b-pagination__navigation[data-v-b3d5cd4e]{flex-direction:row;justify-content:space-between}.b-pagination__navigation--only-page-navigator[data-v-b3d5cd4e]{justify-content:flex-end}.b-pagination__page-navigator[data-v-b3d5cd4e]{justify-content:unset}.b-pagination__results-per-page[data-v-b3d5cd4e]{display:block}}

package/dist/assets/popover.css

@@ -1 +1 @@
-.b-popover-dismiss-button[data-v-71876338]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer}.b-popover-dismiss-button[data-v-71876338],.b-popover-dismiss-button[data-v-71876338]:before,.b-popover-dismiss-button[data-v-71876338]:after{box-sizing:border-box}.b-popover-dismiss-button *[data-v-71876338],.b-popover-dismiss-button *[data-v-71876338]:before,.b-popover-dismiss-button *[data-v-71876338]:after{box-sizing:border-box}.b-popover-dismiss-button[data-v-71876338] ::-webkit-scrollbar{height:14px;width:14px}.b-popover-dismiss-button[data-v-71876338] ::-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-popover-dismiss-button--on-image[data-v-71876338]{color:var(--b-popover-dismiss-button-on-image-icon-color)}.b-popover-dismiss-button--on-image[data-v-71876338]:hover{color:var(--b-popover-dismiss-button-on-image-icon-hovered-color)}.b-popover-dismiss-button--on-image[data-v-71876338]:active{color:var(--b-popover-dismiss-button-on-image-icon-active-color)}.b-popover[data-v-84340d66]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--b-popover-background-color);border:var(--b-popover-border);border-radius:var(--b-popover-border-radius);box-shadow:var(--b-popover-box-shadow);color:var(--b-popover-color);overflow:hidden;width:100%;z-index:var(--b-popover-z-index)}.b-popover[data-v-84340d66],.b-popover[data-v-84340d66]:before,.b-popover[data-v-84340d66]:after{box-sizing:border-box}.b-popover *[data-v-84340d66],.b-popover *[data-v-84340d66]:before,.b-popover *[data-v-84340d66]:after{box-sizing:border-box}.b-popover[data-v-84340d66] ::-webkit-scrollbar{height:14px;width:14px}.b-popover[data-v-84340d66] ::-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 (min-width: 376px){.b-popover[data-v-84340d66]{width:320px}}.b-popover[data-v-84340d66] .b-popover__arrow:before{color:transparent;display:none}.b-popover--fit-content[data-v-84340d66]{width:fit-content}.b-popover--overflow-visible[data-v-84340d66]{overflow:visible}.b-popover--overflow-visible .b-popover__footer[data-v-84340d66]{border-bottom-left-radius:var(--b-popover-border-radius);border-bottom-right-radius:var(--b-popover-border-radius)}.b-popover--small[data-v-84340d66]{width:200px}.b-popover--large[data-v-84340d66]{width:480px}.b-popover--with-divider .b-popover__footer[data-v-84340d66]{background-color:var(--b-popover-with-divider-footer-background-color);border-top:var(--b-popover-with-divider-footer-border-top);padding-top:var(--b-popover-with-divider-footer-padding-top)}.b-popover--with-divider .b-popover__content[data-v-84340d66]{padding:var(--b-popover-with-divider-content-padding)}.b-popover--without-space>.b-popover__header[data-v-84340d66]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__content[data-v-84340d66]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__footer[data-v-84340d66]{padding:var(--b-popover-without-space-padding)}.b-popover__content[data-v-84340d66]{padding:var(--b-popover-content-padding)}.b-popover__content--with-title[data-v-84340d66]{padding:var(--b-popover-content-with-title-padding)}.b-popover__header[data-v-84340d66]{align-items:baseline;display:flex;justify-content:space-between;padding:var(--b-popover-header-padding)}.b-popover__header-title[data-v-84340d66]{align-items:center;column-gap:var(--b-popover-header-title-column-gap);display:flex}.b-popover__image[data-v-84340d66]{display:flex;overflow:hidden}.b-popover__image+.b-popover__header[data-v-84340d66]{padding:var(--b-popover-image-header-padding)}.b-popover__image-dismiss-button[data-v-84340d66]{position:absolute;right:var(--b-popover-image-dismiss-icon-right);top:var(--b-popover-image-dismiss-icon-top)}.b-popover__footer[data-v-84340d66]{padding:var(--b-popover-footer-padding)}.b-popover__animation-enter-active[data-popper-placement^=top][data-v-84340d66]{animation:fade-in-u5i31pb-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u5i31pb-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u5i31pb-84340d66{0%{opacity:0}to{opacity:1}}@keyframes move-in-u5i31pb-84340d66{0%{top:8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=top][data-v-84340d66]{animation:fade-out-u5i31q4-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u5i31q4-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u5i31q4-84340d66{0%{opacity:1}to{opacity:0}}@keyframes move-out-u5i31q4-84340d66{0%{top:0}to{top:8px}}.b-popover__animation-enter-active[data-popper-placement^=bottom][data-v-84340d66]{animation:fade-in-u5i31rj-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u5i31rj-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u5i31rj-84340d66{0%{opacity:0}to{opacity:1}}@keyframes move-in-u5i31rj-84340d66{0%{top:-8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=bottom][data-v-84340d66]{animation:fade-out-u5i31sn-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u5i31sn-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u5i31sn-84340d66{0%{opacity:1}to{opacity:0}}@keyframes move-out-u5i31sn-84340d66{0%{top:0}to{top:-8px}}.b-popover__animation-enter-active[data-popper-placement^=left][data-v-84340d66]{animation:fade-in-u5i31u0-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u5i31u0-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u5i31u0-84340d66{0%{opacity:0}to{opacity:1}}@keyframes move-in-u5i31u0-84340d66{0%{left:8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=left][data-v-84340d66]{animation:fade-out-u5i31um-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u5i31um-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u5i31um-84340d66{0%{opacity:1}to{opacity:0}}@keyframes move-out-u5i31um-84340d66{0%{left:0}to{left:8px}}.b-popover__animation-enter-active[data-popper-placement^=right][data-v-84340d66]{animation:fade-in-u5i31v4-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u5i31v4-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u5i31v4-84340d66{0%{opacity:0}to{opacity:1}}@keyframes move-in-u5i31v4-84340d66{0%{left:-8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=right][data-v-84340d66]{animation:fade-out-u5i31vf-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u5i31vf-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u5i31vf-84340d66{0%{opacity:1}to{opacity:0}}@keyframes move-out-u5i31vf-84340d66{0%{left:0}to{left:-8px}}
+.b-popover-dismiss-button[data-v-71876338]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer}.b-popover-dismiss-button[data-v-71876338],.b-popover-dismiss-button[data-v-71876338]:before,.b-popover-dismiss-button[data-v-71876338]:after{box-sizing:border-box}.b-popover-dismiss-button *[data-v-71876338],.b-popover-dismiss-button *[data-v-71876338]:before,.b-popover-dismiss-button *[data-v-71876338]:after{box-sizing:border-box}.b-popover-dismiss-button[data-v-71876338] ::-webkit-scrollbar{height:14px;width:14px}.b-popover-dismiss-button[data-v-71876338] ::-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-popover-dismiss-button--on-image[data-v-71876338]{color:var(--b-popover-dismiss-button-on-image-icon-color)}.b-popover-dismiss-button--on-image[data-v-71876338]:hover{color:var(--b-popover-dismiss-button-on-image-icon-hovered-color)}.b-popover-dismiss-button--on-image[data-v-71876338]:active{color:var(--b-popover-dismiss-button-on-image-icon-active-color)}.b-popover[data-v-84340d66]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--b-popover-background-color);border:var(--b-popover-border);border-radius:var(--b-popover-border-radius);box-shadow:var(--b-popover-box-shadow);color:var(--b-popover-color);overflow:hidden;width:100%;z-index:var(--b-popover-z-index)}.b-popover[data-v-84340d66],.b-popover[data-v-84340d66]:before,.b-popover[data-v-84340d66]:after{box-sizing:border-box}.b-popover *[data-v-84340d66],.b-popover *[data-v-84340d66]:before,.b-popover *[data-v-84340d66]:after{box-sizing:border-box}.b-popover[data-v-84340d66] ::-webkit-scrollbar{height:14px;width:14px}.b-popover[data-v-84340d66] ::-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 (min-width: 376px){.b-popover[data-v-84340d66]{width:320px}}.b-popover[data-v-84340d66] .b-popover__arrow:before{color:transparent;display:none}.b-popover--fit-content[data-v-84340d66]{width:fit-content}.b-popover--overflow-visible[data-v-84340d66]{overflow:visible}.b-popover--overflow-visible .b-popover__footer[data-v-84340d66]{border-bottom-left-radius:var(--b-popover-border-radius);border-bottom-right-radius:var(--b-popover-border-radius)}.b-popover--small[data-v-84340d66]{width:200px}.b-popover--large[data-v-84340d66]{width:480px}.b-popover--with-divider .b-popover__footer[data-v-84340d66]{background-color:var(--b-popover-with-divider-footer-background-color);border-top:var(--b-popover-with-divider-footer-border-top);padding-top:var(--b-popover-with-divider-footer-padding-top)}.b-popover--with-divider .b-popover__content[data-v-84340d66]{padding:var(--b-popover-with-divider-content-padding)}.b-popover--without-space>.b-popover__header[data-v-84340d66]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__content[data-v-84340d66]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__footer[data-v-84340d66]{padding:var(--b-popover-without-space-padding)}.b-popover__content[data-v-84340d66]{padding:var(--b-popover-content-padding)}.b-popover__content--with-title[data-v-84340d66]{padding:var(--b-popover-content-with-title-padding)}.b-popover__header[data-v-84340d66]{align-items:baseline;display:flex;justify-content:space-between;padding:var(--b-popover-header-padding)}.b-popover__header-title[data-v-84340d66]{align-items:center;column-gap:var(--b-popover-header-title-column-gap);display:flex}.b-popover__image[data-v-84340d66]{display:flex;overflow:hidden}.b-popover__image+.b-popover__header[data-v-84340d66]{padding:var(--b-popover-image-header-padding)}.b-popover__image-dismiss-button[data-v-84340d66]{position:absolute;right:var(--b-popover-image-dismiss-icon-right);top:var(--b-popover-image-dismiss-icon-top)}.b-popover__footer[data-v-84340d66]{padding:var(--b-popover-footer-padding)}.b-popover__animation-enter-active[data-popper-placement^=top][data-v-84340d66]{animation:fade-in-ueugo79-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-ueugo79-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-ueugo79-84340d66{0%{opacity:0}to{opacity:1}}@keyframes move-in-ueugo79-84340d66{0%{top:8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=top][data-v-84340d66]{animation:fade-out-ueugo7y-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-ueugo7y-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-ueugo7y-84340d66{0%{opacity:1}to{opacity:0}}@keyframes move-out-ueugo7y-84340d66{0%{top:0}to{top:8px}}.b-popover__animation-enter-active[data-popper-placement^=bottom][data-v-84340d66]{animation:fade-in-ueugo8w-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-ueugo8w-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-ueugo8w-84340d66{0%{opacity:0}to{opacity:1}}@keyframes move-in-ueugo8w-84340d66{0%{top:-8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=bottom][data-v-84340d66]{animation:fade-out-ueugo9d-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-ueugo9d-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-ueugo9d-84340d66{0%{opacity:1}to{opacity:0}}@keyframes move-out-ueugo9d-84340d66{0%{top:0}to{top:-8px}}.b-popover__animation-enter-active[data-popper-placement^=left][data-v-84340d66]{animation:fade-in-ueugo9o-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-ueugo9o-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-ueugo9o-84340d66{0%{opacity:0}to{opacity:1}}@keyframes move-in-ueugo9o-84340d66{0%{left:8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=left][data-v-84340d66]{animation:fade-out-ueugoah-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-ueugoah-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-ueugoah-84340d66{0%{opacity:1}to{opacity:0}}@keyframes move-out-ueugoah-84340d66{0%{left:0}to{left:8px}}.b-popover__animation-enter-active[data-popper-placement^=right][data-v-84340d66]{animation:fade-in-ueugoam-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-ueugoam-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-ueugoam-84340d66{0%{opacity:0}to{opacity:1}}@keyframes move-in-ueugoam-84340d66{0%{left:-8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=right][data-v-84340d66]{animation:fade-out-ueugoax-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-ueugoax-84340d66 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-ueugoax-84340d66{0%{opacity:1}to{opacity:0}}@keyframes move-out-ueugoax-84340d66{0%{left:0}to{left:-8px}}

package/dist/assets/rich-text-editor.css

@@ -0,0 +1 @@
+.b-rich-text-editor-content-area[data-v-89e2f70a]{min-height:var(--b-rich-text-editor-content-area-min-height);padding:var(--b-rich-text-editor-content-area-padding);white-space:pre-wrap}.b-rich-text-editor-content-area--disabled[data-v-89e2f70a]{background:var(--b-rich-text-editor-content-area-disabled-background-color);pointer-events:none}.b-rich-text-editor-content-area[data-v-89e2f70a]:focus{outline:none}.b-rich-text-editor[data-v-9241ad8d]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--b-rich-text-editor-color);white-space:pre-wrap}.b-rich-text-editor[data-v-9241ad8d],.b-rich-text-editor[data-v-9241ad8d]:before,.b-rich-text-editor[data-v-9241ad8d]:after{box-sizing:border-box}.b-rich-text-editor *[data-v-9241ad8d],.b-rich-text-editor *[data-v-9241ad8d]:before,.b-rich-text-editor *[data-v-9241ad8d]:after{box-sizing:border-box}.b-rich-text-editor[data-v-9241ad8d] ::-webkit-scrollbar{height:14px;width:14px}.b-rich-text-editor[data-v-9241ad8d] ::-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-rich-text-editor__error-message[data-v-9241ad8d]{margin-top:var(--b-dropdown-error-message-margin-top)}.b-rich-text-editor__description[data-v-9241ad8d]{color:var(--b-rich-text-editor-description-color);display:block;margin-top:var(--b-rich-text-editor-description-margin-top)}.b-rich-text-editor__container[data-v-9241ad8d]{border:var(--b-rich-text-editor-container-border);border-radius:var(--b-rich-text-editor-container-border-radius)}.b-rich-text-editor__container[data-v-9241ad8d]:hover{border-color:var(--b-rich-text-editor-container-hover-border-color)}.b-rich-text-editor__container[data-v-9241ad8d]:active,.b-rich-text-editor__container[data-v-9241ad8d]:focus-within{border-color:var(--b-rich-text-editor-container-active-border-color)}.b-rich-text-editor__container--error[data-v-9241ad8d]{border:var(--b-rich-text-editor-container-error-border)}.b-rich-text-editor__container--disabled[data-v-9241ad8d],.b-rich-text-editor__container--disabled[data-v-9241ad8d]:hover{background-color:var(--b-rich-text-editor-container-disabled-background-color);border:var(--b-rich-text-editor-container-disabled-border);color:var(--b-rich-text-editor-container-disabled-color)}.b-rich-text-editor__toolbar[data-v-9241ad8d]{border-bottom:var(--b-rich-text-editor-toolbar-border-bottom);display:flex;justify-content:flex-end;padding:var(--b-rich-text-editor-toolbar-padding)}.b-rich-text-editor__renderer[data-v-9241ad8d]{min-height:var(--b-rich-text-editor-renderer-min-height);padding:var(--b-rich-text-editor-renderer-padding);white-space:pre-wrap}.b-rich-text-editor__renderer--disabled[data-v-9241ad8d]{color:var(--b-rich-text-editor-renderer-disabled-color)}

package/dist/assets/sidepanel.css

@@ -1 +1 @@
-.b-sidepanel-page[data-v-4e6c994b]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.b-sidepanel-page[data-v-4e6c994b],.b-sidepanel-page[data-v-4e6c994b]:before,.b-sidepanel-page[data-v-4e6c994b]:after{box-sizing:border-box}.b-sidepanel-page *[data-v-4e6c994b],.b-sidepanel-page *[data-v-4e6c994b]:before,.b-sidepanel-page *[data-v-4e6c994b]:after{box-sizing:border-box}.b-sidepanel-page[data-v-4e6c994b] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-4e6c994b] ::-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-sidepanel-page__header[data-v-4e6c994b]{align-items:center;background-color:var(--b-sidepanel-page-header-background-color);border-top-left-radius:var(--b-sidepanel-border-radius);display:flex;overflow:hidden;padding:var(--b-sidepanel-page-header-padding);position:sticky;white-space:nowrap;width:100%}.b-sidepanel-page__title[data-v-4e6c994b]{color:var(--b-sidepanel-page-header-color);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-4e6c994b]{color:var(--b-sidepanel-page-content-color);flex-grow:1;overflow:overlay;padding:var(--b-sidepanel-page-content-padding)}.b-sidepanel-page__actions[data-v-4e6c994b]{background-color:var(--b-sidepanel-page-actions-background-color);border-bottom-left-radius:var(--b-sidepanel-border-radius);color:var(--b-sidepanel-page-actions-color);padding:var(--b-sidepanel-page-actions-padding)}.b-sidepanel[data-v-732a38d4]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-sidepanel-background-color);border:0;height:100%;max-height:100%;max-width:100%;overflow:visible;padding:0;width:100%}.b-sidepanel[data-v-732a38d4],.b-sidepanel[data-v-732a38d4]:before,.b-sidepanel[data-v-732a38d4]:after{box-sizing:border-box}.b-sidepanel *[data-v-732a38d4],.b-sidepanel *[data-v-732a38d4]:before,.b-sidepanel *[data-v-732a38d4]:after{box-sizing:border-box}.b-sidepanel[data-v-732a38d4] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-732a38d4] ::-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 (min-width: 500px){.b-sidepanel[data-v-732a38d4]{border-radius:var(--b-sidepanel-border-radius) 0 0 var(--b-sidepanel-border-radius);margin:0 0 0 auto;width:var(--b-sidepanel-width)}}@media (min-width: 768px){.b-sidepanel[data-v-732a38d4]{max-width:var(--b-sidepanel-l-and-up-max-width);min-width:var(--b-sidepanel-l-and-up-min-width);width:33%}}.b-sidepanel__close-button[data-v-732a38d4]{align-items:center;display:flex;height:var(--b-sidepanel-close-button-height);position:absolute;right:var(--b-sidepanel-close-button-right);z-index:var(--b-sidepanel-close-button-z-index)}.b-sidepanel--animation[data-v-732a38d4]{overflow:hidden}.b-sidepanel[data-v-732a38d4]::backdrop{background-color:var(--b-sidepanel-backdrop-background-color, #00112c);opacity:.5}.b-legacy-theme .b-sidepanel[data-v-732a38d4]::backdrop{opacity:.4}.b-sidepanel[open][data-v-732a38d4]{animation:enter-u5i31wh-732a38d4 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-enter)}@keyframes enter-u5i31wh-732a38d4{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-732a38d4]::backdrop{animation:fade-in-u5i31x0-732a38d4 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-u5i31x0-732a38d4{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-732a38d4]{animation:exit-u5i31xs-732a38d4 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-exit)}@keyframes exit-u5i31xs-732a38d4{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-732a38d4]::backdrop{animation:fade-out-u5i31yg-732a38d4 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-u5i31yg-732a38d4{0%{opacity:.5}to{opacity:0}}
+.b-sidepanel-page[data-v-4e6c994b]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.b-sidepanel-page[data-v-4e6c994b],.b-sidepanel-page[data-v-4e6c994b]:before,.b-sidepanel-page[data-v-4e6c994b]:after{box-sizing:border-box}.b-sidepanel-page *[data-v-4e6c994b],.b-sidepanel-page *[data-v-4e6c994b]:before,.b-sidepanel-page *[data-v-4e6c994b]:after{box-sizing:border-box}.b-sidepanel-page[data-v-4e6c994b] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-4e6c994b] ::-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-sidepanel-page__header[data-v-4e6c994b]{align-items:center;background-color:var(--b-sidepanel-page-header-background-color);border-top-left-radius:var(--b-sidepanel-border-radius);display:flex;overflow:hidden;padding:var(--b-sidepanel-page-header-padding);position:sticky;white-space:nowrap;width:100%}.b-sidepanel-page__title[data-v-4e6c994b]{color:var(--b-sidepanel-page-header-color);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-4e6c994b]{color:var(--b-sidepanel-page-content-color);flex-grow:1;overflow:overlay;padding:var(--b-sidepanel-page-content-padding)}.b-sidepanel-page__actions[data-v-4e6c994b]{background-color:var(--b-sidepanel-page-actions-background-color);border-bottom-left-radius:var(--b-sidepanel-border-radius);color:var(--b-sidepanel-page-actions-color);padding:var(--b-sidepanel-page-actions-padding)}.b-sidepanel[data-v-732a38d4]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-sidepanel-background-color);border:0;height:100%;max-height:100%;max-width:100%;overflow:visible;padding:0;width:100%}.b-sidepanel[data-v-732a38d4],.b-sidepanel[data-v-732a38d4]:before,.b-sidepanel[data-v-732a38d4]:after{box-sizing:border-box}.b-sidepanel *[data-v-732a38d4],.b-sidepanel *[data-v-732a38d4]:before,.b-sidepanel *[data-v-732a38d4]:after{box-sizing:border-box}.b-sidepanel[data-v-732a38d4] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-732a38d4] ::-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 (min-width: 500px){.b-sidepanel[data-v-732a38d4]{border-radius:var(--b-sidepanel-border-radius) 0 0 var(--b-sidepanel-border-radius);margin:0 0 0 auto;width:var(--b-sidepanel-width)}}@media (min-width: 768px){.b-sidepanel[data-v-732a38d4]{max-width:var(--b-sidepanel-l-and-up-max-width);min-width:var(--b-sidepanel-l-and-up-min-width);width:33%}}.b-sidepanel__close-button[data-v-732a38d4]{align-items:center;display:flex;height:var(--b-sidepanel-close-button-height);position:absolute;right:var(--b-sidepanel-close-button-right);z-index:var(--b-sidepanel-close-button-z-index)}.b-sidepanel--animation[data-v-732a38d4]{overflow:hidden}.b-sidepanel[data-v-732a38d4]::backdrop{background-color:var(--b-sidepanel-backdrop-background-color, #00112c);opacity:.5}.b-legacy-theme .b-sidepanel[data-v-732a38d4]::backdrop{opacity:.4}.b-sidepanel[open][data-v-732a38d4]{animation:enter-ueugoks-732a38d4 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-enter)}@keyframes enter-ueugoks-732a38d4{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-732a38d4]::backdrop{animation:fade-in-ueugoku-732a38d4 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-ueugoku-732a38d4{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-732a38d4]{animation:exit-ueugolm-732a38d4 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-exit)}@keyframes exit-ueugolm-732a38d4{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-732a38d4]::backdrop{animation:fade-out-ueugomm-732a38d4 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-ueugomm-732a38d4{0%{opacity:.5}to{opacity:0}}

package/dist/avatar.js

@@ -1,4 +1,4 @@
-import { B as r } from "./chunks/avatar.BgwjpLQO.js";
+import { B as r } from "./chunks/avatar.CP1oL5W2.js";
 export {
   r as BentoAvatar
 };

package/dist/button.js

@@ -1,6 +1,6 @@
-import { B as n, b as B, a } from "./chunks/button.D7K0uXQm.js";
-import { B as s, c as u, a as i, b as r, d as c, e as d } from "./chunks/button-actions.ZBlB7bp4.js";
-import { B as g } from "./chunks/toggle-button.TDry-9iu.js";
+import { B as n, b as B, a } from "./chunks/button.BuD-IsW5.js";
+import { B as s, c as u, a as i, b as r, d as c, e as d } from "./chunks/button-actions.DUn_iPDm.js";
+import { B as g } from "./chunks/toggle-button.ChDbeBZ8.js";
 export {
   n as BentoButton,
   s as BentoButtonActions,

package/dist/card.js

@@ -1,4 +1,4 @@
-import { c as o, B as r, a as t } from "./chunks/card.CZkqwnNe.js";
+import { c as o, B as r, a as t } from "./chunks/card.BYUqSnBy.js";
 export {
   o as BentoCard,
   r as BentoCardBackground,

package/dist/checkbox.js

@@ -1,6 +1,6 @@
-import { B as t, a } from "./chunks/checkbox.LFeWM5p4.js";
-import { C as x } from "./chunks/checkbox-input.CMhyJDdo.js";
-import { c as B, B as c } from "./chunks/checkbox-group.COqNevz5.js";
+import { B as t, a } from "./chunks/checkbox.CkaV8-b-.js";
+import { C as x } from "./chunks/checkbox-input.Dr1GS2BZ.js";
+import { c as B, B as c } from "./chunks/checkbox-group.HhNN-r-o.js";
 export {
   t as BentoCheckbox,
   a as BentoCheckboxEvent,

package/dist/chunks/_commonjsHelpers.C6fGbg64.js

@@ -0,0 +1,7 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as g
+};
+//# sourceMappingURL=_commonjsHelpers.C6fGbg64.js.map

package/dist/chunks/_commonjsHelpers.C6fGbg64.js.map

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

package/dist/chunks/{action-bar.c68S34TI.js → action-bar.nUvnRVwP.js}

@@ -1,12 +1,12 @@
 import { defineComponent as x, computed as c, ref as b, toRefs as O, watch as g, provide as P, nextTick as B } from "vue";
-import { B as V } from "./button.D7K0uXQm.js";
+import { B as V } from "./button.BuD-IsW5.js";
 import { B as R } from "./typography.J1v_SPG3.js";
-import { B as F } from "./button-actions-with-menu.DhPRdnSt.js";
+import { B as F } from "./button-actions-with-menu.CDLJMdJh.js";
 import { C as W } from "./cross.CJ5EEL2c.js";
 import { u as L } from "./i18n.BQkEbtPM.js";
-import { u as k } from "./index.48Mn1OCp.js";
-import { P as M } from "./popover.Bb9JeZVy.js";
-import { B as U } from "./button-actions.ZBlB7bp4.js";
+import { u as k } from "./index.oJzeCMPe.js";
+import { P as M } from "./popover.DXo3nXew.js";
+import { B as U } from "./button-actions.DUn_iPDm.js";
 import { n as z } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/action-bar.css";
 const D = {
@@ -158,4 +158,4 @@ const st = q.exports;
 export {
   st as B
 };
-//# sourceMappingURL=action-bar.c68S34TI.js.map
+//# sourceMappingURL=action-bar.nUvnRVwP.js.map

package/dist/chunks/{action-bar.c68S34TI.js.map → action-bar.nUvnRVwP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.c68S34TI.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                    <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                        <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                    </bento-button>\n                </div>\n                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\n                />\n                <button-actions-with-menu\n                    v-else\n                    :actions=\"actionsInternal\"\n                    class=\"b-action-bar__actions\"\n                    :displayed-actions=\"internalDisplayedActions\"\n                    menu-position=\"top-end\"\n                    disable-responsive-behavior\n                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected\n         */\n        itemCounter: {\n            type: Number,\n            required: true,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\"]);\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+OIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAL,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAvB,CAAA;AAGA,UAAAwB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA2B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA3B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA2B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,IAAAH,KAAAiB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,KAAAc,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAb,IACIe,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"action-bar.nUvnRVwP.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                    <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                        <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                    </bento-button>\n                </div>\n                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\n                />\n                <button-actions-with-menu\n                    v-else\n                    :actions=\"actionsInternal\"\n                    class=\"b-action-bar__actions\"\n                    :displayed-actions=\"internalDisplayedActions\"\n                    menu-position=\"top-end\"\n                    disable-responsive-behavior\n                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected\n         */\n        itemCounter: {\n            type: Number,\n            required: true,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\"]);\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+OIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAL,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAvB,CAAA;AAGA,UAAAwB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA2B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA3B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA2B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,IAAAH,KAAAiB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,KAAAc,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAb,IACIe,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{alert.D8qqrobi.js → alert.Du9NfW-V.js}

@@ -1,6 +1,6 @@
 import { defineComponent as I, useSlots as y, computed as r, onMounted as T } from "vue";
 import { a as c, c as S, B as b } from "./typography.J1v_SPG3.js";
-import { B as H } from "./button.D7K0uXQm.js";
+import { B as H } from "./button.BuD-IsW5.js";
 import { C as B } from "./cross-small.CZqsjZDz.js";
 import { W as w } from "./warning-filled.Cd0kVWwa.js";
 import { C as L } from "./cross-circle-fill.Ra0-PIUo.js";
@@ -100,4 +100,4 @@ export {
   o as b,
   u as c
 };
-//# sourceMappingURL=alert.D8qqrobi.js.map
+//# sourceMappingURL=alert.Du9NfW-V.js.map

package/dist/chunks/{alert.D8qqrobi.js.map → alert.Du9NfW-V.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.D8qqrobi.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GC8HIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert.Du9NfW-V.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GC8HIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{avatar.BgwjpLQO.js → avatar.CP1oL5W2.js}

@@ -1,6 +1,5 @@
 import { ref as b, computed as n, defineComponent as _, toRefs as m } from "vue";
 import { B as p } from "./typography.J1v_SPG3.js";
-import "./index.Cl4_42j5.js";
 import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/avatar.css";
 const d = (t) => {
@@ -64,8 +63,8 @@ var R = function() {
   null,
   "2be0bf91"
 );
-const W = B.exports;
+const T = B.exports;
 export {
-  W as B
+  T as B
 };
-//# sourceMappingURL=avatar.BgwjpLQO.js.map
+//# sourceMappingURL=avatar.CP1oL5W2.js.map

package/dist/chunks/{avatar.BgwjpLQO.js.map → avatar.CP1oL5W2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"avatar.BgwjpLQO.js","sources":["../../src/composables/initials.ts","../../src/components/avatar/components/avatar-image/avatar-image.types.ts","../../src/components/avatar/components/avatar-image/avatar-image.vue","../../src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  color: { default: BentoAvatarImageColor.YELLOW },\n  src: { default: null },\n  username: { default: null },\n  variant: { default: BentoAvatarImageVariant.LARGE }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Image used as user profile inside bento-avatar.\n     *\n     * @example\n     * import { AvatarImage } from './components/avatar-image';\n     *\n     * export default {\n     *     components: { AvatarImage },\n     *     template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  username: null\n});\n\n    const { username } = toRefs(props);\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\n    const initials = useInitials(username);\n\n    // Returns the UTF-16 char code\n    const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n    // Returns a computed color based on the letter passed\n    const avatarColor = computed(() => {\n        const numberOfAlphabetLetters = 26;\n        const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n        const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n        if (charCode.value <= rangeStep) {\n            return BentoAvatarImageColor.YELLOW;\n        }\n        if (charCode.value <= rangeStep * 2) {\n            return BentoAvatarImageColor.BLUE;\n        }\n        if (charCode.value <= rangeStep * 3) {\n            return BentoAvatarImageColor.GREEN;\n        }\n        return BentoAvatarImageColor.RED;\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoAvatar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAvatar },\n     *     template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {\n        name: 'bento-avatar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","toRefs","props","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACwCR,MAAAE,IAAA,CAAA;;;;;;;;;;iBArBA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;qBCqC9CG,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1CA,EAAA,UAAAb,EAAA,IAAAS,EAAAC,CAAA,GAEAI,IAAAX,EAAA,MAAAO,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAT,IAAAE,EAAA,MAAAO,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAC,IAAAZ,EAAAC,CAAA,GAGAe,IAAAZ,EAAA,MAAAQ,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAb,EAAA,MAAA;AAGI,YAAAc,IAAA,KADA,OAAA,KAAAX,CAAA,EAAA;AAGA,aAAAS,EAAA,SAAAE,IACIX,EAAA,SAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,OAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"avatar.CP1oL5W2.js","sources":["../../src/composables/initials.ts","../../src/components/avatar/components/avatar-image/avatar-image.types.ts","../../src/components/avatar/components/avatar-image/avatar-image.vue","../../src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  color: { default: BentoAvatarImageColor.YELLOW },\n  src: { default: null },\n  username: { default: null },\n  variant: { default: BentoAvatarImageVariant.LARGE }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Image used as user profile inside bento-avatar.\n     *\n     * @example\n     * import { AvatarImage } from './components/avatar-image';\n     *\n     * export default {\n     *     components: { AvatarImage },\n     *     template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  username: null\n});\n\n    const { username } = toRefs(props);\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\n    const initials = useInitials(username);\n\n    // Returns the UTF-16 char code\n    const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n    // Returns a computed color based on the letter passed\n    const avatarColor = computed(() => {\n        const numberOfAlphabetLetters = 26;\n        const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n        const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n        if (charCode.value <= rangeStep) {\n            return BentoAvatarImageColor.YELLOW;\n        }\n        if (charCode.value <= rangeStep * 2) {\n            return BentoAvatarImageColor.BLUE;\n        }\n        if (charCode.value <= rangeStep * 3) {\n            return BentoAvatarImageColor.GREEN;\n        }\n        return BentoAvatarImageColor.RED;\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoAvatar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAvatar },\n     *     template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {\n        name: 'bento-avatar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","toRefs","props","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACwCR,MAAAE,IAAA,CAAA;;;;;;;;;;iBArBA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;qBCqC9CG,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1CA,EAAA,UAAAb,EAAA,IAAAS,EAAAC,CAAA,GAEAI,IAAAX,EAAA,MAAAO,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAT,IAAAE,EAAA,MAAAO,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAC,IAAAZ,EAAAC,CAAA,GAGAe,IAAAZ,EAAA,MAAAQ,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAb,EAAA,MAAA;AAGI,YAAAc,IAAA,KADA,OAAA,KAAAX,CAAA,EAAA;AAGA,aAAAS,EAAA,SAAAE,IACIX,EAAA,SAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,OAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-modal.B9JnRNty.js → base-modal.DdznUtgC.js}

@@ -1,13 +1,13 @@
 import { defineComponent as T, useSlots as Y, ref as u, computed as l, inject as Q, watch as w, nextTick as X, onUnmounted as Z, useAttrs as V, toRefs as tt, onMounted as et, provide as D } from "vue";
-import { B as at } from "./button.D7K0uXQm.js";
-import { B as ot } from "./focus-trap.DEHn1dxN.js";
+import { B as at } from "./button.BuD-IsW5.js";
+import { B as ot } from "./focus-trap.DiqwA-bw.js";
 import { u as q } from "./use-has-slot.C9lQZ6nz.js";
 import { u as nt } from "./i18n.BQkEbtPM.js";
 import { M as st } from "./base-modal.keys.C2PQXcE2.js";
 import { g as lt } from "./generate-uid.NJ8tVoha.js";
 import { B as it } from "./typography.J1v_SPG3.js";
-import { F as rt } from "./footer-actions.Blk5X8z1.js";
-import { D as ut, B as ct, b as dt, a as mt } from "./dialog-page.BveDXzz1.js";
+import { F as rt } from "./footer-actions.CWOEDPKJ.js";
+import { D as ut, B as ct, b as dt, a as mt } from "./dialog-page.uGh0kYDL.js";
 import { o as pt } from "./resize.Bqks3WUm.js";
 import { a as gt, G as ft } from "./grid-layout.HvTAa4to.js";
 import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -15,7 +15,7 @@ import { C as _t } from "./cross.CJ5EEL2c.js";
 import { B as vt } from "./directive.Cbdox5VL.js";
 import "../assets/base-modal.css";
 var yt = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.DIALOG = "dialog", a))(yt || {}), Ct = /* @__PURE__ */ ((a) => (a.DEFAULT = "BentoModalDefault", a.DIALOG = "BentoModalDialog", a))(Ct || {}), G = /* @__PURE__ */ ((a) => (a.SMALL = "small", a.MEDIUM = "medium", a.LARGE = "large", a))(G || {}), E = /* @__PURE__ */ ((a) => (a.SMALLER = "smaller", a.EQUAL = "equal", a.BIGGER = "bigger", a))(E || {}), F = /* @__PURE__ */ ((a) => (a.DIALOG = "dialog", a.ALERT_DIALOG = "alertdialog", a))(F || {}), ht = /* @__PURE__ */ ((a) => (a.CONFIRMATION = "confirmation", a.DESTRUCTIVE = "destructive", a.INFO = "info", a.ACKNOWLEDGEMENT = "acknowledgement", a))(ht || {}), At = /* @__PURE__ */ ((a) => (a.CLOSE_MODAL = "close-modal", a))(At || {});
-const bt = {
+const Lt = {
   "en-US": {
     ariaLabelFallback: "modal",
     close: "Close"
@@ -26,8 +26,8 @@ const bt = {
   "pt-BR": {
     close: "Fechar"
   }
-}, j = Symbol("modal config data injection key"), Lt = T({}), St = /* @__PURE__ */ T({
-  ...Lt,
+}, j = Symbol("modal config data injection key"), bt = T({}), St = /* @__PURE__ */ T({
+  ...bt,
   __name: "modal-page",
   props: {
     /**
@@ -129,7 +129,7 @@ const bt = {
         actions: { ...r, paddingBottom: e.customPadding },
         backButton: { top: e.customPadding, paddingLeft: e.customPadding }
       };
-    }), d = l(() => e.withColumnLayout && b.value === G.LARGE), g = l(() => e.columnsSize === E.SMALLER ? [
+    }), d = l(() => e.withColumnLayout && L.value === G.LARGE), g = l(() => e.columnsSize === E.SMALLER ? [
       { small: 4, medium: 4, large: 4 },
       { small: 8, medium: 8, large: 8 }
     ] : e.columnsSize === E.BIGGER ? [
@@ -138,7 +138,7 @@ const bt = {
     ] : [
       { small: 6, medium: 6, large: 6 },
       { small: 6, medium: 6, large: 6 }
-    ]), { activePage: f, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: b } = Q(j), h = l(() => f.value === e.pageId || !f.value);
+    ]), { activePage: f, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: L } = Q(j), h = l(() => f.value === e.pageId || !f.value);
     let p = null;
     return w(
       () => f.value,
@@ -146,14 +146,14 @@ const bt = {
         var A, k;
         h.value && (await X(), _.value = `${(k = (A = c.value) == null ? void 0 : A.$el) == null ? void 0 : k.clientHeight}px`, B.value = e.customPadding, m.value = i !== void 0, p = pt(c.value, () => {
           var v, S;
-          const L = `${(S = (v = c.value) == null ? void 0 : v.$el) == null ? void 0 : S.clientHeight}px`;
-          L && L !== _.value && (_.value = L);
+          const b = `${(S = (v = c.value) == null ? void 0 : v.$el) == null ? void 0 : S.clientHeight}px`;
+          b && b !== _.value && (_.value = b);
         }));
       },
       { immediate: !0 }
     ), Z(() => {
       p == null || p.disconnect();
-    }), { __sfc: !0, CLOSE_BUTTON_ICON_WIDTH: o, slots: t, hasSlot: n, page: c, props: e, modalPageConditionalClasses: O, modalContentConditionalClasses: I, customPaddingStyles: R, hasColumnLayout: d, computedColumnWidth: g, activePage: f, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: b, isCurrentPage: h, pageElementObserver: p, BentoTypography: it, GridLayout: ft, GridLayoutContainerType: gt, FooterActions: rt, DialogPage: ut };
+    }), { __sfc: !0, CLOSE_BUTTON_ICON_WIDTH: o, slots: t, hasSlot: n, page: c, props: e, modalPageConditionalClasses: O, modalContentConditionalClasses: I, customPaddingStyles: R, hasColumnLayout: d, computedColumnWidth: g, activePage: f, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: L, isCurrentPage: h, pageElementObserver: p, BentoTypography: it, GridLayout: ft, GridLayoutContainerType: gt, FooterActions: rt, DialogPage: ut };
   }
 });
 var Pt = function() {
@@ -162,7 +162,7 @@ var Pt = function() {
   return o(t.DialogPage, { ref: "page", staticClass: "b-modal-page", class: t.modalPageConditionalClasses, attrs: { "page-id": e.pageId, "always-show-border": t.hasColumnLayout, "back-button-styling": (n = t.customPaddingStyles) == null ? void 0 : n.backButton, "previous-page": e.previousPage }, on: { animationend: function(c) {
     t.isAnimationActive = !1;
   } }, scopedSlots: e._u([t.hasSlot("default") || t.showCloseButton ? { key: "header", fn: function() {
-    return [o("div", { staticClass: "b-modal-page__header-container", style: t.customPaddingStyles.header }, [o("div", { staticClass: "b-modal-page__header" }, [o(t.BentoTypography, { staticClass: "b-modal-page__title", attrs: { "aria-label": "base modal title", el: "span", variant: "title", stronger: "" } }, [t.hasSlot("default") ? e._t("default") : e._e()], 2)], 1)])];
+    return [o("div", { staticClass: "b-modal-page__header-container", style: t.customPaddingStyles.header }, [o("div", { staticClass: "b-modal-page__header" }, [o(t.BentoTypography, { staticClass: "b-modal-page__title", attrs: { el: "span", variant: "title", stronger: "" } }, [t.hasSlot("default") ? e._t("default") : e._e()], 2)], 1)])];
   }, proxy: !0 } : null, { key: "content", fn: function() {
     return [o("div", { staticClass: "b-modal-page__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: { el: "div" } }, [t.hasColumnLayout ? o(t.GridLayout, { staticClass: "b-modal-page__grid", attrs: { "column-width": t.computedColumnWidth, "container-type": t.GridLayoutContainerType.NORMAL, "no-gap": "" }, scopedSlots: e._u([{ key: "col-1", fn: function() {
       return [e._t("content-col-1")];
@@ -180,10 +180,10 @@ var Pt = function() {
   Et,
   !1,
   null,
-  "8ee5a20b"
+  "e1c8b8a9"
 );
 const It = Ot.exports, Bt = T({
-  i18n: { messages: bt },
+  i18n: { messages: Lt },
   name: "base-modal"
 }), kt = /* @__PURE__ */ T({
   ...Bt,
@@ -277,7 +277,7 @@ const It = Ot.exports, Bt = T({
   },
   emits: ["update:active-page", "close-modal"],
   setup(a, { expose: e, emit: o }) {
-    const t = a, n = 500, { t: c } = nt(), O = Y(), I = V(), R = q(O), d = u(null), g = u(!1), f = lt("modal"), _ = l(() => t.isDismissible && !t.hideCloseButton), m = u(t.customPadding), B = l(() => m.value ? { top: m.value, right: m.value } : {}), x = l(() => I["aria-label"] ?? c("ariaLabelFallback")), b = l(() => t.withColumnLayout && t.size === G.LARGE), h = () => {
+    const t = a, n = 500, { t: c } = nt(), O = Y(), I = V(), R = q(O), d = u(null), g = u(!1), f = lt("modal"), _ = l(() => t.isDismissible && !t.hideCloseButton), m = u(t.customPadding), B = l(() => m.value ? { top: m.value, right: m.value } : {}), x = l(() => I["aria-label"] ?? c("ariaLabelFallback")), L = l(() => t.withColumnLayout && t.size === G.LARGE), h = () => {
       d.value.showModal();
     }, p = () => {
       o("close-modal");
@@ -289,10 +289,10 @@ const It = Ot.exports, Bt = T({
       s && s.preventDefault(), !(!t.isDismissible && t.modalRole === F.DIALOG) && i();
     }, k = () => {
       t.isDismissible && A();
-    }, L = l(() => ({
+    }, b = l(() => ({
       [`b-modal-base__container--${t.size}`]: t.size,
       "b-modal-base__container--hide": g.value,
-      "b-modal-base__container--column-layout": b.value,
+      "b-modal-base__container--column-layout": L.value,
       "b-modal-base__container--animation": M.value
     }));
     w(
@@ -332,7 +332,7 @@ const It = Ot.exports, Bt = T({
       pages: P,
       previousPages: y,
       updatePage: $
-    }), D(mt, J), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, t: c, slots: O, attrs: I, hasSlot: R, modal: d, isClosing: g, modalId: f, emit: o, props: t, showCloseButton: _, pageCustomPadding: m, customPaddingStyles: B, computedAriaLabel: x, hasColumnLayout: b, openModal: h, emitCloseEvent: p, closeModalAfterAnimation: r, startCloseModalAnimation: i, internalModalActionClose: A, closeModalOnClickOutside: k, modalConditionalClasses: L, activePage: v, isOpen: S, size: z, animation: U, pages: P, previousPages: y, updatePage: $, unregisterPage: H, registerPage: J, height: K, isAnimationActive: M, BentoButton: at, BentoFocusTrap: ot, vBentoClickOutsideDirective: vt, BentoModalPage: It, CrossIcon: _t };
+    }), D(mt, J), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, t: c, slots: O, attrs: I, hasSlot: R, modal: d, isClosing: g, modalId: f, emit: o, props: t, showCloseButton: _, pageCustomPadding: m, customPaddingStyles: B, computedAriaLabel: x, hasColumnLayout: L, openModal: h, emitCloseEvent: p, closeModalAfterAnimation: r, startCloseModalAnimation: i, internalModalActionClose: A, closeModalOnClickOutside: k, modalConditionalClasses: b, activePage: v, isOpen: S, size: z, animation: U, pages: P, previousPages: y, updatePage: $, unregisterPage: H, registerPage: J, height: K, isAnimationActive: M, BentoButton: at, BentoFocusTrap: ot, vBentoClickOutsideDirective: vt, BentoModalPage: It, CrossIcon: _t };
   }
 });
 var Dt = function() {
@@ -370,4 +370,4 @@ export {
   At as g,
   Qt as h
 };
-//# sourceMappingURL=base-modal.B9JnRNty.js.map
+//# sourceMappingURL=base-modal.DdznUtgC.js.map