@adyen/bento-vue3 1.62.1 → 1.63.0

package/dist/assets/modal-fullscreen.css

@@ -1 +1 @@
-.b-modal-fullscreen-page[data-v-da0f0512]{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-da0f0512],.b-modal-fullscreen-page[data-v-da0f0512]:before,.b-modal-fullscreen-page[data-v-da0f0512]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-da0f0512] *,.b-modal-fullscreen-page[data-v-da0f0512] *:before,.b-modal-fullscreen-page[data-v-da0f0512] *:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-da0f0512] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-da0f0512] ::-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-da0f0512]{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-da0f0512]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-da0f0512]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-da0f0512]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-da0f0512]{align-items:center;gap:var(--b-modal-fullscreen-header-gap);justify-content:end}.b-modal-fullscreen-page__title[data-v-da0f0512]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-da0f0512]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-da0f0512]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-da0f0512] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-da0f0512]{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-da0f0512]{height:100%;overflow:auto}.b-modal-fullscreen[data-v-380cc3f0]{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-380cc3f0],.b-modal-fullscreen[data-v-380cc3f0]:before,.b-modal-fullscreen[data-v-380cc3f0]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-380cc3f0] *,.b-modal-fullscreen[data-v-380cc3f0] *:before,.b-modal-fullscreen[data-v-380cc3f0] *:after{box-sizing:border-box}.b-modal-fullscreen[data-v-380cc3f0] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-380cc3f0] ::-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-380cc3f0]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen__close-button[data-v-380cc3f0]{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-380cc3f0]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-380cc3f0]{animation:fade-in-ugpw381-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),enter-ugpw381-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-enter),scale-up-ugpw381-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-ugpw381-380cc3f0{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ugpw381-380cc3f0{0%{scale:1}to{scale:1}}@keyframes enter-ugpw381-380cc3f0{0%{translate:0 64px}to{translate:0 0}}.b-modal-fullscreen--hide[open][data-v-380cc3f0]{animation:fade-out-ugpw3ab-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),exit-ugpw3ab-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-exit),scale-down-ugpw3ab-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-ugpw3ab-380cc3f0{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ugpw3ab-380cc3f0{0%{scale:1}to{scale:1}}@keyframes exit-ugpw3ab-380cc3f0{0%{translate:0 0}to{translate:0 64px}}
+.b-modal-fullscreen-page[data-v-da0f0512]{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-da0f0512],.b-modal-fullscreen-page[data-v-da0f0512]:before,.b-modal-fullscreen-page[data-v-da0f0512]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-da0f0512] *,.b-modal-fullscreen-page[data-v-da0f0512] *:before,.b-modal-fullscreen-page[data-v-da0f0512] *:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-da0f0512] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-da0f0512] ::-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-da0f0512]{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-da0f0512]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-da0f0512]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-da0f0512]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-da0f0512]{align-items:center;gap:var(--b-modal-fullscreen-header-gap);justify-content:end}.b-modal-fullscreen-page__title[data-v-da0f0512]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-da0f0512]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-da0f0512]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-da0f0512] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-da0f0512]{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-da0f0512]{height:100%;overflow:auto}.b-modal-fullscreen[data-v-380cc3f0]{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-380cc3f0],.b-modal-fullscreen[data-v-380cc3f0]:before,.b-modal-fullscreen[data-v-380cc3f0]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-380cc3f0] *,.b-modal-fullscreen[data-v-380cc3f0] *:before,.b-modal-fullscreen[data-v-380cc3f0] *:after{box-sizing:border-box}.b-modal-fullscreen[data-v-380cc3f0] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-380cc3f0] ::-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-380cc3f0]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen__close-button[data-v-380cc3f0]{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-380cc3f0]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-380cc3f0]{animation:fade-in-u3rcd1i-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),enter-u3rcd1i-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-enter),scale-up-u3rcd1i-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-u3rcd1i-380cc3f0{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u3rcd1i-380cc3f0{0%{scale:1}to{scale:1}}@keyframes enter-u3rcd1i-380cc3f0{0%{translate:0 64px}to{translate:0 0}}.b-modal-fullscreen--hide[open][data-v-380cc3f0]{animation:fade-out-u3rcd47-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),exit-u3rcd47-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-exit),scale-down-u3rcd47-380cc3f0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-u3rcd47-380cc3f0{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u3rcd47-380cc3f0{0%{scale:1}to{scale:1}}@keyframes exit-u3rcd47-380cc3f0{0%{translate:0 0}to{translate:0 64px}}

package/dist/assets/popover.css

@@ -1 +1 @@
-.b-popover-dismiss-button[data-v-df01cfb8]{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-df01cfb8],.b-popover-dismiss-button[data-v-df01cfb8]:before,.b-popover-dismiss-button[data-v-df01cfb8]:after{box-sizing:border-box}.b-popover-dismiss-button[data-v-df01cfb8] *,.b-popover-dismiss-button[data-v-df01cfb8] *:before,.b-popover-dismiss-button[data-v-df01cfb8] *:after{box-sizing:border-box}.b-popover-dismiss-button[data-v-df01cfb8] ::-webkit-scrollbar{height:14px;width:14px}.b-popover-dismiss-button[data-v-df01cfb8] ::-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-df01cfb8]{color:var(--b-popover-dismiss-button-on-image-icon-color)}.b-popover-dismiss-button--on-image[data-v-df01cfb8]:hover{color:var(--b-popover-dismiss-button-on-image-icon-hovered-color)}.b-popover-dismiss-button--on-image[data-v-df01cfb8]:active{color:var(--b-popover-dismiss-button-on-image-icon-active-color)}.b-popover[data-v-288d33c3]{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-288d33c3],.b-popover[data-v-288d33c3]:before,.b-popover[data-v-288d33c3]:after{box-sizing:border-box}.b-popover[data-v-288d33c3] *,.b-popover[data-v-288d33c3] *:before,.b-popover[data-v-288d33c3] *:after{box-sizing:border-box}.b-popover[data-v-288d33c3] ::-webkit-scrollbar{height:14px;width:14px}.b-popover[data-v-288d33c3] ::-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-288d33c3]{width:320px}}.b-popover[data-v-288d33c3] .b-popover__arrow:before{color:transparent;display:none}.b-popover--fit-content[data-v-288d33c3]{width:fit-content}.b-popover--overflow-visible[data-v-288d33c3]{overflow:visible}.b-popover--overflow-visible .b-popover__footer[data-v-288d33c3]{border-bottom-left-radius:var(--b-popover-border-radius);border-bottom-right-radius:var(--b-popover-border-radius)}.b-popover--small[data-v-288d33c3]{width:200px}.b-popover--large[data-v-288d33c3]{width:480px}.b-popover--with-divider .b-popover__footer[data-v-288d33c3]{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-288d33c3]{padding:var(--b-popover-with-divider-content-padding)}.b-popover--without-space>.b-popover__header[data-v-288d33c3]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__content[data-v-288d33c3]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__footer[data-v-288d33c3]{padding:var(--b-popover-without-space-padding)}.b-popover__content[data-v-288d33c3]{padding:var(--b-popover-content-padding)}.b-popover__content--with-title[data-v-288d33c3]{padding:var(--b-popover-content-with-title-padding)}.b-popover__header[data-v-288d33c3]{align-items:baseline;display:flex;justify-content:space-between;padding:var(--b-popover-header-padding)}.b-popover__header-title[data-v-288d33c3]{align-items:center;column-gap:var(--b-popover-header-title-column-gap);display:flex}.b-popover__image[data-v-288d33c3]{display:flex;overflow:hidden}.b-popover__image+.b-popover__header[data-v-288d33c3]{padding:var(--b-popover-image-header-padding)}.b-popover__image-dismiss-button[data-v-288d33c3]{position:absolute;right:var(--b-popover-image-dismiss-icon-right);top:var(--b-popover-image-dismiss-icon-top)}.b-popover__footer[data-v-288d33c3]{padding:var(--b-popover-footer-padding)}.b-popover__animation-enter-active[data-popper-placement^=top][data-v-288d33c3]{animation:fade-in-ugpw3bf-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-ugpw3bf-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-ugpw3bf-288d33c3{0%{opacity:0}to{opacity:1}}@keyframes move-in-ugpw3bf-288d33c3{0%{top:8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=top][data-v-288d33c3]{animation:fade-out-ugpw3cy-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-ugpw3cy-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-ugpw3cy-288d33c3{0%{opacity:1}to{opacity:0}}@keyframes move-out-ugpw3cy-288d33c3{0%{top:0}to{top:8px}}.b-popover__animation-enter-active[data-popper-placement^=bottom][data-v-288d33c3]{animation:fade-in-ugpw3dx-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-ugpw3dx-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-ugpw3dx-288d33c3{0%{opacity:0}to{opacity:1}}@keyframes move-in-ugpw3dx-288d33c3{0%{top:-8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=bottom][data-v-288d33c3]{animation:fade-out-ugpw3en-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-ugpw3en-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-ugpw3en-288d33c3{0%{opacity:1}to{opacity:0}}@keyframes move-out-ugpw3en-288d33c3{0%{top:0}to{top:-8px}}.b-popover__animation-enter-active[data-popper-placement^=left][data-v-288d33c3]{animation:fade-in-ugpw3g6-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-ugpw3g6-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-ugpw3g6-288d33c3{0%{opacity:0}to{opacity:1}}@keyframes move-in-ugpw3g6-288d33c3{0%{left:8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=left][data-v-288d33c3]{animation:fade-out-ugpw3gv-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-ugpw3gv-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-ugpw3gv-288d33c3{0%{opacity:1}to{opacity:0}}@keyframes move-out-ugpw3gv-288d33c3{0%{left:0}to{left:8px}}.b-popover__animation-enter-active[data-popper-placement^=right][data-v-288d33c3]{animation:fade-in-ugpw3h3-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-ugpw3h3-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-ugpw3h3-288d33c3{0%{opacity:0}to{opacity:1}}@keyframes move-in-ugpw3h3-288d33c3{0%{left:-8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=right][data-v-288d33c3]{animation:fade-out-ugpw3hx-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-ugpw3hx-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-ugpw3hx-288d33c3{0%{opacity:1}to{opacity:0}}@keyframes move-out-ugpw3hx-288d33c3{0%{left:0}to{left:-8px}}
+.b-popover-dismiss-button[data-v-df01cfb8]{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-df01cfb8],.b-popover-dismiss-button[data-v-df01cfb8]:before,.b-popover-dismiss-button[data-v-df01cfb8]:after{box-sizing:border-box}.b-popover-dismiss-button[data-v-df01cfb8] *,.b-popover-dismiss-button[data-v-df01cfb8] *:before,.b-popover-dismiss-button[data-v-df01cfb8] *:after{box-sizing:border-box}.b-popover-dismiss-button[data-v-df01cfb8] ::-webkit-scrollbar{height:14px;width:14px}.b-popover-dismiss-button[data-v-df01cfb8] ::-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-df01cfb8]{color:var(--b-popover-dismiss-button-on-image-icon-color)}.b-popover-dismiss-button--on-image[data-v-df01cfb8]:hover{color:var(--b-popover-dismiss-button-on-image-icon-hovered-color)}.b-popover-dismiss-button--on-image[data-v-df01cfb8]:active{color:var(--b-popover-dismiss-button-on-image-icon-active-color)}.b-popover[data-v-288d33c3]{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-288d33c3],.b-popover[data-v-288d33c3]:before,.b-popover[data-v-288d33c3]:after{box-sizing:border-box}.b-popover[data-v-288d33c3] *,.b-popover[data-v-288d33c3] *:before,.b-popover[data-v-288d33c3] *:after{box-sizing:border-box}.b-popover[data-v-288d33c3] ::-webkit-scrollbar{height:14px;width:14px}.b-popover[data-v-288d33c3] ::-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-288d33c3]{width:320px}}.b-popover[data-v-288d33c3] .b-popover__arrow:before{color:transparent;display:none}.b-popover--fit-content[data-v-288d33c3]{width:fit-content}.b-popover--overflow-visible[data-v-288d33c3]{overflow:visible}.b-popover--overflow-visible .b-popover__footer[data-v-288d33c3]{border-bottom-left-radius:var(--b-popover-border-radius);border-bottom-right-radius:var(--b-popover-border-radius)}.b-popover--small[data-v-288d33c3]{width:200px}.b-popover--large[data-v-288d33c3]{width:480px}.b-popover--with-divider .b-popover__footer[data-v-288d33c3]{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-288d33c3]{padding:var(--b-popover-with-divider-content-padding)}.b-popover--without-space>.b-popover__header[data-v-288d33c3]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__content[data-v-288d33c3]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__footer[data-v-288d33c3]{padding:var(--b-popover-without-space-padding)}.b-popover__content[data-v-288d33c3]{padding:var(--b-popover-content-padding)}.b-popover__content--with-title[data-v-288d33c3]{padding:var(--b-popover-content-with-title-padding)}.b-popover__header[data-v-288d33c3]{align-items:baseline;display:flex;justify-content:space-between;padding:var(--b-popover-header-padding)}.b-popover__header-title[data-v-288d33c3]{align-items:center;column-gap:var(--b-popover-header-title-column-gap);display:flex}.b-popover__image[data-v-288d33c3]{display:flex;overflow:hidden}.b-popover__image+.b-popover__header[data-v-288d33c3]{padding:var(--b-popover-image-header-padding)}.b-popover__image-dismiss-button[data-v-288d33c3]{position:absolute;right:var(--b-popover-image-dismiss-icon-right);top:var(--b-popover-image-dismiss-icon-top)}.b-popover__footer[data-v-288d33c3]{padding:var(--b-popover-footer-padding)}.b-popover__animation-enter-active[data-popper-placement^=top][data-v-288d33c3]{animation:fade-in-u3rcd6a-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u3rcd6a-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u3rcd6a-288d33c3{0%{opacity:0}to{opacity:1}}@keyframes move-in-u3rcd6a-288d33c3{0%{top:8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=top][data-v-288d33c3]{animation:fade-out-u3rcd7g-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u3rcd7g-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u3rcd7g-288d33c3{0%{opacity:1}to{opacity:0}}@keyframes move-out-u3rcd7g-288d33c3{0%{top:0}to{top:8px}}.b-popover__animation-enter-active[data-popper-placement^=bottom][data-v-288d33c3]{animation:fade-in-u3rcda9-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u3rcda9-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u3rcda9-288d33c3{0%{opacity:0}to{opacity:1}}@keyframes move-in-u3rcda9-288d33c3{0%{top:-8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=bottom][data-v-288d33c3]{animation:fade-out-u3rcdal-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u3rcdal-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u3rcdal-288d33c3{0%{opacity:1}to{opacity:0}}@keyframes move-out-u3rcdal-288d33c3{0%{top:0}to{top:-8px}}.b-popover__animation-enter-active[data-popper-placement^=left][data-v-288d33c3]{animation:fade-in-u3rcdbv-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u3rcdbv-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u3rcdbv-288d33c3{0%{opacity:0}to{opacity:1}}@keyframes move-in-u3rcdbv-288d33c3{0%{left:8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=left][data-v-288d33c3]{animation:fade-out-u3rcdcc-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u3rcdcc-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u3rcdcc-288d33c3{0%{opacity:1}to{opacity:0}}@keyframes move-out-u3rcdcc-288d33c3{0%{left:0}to{left:8px}}.b-popover__animation-enter-active[data-popper-placement^=right][data-v-288d33c3]{animation:fade-in-u3rcdd2-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u3rcdd2-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u3rcdd2-288d33c3{0%{opacity:0}to{opacity:1}}@keyframes move-in-u3rcdd2-288d33c3{0%{left:-8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=right][data-v-288d33c3]{animation:fade-out-u3rcde7-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u3rcde7-288d33c3 var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u3rcde7-288d33c3{0%{opacity:1}to{opacity:0}}@keyframes move-out-u3rcde7-288d33c3{0%{left:0}to{left:-8px}}

package/dist/assets/sidepanel.css

@@ -1 +1 @@
-.b-sidepanel-page[data-v-b0fa716c]{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-b0fa716c],.b-sidepanel-page[data-v-b0fa716c]:before,.b-sidepanel-page[data-v-b0fa716c]:after{box-sizing:border-box}.b-sidepanel-page[data-v-b0fa716c] *,.b-sidepanel-page[data-v-b0fa716c] *:before,.b-sidepanel-page[data-v-b0fa716c] *:after{box-sizing:border-box}.b-sidepanel-page[data-v-b0fa716c] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-b0fa716c] ::-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-b0fa716c]{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-b0fa716c]{color:var(--b-sidepanel-page-header-color);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-b0fa716c]{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-b0fa716c]{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-34efe8c7]{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-34efe8c7],.b-sidepanel[data-v-34efe8c7]:before,.b-sidepanel[data-v-34efe8c7]:after{box-sizing:border-box}.b-sidepanel[data-v-34efe8c7] *,.b-sidepanel[data-v-34efe8c7] *:before,.b-sidepanel[data-v-34efe8c7] *:after{box-sizing:border-box}.b-sidepanel[data-v-34efe8c7] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-34efe8c7] ::-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-34efe8c7]{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-34efe8c7]{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-34efe8c7]{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-34efe8c7]{overflow:hidden}.b-sidepanel[data-v-34efe8c7]::backdrop{background-color:var(--b-sidepanel-backdrop-background-color, #00112c);opacity:.5}.b-legacy-theme .b-sidepanel[data-v-34efe8c7]::backdrop{opacity:.4}.b-sidepanel[open][data-v-34efe8c7]{animation:enter-ugpw38q-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-enter)}@keyframes enter-ugpw38q-34efe8c7{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-34efe8c7]::backdrop{animation:fade-in-ugpw39p-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-ugpw39p-34efe8c7{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-34efe8c7]{animation:exit-ugpw3bb-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-exit)}@keyframes exit-ugpw3bb-34efe8c7{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-34efe8c7]::backdrop{animation:fade-out-ugpw3c9-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-ugpw3c9-34efe8c7{0%{opacity:.5}to{opacity:0}}
+.b-sidepanel-page[data-v-b0fa716c]{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-b0fa716c],.b-sidepanel-page[data-v-b0fa716c]:before,.b-sidepanel-page[data-v-b0fa716c]:after{box-sizing:border-box}.b-sidepanel-page[data-v-b0fa716c] *,.b-sidepanel-page[data-v-b0fa716c] *:before,.b-sidepanel-page[data-v-b0fa716c] *:after{box-sizing:border-box}.b-sidepanel-page[data-v-b0fa716c] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-b0fa716c] ::-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-b0fa716c]{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-b0fa716c]{color:var(--b-sidepanel-page-header-color);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-b0fa716c]{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-b0fa716c]{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-34efe8c7]{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-34efe8c7],.b-sidepanel[data-v-34efe8c7]:before,.b-sidepanel[data-v-34efe8c7]:after{box-sizing:border-box}.b-sidepanel[data-v-34efe8c7] *,.b-sidepanel[data-v-34efe8c7] *:before,.b-sidepanel[data-v-34efe8c7] *:after{box-sizing:border-box}.b-sidepanel[data-v-34efe8c7] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-34efe8c7] ::-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-34efe8c7]{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-34efe8c7]{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-34efe8c7]{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-34efe8c7]{overflow:hidden}.b-sidepanel[data-v-34efe8c7]::backdrop{background-color:var(--b-sidepanel-backdrop-background-color, #00112c);opacity:.5}.b-legacy-theme .b-sidepanel[data-v-34efe8c7]::backdrop{opacity:.4}.b-sidepanel[open][data-v-34efe8c7]{animation:enter-u3rcd2h-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-enter)}@keyframes enter-u3rcd2h-34efe8c7{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-34efe8c7]::backdrop{animation:fade-in-u3rcd3b-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-u3rcd3b-34efe8c7{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-34efe8c7]{animation:exit-u3rcd5j-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-exit)}@keyframes exit-u3rcd5j-34efe8c7{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-34efe8c7]::backdrop{animation:fade-out-u3rcd6p-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-u3rcd6p-34efe8c7{0%{opacity:.5}to{opacity:0}}

package/dist/assets/use-cached-selected-values.css

@@ -1 +1 @@
-.b-listbox-single-select-category[data-v-a90eff17]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:var(--b-listbox-single-select-category-margin-bottom)}.b-listbox-single-select-category[data-v-a90eff17],.b-listbox-single-select-category[data-v-a90eff17]:before,.b-listbox-single-select-category[data-v-a90eff17]:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-a90eff17] *,.b-listbox-single-select-category[data-v-a90eff17] *:before,.b-listbox-single-select-category[data-v-a90eff17] *:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-a90eff17] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-single-select-category[data-v-a90eff17] ::-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-listbox-single-select-category[data-v-a90eff17]:last-child{margin-bottom:0}.b-listbox-single-select-category__label-text[data-v-a90eff17]{color:var(--b-listbox-single-select-category-label-text-color);padding:var(--b-listbox-single-select-category-label-text-padding)}.b-listbox-option[data-v-b7af43a6]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;overflow-wrap:anywhere;padding:var(--b-listbox-option-padding)}.b-listbox-option[data-v-b7af43a6],.b-listbox-option[data-v-b7af43a6]:before,.b-listbox-option[data-v-b7af43a6]:after{box-sizing:border-box}.b-listbox-option[data-v-b7af43a6] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-b7af43a6] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media (hover: hover){.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-hover-background-color)}.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--unchecked{background-color:var(--b-checkbox-input-outline-unchecked-hover-background-color);border-color:var(--b-checkbox-input-outline-unchecked-hover-border-color)}.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline:checked{background-color:var(--b-checkbox-input-outline-checked-hover-background-color);border-color:var(--b-checkbox-input-outline-checked-hover-border-color)}.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline:indeterminate{background-color:var(--b-checkbox-input-outline-indeterminate-hover-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-hover-border-color)}.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-hover-font-color)}.b-legacy-theme .b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-hover-font-color)}}.b-listbox-option[data-v-b7af43a6]:focus-visible{outline:none;box-shadow:var(--b-listbox-option-focus-box-shadow)}.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-active-background-color)}.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-active-font-color)}.b-legacy-theme .b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-active-description-color)}.b-listbox-option[data-v-b7af43a6] .b-listbox-single-select-option__text,.b-listbox-option[data-v-b7af43a6] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-b7af43a6] .b-listbox-single-select-option__description,.b-listbox-option[data-v-b7af43a6] .b-listbox-multi-select__option-description{margin-top:var(--b-listbox-option-description-margin-top)}.b-listbox-option[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-listbox-option-description-color)}.b-listbox-option--disabled[data-v-b7af43a6]{cursor:not-allowed}.b-listbox-option--disabled[data-v-b7af43a6],.b-listbox-option--disabled[data-v-b7af43a6] .b-avatar__label,.b-listbox-option--disabled[data-v-b7af43a6] .b-country__label,.b-listbox-option--disabled[data-v-b7af43a6] .b-payment-method__label{color:var(--b-listbox-option-disabled-font-color)}.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-selected-background-color)}.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-selected-font-color)}.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-selected-description-color)}.b-listbox-single-select-option[data-v-226f4c84]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-226f4c84]{align-items:center;display:flex;margin-left:var(--b-listbox-single-select-check-icon-margin)}.b-listbox-multi-select-category[data-v-92af4c61]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-92af4c61],.b-listbox-multi-select-category[data-v-92af4c61]:before,.b-listbox-multi-select-category[data-v-92af4c61]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-92af4c61] *,.b-listbox-multi-select-category[data-v-92af4c61] *:before,.b-listbox-multi-select-category[data-v-92af4c61] *:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-92af4c61] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-92af4c61] ::-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-listbox-multi-select-category--disabled[data-v-92af4c61]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-92af4c61]{color:var(--b-listbox-multi-select-category-disabled-label-text-color)}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-chevron[data-v-92af4c61]{cursor:pointer}.b-listbox-multi-select-category--static-category[data-v-92af4c61]{gap:var(--b-listbox-multi-select-category-static-category-gap);pointer-events:none}.b-listbox-multi-select-category--static-category .b-listbox-multi-select-category__label-text[data-v-92af4c61]{color:var(--b-listbox-multi-select-category-static-category-label-text-color)}.b-listbox-multi-select-category__label[data-v-92af4c61]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-92af4c61]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-92af4c61]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-92af4c61]{display:flex;gap:var(--b-listbox-multi-select-category-option-gap)}.b-listbox-multi-select-options[data-v-c9ae45d6]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox-multi-select-options[data-v-c9ae45d6],.b-listbox-multi-select-options[data-v-c9ae45d6]:before,.b-listbox-multi-select-options[data-v-c9ae45d6]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-c9ae45d6] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-c9ae45d6] ::-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-listbox-multi-select-options__category-option[data-v-c9ae45d6]{padding-left:var(--b-listbox-multi-select-options-category-option-padding-left)}.b-listbox-multi-select-options__static-category-option[data-v-c9ae45d6]{padding-left:var(--b-listbox-multi-select-options-static-category-option-padding-left)}.b-listbox-multi-select[data-v-36c6ac8d]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-36c6ac8d],.b-listbox-multi-select[data-v-36c6ac8d]:before,.b-listbox-multi-select[data-v-36c6ac8d]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-36c6ac8d] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-36c6ac8d] ::-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-listbox-multi-select__divider[data-v-36c6ac8d]{background-color:var(--b-listbox-multi-select-divider-background-color);border:0;height:1px;margin:var(--b-listbox-multi-select-divider-margin)}.b-listbox-multi-select__option[data-v-36c6ac8d]{display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox-multi-select__chips[data-v-36c6ac8d]{container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--b-listbox-multi-select-chips-gap);list-style-type:none;margin:0;padding:var(--b-listbox-multi-select-chips-padding)}.b-listbox[data-v-7b74fe4e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-listbox-background-color);color:var(--b-listbox-color);overflow-y:auto;padding:var(--b-listbox-padding)}.b-listbox[data-v-7b74fe4e],.b-listbox[data-v-7b74fe4e]:before,.b-listbox[data-v-7b74fe4e]:after{box-sizing:border-box}.b-listbox[data-v-7b74fe4e] *,.b-listbox[data-v-7b74fe4e] *:before,.b-listbox[data-v-7b74fe4e] *:after{box-sizing:border-box}.b-listbox[data-v-7b74fe4e] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-7b74fe4e] ::-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-listbox__empty-search-message[data-v-7b74fe4e]{color:var(--b-listbox-empty-search-message-color);padding:var(--b-listbox-empty-search-message-padding);text-align:center}.b-listbox__empty-search-message[data-v-7b74fe4e] .b-empty-state__title{color:var(--b-listbox-empty-search-message-color)}.b-listbox__loading-filtered-items[data-v-7b74fe4e]{display:flex;justify-content:center}.b-listbox__lazy-load[data-v-7b74fe4e]{display:flex;justify-content:center;margin:var(--b-listbox-lazy-load-margin)}
+.b-listbox-single-select-category[data-v-a90eff17]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:var(--b-listbox-single-select-category-margin-bottom)}.b-listbox-single-select-category[data-v-a90eff17],.b-listbox-single-select-category[data-v-a90eff17]:before,.b-listbox-single-select-category[data-v-a90eff17]:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-a90eff17] *,.b-listbox-single-select-category[data-v-a90eff17] *:before,.b-listbox-single-select-category[data-v-a90eff17] *:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-a90eff17] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-single-select-category[data-v-a90eff17] ::-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-listbox-single-select-category[data-v-a90eff17]:last-child{margin-bottom:0}.b-listbox-single-select-category__label-text[data-v-a90eff17]{color:var(--b-listbox-single-select-category-label-text-color);padding:var(--b-listbox-single-select-category-label-text-padding)}.b-checkbox-input[data-v-b7af43a6]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;display:flex;padding:var(--b-checkbox-input-container-padding);position:relative}.b-checkbox-input[data-v-b7af43a6],.b-checkbox-input[data-v-b7af43a6]:before,.b-checkbox-input[data-v-b7af43a6]:after{box-sizing:border-box}.b-checkbox-input[data-v-b7af43a6] *,.b-checkbox-input[data-v-b7af43a6] *:before,.b-checkbox-input[data-v-b7af43a6] *:after{box-sizing:border-box}.b-checkbox-input[data-v-b7af43a6] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-b7af43a6] ::-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-checkbox-input--disabled[data-v-b7af43a6],.b-checkbox-input--disabled[data-v-b7af43a6] *{cursor:not-allowed}.b-checkbox-input--readonly[data-v-b7af43a6],.b-checkbox-input--readonly[data-v-b7af43a6] *{pointer-events:none}.b-checkbox-input__outline[data-v-b7af43a6]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--b-checkbox-input-outline-border-radius);border-style:solid;border-width:var(--b-checkbox-input-outline-border-width);cursor:pointer;display:inline-block;flex-basis:16px;height:16px;margin:0;min-width:16px;outline:none;position:relative;text-align:center;width:16px}.b-checkbox-input__outline--unchecked[data-v-b7af43a6]{background-color:var(--b-checkbox-input-outline-unchecked-background-color);border-color:var(--b-checkbox-input-outline-unchecked-border-color)}.b-checkbox-input__outline--unchecked[data-v-b7af43a6]:hover{background-color:var(--b-checkbox-input-outline-unchecked-hover-background-color);border-color:var(--b-checkbox-input-outline-unchecked-hover-border-color)}.b-checkbox-input__outline--unchecked[data-v-b7af43a6]:active{background-color:var(--b-checkbox-input-outline-unchecked-active-background-color);border-color:var(--b-checkbox-input-outline-unchecked-active-border-color)}.b-checkbox-input--disabled .b-checkbox-input__outline--unchecked[data-v-b7af43a6]{background-color:var(--b-checkbox-input-outline-unchecked-disabled-background-color);border-color:var(--b-checkbox-input-outline-unchecked-disabled-border-color);cursor:not-allowed}.b-checkbox-input__outline--checked[data-v-b7af43a6],.b-checkbox-input__outline[data-v-b7af43a6]:checked{background-color:var(--b-checkbox-input-outline-checked-background-color);border-color:var(--b-checkbox-input-outline-checked-border-color)}.b-checkbox-input__outline--checked[data-v-b7af43a6]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-b7af43a6]:not(:disabled),.b-checkbox-input__outline[data-v-b7af43a6]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-b7af43a6]:checked:not(:disabled){background-color:var(--b-checkbox-input-outline-checked-hover-background-color);border-color:var(--b-checkbox-input-outline-checked-hover-border-color)}.b-checkbox-input__outline--checked[data-v-b7af43a6]:active,.b-checkbox-input__outline[data-v-b7af43a6]:checked:active{background-color:var(--b-checkbox-input-outline-checked-active-background-color);border-color:var(--b-checkbox-input-outline-checked-active-border-color)}.b-checkbox-input--disabled .b-checkbox-input__outline--checked[data-v-b7af43a6],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-b7af43a6]:checked{background-color:var(--b-checkbox-input-outline-checked-disabled-background-color);border-color:var(--b-checkbox-input-outline-checked-disabled-background-color);cursor:not-allowed}.b-checkbox-input__outline--indeterminate[data-v-b7af43a6],.b-checkbox-input__outline[data-v-b7af43a6]:indeterminate{background-color:var(--b-checkbox-input-outline-indeterminate-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-border-color)}.b-checkbox-input__outline--indeterminate[data-v-b7af43a6]:hover,.b-checkbox-input__outline[data-v-b7af43a6]:indeterminate:hover{background-color:var(--b-checkbox-input-outline-indeterminate-hover-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-hover-border-color)}.b-checkbox-input__outline--indeterminate[data-v-b7af43a6]:active,.b-checkbox-input__outline[data-v-b7af43a6]:indeterminate:active{background-color:var(--b-checkbox-input-outline-indeterminate-active-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-active-border-color)}.b-checkbox-input--disabled .b-checkbox-input__outline--indeterminate[data-v-b7af43a6],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-b7af43a6]:indeterminate{background-color:var(--b-checkbox-input-outline-indeterminate-disabled-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-disabled-background-color);cursor:not-allowed}.b-checkbox-input__outline[data-v-b7af43a6]:focus-visible{animation:outer-ring-default-b7af43a6 var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-default-b7af43a6{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-checkbox-input__outline--error[data-v-b7af43a6]{border:var(--b-checkbox-input-outline-unchecked-error-border)}.b-checkbox-input__outline--error[data-v-b7af43a6]:checked{background-color:var(--b-checkbox-input-outline-checked-error-background-color);border-color:var(--b-checkbox-input-outline-checked-error-border-color)}.b-checkbox-input__outline--error[data-v-b7af43a6]:indeterminate{background-color:var(--b-checkbox-input-outline-indeterminate-error-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-error-border-color)}.b-checkbox-input__outline--readonly[data-v-b7af43a6],.b-checkbox-input__outline--readonly[data-v-b7af43a6]:checked,.b-checkbox-input__outline--readonly[data-v-b7af43a6]:indeterminate{background-color:var(--b-checkbox-input-outline-readonly-background-color);border-color:var(--b-checkbox-input-outline-readonly-border-color)}.b-checkbox-input__icon[data-v-b7af43a6]{color:var(--b-checkbox-input-icon-color);left:0;pointer-events:none;position:absolute;z-index:1}.b-checkbox-input--disabled .b-checkbox-input__icon[data-v-b7af43a6]{color:var(--b-checkbox-input-icon-disabled-color)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-b7af43a6]{color:var(--b-checkbox-input-icon-readonly-color)}.b-listbox-option[data-v-b7af43a6]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;overflow-wrap:anywhere;padding:var(--b-listbox-option-padding)}.b-listbox-option[data-v-b7af43a6],.b-listbox-option[data-v-b7af43a6]:before,.b-listbox-option[data-v-b7af43a6]:after{box-sizing:border-box}.b-listbox-option[data-v-b7af43a6] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-b7af43a6] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media (hover: hover){.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-hover-background-color)}.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--unchecked{background-color:var(--b-checkbox-input-outline-unchecked-hover-background-color);border-color:var(--b-checkbox-input-outline-unchecked-hover-border-color)}.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--checked{background-color:var(--b-checkbox-input-outline-checked-hover-background-color);border-color:var(--b-checkbox-input-outline-checked-hover-border-color)}.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--indeterminate{background-color:var(--b-checkbox-input-outline-indeterminate-hover-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-hover-border-color)}.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-hover-font-color)}.b-legacy-theme .b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-b7af43a6]:hover:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-hover-font-color)}}.b-listbox-option[data-v-b7af43a6]:focus-visible{outline:none;box-shadow:var(--b-listbox-option-focus-box-shadow)}.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-active-background-color)}.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-active-font-color)}.b-legacy-theme .b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-b7af43a6]:active:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-active-description-color)}.b-listbox-option[data-v-b7af43a6] .b-listbox-single-select-option__text,.b-listbox-option[data-v-b7af43a6] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-b7af43a6] .b-listbox-single-select-option__description,.b-listbox-option[data-v-b7af43a6] .b-listbox-multi-select__option-description{margin-top:var(--b-listbox-option-description-margin-top)}.b-listbox-option[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-listbox-option-description-color)}.b-listbox-option--disabled[data-v-b7af43a6]{cursor:not-allowed}.b-listbox-option--disabled[data-v-b7af43a6],.b-listbox-option--disabled[data-v-b7af43a6] .b-avatar__label,.b-listbox-option--disabled[data-v-b7af43a6] .b-country__label,.b-listbox-option--disabled[data-v-b7af43a6] .b-payment-method__label{color:var(--b-listbox-option-disabled-font-color)}.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-selected-background-color)}.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-selected-font-color)}.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-b7af43a6]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-selected-description-color)}.b-listbox-single-select-option[data-v-226f4c84]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-226f4c84]{align-items:center;display:flex;margin-left:var(--b-listbox-single-select-check-icon-margin)}.b-checkbox-input[data-v-c604b68a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;display:flex;padding:var(--b-checkbox-input-container-padding);position:relative}.b-checkbox-input[data-v-c604b68a],.b-checkbox-input[data-v-c604b68a]:before,.b-checkbox-input[data-v-c604b68a]:after{box-sizing:border-box}.b-checkbox-input[data-v-c604b68a] *,.b-checkbox-input[data-v-c604b68a] *:before,.b-checkbox-input[data-v-c604b68a] *:after{box-sizing:border-box}.b-checkbox-input[data-v-c604b68a] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-c604b68a] ::-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-checkbox-input--disabled[data-v-c604b68a],.b-checkbox-input--disabled[data-v-c604b68a] *{cursor:not-allowed}.b-checkbox-input--readonly[data-v-c604b68a],.b-checkbox-input--readonly[data-v-c604b68a] *{pointer-events:none}.b-checkbox-input__outline[data-v-c604b68a]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--b-checkbox-input-outline-border-radius);border-style:solid;border-width:var(--b-checkbox-input-outline-border-width);cursor:pointer;display:inline-block;flex-basis:16px;height:16px;margin:0;min-width:16px;outline:none;position:relative;text-align:center;width:16px}.b-checkbox-input__outline--unchecked[data-v-c604b68a]{background-color:var(--b-checkbox-input-outline-unchecked-background-color);border-color:var(--b-checkbox-input-outline-unchecked-border-color)}.b-checkbox-input__outline--unchecked[data-v-c604b68a]:hover{background-color:var(--b-checkbox-input-outline-unchecked-hover-background-color);border-color:var(--b-checkbox-input-outline-unchecked-hover-border-color)}.b-checkbox-input__outline--unchecked[data-v-c604b68a]:active{background-color:var(--b-checkbox-input-outline-unchecked-active-background-color);border-color:var(--b-checkbox-input-outline-unchecked-active-border-color)}.b-checkbox-input--disabled .b-checkbox-input__outline--unchecked[data-v-c604b68a]{background-color:var(--b-checkbox-input-outline-unchecked-disabled-background-color);border-color:var(--b-checkbox-input-outline-unchecked-disabled-border-color);cursor:not-allowed}.b-checkbox-input__outline--checked[data-v-c604b68a],.b-checkbox-input__outline[data-v-c604b68a]:checked{background-color:var(--b-checkbox-input-outline-checked-background-color);border-color:var(--b-checkbox-input-outline-checked-border-color)}.b-checkbox-input__outline--checked[data-v-c604b68a]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-c604b68a]:not(:disabled),.b-checkbox-input__outline[data-v-c604b68a]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-c604b68a]:checked:not(:disabled){background-color:var(--b-checkbox-input-outline-checked-hover-background-color);border-color:var(--b-checkbox-input-outline-checked-hover-border-color)}.b-checkbox-input__outline--checked[data-v-c604b68a]:active,.b-checkbox-input__outline[data-v-c604b68a]:checked:active{background-color:var(--b-checkbox-input-outline-checked-active-background-color);border-color:var(--b-checkbox-input-outline-checked-active-border-color)}.b-checkbox-input--disabled .b-checkbox-input__outline--checked[data-v-c604b68a],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-c604b68a]:checked{background-color:var(--b-checkbox-input-outline-checked-disabled-background-color);border-color:var(--b-checkbox-input-outline-checked-disabled-background-color);cursor:not-allowed}.b-checkbox-input__outline--indeterminate[data-v-c604b68a],.b-checkbox-input__outline[data-v-c604b68a]:indeterminate{background-color:var(--b-checkbox-input-outline-indeterminate-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-border-color)}.b-checkbox-input__outline--indeterminate[data-v-c604b68a]:hover,.b-checkbox-input__outline[data-v-c604b68a]:indeterminate:hover{background-color:var(--b-checkbox-input-outline-indeterminate-hover-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-hover-border-color)}.b-checkbox-input__outline--indeterminate[data-v-c604b68a]:active,.b-checkbox-input__outline[data-v-c604b68a]:indeterminate:active{background-color:var(--b-checkbox-input-outline-indeterminate-active-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-active-border-color)}.b-checkbox-input--disabled .b-checkbox-input__outline--indeterminate[data-v-c604b68a],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-c604b68a]:indeterminate{background-color:var(--b-checkbox-input-outline-indeterminate-disabled-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-disabled-background-color);cursor:not-allowed}.b-checkbox-input__outline[data-v-c604b68a]:focus-visible{animation:outer-ring-default-c604b68a var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-default-c604b68a{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-checkbox-input__outline--error[data-v-c604b68a]{border:var(--b-checkbox-input-outline-unchecked-error-border)}.b-checkbox-input__outline--error[data-v-c604b68a]:checked{background-color:var(--b-checkbox-input-outline-checked-error-background-color);border-color:var(--b-checkbox-input-outline-checked-error-border-color)}.b-checkbox-input__outline--error[data-v-c604b68a]:indeterminate{background-color:var(--b-checkbox-input-outline-indeterminate-error-background-color);border-color:var(--b-checkbox-input-outline-indeterminate-error-border-color)}.b-checkbox-input__outline--readonly[data-v-c604b68a],.b-checkbox-input__outline--readonly[data-v-c604b68a]:checked,.b-checkbox-input__outline--readonly[data-v-c604b68a]:indeterminate{background-color:var(--b-checkbox-input-outline-readonly-background-color);border-color:var(--b-checkbox-input-outline-readonly-border-color)}.b-checkbox-input__icon[data-v-c604b68a]{color:var(--b-checkbox-input-icon-color);left:0;pointer-events:none;position:absolute;z-index:1}.b-checkbox-input--disabled .b-checkbox-input__icon[data-v-c604b68a]{color:var(--b-checkbox-input-icon-disabled-color)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-c604b68a]{color:var(--b-checkbox-input-icon-readonly-color)}.b-listbox-multi-select-category[data-v-c59132dd]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-c59132dd],.b-listbox-multi-select-category[data-v-c59132dd]:before,.b-listbox-multi-select-category[data-v-c59132dd]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-c59132dd] *,.b-listbox-multi-select-category[data-v-c59132dd] *:before,.b-listbox-multi-select-category[data-v-c59132dd] *:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-c59132dd] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-c59132dd] ::-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-listbox-multi-select-category--disabled[data-v-c59132dd]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-c59132dd]{color:var(--b-listbox-multi-select-category-disabled-label-text-color)}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-chevron[data-v-c59132dd]{cursor:pointer}.b-listbox-multi-select-category--static-category[data-v-c59132dd]{gap:var(--b-listbox-multi-select-category-static-category-gap);pointer-events:none}.b-listbox-multi-select-category--static-category .b-listbox-multi-select-category__label-text[data-v-c59132dd]{color:var(--b-listbox-multi-select-category-static-category-label-text-color)}.b-listbox-multi-select-category__label[data-v-c59132dd]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-c59132dd]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-c59132dd]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-c59132dd]{display:flex;gap:var(--b-listbox-multi-select-category-option-gap)}.b-listbox-multi-select-options[data-v-5778456e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox-multi-select-options[data-v-5778456e],.b-listbox-multi-select-options[data-v-5778456e]:before,.b-listbox-multi-select-options[data-v-5778456e]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-5778456e] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-5778456e] ::-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-listbox-multi-select-options__category-option[data-v-5778456e]{padding-left:var(--b-listbox-multi-select-options-category-option-padding-left)}.b-listbox-multi-select-options__static-category-option[data-v-5778456e]{padding-left:var(--b-listbox-multi-select-options-static-category-option-padding-left)}.b-listbox-multi-select[data-v-1997b63d]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-1997b63d],.b-listbox-multi-select[data-v-1997b63d]:before,.b-listbox-multi-select[data-v-1997b63d]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-1997b63d] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-1997b63d] ::-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-listbox-multi-select__divider[data-v-1997b63d]{background-color:var(--b-listbox-multi-select-divider-background-color);border:0;height:1px;margin:var(--b-listbox-multi-select-divider-margin)}.b-listbox-multi-select__option[data-v-1997b63d]{display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox-multi-select__chips[data-v-1997b63d]{container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--b-listbox-multi-select-chips-gap);list-style-type:none;margin:0;padding:var(--b-listbox-multi-select-chips-padding)}.b-listbox[data-v-7b74fe4e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-listbox-background-color);color:var(--b-listbox-color);overflow-y:auto;padding:var(--b-listbox-padding)}.b-listbox[data-v-7b74fe4e],.b-listbox[data-v-7b74fe4e]:before,.b-listbox[data-v-7b74fe4e]:after{box-sizing:border-box}.b-listbox[data-v-7b74fe4e] *,.b-listbox[data-v-7b74fe4e] *:before,.b-listbox[data-v-7b74fe4e] *:after{box-sizing:border-box}.b-listbox[data-v-7b74fe4e] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-7b74fe4e] ::-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-listbox__empty-search-message[data-v-7b74fe4e]{color:var(--b-listbox-empty-search-message-color);padding:var(--b-listbox-empty-search-message-padding);text-align:center}.b-listbox__empty-search-message[data-v-7b74fe4e] .b-empty-state__title{color:var(--b-listbox-empty-search-message-color)}.b-listbox__loading-filtered-items[data-v-7b74fe4e]{display:flex;justify-content:center}.b-listbox__lazy-load[data-v-7b74fe4e]{display:flex;justify-content:center;margin:var(--b-listbox-lazy-load-margin)}

package/dist/card.js

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

package/dist/checkbox.js

@@ -1,6 +1,6 @@
-import { B as t, a } from "./chunks/checkbox.C4dJVYbB.js";
-import { C as x } from "./chunks/checkbox-input.BhAIj6Cq.js";
-import { c as B, B as c } from "./chunks/checkbox-group.Dsmy9OW5.js";
+import { B as t, a } from "./chunks/checkbox.Hl6-8Sai.js";
+import { C as x } from "./chunks/minus-small.DYIyF5XW.js";
+import { c as B, B as c } from "./chunks/checkbox-group.Aqtco8Q5.js";
 export {
   t as BentoCheckbox,
   a as BentoCheckboxEvent,

package/dist/chunks/{accordion-item.QL3wdbhL.js → accordion-item.DOnW0OnU.js}

@@ -1,7 +1,8 @@
-import { defineComponent as E, provide as $, toRef as z, createElementBlock as l, openBlock as a, renderSlot as S, ref as x, inject as D, computed as R, watch as r, createVNode as g, unref as e, withCtx as h, createElementVNode as y, createBlock as I, createTextVNode as H, toDisplayString as V, Transition as j, createCommentVNode as w, normalizeStyle as A } from "vue";
+import { defineComponent as E, provide as $, toRef as z, createElementBlock as l, openBlock as a, renderSlot as S, ref as x, inject as D, computed as R, watch as c, createVNode as g, unref as e, withCtx as h, createElementVNode as y, createBlock as I, createTextVNode as H, toDisplayString as V, Transition as j, createCommentVNode as w, normalizeStyle as A } from "vue";
 import { _ as N } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { B as U } from "./typography.DN5eC5ch.js";
-import { C as J, a as M } from "./chevron-up.MAa3Ksgd.js";
+import { C as J } from "./chevron-down.DCQ6ZLaq.js";
+import { C as M } from "./chevron-up.kfuLRpZb.js";
 import { g as C } from "./generate-uid.NJ8tVoha.js";
 import { o as q } from "./resize.Bqks3WUm.js";
 import { u as K } from "./i18n.B6g5VX0q.js";
@@ -21,11 +22,11 @@ const T = Symbol("accordion title size injection key"), P = { class: "b-accordio
     }
   },
   setup(i) {
-    return $(T, z(i, "titleSize")), (s, c) => (a(), l("div", P, [
+    return $(T, z(i, "titleSize")), (s, r) => (a(), l("div", P, [
       S(s.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), le = /* @__PURE__ */ N(Z, [["__scopeId", "data-v-9fccc066"]]), k = {
+}), de = /* @__PURE__ */ N(Z, [["__scopeId", "data-v-9fccc066"]]), k = {
   "en-US": {
     collapse: "Collapse",
     expand: "Expand"
@@ -61,13 +62,13 @@ const T = Symbol("accordion title size injection key"), P = { class: "b-accordio
   },
   emits: ["update:is-expanded"],
   setup(i, { emit: d }) {
-    const s = "b-accordion-item__animation--content", c = i, B = d, { t: p } = K({ messages: k }), n = x(null), t = x(c.isExpanded), u = C("accordionItemButton"), m = C("accordionItemContent"), _ = D(T, "default"), { updateContentHeight: v, contentHeight: f } = L(n, t), O = R(() => f.value ? { "max-height": f.value } : {});
-    return r(
-      () => c.isExpanded,
+    const s = "b-accordion-item__animation--content", r = i, B = d, { t: p } = K({ messages: k }), n = x(null), t = x(r.isExpanded), u = C("accordionItemButton"), m = C("accordionItemContent"), _ = D(T, "default"), { updateContentHeight: v, contentHeight: f } = L(n, t), O = R(() => f.value ? { "max-height": f.value } : {});
+    return c(
+      () => r.isExpanded,
       (o) => {
         t.value = o;
       }
-    ), r(
+    ), c(
       () => n.value,
       () => {
         let o = null;
@@ -75,7 +76,7 @@ const T = Symbol("accordion title size injection key"), P = { class: "b-accordio
           n.value && v();
         }));
       }
-    ), r(
+    ), c(
       t,
       (o) => {
         B("update:is-expanded", o), v();
@@ -96,12 +97,12 @@ const T = Symbol("accordion title size injection key"), P = { class: "b-accordio
             class: "b-accordion-item__button",
             onClick: b[0] || (b[0] = (ee) => t.value = !t.value)
           }, [
-            t.value ? (a(), I(e(J), {
+            t.value ? (a(), I(e(M), {
               key: 0,
               class: "b-accordion-item__icon",
               "svg-title": e(p)("collapse"),
               "aria-hidden": "true"
-            }, null, 8, ["svg-title"])) : (a(), I(e(M), {
+            }, null, 8, ["svg-title"])) : (a(), I(e(J), {
               key: 1,
               class: "b-accordion-item__icon",
               "svg-title": e(p)("expand"),
@@ -134,9 +135,9 @@ const T = Symbol("accordion title size injection key"), P = { class: "b-accordio
       })
     ]));
   }
-}), de = /* @__PURE__ */ N(X, [["__scopeId", "data-v-242828d5"]]);
+}), pe = /* @__PURE__ */ N(X, [["__scopeId", "data-v-242828d5"]]);
 export {
-  le as a,
-  de as b
+  de as a,
+  pe as b
 };
-//# sourceMappingURL=accordion-item.QL3wdbhL.js.map
+//# sourceMappingURL=accordion-item.DOnW0OnU.js.map

package/dist/chunks/{accordion-item.QL3wdbhL.js.map → accordion-item.DOnW0OnU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.QL3wdbhL.js","sources":["../../../vue2/src/components/accordion/accordion.keys.ts","../../../vue2/src/components/accordion/accordion.vue","../../../vue2/src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon\n                    v-if=\"isOpen\"\n                    class=\"b-accordion-item__icon\"\n                    :svg-title=\"t('collapse')\"\n                    aria-hidden=\"true\"\n                />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" :svg-title=\"t('expand')\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","__props","__default__","messages","CONTENT_TRANSITION_NAME","props","emit","__emit","t","useI18n","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement"],"mappings":";;;;;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,iCCqDTC,IAAA,CAAA;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAXAC,GAWA,WAAA,CAAA;;;;;;;;;;;;;;;;;mHCqIAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;AAvGA,UAAAC,IAAA,wCAEAC,IAAAJ,GAiBAK,IAAAC,GAOA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAN,EAAA,UAAA,GAGAQ,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAApB,GAAA,SAAA,GAGA,EAAA,qBAAAqB,GAAA,eAAAC,EAAA,IAAAC,EAAAV,GAAAE,CAAA,GAEAS,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACgB,CAAAmB,MAAA;AAER,QAAAZ,EAAA,QAAAY;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAA,MAAAb,EAAA;AAAA,MACqB,MAAA;AAEb,YAAAe,IAAA;AACA,QAAA,CAAAA,KAAAf,EAAA,UACIe,IAAAC,EAAAhB,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIQ,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJK;AAAA,MAAAX;AAAA,MACI,CAAAY,MAAA;AAGI,QAAAlB,EAAA,sBAAAkB,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"accordion-item.DOnW0OnU.js","sources":["../../../vue2/src/components/accordion/accordion.keys.ts","../../../vue2/src/components/accordion/accordion.vue","../../../vue2/src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon\n                    v-if=\"isOpen\"\n                    class=\"b-accordion-item__icon\"\n                    :svg-title=\"t('collapse')\"\n                    aria-hidden=\"true\"\n                />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" :svg-title=\"t('expand')\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","__props","__default__","messages","CONTENT_TRANSITION_NAME","props","emit","__emit","t","useI18n","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement"],"mappings":";;;;;;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,iCCqDTC,IAAA,CAAA;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAXAC,GAWA,WAAA,CAAA;;;;;;;;;;;;;;;;;mHCqIAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;AAvGA,UAAAC,IAAA,wCAEAC,IAAAJ,GAiBAK,IAAAC,GAOA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAN,EAAA,UAAA,GAGAQ,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAApB,GAAA,SAAA,GAGA,EAAA,qBAAAqB,GAAA,eAAAC,EAAA,IAAAC,EAAAV,GAAAE,CAAA,GAEAS,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACgB,CAAAmB,MAAA;AAER,QAAAZ,EAAA,QAAAY;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAA,MAAAb,EAAA;AAAA,MACqB,MAAA;AAEb,YAAAe,IAAA;AACA,QAAA,CAAAA,KAAAf,EAAA,UACIe,IAAAC,EAAAhB,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIQ,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJK;AAAA,MAAAX;AAAA,MACI,CAAAY,MAAA;AAGI,QAAAlB,EAAA,sBAAAkB,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{action-bar.DZhxAMLL.js → action-bar.D8eibCuD.js}

@@ -1,7 +1,7 @@
 import { defineComponent as R, computed as c, ref as _, toRefs as F, watch as E, provide as G, nextTick as f, createBlock as b, openBlock as d, Transition as U, withCtx as B, createElementVNode as h, unref as t, normalizeClass as L, createElementBlock as W, createCommentVNode as K, createVNode as y, createTextVNode as M, toDisplayString as S } from "vue";
 import { B as z } from "./button.AB0SOQMn.js";
 import { B as D } from "./typography.DN5eC5ch.js";
-import { B as J } from "./button-actions-with-menu.DhqEdBBQ.js";
+import { B as J } from "./button-actions-with-menu.BS4gewjn.js";
 import { C as Z } from "./cross.B92GxFTY.js";
 import { u as j } from "./i18n.B6g5VX0q.js";
 import { u as q } from "./index.FNUaPG4G.js";
@@ -200,4 +200,4 @@ const N = {
 export {
   fe as B
 };
-//# sourceMappingURL=action-bar.DZhxAMLL.js.map
+//# sourceMappingURL=action-bar.D8eibCuD.js.map

package/dist/chunks/{action-bar.DZhxAMLL.js.map → action-bar.D8eibCuD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.DZhxAMLL.js","sources":["../../../vue2/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<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        (e: 'cancel'): void;\n        (e: 'save'): void;\n    }>();\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","props","__props","emit","__emit","t","tc","useI18n","label","computed","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsPIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjMA,UAAAC,IAAAC,GAuDAC,IAAAC,GASA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAP,EAAA,CAAA,GACAQ,IAAAC,EAAA,MAAAR,EAAA,iBAAAA,EAAA,iBAAAI,EAAA,UAAA,CAAA,GAGAK,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAb,CAAA,GACA,EAAA,OAAAc,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAV,EAAA,MAAAR,EAAA,YAAA,cAAA;AAEA,IAAAmB;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,IAAAb,EAAA,OAAA;AAAA,MAA2C,+BAAAG,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAA,CAAA;AAGA,UAAAC,IAAAhB,EAAA,MAAA;AAEI,YAAAiB,IAAAzB,EAAA,QAAA,IAAA,CAAA0B,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,IAAArB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAAF,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAAE,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAAF,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJ4B,IAAA,YAAA;AACI,YAAAC,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,KAAA,OAAAO,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAc,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,MAAAO,EAAA,QAAA,MACIA,EAAA,SAAA,GACAgB,EAAA;AAAA,IACJ;AAIJ,WAAAb;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAmB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAtB,EAAA;AACI;AAEJ,cAAA0B,IAAAF,IAAAC;AACA,QAAApB,EAAA,QAAA,MACIE,EAAA,QAAA,IAAiCmB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"action-bar.D8eibCuD.js","sources":["../../../vue2/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<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        (e: 'cancel'): void;\n        (e: 'save'): void;\n    }>();\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","props","__props","emit","__emit","t","tc","useI18n","label","computed","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsPIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjMA,UAAAC,IAAAC,GAuDAC,IAAAC,GASA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAP,EAAA,CAAA,GACAQ,IAAAC,EAAA,MAAAR,EAAA,iBAAAA,EAAA,iBAAAI,EAAA,UAAA,CAAA,GAGAK,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAb,CAAA,GACA,EAAA,OAAAc,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAV,EAAA,MAAAR,EAAA,YAAA,cAAA;AAEA,IAAAmB;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,IAAAb,EAAA,OAAA;AAAA,MAA2C,+BAAAG,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAA,CAAA;AAGA,UAAAC,IAAAhB,EAAA,MAAA;AAEI,YAAAiB,IAAAzB,EAAA,QAAA,IAAA,CAAA0B,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,IAAArB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAAF,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAAE,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAAF,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJ4B,IAAA,YAAA;AACI,YAAAC,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,KAAA,OAAAO,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAc,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,MAAAO,EAAA,QAAA,MACIA,EAAA,SAAA,GACAgB,EAAA;AAAA,IACJ;AAIJ,WAAAb;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAmB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAtB,EAAA;AACI;AAEJ,cAAA0B,IAAAF,IAAAC;AACA,QAAApB,EAAA,QAAA,MACIE,EAAA,QAAA,IAAiCmB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{button-actions-with-menu.DhqEdBBQ.js → button-actions-with-menu.BS4gewjn.js}

@@ -1,5 +1,5 @@
 import { ref as m, watch as y, nextTick as f, defineComponent as A, toRef as B, computed as v, provide as b, createElementBlock as N, openBlock as h, createElementVNode as T, normalizeClass as w, createVNode as E, createBlock as k, createCommentVNode as C, unref as I } from "vue";
-import { M as W, B as S } from "./menu.DOKYXlFy.js";
+import { M as W, B as S } from "./menu.CCDxWQPw.js";
 import { a as O } from "./popover.maCMPyz8.js";
 import { c as _, f as R, B as M } from "./button-actions.D1pXI1AJ.js";
 import { u as g } from "./index.FNUaPG4G.js";
@@ -171,4 +171,4 @@ const D = (a) => {
 export {
   q as B
 };
-//# sourceMappingURL=button-actions-with-menu.DhqEdBBQ.js.map
+//# sourceMappingURL=button-actions-with-menu.BS4gewjn.js.map

package/dist/chunks/{button-actions-with-menu.DhqEdBBQ.js.map → button-actions-with-menu.BS4gewjn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.DhqEdBBQ.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, Ref, ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: number;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref<number>(defaultActionsCount);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount) {\n            displayedActionsCount.value += 1;\n\n            showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            showActions();\n        } else {\n            hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoPopoverPositions } from '@/components/popover';\n    import { computed, PropType, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon,\n         *   link: {\n                variant: 'default',\n                external: true,\n                to: 'https://www.adyen.com/'\n            },\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         *   disabled: true,\n         *   variant: 'primary',\n         *   critical: true\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * Defines the layout in which the button actions is presented.\n         *\n         * @see {@link BentoButtonActionsLayout}\n         *\n         */\n        actionsLayout: {\n            type: String as PropType<`${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        disableResponsiveBehavior: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The min-width breakpoint to hide the button actions.\n         *\n         * For example, a value of 200 means that buttons will be hidden at <= 200px.\n         *\n         * Defaults to 0 i.e. it shows all buttons.\n         */\n        hideDisplayedActionsBreakpoint: {\n            type: Number,\n            default: 0,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: props.displayedActions,\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]:\n            props.actionsLayout === BentoButtonActionsLayout.BUTTONS_END,\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]:\n            props.actionsLayout === BentoButtonActionsLayout.BUTTONS_START,\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() =>\n        displayedActionsCount.value !== undefined && displayedActionsCount.value < props.actions.length\n            ? (props.actions.slice(displayedActionsCount.value, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","_a","hideActions","watch","newWidth","containerEl","oldWidth","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","BentoButtonActionsLayout","computedMenuActions","el"],"mappings":";;;;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,CAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,WAAAO,IAAAV,KAAA,gBAAAA,EAAA,UAAA,gBAAAU,EAAA,gBAAA,KAAAL;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,MACII,EAAA,SAAA,GAEAG,EAAA;AAAA,EACJ,GAGJK,IAAA,YAAA;;AACI,UAAAJ,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,WAAAO,IAAAV,KAAA,gBAAAA,EAAA,UAAA,gBAAAU,EAAA,gBAAA;AAGA,IAAAF,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEAQ,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAX,GAAAH,CAAA,GAAA,OAAA,CAAAe,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAf,KAAAc,IAAAhB;AACI;AAGJ,UAAAU,EAAA,GAEAM,IAAAE,IAGIT,EAAA,IAEAK,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAR;AAAA,EACH;AAER,gDC4JIa,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5KA,UAAApB,IAAAqB,GAkGAC,IAAAC,EAAAvB,GAAA,SAAA,GACAwB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,EAAA,GAEAmB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA7B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA6B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAA;;AAAA,cAAAd,IAAAW,KAAA,gBAAAA,EAAA,UAAA,gBAAAX,EAAA;AAAA,KAAA,GAEA,EAAA,uBAAAP,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAwB;AAAA,MACP,qBAAAxB,EAAA;AAAA,MACgB,QAAA8B;AAAA,IACnB,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEAtB,EAAA,6BACI+B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA5B,EAAA,kBAAAmC,EAAA;AAAA,MAEc,gEAAAnC,EAAA,kBAAAmC,EAAA;AAAA,MAEA,kEAAAT,EAAA;AAAA,IAC4B,EAAA,GAGrFU,IAAAR;AAAA,MAA4B,MAAArB,EAAA,UAAA,UAAAA,EAAA,QAAAP,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAqC,OAAA;AAAA,QAEiE,MAAAA,EAAA;AAAA,QACtE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions-with-menu.BS4gewjn.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, Ref, ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: number;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref<number>(defaultActionsCount);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount) {\n            displayedActionsCount.value += 1;\n\n            showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            showActions();\n        } else {\n            hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoPopoverPositions } from '@/components/popover';\n    import { computed, PropType, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon,\n         *   link: {\n                variant: 'default',\n                external: true,\n                to: 'https://www.adyen.com/'\n            },\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         *   disabled: true,\n         *   variant: 'primary',\n         *   critical: true\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * Defines the layout in which the button actions is presented.\n         *\n         * @see {@link BentoButtonActionsLayout}\n         *\n         */\n        actionsLayout: {\n            type: String as PropType<`${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        disableResponsiveBehavior: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The min-width breakpoint to hide the button actions.\n         *\n         * For example, a value of 200 means that buttons will be hidden at <= 200px.\n         *\n         * Defaults to 0 i.e. it shows all buttons.\n         */\n        hideDisplayedActionsBreakpoint: {\n            type: Number,\n            default: 0,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: props.displayedActions,\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]:\n            props.actionsLayout === BentoButtonActionsLayout.BUTTONS_END,\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]:\n            props.actionsLayout === BentoButtonActionsLayout.BUTTONS_START,\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() =>\n        displayedActionsCount.value !== undefined && displayedActionsCount.value < props.actions.length\n            ? (props.actions.slice(displayedActionsCount.value, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","_a","hideActions","watch","newWidth","containerEl","oldWidth","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","BentoButtonActionsLayout","computedMenuActions","el"],"mappings":";;;;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,CAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,WAAAO,IAAAV,KAAA,gBAAAA,EAAA,UAAA,gBAAAU,EAAA,gBAAA,KAAAL;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,MACII,EAAA,SAAA,GAEAG,EAAA;AAAA,EACJ,GAGJK,IAAA,YAAA;;AACI,UAAAJ,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,WAAAO,IAAAV,KAAA,gBAAAA,EAAA,UAAA,gBAAAU,EAAA,gBAAA;AAGA,IAAAF,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEAQ,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAX,GAAAH,CAAA,GAAA,OAAA,CAAAe,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAf,KAAAc,IAAAhB;AACI;AAGJ,UAAAU,EAAA,GAEAM,IAAAE,IAGIT,EAAA,IAEAK,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAR;AAAA,EACH;AAER,gDC4JIa,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5KA,UAAApB,IAAAqB,GAkGAC,IAAAC,EAAAvB,GAAA,SAAA,GACAwB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,EAAA,GAEAmB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA7B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA6B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAA;;AAAA,cAAAd,IAAAW,KAAA,gBAAAA,EAAA,UAAA,gBAAAX,EAAA;AAAA,KAAA,GAEA,EAAA,uBAAAP,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAwB;AAAA,MACP,qBAAAxB,EAAA;AAAA,MACgB,QAAA8B;AAAA,IACnB,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEAtB,EAAA,6BACI+B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA5B,EAAA,kBAAAmC,EAAA;AAAA,MAEc,gEAAAnC,EAAA,kBAAAmC,EAAA;AAAA,MAEA,kEAAAT,EAAA;AAAA,IAC4B,EAAA,GAGrFU,IAAAR;AAAA,MAA4B,MAAArB,EAAA,UAAA,UAAAA,EAAA,QAAAP,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAqC,OAAA;AAAA,QAEiE,MAAAA,EAAA;AAAA,QACtE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{calendar.DW8Uy3b_.js → calendar.CLpwW_-k.js}

@@ -5,7 +5,7 @@ import { d as Be, a as be } from "./index.BDuTpjD8.js";
 import { B as Te } from "./button.AB0SOQMn.js";
 import { B as Je } from "./typography.DN5eC5ch.js";
 import { _ as me } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { a as Ze, C as et } from "./chevron-left.Cfn1uGLH.js";
+import { a as Ze, C as et } from "./chevron-right.Brdj0WlO.js";
 import "./events.FNmSWp_P.js";
 import { a as tt } from "./keyboard-navigation.CqgGzfZQ.js";
 import { g as at } from "./generate-uid.NJ8tVoha.js";
@@ -1287,4 +1287,4 @@ export {
   Me as s,
   ta as u
 };
-//# sourceMappingURL=calendar.DW8Uy3b_.js.map
+//# sourceMappingURL=calendar.CLpwW_-k.js.map