@adyen/bento-vue2 1.72.0 → 1.74.0

package/dist/assets/tutorial.css

@@ -1 +1 @@
-.b-tutorial-indicator[data-v-ea45578e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-tutorial-indicator[data-v-ea45578e],.b-tutorial-indicator[data-v-ea45578e]:before,.b-tutorial-indicator[data-v-ea45578e]:after{box-sizing:border-box}.b-tutorial-indicator *[data-v-ea45578e],.b-tutorial-indicator *[data-v-ea45578e]:before,.b-tutorial-indicator *[data-v-ea45578e]:after{box-sizing:border-box}.b-tutorial-indicator[data-v-ea45578e] ::-webkit-scrollbar{height:14px;width:14px}.b-tutorial-indicator[data-v-ea45578e] ::-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-tutorial-indicator__highlight[data-v-ea45578e]{border:var(--b-tutorial-indicator-border);left:var(--b-tutorial-indicator-border-offset);pointer-events:none;position:absolute;top:var(--b-tutorial-indicator-border-offset)}.b-tutorial-indicator[data-popper-reference-hidden] .b-tutorial-indicator__highlight[data-v-ea45578e]{visibility:hidden}.b-tutorial-popover[data-v-38acdb83]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}.b-tutorial-popover[data-v-38acdb83],.b-tutorial-popover[data-v-38acdb83]:before,.b-tutorial-popover[data-v-38acdb83]:after{box-sizing:border-box}.b-tutorial-popover *[data-v-38acdb83],.b-tutorial-popover *[data-v-38acdb83]:before,.b-tutorial-popover *[data-v-38acdb83]:after{box-sizing:border-box}.b-tutorial-popover[data-v-38acdb83] ::-webkit-scrollbar{height:14px;width:14px}.b-tutorial-popover[data-v-38acdb83] ::-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-tutorial-popover__ripple[data-v-38acdb83]{border-radius:var(--b-popover-border-radius);top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute}.b-tutorial-popover__ripple[data-v-38acdb83]:before{background-color:var(--b-tutorial-popover-ripple-before-background-color);border-radius:50%;content:"";filter:var(--b-tutorial-popover-ripple-before-filter);height:var(--b-tutorial-popover-ripple-before-height);position:absolute;width:var(--b-tutorial-popover-ripple-before-width)}[data-popper-placement=bottom-start] .b-tutorial-popover__ripple[data-v-38acdb83]:before,[data-popper-placement=right-start] .b-tutorial-popover__ripple[data-v-38acdb83]:before{left:0;top:var(--b-tutorial-popover-ripple-before-position)}[data-popper-placement=bottom] .b-tutorial-popover__ripple[data-v-38acdb83]:before{left:50%;top:var(--b-tutorial-popover-ripple-before-position);transform:translate(-50%)}[data-popper-placement=bottom-end] .b-tutorial-popover__ripple[data-v-38acdb83]:before,[data-popper-placement=left-start] .b-tutorial-popover__ripple[data-v-38acdb83]:before{left:100%;top:var(--b-tutorial-popover-ripple-before-position);transform:translate(-50%)}[data-popper-placement=top-start] .b-tutorial-popover__ripple[data-v-38acdb83]:before,[data-popper-placement=right-end] .b-tutorial-popover__ripple[data-v-38acdb83]:before{bottom:var(--b-tutorial-popover-ripple-before-position);left:0}[data-popper-placement=top] .b-tutorial-popover__ripple[data-v-38acdb83]:before{bottom:var(--b-tutorial-popover-ripple-before-position);left:50%;transform:translate(-50%)}[data-popper-placement=top-end] .b-tutorial-popover__ripple[data-v-38acdb83]:before,[data-popper-placement=left-end] .b-tutorial-popover__ripple[data-v-38acdb83]:before{bottom:var(--b-tutorial-popover-ripple-before-position);left:100%;transform:translate(-50%)}[data-popper-placement=right] .b-tutorial-popover__ripple[data-v-38acdb83]:before{left:var(--b-tutorial-popover-ripple-before-position);top:50%;transform:translateY(-50%)}[data-popper-placement=left] .b-tutorial-popover__ripple[data-v-38acdb83]:before{right:var(--b-tutorial-popover-ripple-before-position);top:50%;transform:translateY(-50%)}.b-tutorial-popover__ripple[data-v-38acdb83]:after{background:radial-gradient(circle,#09ab4b00,#09ab4b33);border-radius:50%;content:"";height:var(--b-tutorial-popover-ripple-after-height);position:absolute;width:var(--b-tutorial-popover-ripple-after-width)}[data-popper-placement=bottom-start] .b-tutorial-popover__ripple[data-v-38acdb83]:after,[data-popper-placement=right-start] .b-tutorial-popover__ripple[data-v-38acdb83]:after{animation:ripple-top-left-38acdb83 2s ease-in-out infinite;left:0;top:var(--b-tutorial-popover-ripple-after-position);transform:scale(1)}[data-popper-placement=bottom] .b-tutorial-popover__ripple[data-v-38acdb83]:after{animation:ripple-top-center-38acdb83 2s ease-in-out infinite;left:50%;top:var(--b-tutorial-popover-ripple-after-position);transform:translate(-50%) scale(1)}[data-popper-placement=bottom-end] .b-tutorial-popover__ripple[data-v-38acdb83]:after,[data-popper-placement=left-start] .b-tutorial-popover__ripple[data-v-38acdb83]:after{animation:ripple-top-right-38acdb83 2s ease-in-out infinite;left:100%;top:var(--b-tutorial-popover-ripple-after-position);transform:translate(-50%) scale(1)}[data-popper-placement=top-start] .b-tutorial-popover__ripple[data-v-38acdb83]:after,[data-popper-placement=right-end] .b-tutorial-popover__ripple[data-v-38acdb83]:after{animation:ripple-bottom-left-38acdb83 2s ease-in-out infinite;bottom:var(--b-tutorial-popover-ripple-after-position);left:0;transform:scale(1)}[data-popper-placement=top] .b-tutorial-popover__ripple[data-v-38acdb83]:after{animation:ripple-bottom-center-38acdb83 2s ease-in-out infinite;bottom:var(--b-tutorial-popover-ripple-after-position);left:50%;transform:translate(-50%) scale(1)}[data-popper-placement=top-end] .b-tutorial-popover__ripple[data-v-38acdb83]:after,[data-popper-placement=left-end] .b-tutorial-popover__ripple[data-v-38acdb83]:after{animation:ripple-bottom-right-38acdb83 2s ease-in-out infinite;bottom:var(--b-tutorial-popover-ripple-after-position);left:100%;transform:translate(-50%) scale(1)}[data-popper-placement=right] .b-tutorial-popover__ripple[data-v-38acdb83]:after{animation:ripple-center-left-38acdb83 2s ease-in-out infinite;height:var(--b-tutorial-popover-ripple-after-width);left:var(--b-tutorial-popover-ripple-after-position);top:50%;transform:translateY(-50%) scale(1);width:var(--b-tutorial-popover-ripple-after-height)}[data-popper-placement=left] .b-tutorial-popover__ripple[data-v-38acdb83]:after{animation:ripple-center-right-38acdb83 2s ease-in-out infinite;height:var(--b-tutorial-popover-ripple-after-width);right:var(--b-tutorial-popover-ripple-after-position);top:50%;transform:translateY(-50%) scale(1);width:var(--b-tutorial-popover-ripple-after-height)}.b-tutorial-popover__image[data-v-38acdb83]{width:100%}.b-tutorial-popover__header[data-v-38acdb83]{display:flex;flex-grow:1;gap:var(--b-tutorial-popover-header-padding-bottom);justify-content:space-between;padding-bottom:var(--b-tutorial-popover-header-padding-bottom)}.b-tutorial-popover__steps[data-v-38acdb83]{flex-shrink:0;line-height:var(--b-tutorial-popover-steps-line-height)}.b-tutorial-popover__footer[data-v-38acdb83]{column-gap:var(--b-tutorial-popover-footer-column-gap);container-type:inline-size;display:grid;grid-template-areas:"menu actions";grid-template-columns:auto 1fr;padding-top:var(--b-tutorial-popover-footer-padding-top)}.b-tutorial-popover__menu[data-v-38acdb83]{grid-area:menu}.b-tutorial-popover__actions[data-v-38acdb83]{grid-area:actions}@keyframes ripple-top-left-38acdb83{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(47)}}@keyframes ripple-top-center-38acdb83{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-top-right-38acdb83{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-bottom-left-38acdb83{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(47)}}@keyframes ripple-bottom-center-38acdb83{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-bottom-right-38acdb83{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-center-left-38acdb83{0%{opacity:1;transform:translateY(-50%) scale(1)}to{opacity:0;transform:translateY(-50%) scale(47)}}@keyframes ripple-center-right-38acdb83{0%{opacity:1;transform:translateY(-50%) scale(1)}to{opacity:0;transform:translateY(-50%) scale(47)}}
+.b-tutorial-indicator[data-v-ea45578e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-tutorial-indicator[data-v-ea45578e],.b-tutorial-indicator[data-v-ea45578e]:before,.b-tutorial-indicator[data-v-ea45578e]:after{box-sizing:border-box}.b-tutorial-indicator *[data-v-ea45578e],.b-tutorial-indicator *[data-v-ea45578e]:before,.b-tutorial-indicator *[data-v-ea45578e]:after{box-sizing:border-box}.b-tutorial-indicator[data-v-ea45578e] ::-webkit-scrollbar{height:14px;width:14px}.b-tutorial-indicator[data-v-ea45578e] ::-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-tutorial-indicator__highlight[data-v-ea45578e]{border:var(--b-tutorial-indicator-border);left:var(--b-tutorial-indicator-border-offset);pointer-events:none;position:absolute;top:var(--b-tutorial-indicator-border-offset)}.b-tutorial-indicator[data-popper-reference-hidden] .b-tutorial-indicator__highlight[data-v-ea45578e]{visibility:hidden}.b-tutorial-popover[data-v-2dd6eac0]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}.b-tutorial-popover[data-v-2dd6eac0],.b-tutorial-popover[data-v-2dd6eac0]:before,.b-tutorial-popover[data-v-2dd6eac0]:after{box-sizing:border-box}.b-tutorial-popover *[data-v-2dd6eac0],.b-tutorial-popover *[data-v-2dd6eac0]:before,.b-tutorial-popover *[data-v-2dd6eac0]:after{box-sizing:border-box}.b-tutorial-popover[data-v-2dd6eac0] ::-webkit-scrollbar{height:14px;width:14px}.b-tutorial-popover[data-v-2dd6eac0] ::-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-tutorial-popover__ripple[data-v-2dd6eac0]{border-radius:var(--b-popover-border-radius);top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute}.b-tutorial-popover__ripple[data-v-2dd6eac0]:before{background-color:var(--b-tutorial-popover-ripple-before-background-color);border-radius:50%;content:"";filter:var(--b-tutorial-popover-ripple-before-filter);height:var(--b-tutorial-popover-ripple-before-height);position:absolute;width:var(--b-tutorial-popover-ripple-before-width)}[data-popper-placement=bottom-start] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before,[data-popper-placement=right-start] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before{left:0;top:var(--b-tutorial-popover-ripple-before-position)}[data-popper-placement=bottom] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before{left:50%;top:var(--b-tutorial-popover-ripple-before-position);transform:translate(-50%)}[data-popper-placement=bottom-end] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before,[data-popper-placement=left-start] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before{left:100%;top:var(--b-tutorial-popover-ripple-before-position);transform:translate(-50%)}[data-popper-placement=top-start] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before,[data-popper-placement=right-end] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before{bottom:var(--b-tutorial-popover-ripple-before-position);left:0}[data-popper-placement=top] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before{bottom:var(--b-tutorial-popover-ripple-before-position);left:50%;transform:translate(-50%)}[data-popper-placement=top-end] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before,[data-popper-placement=left-end] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before{bottom:var(--b-tutorial-popover-ripple-before-position);left:100%;transform:translate(-50%)}[data-popper-placement=right] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before{left:var(--b-tutorial-popover-ripple-before-position);top:50%;transform:translateY(-50%)}[data-popper-placement=left] .b-tutorial-popover__ripple[data-v-2dd6eac0]:before{right:var(--b-tutorial-popover-ripple-before-position);top:50%;transform:translateY(-50%)}.b-tutorial-popover__ripple[data-v-2dd6eac0]:after{background:radial-gradient(circle,#09ab4b00,#09ab4b33);border-radius:50%;content:"";height:var(--b-tutorial-popover-ripple-after-height);position:absolute;width:var(--b-tutorial-popover-ripple-after-width)}[data-popper-placement=bottom-start] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after,[data-popper-placement=right-start] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after{animation:ripple-top-left-2dd6eac0 2s ease-in-out infinite;left:0;top:var(--b-tutorial-popover-ripple-after-position);transform:scale(1)}[data-popper-placement=bottom] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after{animation:ripple-top-center-2dd6eac0 2s ease-in-out infinite;left:50%;top:var(--b-tutorial-popover-ripple-after-position);transform:translate(-50%) scale(1)}[data-popper-placement=bottom-end] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after,[data-popper-placement=left-start] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after{animation:ripple-top-right-2dd6eac0 2s ease-in-out infinite;left:100%;top:var(--b-tutorial-popover-ripple-after-position);transform:translate(-50%) scale(1)}[data-popper-placement=top-start] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after,[data-popper-placement=right-end] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after{animation:ripple-bottom-left-2dd6eac0 2s ease-in-out infinite;bottom:var(--b-tutorial-popover-ripple-after-position);left:0;transform:scale(1)}[data-popper-placement=top] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after{animation:ripple-bottom-center-2dd6eac0 2s ease-in-out infinite;bottom:var(--b-tutorial-popover-ripple-after-position);left:50%;transform:translate(-50%) scale(1)}[data-popper-placement=top-end] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after,[data-popper-placement=left-end] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after{animation:ripple-bottom-right-2dd6eac0 2s ease-in-out infinite;bottom:var(--b-tutorial-popover-ripple-after-position);left:100%;transform:translate(-50%) scale(1)}[data-popper-placement=right] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after{animation:ripple-center-left-2dd6eac0 2s ease-in-out infinite;height:var(--b-tutorial-popover-ripple-after-width);left:var(--b-tutorial-popover-ripple-after-position);top:50%;transform:translateY(-50%) scale(1);width:var(--b-tutorial-popover-ripple-after-height)}[data-popper-placement=left] .b-tutorial-popover__ripple[data-v-2dd6eac0]:after{animation:ripple-center-right-2dd6eac0 2s ease-in-out infinite;height:var(--b-tutorial-popover-ripple-after-width);right:var(--b-tutorial-popover-ripple-after-position);top:50%;transform:translateY(-50%) scale(1);width:var(--b-tutorial-popover-ripple-after-height)}.b-tutorial-popover__image[data-v-2dd6eac0]{width:100%}.b-tutorial-popover__header[data-v-2dd6eac0]{display:flex;flex-grow:1;gap:var(--b-tutorial-popover-header-padding-bottom);justify-content:space-between;padding-bottom:var(--b-tutorial-popover-header-padding-bottom)}.b-tutorial-popover__steps[data-v-2dd6eac0]{flex-shrink:0;line-height:var(--b-tutorial-popover-steps-line-height)}.b-tutorial-popover__footer[data-v-2dd6eac0]{column-gap:var(--b-tutorial-popover-footer-column-gap);container-type:inline-size;display:grid;grid-template-areas:"menu actions";grid-template-columns:auto 1fr;padding-top:var(--b-tutorial-popover-footer-padding-top)}.b-tutorial-popover__menu[data-v-2dd6eac0]{grid-area:menu}.b-tutorial-popover__actions[data-v-2dd6eac0]{grid-area:actions}@keyframes ripple-top-left-2dd6eac0{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(47)}}@keyframes ripple-top-center-2dd6eac0{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-top-right-2dd6eac0{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-bottom-left-2dd6eac0{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(47)}}@keyframes ripple-bottom-center-2dd6eac0{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-bottom-right-2dd6eac0{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-center-left-2dd6eac0{0%{opacity:1;transform:translateY(-50%) scale(1)}to{opacity:0;transform:translateY(-50%) scale(47)}}@keyframes ripple-center-right-2dd6eac0{0%{opacity:1;transform:translateY(-50%) scale(1)}to{opacity:0;transform:translateY(-50%) scale(47)}}

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

@@ -1 +1 @@
-.b-listbox-single-select-category[data-v-bfbc1649]{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-bfbc1649],.b-listbox-single-select-category[data-v-bfbc1649]:before,.b-listbox-single-select-category[data-v-bfbc1649]:after{box-sizing:border-box}.b-listbox-single-select-category *[data-v-bfbc1649],.b-listbox-single-select-category *[data-v-bfbc1649]:before,.b-listbox-single-select-category *[data-v-bfbc1649]:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-bfbc1649] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-single-select-category[data-v-bfbc1649] ::-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-bfbc1649]:last-child{margin-bottom:0}.b-listbox-single-select-category__label-text[data-v-bfbc1649]{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-a1e9ebff]{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-a1e9ebff],.b-checkbox-input[data-v-a1e9ebff]:before,.b-checkbox-input[data-v-a1e9ebff]:after{box-sizing:border-box}.b-checkbox-input *[data-v-a1e9ebff],.b-checkbox-input *[data-v-a1e9ebff]:before,.b-checkbox-input *[data-v-a1e9ebff]:after{box-sizing:border-box}.b-checkbox-input[data-v-a1e9ebff] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-a1e9ebff] ::-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-a1e9ebff],.b-checkbox-input--disabled *[data-v-a1e9ebff]{cursor:not-allowed}.b-checkbox-input--readonly[data-v-a1e9ebff],.b-checkbox-input--readonly *[data-v-a1e9ebff]{pointer-events:none}.b-checkbox-input__outline[data-v-a1e9ebff]{-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-a1e9ebff]{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-a1e9ebff]: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-a1e9ebff]: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-a1e9ebff]{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-a1e9ebff],.b-checkbox-input__outline[data-v-a1e9ebff]: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-a1e9ebff]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-a1e9ebff]:not(:disabled),.b-checkbox-input__outline[data-v-a1e9ebff]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-a1e9ebff]: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-a1e9ebff]:active,.b-checkbox-input__outline[data-v-a1e9ebff]: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-a1e9ebff],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-a1e9ebff]: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-a1e9ebff],.b-checkbox-input__outline[data-v-a1e9ebff]: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-a1e9ebff]:hover,.b-checkbox-input__outline[data-v-a1e9ebff]: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-a1e9ebff]:active,.b-checkbox-input__outline[data-v-a1e9ebff]: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-a1e9ebff],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-a1e9ebff]: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-a1e9ebff]:focus-visible{animation:outer-ring-default-a1e9ebff 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-a1e9ebff{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-a1e9ebff]{border:var(--b-checkbox-input-outline-unchecked-error-border)}.b-checkbox-input__outline--error[data-v-a1e9ebff]: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-a1e9ebff]: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-a1e9ebff],.b-checkbox-input__outline--readonly[data-v-a1e9ebff]:checked,.b-checkbox-input__outline--readonly[data-v-a1e9ebff]: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-a1e9ebff]{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-a1e9ebff]{color:var(--b-checkbox-input-icon-disabled-color)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-a1e9ebff]{color:var(--b-checkbox-input-icon-readonly-color)}.b-listbox-option[data-v-a1e9ebff]{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-a1e9ebff],.b-listbox-option[data-v-a1e9ebff]:before,.b-listbox-option[data-v-a1e9ebff]:after{box-sizing:border-box}.b-listbox-option[data-v-a1e9ebff] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-a1e9ebff] ::-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-a1e9ebff]:hover:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-hover-background-color)}.b-listbox-option[data-v-a1e9ebff]: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-a1e9ebff]: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-a1e9ebff]: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-a1e9ebff]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-a1e9ebff]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-a1e9ebff]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-a1e9ebff]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-hover-font-color)}}.b-listbox-option[data-v-a1e9ebff]:focus-visible{outline:none;box-shadow:var(--b-listbox-option-focus-box-shadow)}.b-listbox-option[data-v-a1e9ebff]:active:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-active-background-color)}.b-listbox-option[data-v-a1e9ebff]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-a1e9ebff]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-a1e9ebff]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-a1e9ebff]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-active-font-color)}.b-listbox-option[data-v-a1e9ebff] .b-listbox-single-select-option__text,.b-listbox-option[data-v-a1e9ebff] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-a1e9ebff] .b-listbox-single-select-option__description,.b-listbox-option[data-v-a1e9ebff] .b-listbox-multi-select__option-description{margin-top:var(--b-listbox-option-description-margin-top)}.b-listbox-option[data-v-a1e9ebff]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-a1e9ebff]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-listbox-option-description-color)}.b-listbox-option--disabled[data-v-a1e9ebff]{cursor:not-allowed}.b-listbox-option--disabled[data-v-a1e9ebff],.b-listbox-option--disabled[data-v-a1e9ebff] .b-avatar__label,.b-listbox-option--disabled[data-v-a1e9ebff] .b-country__label,.b-listbox-option--disabled[data-v-a1e9ebff] .b-payment-method__label{color:var(--b-listbox-option-disabled-font-color)}.b-listbox-option--selected[data-v-a1e9ebff]:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-selected-background-color)}.b-listbox-option--selected[data-v-a1e9ebff]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-a1e9ebff]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-a1e9ebff]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-a1e9ebff]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-selected-font-color)}.b-listbox-option--selected[data-v-a1e9ebff]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-a1e9ebff]: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-0430aa0f]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-0430aa0f]{align-items:center;display:flex;margin-left:var(--b-listbox-single-select-check-icon-margin)}.b-checkbox-input[data-v-91ed3c81]{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-91ed3c81],.b-checkbox-input[data-v-91ed3c81]:before,.b-checkbox-input[data-v-91ed3c81]:after{box-sizing:border-box}.b-checkbox-input *[data-v-91ed3c81],.b-checkbox-input *[data-v-91ed3c81]:before,.b-checkbox-input *[data-v-91ed3c81]:after{box-sizing:border-box}.b-checkbox-input[data-v-91ed3c81] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-91ed3c81] ::-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-91ed3c81],.b-checkbox-input--disabled *[data-v-91ed3c81]{cursor:not-allowed}.b-checkbox-input--readonly[data-v-91ed3c81],.b-checkbox-input--readonly *[data-v-91ed3c81]{pointer-events:none}.b-checkbox-input__outline[data-v-91ed3c81]{-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-91ed3c81]{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-91ed3c81]: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-91ed3c81]: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-91ed3c81]{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-91ed3c81],.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-91ed3c81]:not(:disabled),.b-checkbox-input__outline[data-v-91ed3c81]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:active,.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81],.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:hover,.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:active,.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:focus-visible{animation:outer-ring-default-91ed3c81 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-91ed3c81{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-91ed3c81]{border:var(--b-checkbox-input-outline-unchecked-error-border)}.b-checkbox-input__outline--error[data-v-91ed3c81]: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-91ed3c81]: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-91ed3c81],.b-checkbox-input__outline--readonly[data-v-91ed3c81]:checked,.b-checkbox-input__outline--readonly[data-v-91ed3c81]: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-91ed3c81]{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-91ed3c81]{color:var(--b-checkbox-input-icon-disabled-color)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-91ed3c81]{color:var(--b-checkbox-input-icon-readonly-color)}.b-listbox-multi-select-category[data-v-0c3b99a3]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-0c3b99a3],.b-listbox-multi-select-category[data-v-0c3b99a3]:before,.b-listbox-multi-select-category[data-v-0c3b99a3]:after{box-sizing:border-box}.b-listbox-multi-select-category *[data-v-0c3b99a3],.b-listbox-multi-select-category *[data-v-0c3b99a3]:before,.b-listbox-multi-select-category *[data-v-0c3b99a3]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-0c3b99a3] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-0c3b99a3] ::-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-0c3b99a3]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-0c3b99a3]{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-0c3b99a3]{cursor:pointer}.b-listbox-multi-select-category--static-category[data-v-0c3b99a3]{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-0c3b99a3]{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-0c3b99a3]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-0c3b99a3]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-0c3b99a3]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-0c3b99a3]{display:flex;gap:var(--b-listbox-multi-select-category-option-gap)}.b-listbox-multi-select-options[data-v-5079e573]{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-5079e573],.b-listbox-multi-select-options[data-v-5079e573]:before,.b-listbox-multi-select-options[data-v-5079e573]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-5079e573] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-5079e573] ::-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-5079e573]{padding-left:var(--b-listbox-multi-select-options-category-option-padding-left)}.b-listbox-multi-select-options__static-category-option[data-v-5079e573]{padding-left:var(--b-listbox-multi-select-options-static-category-option-padding-left)}.b-listbox-multi-select[data-v-71418c90]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-71418c90],.b-listbox-multi-select[data-v-71418c90]:before,.b-listbox-multi-select[data-v-71418c90]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-71418c90] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-71418c90] ::-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-71418c90]{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-71418c90]{display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox-multi-select__chips[data-v-71418c90]{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-aeb25a9f]{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-aeb25a9f],.b-listbox[data-v-aeb25a9f]:before,.b-listbox[data-v-aeb25a9f]:after{box-sizing:border-box}.b-listbox *[data-v-aeb25a9f],.b-listbox *[data-v-aeb25a9f]:before,.b-listbox *[data-v-aeb25a9f]:after{box-sizing:border-box}.b-listbox[data-v-aeb25a9f] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-aeb25a9f] ::-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-aeb25a9f]{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-aeb25a9f] .b-empty-state__title{color:var(--b-listbox-empty-search-message-color)}.b-listbox__loading-filtered-items[data-v-aeb25a9f]{display:flex;justify-content:center}.b-listbox__lazy-load[data-v-aeb25a9f]{display:flex;justify-content:center;margin:var(--b-listbox-lazy-load-margin)}
+.b-listbox-single-select-category[data-v-bfbc1649]{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-bfbc1649],.b-listbox-single-select-category[data-v-bfbc1649]:before,.b-listbox-single-select-category[data-v-bfbc1649]:after{box-sizing:border-box}.b-listbox-single-select-category *[data-v-bfbc1649],.b-listbox-single-select-category *[data-v-bfbc1649]:before,.b-listbox-single-select-category *[data-v-bfbc1649]:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-bfbc1649] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-single-select-category[data-v-bfbc1649] ::-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-bfbc1649]:last-child{margin-bottom:0}.b-listbox-single-select-category__label-text[data-v-bfbc1649]{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-c345b6c0]{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-c345b6c0],.b-checkbox-input[data-v-c345b6c0]:before,.b-checkbox-input[data-v-c345b6c0]:after{box-sizing:border-box}.b-checkbox-input *[data-v-c345b6c0],.b-checkbox-input *[data-v-c345b6c0]:before,.b-checkbox-input *[data-v-c345b6c0]:after{box-sizing:border-box}.b-checkbox-input[data-v-c345b6c0] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-c345b6c0] ::-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-c345b6c0],.b-checkbox-input--disabled *[data-v-c345b6c0]{cursor:not-allowed}.b-checkbox-input--readonly[data-v-c345b6c0],.b-checkbox-input--readonly *[data-v-c345b6c0]{pointer-events:none}.b-checkbox-input__outline[data-v-c345b6c0]{-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-c345b6c0]{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-c345b6c0]: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-c345b6c0]: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-c345b6c0]{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-c345b6c0],.b-checkbox-input__outline[data-v-c345b6c0]: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-c345b6c0]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-c345b6c0]:not(:disabled),.b-checkbox-input__outline[data-v-c345b6c0]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-c345b6c0]: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-c345b6c0]:active,.b-checkbox-input__outline[data-v-c345b6c0]: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-c345b6c0],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-c345b6c0]: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-c345b6c0],.b-checkbox-input__outline[data-v-c345b6c0]: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-c345b6c0]:hover,.b-checkbox-input__outline[data-v-c345b6c0]: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-c345b6c0]:active,.b-checkbox-input__outline[data-v-c345b6c0]: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-c345b6c0],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-c345b6c0]: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-c345b6c0]:focus-visible{animation:outer-ring-default-c345b6c0 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-c345b6c0{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-c345b6c0]{border:var(--b-checkbox-input-outline-unchecked-error-border)}.b-checkbox-input__outline--error[data-v-c345b6c0]: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-c345b6c0]: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-c345b6c0],.b-checkbox-input__outline--readonly[data-v-c345b6c0]:checked,.b-checkbox-input__outline--readonly[data-v-c345b6c0]: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-c345b6c0]{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-c345b6c0]{color:var(--b-checkbox-input-icon-disabled-color)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-c345b6c0]{color:var(--b-checkbox-input-icon-readonly-color)}.b-listbox-option[data-v-c345b6c0]{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-c345b6c0],.b-listbox-option[data-v-c345b6c0]:before,.b-listbox-option[data-v-c345b6c0]:after{box-sizing:border-box}.b-listbox-option[data-v-c345b6c0] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-c345b6c0] ::-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-c345b6c0]:hover:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-hover-background-color)}.b-listbox-option[data-v-c345b6c0]: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-c345b6c0]: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-c345b6c0]: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-c345b6c0]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-c345b6c0]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-c345b6c0]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-c345b6c0]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-hover-font-color)}}.b-listbox-option[data-v-c345b6c0]:focus-visible{outline:none;box-shadow:var(--b-listbox-option-focus-box-shadow)}.b-listbox-option[data-v-c345b6c0]:active:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-active-background-color)}.b-listbox-option[data-v-c345b6c0]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-c345b6c0]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-c345b6c0]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-c345b6c0]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-active-font-color)}.b-listbox-option[data-v-c345b6c0] .b-listbox-single-select-option__text,.b-listbox-option[data-v-c345b6c0] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-c345b6c0] .b-listbox-single-select-option__description,.b-listbox-option[data-v-c345b6c0] .b-listbox-multi-select__option-description{margin-top:var(--b-listbox-option-description-margin-top)}.b-listbox-option[data-v-c345b6c0]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-c345b6c0]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-listbox-option-description-color)}.b-listbox-option--disabled[data-v-c345b6c0]{cursor:not-allowed}.b-listbox-option--disabled[data-v-c345b6c0],.b-listbox-option--disabled[data-v-c345b6c0] .b-avatar__label,.b-listbox-option--disabled[data-v-c345b6c0] .b-country__label,.b-listbox-option--disabled[data-v-c345b6c0] .b-payment-method__label{color:var(--b-listbox-option-disabled-font-color)}.b-listbox-option--selected[data-v-c345b6c0]:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-selected-background-color)}.b-listbox-option--selected[data-v-c345b6c0]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-c345b6c0]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-c345b6c0]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-c345b6c0]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-selected-font-color)}.b-listbox-option--selected[data-v-c345b6c0]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-c345b6c0]: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-bb14d75a]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-bb14d75a]{align-items:center;display:flex;margin-left:var(--b-listbox-single-select-check-icon-margin)}.b-checkbox-input[data-v-91ed3c81]{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-91ed3c81],.b-checkbox-input[data-v-91ed3c81]:before,.b-checkbox-input[data-v-91ed3c81]:after{box-sizing:border-box}.b-checkbox-input *[data-v-91ed3c81],.b-checkbox-input *[data-v-91ed3c81]:before,.b-checkbox-input *[data-v-91ed3c81]:after{box-sizing:border-box}.b-checkbox-input[data-v-91ed3c81] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-input[data-v-91ed3c81] ::-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-91ed3c81],.b-checkbox-input--disabled *[data-v-91ed3c81]{cursor:not-allowed}.b-checkbox-input--readonly[data-v-91ed3c81],.b-checkbox-input--readonly *[data-v-91ed3c81]{pointer-events:none}.b-checkbox-input__outline[data-v-91ed3c81]{-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-91ed3c81]{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-91ed3c81]: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-91ed3c81]: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-91ed3c81]{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-91ed3c81],.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline--checked[data-v-91ed3c81]:not(:disabled),.b-checkbox-input__outline[data-v-91ed3c81]:checked:hover,.b-checkbox-input__icon:hover+.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:active,.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81],.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:hover,.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:active,.b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81],.b-checkbox-input--disabled .b-checkbox-input__outline[data-v-91ed3c81]: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-91ed3c81]:focus-visible{animation:outer-ring-default-91ed3c81 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-91ed3c81{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-91ed3c81]{border:var(--b-checkbox-input-outline-unchecked-error-border)}.b-checkbox-input__outline--error[data-v-91ed3c81]: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-91ed3c81]: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-91ed3c81],.b-checkbox-input__outline--readonly[data-v-91ed3c81]:checked,.b-checkbox-input__outline--readonly[data-v-91ed3c81]: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-91ed3c81]{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-91ed3c81]{color:var(--b-checkbox-input-icon-disabled-color)}.b-checkbox-input--readonly .b-checkbox-input__icon[data-v-91ed3c81]{color:var(--b-checkbox-input-icon-readonly-color)}.b-listbox-multi-select-category[data-v-c5cf40ae]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-c5cf40ae],.b-listbox-multi-select-category[data-v-c5cf40ae]:before,.b-listbox-multi-select-category[data-v-c5cf40ae]:after{box-sizing:border-box}.b-listbox-multi-select-category *[data-v-c5cf40ae],.b-listbox-multi-select-category *[data-v-c5cf40ae]:before,.b-listbox-multi-select-category *[data-v-c5cf40ae]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-c5cf40ae] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-c5cf40ae] ::-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-c5cf40ae]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-c5cf40ae]{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-c5cf40ae]{cursor:pointer}.b-listbox-multi-select-category--static-category[data-v-c5cf40ae]{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-c5cf40ae]{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-c5cf40ae]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-c5cf40ae]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-c5cf40ae]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-c5cf40ae]{display:flex;gap:var(--b-listbox-multi-select-category-option-gap)}.b-listbox-multi-select-options[data-v-d7057fb8]{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-d7057fb8],.b-listbox-multi-select-options[data-v-d7057fb8]:before,.b-listbox-multi-select-options[data-v-d7057fb8]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-d7057fb8] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-d7057fb8] ::-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-d7057fb8]{padding-left:var(--b-listbox-multi-select-options-category-option-padding-left)}.b-listbox-multi-select-options__static-category-option[data-v-d7057fb8]{padding-left:var(--b-listbox-multi-select-options-static-category-option-padding-left)}.b-listbox-multi-select[data-v-4f300b0f]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-4f300b0f],.b-listbox-multi-select[data-v-4f300b0f]:before,.b-listbox-multi-select[data-v-4f300b0f]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-4f300b0f] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-4f300b0f] ::-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-4f300b0f]{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-4f300b0f]{display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox-multi-select__chips[data-v-4f300b0f]{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-35cb3605]{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-35cb3605],.b-listbox[data-v-35cb3605]:before,.b-listbox[data-v-35cb3605]:after{box-sizing:border-box}.b-listbox *[data-v-35cb3605],.b-listbox *[data-v-35cb3605]:before,.b-listbox *[data-v-35cb3605]:after{box-sizing:border-box}.b-listbox[data-v-35cb3605] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-35cb3605] ::-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-35cb3605]{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-35cb3605] .b-empty-state__title{color:var(--b-listbox-empty-search-message-color)}.b-listbox__loading-filtered-items[data-v-35cb3605]{display:flex;justify-content:center}.b-listbox__lazy-load[data-v-35cb3605]{display:flex;justify-content:center;margin:var(--b-listbox-lazy-load-margin)}

package/dist/avatar.js

@@ -1,4 +1,4 @@
-import { B as r } from "./chunks/avatar.KdcsNOsm.js";
+import { B as r } from "./chunks/avatar.CeDqq2Z-.js";
 export {
   r as BentoAvatar
 };

package/dist/button.js

@@ -1,6 +1,6 @@
-import { B as n, b as B, a } from "./chunks/button.CilT7NmM.js";
-import { a as s } from "./chunks/ai-button.FRPkTHz6.js";
-import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.55vIvDsX.js";
+import { B as n, b as B, a } from "./chunks/button.CS_kdxYh.js";
+import { a as s } from "./chunks/ai-button.DBwtNkyS.js";
+import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.B81vY51z.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.C11dmth8.js";
+import { c as o, B as r, a as t } from "./chunks/card.VOCKI7Ad.js";
 export {
   o as BentoCard,
   r as BentoCardBackground,

package/dist/checkbox.js

@@ -1,6 +1,6 @@
-import { B as t, a } from "./chunks/checkbox.D7-f9Y6w.js";
+import { B as t, a } from "./chunks/checkbox.BPtHAAEa.js";
 import { C as x } from "./chunks/minus-small.DJacLGTw.js";
-import { c as B, B as c } from "./chunks/checkbox-group.Cr3WdkDM.js";
+import { c as B, B as c } from "./chunks/checkbox-group.DETXTJqI.js";
 export {
   t as BentoCheckbox,
   a as BentoCheckboxEvent,

package/dist/chip.js

@@ -1,4 +1,4 @@
-import { B as p } from "./chunks/chip.omQX_Ziq.js";
+import { B as p } from "./chunks/chip.fqEIkR-s.js";
 export {
   p as BentoChip
 };

package/dist/chunks/{accordion-item.CoqaoVnC.js → accordion-item.nQhXD2tV.js}

@@ -5,7 +5,7 @@ import { C as O } from "./chevron-down.eYtgv5ly.js";
 import { C as T } from "./chevron-up.d8cwIlA_.js";
 import { g as p } from "./generate-uid.NJ8tVoha.js";
 import { o as N } from "./resize.Bqks3WUm.js";
-import { u as S } from "./i18n.BQkEbtPM.js";
+import { u as S } from "./index.B6WW_F-J.js";
 import { u as z } from "./use-expandable-content-height.GkjjbmPy.js";
 import "../assets/accordion-item.css";
 const f = Symbol("accordion title size injection key"), R = {}, $ = /* @__PURE__ */ u({
@@ -114,4 +114,4 @@ export {
   Q as a,
   V as b
 };
-//# sourceMappingURL=accordion-item.CoqaoVnC.js.map
+//# sourceMappingURL=accordion-item.nQhXD2tV.js.map

package/dist/chunks/{accordion-item.CoqaoVnC.js.map → accordion-item.nQhXD2tV.js.map}

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

package/dist/chunks/{action-bar.Bxrtx1Vj.js → action-bar.MXZTIUNk.js}

@@ -1,11 +1,11 @@
 import { defineComponent as O, computed as c, ref as b, toRefs as P, watch as g, provide as V, nextTick as B } from "vue";
-import { B as R } from "./button.CilT7NmM.js";
+import { B as R } from "./button.CS_kdxYh.js";
 import { B as F } from "./typography.hlOAxsEn.js";
-import { B as W } from "./button-actions-with-menu.BtWUxmSL.js";
+import { B as W } from "./button-actions-with-menu.BFRkPi6g.js";
 import { C as L } from "./cross.CC_B-vG-.js";
-import { u as k } from "./i18n.BQkEbtPM.js";
+import { u as k } from "./index.B6WW_F-J.js";
 import { u as M } from "./index.BDK4hwK_.js";
-import { P as U, B as z } from "./button-actions.55vIvDsX.js";
+import { P as U, B as z } from "./button-actions.B81vY51z.js";
 import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/action-bar.css";
 const G = {
@@ -157,4 +157,4 @@ const st = Y.exports;
 export {
   st as B
 };
-//# sourceMappingURL=action-bar.Bxrtx1Vj.js.map
+//# sourceMappingURL=action-bar.MXZTIUNk.js.map

package/dist/chunks/{action-bar.Bxrtx1Vj.js.map → action-bar.MXZTIUNk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.Bxrtx1Vj.js","sources":["../../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, type PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type 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([\"close\", \"cancel\", \"save\"]);\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","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgPIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAN,EAAA,UAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;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,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAxB,CAAA;AAGA,UAAAyB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,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,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAL,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA4B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA5B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA4B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAR,IAAAH,KAAAkB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAR,KAAAe,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAd,IACIgB,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"action-bar.MXZTIUNk.js","sources":["../../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, type PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type 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([\"close\", \"cancel\", \"save\"]);\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","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgPIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAN,EAAA,UAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;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,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAxB,CAAA;AAGA,UAAAyB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,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,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAL,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA4B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA5B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA4B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAR,IAAAH,KAAAkB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAR,KAAAe,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAd,IACIgB,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{ai-button.FRPkTHz6.js → ai-button.DBwtNkyS.js}

@@ -1,5 +1,5 @@
 import { defineComponent as u, useSlots as _, computed as d, onMounted as f } from "vue";
-import { B as p } from "./button.CilT7NmM.js";
+import { B as p } from "./button.CS_kdxYh.js";
 /* empty css              */
 import { n as l } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as m } from "./use-has-slot.C9lQZ6nz.js";
@@ -64,4 +64,4 @@ const I = w.exports;
 export {
   I as a
 };
-//# sourceMappingURL=ai-button.FRPkTHz6.js.map
+//# sourceMappingURL=ai-button.DBwtNkyS.js.map

package/dist/chunks/{ai-button.FRPkTHz6.js.map → ai-button.DBwtNkyS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-button.FRPkTHz6.js","sources":["../../../ui-assets/icons-16/dist/vue/artificial-intelligence-ai-filled.vue","../../src/components/button/components/ai-button/ai-button.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-artificial_intelligence_ai_filled__a' + uuid + ')'\"><path fill=\"#001222\" d=\"M8.75 2.75C8.75 5.23579 10.7642 7.25 13.25 7.25H15.5V8.75H13.25C10.7642 8.75 8.75 10.7642 8.75 13.25V15.5H7.25V13.25C7.25 10.7642 5.23579 8.75 2.75 8.75H0.5V7.25H2.75C5.23579 7.25 7.25 5.23579 7.25 2.75V0.5H8.75V2.75Z\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-artificial_intelligence_ai_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-ai-button\" :class=\"conditionalClass\">\n        <div class=\"b-ai-button__animation\" />\n\n        <bento-button\n            class=\"b-ai-button__button\"\n            :condensed=\"condensed\"\n            :disabled=\"disabled\"\n            :inverse=\"inverse\"\n            variant=\"secondary\"\n            @click.capture.stop=\"onClick\"\n        >\n            <template #iconLeft>\n                <ai-filled-icon aria-hidden=\"true\" class=\"b-ai-button__icon\" />\n            </template>\n\n            <slot></slot>\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import BentoButton from '../../button.vue';\n    import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAiButtonProps } from './ai-button.types';\n\n    const props = defineProps({\n  condensed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  inverse: { type: Boolean, default: false },\n  link: { default: undefined },\n  type: { default: 'button' }\n});\n\n    const emit = defineEmits([\"click\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClass = computed(() => ({\n        'b-ai-button--disabled': props.disabled,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        emit('click', e);\n    };\n\n    onMounted(() => {\n        if (!hasSlot('default')) {\n            printDevelopmentWarning('An icon-only button cannot be a AI button');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * AI Button component is used for cases where pressing a button starts an AI-related action.\n     *\n     * @example\n     * import { BentoAiButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiButton },\n     *     template: `\n     *        <bento-ai-button @click=\"onClick\">Generate with AI</bento-ai-button>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-ai-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-button.scss\" />\n"],"names":["uuid","_sfc_main$1","__default__","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","props","onClick","e","emit","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;qBC4DIE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBArCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAC,EAAA;AAAA,IACN,EAAA,GAGnCC,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAC,EAAA,SAAAD,CAAA;AAAA,IAAe;AAGnB,WAAAE,EAAA,MAAA;AACI,MAAAR,EAAA,SAAA,KACIS,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-button.DBwtNkyS.js","sources":["../../../ui-assets/icons-16/dist/vue/artificial-intelligence-ai-filled.vue","../../src/components/button/components/ai-button/ai-button.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-artificial_intelligence_ai_filled__a' + uuid + ')'\"><path fill=\"#001222\" d=\"M8.75 2.75C8.75 5.23579 10.7642 7.25 13.25 7.25H15.5V8.75H13.25C10.7642 8.75 8.75 10.7642 8.75 13.25V15.5H7.25V13.25C7.25 10.7642 5.23579 8.75 2.75 8.75H0.5V7.25H2.75C5.23579 7.25 7.25 5.23579 7.25 2.75V0.5H8.75V2.75Z\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-artificial_intelligence_ai_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-ai-button\" :class=\"conditionalClass\">\n        <div class=\"b-ai-button__animation\" />\n\n        <bento-button\n            class=\"b-ai-button__button\"\n            :condensed=\"condensed\"\n            :disabled=\"disabled\"\n            :inverse=\"inverse\"\n            variant=\"secondary\"\n            @click.capture.stop=\"onClick\"\n        >\n            <template #iconLeft>\n                <ai-filled-icon aria-hidden=\"true\" class=\"b-ai-button__icon\" />\n            </template>\n\n            <slot></slot>\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import BentoButton from '../../button.vue';\n    import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAiButtonProps } from './ai-button.types';\n\n    const props = defineProps({\n  condensed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  inverse: { type: Boolean, default: false },\n  link: { default: undefined },\n  type: { default: 'button' }\n});\n\n    const emit = defineEmits([\"click\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClass = computed(() => ({\n        'b-ai-button--disabled': props.disabled,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        emit('click', e);\n    };\n\n    onMounted(() => {\n        if (!hasSlot('default')) {\n            printDevelopmentWarning('An icon-only button cannot be a AI button');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * AI Button component is used for cases where pressing a button starts an AI-related action.\n     *\n     * @example\n     * import { BentoAiButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiButton },\n     *     template: `\n     *        <bento-ai-button @click=\"onClick\">Generate with AI</bento-ai-button>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-ai-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-button.scss\" />\n"],"names":["uuid","_sfc_main$1","__default__","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","props","onClick","e","emit","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;qBC4DIE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBArCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAC,EAAA;AAAA,IACN,EAAA,GAGnCC,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAC,EAAA,SAAAD,CAAA;AAAA,IAAe;AAGnB,WAAAE,EAAA,MAAA;AACI,MAAAR,EAAA,SAAA,KACIS,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{alert.CMyL-zWT.js → alert.SZPP58tl.js}

@@ -1,6 +1,6 @@
 import { defineComponent as I, useSlots as y, computed as r, onMounted as T } from "vue";
 import { a as c, c as S, B as b } from "./typography.hlOAxsEn.js";
-import { B as H } from "./button.CilT7NmM.js";
+import { B as H } from "./button.CS_kdxYh.js";
 import { C as L } from "./cross-small.CoQUe8SS.js";
 import { W as B } from "./warning-filled.CbJ1pcB2.js";
 import { C as w } from "./cross-circle-fill.DTDtgLMf.js";
@@ -8,7 +8,7 @@ import { C as R } from "./checkmark-circle-fill.BttTCjrM.js";
 /* empty css              */
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as E } from "./use-has-slot.C9lQZ6nz.js";
-import { u as G } from "./i18n.BQkEbtPM.js";
+import { u as G } from "./index.B6WW_F-J.js";
 import "../assets/alert.css";
 var i = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.TIP = "tip", a))(i || {}), o = /* @__PURE__ */ ((a) => (a.WARNING = "warning", a.CRITICAL = "critical", a.HIGHLIGHT = "highlight", a.SUCCESS = "success", a))(o || {}), _ = /* @__PURE__ */ ((a) => (a.CLOSE_ALERT = "close-alert", a))(_ || {});
 let C = 0;
@@ -100,4 +100,4 @@ export {
   o as b,
   _ as c
 };
-//# sourceMappingURL=alert.CMyL-zWT.js.map
+//# sourceMappingURL=alert.SZPP58tl.js.map

package/dist/chunks/{alert.CMyL-zWT.js.map → alert.SZPP58tl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.CMyL-zWT.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><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\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GC8HIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert.SZPP58tl.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><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\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GC8HIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{avatar.KdcsNOsm.js → avatar.CeDqq2Z-.js}

@@ -55,17 +55,17 @@ const h = E.exports, A = {
 });
 var R = function() {
   var a = this, r = a._self._c, e = a._self._setupProxy;
-  return r("div", { staticClass: "b-avatar", attrs: { "aria-label": e.computedAriaLabel } }, [r(e.AvatarImage, { attrs: { src: a.src, username: e.computedUsername, variant: e.BentoAvatarImageVariant.SMALL, color: e.avatarColor } }), a.iconOnly ? a._e() : r(e.BentoTypography, { staticClass: "b-avatar__label", attrs: { el: "span", variant: "body" } }, [a._v(" " + a._s(e.username) + " ")])], 1);
+  return r("div", { staticClass: "b-avatar", attrs: { role: a.iconOnly ? "img" : null, "aria-label": e.computedAriaLabel } }, [r(e.AvatarImage, { attrs: { src: a.src, username: e.computedUsername, variant: e.BentoAvatarImageVariant.SMALL, color: e.avatarColor } }), a.iconOnly ? a._e() : r(e.BentoTypography, { staticClass: "b-avatar__label", attrs: { el: "span", variant: "body" } }, [a._v(" " + a._s(e.username) + " ")])], 1);
 }, $ = [], B = /* @__PURE__ */ v(
   O,
   R,
   $,
   !1,
   null,
-  "2be0bf91"
+  "0b132be2"
 );
 const W = B.exports;
 export {
   W as B
 };
-//# sourceMappingURL=avatar.KdcsNOsm.js.map
+//# sourceMappingURL=avatar.CeDqq2Z-.js.map

package/dist/chunks/avatar.CeDqq2Z-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.CeDqq2Z-.js","sources":["../../src/composables/initials.ts","../../src/components/avatar/components/avatar-image/avatar-image.types.ts","../../src/components/avatar/components/avatar-image/avatar-image.vue","../../src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, type ComputedRef, ref } from 'vue';\nimport { type MaybeRef } from '@/types/refs';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  color: { default: BentoAvatarImageColor.YELLOW },\n  src: { default: null },\n  username: { default: null },\n  variant: { default: BentoAvatarImageVariant.LARGE }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Image used as user profile inside bento-avatar.\n     *\n     * @example\n     * import { AvatarImage } from './components/avatar-image';\n     *\n     * export default {\n     *     components: { AvatarImage },\n     *     template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n    <div class=\"b-avatar\" :role=\"iconOnly ? 'img' : null\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  username: null\n});\n\n    const { username } = toRefs(props);\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\n    const initials = useInitials(username);\n\n    // Returns the UTF-16 char code\n    const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n    // Returns a computed color based on the letter passed\n    const avatarColor = computed(() => {\n        const numberOfAlphabetLetters = 26;\n        const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n        const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n        if (charCode.value <= rangeStep) {\n            return BentoAvatarImageColor.YELLOW;\n        }\n        if (charCode.value <= rangeStep * 2) {\n            return BentoAvatarImageColor.BLUE;\n        }\n        if (charCode.value <= rangeStep * 3) {\n            return BentoAvatarImageColor.GREEN;\n        }\n        return BentoAvatarImageColor.RED;\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoAvatar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAvatar },\n     *     template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {\n        name: 'bento-avatar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","toRefs","props","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACwCR,MAAAE,IAAA,CAAA;;;;;;;;;;iBArBA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;qBCqC9CG,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1CA,EAAA,UAAAb,EAAA,IAAAS,EAAAC,CAAA,GAEAI,IAAAX,EAAA,MAAAO,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAT,IAAAE,EAAA,MAAAO,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAC,IAAAZ,EAAAC,CAAA,GAGAe,IAAAZ,EAAA,MAAAQ,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAb,EAAA,MAAA;AAGI,YAAAc,IAAA,KADA,OAAA,KAAAX,CAAA,EAAA;AAGA,aAAAS,EAAA,SAAAE,IACIX,EAAA,SAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,OAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{base-modal.DInbAZlp.js → base-modal.BMdlCSd0.js}

@@ -1,14 +1,14 @@
 import { defineComponent as T, useSlots as Y, ref as c, computed as l, inject as Q, watch as w, nextTick as X, onUnmounted as Z, useAttrs as V, toRefs as tt, onMounted as et, provide as D } from "vue";
-import { B as at } from "./button.CilT7NmM.js";
+import { B as at } from "./button.CS_kdxYh.js";
 import { B as ot } from "./focus-trap.BJfpIboH.js";
 import { u as j } from "./use-has-slot.C9lQZ6nz.js";
-import { u as nt } from "./i18n.BQkEbtPM.js";
-import { j as st } from "./button-actions.55vIvDsX.js";
+import { u as nt } from "./index.B6WW_F-J.js";
+import { j as st } from "./button-actions.B81vY51z.js";
 import { g as lt } from "./generate-uid.NJ8tVoha.js";
 import { C as it } from "./cross.CC_B-vG-.js";
-import { D as ut, B as ct, b as rt, a as dt } from "./dialog-page.LA_ZhbYa.js";
+import { D as ut, B as ct, b as rt, a as dt } from "./dialog-page.D23qNwKW.js";
 import { B as mt } from "./typography.hlOAxsEn.js";
-import { F as pt } from "./footer-actions.BTELM6rh.js";
+import { F as pt } from "./footer-actions.CLq_kBwY.js";
 import { o as ft } from "./resize.Bqks3WUm.js";
 import { a as gt, G as _t } from "./grid-layout.1aIiz2N_.js";
 import { n as q } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -293,7 +293,7 @@ var Dt = function() {
   Gt,
   !1,
   null,
-  "55344d19"
+  "5f696aad"
 );
 const Qt = Tt.exports;
 export {
@@ -307,4 +307,4 @@ export {
   It as g,
   Qt as h
 };
-//# sourceMappingURL=base-modal.DInbAZlp.js.map
+//# sourceMappingURL=base-modal.BMdlCSd0.js.map