npm - @adyen/bento-vue3 - Versions diffs - 1.45.0 → 1.46.0 - Mend

@adyen/bento-vue3 1.45.0 → 1.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (300) hide show

package/dist/assets/popover.css CHANGED Viewed

	@@ -1 +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-97e86b0a]{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-97e86b0a],.b-popover[data-v-97e86b0a]:before,.b-popover[data-v-97e86b0a]:after{box-sizing:border-box}.b-popover[data-v-97e86b0a] ,.b-popover[data-v-97e86b0a] :before,.b-popover[data-v-97e86b0a] :after{box-sizing:border-box}.b-popover[data-v-97e86b0a] ::-webkit-scrollbar{height:14px;width:14px}.b-popover[data-v-97e86b0a] ::-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-97e86b0a]{width:320px}}.b-popover[data-v-97e86b0a] .b-popover__arrow:before{color:transparent;display:none}.b-popover--fit-content[data-v-97e86b0a]{width:fit-content}.b-popover--overflow-visible[data-v-97e86b0a]{overflow:visible}.b-popover--overflow-visible .b-popover__footer[data-v-97e86b0a]{border-bottom-left-radius:var(--b-popover-border-radius);border-bottom-right-radius:var(--b-popover-border-radius)}.b-popover--small[data-v-97e86b0a]{width:200px}.b-popover--large[data-v-97e86b0a]{width:480px}.b-popover--with-divider .b-popover__footer[data-v-97e86b0a]{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-97e86b0a]{padding:var(--b-popover-with-divider-content-padding)}.b-popover--without-space .b-popover__header[data-v-97e86b0a],.b-popover--without-space .b-popover__content[data-v-97e86b0a],.b-popover--without-space .b-popover__footer[data-v-97e86b0a]{padding:var(--b-popover-without-space-padding)}.b-popover__content[data-v-97e86b0a]{padding:var(--b-popover-content-padding)}.b-popover__content--with-title[data-v-97e86b0a]{padding:var(--b-popover-content-with-title-padding)}.b-popover__header[data-v-97e86b0a]{align-items:baseline;display:flex;justify-content:space-between;padding:var(--b-popover-header-padding)}.b-popover__header-title[data-v-97e86b0a]{align-items:center;column-gap:var(--b-popover-header-title-column-gap);display:flex}.b-popover__image[data-v-97e86b0a]{display:flex;overflow:hidden}.b-popover__image+.b-popover__header[data-v-97e86b0a]{padding:var(--b-popover-image-header-padding)}.b-popover__image-dismiss-button[data-v-97e86b0a]{position:absolute;right:var(--b-popover-image-dismiss-icon-right);top:var(--b-popover-image-dismiss-icon-top)}.b-popover__footer[data-v-97e86b0a]{padding:var(--b-popover-footer-padding)}.b-popover__animation-enter-active[data-popper-placement^=top][data-v-97e86b0a]{animation:fade-in-~~uww579i~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-~~uww579i~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-~~uww579i~~-97e86b0a{0%{opacity:0}to{opacity:1}}@keyframes move-in-~~uww579i~~-97e86b0a{0%{top:8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=top][data-v-97e86b0a]{animation:fade-out-~~uww57bh~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-~~uww57bh~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-~~uww57bh~~-97e86b0a{0%{opacity:1}to{opacity:0}}@keyframes move-out-~~uww57bh~~-97e86b0a{0%{top:0}to{top:8px}}.b-popover__animation-enter-active[data-popper-placement^=bottom][data-v-97e86b0a]{animation:fade-in-~~uww57cb~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-~~uww57cb~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-~~uww57cb~~-97e86b0a{0%{opacity:0}to{opacity:1}}@keyframes move-in-~~uww57cb~~-97e86b0a{0%{top:-8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=bottom][data-v-97e86b0a]{animation:fade-out-~~uww57cv~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-~~uww57cv~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-~~uww57cv~~-97e86b0a{0%{opacity:1}to{opacity:0}}@keyframes move-out-~~uww57cv~~-97e86b0a{0%{top:0}to{top:-8px}}.b-popover__animation-enter-active[data-popper-placement^=left][data-v-97e86b0a]{animation:fade-in-~~uww57ep~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-~~uww57ep~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-~~uww57ep~~-97e86b0a{0%{opacity:0}to{opacity:1}}@keyframes move-in-~~uww57ep~~-97e86b0a{0%{left:8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=left][data-v-97e86b0a]{animation:fade-out-~~uww57fb~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-~~uww57fb~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-~~uww57fb~~-97e86b0a{0%{opacity:1}to{opacity:0}}@keyframes move-out-~~uww57fb~~-97e86b0a{0%{left:0}to{left:8px}}.b-popover__animation-enter-active[data-popper-placement^=right][data-v-97e86b0a]{animation:fade-in-~~uww57g3~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-~~uww57g3~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-~~uww57g3~~-97e86b0a{0%{opacity:0}to{opacity:1}}@keyframes move-in-~~uww57g3~~-97e86b0a{0%{left:-8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=right][data-v-97e86b0a]{animation:fade-out-~~uww57g7~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-~~uww57g7~~-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-~~uww57g7~~-97e86b0a{0%{opacity:1}to{opacity:0}}@keyframes move-out-~~uww57g7~~-97e86b0a{0%{left:0}to{left:-8px}}
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-97e86b0a]{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-97e86b0a],.b-popover[data-v-97e86b0a]:before,.b-popover[data-v-97e86b0a]:after{box-sizing:border-box}.b-popover[data-v-97e86b0a] ,.b-popover[data-v-97e86b0a] :before,.b-popover[data-v-97e86b0a] :after{box-sizing:border-box}.b-popover[data-v-97e86b0a] ::-webkit-scrollbar{height:14px;width:14px}.b-popover[data-v-97e86b0a] ::-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-97e86b0a]{width:320px}}.b-popover[data-v-97e86b0a] .b-popover__arrow:before{color:transparent;display:none}.b-popover--fit-content[data-v-97e86b0a]{width:fit-content}.b-popover--overflow-visible[data-v-97e86b0a]{overflow:visible}.b-popover--overflow-visible .b-popover__footer[data-v-97e86b0a]{border-bottom-left-radius:var(--b-popover-border-radius);border-bottom-right-radius:var(--b-popover-border-radius)}.b-popover--small[data-v-97e86b0a]{width:200px}.b-popover--large[data-v-97e86b0a]{width:480px}.b-popover--with-divider .b-popover__footer[data-v-97e86b0a]{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-97e86b0a]{padding:var(--b-popover-with-divider-content-padding)}.b-popover--without-space>.b-popover__header[data-v-97e86b0a]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__content[data-v-97e86b0a]{padding:var(--b-popover-without-space-padding)}.b-popover--without-space>.b-popover__footer[data-v-97e86b0a]{padding:var(--b-popover-without-space-padding)}.b-popover__content[data-v-97e86b0a]{padding:var(--b-popover-content-padding)}.b-popover__content--with-title[data-v-97e86b0a]{padding:var(--b-popover-content-with-title-padding)}.b-popover__header[data-v-97e86b0a]{align-items:baseline;display:flex;justify-content:space-between;padding:var(--b-popover-header-padding)}.b-popover__header-title[data-v-97e86b0a]{align-items:center;column-gap:var(--b-popover-header-title-column-gap);display:flex}.b-popover__image[data-v-97e86b0a]{display:flex;overflow:hidden}.b-popover__image+.b-popover__header[data-v-97e86b0a]{padding:var(--b-popover-image-header-padding)}.b-popover__image-dismiss-button[data-v-97e86b0a]{position:absolute;right:var(--b-popover-image-dismiss-icon-right);top:var(--b-popover-image-dismiss-icon-top)}.b-popover__footer[data-v-97e86b0a]{padding:var(--b-popover-footer-padding)}.b-popover__animation-enter-active[data-popper-placement^=top][data-v-97e86b0a]{animation:fade-in-u4bad1t-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u4bad1t-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u4bad1t-97e86b0a{0%{opacity:0}to{opacity:1}}@keyframes move-in-u4bad1t-97e86b0a{0%{top:8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=top][data-v-97e86b0a]{animation:fade-out-u4bad5c-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u4bad5c-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u4bad5c-97e86b0a{0%{opacity:1}to{opacity:0}}@keyframes move-out-u4bad5c-97e86b0a{0%{top:0}to{top:8px}}.b-popover__animation-enter-active[data-popper-placement^=bottom][data-v-97e86b0a]{animation:fade-in-u4bad6b-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u4bad6b-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u4bad6b-97e86b0a{0%{opacity:0}to{opacity:1}}@keyframes move-in-u4bad6b-97e86b0a{0%{top:-8px}to{top:0}}.b-popover__animation-leave-active[data-popper-placement^=bottom][data-v-97e86b0a]{animation:fade-out-u4bad81-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u4bad81-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u4bad81-97e86b0a{0%{opacity:1}to{opacity:0}}@keyframes move-out-u4bad81-97e86b0a{0%{top:0}to{top:-8px}}.b-popover__animation-enter-active[data-popper-placement^=left][data-v-97e86b0a]{animation:fade-in-u4badah-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u4badah-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u4badah-97e86b0a{0%{opacity:0}to{opacity:1}}@keyframes move-in-u4badah-97e86b0a{0%{left:8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=left][data-v-97e86b0a]{animation:fade-out-u4badbx-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u4badbx-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u4badbx-97e86b0a{0%{opacity:1}to{opacity:0}}@keyframes move-out-u4badbx-97e86b0a{0%{left:0}to{left:8px}}.b-popover__animation-enter-active[data-popper-placement^=right][data-v-97e86b0a]{animation:fade-in-u4badch-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-in-u4badch-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-enter)}@keyframes fade-in-u4badch-97e86b0a{0%{opacity:0}to{opacity:1}}@keyframes move-in-u4badch-97e86b0a{0%{left:-8px}to{left:0}}.b-popover__animation-leave-active[data-popper-placement^=right][data-v-97e86b0a]{animation:fade-out-u4badd7-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-linear),move-out-u4badd7-97e86b0a var(--b-popover-animation-duration) var(--b-animation-easing-exit)}@keyframes fade-out-u4badd7-97e86b0a{0%{opacity:1}to{opacity:0}}@keyframes move-out-u4badd7-97e86b0a{0%{left:0}to{left:-8px}}

package/dist/assets/sidepanel.css CHANGED Viewed

	@@ -1 +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-~~uww576w~~-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-enter)}@keyframes enter-~~uww576w~~-34efe8c7{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-34efe8c7]::backdrop{animation:fade-in-~~uww577q~~-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-~~uww577q~~-34efe8c7{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-34efe8c7]{animation:exit-~~uww5792~~-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-exit)}@keyframes exit-~~uww5792~~-34efe8c7{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-34efe8c7]::backdrop{animation:fade-out-~~uww57ad~~-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-~~uww57ad~~-34efe8c7{0%{opacity:.5}to{opacity:0}}
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-u4bacy1-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-enter)}@keyframes enter-u4bacy1-34efe8c7{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-34efe8c7]::backdrop{animation:fade-in-u4bacyw-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-u4bacyw-34efe8c7{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-34efe8c7]{animation:exit-u4bad1c-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-exit)}@keyframes exit-u4bad1c-34efe8c7{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-34efe8c7]::backdrop{animation:fade-out-u4bad3n-34efe8c7 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-u4bad3n-34efe8c7{0%{opacity:.5}to{opacity:0}}

package/dist/assets/step.css CHANGED Viewed

	@@ -1 +1 @@
1	- .b-stepper[data-v-3daeb439]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size}.b-stepper[data-v-3daeb439],.b-stepper[data-v-3daeb439]:before,.b-stepper[data-v-3daeb439]:after{box-sizing:border-box}.b-stepper[data-v-3daeb439] ,.b-stepper[data-v-3daeb439] :before,.b-stepper[data-v-3daeb439] :after{box-sizing:border-box}.b-stepper[data-v-3daeb439] ::-webkit-scrollbar{height:14px;width:14px}.b-stepper[data-v-3daeb439] ::-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-stepper__list[data-v-3daeb439]{display:flex;flex-direction:column;gap:var(--b-stepper-gap);margin:0;max-width:var(--b-stepper-max-width);padding-left:0}.b-stepper__list--horizontal[data-v-3daeb439]{align-items:center;flex-flow:wrap;max-width:unset}@media (max-width: 499px){.b-stepper__list[data-v-3daeb439]{display:none}}.b-stepper__text-stepper[data-v-3daeb439]{color:var(--b-stepper-text-stepper-color)}@media (min-width: 500px){.b-stepper__text-stepper[data-v-3daeb439]{display:none}}.b-step[data-v-1968679e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.b-step[data-v-1968679e],.b-step[data-v-1968679e]:before,.b-step[data-v-1968679e]:after{box-sizing:border-box}.b-step[data-v-1968679e] ,.b-step[data-v-1968679e] :before,.b-step[data-v-1968679e] :after{box-sizing:border-box}.b-step[data-v-1968679e] ::-webkit-scrollbar{height:14px;width:14px}.b-step[data-v-1968679e] ::-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-step__content[data-v-1968679e]{color:var(--b-stepper-step-content-color)}.b-step__button[data-v-1968679e]{align-items:center;background-color:transparent;border:none;border-radius:var(--b-stepper-step-button-border-radius);cursor:pointer;display:flex;gap:var(--b-stepper-step-button-gap);padding:var(--b-stepper-step-button-padding);text-align:left;width:100%}.b-step__button[data-v-1968679e]:not(:disabled):hover{background-color:var(--b-stepper-step-button-hover-background-color)}.b-step__button:not(:disabled):hover .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-content-hover-color)}.b-step__button[data-v-1968679e]:focus-visible{animation:outer-ring-default-1968679e var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);outline:none}@keyframes outer-ring-default-1968679e{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-step__button[data-v-1968679e] .b-base-button__icon-left{margin-bottom:auto}.b-step__index[data-v-1968679e]{align-items:center;background-color:var(--b-stepper-step-index-background-color);border-radius:var(--b-stepper-step-index-border-radius);color:var(--b-stepper-step-index-color);display:flex;height:var(--b-stepper-step-index-height);justify-content:center;min-width:var(--b-stepper-step-index-width);width:var(--b-stepper-step-index-width)}.b-step__substep-list[data-v-1968679e]{display:flex;flex-direction:column;gap:var(--b-stepper-step-substeps-gap);list-style:none;margin-top:var(--b-stepper-step-substeps-margin-top);padding-left:0}.b-step--active .b-step__index[data-v-1968679e]{background-color:var(--b-stepper-step-index-active-background-color)}.b-step--active .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-content-active-color)}.b-step--completed .b-step__index[data-v-1968679e]{background-color:var(--b-stepper-step-index-completed-background-color)}.b-step--completed .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-content-completed-color)}.b-step--substep .b-step__index[data-v-1968679e]{background-color:transparent;color:var(--b-stepper-step-substeps-index-color)}.b-step--substep .b-step__button[data-v-1968679e]{padding-left:var(--b-stepper-step-substeps-button-padding-left)}.b-step--substep .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-substeps-content-color)}.b-step--substep.b-step--active .b-step__index[data-v-1968679e]{color:var(--b-stepper-step-substeps-index-active-color)}.b-step--substep.b-step--active .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-substeps-content-active-color)}.b-step--substep.b-step--completed .b-step__index[data-v-1968679e]{color:var(--b-stepper-step-substeps-index-completed-color)}.b-step--substep.b-step--completed .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-substeps-content-completed-color)}
1	+ .b-stepper[data-v-3daeb439]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size}.b-stepper[data-v-3daeb439],.b-stepper[data-v-3daeb439]:before,.b-stepper[data-v-3daeb439]:after{box-sizing:border-box}.b-stepper[data-v-3daeb439] ,.b-stepper[data-v-3daeb439] :before,.b-stepper[data-v-3daeb439] :after{box-sizing:border-box}.b-stepper[data-v-3daeb439] ::-webkit-scrollbar{height:14px;width:14px}.b-stepper[data-v-3daeb439] ::-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-stepper__list[data-v-3daeb439]{display:flex;flex-direction:column;gap:var(--b-stepper-gap);margin:0;max-width:var(--b-stepper-max-width);padding-left:0}.b-stepper__list--horizontal[data-v-3daeb439]{align-items:center;flex-flow:wrap;gap:var(--b-stepper-horizontal-gap);max-width:unset}@media (max-width: 499px){.b-stepper__list[data-v-3daeb439]{display:none}}.b-stepper__text-stepper[data-v-3daeb439]{color:var(--b-stepper-text-stepper-color)}@media (min-width: 500px){.b-stepper__text-stepper[data-v-3daeb439]{display:none}}.b-step[data-v-1968679e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.b-step[data-v-1968679e],.b-step[data-v-1968679e]:before,.b-step[data-v-1968679e]:after{box-sizing:border-box}.b-step[data-v-1968679e] ,.b-step[data-v-1968679e] :before,.b-step[data-v-1968679e] :after{box-sizing:border-box}.b-step[data-v-1968679e] ::-webkit-scrollbar{height:14px;width:14px}.b-step[data-v-1968679e] ::-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-step__content[data-v-1968679e]{color:var(--b-stepper-step-content-color)}.b-step__button[data-v-1968679e]{align-items:center;background-color:transparent;border:none;border-radius:var(--b-stepper-step-button-border-radius);cursor:pointer;display:flex;gap:var(--b-stepper-step-button-gap);padding:var(--b-stepper-step-button-padding);text-align:left;width:100%}.b-step__button[data-v-1968679e]:not(:disabled):hover{background-color:var(--b-stepper-step-button-hover-background-color)}.b-step__button:not(:disabled):hover .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-content-hover-color)}.b-step__button[data-v-1968679e]:focus-visible{animation:outer-ring-default-1968679e var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);outline:none}@keyframes outer-ring-default-1968679e{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-step__button[data-v-1968679e] .b-base-button__icon-left{margin-bottom:auto}.b-step__index[data-v-1968679e]{align-items:center;background-color:var(--b-stepper-step-index-background-color);border-radius:var(--b-stepper-step-index-border-radius);color:var(--b-stepper-step-index-color);display:flex;height:var(--b-stepper-step-index-height);justify-content:center;min-width:var(--b-stepper-step-index-width);width:var(--b-stepper-step-index-width)}.b-step__substep-list[data-v-1968679e]{display:flex;flex-direction:column;gap:var(--b-stepper-step-substeps-gap);list-style:none;margin-top:var(--b-stepper-step-substeps-margin-top);padding-left:0}.b-step--active .b-step__index[data-v-1968679e]{background-color:var(--b-stepper-step-index-active-background-color)}.b-step--active .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-content-active-color)}.b-step--completed .b-step__index[data-v-1968679e]{background-color:var(--b-stepper-step-index-completed-background-color)}.b-step--completed .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-content-completed-color)}.b-step--substep .b-step__index[data-v-1968679e]{background-color:transparent;color:var(--b-stepper-step-substeps-index-color)}.b-step--substep .b-step__button[data-v-1968679e]{padding-left:var(--b-stepper-step-substeps-button-padding-left)}.b-step--substep .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-substeps-content-color)}.b-step--substep.b-step--active .b-step__index[data-v-1968679e]{color:var(--b-stepper-step-substeps-index-active-color)}.b-step--substep.b-step--active .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-substeps-content-active-color)}.b-step--substep.b-step--completed .b-step__index[data-v-1968679e]{color:var(--b-stepper-step-substeps-index-completed-color)}.b-step--substep.b-step--completed .b-step__content[data-v-1968679e]{color:var(--b-stepper-step-substeps-content-completed-color)}

package/dist/avatar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as r } from "./chunks/avatar.B0-9jC6H.js";
+import { B as r } from "./chunks/avatar.DqdDHXay.js";
 export {
   r as BentoAvatar
 };

package/dist/button.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { B as n, b as B, a } from "./chunks/button.Cneb6rPP.js";
-import { B as s, c as u, a as i, b as r, d as c, e as d } from "./chunks/button-actions.CShVMUOC.js";
-import { B as g } from "./chunks/toggle-button.CCgvi7TQ.js";
+import { B as n, b as B, a } from "./chunks/button.DSnv5X7y.js";
+import { B as s, c as u, a as i, b as r, d as c, e as d } from "./chunks/button-actions.C8CJcXxS.js";
+import { B as g } from "./chunks/toggle-button.BABftVnA.js";
 export {
   n as BentoButton,
   s as BentoButtonActions,

package/dist/card.js CHANGED Viewed

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

package/dist/checkbox.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { B as t, a } from "./chunks/checkbox.D9FJcICR.js";
-import { C as x } from "./chunks/checkbox-input.CAYgiRHG.js";
-import { c as B, B as c } from "./chunks/checkbox-group.PTNxE0kL.js";
+import { B as t, a } from "./chunks/checkbox.BphbrpUx.js";
+import { C as x } from "./chunks/checkbox-input.D8ZUqd4m.js";
+import { c as B, B as c } from "./chunks/checkbox-group.Dq57AigF.js";
 export {
   t as BentoCheckbox,
   a as BentoCheckboxEvent,

package/dist/chunks/{accordion-item.DfOb4Pyx.js → accordion-item.BOftQTUm.js} RENAMED Viewed

@@ -1,10 +1,10 @@
-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, openBlock as a, createElementBlock as l, 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, normalizeStyle as w, createCommentVNode 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.Cu9qXgBY.js";
-import { g as C } from "./generate-uid.NJ8tVoha.js";
+import { B as U } from "./typography.DNzU41ah.js";
+import { C as J, a as M } from "./chevron-up.DQZG_BP3.js";
+import { g as C } from "./generate-uid.D-HFI38h.js";
 import { o as q } from "./resize.Bqks3WUm.js";
-import { u as K } from "./i18n.WMYWtwxB.js";
+import { u as K } from "./i18n.CPGoe9tN.js";
 import { u as L } from "./use-expandable-content-height.GkjjbmPy.js";
 import "../assets/accordion-item.css";
 const T = Symbol("accordion title size injection key"), P = { class: "b-accordion" }, Y = {}, Z = /* @__PURE__ */ E({
@@ -119,7 +119,7 @@ const T = Symbol("accordion title size injection key"), P = { class: "b-accordio
             id: e(m),
             "aria-labelledby": e(u),
             role: "region",
-            style: A(O.value)
+            style: w(O.value)
           }, [
             y("div", {
               ref_key: "contentDiv",
@@ -128,7 +128,7 @@ const T = Symbol("accordion title size injection key"), P = { class: "b-accordio
             }, [
               S(o.$slots, "default", {}, void 0, !0)
             ], 512)
-          ], 12, Q)) : w("", !0)
+          ], 12, Q)) : A("", !0)
         ]),
         _: 3
       })
@@ -139,4 +139,4 @@ export {
   le as a,
   de as b
 };
-//# sourceMappingURL=accordion-item.DfOb4Pyx.js.map
+//# sourceMappingURL=accordion-item.BOftQTUm.js.map

package/dist/chunks/{accordion-item.DfOb4Pyx.js.map → accordion-item.BOftQTUm.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion-item.~~DfOb4Pyx~~.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"accordion-item.BOftQTUm.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.CmDQZkM2.js → action-bar.DHa6nS5J.js} RENAMED Viewed

@@ -1,12 +1,12 @@
-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.Cneb6rPP.js";
-import { B as D } from "./typography.DN5eC5ch.js";
-import { B as J } from "./button-actions-with-menu.BUyecZNi.js";
-import { C as Z } from "./cross.BZYw4R3N.js";
-import { u as j } from "./i18n.WMYWtwxB.js";
-import { u as q } from "./index.BMkVmbZj.js";
-import { P as Y } from "./popover.3KG1IoYE.js";
-import { B as $ } from "./button-actions.CShVMUOC.js";
+import { defineComponent as R, computed as c, ref as _, toRefs as F, watch as E, provide as G, nextTick as f, openBlock as d, createBlock as b, Transition as U, withCtx as B, createElementVNode as h, normalizeClass as L, unref as t, createElementBlock as W, createVNode as y, createCommentVNode as K, createTextVNode as M, toDisplayString as S } from "vue";
+import { B as z } from "./button.DSnv5X7y.js";
+import { B as D } from "./typography.DNzU41ah.js";
+import { B as J } from "./button-actions-with-menu.DzQQlXXK.js";
+import { C as Z } from "./cross.OvPfvoqX.js";
+import { u as j } from "./i18n.CPGoe9tN.js";
+import { u as q } from "./index.BHiMheJx.js";
+import { P as Y } from "./popover.BFZU1OKv.js";
+import { B as $ } from "./button-actions.C8CJcXxS.js";
 import { _ as H } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/action-bar.css";
 const N = {
@@ -200,4 +200,4 @@ const N = {
 export {
   fe as B
 };
-//# sourceMappingURL=action-bar.CmDQZkM2.js.map
+//# sourceMappingURL=action-bar.DHa6nS5J.js.map

package/dist/chunks/{action-bar.CmDQZkM2.js.map → action-bar.DHa6nS5J.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action-bar.CmDQZkM2.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"action-bar.DHa6nS5J.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/{alert.D1Ax6AnI.js → alert.BffQNg4e.js} RENAMED Viewed

@@ -1,13 +1,13 @@
-import { createElementBlock as _, openBlock as o, mergeProps as b, createCommentVNode as c, createElementVNode as s, toDisplayString as V, defineComponent as N, useSlots as R, computed as n, onMounted as A, normalizeClass as P, createBlock as C, resolveDynamicComponent as D, unref as e, withCtx as f, renderSlot as v, createVNode as F } from "vue";
-import { a as I, c as U, B as y } from "./typography.DN5eC5ch.js";
-import { B as W } from "./button.Cneb6rPP.js";
-import { C as M } from "./cross-small.Z5EKYRm0.js";
-import { W as Z } from "./warning-filled.tTkVob0l.js";
-import { C as j } from "./cross-circle-fill.BzSjakuO.js";
-import { C as q } from "./checkmark-circle-fill.g_tcBhFJ.js";
+import { openBlock as o, createElementBlock as _, mergeProps as b, toDisplayString as V, createCommentVNode as c, createElementVNode as s, defineComponent as N, useSlots as R, computed as n, onMounted as A, normalizeClass as P, createBlock as C, resolveDynamicComponent as D, unref as e, withCtx as f, renderSlot as v, createVNode as F } from "vue";
+import { c as U, a as I, B as y } from "./typography.DNzU41ah.js";
+import { B as W } from "./button.DSnv5X7y.js";
+import { C as M } from "./cross-small.CXWTuKA_.js";
+import { W as Z } from "./warning-filled.OUOUbA6k.js";
+import { C as j } from "./cross-circle-fill.DN5b3_eL.js";
+import { C as q } from "./checkmark-circle-fill.ClIf1E3H.js";
 import { _ as S } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { u as z } from "./use-has-slot.B7eQSabc.js";
-import { u as J } from "./i18n.WMYWtwxB.js";
+import { u as J } from "./i18n.CPGoe9tN.js";
 import "../assets/alert.css";
 var m = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.TIP = "tip", t))(m || {}), i = /* @__PURE__ */ ((t) => (t.WARNING = "warning", t.CRITICAL = "critical", t.HIGHLIGHT = "highlight", t.SUCCESS = "success", t))(i || {}), T = /* @__PURE__ */ ((t) => (t.CLOSE_ALERT = "close-alert", t))(T || {});
 let H = 0;
@@ -165,4 +165,4 @@ export {
   i as b,
   T as c
 };
-//# sourceMappingURL=alert.D1Ax6AnI.js.map
+//# sourceMappingURL=alert.BffQNg4e.js.map

package/dist/chunks/{alert.D1Ax6AnI.js.map → alert.BffQNg4e.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.D1Ax6AnI.js","sources":["../../../vue2/src/components/alert/alert.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../../vue2/src/components/alert/alert.vue"],"sourcesContent":["/*\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoAlertVariant {\n DEFAULT = 'default',\n TIP = 'tip',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoAlertTypeOption {\n WARNING = 'warning',\n CRITICAL = 'critical',\n HIGHLIGHT = 'highlight',\n SUCCESS = 'success',\n}\n\n/\n @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n /\nexport enum BentoAlertEvent {\n CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n<style>\n @import '../css/main.css';\n</style>\n","<template>\n <div class=\"b-alert\" :role=\"computedRole\">\n <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n <div class=\"b-alert__icon\">\n <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n </div>\n\n <div class=\"b-alert__content\">\n <bento-typography\n v-if=\"hasSlot('default') && !isTipVariant\"\n class=\"b-alert__title\"\n el=\"div\"\n variant=\"body\"\n strongest\n wide\n >\n <slot />\n </bento-typography>\n\n <bento-typography\n v-if=\"hasSlot('description')\"\n class=\"b-alert__description\"\n v-bind=\"descriptionTypography\"\n data-testid=\"alert-description\"\n >\n <slot name=\"description\" />\n </bento-typography>\n\n <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n\n <bento-button\n v-if=\"closeButton && !isTipVariant\"\n class=\"b-alert__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n @click=\"onCloseButtonClick\"\n >\n <cross-small :svg-title=\"t('close')\" />\n </bento-button>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, useSlots } from 'vue';\n\n // Component\n import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { BentoButton } from '@/components/button';\n\n import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n // Utils\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const emit = defineEmits<{\n /\n Emits event when the alert is closed. `closeButton` must be `true`\n /\n (e: 'close-alert');\n }>();\n\n const props = withDefaults(\n defineProps<{\n /\n Adds a close button on the right side of the alert\n /\n closeButton?: boolean;\n\n /\n Type of a alert; set a distinctive icon and color. Defaults to highlight.\n * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n /\n type?: BentoAlertTypeOption \| `${BentoAlertTypeOption}`;\n\n /\n Variant for the alert\n * @values DEFAULT, TIP\n /\n variant?: BentoAlertVariant \| `${BentoAlertVariant}`;\n }>(),\n {\n closeButton: false,\n type: BentoAlertTypeOption.HIGHLIGHT,\n variant: BentoAlertVariant.DEFAULT,\n }\n );\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n const alertConditionalClasses = computed(() => ({\n [`b-alert--${props.type}`]: props.type,\n [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n }));\n\n const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n const iconComponent = computed(() => {\n switch (props.type) {\n case BentoAlertTypeOption.CRITICAL:\n return CrossCircle;\n case BentoAlertTypeOption.SUCCESS:\n return CheckedCircle;\n case BentoAlertTypeOption.WARNING:\n return Warning;\n case BentoAlertTypeOption.HIGHLIGHT:\n default:\n return Info;\n }\n });\n\n const descriptionTypography = computed(() => ({\n el: BentoTypographyElement.DIV,\n variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n wide: true,\n }));\n\n const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n const onCloseButtonClick = () => {\n emit(BentoAlertEvent.CLOSE_ALERT);\n };\n\n onMounted(() => {\n if (!slots.default && !slots.description) {\n throw new Error('Alert Component requires a title or a description');\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n An Alert component is used to display a persistent\n * notification containing information important to the user\n \n @example\n * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoAlert },\n * template: `\n * <bento-alert type=\"highlight\">\n * Title of the Alert\n * </bento-alert>\n * `\n * }\n */\n export default {\n i18n: { messages },\n name: 'bento-alert',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","onMounted"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;AChBR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAVZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,qCAAAD,EAAA,OAAA;AAAA;;QAAkE,MAAA;AAAA,QAAe,GAAA;AAAA;IAF7R,IAAA,GAAAL,CAAA;AAAA;;QAE8xC,IAAA,gCAAAK,EAAA;AAAA;;UAAgD,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAFr2C,IAAA,GAAAJ,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;GCqKIM,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;AApGA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GA0BA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAV,EAAA,CAAA,GAEAW,IAAAC,EAAA,MAAAL,EAAA,YAAAtB,EAAA,GAAA,GAEA4B,IAAAD,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAL,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAtB,EAAA,GAAA,EAAA,GAAA0B,EAAA;AAAA,IACkB,EAAA,GAGxDG,IAAAF,EAAA,MAAAH,EAAA,GAAAF,EAAA,IAAA,MAAA,CAAA,GAEAQ,IAAAH,EAAA,MAAA;AACI,cAAAL,EAAA,MAAA;AAAA,QAAoB,KAAApB,EAAA;AAEZ,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAEP,iBAAA8B;AAAA,QAAO,KAAA9B,EAAA;AAEP,iBAAA+B;AAAA,QAAO,KAAA/B,EAAA;AAAA,QACe;AAEtB,iBAAAgC;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAR,EAAA,OAAA;AAAA,MAA8C,IAAAS,EAAA;AAAA,MACf,SAAAV,EAAA,QAAAW,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAX,EAAA,MAAAL,EAAA,SAAApB,EAAA,YAAA,WAAA,OAAA,GAEAqC,IAAA,MAAA;AACI,MAAAnB,EAAAhB,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAoC,EAAA,MAAA;AACI,UAAA,CAAAxB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
1	+ {"version":3,"file":"alert.BffQNg4e.js","sources":["../../../vue2/src/components/alert/alert.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../../vue2/src/components/alert/alert.vue"],"sourcesContent":["/*\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoAlertVariant {\n DEFAULT = 'default',\n TIP = 'tip',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoAlertTypeOption {\n WARNING = 'warning',\n CRITICAL = 'critical',\n HIGHLIGHT = 'highlight',\n SUCCESS = 'success',\n}\n\n/\n @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n /\nexport enum BentoAlertEvent {\n CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n<style>\n @import '../css/main.css';\n</style>\n","<template>\n <div class=\"b-alert\" :role=\"computedRole\">\n <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n <div class=\"b-alert__icon\">\n <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n </div>\n\n <div class=\"b-alert__content\">\n <bento-typography\n v-if=\"hasSlot('default') && !isTipVariant\"\n class=\"b-alert__title\"\n el=\"div\"\n variant=\"body\"\n strongest\n wide\n >\n <slot />\n </bento-typography>\n\n <bento-typography\n v-if=\"hasSlot('description')\"\n class=\"b-alert__description\"\n v-bind=\"descriptionTypography\"\n data-testid=\"alert-description\"\n >\n <slot name=\"description\" />\n </bento-typography>\n\n <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n\n <bento-button\n v-if=\"closeButton && !isTipVariant\"\n class=\"b-alert__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n @click=\"onCloseButtonClick\"\n >\n <cross-small :svg-title=\"t('close')\" />\n </bento-button>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, useSlots } from 'vue';\n\n // Component\n import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { BentoButton } from '@/components/button';\n\n import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n // Utils\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const emit = defineEmits<{\n /\n Emits event when the alert is closed. `closeButton` must be `true`\n /\n (e: 'close-alert');\n }>();\n\n const props = withDefaults(\n defineProps<{\n /\n Adds a close button on the right side of the alert\n /\n closeButton?: boolean;\n\n /\n Type of a alert; set a distinctive icon and color. Defaults to highlight.\n * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n /\n type?: BentoAlertTypeOption \| `${BentoAlertTypeOption}`;\n\n /\n Variant for the alert\n * @values DEFAULT, TIP\n /\n variant?: BentoAlertVariant \| `${BentoAlertVariant}`;\n }>(),\n {\n closeButton: false,\n type: BentoAlertTypeOption.HIGHLIGHT,\n variant: BentoAlertVariant.DEFAULT,\n }\n );\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n const alertConditionalClasses = computed(() => ({\n [`b-alert--${props.type}`]: props.type,\n [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n }));\n\n const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n const iconComponent = computed(() => {\n switch (props.type) {\n case BentoAlertTypeOption.CRITICAL:\n return CrossCircle;\n case BentoAlertTypeOption.SUCCESS:\n return CheckedCircle;\n case BentoAlertTypeOption.WARNING:\n return Warning;\n case BentoAlertTypeOption.HIGHLIGHT:\n default:\n return Info;\n }\n });\n\n const descriptionTypography = computed(() => ({\n el: BentoTypographyElement.DIV,\n variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n wide: true,\n }));\n\n const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n const onCloseButtonClick = () => {\n emit(BentoAlertEvent.CLOSE_ALERT);\n };\n\n onMounted(() => {\n if (!slots.default && !slots.description) {\n throw new Error('Alert Component requires a title or a description');\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n An Alert component is used to display a persistent\n * notification containing information important to the user\n \n @example\n * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoAlert },\n * template: `\n * <bento-alert type=\"highlight\">\n * Title of the Alert\n * </bento-alert>\n * `\n * }\n */\n export default {\n i18n: { messages },\n name: 'bento-alert',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","onMounted"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;AChBR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAVZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,qCAAAD,EAAA,OAAA;AAAA;;QAAkE,MAAA;AAAA,QAAe,GAAA;AAAA;IAF7R,IAAA,GAAAL,CAAA;AAAA;;QAE8xC,IAAA,gCAAAK,EAAA;AAAA;;UAAgD,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAFr2C,IAAA,GAAAJ,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;GCqKIM,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;AApGA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GA0BA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAV,EAAA,CAAA,GAEAW,IAAAC,EAAA,MAAAL,EAAA,YAAAtB,EAAA,GAAA,GAEA4B,IAAAD,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAL,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAtB,EAAA,GAAA,EAAA,GAAA0B,EAAA;AAAA,IACkB,EAAA,GAGxDG,IAAAF,EAAA,MAAAH,EAAA,GAAAF,EAAA,IAAA,MAAA,CAAA,GAEAQ,IAAAH,EAAA,MAAA;AACI,cAAAL,EAAA,MAAA;AAAA,QAAoB,KAAApB,EAAA;AAEZ,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAEP,iBAAA8B;AAAA,QAAO,KAAA9B,EAAA;AAEP,iBAAA+B;AAAA,QAAO,KAAA/B,EAAA;AAAA,QACe;AAEtB,iBAAAgC;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAR,EAAA,OAAA;AAAA,MAA8C,IAAAS,EAAA;AAAA,MACf,SAAAV,EAAA,QAAAW,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAX,EAAA,MAAAL,EAAA,SAAApB,EAAA,YAAA,WAAA,OAAA,GAEAqC,IAAA,MAAA;AACI,MAAAnB,EAAAhB,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAoC,EAAA,MAAA;AACI,UAAA,CAAAxB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/chunks/{avatar.B0-9jC6H.js → avatar.DqdDHXay.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { ref as k, computed as r, defineComponent as _, toRefs as f, createElementBlock as i, openBlock as l, normalizeClass as R, createVNode as b, unref as n, withCtx as L, createTextVNode as h, toDisplayString as y, createBlock as B, createCommentVNode as S } from "vue";
-import { B as E } from "./typography.DN5eC5ch.js";
+import { ref as k, computed as r, defineComponent as _, toRefs as f, openBlock as l, createElementBlock as i, normalizeClass as R, createVNode as b, unref as n, withCtx as L, createTextVNode as h, toDisplayString as y, createBlock as B, createCommentVNode as S } from "vue";
+import { B as E } from "./typography.DNzU41ah.js";
 import { _ as g } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/avatar.css";
 const O = (a) => {
@@ -91,4 +91,4 @@ const N = ["src"], U = {
 export {
   V as B
 };
-//# sourceMappingURL=avatar.B0-9jC6H.js.map
+//# sourceMappingURL=avatar.DqdDHXay.js.map

package/dist/chunks/{avatar.B0-9jC6H.js.map → avatar.DqdDHXay.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.~~B0-9jC6H~~.js","sources":["../../../vue2/src/composables/initials.ts","../../../vue2/src/components/avatar/components/avatar-image/avatar-image.types.ts","../../../vue2/src/components/avatar/components/avatar-image/avatar-image.vue","../../../vue2/src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n /\nexport const useInitials = (username: MaybeRef<string \| null>): ComputedRef<string \| null> => {\n const computedUsername = ref(username);\n return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n LARGE = 'large',\n SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n BLUE = 'blue',\n GREEN = 'green',\n RED = 'red',\n YELLOW = 'yellow',\n}\n","<template>\n <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n <bento-typography el=\"span\" variant=\"body\" strongest>\n {{ initials }}\n </bento-typography>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, toRefs } from 'vue';\n import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n import { BentoTypography } from '@/components/typography';\n import { useInitials } from '@/composables';\n\n const props = withDefaults(\n defineProps<{\n /\n Avatar color. Defaults to yellow.\n /\n color?: BentoAvatarImageColor;\n\n /\n Image src to load the profile picture.\n /\n src?: string;\n\n /\n Name of the user that will be used to extract initials to display default value.\n * John => J\n * John Smith => JS\n * John Smith Doe => JD\n * John Smith Doe Holly => JH\n /\n username?: string;\n\n /\n Variants supported for small and large.\n * Default - large\n /\n variant?: BentoAvatarImageVariant;\n }>(),\n {\n color: BentoAvatarImageColor.YELLOW,\n src: null,\n username: null,\n variant: BentoAvatarImageVariant.LARGE,\n }\n );\n\n const { username } = toRefs(props);\n const initials = useInitials(username);\n\n const conditionalClasses = computed(() => ({\n [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n [`b-avatar-image--${props.color}`]: props.color,\n }));\n</script>\n\n<script lang=\"ts\">\n /\n Image used as user profile inside bento-avatar.\n \n @example\n * import { AvatarImage } from './components/avatar-image';\n \n export default {\n * components: { AvatarImage },\n * template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n * }\n /\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n <avatar-image\n :src=\"src\"\n :username=\"computedUsername\"\n :variant=\"BentoAvatarImageVariant.SMALL\"\n :color=\"avatarColor\"\n />\n <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n {{ username }}\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, toRefs } from 'vue';\n import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n import { BentoTypography } from '@/components/typography';\n import { useInitials } from '@/composables';\n\n const props = withDefaults(\n defineProps<{\n /\n Displays the user profile without the label.\n /\n iconOnly?: boolean;\n\n /\n Image src to load the profile picture.\n /\n src?: string;\n\n /\n Name of the user that will be used both in the label and to extract initials to display default value.\n * John => J\n * John Smith => JS\n * John Smith Doe => JD\n * John Smith Doe Holly => JH\n /\n username: string;\n }>(),\n {\n iconOnly: false,\n src: null,\n }\n );\n\n const { username } = toRefs(props);\n\n const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n const computedUsername = computed(() => (!props.src ? props.username : null));\n const initials = useInitials(username);\n\n // Returns the UTF-16 char code\n const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n // Returns a computed color based on the letter passed\n const avatarColor = computed(() => {\n const numberOfAlphabetLetters = 26;\n const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n if (charCode.value <= rangeStep) {\n return BentoAvatarImageColor.YELLOW;\n }\n if (charCode.value <= rangeStep 2) {\n return BentoAvatarImageColor.BLUE;\n }\n if (charCode.value <= rangeStep * 3) {\n return BentoAvatarImageColor.GREEN;\n }\n return BentoAvatarImageColor.RED;\n });\n</script>\n\n<script lang=\"ts\">\n /*\n Displays an user profile including an avatar and optionally a label.\n \n @example\n * import { BentoAvatar } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoAvatar },\n * template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n * }\n */\n export default {\n name: 'bento-avatar',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","props","__props","toRefs","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;;;;;GCoERE,IAAA,CAAA;;;;;;;;;;AAxDA,UAAAC,IAAAC,GAmCA,EAAA,UAAAV,EAAA,IAAAW,EAAAF,CAAA,GACAG,IAAAb,EAAAC,CAAA,GAEAa,IAAAV,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAK,EAAA,YAAAL,EAAA;AAAA,MACyD,CAAA,mBAAAK,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;sFC8B9CK,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;AArEA,UAAAL,IAAAC,GA2BA,EAAA,UAAAV,EAAA,IAAAW,EAAAF,CAAA,GAEAM,IAAAZ,EAAA,MAAAM,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAR,IAAAE,EAAA,MAAAM,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAG,IAAAb,EAAAC,CAAA,GAGAgB,IAAAb,EAAA,MAAAS,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAd,EAAA,MAAA;AAGI,YAAAe,IAAA,KADA,OAAA,KAAAZ,CAAA,EAAA;AAGA,aAAAU,EAAA,SAAAE,IACIZ,EAAA,SAEJU,EAAA,SAAAE,IAAA,IACIZ,EAAA,OAEJU,EAAA,SAAAE,IAAA,IACIZ,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"avatar.DqdDHXay.js","sources":["../../../vue2/src/composables/initials.ts","../../../vue2/src/components/avatar/components/avatar-image/avatar-image.types.ts","../../../vue2/src/components/avatar/components/avatar-image/avatar-image.vue","../../../vue2/src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n /\nexport const useInitials = (username: MaybeRef<string \| null>): ComputedRef<string \| null> => {\n const computedUsername = ref(username);\n return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n LARGE = 'large',\n SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n BLUE = 'blue',\n GREEN = 'green',\n RED = 'red',\n YELLOW = 'yellow',\n}\n","<template>\n <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n <bento-typography el=\"span\" variant=\"body\" strongest>\n {{ initials }}\n </bento-typography>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, toRefs } from 'vue';\n import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n import { BentoTypography } from '@/components/typography';\n import { useInitials } from '@/composables';\n\n const props = withDefaults(\n defineProps<{\n /\n Avatar color. Defaults to yellow.\n /\n color?: BentoAvatarImageColor;\n\n /\n Image src to load the profile picture.\n /\n src?: string;\n\n /\n Name of the user that will be used to extract initials to display default value.\n * John => J\n * John Smith => JS\n * John Smith Doe => JD\n * John Smith Doe Holly => JH\n /\n username?: string;\n\n /\n Variants supported for small and large.\n * Default - large\n /\n variant?: BentoAvatarImageVariant;\n }>(),\n {\n color: BentoAvatarImageColor.YELLOW,\n src: null,\n username: null,\n variant: BentoAvatarImageVariant.LARGE,\n }\n );\n\n const { username } = toRefs(props);\n const initials = useInitials(username);\n\n const conditionalClasses = computed(() => ({\n [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n [`b-avatar-image--${props.color}`]: props.color,\n }));\n</script>\n\n<script lang=\"ts\">\n /\n Image used as user profile inside bento-avatar.\n \n @example\n * import { AvatarImage } from './components/avatar-image';\n \n export default {\n * components: { AvatarImage },\n * template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n * }\n /\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n <avatar-image\n :src=\"src\"\n :username=\"computedUsername\"\n :variant=\"BentoAvatarImageVariant.SMALL\"\n :color=\"avatarColor\"\n />\n <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n {{ username }}\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, toRefs } from 'vue';\n import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n import { BentoTypography } from '@/components/typography';\n import { useInitials } from '@/composables';\n\n const props = withDefaults(\n defineProps<{\n /\n Displays the user profile without the label.\n /\n iconOnly?: boolean;\n\n /\n Image src to load the profile picture.\n /\n src?: string;\n\n /\n Name of the user that will be used both in the label and to extract initials to display default value.\n * John => J\n * John Smith => JS\n * John Smith Doe => JD\n * John Smith Doe Holly => JH\n /\n username: string;\n }>(),\n {\n iconOnly: false,\n src: null,\n }\n );\n\n const { username } = toRefs(props);\n\n const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n const computedUsername = computed(() => (!props.src ? props.username : null));\n const initials = useInitials(username);\n\n // Returns the UTF-16 char code\n const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n // Returns a computed color based on the letter passed\n const avatarColor = computed(() => {\n const numberOfAlphabetLetters = 26;\n const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n if (charCode.value <= rangeStep) {\n return BentoAvatarImageColor.YELLOW;\n }\n if (charCode.value <= rangeStep 2) {\n return BentoAvatarImageColor.BLUE;\n }\n if (charCode.value <= rangeStep * 3) {\n return BentoAvatarImageColor.GREEN;\n }\n return BentoAvatarImageColor.RED;\n });\n</script>\n\n<script lang=\"ts\">\n /*\n Displays an user profile including an avatar and optionally a label.\n \n @example\n * import { BentoAvatar } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoAvatar },\n * template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n * }\n */\n export default {\n name: 'bento-avatar',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","props","__props","toRefs","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;;;;;GCoERE,IAAA,CAAA;;;;;;;;;;AAxDA,UAAAC,IAAAC,GAmCA,EAAA,UAAAV,EAAA,IAAAW,EAAAF,CAAA,GACAG,IAAAb,EAAAC,CAAA,GAEAa,IAAAV,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAK,EAAA,YAAAL,EAAA;AAAA,MACyD,CAAA,mBAAAK,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;sFC8B9CK,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;AArEA,UAAAL,IAAAC,GA2BA,EAAA,UAAAV,EAAA,IAAAW,EAAAF,CAAA,GAEAM,IAAAZ,EAAA,MAAAM,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAR,IAAAE,EAAA,MAAAM,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAG,IAAAb,EAAAC,CAAA,GAGAgB,IAAAb,EAAA,MAAAS,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAd,EAAA,MAAA;AAGI,YAAAe,IAAA,KADA,OAAA,KAAAZ,CAAA,EAAA;AAGA,aAAAU,EAAA,SAAAE,IACIZ,EAAA,SAEJU,EAAA,SAAAE,IAAA,IACIZ,EAAA,OAEJU,EAAA,SAAAE,IAAA,IACIZ,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-button.DdNFlbgH.js → base-button.DgHMejMF.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { defineComponent as B, computed as C, ref as m, resolveComponent as y, createElementBlock as l, openBlock as r, normalizeClass as S, createCommentVNode as u, createBlock as k, renderSlot as d, withCtx as g } from "vue";
-import { B as h } from "./typography.DN5eC5ch.js";
+import { defineComponent as B, computed as C, ref as m, resolveComponent as y, openBlock as r, createElementBlock as l, normalizeClass as S, renderSlot as u, createCommentVNode as d, createBlock as k, withCtx as g } from "vue";
+import { B as h } from "./typography.DNzU41ah.js";
 import { u as L } from "./use-has-slot.B7eQSabc.js";
 import { _ as O } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/base-button.css";
@@ -88,8 +88,8 @@ function I(t, n, s, b, c, f) {
     onBlur: n[2] || (n[2] = (...a) => t.onBlurButton && t.onBlurButton(...a))
   }, [
     t.hasSlot("iconLeft") ? (r(), l("span", $, [
-      d(t.$slots, "iconLeft", {}, void 0, !0)
-    ])) : u("", !0),
+      u(t.$slots, "iconLeft", {}, void 0, !0)
+    ])) : d("", !0),
     t.hasSlot("default") ? (r(), k(i, {
       key: 1,
       el: "span",
@@ -98,13 +98,13 @@ function I(t, n, s, b, c, f) {
       class: "b-base-button__label"
     }, {
       default: g(() => [
-        d(t.$slots, "default", {}, void 0, !0)
+        u(t.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
-    })) : u("", !0),
+    })) : d("", !0),
     t.hasSlot("iconRight") ? (r(), l("span", F, [
-      d(t.$slots, "iconRight", {}, void 0, !0)
-    ])) : u("", !0)
+      u(t.$slots, "iconRight", {}, void 0, !0)
+    ])) : d("", !0)
   ], 42, _);
 }
 const T = /* @__PURE__ */ O(R, [["render", I], ["__scopeId", "data-v-ba55745c"]]);
@@ -112,4 +112,4 @@ export {
   T as B,
   e as a
 };
-//# sourceMappingURL=base-button.DdNFlbgH.js.map
+//# sourceMappingURL=base-button.DgHMejMF.js.map

package/dist/chunks/{base-button.DdNFlbgH.js.map → base-button.DgHMejMF.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-button.~~DdNFlbgH~~.js","sources":["../../../vue2/src/components/internal/base-button/base-button.types.ts","../../../vue2/src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n DESTRUCTIVE = 'critical',\n ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n BLUR = 'blur',\n CLICK = 'click',\n FOCUS = 'focus',\n KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n BUTTON = 'button',\n RESET = 'reset',\n SUBMIT = 'submit',\n}\n","<template>\n <button\n ref=\"bentoBaseButtonRef\"\n class=\"b-base-button\"\n :class=\"conditionalClasses\"\n :disabled=\"disabled\"\n :type=\"type\"\n :aria-expanded=\"ariaAttributes['aria-expanded']\"\n @click=\"onClickButton\"\n @focus=\"onFocusButton\"\n @blur=\"onBlurButton\"\n >\n <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n <slot name=\"iconLeft\" />\n </span>\n <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n <slot />\n </bento-typography>\n <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n <slot name=\"iconRight\" />\n </span>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref } from 'vue';\n import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n import { BentoTypography } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { Booleanish } from '@/types';\n\n /*\n Base button component to use as a base for all the various types of bento buttons. For internal use only.\n \n * @example\n * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n \n export default {\n * components: { BaseButton, YourImportedIcon },\n * props: {\n * text:\n * },\n * template: `\n * <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n * <template #iconLeft><your-imported-icon></template>\n * Button text\n * <template #iconRight><your-imported-icon></template>\n * </base-button>\n * `,\n * emits: [BentoButtonEvent.CLICK],\n * setup: (prps, { emit }) => {\n * const onClick = value => emit(BaseButtonEvent.CLICK, value);\n \n return {\n * onClick,\n * };\n * }\n * }\n /\n export default defineComponent({\n name: 'base-button',\n components: { BentoTypography },\n props: {\n /\n Disables button functionality\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n /\n Displays button as critical\n /\n critical: {\n type: Boolean,\n default: false,\n },\n /\n The default behavior of the button.\n * Possible values are: 'button', 'reset', 'submit'\n */\n type: {\n type: String as PropType<ButtonHTMLAttributes['type']>,\n default: 'button',\n },\n },\n emits: [\n BentoBaseButtonEvent.CLICK,\n BentoBaseButtonEvent.FOCUS,\n BentoBaseButtonEvent.BLUR,\n BentoBaseButtonEvent.KEYDOWN_ESC,\n ],\n setup(props, { slots, emit, attrs }) {\n const ariaAttributes = computed(() => ({\n 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n }));\n\n const bentoBaseButtonRef = ref(null);\n\n const conditionalClasses = computed(() => ({\n [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n }));\n\n const onClickButton = (e: MouseEvent) => {\n if (!props.disabled) {\n emit(BentoBaseButtonEvent.CLICK, e);\n } else {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onFocusButton = (e: FocusEvent) => {\n emit(BentoBaseButtonEvent.FOCUS, e);\n };\n\n const onBlurButton = (e: FocusEvent) => {\n emit(BentoBaseButtonEvent.BLUR, e);\n };\n\n return {\n // Values\n ariaAttributes,\n conditionalClasses,\n\n // Methods\n onClickButton,\n onFocusButton,\n onBlurButton,\n hasSlot: useHasSlot(slots),\n\n // Refs\n bentoBaseButtonRef,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot","_hoisted_1","openBlock","createElementBlock","normalizeClass","_ctx","_cache","args","renderSlot","createCommentVNode","createBlock","_component_bento_typography","_hoisted_3"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MAIU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAKM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,OAAA;AAAA,IACOJ,EAAA;AAAA,IACkBA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACzB,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACe;AAAA,KAAA,GAGtDC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAA2C,CAAA,kBAAAZ,EAAA,WAAA,EAAA,GAAAO,EAAA;AAAA,MAC2B,CAAA,kBAAAP,EAAA,SAAA,EAAA,GAAA,CAAAQ,EAAA;AAAA,IACD,EAAA;AAoBrE,WAAA;AAAA;AAAA,MAAO,gBAAAG;AAAA,MAEH,oBAAAK;AAAA;AAAA,MACA,eApBJ,CAAAC,MAAA;AACI,QAAAV,EAAA,YAGIU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIJ;AAAA,MAiBA,eAdJ,CAAAA,MAAA;AACI,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAkC;AAAA,MAclC,cAXJ,CAAAA,MAAA;AACI,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAiC;AAAA,MAWjC,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACyB,oBAAAM;AAAA,IAGzB;AAAA,EACJ;AAER,CAAA,GA1IJK,IAAA,CAAA,YAAA,QAAA,eAAA;EAY+C,KAAA;AAAA,EAA2B,OAAA;AAAA;;EAM1B,KAAA;AAAA,EAA4B,OAAA;AAAA;;;;AAf/D,SAAAC,EAAA,GAAAC,EAAA,UAAA;AAAA,IACGL,KAAAA;AAAAA,IACP,OAAAM,EAAA,CAAA,iBAAAC,EAAA,kBAAA,CAAA;AAAA,IACU,UAAAA,EAAA;AAAA,IACG,MAAAA,EAAA;AAAA,IACR,iBAAAA,EAAA,eAAA,eAAA;AAAA,IACE,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAF,EAAA,iBAAAA,EAAA,cAAA,GAAAE,CAAA;AAAA,IACW,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAF,EAAA,iBAAAA,EAAA,cAAA,GAAAE,CAAA;AAAA;EAEA,GAAA;AAAA;MAZ3BC,EAAAH,EAAA,QAAA,YAAA,CAAA,GAAA,QAAA,EAAA;AAAA,IAAA,CAAA,KAAAI,EAAA,IAAA,EAAA;AAAA,IAiB2BJ,EAAA,QAAA,SAAA,KAAAH,EAAA,GAAAQ,EAAAC,GAAA;AAAA,MAFkC,KAAA;AAAA,MAAC,IAAA;AAAA,MAAe,SAAA;AAAA,MAAe,UAAA;AAAA,MAf5F,OAAA;AAAA,IAAA,GAAA;AAAA;QAAAH,EAAAH,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAA,CAAA;AAAA,MAAA,GAAA;AAAA,IAAA,CAAA,KAAAI,EAAA,IAAA,EAAA;AAAA,IAkBQJ,EAAA,QAAA,WAAA,KAAAH,EAAA,GAAAC,EAAA,QAAAS,GAAA;AAAA,MAlBRJ,EAAAH,EAAA,QAAA,aAAA,CAAA,GAAA,QAAA,EAAA;AAAA,IAAA,CAAA,KAAAI,EAAA,IAAA,EAAA;AAAA;;;"}
1	+ {"version":3,"file":"base-button.DgHMejMF.js","sources":["../../../vue2/src/components/internal/base-button/base-button.types.ts","../../../vue2/src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n DESTRUCTIVE = 'critical',\n ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n BLUR = 'blur',\n CLICK = 'click',\n FOCUS = 'focus',\n KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n BUTTON = 'button',\n RESET = 'reset',\n SUBMIT = 'submit',\n}\n","<template>\n <button\n ref=\"bentoBaseButtonRef\"\n class=\"b-base-button\"\n :class=\"conditionalClasses\"\n :disabled=\"disabled\"\n :type=\"type\"\n :aria-expanded=\"ariaAttributes['aria-expanded']\"\n @click=\"onClickButton\"\n @focus=\"onFocusButton\"\n @blur=\"onBlurButton\"\n >\n <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n <slot name=\"iconLeft\" />\n </span>\n <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n <slot />\n </bento-typography>\n <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n <slot name=\"iconRight\" />\n </span>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref } from 'vue';\n import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n import { BentoTypography } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { Booleanish } from '@/types';\n\n /*\n Base button component to use as a base for all the various types of bento buttons. For internal use only.\n \n * @example\n * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n \n export default {\n * components: { BaseButton, YourImportedIcon },\n * props: {\n * text:\n * },\n * template: `\n * <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n * <template #iconLeft><your-imported-icon></template>\n * Button text\n * <template #iconRight><your-imported-icon></template>\n * </base-button>\n * `,\n * emits: [BentoButtonEvent.CLICK],\n * setup: (prps, { emit }) => {\n * const onClick = value => emit(BaseButtonEvent.CLICK, value);\n \n return {\n * onClick,\n * };\n * }\n * }\n /\n export default defineComponent({\n name: 'base-button',\n components: { BentoTypography },\n props: {\n /\n Disables button functionality\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n /\n Displays button as critical\n /\n critical: {\n type: Boolean,\n default: false,\n },\n /\n The default behavior of the button.\n * Possible values are: 'button', 'reset', 'submit'\n */\n type: {\n type: String as PropType<ButtonHTMLAttributes['type']>,\n default: 'button',\n },\n },\n emits: [\n BentoBaseButtonEvent.CLICK,\n BentoBaseButtonEvent.FOCUS,\n BentoBaseButtonEvent.BLUR,\n BentoBaseButtonEvent.KEYDOWN_ESC,\n ],\n setup(props, { slots, emit, attrs }) {\n const ariaAttributes = computed(() => ({\n 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n }));\n\n const bentoBaseButtonRef = ref(null);\n\n const conditionalClasses = computed(() => ({\n [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n }));\n\n const onClickButton = (e: MouseEvent) => {\n if (!props.disabled) {\n emit(BentoBaseButtonEvent.CLICK, e);\n } else {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onFocusButton = (e: FocusEvent) => {\n emit(BentoBaseButtonEvent.FOCUS, e);\n };\n\n const onBlurButton = (e: FocusEvent) => {\n emit(BentoBaseButtonEvent.BLUR, e);\n };\n\n return {\n // Values\n ariaAttributes,\n conditionalClasses,\n\n // Methods\n onClickButton,\n onFocusButton,\n onBlurButton,\n hasSlot: useHasSlot(slots),\n\n // Refs\n bentoBaseButtonRef,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot","_hoisted_1","openBlock","createElementBlock","normalizeClass","_ctx","_cache","args","renderSlot","createCommentVNode","createBlock","_component_bento_typography","_hoisted_3"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MAIU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAKM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,OAAA;AAAA,IACOJ,EAAA;AAAA,IACkBA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACzB,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACe;AAAA,KAAA,GAGtDC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAA2C,CAAA,kBAAAZ,EAAA,WAAA,EAAA,GAAAO,EAAA;AAAA,MAC2B,CAAA,kBAAAP,EAAA,SAAA,EAAA,GAAA,CAAAQ,EAAA;AAAA,IACD,EAAA;AAoBrE,WAAA;AAAA;AAAA,MAAO,gBAAAG;AAAA,MAEH,oBAAAK;AAAA;AAAA,MACA,eApBJ,CAAAC,MAAA;AACI,QAAAV,EAAA,YAGIU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIJ;AAAA,MAiBA,eAdJ,CAAAA,MAAA;AACI,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAkC;AAAA,MAclC,cAXJ,CAAAA,MAAA;AACI,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAiC;AAAA,MAWjC,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACyB,oBAAAM;AAAA,IAGzB;AAAA,EACJ;AAER,CAAA,GA1IJK,IAAA,CAAA,YAAA,QAAA,eAAA;EAY+C,KAAA;AAAA,EAA2B,OAAA;AAAA;;EAM1B,KAAA;AAAA,EAA4B,OAAA;AAAA;;;;AAf/D,SAAAC,EAAA,GAAAC,EAAA,UAAA;AAAA,IACGL,KAAAA;AAAAA,IACP,OAAAM,EAAA,CAAA,iBAAAC,EAAA,kBAAA,CAAA;AAAA,IACU,UAAAA,EAAA;AAAA,IACG,MAAAA,EAAA;AAAA,IACR,iBAAAA,EAAA,eAAA,eAAA;AAAA,IACE,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAF,EAAA,iBAAAA,EAAA,cAAA,GAAAE,CAAA;AAAA,IACW,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAF,EAAA,iBAAAA,EAAA,cAAA,GAAAE,CAAA;AAAA;EAEA,GAAA;AAAA;MAZ3BC,EAAAH,EAAA,QAAA,YAAA,CAAA,GAAA,QAAA,EAAA;AAAA,IAAA,CAAA,KAAAI,EAAA,IAAA,EAAA;AAAA,IAiB2BJ,EAAA,QAAA,SAAA,KAAAH,EAAA,GAAAQ,EAAAC,GAAA;AAAA,MAFkC,KAAA;AAAA,MAAC,IAAA;AAAA,MAAe,SAAA;AAAA,MAAe,UAAA;AAAA,MAf5F,OAAA;AAAA,IAAA,GAAA;AAAA;QAAAH,EAAAH,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAA,CAAA;AAAA,MAAA,GAAA;AAAA,IAAA,CAAA,KAAAI,EAAA,IAAA,EAAA;AAAA,IAkBQJ,EAAA,QAAA,WAAA,KAAAH,EAAA,GAAAC,EAAA,QAAAS,GAAA;AAAA,MAlBRJ,EAAAH,EAAA,QAAA,aAAA,CAAA,GAAA,QAAA,EAAA;AAAA,IAAA,CAAA,KAAAI,EAAA,IAAA,EAAA;AAAA;;;"}