@adyen/bento-vue3 1.26.0 → 1.28.0

package/dist/assets/tutorial.css

@@ -0,0 +1 @@
+.b-tutorial-indicator[data-v-672deffb]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-tutorial-indicator[data-v-672deffb],.b-tutorial-indicator[data-v-672deffb]:before,.b-tutorial-indicator[data-v-672deffb]:after{box-sizing:border-box}.b-tutorial-indicator *[data-v-672deffb],.b-tutorial-indicator *[data-v-672deffb]:before,.b-tutorial-indicator *[data-v-672deffb]:after{box-sizing:border-box}.b-tutorial-indicator[data-v-672deffb] ::-webkit-scrollbar{height:14px;width:14px}.b-tutorial-indicator[data-v-672deffb] ::-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-672deffb]{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-672deffb]{visibility:hidden}svg.ui-assets-icons-16{display:inline-flex;flex-shrink:0}svg.ui-assets-icons-16,svg.ui-assets-icons-16 *{fill:currentcolor}.b-tutorial-popover[data-v-9513f48c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}.b-tutorial-popover[data-v-9513f48c],.b-tutorial-popover[data-v-9513f48c]:before,.b-tutorial-popover[data-v-9513f48c]:after{box-sizing:border-box}.b-tutorial-popover *[data-v-9513f48c],.b-tutorial-popover *[data-v-9513f48c]:before,.b-tutorial-popover *[data-v-9513f48c]:after{box-sizing:border-box}.b-tutorial-popover[data-v-9513f48c] ::-webkit-scrollbar{height:14px;width:14px}.b-tutorial-popover[data-v-9513f48c] ::-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-9513f48c]{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-9513f48c]: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-9513f48c]:before,[data-popper-placement=right-start] .b-tutorial-popover__ripple[data-v-9513f48c]:before{left:0;top:var(--b-tutorial-popover-ripple-before-position)}[data-popper-placement=bottom] .b-tutorial-popover__ripple[data-v-9513f48c]: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-9513f48c]:before,[data-popper-placement=left-start] .b-tutorial-popover__ripple[data-v-9513f48c]: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-9513f48c]:before,[data-popper-placement=right-end] .b-tutorial-popover__ripple[data-v-9513f48c]:before{bottom:var(--b-tutorial-popover-ripple-before-position);left:0}[data-popper-placement=top] .b-tutorial-popover__ripple[data-v-9513f48c]: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-9513f48c]:before,[data-popper-placement=left-end] .b-tutorial-popover__ripple[data-v-9513f48c]:before{bottom:var(--b-tutorial-popover-ripple-before-position);left:100%;transform:translate(-50%)}[data-popper-placement=right] .b-tutorial-popover__ripple[data-v-9513f48c]:before{left:var(--b-tutorial-popover-ripple-before-position);top:50%;transform:translateY(-50%)}[data-popper-placement=left] .b-tutorial-popover__ripple[data-v-9513f48c]:before{right:var(--b-tutorial-popover-ripple-before-position);top:50%;transform:translateY(-50%)}.b-tutorial-popover__ripple[data-v-9513f48c]: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-9513f48c]:after,[data-popper-placement=right-start] .b-tutorial-popover__ripple[data-v-9513f48c]:after{animation:ripple-top-left-9513f48c 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-9513f48c]:after{animation:ripple-top-center-9513f48c 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-9513f48c]:after,[data-popper-placement=left-start] .b-tutorial-popover__ripple[data-v-9513f48c]:after{animation:ripple-top-right-9513f48c 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-9513f48c]:after,[data-popper-placement=right-end] .b-tutorial-popover__ripple[data-v-9513f48c]:after{animation:ripple-bottom-left-9513f48c 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-9513f48c]:after{animation:ripple-bottom-center-9513f48c 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-9513f48c]:after,[data-popper-placement=left-end] .b-tutorial-popover__ripple[data-v-9513f48c]:after{animation:ripple-bottom-right-9513f48c 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-9513f48c]:after{animation:ripple-center-left-9513f48c 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-9513f48c]:after{animation:ripple-center-right-9513f48c 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-9513f48c]{width:100%}.b-tutorial-popover__header[data-v-9513f48c]{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-9513f48c]{flex-shrink:0;line-height:var(--b-tutorial-popover-steps-line-height)}.b-tutorial-popover__footer[data-v-9513f48c]{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-9513f48c]{grid-area:menu}.b-tutorial-popover__actions[data-v-9513f48c]{grid-area:actions}@keyframes ripple-top-left-9513f48c{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(47)}}@keyframes ripple-top-center-9513f48c{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-top-right-9513f48c{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-bottom-left-9513f48c{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(47)}}@keyframes ripple-bottom-center-9513f48c{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-bottom-right-9513f48c{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(47)}}@keyframes ripple-center-left-9513f48c{0%{opacity:1;transform:translateY(-50%) scale(1)}to{opacity:0;transform:translateY(-50%) scale(47)}}@keyframes ripple-center-right-9513f48c{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-a90eff17]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:var(--b-listbox-single-select-category-margin-bottom)}.b-listbox-single-select-category[data-v-a90eff17],.b-listbox-single-select-category[data-v-a90eff17]:before,.b-listbox-single-select-category[data-v-a90eff17]:after{box-sizing:border-box}.b-listbox-single-select-category *[data-v-a90eff17],.b-listbox-single-select-category *[data-v-a90eff17]:before,.b-listbox-single-select-category *[data-v-a90eff17]:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-a90eff17] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-single-select-category[data-v-a90eff17] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-single-select-category[data-v-a90eff17]:last-child{margin-bottom:0}.b-listbox-single-select-category__label-text[data-v-a90eff17]{color:var(--b-listbox-single-select-category-label-text-color);padding:var(--b-listbox-single-select-category-label-text-padding)}.b-listbox-option[data-v-18a61f5d]{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-18a61f5d],.b-listbox-option[data-v-18a61f5d]:before,.b-listbox-option[data-v-18a61f5d]:after{box-sizing:border-box}.b-listbox-option[data-v-18a61f5d] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-18a61f5d] ::-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-18a61f5d]:hover:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-hover-background-color)}.b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-hover-font-color)}.b-legacy-theme .b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-hover-font-color)}}.b-listbox-option[data-v-18a61f5d]:focus-visible{outline:none}.b-listbox-option[data-v-18a61f5d]:focus-visible:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-focus-background-color);color:var(--b-listbox-option-focus-font-color)}.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-active-background-color)}.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-active-font-color)}.b-legacy-theme .b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-active-description-color)}.b-listbox-option[data-v-18a61f5d] .b-listbox-single-select-option__text,.b-listbox-option[data-v-18a61f5d] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-18a61f5d] .b-listbox-single-select-option__description,.b-listbox-option[data-v-18a61f5d] .b-listbox-multi-select__option-description{margin-top:var(--b-listbox-option-description-margin-top)}.b-listbox-option[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-listbox-option-description-color)}.b-listbox-option--disabled[data-v-18a61f5d]{cursor:not-allowed}.b-listbox-option--disabled[data-v-18a61f5d],.b-listbox-option--disabled[data-v-18a61f5d] .b-avatar__label,.b-listbox-option--disabled[data-v-18a61f5d] .b-country__label,.b-listbox-option--disabled[data-v-18a61f5d] .b-payment-method__label{color:var(--b-listbox-option-disabled-font-color)}.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-selected-background-color)}.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-selected-font-color)}.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-18a61f5d]: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-e8cc847b]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-e8cc847b]{align-items:center;display:flex;margin-left:var(--b-listbox-single-select-check-icon-margin)}.b-listbox-multi-select-category[data-v-9a00de22]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-9a00de22],.b-listbox-multi-select-category[data-v-9a00de22]:before,.b-listbox-multi-select-category[data-v-9a00de22]:after{box-sizing:border-box}.b-listbox-multi-select-category *[data-v-9a00de22],.b-listbox-multi-select-category *[data-v-9a00de22]:before,.b-listbox-multi-select-category *[data-v-9a00de22]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-9a00de22] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-9a00de22] ::-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-9a00de22]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-9a00de22]{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-9a00de22]{cursor:pointer}.b-listbox-multi-select-category--static-category[data-v-9a00de22]{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-9a00de22]{color:var(--b-listbox-multi-select-category-static-category-label-text-color)}.b-listbox-multi-select-category__label[data-v-9a00de22]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-9a00de22]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-9a00de22]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-9a00de22]{display:flex;gap:var(--b-listbox-multi-select-category-option-gap)}.b-listbox-multi-select-options[data-v-25938a72]{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-25938a72],.b-listbox-multi-select-options[data-v-25938a72]:before,.b-listbox-multi-select-options[data-v-25938a72]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-25938a72] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-25938a72] ::-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-25938a72]{padding-left:var(--b-listbox-multi-select-options-category-option-padding-left)}.b-listbox-multi-select-options__static-category-option[data-v-25938a72]{padding-left:var(--b-listbox-multi-select-options-static-category-option-padding-left)}.b-listbox-multi-select-chips[data-v-7c5f8bdb]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--b-listbox-multi-select-chips-gap);padding:var(--b-listbox-multi-select-chips-padding)}.b-listbox-multi-select-chips[data-v-7c5f8bdb],.b-listbox-multi-select-chips[data-v-7c5f8bdb]:before,.b-listbox-multi-select-chips[data-v-7c5f8bdb]:after{box-sizing:border-box}.b-listbox-multi-select-chips[data-v-7c5f8bdb] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-chips[data-v-7c5f8bdb] ::-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-chips__chip[data-v-7c5f8bdb]{background:var(--b-listbox-multi-select-chips-chip-background);border-radius:var(--b-listbox-multi-select-chips-chip-border-radius);display:flex;gap:var(--b-listbox-multi-select-chips-chip-gap);padding:var(--b-listbox-multi-select-chips-chip-padding)}.b-listbox-multi-select-chips__chip[data-v-7c5f8bdb]:focus-visible{animation:outer-ring-default-7c5f8bdb 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-7c5f8bdb{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-listbox-multi-select-chips__chip[data-v-7c5f8bdb]:hover{background:var(--b-listbox-multi-select-chips-chip-hover-background)}.b-listbox-multi-select-chips__chip[data-v-7c5f8bdb]:active{background:var(--b-listbox-multi-select-chips-chip-active-background)}.b-listbox-multi-select-chips__chip[data-v-7c5f8bdb]:disabled{background:var(--b-listbox-multi-select-chips-chip-disabled-background);color:var(--b-listbox-multi-select-chips-chip-disabled-color)}.b-listbox-multi-select-chips__option-text[data-v-7c5f8bdb]{display:flex;overflow-wrap:anywhere}.b-listbox-multi-select[data-v-0ca61721]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-0ca61721],.b-listbox-multi-select[data-v-0ca61721]:before,.b-listbox-multi-select[data-v-0ca61721]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-0ca61721] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-0ca61721] ::-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-0ca61721]{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-0ca61721]{display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox[data-v-f5e00d2e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-listbox-background-color);overflow-y:auto;padding:var(--b-listbox-padding)}.b-listbox[data-v-f5e00d2e],.b-listbox[data-v-f5e00d2e]:before,.b-listbox[data-v-f5e00d2e]:after{box-sizing:border-box}.b-listbox *[data-v-f5e00d2e],.b-listbox *[data-v-f5e00d2e]:before,.b-listbox *[data-v-f5e00d2e]:after{box-sizing:border-box}.b-listbox[data-v-f5e00d2e] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-f5e00d2e] ::-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-f5e00d2e]{color:var(--b-listbox-empty-search-message-color);padding:var(--b-listbox-empty-search-message-padding);text-align:center}.b-listbox__lazy-load[data-v-f5e00d2e]{display:flex;justify-content:center;margin:var(--b-listbox-lazy-load-margin)}
+.b-listbox-single-select-category[data-v-a90eff17]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:var(--b-listbox-single-select-category-margin-bottom)}.b-listbox-single-select-category[data-v-a90eff17],.b-listbox-single-select-category[data-v-a90eff17]:before,.b-listbox-single-select-category[data-v-a90eff17]:after{box-sizing:border-box}.b-listbox-single-select-category *[data-v-a90eff17],.b-listbox-single-select-category *[data-v-a90eff17]:before,.b-listbox-single-select-category *[data-v-a90eff17]:after{box-sizing:border-box}.b-listbox-single-select-category[data-v-a90eff17] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-single-select-category[data-v-a90eff17] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-listbox-single-select-category[data-v-a90eff17]:last-child{margin-bottom:0}.b-listbox-single-select-category__label-text[data-v-a90eff17]{color:var(--b-listbox-single-select-category-label-text-color);padding:var(--b-listbox-single-select-category-label-text-padding)}.b-listbox-option[data-v-18a61f5d]{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-18a61f5d],.b-listbox-option[data-v-18a61f5d]:before,.b-listbox-option[data-v-18a61f5d]:after{box-sizing:border-box}.b-listbox-option[data-v-18a61f5d] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-option[data-v-18a61f5d] ::-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-18a61f5d]:hover:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-hover-background-color)}.b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled),.b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-hover-font-color)}.b-legacy-theme .b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-18a61f5d]:hover:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-hover-font-color)}}.b-listbox-option[data-v-18a61f5d]:focus-visible{outline:none}.b-listbox-option[data-v-18a61f5d]:focus-visible:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-focus-background-color);color:var(--b-listbox-option-focus-font-color)}.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-active-background-color)}.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled),.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-active-font-color)}.b-legacy-theme .b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-legacy-theme .b-listbox-option[data-v-18a61f5d]:active:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-active-description-color)}.b-listbox-option[data-v-18a61f5d] .b-listbox-single-select-option__text,.b-listbox-option[data-v-18a61f5d] .b-listbox-multi-select__option-text{display:flex;flex-direction:column}.b-listbox-option[data-v-18a61f5d] .b-listbox-single-select-option__description,.b-listbox-option[data-v-18a61f5d] .b-listbox-multi-select__option-description{margin-top:var(--b-listbox-option-description-margin-top)}.b-listbox-option[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description,.b-listbox-option[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description{color:var(--b-listbox-option-description-color)}.b-listbox-option--disabled[data-v-18a61f5d]{cursor:not-allowed}.b-listbox-option--disabled[data-v-18a61f5d],.b-listbox-option--disabled[data-v-18a61f5d] .b-avatar__label,.b-listbox-option--disabled[data-v-18a61f5d] .b-country__label,.b-listbox-option--disabled[data-v-18a61f5d] .b-payment-method__label{color:var(--b-listbox-option-disabled-font-color)}.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled){background-color:var(--b-listbox-option-selected-background-color)}.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-avatar__label,.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-country__label,.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-payment-method__label{color:var(--b-listbox-option-selected-font-color)}.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-listbox-single-select-option__description:not(.b-listbox-option--disabled),.b-listbox-option--selected[data-v-18a61f5d]:not(.b-listbox-option--disabled) .b-listbox-multi-select__option-description:not(.b-listbox-option--disabled){color:var(--b-listbox-option-selected-description-color)}svg.ui-assets-icons-16{display:inline-flex;flex-shrink:0}svg.ui-assets-icons-16,svg.ui-assets-icons-16 *{fill:currentcolor}.b-listbox-single-select-option[data-v-e8cc847b]{display:flex;justify-content:space-between}.b-listbox-single-select-option__check-icon[data-v-e8cc847b]{align-items:center;display:flex;margin-left:var(--b-listbox-single-select-check-icon-margin)}.b-listbox-multi-select-category[data-v-9a00de22]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select-category[data-v-9a00de22],.b-listbox-multi-select-category[data-v-9a00de22]:before,.b-listbox-multi-select-category[data-v-9a00de22]:after{box-sizing:border-box}.b-listbox-multi-select-category *[data-v-9a00de22],.b-listbox-multi-select-category *[data-v-9a00de22]:before,.b-listbox-multi-select-category *[data-v-9a00de22]:after{box-sizing:border-box}.b-listbox-multi-select-category[data-v-9a00de22] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-category[data-v-9a00de22] ::-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-9a00de22]{cursor:not-allowed}.b-listbox-multi-select-category--disabled .b-listbox-multi-select-category__label-text[data-v-9a00de22]{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-9a00de22]{cursor:pointer}.b-listbox-multi-select-category--static-category[data-v-9a00de22]{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-9a00de22]{color:var(--b-listbox-multi-select-category-static-category-label-text-color)}.b-listbox-multi-select-category__label[data-v-9a00de22]{align-items:center;display:flex;justify-content:space-between;width:100%}.b-listbox-multi-select-category__label-chevron[data-v-9a00de22]{display:flex;position:relative}.b-listbox-multi-select-category__label-chevron[data-v-9a00de22]:before{content:"";height:36px;left:-10px;position:absolute;top:-9px;width:36px}.b-listbox-multi-select-category__option[data-v-9a00de22]{display:flex;gap:var(--b-listbox-multi-select-category-option-gap)}.b-listbox-multi-select-options[data-v-25938a72]{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-25938a72],.b-listbox-multi-select-options[data-v-25938a72]:before,.b-listbox-multi-select-options[data-v-25938a72]:after{box-sizing:border-box}.b-listbox-multi-select-options[data-v-25938a72] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-options[data-v-25938a72] ::-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-25938a72]{padding-left:var(--b-listbox-multi-select-options-category-option-padding-left)}.b-listbox-multi-select-options__static-category-option[data-v-25938a72]{padding-left:var(--b-listbox-multi-select-options-static-category-option-padding-left)}.b-listbox-multi-select-chips[data-v-7c5f8bdb]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--b-listbox-multi-select-chips-gap);padding:var(--b-listbox-multi-select-chips-padding)}.b-listbox-multi-select-chips[data-v-7c5f8bdb],.b-listbox-multi-select-chips[data-v-7c5f8bdb]:before,.b-listbox-multi-select-chips[data-v-7c5f8bdb]:after{box-sizing:border-box}.b-listbox-multi-select-chips[data-v-7c5f8bdb] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select-chips[data-v-7c5f8bdb] ::-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-chips__chip[data-v-7c5f8bdb]{background:var(--b-listbox-multi-select-chips-chip-background);border-radius:var(--b-listbox-multi-select-chips-chip-border-radius);display:flex;gap:var(--b-listbox-multi-select-chips-chip-gap);padding:var(--b-listbox-multi-select-chips-chip-padding)}.b-listbox-multi-select-chips__chip[data-v-7c5f8bdb]:focus-visible{animation:outer-ring-default-7c5f8bdb 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-7c5f8bdb{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-listbox-multi-select-chips__chip[data-v-7c5f8bdb]:hover{background:var(--b-listbox-multi-select-chips-chip-hover-background)}.b-listbox-multi-select-chips__chip[data-v-7c5f8bdb]:active{background:var(--b-listbox-multi-select-chips-chip-active-background)}.b-listbox-multi-select-chips__chip[data-v-7c5f8bdb]:disabled{background:var(--b-listbox-multi-select-chips-chip-disabled-background);color:var(--b-listbox-multi-select-chips-chip-disabled-color)}.b-listbox-multi-select-chips__option-text[data-v-7c5f8bdb]{display:flex;overflow-wrap:anywhere}.b-listbox-multi-select[data-v-0ca61721]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-listbox-multi-select[data-v-0ca61721],.b-listbox-multi-select[data-v-0ca61721]:before,.b-listbox-multi-select[data-v-0ca61721]:after{box-sizing:border-box}.b-listbox-multi-select[data-v-0ca61721] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox-multi-select[data-v-0ca61721] ::-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-0ca61721]{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-0ca61721]{display:flex;gap:var(--b-listbox-multi-select-options-gap)}.b-listbox[data-v-f5e00d2e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-listbox-background-color);overflow-y:auto;padding:var(--b-listbox-padding)}.b-listbox[data-v-f5e00d2e],.b-listbox[data-v-f5e00d2e]:before,.b-listbox[data-v-f5e00d2e]:after{box-sizing:border-box}.b-listbox *[data-v-f5e00d2e],.b-listbox *[data-v-f5e00d2e]:before,.b-listbox *[data-v-f5e00d2e]:after{box-sizing:border-box}.b-listbox[data-v-f5e00d2e] ::-webkit-scrollbar{height:14px;width:14px}.b-listbox[data-v-f5e00d2e] ::-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-f5e00d2e]{color:var(--b-listbox-empty-search-message-color);padding:var(--b-listbox-empty-search-message-padding);text-align:center}.b-listbox__lazy-load[data-v-f5e00d2e]{display:flex;justify-content:center;margin:var(--b-listbox-lazy-load-margin)}

package/dist/avatar-image.js

@@ -1,4 +1,4 @@
-import { A as t, B as e, a as o } from "./chunks/index.ba3396d3.js";
+import { A as t, a as e, B as o } from "./chunks/avatar-image.DO4w_loj.js";
 export {
   t as AvatarImage,
   e as BentoAvatarImageColor,

package/dist/badge.js

@@ -1,10 +1,10 @@
 import { defineComponent as l, computed as n, openBlock as d, createElementBlock as i, normalizeClass as c, renderSlot as r, createCommentVNode as u } from "vue";
-import { u as p } from "./chunks/aria-label.ac9651a5.js";
-import { g as f } from "./chunks/get-slot-text.bead058f.js";
-import { _ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index21.css";
+import { u as p } from "./chunks/aria-label.CaUURpnB.js";
+import { g as f } from "./chunks/get-slot-text.D5WBGjic.js";
+import { _ as m } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import "./assets/badge.css";
 var t = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.ATTENTION = "attention", e.WARNING = "warning", e.CRITICAL = "critical", e.SUCCESS = "success", e))(t || {});
-const m = l({
+const b = l({
   name: "adl-badge",
   props: {
     /**
@@ -25,21 +25,20 @@ const m = l({
     }
   },
   setup(e, { slots: a }) {
-    const s = p({
+    const o = p({
       label: f(a)("default"),
       defaultFallback: "badge"
-    }), o = n(() => ({
+    }), s = n(() => ({
       [`adl2-badge--${e.variant}`]: !0
     }));
     return {
       // Values
-      ariaLabel: s,
-      conditionalClasses: o
+      ariaLabel: o,
+      conditionalClasses: s
     };
   }
-});
-const b = ["aria-label", "data-testid"];
-function g(e, a, s, o, v, C) {
+}), v = ["aria-label", "data-testid"];
+function C(e, a, o, s, g, $) {
   return d(), i("div", {
     class: c(["adl2-badge", e.conditionalClasses]),
     "aria-label": e.ariaLabel,
@@ -48,9 +47,9 @@ function g(e, a, s, o, v, C) {
   }, [
     e.$slots.icon ? r(e.$slots, "icon", { key: 0 }, void 0, !0) : u("", !0),
     r(e.$slots, "default", {}, void 0, !0)
-  ], 10, b);
+  ], 10, v);
 }
-const L = /* @__PURE__ */ _(m, [["render", g], ["__scopeId", "data-v-ca8f66f9"]]);
+const L = /* @__PURE__ */ m(b, [["render", C], ["__scopeId", "data-v-ca8f66f9"]]);
 export {
   L as AdlBadge,
   t as AdlBadgeVariant

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../vue2/src/components/badge/badge.types.ts","../../vue2/src/components/badge/badge.vue"],"sourcesContent":["export enum AdlBadgeVariant {\n    DEFAULT = 'default',\n    ATTENTION = 'attention',\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    SUCCESS = 'success',\n}\n","<template>\n    <div class=\"adl2-badge\" :class=\"conditionalClasses\" :aria-label=\"ariaLabel\" role=\"status\" :data-testid=\"testId\">\n        <slot v-if=\"$slots.icon\" name=\"icon\"></slot>\n        <slot></slot>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { AdlBadgeVariant } from './badge.types';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    export default defineComponent({\n        name: 'adl-badge',\n        props: {\n            /**\n             * Types of flavour of Badge\n             * @values default, attention, warning, critical, success\n             */\n            variant: {\n                type: String as PropType<AdlBadgeVariant>,\n                default: AdlBadgeVariant.DEFAULT,\n                validator: (value: AdlBadgeVariant) => Object.values(AdlBadgeVariant).includes(value),\n            },\n            /**\n             * For testing purposes you can decide which testId your adl-badge instance will have\n             */\n            testId: {\n                type: String,\n                default: 'adl-badge',\n            },\n        },\n        setup(props, { slots }) {\n            const ariaLabel = useAriaLabel({\n                label: getSlotText(slots)('default'),\n                defaultFallback: 'badge',\n            });\n\n            const conditionalClasses = computed((): { [x: string]: boolean } => ({\n                [`adl2-badge--${props.variant}`]: true,\n            }));\n\n            return {\n                // Values\n                ariaLabel,\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./badge.scss\" />\n"],"names":["AdlBadgeVariant","AdlBadgeVariant2","_sfc_main","defineComponent","value","props","slots","ariaLabel","useAriaLabel","getSlotText","conditionalClasses","computed","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","openBlock","createElementBlock","normalizeClass"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;ACaR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACC,SAAA;AAAA,MAKM,MAAA;AAAA,MACC,SAAAH,EAAA;AAAA,MACmB,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAC2D;AAAA;AAAA;AAAA;AAAA,IACxF,QAAA;AAAA,MAIQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA;AAAA,MAA+B,OAAAC,EAAAH,CAAA,EAAA,SAAA;AAAA,MACQ,iBAAA;AAAA,IAClB,CAAA,GAGrBI,IAAAC,EAAA,OAAA;AAAA,MAAqE,CAAA,eAAAN,EAAA,SAAA,GAAA;AAAA,IAC/B,EAAA;AAGtC,WAAA;AAAA;AAAA,MAAO,WAAAE;AAAA,MAEH,oBAAAG;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;AAhDU,SAAAE,EAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAA;AAA2C,SAAAC,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAqB,OAAAC,EAAA,CAAA,cAAAR,EAAA,kBAAA,CAAA;AAAA,IAAe,cAAAA,EAAA;AAAA,IAAe,MAAA;AAAA;EAC7E,GAAA;AAAA;;;;;"}
+{"version":3,"file":"badge.js","sources":["../../vue2/src/components/badge/badge.types.ts","../../vue2/src/components/badge/badge.vue"],"sourcesContent":["export enum AdlBadgeVariant {\n    DEFAULT = 'default',\n    ATTENTION = 'attention',\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    SUCCESS = 'success',\n}\n","<template>\n    <div class=\"adl2-badge\" :class=\"conditionalClasses\" :aria-label=\"ariaLabel\" role=\"status\" :data-testid=\"testId\">\n        <slot v-if=\"$slots.icon\" name=\"icon\"></slot>\n        <slot></slot>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { AdlBadgeVariant } from './badge.types';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    export default defineComponent({\n        name: 'adl-badge',\n        props: {\n            /**\n             * Types of flavour of Badge\n             * @values default, attention, warning, critical, success\n             */\n            variant: {\n                type: String as PropType<AdlBadgeVariant>,\n                default: AdlBadgeVariant.DEFAULT,\n                validator: (value: AdlBadgeVariant) => Object.values(AdlBadgeVariant).includes(value),\n            },\n            /**\n             * For testing purposes you can decide which testId your adl-badge instance will have\n             */\n            testId: {\n                type: String,\n                default: 'adl-badge',\n            },\n        },\n        setup(props, { slots }) {\n            const ariaLabel = useAriaLabel({\n                label: getSlotText(slots)('default'),\n                defaultFallback: 'badge',\n            });\n\n            const conditionalClasses = computed((): { [x: string]: boolean } => ({\n                [`adl2-badge--${props.variant}`]: true,\n            }));\n\n            return {\n                // Values\n                ariaLabel,\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./badge.scss\" />\n"],"names":["AdlBadgeVariant","AdlBadgeVariant2","_sfc_main","defineComponent","value","props","slots","ariaLabel","useAriaLabel","getSlotText","conditionalClasses","computed","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","openBlock","createElementBlock","normalizeClass"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;ACaR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACC,SAAA;AAAA,MAKM,MAAA;AAAA,MACC,SAAAH,EAAA;AAAA,MACmB,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAC2D;AAAA;AAAA;AAAA;AAAA,IACxF,QAAA;AAAA,MAIQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA;AAAA,MAA+B,OAAAC,EAAAH,CAAA,EAAA,SAAA;AAAA,MACQ,iBAAA;AAAA,IAClB,CAAA,GAGrBI,IAAAC,EAAA,OAAA;AAAA,MAAqE,CAAA,eAAAN,EAAA,OAAA,EAAA,GAAA;AAAA,IAC/B,EAAA;AAGtC,WAAA;AAAA;AAAA,MAAO,WAAAE;AAAA,MAEH,oBAAAG;AAAA,IACA;AAAA,EACJ;AAER,CAAA;AAhDU,SAAAE,EAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAA;AAA2C,SAAAC,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAqB,OAAAC,EAAA,CAAA,cAAAR,EAAA,kBAAA,CAAA;AAAA,IAAe,cAAAA,EAAA;AAAA,IAAe,MAAA;AAAA;EAC7E,GAAA;AAAA;;;;;"}

package/dist/button.js

@@ -1,92 +1,17 @@
-import { a } from "./chunks/button.60dad578.js";
-import { b as R, B as T } from "./chunks/button.60dad578.js";
-import { B as q, c as D, a as F, b as G } from "./chunks/button-actions.642b37de.js";
-import { B as J, a as N } from "./chunks/loading-button.0391ad8b.js";
-import { defineComponent as p, computed as i, useSlots as B, openBlock as f, createBlock as v, mergeProps as m, unref as s, withModifiers as b, createSlots as y, renderList as _, withCtx as k, renderSlot as x, normalizeProps as C, guardReactiveProps as L } from "vue";
-import { _ as P } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index12.css";
-const h = {}, A = /* @__PURE__ */ p({
-  ...h,
-  __name: "toggle-button",
-  props: {
-    /**
-     * Reduces sizing of button
-     */
-    condensed: {
-      type: a.props.condensed.type,
-      default: !1
-    },
-    /**
-     * Disables button functonality
-     */
-    disabled: {
-      type: a.props.disabled.type,
-      default: !1
-    },
-    /**
-     * Sets color set to inverse
-     */
-    inverse: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Types of flavour of Button
-     * @values primary, secondary, tertiary
-     */
-    variant: {
-      type: a.props.variant.type,
-      default: "primary",
-      validator: a.props.variant.validator
-    },
-    /**
-     * The state of the button whether it is toggled or not.
-     */
-    toggled: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["click", "update:toggled"],
-  setup(o, { emit: d }) {
-    const t = o, r = i(
-      () => t.variant === "tertiary" ? "tertiary-with-background" : t.variant
-    ), l = i(() => ({
-      ["b-toggle-button--condensed"]: t == null ? void 0 : t.condensed,
-      [`b-toggle-button--${r.value}-toggled`]: t.toggled,
-      ["b-toggle-button--inverse"]: t.inverse
-    })), c = (e) => {
-      e.stopPropagation(), t != null && t.disabled || (d("click", e), d("update:toggled", !t.toggled));
-    }, u = B(), g = (e) => ({ key: e });
-    return (e, $) => (f(), v(a, m({ class: "b-toggle-button" }, e.$attrs, {
-      "aria-expanded": `${o.toggled}`,
-      condensed: o.condensed,
-      class: s(l),
-      disabled: o.disabled,
-      inverse: o.inverse,
-      variant: s(r),
-      onClickCapture: b(c, ["stop"])
-    }), y({ _: 2 }, [
-      _(s(u), (w, n) => ({
-        name: n,
-        fn: k(() => [
-          x(e.$slots, n, C(L(g(n))), void 0, !0)
-        ])
-      }))
-    ]), 1040, ["aria-expanded", "condensed", "class", "disabled", "inverse", "variant", "onClickCapture"]));
-  }
-});
-const z = /* @__PURE__ */ P(A, [["__scopeId", "data-v-63a88f80"]]);
+import { B as n, b as B, a } from "./chunks/button.DoqHEvPh.js";
+import { B as s, c as u, a as r, b as i } from "./chunks/button-actions.hGhRdgC2.js";
+import { B as p, a as x } from "./chunks/loading-button.BI32pZiW.js";
+import { B as d } from "./chunks/toggle-button.q9F2dsIi.js";
 export {
-  a as BentoButton,
-  q as BentoButtonActions,
-  D as BentoButtonActionsLayout,
-  F as BentoButtonActionsLayoutBasic,
-  G as BentoButtonActionsLayoutExtended,
-  R as BentoButtonPropClass,
-  T as BentoButtonVariant,
-  J as BentoLoadingButton,
-  N as BentoLoadingButtonState,
-  z as BentoToggleButton
+  n as BentoButton,
+  s as BentoButtonActions,
+  u as BentoButtonActionsLayout,
+  r as BentoButtonActionsLayoutBasic,
+  i as BentoButtonActionsLayoutExtended,
+  B as BentoButtonPropClass,
+  a as BentoButtonVariant,
+  p as BentoLoadingButton,
+  x as BentoLoadingButtonState,
+  d as BentoToggleButton
 };
 //# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../vue2/src/components/button/components/toggle-button/toggle-button.vue"],"sourcesContent":["<template>\n    <bento-button\n        class=\"b-toggle-button\"\n        v-bind=\"$attrs\"\n        :aria-expanded=\"`${toggled}`\"\n        :condensed=\"condensed\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        :variant=\"computedVariant\"\n        @click.capture.stop=\"onClick\"\n    >\n        <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]>\n            <slot :name=\"innerSlot\" v-bind=\"getSlotKeyIfVue3(innerSlot)\" />\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import BentoButton from '@/components/button/button.vue';\n    import { BentoButtonVariant } from '@/core/components/button/button.types';\n    import { isVue3 } from 'vue-demi';\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n\n        /**\n         * The state of the button whether it is toggled or not.\n         */\n        toggled: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n\n        /**\n         * Update the toggle state when the button has been clicked.\n         */\n        (e: 'update:toggled', newToggleState: boolean): void;\n    }>();\n\n    const computedVariant = computed(\n        () => (props.variant === 'tertiary' ? 'tertiary-with-background' : props.variant) as BentoButtonVariant\n    );\n\n    const conditionalClasses = computed(() => ({\n        [`b-toggle-button--condensed`]: props?.condensed,\n        [`b-toggle-button--${computedVariant.value}-toggled`]: props.toggled,\n        [`b-toggle-button--inverse`]: props.inverse,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n        if (!props?.disabled) {\n            emit('click', e);\n            emit('update:toggled', !props.toggled);\n        }\n    };\n\n    const slots = useSlots();\n    // If we don't provide a key to `slot` in vue 3, we will get type errors\n    const getSlotKeyIfVue3 = (slotName: string | number) => (isVue3 ? { key: slotName } : {});\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Toggle button is used to switch between two states (example: menu shown, menu hidden).\n     * It functions as a regular button but retains its state to indicate whether the associated menu or element is active or inactive.\n     *\n     * @example\n     * import { BentoToggleButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToggleButton },\n     *     template: `\n     *          <bento-toggle-button state=\"toggled\" variant=\"secondary\">\n     *              Button that can be toggled\n     *          </bento-toggle-button>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle-button.scss\" />\n"],"names":["__default__","computedVariant","computed","props","conditionalClasses","onClick","emit","slots","useSlots","getSlotKeyIfVue3","slotName"],"mappings":";;;;;;;AAyHI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAzCAC,IAAAC;AAAA,MAAwB,MAAAC,EAAA,YAAA,aAAA,6BAAAA,EAAA;AAAA,IACqD,GAG7EC,IAAAF,EAAA,OAAA;AAAA,MAA2C,CAAA,4BAAA,GAAAC,KAAA,gBAAAA,EAAA;AAAA,MACA,CAAA,oBAAAF,EAAA,eAAA,GAAAE,EAAA;AAAA,MACsB,CAAA,0BAAA,GAAAA,EAAA;AAAA,IACzB,EAAA,GAGxCE,IAAA,CAAA,MAAA;AAEI,QAAA,gBAAA,GACAF,KAAA,QAAAA,EAAA,aACIG,EAAA,SAAA,CAAA,GACAA,EAAA,kBAAA,CAAAH,EAAA,OAAA;AAAA,IACJ,GAGJI,IAAAC,EAAA,GAEAC,IAAA,CAAAC,OAAA,EAAA,KAAAA,EAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/card.js

@@ -1,206 +1,7 @@
-import { defineComponent as W, useSlots as Y, ref as S, watch as B, computed as d, openBlock as s, createElementBlock as c, normalizeClass as i, unref as a, renderSlot as p, createCommentVNode as l, withKeys as L, createElementVNode as m, createBlock as h, mergeProps as j, withCtx as y, createVNode as A, Transition as q, normalizeStyle as G } from "vue";
-import { B as E } from "./chunks/index.a3d60e4f.js";
-import { C as J, a as Q } from "./chunks/chevron-up.05ca20db.js";
-import { u as X } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import { u as Z } from "./chunks/use-has-slot.4d98bf29.js";
-import { g as ee } from "./chunks/unique-id.a2a2b458.js";
-import { u as ae } from "./chunks/i18n.f7e6533e.js";
-import { o as te } from "./chunks/resize.a041304d.js";
-import { c as ne, B as oe } from "./chunks/button-actions.642b37de.js";
-import { _ as de } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index26.css";
-var T = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t))(T || {}), b = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.SMALL = "small", t))(b || {});
-const D = {
-  "en-US": {
-    showCardContent: "Show card content",
-    hideCardContent: "Hide card content"
-  }
-}, se = {
-  key: 0,
-  class: "b-card__image"
-}, le = ["tabindex", "aria-controls", "aria-expanded", "role", "onKeypress"], re = { class: "b-card__header-wrapper" }, ce = {
-  key: 0,
-  class: "b-card__header-slot-wrapper"
-}, ie = ["id"], ue = {
-  i18n: { messages: D },
-  name: "bento-card"
-}, be = /* @__PURE__ */ W({
-  ...ue,
-  props: {
-    actions: { default: null },
-    actionsLayout: { default: ne.BUTTONS_END },
-    background: { default: T.PRIMARY },
-    closed: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    expandable: { type: Boolean, default: !1 },
-    titleSize: { default: b.DEFAULT }
-  },
-  emits: ["click", "expanded"],
-  setup(t, { emit: f }) {
-    const e = t, { t: x } = ae({ messages: D }), H = Y(), o = Z(H), u = S(null), C = ee("card"), r = S(!e.closed);
-    B(
-      () => e.closed,
-      (n) => {
-        r.value = !n;
-      }
-    );
-    const _ = d(() => o("default") || o("description") || o("header")), I = d(() => o("default") || o("header")), g = d(
-      () => {
-        var n;
-        return (o("content") || ((n = e.actions) == null ? void 0 : n.length)) && (!e.expandable || e.expandable && r.value);
-      }
-    ), z = d(() => e.expandable && !e.disabled ? 0 : -1), M = d(() => ({
-      [`b-card--${e.background}`]: e.background,
-      "b-card--expandable": e.expandable,
-      "b-card--disabled": e.expandable && e.disabled
-    })), N = d(() => ({
-      "b-card__header--expandable": e.expandable,
-      "b-card__header--without-body": !e.expandable && !g.value
-    })), U = d(() => ({
-      "b-card__toggle--small-text": e.titleSize === b.SMALL
-    })), $ = d(() => ({
-      "b-card__body--expandable": e.expandable && o("content"),
-      "b-card__body--without-header": !e.expandable && !_.value
-    })), R = d(() => ({
-      "b-card__content--without-header": !e.expandable && !_.value,
-      "b-card__content--expandable": e.expandable
-    })), F = d(() => {
-      const n = !e.expandable && e.actions && !o("content");
-      return {
-        "b-card__actions--without-content": n,
-        "b-card__actions--without-content-and-with-header": n && _.value
-      };
-    }), K = d(() => ({
-      "b-card__title-wrapper--truncated": o("header")
-    })), O = d(
-      () => ({
-        el: "div",
-        variant: e.titleSize === b.DEFAULT ? "title" : "body",
-        strongest: e.titleSize === b.SMALL,
-        wide: e.titleSize === b.SMALL
-      })
-    ), { updateContentHeight: w, contentHeight: k } = X(u, r), P = d(
-      () => e.expandable && k.value ? { "max-height": k.value } : {}
-    );
-    B(
-      () => u.value,
-      () => {
-        let n = null;
-        !n && u.value && (n = te(u.value, () => {
-          u.value && w();
-        }));
-      }
-    );
-    const v = () => {
-      !e.disabled && e.expandable && (r.value = !r.value, f("expanded", r.value), w());
-    }, V = () => {
-      e.disabled || f("click");
-    };
-    return (n, pe) => (s(), c("div", {
-      class: i(["b-card", a(M)]),
-      "data-testid": "card",
-      onClick: V
-    }, [
-      a(o)("image") ? (s(), c("div", se, [
-        p(n.$slots, "image", {}, void 0, !0)
-      ])) : l("", !0),
-      a(_) ? (s(), c("div", {
-        key: 1,
-        class: i(["b-card__header", a(N)]),
-        tabindex: a(z),
-        "aria-controls": t.expandable ? a(C) : null,
-        "aria-expanded": t.expandable ? `${r.value}` : null,
-        role: t.expandable ? "button" : null,
-        onClick: v,
-        onKeypress: [
-          L(v, ["enter"]),
-          L(v, ["space"])
-        ]
-      }, [
-        m("div", re, [
-          a(I) ? (s(), c("div", ce, [
-            m("div", {
-              class: i(["b-card__title-wrapper", a(K)])
-            }, [
-              t.expandable ? (s(), c("div", {
-                key: 0,
-                class: i(["b-card__toggle", a(U)])
-              }, [
-                r.value ? (s(), h(a(J), {
-                  key: 0,
-                  "svg-title": a(x)("hideCardContent"),
-                  "aria-hidden": "true"
-                }, null, 8, ["svg-title"])) : (s(), h(a(Q), {
-                  key: 1,
-                  "svg-title": a(x)("showCardContent"),
-                  "aria-hidden": "true"
-                }, null, 8, ["svg-title"]))
-              ], 2)) : l("", !0),
-              a(o)("default") ? (s(), h(a(E), j({
-                key: 1,
-                class: "b-card__title"
-              }, a(O)), {
-                default: y(() => [
-                  p(n.$slots, "default", {}, void 0, !0)
-                ]),
-                _: 3
-              }, 16)) : l("", !0)
-            ], 2),
-            a(o)("header") ? p(n.$slots, "header", { key: 0 }, void 0, !0) : l("", !0)
-          ])) : l("", !0),
-          a(o)("description") ? (s(), h(a(E), {
-            key: 1,
-            class: "b-card__description",
-            el: "div",
-            variant: "body"
-          }, {
-            default: y(() => [
-              p(n.$slots, "description", {}, void 0, !0)
-            ]),
-            _: 3
-          })) : l("", !0)
-        ])
-      ], 42, le)) : l("", !0),
-      A(q, { name: "b-card__animation" }, {
-        default: y(() => [
-          a(g) ? (s(), c("div", {
-            key: 0,
-            class: "b-card__wrapper",
-            style: G(a(P))
-          }, [
-            m("div", {
-              id: t.expandable ? a(C) : null,
-              ref_key: "contentDiv",
-              ref: u,
-              class: i(["b-card__body", a($)])
-            }, [
-              a(o)("content") ? (s(), c("div", {
-                key: 0,
-                class: i(["b-card__content", a(R)])
-              }, [
-                p(n.$slots, "content", {}, void 0, !0)
-              ], 2)) : l("", !0),
-              t.actions ? (s(), c("div", {
-                key: 1,
-                class: i(["b-card__actions", a(F)])
-              }, [
-                A(a(oe), {
-                  actions: t.actions,
-                  layout: t.actionsLayout
-                }, null, 8, ["actions", "layout"])
-              ], 2)) : l("", !0)
-            ], 10, ie)
-          ], 4)) : l("", !0)
-        ]),
-        _: 3
-      })
-    ], 2));
-  }
-});
-const ke = /* @__PURE__ */ de(be, [["__scopeId", "data-v-2cdd9489"]]);
+import { c as o, B as r, a as t } from "./chunks/card.C7zLKdcy.js";
 export {
-  ke as BentoCard,
-  T as BentoCardBackground,
-  b as BentoCardTitleSize
+  o as BentoCard,
+  r as BentoCardBackground,
+  t as BentoCardTitleSize
 };
 //# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../vue2/src/components/card/card.types.ts","../../vue2/src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\n        <div v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"tabIndex\"\n            :aria-controls=\"expandable ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideCardContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showCardContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\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    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions?: BentoButtonActionsList;\n\n            /**\n             * Defines the layout in which the button actions is presented.\n             * It can be one of:\n             *\n             * @values BUTTONS_START\n             * @values BUTTONS_END\n             * @values FILL_CONTAINER\n             * @values SPACE_BETWEEN\n             * @values VERTICAL_STACK\n             */\n            actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n            /**\n             * Defines the color of card background\n             */\n            background?: BentoCardBackground | `${BentoCardBackground}`;\n\n            /**\n             * Sets the expandable card in a closed state\n             */\n            closed?: boolean;\n\n            /**\n             * Disables the expandable card\n             */\n            disabled?: boolean;\n\n            /**\n             * The whole content of the card will be expandable in accordion manner\n             */\n            expandable?: boolean;\n\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`;\n        }>(),\n        {\n            actions: null,\n            actionsLayout: BentoButtonActionsLayout.BUTTONS_END,\n            background: BentoCardBackground.PRIMARY,\n            closed: false,\n            disabled: false,\n            expandable: false,\n            titleSize: BentoCardTitleSize.DEFAULT,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'click');\n        (e: 'expanded', isExpanded: boolean);\n    }>();\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': props.expandable && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            } as InstanceType<typeof BentoTypography>['$props'])\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\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    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","props","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","toggleExpansion","emit","onClick"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;gBCwRRE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBAlNA,EAAA,GAAAC,EAAA,IAAAC,GAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAoFAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,GAAA,MAAA,GACAC,IAAAH,EAAA,CAAAI,EAAA,MAAA;AACA,IAAAC;AAAA,MAAA,MAAAD,EAAA;AAAA,MACgB,CAAAE,MAAA;AAER,QAAAH,EAAA,QAAA,CAAAG;AAAA,MAAqB;AAAA,IACzB;AAEJ,UAAAC,IAAAC,EAAA,MAAAX,EAAA,SAAA,KAAAA,EAAA,aAAA,KAAAA,EAAA,QAAA,CAAA,GACAY,IAAAD,EAAA,MAAAX,EAAA,SAAA,KAAAA,EAAA,QAAA,CAAA,GACAa,IAAAF;AAAA,MAAqB,MAAA;;AAAA,gBAAAX,EAAA,SAAA,OAAAc,IAAAP,EAAA,YAAA,gBAAAO,EAAA,aAAA,CAAAP,EAAA,cAAAA,EAAA,cAAAD,EAAA;AAAA;AAAA,IAG0C,GAE/DS,IAAAJ,EAAA,MAAAJ,EAAA,cAAA,CAAAA,EAAA,WAAA,IAAA,EAAA,GAEAS,IAAAL,EAAA,OAAA;AAAA,MAA+C,CAAA,WAAAJ,EAAA,YAAA,GAAAA,EAAA;AAAA,MACJ,sBAAAA,EAAA;AAAA,MACX,oBAAAA,EAAA,cAAAA,EAAA;AAAA,IACkB,EAAA,GAGlDU,IAAAN,EAAA,OAAA;AAAA,MAAqD,8BAAAJ,EAAA;AAAA,MACb,gCAAA,CAAAA,EAAA,cAAA,CAAAM,EAAA;AAAA,IAC+B,EAAA,GAGvEK,IAAAP,EAAA,OAAA;AAAA,MAAqD,8BAAAJ,EAAA,cAAAf,EAAA;AAAA,IACoB,EAAA,GAGzE2B,IAAAR,EAAA,OAAA;AAAA,MAAmD,4BAAAJ,EAAA,cAAAP,EAAA,SAAA;AAAA,MACkB,gCAAA,CAAAO,EAAA,cAAA,CAAAG,EAAA;AAAA,IACA,EAAA,GAGrEU,IAAAT,EAAA,OAAA;AAAA,MAAsD,mCAAA,CAAAJ,EAAA,cAAA,CAAAG,EAAA;AAAA,MACkB,+BAAAH,EAAA;AAAA,IAC/B,EAAA,GAGzCc,IAAAV,EAAA,MAAA;AACI,YAAAW,IAAA,CAAAf,EAAA,cAAAA,EAAA,WAAA,CAAAP,EAAA,SAAA;AAEA,aAAA;AAAA,QAAO,oCAAAsB;AAAA,QACiC,oDAAAA,KAAAZ,EAAA;AAAA,MAC4D;AAAA,IACpG,CAAA,GAGJa,IAAAZ,EAAA,OAAA;AAAA,MAA2D,oCAAAX,EAAA,QAAA;AAAA,IACH,EAAA,GAGxDwB,IAAAb;AAAA,MAAmB,OAAA;AAAA,QAEV,IAAA;AAAA,QACO,SAAAJ,EAAA,cAAAf,EAAA,UAAA,UAAA;AAAA,QACgE,WAAAe,EAAA,cAAAf,EAAA;AAAA,QAClB,MAAAe,EAAA,cAAAf,EAAA;AAAA,MACL;AAAA,IACjD,GAIR,EAAA,qBAAAiC,GAAA,eAAAC,EAAA,IAAAC,EAAAzB,GAAAI,CAAA,GAEAsB,IAAAjB;AAAA,MAAyB,MAAAJ,EAAA,cAAAmB,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA;AAAA,IAC8D;AAGvF,IAAAlB;AAAA,MAAA,MAAAN,EAAA;AAAA,MACqB,MAAA;AAEb,YAAA2B,IAAA;AACA,QAAA,CAAAA,KAAA3B,EAAA,UACI2B,IAAAC,GAAA5B,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIuB,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ;AAGJ,UAAAM,IAAA,MAAA;AACI,MAAA,CAAAxB,EAAA,YAAAA,EAAA,eACID,EAAA,QAAA,CAAAA,EAAA,OACA0B,EAAA,YAAA1B,EAAA,KAAA,GACAmB,EAAA;AAAA,IACJ,GAGJQ,IAAA,MAAA;AACI,MAAA1B,EAAA,YACIyB,EAAA,OAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"card.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}