@adyen/bento-vue3 1.66.0 → 1.68.0

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

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

package/dist/button.js

@@ -1,5 +1,5 @@
 import { B as n, b as B, a } from "./chunks/button.AB0SOQMn.js";
-import { B as s, c as u, a as i, b as r, d as c, e as d } from "./chunks/button-actions.D1pXI1AJ.js";
+import { B as s, c as u, a as i, b as r, d as c, e as d } from "./chunks/button-actions.CZdO9YOk.js";
 import { B as g } from "./chunks/toggle-button.NQwrfSr1.js";
 export {
   n as BentoButton,

package/dist/card.js

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

package/dist/checkbox.js

@@ -1,6 +1,6 @@
-import { B as t, a } from "./chunks/checkbox.fkPJvdUo.js";
+import { B as t, a } from "./chunks/checkbox.DGrG3GN1.js";
 import { C as x } from "./chunks/minus-small.DYIyF5XW.js";
-import { c as B, B as c } from "./chunks/checkbox-group.Dc5Olq0c.js";
+import { c as B, B as c } from "./chunks/checkbox-group.JRo6xNpe.js";
 export {
   t as BentoCheckbox,
   a as BentoCheckboxEvent,

package/dist/chunks/{action-bar.OzhLTUKc.js → action-bar.C93kgr7l.js}

@@ -1,12 +1,12 @@
 import { defineComponent as F, computed as c, ref as _, toRefs as G, watch as E, provide as U, nextTick as f, createBlock as b, openBlock as d, Transition as L, withCtx as B, createElementVNode as h, unref as t, normalizeClass as W, createElementBlock as K, createCommentVNode as M, createVNode as y, createTextVNode as z, toDisplayString as S } from "vue";
 import { B as D } from "./button.AB0SOQMn.js";
 import { B as J } from "./typography.DN5eC5ch.js";
-import { B as Z } from "./button-actions-with-menu.xZYmwO7S.js";
+import { B as Z } from "./button-actions-with-menu.DUccmaB2.js";
 import { C as j } from "./cross.B92GxFTY.js";
 import { u as q } from "./i18n.B6g5VX0q.js";
 import { u as Y } from "./index.FNUaPG4G.js";
-import { P as $ } from "./popover.maCMPyz8.js";
-import { B as H } from "./button-actions.D1pXI1AJ.js";
+import { P as $ } from "./popover.DYgCCUCJ.js";
+import { B as H } from "./button-actions.CZdO9YOk.js";
 import { _ as Q } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/action-bar.css";
 const N = {
@@ -200,4 +200,4 @@ const N = {
 export {
   be as B
 };
-//# sourceMappingURL=action-bar.OzhLTUKc.js.map
+//# sourceMappingURL=action-bar.C93kgr7l.js.map

package/dist/chunks/{action-bar.OzhLTUKc.js.map → action-bar.C93kgr7l.js.map}

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