@adyen/bento-vue2 1.8.0 → 1.9.0

package/dist/assets/index6.css

@@ -1 +1 @@
-.b-avatar-image[data-v-46be3f6e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:50%;height:var(--b-avatar-image-height);line-height:100%;overflow:hidden;width:var(--b-avatar-image-width)}.b-avatar-image[data-v-46be3f6e],.b-avatar-image[data-v-46be3f6e]:before,.b-avatar-image[data-v-46be3f6e]:after{box-sizing:border-box}.b-avatar-image *[data-v-46be3f6e],.b-avatar-image *[data-v-46be3f6e]:before,.b-avatar-image *[data-v-46be3f6e]:after{box-sizing:border-box}.b-avatar-image[data-v-46be3f6e] ::-webkit-scrollbar{height:14px;width:14px}.b-avatar-image[data-v-46be3f6e] ::-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-avatar-image--small[data-v-46be3f6e]{height:var(--b-avatar-image-small-height);width:var(--b-avatar-image-small-width)}.b-avatar-image--yellow[data-v-46be3f6e]{background-color:var(--b-avatar-image-yellow-background-color);color:var(--b-avatar-image-yellow-color)}.b-avatar-image--blue[data-v-46be3f6e]{background-color:var(--b-avatar-image-blue-background-color);color:var(--b-avatar-image-blue-color)}.b-avatar-image--green[data-v-46be3f6e]{background-color:var(--b-avatar-image-green-background-color);color:var(--b-avatar-image-green-color)}.b-avatar-image--red[data-v-46be3f6e]{background-color:var(--b-avatar-image-red-background-color);color:var(--b-avatar-image-red-color)}.b-avatar-image__image[data-v-46be3f6e]{height:100%;object-fit:cover;width:100%}.b-avatar-image__default[data-v-46be3f6e]{align-items:center;display:flex;height:100%;justify-content:center;width:100%}
+.b-action-bar[data-v-d2278799]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;bottom:var(--b-action-bar-bottom);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;width:100%;z-index:var(--b-action-bar-z-index)}.b-action-bar[data-v-d2278799],.b-action-bar[data-v-d2278799]:before,.b-action-bar[data-v-d2278799]:after{box-sizing:border-box}.b-action-bar *[data-v-d2278799],.b-action-bar *[data-v-d2278799]:before,.b-action-bar *[data-v-d2278799]:after{box-sizing:border-box}.b-action-bar[data-v-d2278799] ::-webkit-scrollbar{height:14px;width:14px}.b-action-bar[data-v-d2278799] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-action-bar__container[data-v-d2278799]{align-items:center;background-color:var(--b-action-bar-container-background-color);border-radius:var(--b-action-bar-container-border-radius);color:var(--b-action-bar-container-color);display:flex;padding:var(--b-action-bar-container-padding);pointer-events:all;width:var(--b-action-bar-container-width)}@media (min-width: 500px){.b-action-bar__container[data-v-d2278799]{width:auto}}.b-action-bar__close-button[data-v-d2278799]{align-items:center;display:flex;margin-right:var(--b-action-bar-close-button-margin-right-mobile)}@media (min-width: 500px){.b-action-bar__close-button[data-v-d2278799]{margin-right:var(--b-action-bar-close-button-margin-right)}}.b-action-bar__selection[data-v-d2278799]{margin-right:var(--b-action-bar-selection-margin-right-mobile);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-legacy-theme .b-action-bar__selection[data-v-d2278799]{font-weight:600}@media (min-width: 500px){.b-action-bar__selection[data-v-d2278799]{margin-right:var(--b-action-bar-selection-margin-right);width:120px}}.b-action-bar__actions[data-v-d2278799]{container-type:normal}.b-action-bar__actions[data-v-d2278799] .b-button-actions__container-wrapper{flex-direction:row}.b-action-bar--extra-spacing[data-v-d2278799]{bottom:var(--b-action-bar-bottom-extra-spacing)}.b-action-bar__animation-enter-active[data-v-d2278799]{animation:fade-in-uwdq6x2-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-linear),enter-uwdq6x2-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-enter),scale-up-uwdq6x2-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-uwdq6x2-d2278799{0%{opacity:0}to{opacity:1}}@keyframes scale-up-uwdq6x2-d2278799{0%{scale:.9}to{scale:1}}@keyframes enter-uwdq6x2-d2278799{0%{translate:0 8px}to{translate:0 0}}.b-action-bar__animation-leave-active[data-v-d2278799]{animation:fade-out-uwdq703-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-linear),exit-uwdq703-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-exit),scale-down-uwdq703-d2278799 var(--b-action-bar-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-uwdq703-d2278799{0%{opacity:1}to{opacity:0}}@keyframes scale-down-uwdq703-d2278799{0%{scale:1}to{scale:.9}}@keyframes exit-uwdq703-d2278799{0%{translate:0 0}to{translate:0 8px}}

package/dist/assets/index7.css

@@ -1 +1 @@
-.b-button-actions[data-v-80cace4c]{container-type:inline-size;flex-grow:1}.b-button-actions__container-wrapper[data-v-80cace4c]{display:flex;flex-direction:column;gap:var(--b-button-actions-vertical-stack-row-gap)}.b-button-actions__button-wrapper>*[data-v-80cace4c]{width:100%}@container (min-width: 242px){.b-button-actions--buttons-start[data-v-80cace4c]{flex-direction:row;justify-content:start}.b-button-actions--buttons-end[data-v-80cace4c]{column-gap:var(--b-button-actions-buttons-end-column-gap);flex-direction:row;justify-content:flex-end}.b-button-actions--fill-container[data-v-80cace4c]{column-gap:var(--b-button-actions-fill-container-column-gap);display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.b-button-actions--space-between[data-v-80cace4c]{flex-direction:unset;justify-content:space-between}}
+.b-card[data-v-f25b077b]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-card-background-color);border:var(--b-card-border-width) solid var(--b-card-border-color);border-radius:var(--b-card-border-radius)}.b-card[data-v-f25b077b],.b-card[data-v-f25b077b]:before,.b-card[data-v-f25b077b]:after{box-sizing:border-box}.b-card *[data-v-f25b077b],.b-card *[data-v-f25b077b]:before,.b-card *[data-v-f25b077b]:after{box-sizing:border-box}.b-card[data-v-f25b077b] ::-webkit-scrollbar{height:14px;width:14px}.b-card[data-v-f25b077b] ::-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-card--secondary[data-v-f25b077b]{background-color:var(--b-card-secondary-background-color)}.b-legacy-theme .b-card--secondary[data-v-f25b077b]{border-color:var(--b-card-secondary-border-color)}@media (hover: hover){.b-card--secondary.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:hover{background-color:var(--b-card-secondary-header-hover-background-color)}}.b-card--secondary.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:focus-visible{background-color:var(--b-card-secondary-header-focus-background-color)}.b-card--secondary.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:active{background-color:var(--b-card-secondary-header-active-background-color)}@media (hover: hover){.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:hover{background-color:var(--b-card-header-hover-background-color)}}.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:focus-visible{animation:outer-ring-default-f25b077b 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);background-color:var(--b-card-header-focus-background-color);outline:none}@keyframes outer-ring-default-f25b077b{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-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:active{background-color:var(--b-card-header-active-background-color)}.b-card--expandable .b-card__header[data-v-f25b077b]{cursor:pointer}.b-card--expandable .b-card__header[data-v-f25b077b]:focus-visible{outline:none}.b-card--expandable .b-card__description[data-v-f25b077b]{margin-left:var(--b-card-description-margin-left)}.b-card--expandable .b-card__body[data-v-f25b077b]{background-color:var(--b-card-header-margin-top)}.b-card--disabled .b-card__header[data-v-f25b077b]{color:var(--b-card-disabled-color);cursor:not-allowed}.b-card__image[data-v-f25b077b]{border-top-left-radius:var(--b-card-border-radius);border-top-right-radius:var(--b-card-border-radius);overflow:hidden}.b-card__image[data-v-f25b077b] img{width:100%}.b-card__header[data-v-f25b077b]{border-radius:var(--b-card-header-border-radius);color:var(--b-card-header-color);display:flex;gap:18px;padding:var(--b-card-header-padding)}.b-card__header--expandable[data-v-f25b077b]{padding-bottom:var(--b-card-expandable-header-padding-bottom)}.b-card__header--without-body[data-v-f25b077b]{padding-bottom:var(--b-card-header-padding-bottom)}.b-card__header-wrapper[data-v-f25b077b]{display:flex;flex:1;flex-direction:column;gap:var(--b-spacer-020);overflow:hidden}.b-card__header-slot-wrapper[data-v-f25b077b]{align-items:center;display:flex;gap:var(--b-spacer-070);justify-content:space-between;min-height:36px}.b-card__title-wrapper[data-v-f25b077b]{display:flex;gap:var(--b-card-title-wrapper-gap)}.b-card__title-wrapper--truncated[data-v-f25b077b]{overflow:hidden;white-space:nowrap}.b-card__title-wrapper--truncated .b-card__title[data-v-f25b077b]{overflow:hidden;text-overflow:ellipsis}.b-card__toggle[data-v-f25b077b]{align-items:center;display:flex;height:var(--b-card-toggle-height)}.b-card__toggle--small-text[data-v-f25b077b]{height:var(--b-card-toggle-small-text-height)}.b-card__content[data-v-f25b077b]{padding:var(--b-card-content-padding)}.b-card__content--without-header[data-v-f25b077b]{padding-top:var(--b-card-content-padding-top)}.b-card__content--expandable[data-v-f25b077b]{padding-top:0}.b-card__description[data-v-f25b077b]{color:var(--b-card-description-color)}.b-card__body[data-v-f25b077b]{display:flex;flex-direction:column;gap:16px;margin-top:-4px;padding:var(--b-card-body-padding)}.b-card__body--without-header[data-v-f25b077b]{padding-top:var(--b-card-body-padding-top)}.b-card__body--expandable[data-v-f25b077b]{padding-top:var(--b-card-body-expandable-padding-top)}.b-card__actions--without-content[data-v-f25b077b]{padding-top:var(--b-card-actions-padding-top)}.b-card__actions--without-content .b-card__header[data-v-f25b077b]{padding-bottom:var(--b-card-header-padding-bottom)}.b-card__actions--without-content-and-with-header[data-v-f25b077b]{padding-top:var(--b-card-actions-without-content-padding-top)}.b-card__animation-enter-active[data-v-f25b077b]{animation:fade-in-uwdq71x-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-linear),enter-uwdq71x-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-enter),scale-up-uwdq71x-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-linear);overflow:hidden;transition:max-height var(--b-card-animation-duration) var(--b-card-animation-easing)}@keyframes fade-in-uwdq71x-f25b077b{0%{opacity:0}to{opacity:1}}@keyframes scale-up-uwdq71x-f25b077b{0%{scale:1}to{scale:1}}@keyframes enter-uwdq71x-f25b077b{0%{translate:0 -8px}to{translate:0 0}}.b-card__animation-leave-active[data-v-f25b077b]{animation:fade-out-uwdq75k-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-linear),exit-uwdq75k-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-exit),scale-down-uwdq75k-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-linear);max-height:0!important;overflow:hidden;transition:max-height var(--b-card-animation-duration) var(--b-card-animation-easing)}@keyframes fade-out-uwdq75k-f25b077b{0%{opacity:1}to{opacity:0}}@keyframes scale-down-uwdq75k-f25b077b{0%{scale:1}to{scale:1}}@keyframes exit-uwdq75k-f25b077b{0%{translate:0 0}to{translate:0 -8px}}

package/dist/assets/index8.css

@@ -1 +1 @@
-.b-card[data-v-f25b077b]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-card-background-color);border:var(--b-card-border-width) solid var(--b-card-border-color);border-radius:var(--b-card-border-radius)}.b-card[data-v-f25b077b],.b-card[data-v-f25b077b]:before,.b-card[data-v-f25b077b]:after{box-sizing:border-box}.b-card *[data-v-f25b077b],.b-card *[data-v-f25b077b]:before,.b-card *[data-v-f25b077b]:after{box-sizing:border-box}.b-card[data-v-f25b077b] ::-webkit-scrollbar{height:14px;width:14px}.b-card[data-v-f25b077b] ::-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-card--secondary[data-v-f25b077b]{background-color:var(--b-card-secondary-background-color)}.b-legacy-theme .b-card--secondary[data-v-f25b077b]{border-color:var(--b-card-secondary-border-color)}@media (hover: hover){.b-card--secondary.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:hover{background-color:var(--b-card-secondary-header-hover-background-color)}}.b-card--secondary.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:focus-visible{background-color:var(--b-card-secondary-header-focus-background-color)}.b-card--secondary.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:active{background-color:var(--b-card-secondary-header-active-background-color)}@media (hover: hover){.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:hover{background-color:var(--b-card-header-hover-background-color)}}.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:focus-visible{animation:outer-ring-default-f25b077b 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);background-color:var(--b-card-header-focus-background-color);outline:none}@keyframes outer-ring-default-f25b077b{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-card--expandable:not(.b-card--disabled) .b-card__header[data-v-f25b077b]:active{background-color:var(--b-card-header-active-background-color)}.b-card--expandable .b-card__header[data-v-f25b077b]{cursor:pointer}.b-card--expandable .b-card__header[data-v-f25b077b]:focus-visible{outline:none}.b-card--expandable .b-card__description[data-v-f25b077b]{margin-left:var(--b-card-description-margin-left)}.b-card--expandable .b-card__body[data-v-f25b077b]{background-color:var(--b-card-header-margin-top)}.b-card--disabled .b-card__header[data-v-f25b077b]{color:var(--b-card-disabled-color);cursor:not-allowed}.b-card__image[data-v-f25b077b]{border-top-left-radius:var(--b-card-border-radius);border-top-right-radius:var(--b-card-border-radius);overflow:hidden}.b-card__image[data-v-f25b077b] img{width:100%}.b-card__header[data-v-f25b077b]{border-radius:var(--b-card-header-border-radius);color:var(--b-card-header-color);display:flex;gap:18px;padding:var(--b-card-header-padding)}.b-card__header--expandable[data-v-f25b077b]{padding-bottom:var(--b-card-expandable-header-padding-bottom)}.b-card__header--without-body[data-v-f25b077b]{padding-bottom:var(--b-card-header-padding-bottom)}.b-card__header-wrapper[data-v-f25b077b]{display:flex;flex:1;flex-direction:column;gap:var(--b-spacer-020);overflow:hidden}.b-card__header-slot-wrapper[data-v-f25b077b]{align-items:center;display:flex;gap:var(--b-spacer-070);justify-content:space-between;min-height:36px}.b-card__title-wrapper[data-v-f25b077b]{display:flex;gap:var(--b-card-title-wrapper-gap)}.b-card__title-wrapper--truncated[data-v-f25b077b]{overflow:hidden;white-space:nowrap}.b-card__title-wrapper--truncated .b-card__title[data-v-f25b077b]{overflow:hidden;text-overflow:ellipsis}.b-card__toggle[data-v-f25b077b]{align-items:center;display:flex;height:var(--b-card-toggle-height)}.b-card__toggle--small-text[data-v-f25b077b]{height:var(--b-card-toggle-small-text-height)}.b-card__content[data-v-f25b077b]{padding:var(--b-card-content-padding)}.b-card__content--without-header[data-v-f25b077b]{padding-top:var(--b-card-content-padding-top)}.b-card__content--expandable[data-v-f25b077b]{padding-top:0}.b-card__description[data-v-f25b077b]{color:var(--b-card-description-color)}.b-card__body[data-v-f25b077b]{display:flex;flex-direction:column;gap:16px;margin-top:-4px;padding:var(--b-card-body-padding)}.b-card__body--without-header[data-v-f25b077b]{padding-top:var(--b-card-body-padding-top)}.b-card__body--expandable[data-v-f25b077b]{padding-top:var(--b-card-body-expandable-padding-top)}.b-card__actions--without-content[data-v-f25b077b]{padding-top:var(--b-card-actions-padding-top)}.b-card__actions--without-content .b-card__header[data-v-f25b077b]{padding-bottom:var(--b-card-header-padding-bottom)}.b-card__actions--without-content-and-with-header[data-v-f25b077b]{padding-top:var(--b-card-actions-without-content-padding-top)}.b-card__animation-enter-active[data-v-f25b077b]{animation:fade-in-u0cacu3-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-linear),enter-u0cacu3-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-enter),scale-up-u0cacu3-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-linear);overflow:hidden;transition:max-height var(--b-card-animation-duration) var(--b-card-animation-easing)}@keyframes fade-in-u0cacu3-f25b077b{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u0cacu3-f25b077b{0%{scale:1}to{scale:1}}@keyframes enter-u0cacu3-f25b077b{0%{translate:0 -8px}to{translate:0 0}}.b-card__animation-leave-active[data-v-f25b077b]{animation:fade-out-u0cacwn-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-linear),exit-u0cacwn-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-exit),scale-down-u0cacwn-f25b077b var(--b-card-animation-duration) var(--b-animation-easing-linear);max-height:0!important;overflow:hidden;transition:max-height var(--b-card-animation-duration) var(--b-card-animation-easing)}@keyframes fade-out-u0cacwn-f25b077b{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u0cacwn-f25b077b{0%{scale:1}to{scale:1}}@keyframes exit-u0cacwn-f25b077b{0%{translate:0 0}to{translate:0 -8px}}
+.b-button-actions[data-v-80cace4c]{container-type:inline-size;flex-grow:1}.b-button-actions__container-wrapper[data-v-80cace4c]{display:flex;flex-direction:column;gap:var(--b-button-actions-vertical-stack-row-gap)}.b-button-actions__button-wrapper>*[data-v-80cace4c]{width:100%}@container (min-width: 242px){.b-button-actions--buttons-start[data-v-80cace4c]{flex-direction:row;justify-content:start}.b-button-actions--buttons-end[data-v-80cace4c]{column-gap:var(--b-button-actions-buttons-end-column-gap);flex-direction:row;justify-content:flex-end}.b-button-actions--fill-container[data-v-80cace4c]{column-gap:var(--b-button-actions-fill-container-column-gap);display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.b-button-actions--space-between[data-v-80cace4c]{flex-direction:unset;justify-content:space-between}}

package/dist/assets/index9.css

@@ -1 +1 @@
-.b-checkbox-group[data-v-35edc089]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-checkbox-group[data-v-35edc089],.b-checkbox-group[data-v-35edc089]:before,.b-checkbox-group[data-v-35edc089]:after{box-sizing:border-box}.b-checkbox-group *[data-v-35edc089],.b-checkbox-group *[data-v-35edc089]:before,.b-checkbox-group *[data-v-35edc089]:after{box-sizing:border-box}.b-checkbox-group[data-v-35edc089] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-group[data-v-35edc089] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-checkbox-group__checkboxes[data-v-35edc089]{display:flex;flex-direction:column;gap:var(--b-checkbox-group-checkboxes-vertical-gap)}.b-checkbox-group__checkboxes--horizontal[data-v-35edc089]{flex-flow:row wrap;gap:var(--b-checkbox-group-checkboxes-vertical-gap) var(--b-checkbox-group-checkboxes-horizontal-gap)}.b-checkbox-group__error-message[data-v-35edc089]{margin-top:var(--b-checkbox-group-error-message-margin-top)}
+.b-avatar-image[data-v-46be3f6e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:50%;height:var(--b-avatar-image-height);line-height:100%;overflow:hidden;width:var(--b-avatar-image-width)}.b-avatar-image[data-v-46be3f6e],.b-avatar-image[data-v-46be3f6e]:before,.b-avatar-image[data-v-46be3f6e]:after{box-sizing:border-box}.b-avatar-image *[data-v-46be3f6e],.b-avatar-image *[data-v-46be3f6e]:before,.b-avatar-image *[data-v-46be3f6e]:after{box-sizing:border-box}.b-avatar-image[data-v-46be3f6e] ::-webkit-scrollbar{height:14px;width:14px}.b-avatar-image[data-v-46be3f6e] ::-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-avatar-image--small[data-v-46be3f6e]{height:var(--b-avatar-image-small-height);width:var(--b-avatar-image-small-width)}.b-avatar-image--yellow[data-v-46be3f6e]{background-color:var(--b-avatar-image-yellow-background-color);color:var(--b-avatar-image-yellow-color)}.b-avatar-image--blue[data-v-46be3f6e]{background-color:var(--b-avatar-image-blue-background-color);color:var(--b-avatar-image-blue-color)}.b-avatar-image--green[data-v-46be3f6e]{background-color:var(--b-avatar-image-green-background-color);color:var(--b-avatar-image-green-color)}.b-avatar-image--red[data-v-46be3f6e]{background-color:var(--b-avatar-image-red-background-color);color:var(--b-avatar-image-red-color)}.b-avatar-image__image[data-v-46be3f6e]{height:100%;object-fit:cover;width:100%}.b-avatar-image__default[data-v-46be3f6e]{align-items:center;display:flex;height:100%;justify-content:center;width:100%}

package/dist/assets/listbox.css

@@ -1 +1 @@
-.b-listbox-option[data-v-d7fb415c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;overflow-wrap:anywhere;padding:var(--b-listbox-option-padding)}.b-listbox-option[data-v-d7fb415c],.b-listbox-option[data-v-d7fb415c]:before,.b-listbox-option[data-v-d7fb415c]:after{box-sizing:border-box}.b-listbox-option[data-v-d7fb415c] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-d7fb415c] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media (hover: hover){.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-hover-background-color)}.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-hover-font-color)}.b-legacy-theme .b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-hover-font-color)}}.b-listbox-option[data-v-d7fb415c]:focus-visible{outline:none}.b-listbox-option[data-v-d7fb415c]:focus-visible:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-focus-background-color);color:var(--b-listbox-option-focus-font-color)}.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-active-background-color)}.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-active-font-color)}.b-legacy-theme .b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-active-description-color)}.b-listbox-option[data-v-d7fb415c] .b-listbox-single-select-option__text,.b-listbox-option[data-v-d7fb415c] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-d7fb415c] .b-listbox-single-select-option__description,.b-listbox-option[data-v-d7fb415c] .b-listbox-multi-select__option-description{margin-top:var(--b-listbox-option-description-margin-top)}.b-listbox-option[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-listbox-option-description-color)}.b-listbox-option--disabled[data-v-d7fb415c]{cursor:not-allowed}.b-listbox-option--disabled[data-v-d7fb415c],.b-listbox-option--disabled[data-v-d7fb415c] .b-avatar__label,.b-listbox-option--disabled[data-v-d7fb415c] .b-country__label,.b-listbox-option--disabled[data-v-d7fb415c] .b-payment-method__label{color:var(--b-listbox-option-disabled-font-color)}.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-selected-background-color)}.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-selected-font-color)}.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-selected-description-color)}.b-listbox-single-select-option[data-v-092ed5ee]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-092ed5ee]{align-items:center;display:flex;margin-left:var(--b-listbox-single-select-check-icon-margin)}.b-listbox-multi-select-category[data-v-360ce3ac]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-360ce3ac],.b-listbox-multi-select-category[data-v-360ce3ac]:before,.b-listbox-multi-select-category[data-v-360ce3ac]:after{box-sizing:border-box}.b-listbox-multi-select-category *[data-v-360ce3ac],.b-listbox-multi-select-category *[data-v-360ce3ac]:before,.b-listbox-multi-select-category *[data-v-360ce3ac]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-360ce3ac] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-360ce3ac] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-multi-select-category--disabled[data-v-360ce3ac]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-360ce3ac]{color:var(--b-listbox-multi-select-category-disabled-label-text-color)}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-chevron[data-v-360ce3ac]{cursor:pointer}.b-listbox-multi-select-category__label[data-v-360ce3ac]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-360ce3ac]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-360ce3ac]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-360ce3ac]{display:flex;gap:var(--b-listbox-multi-select-category-option-gap)}.b-listbox-multi-select-options[data-v-23f75bdb]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox-multi-select-options[data-v-23f75bdb],.b-listbox-multi-select-options[data-v-23f75bdb]:before,.b-listbox-multi-select-options[data-v-23f75bdb]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-23f75bdb] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-23f75bdb] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-multi-select-options__category-option[data-v-23f75bdb]{padding-left:var(--b-listbox-multi-select-options-category-option-padding-left)}.b-listbox-multi-select[data-v-70173dcf]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-70173dcf],.b-listbox-multi-select[data-v-70173dcf]:before,.b-listbox-multi-select[data-v-70173dcf]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-70173dcf] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-70173dcf] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-multi-select__divider[data-v-70173dcf]{background-color:var(--b-listbox-multi-select-divider-background-color);border:0;height:1px;margin:var(--b-listbox-multi-select-divider-margin)}.b-listbox-multi-select__option[data-v-70173dcf]{display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox[data-v-d5d56fed]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-listbox-background-color);overflow-y:auto;padding:var(--b-listbox-padding)}.b-listbox[data-v-d5d56fed],.b-listbox[data-v-d5d56fed]:before,.b-listbox[data-v-d5d56fed]:after{box-sizing:border-box}.b-listbox *[data-v-d5d56fed],.b-listbox *[data-v-d5d56fed]:before,.b-listbox *[data-v-d5d56fed]:after{box-sizing:border-box}.b-listbox[data-v-d5d56fed] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-d5d56fed] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox__empty-search-message[data-v-d5d56fed]{color:var(--b-listbox-empty-search-message-color);padding:var(--b-listbox-empty-search-message-padding);text-align:center}.b-listbox__lazy-load[data-v-d5d56fed]{display:flex;justify-content:center;margin:var(--b-listbox-lazy-load-margin)}
+.b-listbox-option[data-v-d7fb415c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;overflow-wrap:anywhere;padding:var(--b-listbox-option-padding)}.b-listbox-option[data-v-d7fb415c],.b-listbox-option[data-v-d7fb415c]:before,.b-listbox-option[data-v-d7fb415c]:after{box-sizing:border-box}.b-listbox-option[data-v-d7fb415c] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-d7fb415c] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media (hover: hover){.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-hover-background-color)}.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-hover-font-color)}.b-legacy-theme .b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-d7fb415c]:hover:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-hover-font-color)}}.b-listbox-option[data-v-d7fb415c]:focus-visible{outline:none}.b-listbox-option[data-v-d7fb415c]:focus-visible:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-focus-background-color);color:var(--b-listbox-option-focus-font-color)}.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-active-background-color)}.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-active-font-color)}.b-legacy-theme .b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-d7fb415c]:active:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-active-description-color)}.b-listbox-option[data-v-d7fb415c] .b-listbox-single-select-option__text,.b-listbox-option[data-v-d7fb415c] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-d7fb415c] .b-listbox-single-select-option__description,.b-listbox-option[data-v-d7fb415c] .b-listbox-multi-select__option-description{margin-top:var(--b-listbox-option-description-margin-top)}.b-listbox-option[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-listbox-option-description-color)}.b-listbox-option--disabled[data-v-d7fb415c]{cursor:not-allowed}.b-listbox-option--disabled[data-v-d7fb415c],.b-listbox-option--disabled[data-v-d7fb415c] .b-avatar__label,.b-listbox-option--disabled[data-v-d7fb415c] .b-country__label,.b-listbox-option--disabled[data-v-d7fb415c] .b-payment-method__label{color:var(--b-listbox-option-disabled-font-color)}.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-selected-background-color)}.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-selected-font-color)}.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-d7fb415c]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-selected-description-color)}.b-listbox-single-select-option[data-v-092ed5ee]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-092ed5ee]{align-items:center;display:flex;margin-left:var(--b-listbox-single-select-check-icon-margin)}.b-listbox-multi-select-category[data-v-360ce3ac]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-360ce3ac],.b-listbox-multi-select-category[data-v-360ce3ac]:before,.b-listbox-multi-select-category[data-v-360ce3ac]:after{box-sizing:border-box}.b-listbox-multi-select-category *[data-v-360ce3ac],.b-listbox-multi-select-category *[data-v-360ce3ac]:before,.b-listbox-multi-select-category *[data-v-360ce3ac]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-360ce3ac] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-360ce3ac] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-multi-select-category--disabled[data-v-360ce3ac]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-360ce3ac]{color:var(--b-listbox-multi-select-category-disabled-label-text-color)}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-chevron[data-v-360ce3ac]{cursor:pointer}.b-listbox-multi-select-category__label[data-v-360ce3ac]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-360ce3ac]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-360ce3ac]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-360ce3ac]{display:flex;gap:var(--b-listbox-multi-select-category-option-gap)}.b-listbox-multi-select-options[data-v-23f75bdb]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox-multi-select-options[data-v-23f75bdb],.b-listbox-multi-select-options[data-v-23f75bdb]:before,.b-listbox-multi-select-options[data-v-23f75bdb]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-23f75bdb] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-23f75bdb] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-multi-select-options__category-option[data-v-23f75bdb]{padding-left:var(--b-listbox-multi-select-options-category-option-padding-left)}.b-listbox-multi-select[data-v-70173dcf]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-70173dcf],.b-listbox-multi-select[data-v-70173dcf]:before,.b-listbox-multi-select[data-v-70173dcf]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-70173dcf] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-70173dcf] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-multi-select__divider[data-v-70173dcf]{background-color:var(--b-listbox-multi-select-divider-background-color);border:0;height:1px;margin:var(--b-listbox-multi-select-divider-margin)}.b-listbox-multi-select__option[data-v-70173dcf]{display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox[data-v-bd53a4f9]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-listbox-background-color);overflow-y:auto;padding:var(--b-listbox-padding)}.b-listbox[data-v-bd53a4f9],.b-listbox[data-v-bd53a4f9]:before,.b-listbox[data-v-bd53a4f9]:after{box-sizing:border-box}.b-listbox *[data-v-bd53a4f9],.b-listbox *[data-v-bd53a4f9]:before,.b-listbox *[data-v-bd53a4f9]:after{box-sizing:border-box}.b-listbox[data-v-bd53a4f9] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-bd53a4f9] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox__empty-search-message[data-v-bd53a4f9]{color:var(--b-listbox-empty-search-message-color);padding:var(--b-listbox-empty-search-message-padding);text-align:center}.b-listbox__lazy-load[data-v-bd53a4f9]{display:flex;justify-content:center;margin:var(--b-listbox-lazy-load-margin)}

package/dist/avatar-image.js

@@ -1,4 +1,4 @@
-import { A as t, B as e, a as o } from "./chunks/index.89942d3a.js";
+import { A as t, B as e, a as o } from "./chunks/index.02da8d63.js";
 export {
   t as AvatarImage,
   e as BentoAvatarImageColor,

package/dist/badge.js

@@ -1,8 +1,8 @@
 import { defineComponent as n, computed as r } from "vue";
 import { u as o } from "./chunks/aria-label.ac9651a5.js";
-import { g as c } from "./chunks/get-slot-text.c1114034.js";
+import { g as c } from "./chunks/get-slot-text.99c3d860.js";
 import { n as i } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index3.css";
+import "./assets/index.css";
 var s = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.ATTENTION = "attention", e.WARNING = "warning", e.CRITICAL = "critical", e.SUCCESS = "success", e))(s || {});
 const _ = n({
   name: "adl-badge",

package/dist/button.js

@@ -1,10 +1,10 @@
-import { a as v, B as o } from "./chunks/button.e09d5980.js";
-import { b as R } from "./chunks/button.e09d5980.js";
+import { a as v, B as o } from "./chunks/button.7dd8d4de.js";
+import { b as R } from "./chunks/button.7dd8d4de.js";
 import { defineComponent as u, computed as i } from "vue";
-import { B as p } from "./chunks/loading-button.9a9cbbad.js";
-import { a as k } from "./chunks/loading-button.9a9cbbad.js";
+import { B as p } from "./chunks/loading-button.459b9ab4.js";
+import { a as k } from "./chunks/loading-button.459b9ab4.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index7.css";
+import "./assets/index8.css";
 var l = /* @__PURE__ */ ((n) => (n.BUTTONS_END = "buttons-end", n.FILL_CONTAINER = "fill-container", n.SPACE_BETWEEN = "space-between", n.VERTICAL_STACK = "vertical-stack", n))(l || {}), _ = /* @__PURE__ */ ((n) => (n.BUTTONS_START = "buttons-start", n))(_ || {});
 const c = { ...l, ..._ }, B = u({
   name: "bento-button-actions",

package/dist/card.js

@@ -1,14 +1,14 @@
 import { defineComponent as T, ref as h, watch as p, computed as n } from "vue";
-import { B as H } from "./chunks/index.965ac1af.js";
-import { a as I, C as D } from "./chunks/chevron-up.674ec2e5.js";
-import { u as M } from "./chunks/use-has-slot.6052d56a.js";
+import { B as H } from "./chunks/index.b201e81d.js";
+import { a as I, C as D } from "./chunks/chevron-up.81185563.js";
+import { u as M } from "./chunks/use-has-slot.fbeb19ec.js";
 import { g as O } from "./chunks/unique-id.a2a2b458.js";
-import { u as U } from "./chunks/i18n.155748d6.js";
+import { u as U } from "./chunks/i18n.eb5b985b.js";
 import { o as z } from "./chunks/resize.a041304d.js";
 import { u as R } from "./chunks/use-expandable-content-height.62fc84e5.js";
 import { BentoButtonActions as W, BentoButtonActionsLayout as y } from "./button.js";
 import { n as F } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index8.css";
+import "./assets/index7.css";
 var u = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(u || {}), i = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(i || {});
 const N = {
   "en-US": {

package/dist/checkbox.js

@@ -1,13 +1,13 @@
-import { B as h, b as a } from "./chunks/checkbox.2277450e.js";
-import { a as N } from "./chunks/checkbox.2277450e.js";
+import { B as h, b as a } from "./chunks/checkbox.65743b08.js";
+import { a as N } from "./chunks/checkbox.65743b08.js";
 import { defineComponent as f, toRef as b, computed as d, ref as m, watch as _ } from "vue";
 import { g } from "./chunks/unique-id.a2a2b458.js";
-import { d as y } from "./chunks/index.965ac1af.js";
+import { d as y } from "./chunks/index.b201e81d.js";
 import { u as x } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { C as v } from "./chunks/controls-group.6c5bfccd.js";
-import { E } from "./chunks/field-label.330edb60.js";
+import { C as v } from "./chunks/controls-group.dd967ccf.js";
+import { E } from "./chunks/field-label.01df3cba.js";
 import { n as k } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index9.css";
+import "./assets/index34.css";
 var s = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(s || {});
 const C = f({
   name: "bento-checkbox-group",

package/dist/chunks/arrow-left.2db60716.js

@@ -0,0 +1,26 @@
+import { n as r } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import "../assets/cross.css";
+let e = 0;
+const n = {
+  beforeCreate() {
+    this.uuid = e.toString(), e += 1;
+  }
+};
+var l = function() {
+  var t = this, s = t._self._c;
+  return s("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#00112C", d: "M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z" } })]);
+}, _ = [], a = /* @__PURE__ */ r(
+  n,
+  l,
+  _,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const c = a.exports;
+export {
+  c as A
+};
+//# sourceMappingURL=arrow-left.2db60716.js.map

package/dist/chunks/arrow-left.2db60716.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-left.2db60716.js","sources":["../../node_modules/@adyen/ui-assets-icons-16/dist/vue/arrow-left.vue"],"sourcesContent":["\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><path fill=\"#00112C\" d=\"M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z\"/></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"],"names":["uuid","_sfc_main"],"mappings":";;AAKA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{base-button.7886a7e6.js → base-button.df9a9bea.js}

@@ -1,6 +1,6 @@
 import { defineComponent as b, computed as r, ref as _ } from "vue";
-import { B as d } from "./index.965ac1af.js";
-import { u as f } from "./use-has-slot.6052d56a.js";
+import { B as d } from "./index.b201e81d.js";
+import { u as f } from "./use-has-slot.fbeb19ec.js";
 import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/base-button.css";
 var e = /* @__PURE__ */ ((o) => (o.DESTRUCTIVE = "critical", o.ICON_ONLY = "icon-only", o))(e || {}), s = /* @__PURE__ */ ((o) => (o.BLUR = "blur", o.CLICK = "click", o.FOCUS = "focus", o.KEYDOWN_ESC = "keydown.esc", o))(s || {});
@@ -85,4 +85,4 @@ export {
   U as B,
   s as a
 };
-//# sourceMappingURL=base-button.7886a7e6.js.map
+//# sourceMappingURL=base-button.df9a9bea.js.map

package/dist/chunks/{base-button.7886a7e6.js.map → base-button.df9a9bea.js.map}

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

package/dist/chunks/{base-modal.31634fe8.js → base-modal.75319f4e.js}

@@ -1,12 +1,12 @@
 import { defineComponent as w, useAttrs as I, ref as v, computed as l, watch as L, onMounted as R } from "vue";
-import { B as k } from "./index.965ac1af.js";
-import { a as P } from "./button.e09d5980.js";
+import { B as k } from "./index.b201e81d.js";
+import { a as P } from "./button.7dd8d4de.js";
 import { BentoDivider as T } from "../divider.js";
-import { B as F } from "./index.86fc63ca.js";
-import { u as N } from "./use-has-slot.6052d56a.js";
-import { u as x } from "./i18n.155748d6.js";
-import { C as U } from "./cross.a2cadac5.js";
-import { G as z, a as q } from "./grid-layout.a806acb2.js";
+import { B as F } from "./index.6cef7328.js";
+import { u as N } from "./use-has-slot.fbeb19ec.js";
+import { u as x } from "./i18n.eb5b985b.js";
+import { C as U } from "./cross.04678d81.js";
+import { G as z, a as q } from "./grid-layout.e0025286.js";
 import { n as W } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/base-modal.css";
 var H = /* @__PURE__ */ ((t) => (t.DEFAULT = "BentoModalDefault", t.DIALOG = "BentoModalDialog", t))(H || {}), b = /* @__PURE__ */ ((t) => (t.SMALL = "small", t.MEDIUM = "medium", t.LARGE = "large", t))(b || {}), u = /* @__PURE__ */ ((t) => (t.SMALLER = "smaller", t.EQUAL = "equal", t.BIGGER = "bigger", t))(u || {}), f = /* @__PURE__ */ ((t) => (t.DIALOG = "dialog", t.ALERT_DIALOG = "alertdialog", t))(f || {}), K = /* @__PURE__ */ ((t) => (t.CONFIRMATION = "confirmation", t.DESTRUCTIVE = "destructive", t.INFO = "info", t.ACKNOWLEDGEMENT = "acknowledgement", t))(K || {}), C = /* @__PURE__ */ ((t) => (t.CLOSE_MODAL = "close-modal", t))(C || {});
@@ -219,4 +219,4 @@ export {
   C as e,
   rt as f
 };
-//# sourceMappingURL=base-modal.31634fe8.js.map
+//# sourceMappingURL=base-modal.75319f4e.js.map

package/dist/chunks/{base-modal.31634fe8.js.map → base-modal.75319f4e.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-modal.31634fe8.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n","<template>\n    <div class=\"b-modal-base\">\n        <dialog\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"computedAriaLabel\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @animationend=\"closeModalAfterAnimation\"\n            @click=\"isDismissible && closeModalOnClickOutside($event)\"\n            @keydown.esc=\"internalModalActionClose\"\n        >\n            <bento-focus-trap>\n                <div class=\"b-modal-base__wrapper\">\n                    <div\n                        v-if=\"hasSlot('default') || showCloseButton\"\n                        class=\"b-modal-base__header-container\"\n                        :style=\"customPaddingStyles.header\"\n                    >\n                        <div class=\"b-modal-base__header\">\n                            <bento-typography\n                                class=\"b-modal-base__title\"\n                                aria-label=\"base modal title\"\n                                el=\"span\"\n                                variant=\"title\"\n                                stronger\n                            >\n                                <slot v-if=\"hasSlot('default')\" />\n                            </bento-typography>\n                            <bento-button\n                                v-if=\"showCloseButton\"\n                                class=\"b-modal-base__close-button\"\n                                variant=\"tertiary\"\n                                type=\"button\"\n                                @click=\"internalModalActionClose\"\n                            >\n                                <cross-icon :svg-title=\"t('close')\" />\n                            </bento-button>\n                        </div>\n\n                        <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n                    </div>\n\n                    <div\n                        class=\"b-modal-base__content\"\n                        :class=\"modalContentConditionalClasses\"\n                        :style=\"customPaddingStyles.content\"\n                    >\n                        <bento-typography\n                            v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n                            aria-label=\"base modal content\"\n                            el=\"div\"\n                            variant=\"body\"\n                            stronger\n                        >\n                            <grid-layout\n                                v-if=\"hasColumnLayout\"\n                                :column-width=\"computedColumnWidth\"\n                                :container-type=\"GridLayoutContainerType.NORMAL\"\n                                no-gap\n                                class=\"b-modal-base__grid\"\n                            >\n                                <template #col-1><slot name=\"content-col-1\"></slot></template>\n                                <template #col-2><slot name=\"content-col-2\"></slot></template>\n                            </grid-layout>\n                            <slot v-else name=\"content\" />\n                        </bento-typography>\n                    </div>\n\n                    <div\n                        v-if=\"hasSlot('actions')\"\n                        class=\"b-modal-base__actions-container\"\n                        :style=\"customPaddingStyles.actions\"\n                    >\n                        <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n\n                        <div aria-label=\"modal actions\" class=\"b-modal-base__actions\">\n                            <slot name=\"actions\" />\n                        </div>\n                    </div>\n                </div>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, useAttrs, watch } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalEvent,\n        BentoModalRole,\n        BentoModalSize,\n    } from '@/components/modal/modal.types';\n\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoDivider } from '@/components/divider';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n        components: { CrossIcon, BentoTypography, BentoButton, BentoDivider, BentoFocusTrap, GridLayout },\n        props: {\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             * But you may change the color of 1-st action to red with 'critial' key\n             * Not more than 3 action buttons can be provided\n             * Or 2 action buttons and 1 Label for them\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',2\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\n            },\n\n            /**\n             * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n             */\n            columnsSize: {\n                type: String as PropType<BentoModalColumnLayoutVariant>,\n                default: BentoModalColumnLayoutVariant.SMALLER,\n            },\n\n            /**\n             * If provided, manages the padding of the whole modal container\n             */\n            customPadding: { type: String, default: null },\n\n            /**\n             * Hides a cross icon on the right side of the title\n             */\n            hideCloseButton: { type: Boolean, required: true },\n\n            /**\n             * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n             */\n            initiallyOpen: { type: Boolean, default: false },\n\n            /**\n             * If set to true, it allows the modal to be closed by clicking outside of it\n             */\n            isDismissible: { type: Boolean, required: true },\n\n            /**\n             * Controls the modal's state from the outside. Set it to true to open the modal\n             */\n            isOpen: { type: Boolean, required: true },\n\n            /**\n             * Defines whether the modal will be an alert modal\n             */\n            modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n            /**\n             * Allows the inner elments to overflow the dialog\n             */\n            overflowVisible: { type: Boolean, default: false },\n\n            /**\n             * Sets the width of the modal\n             */\n            size: {\n                type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n                default: BentoModalSize.SMALL,\n            },\n\n            /**\n             * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n             */\n            withColumnLayout: { type: Boolean, default: false },\n        },\n        emits: [BentoModalEvent.CLOSE_MODAL],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const attrs = useAttrs();\n            const hasSlot = useHasSlot(slots);\n            const modal = ref(null);\n            const isClosing = ref(false);\n\n            const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n            const customPaddingStyles = computed(() => {\n                if (!props.customPadding) {\n                    return {};\n                }\n\n                const xPadding = {\n                    paddingLeft: props.customPadding,\n                    paddingRight: props.customPadding,\n                };\n\n                const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n                if (!hasSlot('default')) {\n                    content.paddingTop = props.customPadding;\n                }\n\n                if (!hasSlot('actions')) {\n                    content.paddingBottom = props.customPadding;\n                }\n\n                return {\n                    header: { ...xPadding, paddingTop: props.customPadding },\n                    content,\n                    actions: { ...xPadding, paddingBottom: props.customPadding },\n                };\n            });\n\n            const computedAriaLabel = computed(\n                () => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)\n            );\n            const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n            const openModal = (): void => {\n                modal.value.showModal();\n            };\n\n            const emitCloseEvent = (): void => {\n                emit(BentoModalEvent.CLOSE_MODAL);\n            };\n\n            // Handle closing and closing animation for dialog element\n            const closeModalAfterAnimation = () => {\n                if (isClosing.value) {\n                    modal.value.close();\n                    emitCloseEvent();\n                    isClosing.value = false;\n                }\n            };\n\n            const startCloseModalAnimation = () => {\n                if (!modal.value.open) {\n                    return;\n                }\n                isClosing.value = true;\n            };\n\n            // If the user has pressed escape, clicked outside or clicked the close icon\n            const internalModalActionClose = (event?: Event) => {\n                if (event) {\n                    event.preventDefault();\n                }\n                if (!props.isDismissible) {\n                    return;\n                }\n                startCloseModalAnimation();\n            };\n\n            /**\n             * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n             * If the click doesn't happen in the dialog box itself, the modal closes\n             */\n            const closeModalOnClickOutside = ({ target }: Event): void => {\n                if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n                    internalModalActionClose();\n                }\n            };\n\n            const modalConditionalClasses = computed(() => ({\n                [`b-modal-base__container--${props.size}`]: props.size,\n                'b-modal-base__container--hide': isClosing.value,\n                'b-modal-base__container--overflow-visible': props.overflowVisible,\n                'b-modal-base__container--column-layout': hasColumnLayout.value,\n            }));\n\n            const modalContentConditionalClasses = computed(() => ({\n                'b-modal-base__content--column-layout': hasColumnLayout.value,\n                'b-modal-base__content--with-header': hasSlot('default'),\n                'b-modal-base__content--with-actions': hasSlot('actions'),\n            }));\n\n            const computedColumnWidth = computed(() => {\n                if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n                    return [\n                        { small: 4, medium: 4, large: 4 },\n                        { small: 8, medium: 8, large: 8 },\n                    ];\n                }\n                if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n                    return [\n                        { small: 8, medium: 8, large: 8 },\n                        { small: 4, medium: 4, large: 4 },\n                    ];\n                }\n                return [\n                    { small: 6, medium: 6, large: 6 },\n                    { small: 6, medium: 6, large: 6 },\n                ];\n            });\n\n            watch(\n                () => [props.isOpen, modal.value],\n                ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n                    if (!newModalValue) {\n                        return;\n                    }\n\n                    const isFirstMutation = !oldModalValue;\n                    if (newIsOpen) {\n                        openModal();\n                    } else if (!isFirstMutation) {\n                        startCloseModalAnimation();\n                    }\n                }\n            );\n\n            // If the first button is a loading button then close the modal have 0.5 seconds\n            // if the state is changed to 'success'.\n            watch(\n                () => props.actions,\n                () => {\n                    if (props.actions?.[0]?.state === 'success') {\n                        setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n                    }\n                },\n                { deep: true }\n            );\n\n            onMounted(() => {\n                if (props.isOpen && modal.value) {\n                    openModal();\n                }\n            });\n\n            return {\n                // Refs\n                modal,\n                computedAriaLabel,\n                showCloseButton,\n\n                // Handling the state\n                openModal,\n                closeModalOnClickOutside,\n                closeModalAfterAnimation,\n                startCloseModalAnimation,\n\n                // Methods\n                internalModalActionClose,\n                hasSlot,\n                emitCloseEvent,\n                t,\n\n                // Styles\n                modalConditionalClasses,\n                modalContentConditionalClasses,\n                customPaddingStyles,\n                hasColumnLayout,\n                computedColumnWidth,\n\n                // Enums\n                GridLayoutContainerType,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","_sfc_main","defineComponent","messages","CrossIcon","BentoTypography","BentoButton","BentoDivider","BentoFocusTrap","GridLayout","props","slots","emit","t","useI18n","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","showCloseButton","computed","customPaddingStyles","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","GridLayoutContainerType"],"mappings":"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"}
+{"version":3,"file":"base-modal.75319f4e.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n","<template>\n    <div class=\"b-modal-base\">\n        <dialog\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"computedAriaLabel\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @animationend=\"closeModalAfterAnimation\"\n            @click=\"isDismissible && closeModalOnClickOutside($event)\"\n            @keydown.esc=\"internalModalActionClose\"\n        >\n            <bento-focus-trap>\n                <div class=\"b-modal-base__wrapper\">\n                    <div\n                        v-if=\"hasSlot('default') || showCloseButton\"\n                        class=\"b-modal-base__header-container\"\n                        :style=\"customPaddingStyles.header\"\n                    >\n                        <div class=\"b-modal-base__header\">\n                            <bento-typography\n                                class=\"b-modal-base__title\"\n                                aria-label=\"base modal title\"\n                                el=\"span\"\n                                variant=\"title\"\n                                stronger\n                            >\n                                <slot v-if=\"hasSlot('default')\" />\n                            </bento-typography>\n                            <bento-button\n                                v-if=\"showCloseButton\"\n                                class=\"b-modal-base__close-button\"\n                                variant=\"tertiary\"\n                                type=\"button\"\n                                @click=\"internalModalActionClose\"\n                            >\n                                <cross-icon :svg-title=\"t('close')\" />\n                            </bento-button>\n                        </div>\n\n                        <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n                    </div>\n\n                    <div\n                        class=\"b-modal-base__content\"\n                        :class=\"modalContentConditionalClasses\"\n                        :style=\"customPaddingStyles.content\"\n                    >\n                        <bento-typography\n                            v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n                            aria-label=\"base modal content\"\n                            el=\"div\"\n                            variant=\"body\"\n                            stronger\n                        >\n                            <grid-layout\n                                v-if=\"hasColumnLayout\"\n                                :column-width=\"computedColumnWidth\"\n                                :container-type=\"GridLayoutContainerType.NORMAL\"\n                                no-gap\n                                class=\"b-modal-base__grid\"\n                            >\n                                <template #col-1><slot name=\"content-col-1\"></slot></template>\n                                <template #col-2><slot name=\"content-col-2\"></slot></template>\n                            </grid-layout>\n                            <slot v-else name=\"content\" />\n                        </bento-typography>\n                    </div>\n\n                    <div\n                        v-if=\"hasSlot('actions')\"\n                        class=\"b-modal-base__actions-container\"\n                        :style=\"customPaddingStyles.actions\"\n                    >\n                        <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n\n                        <div aria-label=\"modal actions\" class=\"b-modal-base__actions\">\n                            <slot name=\"actions\" />\n                        </div>\n                    </div>\n                </div>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, useAttrs, watch } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalEvent,\n        BentoModalRole,\n        BentoModalSize,\n    } from '@/components/modal/modal.types';\n\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoDivider } from '@/components/divider';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n        components: { CrossIcon, BentoTypography, BentoButton, BentoDivider, BentoFocusTrap, GridLayout },\n        props: {\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             * But you may change the color of 1-st action to red with 'critial' key\n             * Not more than 3 action buttons can be provided\n             * Or 2 action buttons and 1 Label for them\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',2\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\n            },\n\n            /**\n             * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n             */\n            columnsSize: {\n                type: String as PropType<BentoModalColumnLayoutVariant>,\n                default: BentoModalColumnLayoutVariant.SMALLER,\n            },\n\n            /**\n             * If provided, manages the padding of the whole modal container\n             */\n            customPadding: { type: String, default: null },\n\n            /**\n             * Hides a cross icon on the right side of the title\n             */\n            hideCloseButton: { type: Boolean, required: true },\n\n            /**\n             * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n             */\n            initiallyOpen: { type: Boolean, default: false },\n\n            /**\n             * If set to true, it allows the modal to be closed by clicking outside of it\n             */\n            isDismissible: { type: Boolean, required: true },\n\n            /**\n             * Controls the modal's state from the outside. Set it to true to open the modal\n             */\n            isOpen: { type: Boolean, required: true },\n\n            /**\n             * Defines whether the modal will be an alert modal\n             */\n            modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n            /**\n             * Allows the inner elments to overflow the dialog\n             */\n            overflowVisible: { type: Boolean, default: false },\n\n            /**\n             * Sets the width of the modal\n             */\n            size: {\n                type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n                default: BentoModalSize.SMALL,\n            },\n\n            /**\n             * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n             */\n            withColumnLayout: { type: Boolean, default: false },\n        },\n        emits: [BentoModalEvent.CLOSE_MODAL],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const attrs = useAttrs();\n            const hasSlot = useHasSlot(slots);\n            const modal = ref(null);\n            const isClosing = ref(false);\n\n            const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n            const customPaddingStyles = computed(() => {\n                if (!props.customPadding) {\n                    return {};\n                }\n\n                const xPadding = {\n                    paddingLeft: props.customPadding,\n                    paddingRight: props.customPadding,\n                };\n\n                const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n                if (!hasSlot('default')) {\n                    content.paddingTop = props.customPadding;\n                }\n\n                if (!hasSlot('actions')) {\n                    content.paddingBottom = props.customPadding;\n                }\n\n                return {\n                    header: { ...xPadding, paddingTop: props.customPadding },\n                    content,\n                    actions: { ...xPadding, paddingBottom: props.customPadding },\n                };\n            });\n\n            const computedAriaLabel = computed(\n                () => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)\n            );\n            const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n            const openModal = (): void => {\n                modal.value.showModal();\n            };\n\n            const emitCloseEvent = (): void => {\n                emit(BentoModalEvent.CLOSE_MODAL);\n            };\n\n            // Handle closing and closing animation for dialog element\n            const closeModalAfterAnimation = () => {\n                if (isClosing.value) {\n                    modal.value.close();\n                    emitCloseEvent();\n                    isClosing.value = false;\n                }\n            };\n\n            const startCloseModalAnimation = () => {\n                if (!modal.value.open) {\n                    return;\n                }\n                isClosing.value = true;\n            };\n\n            // If the user has pressed escape, clicked outside or clicked the close icon\n            const internalModalActionClose = (event?: Event) => {\n                if (event) {\n                    event.preventDefault();\n                }\n                if (!props.isDismissible) {\n                    return;\n                }\n                startCloseModalAnimation();\n            };\n\n            /**\n             * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n             * If the click doesn't happen in the dialog box itself, the modal closes\n             */\n            const closeModalOnClickOutside = ({ target }: Event): void => {\n                if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n                    internalModalActionClose();\n                }\n            };\n\n            const modalConditionalClasses = computed(() => ({\n                [`b-modal-base__container--${props.size}`]: props.size,\n                'b-modal-base__container--hide': isClosing.value,\n                'b-modal-base__container--overflow-visible': props.overflowVisible,\n                'b-modal-base__container--column-layout': hasColumnLayout.value,\n            }));\n\n            const modalContentConditionalClasses = computed(() => ({\n                'b-modal-base__content--column-layout': hasColumnLayout.value,\n                'b-modal-base__content--with-header': hasSlot('default'),\n                'b-modal-base__content--with-actions': hasSlot('actions'),\n            }));\n\n            const computedColumnWidth = computed(() => {\n                if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n                    return [\n                        { small: 4, medium: 4, large: 4 },\n                        { small: 8, medium: 8, large: 8 },\n                    ];\n                }\n                if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n                    return [\n                        { small: 8, medium: 8, large: 8 },\n                        { small: 4, medium: 4, large: 4 },\n                    ];\n                }\n                return [\n                    { small: 6, medium: 6, large: 6 },\n                    { small: 6, medium: 6, large: 6 },\n                ];\n            });\n\n            watch(\n                () => [props.isOpen, modal.value],\n                ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n                    if (!newModalValue) {\n                        return;\n                    }\n\n                    const isFirstMutation = !oldModalValue;\n                    if (newIsOpen) {\n                        openModal();\n                    } else if (!isFirstMutation) {\n                        startCloseModalAnimation();\n                    }\n                }\n            );\n\n            // If the first button is a loading button then close the modal have 0.5 seconds\n            // if the state is changed to 'success'.\n            watch(\n                () => props.actions,\n                () => {\n                    if (props.actions?.[0]?.state === 'success') {\n                        setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n                    }\n                },\n                { deep: true }\n            );\n\n            onMounted(() => {\n                if (props.isOpen && modal.value) {\n                    openModal();\n                }\n            });\n\n            return {\n                // Refs\n                modal,\n                computedAriaLabel,\n                showCloseButton,\n\n                // Handling the state\n                openModal,\n                closeModalOnClickOutside,\n                closeModalAfterAnimation,\n                startCloseModalAnimation,\n\n                // Methods\n                internalModalActionClose,\n                hasSlot,\n                emitCloseEvent,\n                t,\n\n                // Styles\n                modalConditionalClasses,\n                modalContentConditionalClasses,\n                customPaddingStyles,\n                hasColumnLayout,\n                computedColumnWidth,\n\n                // Enums\n                GridLayoutContainerType,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","_sfc_main","defineComponent","messages","CrossIcon","BentoTypography","BentoButton","BentoDivider","BentoFocusTrap","GridLayout","props","slots","emit","t","useI18n","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","showCloseButton","computed","customPaddingStyles","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","GridLayoutContainerType"],"mappings":"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"}

package/dist/chunks/{button-actions-with-menu.5faea13e.js → button-actions-with-menu.32770485.js}

@@ -1,6 +1,6 @@
 import { defineComponent as a, computed as i, toRef as r, provide as u } from "vue";
-import { M as d, B as p } from "./index.d8bd7596.js";
-import { B as _ } from "./index.210d2169.js";
+import { M as d, B as p } from "./index.f358c4bd.js";
+import { B as _ } from "./index.d1beb704.js";
 import { BentoButtonActions as l } from "../button.js";
 import { n as m } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/button-actions-with-menu.css";
@@ -102,4 +102,4 @@ const C = B.exports;
 export {
   C as B
 };
-//# sourceMappingURL=button-actions-with-menu.5faea13e.js.map
+//# sourceMappingURL=button-actions-with-menu.32770485.js.map

package/dist/chunks/{button-actions-with-menu.5faea13e.js.map → button-actions-with-menu.32770485.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.5faea13e.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div role=\"group\" class=\"b-button-actions-with-menu__container-wrapper\">\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu v-if=\"computedMenuActions.length\" :data=\"computedMenuActions\" :menu-position=\"menuPosition\" />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n    const props = defineProps({\n        /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","computedActions","computed","props","inverseRef","toRef","provide","MENU_INVERSE_INJECTION_KEY","computedMenuActions","el"],"mappings":";;;;;;AAwJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA;AAEA,IAAAG,EAAAC,GAAAH,CAAA;AAEA,UAAAI,IAAAN;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAM,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions-with-menu.32770485.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div role=\"group\" class=\"b-button-actions-with-menu__container-wrapper\">\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu v-if=\"computedMenuActions.length\" :data=\"computedMenuActions\" :menu-position=\"menuPosition\" />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n    const props = defineProps({\n        /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","computedActions","computed","props","inverseRef","toRef","provide","MENU_INVERSE_INJECTION_KEY","computedMenuActions","el"],"mappings":";;;;;;AAwJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA;AAEA,IAAAG,EAAAC,GAAAH,CAAA;AAEA,UAAAI,IAAAN;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAM,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{button.e09d5980.js → button.7dd8d4de.js}

@@ -1,6 +1,6 @@
 import { defineComponent as f, computed as i } from "vue";
-import { B as m } from "./index.965ac1af.js";
-import { u as y } from "./use-has-slot.6052d56a.js";
+import { B as m } from "./index.b201e81d.js";
+import { u as y } from "./use-has-slot.fbeb19ec.js";
 import { BentoLink as p, BentoLinkVariant as v } from "../link.js";
 import { n as S } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/button.css";
@@ -122,4 +122,4 @@ export {
   L as a,
   o as b
 };
-//# sourceMappingURL=button.e09d5980.js.map
+//# sourceMappingURL=button.7dd8d4de.js.map

package/dist/chunks/{button.e09d5980.js.map → button.7dd8d4de.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button.e09d5980.js","sources":["../../../core/src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n    INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n    condensed?: boolean;\n    critical?: boolean;\n    disabled?: boolean;\n    inverse?: boolean;\n    variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n    type?: string;\n    link?: object;\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"conditionalClasses\"\n        @click.capture=\"onClickButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-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-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { Booleanish } from '@/types/prop-types';\n    import type { RouterLinkProps } from 'vue-router/types/router';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n        // eslint-disable-next-line vue/require-default-prop\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @usage\n     * import { BentoButton, AdlIconPosition } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             :icon-position=\"AdlIconPosition.AFTER\"\n     *         >\n     *             Button text\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Reduces sizing of button\n             */\n            condensed: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Sets color set to inverse\n             */\n            inverse: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n             */\n            link: {\n                type: Object,\n                default: undefined,\n            },\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            /**\n             * Types of flavour of Button\n             * @values primary, secondary, tertiary\n             */\n            variant: {\n                type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n                default: BentoButtonVariant.PRIMARY,\n                validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n            },\n        },\n        emits: ['click', 'focus', 'blur', 'keydown.esc'],\n        setup(props, { slots, emit, attrs }) {\n            const componentType = computed(() => {\n                if (props?.link !== undefined) {\n                    return BentoLink;\n                }\n                return 'button';\n            });\n            const ariaAttributes = computed(() => ({\n                'aria-controls': attrs['aria-controls']?.toString() as string,\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const componentProps = computed(() =>\n                componentType.value === 'button'\n                    ? {\n                          ...ariaAttributes.value,\n                          disabled: props.disabled,\n                          type: props.type,\n                      }\n                    : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT }\n            );\n\n            const variantClass = computed((): { [x: string]: boolean } => ({\n                [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n            }));\n\n            const conditionalClasses = computed(\n                (): {\n                    [x: string]: boolean;\n                } => ({\n                    ...variantClass.value,\n                    [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n                    [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n                    [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !slots.default,\n                    [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n                })\n            );\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit('click', e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n                componentType,\n                componentProps,\n\n                // Methods\n                onClickButton,\n                hasSlot: useHasSlot(slots),\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","_sfc_main","defineComponent","BentoTypography","value","props","slots","emit","attrs","componentType","computed","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","useHasSlot"],"mappings":"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"}
+{"version":3,"file":"button.7dd8d4de.js","sources":["../../../core/src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n    INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n    condensed?: boolean;\n    critical?: boolean;\n    disabled?: boolean;\n    inverse?: boolean;\n    variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n    type?: string;\n    link?: object;\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"conditionalClasses\"\n        @click.capture=\"onClickButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-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-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { Booleanish } from '@/types/prop-types';\n    import type { RouterLinkProps } from 'vue-router/types/router';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n        // eslint-disable-next-line vue/require-default-prop\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @usage\n     * import { BentoButton, AdlIconPosition } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             :icon-position=\"AdlIconPosition.AFTER\"\n     *         >\n     *             Button text\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Reduces sizing of button\n             */\n            condensed: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Sets color set to inverse\n             */\n            inverse: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n             */\n            link: {\n                type: Object,\n                default: undefined,\n            },\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            /**\n             * Types of flavour of Button\n             * @values primary, secondary, tertiary\n             */\n            variant: {\n                type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n                default: BentoButtonVariant.PRIMARY,\n                validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n            },\n        },\n        emits: ['click', 'focus', 'blur', 'keydown.esc'],\n        setup(props, { slots, emit, attrs }) {\n            const componentType = computed(() => {\n                if (props?.link !== undefined) {\n                    return BentoLink;\n                }\n                return 'button';\n            });\n            const ariaAttributes = computed(() => ({\n                'aria-controls': attrs['aria-controls']?.toString() as string,\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const componentProps = computed(() =>\n                componentType.value === 'button'\n                    ? {\n                          ...ariaAttributes.value,\n                          disabled: props.disabled,\n                          type: props.type,\n                      }\n                    : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT }\n            );\n\n            const variantClass = computed((): { [x: string]: boolean } => ({\n                [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n            }));\n\n            const conditionalClasses = computed(\n                (): {\n                    [x: string]: boolean;\n                } => ({\n                    ...variantClass.value,\n                    [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n                    [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n                    [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !slots.default,\n                    [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n                })\n            );\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit('click', e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n                componentType,\n                componentProps,\n\n                // Methods\n                onClickButton,\n                hasSlot: useHasSlot(slots),\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","_sfc_main","defineComponent","BentoTypography","value","props","slots","emit","attrs","componentType","computed","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","useHasSlot"],"mappings":"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"}