@adyen/bento-vue3 1.90.0 → 1.92.0

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

@@ -1 +1 @@
-.b-listbox-single-select-category[data-v-27c4e09a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:var(--b-spacer-070)}.b-listbox-single-select-category[data-v-27c4e09a],.b-listbox-single-select-category[data-v-27c4e09a]:before,.b-listbox-single-select-category[data-v-27c4e09a]:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-27c4e09a] *,.b-listbox-single-select-category[data-v-27c4e09a] *:before,.b-listbox-single-select-category[data-v-27c4e09a] *:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-27c4e09a] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-single-select-category[data-v-27c4e09a] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-single-select-category[data-v-27c4e09a]:last-child{margin-bottom:0}.b-listbox-single-select-category__label-text[data-v-27c4e09a]{color:var(--b-color-label-secondary);padding:var(--b-spacer-040) var(--b-spacer-070)}.b-checkbox-input[data-v-1495b1db]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;display:flex;padding:var(--b-spacer-010) 0;position:relative}.b-checkbox-input[data-v-1495b1db],.b-checkbox-input[data-v-1495b1db]:before,.b-checkbox-input[data-v-1495b1db]:after{box-sizing:border-box}.b-checkbox-input[data-v-1495b1db] *,.b-checkbox-input[data-v-1495b1db] *:before,.b-checkbox-input[data-v-1495b1db] *:after{box-sizing:border-box}.b-checkbox-input[data-v-1495b1db] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-1495b1db] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-checkbox-input--disabled[data-v-1495b1db],.b-checkbox-input--disabled[data-v-1495b1db] *{cursor:not-allowed}.b-checkbox-input--readonly[data-v-1495b1db],.b-checkbox-input--readonly[data-v-1495b1db] *{pointer-events:none}.b-checkbox-input__outline[data-v-1495b1db]{appearance:none;border-radius:var(--b-border-radius-s);border-style:solid;border-width:var(--b-border-width-s);cursor:pointer;display:inline-block;flex-basis:16px;height:16px;margin:0;min-width:16px;outline:none;position:relative;text-align:center;width:16px}.b-checkbox-input__outline--unchecked[data-v-1495b1db]{background-color:var(--b-color-background-primary);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input__outline--unchecked[data-v-1495b1db]:hover{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input__outline--unchecked[data-v-1495b1db]:active{background-color:var(--b-color-background-primary-active);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input--disabled .b-checkbox-input__outline--unchecked[data-v-1495b1db]{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);cursor:not-allowed}.b-checkbox-input__outline--checked[data-v-1495b1db],.b-checkbox-input__outline[data-v-1495b1db]:checked{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-checkbox-input__outline--checked[data-v-1495b1db]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-1495b1db]:not(:disabled),.b-checkbox-input__outline[data-v-1495b1db]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-1495b1db]:checked:not(:disabled){background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-checkbox-input__outline--checked[data-v-1495b1db]:active,.b-checkbox-input__outline[data-v-1495b1db]:checked:active{background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-checkbox-input--disabled .b-checkbox-input__outline--checked[data-v-1495b1db],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-1495b1db]:checked{background-color:var(--b-color-background-disabled);border-color:var(--b-color-background-disabled);cursor:not-allowed}.b-checkbox-input__outline--indeterminate[data-v-1495b1db],.b-checkbox-input__outline[data-v-1495b1db]:indeterminate{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-checkbox-input__outline--indeterminate[data-v-1495b1db]:hover,.b-checkbox-input__outline[data-v-1495b1db]:indeterminate:hover{background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-checkbox-input__outline--indeterminate[data-v-1495b1db]:active,.b-checkbox-input__outline[data-v-1495b1db]:indeterminate:active{background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-checkbox-input--disabled .b-checkbox-input__outline--indeterminate[data-v-1495b1db],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-1495b1db]:indeterminate{background-color:var(--b-color-background-disabled);border-color:var(--b-color-background-disabled);cursor:not-allowed}.b-checkbox-input__outline[data-v-1495b1db]:focus-visible{animation:outer-ring-default-1495b1db var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-default-1495b1db{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-checkbox-input__outline--error[data-v-1495b1db]{border:1.5px solid var(--b-color-outline-critical)}.b-checkbox-input__outline--error[data-v-1495b1db]:checked{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-checkbox-input__outline--error[data-v-1495b1db]:indeterminate{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-checkbox-input__outline--readonly[data-v-1495b1db],.b-checkbox-input__outline--readonly[data-v-1495b1db]:checked,.b-checkbox-input__outline--readonly[data-v-1495b1db]:indeterminate{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}.b-checkbox-input__icon[data-v-1495b1db]{color:var(--b-color-label-inverse-primary);left:0;pointer-events:none;position:absolute;z-index:1}.b-checkbox-input--disabled .b-checkbox-input__icon[data-v-1495b1db]{color:var(--b-color-label-disabled)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-1495b1db]{color:var(--b-color-label-primary)}.b-listbox-option[data-v-1495b1db]{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-spacer-040) var(--b-spacer-070)}.b-listbox-option[data-v-1495b1db],.b-listbox-option[data-v-1495b1db]:before,.b-listbox-option[data-v-1495b1db]:after{box-sizing:border-box}.b-listbox-option[data-v-1495b1db] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-1495b1db] ::-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-1495b1db]:hover:not(.b-listbox-option--disabled){background-color:var(--b-color-background-modal-hover)}.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--unchecked{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary)}.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--checked{background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--indeterminate{background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-color-label-primary)}}.b-listbox-option[data-v-1495b1db]:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--b-border-width-m) var(--b-focus-ring-color),inset 0 0 0 var(--b-border-width-l) var(--b-color-background-primary)}.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled){background-color:var(--b-color-background-modal-active)}.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-color-label-primary)}.b-listbox-option[data-v-1495b1db] .b-listbox-single-select-option__text,.b-listbox-option[data-v-1495b1db] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-1495b1db] .b-listbox-single-select-option__description,.b-listbox-option[data-v-1495b1db] .b-listbox-multi-select__option-description{margin-top:var(--b-spacer-020)}.b-listbox-option[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-color-label-secondary)}.b-listbox-option--disabled[data-v-1495b1db]{cursor:not-allowed}.b-listbox-option--disabled[data-v-1495b1db],.b-listbox-option--disabled[data-v-1495b1db] .b-avatar__label,.b-listbox-option--disabled[data-v-1495b1db] .b-country__label,.b-listbox-option--disabled[data-v-1495b1db] .b-payment-method__label{color:var(--b-color-label-disabled)}.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled){background-color:var(--b-color-background-modal-active)}.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-color-label-primary)}.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-color-label-secondary)}.b-listbox-single-select-option[data-v-4f41af07]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-4f41af07]{align-items:center;display:flex;margin-left:var(--b-spacer-070)}.b-checkbox-input[data-v-08d3142e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;display:flex;padding:var(--b-spacer-010) 0;position:relative}.b-checkbox-input[data-v-08d3142e],.b-checkbox-input[data-v-08d3142e]:before,.b-checkbox-input[data-v-08d3142e]:after{box-sizing:border-box}.b-checkbox-input[data-v-08d3142e] *,.b-checkbox-input[data-v-08d3142e] *:before,.b-checkbox-input[data-v-08d3142e] *:after{box-sizing:border-box}.b-checkbox-input[data-v-08d3142e] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-08d3142e] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-checkbox-input--disabled[data-v-08d3142e],.b-checkbox-input--disabled[data-v-08d3142e] *{cursor:not-allowed}.b-checkbox-input--readonly[data-v-08d3142e],.b-checkbox-input--readonly[data-v-08d3142e] *{pointer-events:none}.b-checkbox-input__outline[data-v-08d3142e]{appearance:none;border-radius:var(--b-border-radius-s);border-style:solid;border-width:var(--b-border-width-s);cursor:pointer;display:inline-block;flex-basis:16px;height:16px;margin:0;min-width:16px;outline:none;position:relative;text-align:center;width:16px}.b-checkbox-input__outline--unchecked[data-v-08d3142e]{background-color:var(--b-color-background-primary);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input__outline--unchecked[data-v-08d3142e]:hover{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input__outline--unchecked[data-v-08d3142e]:active{background-color:var(--b-color-background-primary-active);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input--disabled .b-checkbox-input__outline--unchecked[data-v-08d3142e]{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);cursor:not-allowed}.b-checkbox-input__outline--checked[data-v-08d3142e],.b-checkbox-input__outline[data-v-08d3142e]:checked{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-checkbox-input__outline--checked[data-v-08d3142e]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-08d3142e]:not(:disabled),.b-checkbox-input__outline[data-v-08d3142e]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-08d3142e]:checked:not(:disabled){background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-checkbox-input__outline--checked[data-v-08d3142e]:active,.b-checkbox-input__outline[data-v-08d3142e]:checked:active{background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-checkbox-input--disabled .b-checkbox-input__outline--checked[data-v-08d3142e],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-08d3142e]:checked{background-color:var(--b-color-background-disabled);border-color:var(--b-color-background-disabled);cursor:not-allowed}.b-checkbox-input__outline--indeterminate[data-v-08d3142e],.b-checkbox-input__outline[data-v-08d3142e]:indeterminate{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-checkbox-input__outline--indeterminate[data-v-08d3142e]:hover,.b-checkbox-input__outline[data-v-08d3142e]:indeterminate:hover{background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-checkbox-input__outline--indeterminate[data-v-08d3142e]:active,.b-checkbox-input__outline[data-v-08d3142e]:indeterminate:active{background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-checkbox-input--disabled .b-checkbox-input__outline--indeterminate[data-v-08d3142e],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-08d3142e]:indeterminate{background-color:var(--b-color-background-disabled);border-color:var(--b-color-background-disabled);cursor:not-allowed}.b-checkbox-input__outline[data-v-08d3142e]:focus-visible{animation:outer-ring-default-08d3142e var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-default-08d3142e{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-checkbox-input__outline--error[data-v-08d3142e]{border:1.5px solid var(--b-color-outline-critical)}.b-checkbox-input__outline--error[data-v-08d3142e]:checked{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-checkbox-input__outline--error[data-v-08d3142e]:indeterminate{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-checkbox-input__outline--readonly[data-v-08d3142e],.b-checkbox-input__outline--readonly[data-v-08d3142e]:checked,.b-checkbox-input__outline--readonly[data-v-08d3142e]:indeterminate{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}.b-checkbox-input__icon[data-v-08d3142e]{color:var(--b-color-label-inverse-primary);left:0;pointer-events:none;position:absolute;z-index:1}.b-checkbox-input--disabled .b-checkbox-input__icon[data-v-08d3142e]{color:var(--b-color-label-disabled)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-08d3142e]{color:var(--b-color-label-primary)}.b-listbox-multi-select-category[data-v-60c04867]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-60c04867],.b-listbox-multi-select-category[data-v-60c04867]:before,.b-listbox-multi-select-category[data-v-60c04867]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-60c04867] *,.b-listbox-multi-select-category[data-v-60c04867] *:before,.b-listbox-multi-select-category[data-v-60c04867] *:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-60c04867] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-60c04867] ::-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-60c04867]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-60c04867]{color:var(--b-color-label-disabled)}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-chevron[data-v-60c04867]{cursor:pointer}.b-listbox-multi-select-category--static-category[data-v-60c04867]{gap:var(--b-spacer-070);pointer-events:none}.b-listbox-multi-select-category--static-category .b-listbox-multi-select-category__label-text[data-v-60c04867]{color:var(--b-color-label-secondary);padding:var(--b-spacer-040) var(--b-spacer-070)}.b-listbox-multi-select-category__label[data-v-60c04867]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-60c04867]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-60c04867]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-60c04867]{display:flex;gap:var(--b-spacer-060)}.b-listbox-multi-select-options[data-v-237dfc58]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-spacer-060)}.b-listbox-multi-select-options[data-v-237dfc58],.b-listbox-multi-select-options[data-v-237dfc58]:before,.b-listbox-multi-select-options[data-v-237dfc58]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-237dfc58] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-237dfc58] ::-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-237dfc58]{padding-left:var(--b-spacer-100)}.b-listbox-multi-select-options__static-category-option[data-v-237dfc58]{padding-left:var(--b-spacer-070)}.b-listbox-multi-select[data-v-d170602c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-d170602c],.b-listbox-multi-select[data-v-d170602c]:before,.b-listbox-multi-select[data-v-d170602c]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-d170602c] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-d170602c] ::-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-d170602c]{background-color:var(--b-color-separator-primary);border:0;height:1px;margin:var(--b-spacer-040) var(--b-spacer-000)}.b-listbox-multi-select__option[data-v-d170602c]{display:flex;gap:var(--b-spacer-060)}.b-listbox-multi-select__chips[data-v-d170602c]{container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--b-spacer-030);list-style-type:none;margin:0;padding:0 var(--b-spacer-070)}.b-listbox[data-v-ef1c27fa]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-color-background-modal);color:var(--b-color-label-primary);overflow-y:auto;padding:var(--b-spacer-040) 0}.b-listbox[data-v-ef1c27fa],.b-listbox[data-v-ef1c27fa]:before,.b-listbox[data-v-ef1c27fa]:after{box-sizing:border-box}.b-listbox[data-v-ef1c27fa] *,.b-listbox[data-v-ef1c27fa] *:before,.b-listbox[data-v-ef1c27fa] *:after{box-sizing:border-box}.b-listbox[data-v-ef1c27fa] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-ef1c27fa] ::-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-ef1c27fa]{color:var(--b-color-label-secondary);padding:var(--b-spacer-040) var(--b-spacer-070);text-align:center}.b-listbox__empty-search-message[data-v-ef1c27fa] .b-empty-state__title{color:var(--b-color-label-secondary)}.b-listbox__loading-filtered-items[data-v-ef1c27fa]{display:flex;justify-content:center}.b-listbox__lazy-load[data-v-ef1c27fa]{display:flex;justify-content:center;margin:var(--b-spacer-040) 0}
+.b-listbox-single-select-category[data-v-27c4e09a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:var(--b-spacer-040)}.b-listbox-single-select-category[data-v-27c4e09a],.b-listbox-single-select-category[data-v-27c4e09a]:before,.b-listbox-single-select-category[data-v-27c4e09a]:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-27c4e09a] *,.b-listbox-single-select-category[data-v-27c4e09a] *:before,.b-listbox-single-select-category[data-v-27c4e09a] *:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-27c4e09a] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-single-select-category[data-v-27c4e09a] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-single-select-category[data-v-27c4e09a]:last-child{margin-bottom:0}.b-listbox-single-select-category__label-text[data-v-27c4e09a]{color:var(--b-color-label-secondary);display:block;padding:var(--b-spacer-040) var(--b-spacer-070)}.b-checkbox-input[data-v-1495b1db]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;display:flex;padding:var(--b-spacer-010) 0;position:relative}.b-checkbox-input[data-v-1495b1db],.b-checkbox-input[data-v-1495b1db]:before,.b-checkbox-input[data-v-1495b1db]:after{box-sizing:border-box}.b-checkbox-input[data-v-1495b1db] *,.b-checkbox-input[data-v-1495b1db] *:before,.b-checkbox-input[data-v-1495b1db] *:after{box-sizing:border-box}.b-checkbox-input[data-v-1495b1db] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-1495b1db] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-checkbox-input--disabled[data-v-1495b1db],.b-checkbox-input--disabled[data-v-1495b1db] *{cursor:not-allowed}.b-checkbox-input--readonly[data-v-1495b1db],.b-checkbox-input--readonly[data-v-1495b1db] *{pointer-events:none}.b-checkbox-input__outline[data-v-1495b1db]{appearance:none;border-radius:var(--b-border-radius-s);border-style:solid;border-width:var(--b-border-width-s);cursor:pointer;display:inline-block;flex-basis:16px;height:16px;margin:0;min-width:16px;outline:none;position:relative;text-align:center;width:16px}.b-checkbox-input__outline--unchecked[data-v-1495b1db]{background-color:var(--b-color-background-primary);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input__outline--unchecked[data-v-1495b1db]:hover{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input__outline--unchecked[data-v-1495b1db]:active{background-color:var(--b-color-background-primary-active);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input--disabled .b-checkbox-input__outline--unchecked[data-v-1495b1db]{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);cursor:not-allowed}.b-checkbox-input__outline--checked[data-v-1495b1db],.b-checkbox-input__outline[data-v-1495b1db]:checked{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-checkbox-input__outline--checked[data-v-1495b1db]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-1495b1db]:not(:disabled),.b-checkbox-input__outline[data-v-1495b1db]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-1495b1db]:checked:not(:disabled){background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-checkbox-input__outline--checked[data-v-1495b1db]:active,.b-checkbox-input__outline[data-v-1495b1db]:checked:active{background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-checkbox-input--disabled .b-checkbox-input__outline--checked[data-v-1495b1db],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-1495b1db]:checked{background-color:var(--b-color-background-disabled);border-color:var(--b-color-background-disabled);cursor:not-allowed}.b-checkbox-input__outline--indeterminate[data-v-1495b1db],.b-checkbox-input__outline[data-v-1495b1db]:indeterminate{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-checkbox-input__outline--indeterminate[data-v-1495b1db]:hover,.b-checkbox-input__outline[data-v-1495b1db]:indeterminate:hover{background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-checkbox-input__outline--indeterminate[data-v-1495b1db]:active,.b-checkbox-input__outline[data-v-1495b1db]:indeterminate:active{background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-checkbox-input--disabled .b-checkbox-input__outline--indeterminate[data-v-1495b1db],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-1495b1db]:indeterminate{background-color:var(--b-color-background-disabled);border-color:var(--b-color-background-disabled);cursor:not-allowed}.b-checkbox-input__outline[data-v-1495b1db]:focus-visible{animation:outer-ring-default-1495b1db var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-default-1495b1db{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-checkbox-input__outline--error[data-v-1495b1db]{border:1.5px solid var(--b-color-outline-critical)}.b-checkbox-input__outline--error[data-v-1495b1db]:checked{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-checkbox-input__outline--error[data-v-1495b1db]:indeterminate{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-checkbox-input__outline--readonly[data-v-1495b1db],.b-checkbox-input__outline--readonly[data-v-1495b1db]:checked,.b-checkbox-input__outline--readonly[data-v-1495b1db]:indeterminate{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}.b-checkbox-input__icon[data-v-1495b1db]{color:var(--b-color-label-inverse-primary);left:0;pointer-events:none;position:absolute;z-index:1}.b-checkbox-input--disabled .b-checkbox-input__icon[data-v-1495b1db]{color:var(--b-color-label-disabled)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-1495b1db]{color:var(--b-color-label-primary)}.b-listbox-option[data-v-1495b1db]{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-spacer-040) var(--b-spacer-070)}.b-listbox-option[data-v-1495b1db],.b-listbox-option[data-v-1495b1db]:before,.b-listbox-option[data-v-1495b1db]:after{box-sizing:border-box}.b-listbox-option[data-v-1495b1db] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-1495b1db] ::-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-1495b1db]:hover:not(.b-listbox-option--disabled){background-color:var(--b-color-background-modal-hover)}.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--unchecked{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary)}.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--checked{background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-checkbox-input__outline--indeterminate{background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-1495b1db]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-color-label-primary)}}.b-listbox-option[data-v-1495b1db]:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--b-border-width-m) var(--b-focus-ring-color),inset 0 0 0 var(--b-border-width-l) var(--b-color-background-primary)}.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled){background-color:var(--b-color-background-modal-active)}.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-1495b1db]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-color-label-primary)}.b-listbox-option[data-v-1495b1db] .b-listbox-single-select-option__text,.b-listbox-option[data-v-1495b1db] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-1495b1db] .b-listbox-single-select-option__description,.b-listbox-option[data-v-1495b1db] .b-listbox-multi-select__option-description{margin-top:var(--b-spacer-020)}.b-listbox-option[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-color-label-secondary)}.b-listbox-option--disabled[data-v-1495b1db]{cursor:not-allowed}.b-listbox-option--disabled[data-v-1495b1db],.b-listbox-option--disabled[data-v-1495b1db] .b-avatar__label,.b-listbox-option--disabled[data-v-1495b1db] .b-country__label,.b-listbox-option--disabled[data-v-1495b1db] .b-payment-method__label{color:var(--b-color-label-disabled)}.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled){background-color:var(--b-color-background-modal-active)}.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-color-label-primary)}.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-1495b1db]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-color-label-secondary)}.b-listbox-single-select-option[data-v-4f41af07]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-4f41af07]{align-items:center;display:flex;margin-left:var(--b-spacer-070)}.b-checkbox-input[data-v-08d3142e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;display:flex;padding:var(--b-spacer-010) 0;position:relative}.b-checkbox-input[data-v-08d3142e],.b-checkbox-input[data-v-08d3142e]:before,.b-checkbox-input[data-v-08d3142e]:after{box-sizing:border-box}.b-checkbox-input[data-v-08d3142e] *,.b-checkbox-input[data-v-08d3142e] *:before,.b-checkbox-input[data-v-08d3142e] *:after{box-sizing:border-box}.b-checkbox-input[data-v-08d3142e] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-08d3142e] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-checkbox-input--disabled[data-v-08d3142e],.b-checkbox-input--disabled[data-v-08d3142e] *{cursor:not-allowed}.b-checkbox-input--readonly[data-v-08d3142e],.b-checkbox-input--readonly[data-v-08d3142e] *{pointer-events:none}.b-checkbox-input__outline[data-v-08d3142e]{appearance:none;border-radius:var(--b-border-radius-s);border-style:solid;border-width:var(--b-border-width-s);cursor:pointer;display:inline-block;flex-basis:16px;height:16px;margin:0;min-width:16px;outline:none;position:relative;text-align:center;width:16px}.b-checkbox-input__outline--unchecked[data-v-08d3142e]{background-color:var(--b-color-background-primary);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input__outline--unchecked[data-v-08d3142e]:hover{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input__outline--unchecked[data-v-08d3142e]:active{background-color:var(--b-color-background-primary-active);border-color:var(--b-color-outline-tertiary)}.b-checkbox-input--disabled .b-checkbox-input__outline--unchecked[data-v-08d3142e]{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);cursor:not-allowed}.b-checkbox-input__outline--checked[data-v-08d3142e],.b-checkbox-input__outline[data-v-08d3142e]:checked{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-checkbox-input__outline--checked[data-v-08d3142e]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-08d3142e]:not(:disabled),.b-checkbox-input__outline[data-v-08d3142e]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-08d3142e]:checked:not(:disabled){background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-checkbox-input__outline--checked[data-v-08d3142e]:active,.b-checkbox-input__outline[data-v-08d3142e]:checked:active{background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-checkbox-input--disabled .b-checkbox-input__outline--checked[data-v-08d3142e],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-08d3142e]:checked{background-color:var(--b-color-background-disabled);border-color:var(--b-color-background-disabled);cursor:not-allowed}.b-checkbox-input__outline--indeterminate[data-v-08d3142e],.b-checkbox-input__outline[data-v-08d3142e]:indeterminate{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-checkbox-input__outline--indeterminate[data-v-08d3142e]:hover,.b-checkbox-input__outline[data-v-08d3142e]:indeterminate:hover{background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-checkbox-input__outline--indeterminate[data-v-08d3142e]:active,.b-checkbox-input__outline[data-v-08d3142e]:indeterminate:active{background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-checkbox-input--disabled .b-checkbox-input__outline--indeterminate[data-v-08d3142e],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-08d3142e]:indeterminate{background-color:var(--b-color-background-disabled);border-color:var(--b-color-background-disabled);cursor:not-allowed}.b-checkbox-input__outline[data-v-08d3142e]:focus-visible{animation:outer-ring-default-08d3142e var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-default-08d3142e{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-checkbox-input__outline--error[data-v-08d3142e]{border:1.5px solid var(--b-color-outline-critical)}.b-checkbox-input__outline--error[data-v-08d3142e]:checked{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-checkbox-input__outline--error[data-v-08d3142e]:indeterminate{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-checkbox-input__outline--readonly[data-v-08d3142e],.b-checkbox-input__outline--readonly[data-v-08d3142e]:checked,.b-checkbox-input__outline--readonly[data-v-08d3142e]:indeterminate{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}.b-checkbox-input__icon[data-v-08d3142e]{color:var(--b-color-label-inverse-primary);left:0;pointer-events:none;position:absolute;z-index:1}.b-checkbox-input--disabled .b-checkbox-input__icon[data-v-08d3142e]{color:var(--b-color-label-disabled)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-08d3142e]{color:var(--b-color-label-primary)}.b-listbox-multi-select-category[data-v-60c04867]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-60c04867],.b-listbox-multi-select-category[data-v-60c04867]:before,.b-listbox-multi-select-category[data-v-60c04867]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-60c04867] *,.b-listbox-multi-select-category[data-v-60c04867] *:before,.b-listbox-multi-select-category[data-v-60c04867] *:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-60c04867] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-60c04867] ::-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-60c04867]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-60c04867]{color:var(--b-color-label-disabled)}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-chevron[data-v-60c04867]{cursor:pointer}.b-listbox-multi-select-category--static-category[data-v-60c04867]{gap:var(--b-spacer-070);pointer-events:none}.b-listbox-multi-select-category--static-category .b-listbox-multi-select-category__label-text[data-v-60c04867]{color:var(--b-color-label-secondary);padding:var(--b-spacer-040) var(--b-spacer-070)}.b-listbox-multi-select-category__label[data-v-60c04867]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-60c04867]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-60c04867]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-60c04867]{display:flex;gap:var(--b-spacer-060)}.b-listbox-multi-select-options[data-v-237dfc58]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-spacer-060)}.b-listbox-multi-select-options[data-v-237dfc58],.b-listbox-multi-select-options[data-v-237dfc58]:before,.b-listbox-multi-select-options[data-v-237dfc58]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-237dfc58] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-237dfc58] ::-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-237dfc58]{padding-left:var(--b-spacer-100)}.b-listbox-multi-select-options__static-category-option[data-v-237dfc58]{padding-left:var(--b-spacer-070)}.b-listbox-multi-select[data-v-4abd31b6]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-4abd31b6],.b-listbox-multi-select[data-v-4abd31b6]:before,.b-listbox-multi-select[data-v-4abd31b6]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-4abd31b6] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-4abd31b6] ::-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-4abd31b6]{background-color:var(--b-color-separator-primary);border:0;height:1px;margin:var(--b-spacer-040) var(--b-spacer-000)}.b-listbox-multi-select__option[data-v-4abd31b6]{display:flex;gap:var(--b-spacer-060)}.b-listbox-multi-select__chips[data-v-4abd31b6]{container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--b-spacer-030);list-style-type:none;margin:0;padding:0 var(--b-spacer-070)}.b-listbox[data-v-7026ea79]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-color-background-modal);color:var(--b-color-label-primary);overflow-y:auto;padding:var(--b-spacer-040) 0}.b-listbox[data-v-7026ea79],.b-listbox[data-v-7026ea79]:before,.b-listbox[data-v-7026ea79]:after{box-sizing:border-box}.b-listbox[data-v-7026ea79] *,.b-listbox[data-v-7026ea79] *:before,.b-listbox[data-v-7026ea79] *:after{box-sizing:border-box}.b-listbox[data-v-7026ea79] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-7026ea79] ::-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-7026ea79]{color:var(--b-color-label-secondary);padding:var(--b-spacer-040) var(--b-spacer-070);text-align:center}.b-listbox__empty-search-message[data-v-7026ea79] .b-empty-state__title{color:var(--b-color-label-secondary)}.b-listbox__loading-filtered-items[data-v-7026ea79]{display:flex;justify-content:center}.b-listbox__lazy-load[data-v-7026ea79]{display:flex;justify-content:center;margin:var(--b-spacer-040) 0}

package/dist/button.js

@@ -1,6 +1,6 @@
 import { B as n, a as B, b as a } from "./chunks/button.DWF7FSIw.js";
 import { a as s } from "./chunks/ai-button.1YJdI-sw.js";
-import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.Bh_PZ_fV.js";
+import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.7Oi2Ra4p.js";
 import { B as A, a as L, b as d } from "./chunks/button-actions.types.BptAXjD8.js";
 export {
   s as BentoAiButton,

package/dist/card.js

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

package/dist/checkbox.js

@@ -1,5 +1,5 @@
-import { B as t, a } from "./chunks/checkbox.BlAhQl9N.js";
-import { B as x, a as n } from "./chunks/checkbox-group.D_fN6Glu.js";
+import { B as t, a } from "./chunks/checkbox.CDjMTuJk.js";
+import { B as x, a as n } from "./chunks/checkbox-group.DawPC5Go.js";
 import { C } from "./chunks/minus-small.CnYLTuSv.js";
 export {
   t as BentoCheckbox,

package/dist/chunks/{action-bar.Pe_hvtja.js → action-bar.BxyRAZn1.js}

@@ -2,13 +2,13 @@ import { defineComponent as ne, computed as c, ref as f, toRefs as te, watch as
 import { B as S } from "./button.DWF7FSIw.js";
 import { B as F } from "./typography.B3J6_tYk.js";
 import { B as ce } from "./loading-indicator.BPol9I84.js";
-import { B as re } from "./button-actions-with-menu.DvkS16ur.js";
+import { B as re } from "./button-actions-with-menu.KaWdHibo.js";
 import { C as le } from "./cross.CCHdi6v3.js";
 import { C as ue } from "./checkmark-circle-fill.DugX5fbG.js";
 import { C as de } from "./cross-circle-fill.BWCKKn0E.js";
 import { u as ve } from "./index.B875RXHM.js";
 import { u as me } from "./index.DDwcHPb6.js";
-import { P as ge, B as he } from "./button-actions.Bh_PZ_fV.js";
+import { P as ge, B as he } from "./button-actions.7Oi2Ra4p.js";
 import { _ as fe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/action-bar.css";
 const P = {
@@ -333,4 +333,4 @@ const P = {
 export {
   Ge as B
 };
-//# sourceMappingURL=action-bar.Pe_hvtja.js.map
+//# sourceMappingURL=action-bar.BxyRAZn1.js.map

package/dist/chunks/{action-bar.Pe_hvtja.js.map → action-bar.BxyRAZn1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.Pe_hvtja.js","sources":["../../../vue2/src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `confirmation` variant.\n         */\n        (e: 'cancel'): void;\n        /**\n         * Event emitted when the user clicks the save button in `confirmation` variant.\n         */\n        (e: 'save'): void;\n        /**\n         * Event emitted when the user clicks the undo button in `success` state.\n         */\n        (e: 'undo-action'): void;\n        /**\n         * Event emitted when the user clicks the retry button in `fail` state.\n         */\n        (e: 'retry-action'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `fail` state.\n         */\n        (e: 'cancel-action'): void;\n    }>();\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","tc","n","useI18n","label","computed","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}
+{"version":3,"file":"action-bar.BxyRAZn1.js","sources":["../../../vue2/src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `confirmation` variant.\n         */\n        (e: 'cancel'): void;\n        /**\n         * Event emitted when the user clicks the save button in `confirmation` variant.\n         */\n        (e: 'save'): void;\n        /**\n         * Event emitted when the user clicks the undo button in `success` state.\n         */\n        (e: 'undo-action'): void;\n        /**\n         * Event emitted when the user clicks the retry button in `fail` state.\n         */\n        (e: 'retry-action'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `fail` state.\n         */\n        (e: 'cancel-action'): void;\n    }>();\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","tc","n","useI18n","label","computed","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}

package/dist/chunks/{ai-tag.BSlc78DU.js → ai-tag.CpeZm2Yf.js}

@@ -1,5 +1,5 @@
 import { defineComponent as k, ref as c, watch as b, computed as T, openBlock as p, createElementBlock as V, withKeys as w, createVNode as o, unref as e, withCtx as t, createTextVNode as r, toDisplayString as s, createBlock as v, createElementVNode as C, createCommentVNode as I } from "vue";
-import { u as N, c as D, h as K } from "./button-actions.Bh_PZ_fV.js";
+import { u as N, c as D, h as K } from "./button-actions.7Oi2Ra4p.js";
 import { B as g } from "./typography.B3J6_tYk.js";
 import { u as R } from "./index.B875RXHM.js";
 import { g as L } from "./generate-uid.DBWe4g6T.js";
@@ -134,4 +134,4 @@ const x = {
 export {
   H as a
 };
-//# sourceMappingURL=ai-tag.BSlc78DU.js.map
+//# sourceMappingURL=ai-tag.CpeZm2Yf.js.map

package/dist/chunks/{ai-tag.BSlc78DU.js.map → ai-tag.CpeZm2Yf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-tag.BSlc78DU.js","sources":["../../../vue2/src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoAiTagProps>(), {\n        influencedValue: undefined,\n        toggled: false,\n        action: undefined,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the popover is toggled\n         */\n        (e: 'update:toggled', toggled: boolean): void;\n    }>();\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","props","__props","t","useI18n","toggled","ref","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","emit","__emit","onToggle"],"mappings":";;;;;;;;;;;;;;;;;;;+CA0IIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAAL,EAAA,OAAA,GACAM,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,CAAAW,MAAA;AAER,QAAAP,EAAA,QAAAO;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAf,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAGVgB,IAAAC,GAOAC,IAAA,CAAAP,MAAA;AACI,MAAAP,EAAA,QAAAO,GACAK,EAAA,kBAAAL,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAT,EAAA,SACIc,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-tag.CpeZm2Yf.js","sources":["../../../vue2/src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoAiTagProps>(), {\n        influencedValue: undefined,\n        toggled: false,\n        action: undefined,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the popover is toggled\n         */\n        (e: 'update:toggled', toggled: boolean): void;\n    }>();\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","props","__props","t","useI18n","toggled","ref","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","emit","__emit","onToggle"],"mappings":";;;;;;;;;;;;;;;;;;;+CA0IIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAAL,EAAA,OAAA,GACAM,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,CAAAW,MAAA;AAER,QAAAP,EAAA,QAAAO;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAf,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAGVgB,IAAAC,GAOAC,IAAA,CAAAP,MAAA;AACI,MAAAP,EAAA,QAAAO,GACAK,EAAA,kBAAAL,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAT,EAAA,SACIc,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{alert.CFWN2E0b.js → alert.RD0qOLhx.js}

@@ -1,55 +1,76 @@
-import { openBlock as t, createElementBlock as g, mergeProps as w, toDisplayString as V, createCommentVNode as l, createElementVNode as s, defineComponent as N, useSlots as R, computed as r, onMounted as F, normalizeClass as A, createBlock as I, resolveDynamicComponent as D, unref as o, withCtx as p, renderSlot as m, createVNode as P } from "vue";
-import { c as _, a as W, B as y } from "./typography.B3J6_tYk.js";
-import { B as M } from "./button.DWF7FSIw.js";
+import { openBlock as t, createElementBlock as l, mergeProps as v, toDisplayString as L, createCommentVNode as a, createElementVNode as s, defineComponent as R, useSlots as F, computed as r, onMounted as M, normalizeClass as A, createBlock as h, resolveDynamicComponent as D, unref as n, withCtx as m, renderSlot as f, createVNode as P } from "vue";
+import { c as $, a as W, B as y } from "./typography.B3J6_tYk.js";
+import { B as Z } from "./button.DWF7FSIw.js";
 import { C as U } from "./cross-small.Bjq2Gqvh.js";
-import { W as z } from "./warning-filled.BzyK_mMj.js";
-import { C as q } from "./cross-circle-fill.BWCKKn0E.js";
-import { C as Z } from "./checkmark-circle-fill.DugX5fbG.js";
 /* empty css              */
-import { _ as S } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { _ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { C as z } from "./cross-circle-fill.BWCKKn0E.js";
+import { C as q } from "./checkmark-circle-fill.DugX5fbG.js";
 import { u as j } from "./use-has-slot.CyMiImRQ.js";
 import { u as J } from "./index.B875RXHM.js";
 import "../assets/alert.css";
-var h = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.TIP = "tip", e))(h || {}), c = /* @__PURE__ */ ((e) => (e.WARNING = "warning", e.CRITICAL = "critical", e.HIGHLIGHT = "highlight", e.SUCCESS = "success", e))(c || {}), H = /* @__PURE__ */ ((e) => (e.CLOSE_ALERT = "close-alert", e))(H || {});
+var g = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.TIP = "tip", e))(g || {}), c = /* @__PURE__ */ ((e) => (e.WARNING = "warning", e.CRITICAL = "critical", e.HIGHLIGHT = "highlight", e.SUCCESS = "success", e))(c || {}), S = /* @__PURE__ */ ((e) => (e.CLOSE_ALERT = "close-alert", e))(S || {});
 let b = 0;
 const K = {
   beforeCreate() {
     this.uuid = b.toString(), b += 1;
   }
-}, O = { key: 0 }, X = ["clip-path"], Y = ["id"];
-function Q(e, i, u, d, v, n) {
-  return t(), g("svg", w({ role: "img" }, e.$attrs, {
+}, O = { key: 0 };
+function X(e, o, u, d, p, i) {
+  return t(), l("svg", v({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (t(), g("title", O, V(e.$attrs["svg-title"]), 1)) : l("", !0),
+    e.$attrs["svg-title"] ? (t(), l("title", O, L(e.$attrs["svg-title"]), 1)) : a("", !0),
+    o[0] || (o[0] = s("path", {
+      fill: "#001222",
+      d: "M5.72456 2.45856C6.84306 0.797505 9.35301 0.852915 10.3789 2.62457L15 10.6246C16.0585 12.4537 14.7382 14.7493 12.6201 14.7496H3.37984C1.26177 14.7493 -0.0573711 12.4537 1.00093 10.6246L5.62105 2.62457L5.72456 2.45856ZM8.20991 10.3492C8.02 10.3092 7.80975 10.3298 7.62984 10.4097C7.44993 10.4897 7.28964 10.61 7.17964 10.7798C7.06984 10.9397 7.00984 11.1397 7.00972 11.3394C7.00972 11.6092 7.11997 11.8594 7.29976 12.0494C7.48973 12.2394 7.73976 12.3394 8.00972 12.3394L7.99995 12.3297C8.19979 12.3296 8.38964 12.2696 8.55952 12.1597C8.71947 12.0497 8.84966 11.8895 8.92964 11.7095C9.00952 11.5296 9.03016 11.3293 8.99019 11.1295C8.95014 10.9396 8.85955 10.7596 8.71968 10.6197C8.57975 10.4799 8.39975 10.3792 8.20991 10.3492ZM7.24995 4.57965V9.07965H8.74995V4.57965H7.24995Z"
+    }, null, -1))
+  ], 16);
+}
+const Y = /* @__PURE__ */ _(K, [["render", X]]);
+let H = 0;
+const Q = {
+  beforeCreate() {
+    this.uuid = H.toString(), H += 1;
+  }
+}, x = { key: 0 }, ee = ["clip-path"], te = ["id"];
+function oe(e, o, u, d, p, i) {
+  return t(), l("svg", v({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    e.$attrs["svg-title"] ? (t(), l("title", x, L(e.$attrs["svg-title"]), 1)) : a("", !0),
     s("g", {
       "clip-path": "url(#uia-ui-assets/icons-16-info_filled__a" + e.uuid + ")"
-    }, i[0] || (i[0] = [
+    }, o[0] || (o[0] = [
       s("path", {
         fill: "#001222",
         "fill-rule": "evenodd",
         d: "M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z",
         "clip-rule": "evenodd"
       }, null, -1)
-    ]), 8, X),
+    ]), 8, ee),
     s("defs", null, [
       s("clipPath", {
         id: "uia-ui-assets/icons-16-info_filled__a" + e.uuid
-      }, i[1] || (i[1] = [
+      }, o[1] || (o[1] = [
         s("rect", {
           width: "16",
           height: "16",
           fill: "#fff"
         }, null, -1)
-      ]), 8, Y)
+      ]), 8, te)
     ])
   ], 16);
 }
-const x = /* @__PURE__ */ S(K, [["render", Q]]), L = {
+const se = /* @__PURE__ */ _(Q, [["render", oe]]), T = {
   "de-DE": { close: "Schließen", criticalIcon: "Kritisches Symbol", highlightIcon: "Symbol hervorheben", successIcon: "Erfolgssymbol", warningIcon: "Warnungssymbol" },
   "en-GB": { close: "Close", criticalIcon: "Critical icon", highlightIcon: "Highlight icon", successIcon: "Success icon", warningIcon: "Warning icon" },
   "en-US": { close: "Close", criticalIcon: "Critical icon", highlightIcon: "Highlight icon", successIcon: "Success icon", warningIcon: "Warning icon" },
@@ -60,62 +81,62 @@ const x = /* @__PURE__ */ S(K, [["render", Q]]), L = {
   "ja-JP": { close: "閉じる", criticalIcon: "重大アイコン", highlightIcon: "ハイライトアイコン", successIcon: "成功アイコン", warningIcon: "警告アイコン" },
   "pt-BR": { close: "Fechar", criticalIcon: "Ícone crítico", highlightIcon: "Ícone de destaque", successIcon: "Ícone de sucesso", warningIcon: "Ícone de aviso" },
   "zh-CN": { close: "关闭", criticalIcon: "关键图标", highlightIcon: "高亮图标", successIcon: "成功图标", warningIcon: "警告图标" }
-}, ee = ["role"], oe = { class: "b-alert__icon" }, te = { class: "b-alert__content" }, se = {
+}, ie = ["role"], ne = { class: "b-alert__icon" }, ce = { class: "b-alert__content" }, re = {
   key: 2,
   class: "b-alert__actions",
   "data-testid": "alert-actions"
-}, ne = {
-  i18n: { messages: L },
+}, ae = {
+  i18n: { messages: T },
   name: "bento-alert"
-}, ce = /* @__PURE__ */ N({
-  ...ne,
+}, le = /* @__PURE__ */ R({
+  ...ae,
   props: {
     closeButton: { type: Boolean, default: !1 },
     type: { default: c.HIGHLIGHT },
-    variant: { default: h.DEFAULT }
+    variant: { default: g.DEFAULT }
   },
   emits: ["close-alert"],
-  setup(e, { emit: i }) {
-    const u = R(), d = j(u), v = i, n = e, { t: f } = J({ messages: L }), a = r(() => n.variant === h.TIP), T = r(() => ({
-      [`b-alert--${n.type}`]: n.type,
-      [`b-alert--${h.TIP}`]: a.value
-    })), $ = r(() => f(`${n.type}Icon`)), B = r(() => {
-      switch (n.type) {
+  setup(e, { emit: o }) {
+    const u = F(), d = j(u), p = o, i = e, { t: w } = J({ messages: T }), C = r(() => i.variant === g.TIP), B = r(() => ({
+      [`b-alert--${i.type}`]: i.type,
+      [`b-alert--${g.TIP}`]: C.value
+    })), E = r(() => w(`${i.type}Icon`)), k = r(() => {
+      switch (i.type) {
         case c.CRITICAL:
-          return q;
+          return z;
         case c.SUCCESS:
-          return Z;
+          return q;
         case c.WARNING:
-          return z;
+          return Y;
         case c.HIGHLIGHT:
         default:
-          return x;
+          return se;
       }
-    }), E = r(() => ({
+    }), V = r(() => ({
       el: W.DIV,
-      variant: a.value ? _.CAPTION : _.BODY,
+      variant: C.value ? $.CAPTION : $.BODY,
       wide: !0
-    })), k = r(() => n.type === c.HIGHLIGHT ? "status" : "alert"), G = () => {
-      v(H.CLOSE_ALERT);
+    })), G = r(() => i.type === c.HIGHLIGHT ? "status" : "alert"), N = () => {
+      p(S.CLOSE_ALERT);
     };
-    return F(() => {
+    return M(() => {
       if (!u.default && !u.description)
         throw new Error("Alert Component requires a title or a description");
-    }), (C, ie) => (t(), g("div", {
+    }), (I, ue) => (t(), l("div", {
       class: "b-alert",
-      role: k.value
+      role: G.value
     }, [
       s("div", {
-        class: A(["b-alert__inner-container", T.value])
+        class: A(["b-alert__inner-container", B.value])
       }, [
-        s("div", oe, [
-          (t(), I(D(B.value), {
+        s("div", ne, [
+          (t(), h(D(k.value), {
             "aria-hidden": "true",
-            "svg-title": $.value
+            "svg-title": E.value
           }, null, 8, ["svg-title"]))
         ]),
-        s("div", te, [
-          o(d)("default") && !a.value ? (t(), I(o(y), {
+        s("div", ce, [
+          n(d)("default") && !C.value ? (t(), h(n(y), {
             key: 0,
             class: "b-alert__title",
             el: "div",
@@ -123,46 +144,47 @@ const x = /* @__PURE__ */ S(K, [["render", Q]]), L = {
             strongest: "",
             wide: ""
           }, {
-            default: p(() => [
-              m(C.$slots, "default", {}, void 0, !0)
+            default: m(() => [
+              f(I.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
-          })) : l("", !0),
-          o(d)("description") ? (t(), I(o(y), w({
+          })) : a("", !0),
+          n(d)("description") ? (t(), h(n(y), v({
             key: 1,
             class: "b-alert__description"
-          }, E.value, { "data-testid": "alert-description" }), {
-            default: p(() => [
-              m(C.$slots, "description", {}, void 0, !0)
+          }, V.value, { "data-testid": "alert-description" }), {
+            default: m(() => [
+              f(I.$slots, "description", {}, void 0, !0)
             ]),
             _: 3
-          }, 16)) : l("", !0),
-          o(d)("actions") && !a.value ? (t(), g("div", se, [
-            m(C.$slots, "actions", {}, void 0, !0)
-          ])) : l("", !0)
+          }, 16)) : a("", !0),
+          n(d)("actions") && !C.value ? (t(), l("div", re, [
+            f(I.$slots, "actions", {}, void 0, !0)
+          ])) : a("", !0)
         ]),
-        C.closeButton && !a.value ? (t(), I(o(M), {
+        I.closeButton && !C.value ? (t(), h(n(Z), {
           key: 0,
           class: "b-alert__close-button",
           variant: "tertiary",
           type: "button",
-          onClick: G
+          onClick: N
         }, {
-          default: p(() => [
-            P(o(U), {
-              "svg-title": o(f)("close")
+          default: m(() => [
+            P(n(U), {
+              "svg-title": n(w)("close")
             }, null, 8, ["svg-title"])
           ]),
           _: 1
-        })) : l("", !0)
+        })) : a("", !0)
       ], 2)
-    ], 8, ee));
+    ], 8, ie));
   }
-}), ve = /* @__PURE__ */ S(ce, [["__scopeId", "data-v-5c5a81b8"]]);
+}), we = /* @__PURE__ */ _(le, [["__scopeId", "data-v-5c5a81b8"]]);
 export {
-  ve as B,
-  H as a,
+  we as B,
+  Y as W,
+  S as a,
   c as b,
-  h as c
+  g as c
 };
-//# sourceMappingURL=alert.CFWN2E0b.js.map
+//# sourceMappingURL=alert.RD0qOLhx.js.map