@adyen/bento-vue3 2.0.0 → 2.0.1

package/dist/assets/inspector.css

@@ -1 +1 @@
-.b-inspector[data-v-76a8eea6]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;height:100%;position:relative}.b-inspector[data-v-76a8eea6],.b-inspector[data-v-76a8eea6]:before,.b-inspector[data-v-76a8eea6]:after{box-sizing:border-box}.b-inspector[data-v-76a8eea6] *,.b-inspector[data-v-76a8eea6] *:before,.b-inspector[data-v-76a8eea6] *:after{box-sizing:border-box}.b-inspector[data-v-76a8eea6] ::-webkit-scrollbar{height:14px;width:14px}.b-inspector[data-v-76a8eea6] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-inspector--overlay-content .b-inspector__container-wrapper[data-v-76a8eea6]{box-shadow:var(--b-shadow-medium);position:absolute;right:0;z-index:var(--b-z-index-global-elevated)}.b-inspector--multi-paged .b-inspector__container[data-v-76a8eea6],.b-inspector--multi-paged .b-inspector__focus-trap[data-v-76a8eea6]{height:100%}.b-inspector__page-wrapper[data-v-76a8eea6]{flex-grow:1;height:100%;overflow:auto}.b-inspector__page[data-v-76a8eea6]{height:100%}.b-inspector__container-wrapper[data-v-76a8eea6]{background-color:var(--b-color-background-primary);border-left:1px solid var(--b-color-separator-secondary);flex-shrink:0;height:100%;overflow-x:hidden}.b-inspector__container[data-v-76a8eea6]{display:flex;flex-direction:column;height:100%}.b-inspector__container--padded[data-v-76a8eea6]{padding:var(--b-spacer-070) var(--b-spacer-090)}.b-inspector__header[data-v-76a8eea6]{color:var(--b-color-label-primary);display:flex;gap:var(--b-spacer-060);padding-bottom:var(--b-spacer-070);padding-right:42px}.b-inspector__title[data-v-76a8eea6]{flex-grow:1}.b-inspector__icons[data-v-76a8eea6]{display:flex;flex-shrink:0;gap:var(--b-spacer-050);height:26px;position:absolute;right:var(--b-spacer-090);top:var(--b-spacer-070)}.b-inspector__content[data-v-76a8eea6]{flex-grow:1;height:100%}.b-inspector__loading-indicator[data-v-76a8eea6]{inset:50%;transform:translate(-50%,-50%)}.b-inspector__return-content[data-v-76a8eea6]{clip-path:rect(0,0,0,0);height:1px;opacity:0;overflow:hidden;position:absolute;right:0;top:var(--b-spacer-070);width:1px}.b-inspector__return-content[data-v-76a8eea6]:focus-visible{background-color:var(--b-color-background-primary);background-image:linear-gradient(var(--b-color-background-tertiary),var(--b-color-background-tertiary));clip-path:auto;height:auto;opacity:1;right:var(--b-spacer-040);width:auto;z-index:1}.b-inspector__return-content-description[data-v-76a8eea6]{display:none}.b-inspector--small .b-inspector__container-wrapper[data-v-76a8eea6]{width:420px}.b-inspector--small .b-inspector__container[data-v-76a8eea6]{width:419px}@keyframes expand-small-76a8eea6{0%{width:0}to{width:420px}}@keyframes shrink-small-76a8eea6{0%{width:420px}to{width:0}}.b-inspector--small .b-inspector__animation-enter-active[data-v-76a8eea6]{animation:expand-small-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}.b-inspector--small .b-inspector__animation-enter-active .b-inspector__icons[data-v-76a8eea6]{animation:enter-u2wlomi-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-u2wlomi-76a8eea6{0%{translate:120px 0}to{translate:0 0}}.b-inspector--small .b-inspector__animation-enter-active .b-inspector__icons[data-v-76a8eea6]{animation-delay:calc(var(--b-animation-duration-slow) * .3);animation-fill-mode:backwards}.b-inspector--small .b-inspector__animation-leave-active[data-v-76a8eea6]{animation:shrink-small-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}.b-inspector--small .b-inspector__animation-leave-active .b-inspector__icons[data-v-76a8eea6]{animation:exit-u2wlong-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-u2wlong-76a8eea6{0%{translate:0 0}to{translate:120px 0}}.b-inspector--small.b-inspector--is-compact .b-inspector__container-wrapper[data-v-76a8eea6]{border-left:0;position:absolute;width:100%;z-index:var(--b-z-index-global-elevated)}.b-inspector--small.b-inspector--is-compact .b-inspector__container[data-v-76a8eea6]{width:100%}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-76a8eea6]{animation:enter-u2wlonx-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-u2wlonx-76a8eea6{0%{translate:100% 0}to{translate:0 0}}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-76a8eea6]{animation:exit-u2wloof-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-u2wloof-76a8eea6{0%{translate:0 0}to{translate:100% 0}}.b-inspector--large .b-inspector__container-wrapper[data-v-76a8eea6]{width:595px}.b-inspector--large .b-inspector__container[data-v-76a8eea6]{width:594px}@keyframes expand-large-76a8eea6{0%{width:0}to{width:595px}}@keyframes shrink-large-76a8eea6{0%{width:595px}to{width:0}}.b-inspector--large .b-inspector__animation-enter-active[data-v-76a8eea6]{animation:expand-large-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}.b-inspector--large .b-inspector__animation-enter-active .b-inspector__icons[data-v-76a8eea6]{animation:enter-u2wloq5-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-u2wloq5-76a8eea6{0%{translate:120px 0}to{translate:0 0}}.b-inspector--large .b-inspector__animation-enter-active .b-inspector__icons[data-v-76a8eea6]{animation-delay:calc(var(--b-animation-duration-slow) * .3);animation-fill-mode:backwards}.b-inspector--large .b-inspector__animation-leave-active[data-v-76a8eea6]{animation:shrink-large-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}.b-inspector--large .b-inspector__animation-leave-active .b-inspector__icons[data-v-76a8eea6]{animation:exit-u2wloqy-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-u2wloqy-76a8eea6{0%{translate:0 0}to{translate:120px 0}}.b-inspector--large.b-inspector--is-compact .b-inspector__container-wrapper[data-v-76a8eea6]{border-left:0;position:absolute;width:100%;z-index:var(--b-z-index-global-elevated)}.b-inspector--large.b-inspector--is-compact .b-inspector__container[data-v-76a8eea6]{width:100%}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-76a8eea6]{animation:enter-u2wlorp-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-u2wlorp-76a8eea6{0%{translate:100% 0}to{translate:0 0}}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-76a8eea6]{animation:exit-u2wlos6-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-u2wlos6-76a8eea6{0%{translate:0 0}to{translate:100% 0}}
+.b-inspector[data-v-76a8eea6]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;height:100%;position:relative}.b-inspector[data-v-76a8eea6],.b-inspector[data-v-76a8eea6]:before,.b-inspector[data-v-76a8eea6]:after{box-sizing:border-box}.b-inspector[data-v-76a8eea6] *,.b-inspector[data-v-76a8eea6] *:before,.b-inspector[data-v-76a8eea6] *:after{box-sizing:border-box}.b-inspector[data-v-76a8eea6] ::-webkit-scrollbar{height:14px;width:14px}.b-inspector[data-v-76a8eea6] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-inspector--overlay-content .b-inspector__container-wrapper[data-v-76a8eea6]{box-shadow:var(--b-shadow-medium);position:absolute;right:0;z-index:var(--b-z-index-global-elevated)}.b-inspector--multi-paged .b-inspector__container[data-v-76a8eea6],.b-inspector--multi-paged .b-inspector__focus-trap[data-v-76a8eea6]{height:100%}.b-inspector__page-wrapper[data-v-76a8eea6]{flex-grow:1;height:100%;overflow:auto}.b-inspector__page[data-v-76a8eea6]{height:100%}.b-inspector__container-wrapper[data-v-76a8eea6]{background-color:var(--b-color-background-primary);border-left:1px solid var(--b-color-separator-secondary);flex-shrink:0;height:100%;overflow-x:hidden}.b-inspector__container[data-v-76a8eea6]{display:flex;flex-direction:column;height:100%}.b-inspector__container--padded[data-v-76a8eea6]{padding:var(--b-spacer-070) var(--b-spacer-090)}.b-inspector__header[data-v-76a8eea6]{color:var(--b-color-label-primary);display:flex;gap:var(--b-spacer-060);padding-bottom:var(--b-spacer-070);padding-right:42px}.b-inspector__title[data-v-76a8eea6]{flex-grow:1}.b-inspector__icons[data-v-76a8eea6]{display:flex;flex-shrink:0;gap:var(--b-spacer-050);height:26px;position:absolute;right:var(--b-spacer-090);top:var(--b-spacer-070)}.b-inspector__content[data-v-76a8eea6]{flex-grow:1;height:100%}.b-inspector__loading-indicator[data-v-76a8eea6]{inset:50%;transform:translate(-50%,-50%)}.b-inspector__return-content[data-v-76a8eea6]{clip-path:rect(0,0,0,0);height:1px;opacity:0;overflow:hidden;position:absolute;right:0;top:var(--b-spacer-070);width:1px}.b-inspector__return-content[data-v-76a8eea6]:focus-visible{background-color:var(--b-color-background-primary);background-image:linear-gradient(var(--b-color-background-tertiary),var(--b-color-background-tertiary));clip-path:auto;height:auto;opacity:1;right:var(--b-spacer-040);width:auto;z-index:1}.b-inspector__return-content-description[data-v-76a8eea6]{display:none}.b-inspector--small .b-inspector__container-wrapper[data-v-76a8eea6]{width:420px}.b-inspector--small .b-inspector__container[data-v-76a8eea6]{width:419px}@keyframes expand-small-76a8eea6{0%{width:0}to{width:420px}}@keyframes shrink-small-76a8eea6{0%{width:420px}to{width:0}}.b-inspector--small .b-inspector__animation-enter-active[data-v-76a8eea6]{animation:expand-small-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}.b-inspector--small .b-inspector__animation-enter-active .b-inspector__icons[data-v-76a8eea6]{animation:enter-ud7auj0-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-ud7auj0-76a8eea6{0%{translate:120px 0}to{translate:0 0}}.b-inspector--small .b-inspector__animation-enter-active .b-inspector__icons[data-v-76a8eea6]{animation-delay:calc(var(--b-animation-duration-slow) * .3);animation-fill-mode:backwards}.b-inspector--small .b-inspector__animation-leave-active[data-v-76a8eea6]{animation:shrink-small-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}.b-inspector--small .b-inspector__animation-leave-active .b-inspector__icons[data-v-76a8eea6]{animation:exit-ud7aujc-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-ud7aujc-76a8eea6{0%{translate:0 0}to{translate:120px 0}}.b-inspector--small.b-inspector--is-compact .b-inspector__container-wrapper[data-v-76a8eea6]{border-left:0;position:absolute;width:100%;z-index:var(--b-z-index-global-elevated)}.b-inspector--small.b-inspector--is-compact .b-inspector__container[data-v-76a8eea6]{width:100%}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-76a8eea6]{animation:enter-ud7aul1-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-ud7aul1-76a8eea6{0%{translate:100% 0}to{translate:0 0}}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-76a8eea6]{animation:exit-ud7aumq-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-ud7aumq-76a8eea6{0%{translate:0 0}to{translate:100% 0}}.b-inspector--large .b-inspector__container-wrapper[data-v-76a8eea6]{width:595px}.b-inspector--large .b-inspector__container[data-v-76a8eea6]{width:594px}@keyframes expand-large-76a8eea6{0%{width:0}to{width:595px}}@keyframes shrink-large-76a8eea6{0%{width:595px}to{width:0}}.b-inspector--large .b-inspector__animation-enter-active[data-v-76a8eea6]{animation:expand-large-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}.b-inspector--large .b-inspector__animation-enter-active .b-inspector__icons[data-v-76a8eea6]{animation:enter-ud7aumx-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-ud7aumx-76a8eea6{0%{translate:120px 0}to{translate:0 0}}.b-inspector--large .b-inspector__animation-enter-active .b-inspector__icons[data-v-76a8eea6]{animation-delay:calc(var(--b-animation-duration-slow) * .3);animation-fill-mode:backwards}.b-inspector--large .b-inspector__animation-leave-active[data-v-76a8eea6]{animation:shrink-large-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}.b-inspector--large .b-inspector__animation-leave-active .b-inspector__icons[data-v-76a8eea6]{animation:exit-ud7aunl-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-ud7aunl-76a8eea6{0%{translate:0 0}to{translate:120px 0}}.b-inspector--large.b-inspector--is-compact .b-inspector__container-wrapper[data-v-76a8eea6]{border-left:0;position:absolute;width:100%;z-index:var(--b-z-index-global-elevated)}.b-inspector--large.b-inspector--is-compact .b-inspector__container[data-v-76a8eea6]{width:100%}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-76a8eea6]{animation:enter-ud7auo5-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-ud7auo5-76a8eea6{0%{translate:100% 0}to{translate:0 0}}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-76a8eea6]{animation:exit-ud7auo6-76a8eea6 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-ud7auo6-76a8eea6{0%{translate:0 0}to{translate:100% 0}}

package/dist/assets/modal-fullscreen.css

@@ -1 +1 @@
-.b-modal-fullscreen-page[data-v-8579bda1]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;flex-direction:column;height:100%;overflow:hidden;position:absolute;width:100%}.b-modal-fullscreen-page[data-v-8579bda1],.b-modal-fullscreen-page[data-v-8579bda1]:before,.b-modal-fullscreen-page[data-v-8579bda1]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-8579bda1] *,.b-modal-fullscreen-page[data-v-8579bda1] *:before,.b-modal-fullscreen-page[data-v-8579bda1] *:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-8579bda1] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-8579bda1] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-modal-fullscreen-page__header[data-v-8579bda1]{align-items:center;display:flex;flex-grow:1;gap:var(--b-spacer-090);height:64px;overflow:auto hidden;padding:var(--b-spacer-060) var(--b-spacer-090)}.b-modal-fullscreen-page__header:not(:has(.b-modal-fullscreen-page__actions)) .b-modal-fullscreen-page__header-section--slot[data-v-8579bda1]{flex:0 1 auto}.b-modal-fullscreen-page__header-section[data-v-8579bda1]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-8579bda1]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-8579bda1]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-8579bda1]{align-items:center;gap:var(--b-spacer-090);justify-content:end}.b-modal-fullscreen-page__title[data-v-8579bda1]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-8579bda1]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-8579bda1]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-8579bda1] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-8579bda1]{border-left:var(--b-border-width-s) solid var(--b-color-separator-primary);height:26px;margin-right:var(--b-spacer-110)}.b-modal-fullscreen-page__close-button[data-v-8579bda1]{align-items:center;background-color:var(--b-color-background-primary);display:flex;height:64px;padding-inline:var(--b-spacer-090);position:absolute;right:0;z-index:var(--b-z-index-local-tier-1)}.b-modal-fullscreen[data-v-931c456c]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;background-color:var(--b-color-background-primary);border:0;color:var(--b-color-label-primary);height:100%;max-height:100%;max-width:100%;overflow:hidden;padding:0;width:100%}.b-modal-fullscreen[data-v-931c456c],.b-modal-fullscreen[data-v-931c456c]:before,.b-modal-fullscreen[data-v-931c456c]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-931c456c] *,.b-modal-fullscreen[data-v-931c456c] *:before,.b-modal-fullscreen[data-v-931c456c] *:after{box-sizing:border-box}.b-modal-fullscreen[data-v-931c456c] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-931c456c] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-modal-fullscreen__wrapper[data-v-931c456c]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen[data-v-931c456c]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-931c456c]{animation:fade-in-u2wlois-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-u2wlois-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-u2wlois-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-u2wlois-931c456c{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u2wlois-931c456c{0%{scale:1}to{scale:1}}@keyframes enter-u2wlois-931c456c{0%{translate:0 64px}to{translate:0 0}}.b-modal-fullscreen--hide[open][data-v-931c456c]{animation:fade-out-u2wlojv-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-u2wlojv-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-u2wlojv-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-u2wlojv-931c456c{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u2wlojv-931c456c{0%{scale:1}to{scale:1}}@keyframes exit-u2wlojv-931c456c{0%{translate:0 0}to{translate:0 64px}}
+.b-modal-fullscreen-page[data-v-8579bda1]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;flex-direction:column;height:100%;overflow:hidden;position:absolute;width:100%}.b-modal-fullscreen-page[data-v-8579bda1],.b-modal-fullscreen-page[data-v-8579bda1]:before,.b-modal-fullscreen-page[data-v-8579bda1]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-8579bda1] *,.b-modal-fullscreen-page[data-v-8579bda1] *:before,.b-modal-fullscreen-page[data-v-8579bda1] *:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-8579bda1] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-8579bda1] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-modal-fullscreen-page__header[data-v-8579bda1]{align-items:center;display:flex;flex-grow:1;gap:var(--b-spacer-090);height:64px;overflow:auto hidden;padding:var(--b-spacer-060) var(--b-spacer-090)}.b-modal-fullscreen-page__header:not(:has(.b-modal-fullscreen-page__actions)) .b-modal-fullscreen-page__header-section--slot[data-v-8579bda1]{flex:0 1 auto}.b-modal-fullscreen-page__header-section[data-v-8579bda1]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-8579bda1]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-8579bda1]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-8579bda1]{align-items:center;gap:var(--b-spacer-090);justify-content:end}.b-modal-fullscreen-page__title[data-v-8579bda1]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-8579bda1]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-8579bda1]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-8579bda1] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-8579bda1]{border-left:var(--b-border-width-s) solid var(--b-color-separator-primary);height:26px;margin-right:var(--b-spacer-110)}.b-modal-fullscreen-page__close-button[data-v-8579bda1]{align-items:center;background-color:var(--b-color-background-primary);display:flex;height:64px;padding-inline:var(--b-spacer-090);position:absolute;right:0;z-index:var(--b-z-index-local-tier-1)}.b-modal-fullscreen[data-v-931c456c]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;background-color:var(--b-color-background-primary);border:0;color:var(--b-color-label-primary);height:100%;max-height:100%;max-width:100%;overflow:hidden;padding:0;width:100%}.b-modal-fullscreen[data-v-931c456c],.b-modal-fullscreen[data-v-931c456c]:before,.b-modal-fullscreen[data-v-931c456c]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-931c456c] *,.b-modal-fullscreen[data-v-931c456c] *:before,.b-modal-fullscreen[data-v-931c456c] *:after{box-sizing:border-box}.b-modal-fullscreen[data-v-931c456c] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-931c456c] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-modal-fullscreen__wrapper[data-v-931c456c]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen[data-v-931c456c]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-931c456c]{animation:fade-in-ud7aufb-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-ud7aufb-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-ud7aufb-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-ud7aufb-931c456c{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ud7aufb-931c456c{0%{scale:1}to{scale:1}}@keyframes enter-ud7aufb-931c456c{0%{translate:0 64px}to{translate:0 0}}.b-modal-fullscreen--hide[open][data-v-931c456c]{animation:fade-out-ud7aufg-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-ud7aufg-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-ud7aufg-931c456c var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-ud7aufg-931c456c{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ud7aufg-931c456c{0%{scale:1}to{scale:1}}@keyframes exit-ud7aufg-931c456c{0%{translate:0 0}to{translate:0 64px}}

package/dist/assets/navigation-menu-group.css

@@ -1 +1 @@
-.b-navigation-menu[data-v-f4fb4ca7]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;flex-direction:column;padding:var(--b-spacer-020) var(--b-spacer-040) var(--b-spacer-040)}.b-navigation-menu[data-v-f4fb4ca7],.b-navigation-menu[data-v-f4fb4ca7]:before,.b-navigation-menu[data-v-f4fb4ca7]:after{box-sizing:border-box}.b-navigation-menu[data-v-f4fb4ca7] *,.b-navigation-menu[data-v-f4fb4ca7] *:before,.b-navigation-menu[data-v-f4fb4ca7] *:after{box-sizing:border-box}.b-navigation-menu[data-v-f4fb4ca7] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu[data-v-f4fb4ca7] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-navigation-menu__header[data-v-f4fb4ca7]{align-items:center;display:flex;gap:var(--b-spacer-070);justify-content:space-between;min-height:32px;padding:var(--b-spacer-010) var(--b-spacer-030) var(--b-spacer-010) var(--b-spacer-060)}.b-navigation-menu__title[data-v-f4fb4ca7]{color:var(--b-color-label-secondary);font-family:var(--b-text-caption-font-family-secondary);font-variant-numeric:slashed-zero;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.b-navigation-menu__actions-container[data-v-f4fb4ca7],.b-navigation-menu__actions[data-v-f4fb4ca7]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-navigation-menu__actions-container[data-v-f4fb4ca7] .b-button--icon-only{padding:var(--b-spacer-030)}.b-navigation-menu__content[data-v-f4fb4ca7]{display:flex;flex-direction:column;gap:var(--b-spacer-010);list-style:none;margin:0;padding:0}.b-navigation-menu__content[data-v-f4fb4ca7] a{text-decoration:none}.b-navigation-menu-item[data-v-e63bc43a]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;align-items:center;border-radius:var(--b-border-radius-m);display:flex;min-height:32px;opacity:1;padding-right:var(--b-spacer-030)}.b-navigation-menu-item[data-v-e63bc43a],.b-navigation-menu-item[data-v-e63bc43a]:before,.b-navigation-menu-item[data-v-e63bc43a]:after{box-sizing:border-box}.b-navigation-menu-item[data-v-e63bc43a] *,.b-navigation-menu-item[data-v-e63bc43a] *:before,.b-navigation-menu-item[data-v-e63bc43a] *:after{box-sizing:border-box}.b-navigation-menu-item[data-v-e63bc43a] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu-item[data-v-e63bc43a] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-navigation-menu-item--no-icon .b-navigation-menu-item__link[data-v-e63bc43a]{padding-left:var(--b-spacer-060)}.b-navigation-menu-item[data-v-e63bc43a]:hover{background-color:var(--b-color-background-tertiary-hover)}.b-navigation-menu-item[data-v-e63bc43a]:active{background-color:var(--b-color-background-tertiary-active)}.b-navigation-menu-item__link[data-v-e63bc43a]{align-items:center;cursor:pointer;display:flex;flex:1;gap:var(--b-spacer-020);min-height:32px;min-width:0;padding:var(--b-spacer-010) 0 var(--b-spacer-010) var(--b-spacer-020);text-decoration:none}.b-navigation-menu-item__link[data-v-e63bc43a]:focus-visible{border-radius:var(--b-border-radius-m)}.b-navigation-menu-item__icon[data-v-e63bc43a]{display:flex;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-item__label[data-v-e63bc43a]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-navigation-menu-item__icon[data-v-e63bc43a],.b-navigation-menu-item__label[data-v-e63bc43a]{color:var(--b-color-label-primary)}.b-navigation-menu-item__action[data-v-e63bc43a]{display:none;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-item:hover .b-navigation-menu-item__action[data-v-e63bc43a],.b-navigation-menu-item:focus-within .b-navigation-menu-item__action[data-v-e63bc43a],.b-navigation-menu-item--always-show-actions .b-navigation-menu-item__action[data-v-e63bc43a]{display:flex}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-item:hover .b-navigation-menu-item__action[data-v-e63bc43a],.b-navigation-menu-item:focus-within .b-navigation-menu-item__action[data-v-e63bc43a],.b-navigation-menu-item--always-show-actions .b-navigation-menu-item__action[data-v-e63bc43a]{animation:fade-in-u2wlowg-e63bc43a var(--b-animation-duration-fast) var(--b-animation-easing-linear)}@keyframes fade-in-u2wlowg-e63bc43a{0%{opacity:0}to{opacity:1}}}.b-navigation-menu-item--selected[data-v-e63bc43a]{background-color:var(--b-color-background-navigation)}.b-navigation-menu-item--selected[data-v-e63bc43a]:hover{background-color:var(--b-color-background-navigation-hover)}.b-navigation-menu-item--selected[data-v-e63bc43a]:active{background-color:var(--b-color-background-navigation-active)}.b-navigation-menu-item--nested[data-v-e63bc43a]{margin-top:var(--b-spacer-010)}.b-navigation-menu-item--nested .b-navigation-menu-item__link[data-v-e63bc43a]{padding-left:36px}.b-navigation-menu-item--nested .b-navigation-menu-item__label[data-v-e63bc43a]{color:var(--b-color-label-secondary)}.b-navigation-menu-item--nested:hover .b-navigation-menu-item__label[data-v-e63bc43a],.b-navigation-menu-item--nested:active .b-navigation-menu-item__label[data-v-e63bc43a],.b-navigation-menu-item--nested.b-navigation-menu-item--selected .b-navigation-menu-item__label[data-v-e63bc43a]{color:var(--b-color-label-primary)}.b-navigation-menu-item--hidden[data-v-e63bc43a]{margin-top:0;max-height:0;min-height:0;opacity:0}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-item--hidden[data-v-e63bc43a]{transition:all var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}}.b-navigation-menu-item--hidden .b-navigation-menu-item__link[data-v-e63bc43a]{padding-bottom:0;padding-top:0}.b-navigation-menu-group[data-v-eb01071b]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-navigation-menu-group button[data-v-eb01071b]{background-color:transparent;border:0;font:inherit;text-align:inherit}.b-navigation-menu-group button[data-v-eb01071b]:focus-visible{outline:none}.b-navigation-menu-group[data-v-eb01071b],.b-navigation-menu-group[data-v-eb01071b]:before,.b-navigation-menu-group[data-v-eb01071b]:after{box-sizing:border-box}.b-navigation-menu-group[data-v-eb01071b] *,.b-navigation-menu-group[data-v-eb01071b] *:before,.b-navigation-menu-group[data-v-eb01071b] *:after{box-sizing:border-box}.b-navigation-menu-group[data-v-eb01071b] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu-group[data-v-eb01071b] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-navigation-menu-group__header[data-v-eb01071b]{align-items:center;border-radius:var(--b-border-radius-m);color:var(--b-color-label-primary);cursor:pointer;display:flex;gap:var(--b-spacer-020);min-height:32px;padding:var(--b-spacer-010) var(--b-spacer-030);padding-left:var(--b-spacer-020);position:relative;width:100%}.b-navigation-menu-group__header[data-v-eb01071b]:hover{background-color:var(--b-color-background-tertiary-hover)}.b-navigation-menu-group__header[data-v-eb01071b]:active{background-color:var(--b-color-background-tertiary-active)}.b-navigation-menu-group__header[data-v-eb01071b]:focus-visible{outline:none;animation:outer-ring-default-eb01071b 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-eb01071b{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-navigation-menu-group__header--no-icon[data-v-eb01071b]{padding-left:var(--b-spacer-050)}.b-navigation-menu-group__icon[data-v-eb01071b]{display:flex;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-group__icon--chevron[data-v-eb01071b]{display:none}.b-navigation-menu-group__header:hover .b-navigation-menu-group__icon--chevron[data-v-eb01071b],.b-navigation-menu-group__header:focus-visible .b-navigation-menu-group__icon--chevron[data-v-eb01071b]{display:flex}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__header:hover .b-navigation-menu-group__icon--chevron[data-v-eb01071b],.b-navigation-menu-group__header:focus-visible .b-navigation-menu-group__icon--chevron[data-v-eb01071b]{animation:fade-in-u2wlp24-eb01071b var(--b-animation-duration-fast) var(--b-animation-easing-linear)}@keyframes fade-in-u2wlp24-eb01071b{0%{opacity:0}to{opacity:1}}}.b-navigation-menu-group__label[data-v-eb01071b]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-navigation-menu-group__content-wrapper[data-v-eb01071b]{overflow:clip;overflow-clip-margin:var(--b-spacer-020)}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__content-wrapper[data-v-eb01071b]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}}.b-navigation-menu-group__content[data-v-eb01071b]{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.b-navigation-menu-group__animation--content-enter-active[data-v-eb01071b]{overflow:hidden}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__animation--content-enter-active[data-v-eb01071b]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-in-u2wlp2d-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-u2wlp2d-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-u2wlp2d-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-u2wlp2d-eb01071b{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u2wlp2d-eb01071b{0%{scale:1}to{scale:1}}@keyframes enter-u2wlp2d-eb01071b{0%{translate:0 -8px}to{translate:0 0}}}.b-navigation-menu-group__animation--content-leave-active[data-v-eb01071b]{max-height:0!important;overflow:hidden}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__animation--content-leave-active[data-v-eb01071b]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-out-u2wlp31-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-u2wlp31-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-u2wlp31-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-u2wlp31-eb01071b{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u2wlp31-eb01071b{0%{scale:1}to{scale:1}}@keyframes exit-u2wlp31-eb01071b{0%{translate:0 0}to{translate:0 -8px}}}
+.b-navigation-menu[data-v-f4fb4ca7]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;flex-direction:column;padding:var(--b-spacer-020) var(--b-spacer-040) var(--b-spacer-040)}.b-navigation-menu[data-v-f4fb4ca7],.b-navigation-menu[data-v-f4fb4ca7]:before,.b-navigation-menu[data-v-f4fb4ca7]:after{box-sizing:border-box}.b-navigation-menu[data-v-f4fb4ca7] *,.b-navigation-menu[data-v-f4fb4ca7] *:before,.b-navigation-menu[data-v-f4fb4ca7] *:after{box-sizing:border-box}.b-navigation-menu[data-v-f4fb4ca7] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu[data-v-f4fb4ca7] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-navigation-menu__header[data-v-f4fb4ca7]{align-items:center;display:flex;gap:var(--b-spacer-070);justify-content:space-between;min-height:32px;padding:var(--b-spacer-010) var(--b-spacer-030) var(--b-spacer-010) var(--b-spacer-060)}.b-navigation-menu__title[data-v-f4fb4ca7]{color:var(--b-color-label-secondary);font-family:var(--b-text-caption-font-family-secondary);font-variant-numeric:slashed-zero;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.b-navigation-menu__actions-container[data-v-f4fb4ca7],.b-navigation-menu__actions[data-v-f4fb4ca7]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-navigation-menu__actions-container[data-v-f4fb4ca7] .b-button--icon-only{padding:var(--b-spacer-030)}.b-navigation-menu__content[data-v-f4fb4ca7]{display:flex;flex-direction:column;gap:var(--b-spacer-010);list-style:none;margin:0;padding:0}.b-navigation-menu__content[data-v-f4fb4ca7] a{text-decoration:none}.b-navigation-menu-item[data-v-e63bc43a]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;align-items:center;border-radius:var(--b-border-radius-m);display:flex;min-height:32px;opacity:1;padding-right:var(--b-spacer-030)}.b-navigation-menu-item[data-v-e63bc43a],.b-navigation-menu-item[data-v-e63bc43a]:before,.b-navigation-menu-item[data-v-e63bc43a]:after{box-sizing:border-box}.b-navigation-menu-item[data-v-e63bc43a] *,.b-navigation-menu-item[data-v-e63bc43a] *:before,.b-navigation-menu-item[data-v-e63bc43a] *:after{box-sizing:border-box}.b-navigation-menu-item[data-v-e63bc43a] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu-item[data-v-e63bc43a] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-navigation-menu-item--no-icon .b-navigation-menu-item__link[data-v-e63bc43a]{padding-left:var(--b-spacer-060)}.b-navigation-menu-item[data-v-e63bc43a]:hover{background-color:var(--b-color-background-tertiary-hover)}.b-navigation-menu-item[data-v-e63bc43a]:active{background-color:var(--b-color-background-tertiary-active)}.b-navigation-menu-item__link[data-v-e63bc43a]{align-items:center;cursor:pointer;display:flex;flex:1;gap:var(--b-spacer-020);min-height:32px;min-width:0;padding:var(--b-spacer-010) 0 var(--b-spacer-010) var(--b-spacer-020);text-decoration:none}.b-navigation-menu-item__link[data-v-e63bc43a]:focus-visible{border-radius:var(--b-border-radius-m)}.b-navigation-menu-item__icon[data-v-e63bc43a]{display:flex;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-item__label[data-v-e63bc43a]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-navigation-menu-item__icon[data-v-e63bc43a],.b-navigation-menu-item__label[data-v-e63bc43a]{color:var(--b-color-label-primary)}.b-navigation-menu-item__action[data-v-e63bc43a]{display:none;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-item:hover .b-navigation-menu-item__action[data-v-e63bc43a],.b-navigation-menu-item:focus-within .b-navigation-menu-item__action[data-v-e63bc43a],.b-navigation-menu-item--always-show-actions .b-navigation-menu-item__action[data-v-e63bc43a]{display:flex}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-item:hover .b-navigation-menu-item__action[data-v-e63bc43a],.b-navigation-menu-item:focus-within .b-navigation-menu-item__action[data-v-e63bc43a],.b-navigation-menu-item--always-show-actions .b-navigation-menu-item__action[data-v-e63bc43a]{animation:fade-in-ud7augg-e63bc43a var(--b-animation-duration-fast) var(--b-animation-easing-linear)}@keyframes fade-in-ud7augg-e63bc43a{0%{opacity:0}to{opacity:1}}}.b-navigation-menu-item--selected[data-v-e63bc43a]{background-color:var(--b-color-background-navigation)}.b-navigation-menu-item--selected[data-v-e63bc43a]:hover{background-color:var(--b-color-background-navigation-hover)}.b-navigation-menu-item--selected[data-v-e63bc43a]:active{background-color:var(--b-color-background-navigation-active)}.b-navigation-menu-item--nested[data-v-e63bc43a]{margin-top:var(--b-spacer-010)}.b-navigation-menu-item--nested .b-navigation-menu-item__link[data-v-e63bc43a]{padding-left:36px}.b-navigation-menu-item--nested .b-navigation-menu-item__label[data-v-e63bc43a]{color:var(--b-color-label-secondary)}.b-navigation-menu-item--nested:hover .b-navigation-menu-item__label[data-v-e63bc43a],.b-navigation-menu-item--nested:active .b-navigation-menu-item__label[data-v-e63bc43a],.b-navigation-menu-item--nested.b-navigation-menu-item--selected .b-navigation-menu-item__label[data-v-e63bc43a]{color:var(--b-color-label-primary)}.b-navigation-menu-item--hidden[data-v-e63bc43a]{margin-top:0;max-height:0;min-height:0;opacity:0}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-item--hidden[data-v-e63bc43a]{transition:all var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}}.b-navigation-menu-item--hidden .b-navigation-menu-item__link[data-v-e63bc43a]{padding-bottom:0;padding-top:0}.b-navigation-menu-group[data-v-eb01071b]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-navigation-menu-group button[data-v-eb01071b]{background-color:transparent;border:0;font:inherit;text-align:inherit}.b-navigation-menu-group button[data-v-eb01071b]:focus-visible{outline:none}.b-navigation-menu-group[data-v-eb01071b],.b-navigation-menu-group[data-v-eb01071b]:before,.b-navigation-menu-group[data-v-eb01071b]:after{box-sizing:border-box}.b-navigation-menu-group[data-v-eb01071b] *,.b-navigation-menu-group[data-v-eb01071b] *:before,.b-navigation-menu-group[data-v-eb01071b] *:after{box-sizing:border-box}.b-navigation-menu-group[data-v-eb01071b] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu-group[data-v-eb01071b] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-navigation-menu-group__header[data-v-eb01071b]{align-items:center;border-radius:var(--b-border-radius-m);color:var(--b-color-label-primary);cursor:pointer;display:flex;gap:var(--b-spacer-020);min-height:32px;padding:var(--b-spacer-010) var(--b-spacer-030);padding-left:var(--b-spacer-020);position:relative;width:100%}.b-navigation-menu-group__header[data-v-eb01071b]:hover{background-color:var(--b-color-background-tertiary-hover)}.b-navigation-menu-group__header[data-v-eb01071b]:active{background-color:var(--b-color-background-tertiary-active)}.b-navigation-menu-group__header[data-v-eb01071b]:focus-visible{outline:none;animation:outer-ring-default-eb01071b 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-eb01071b{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-navigation-menu-group__header--no-icon[data-v-eb01071b]{padding-left:var(--b-spacer-050)}.b-navigation-menu-group__icon[data-v-eb01071b]{display:flex;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-group__icon--chevron[data-v-eb01071b]{display:none}.b-navigation-menu-group__header:hover .b-navigation-menu-group__icon--chevron[data-v-eb01071b],.b-navigation-menu-group__header:focus-visible .b-navigation-menu-group__icon--chevron[data-v-eb01071b]{display:flex}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__header:hover .b-navigation-menu-group__icon--chevron[data-v-eb01071b],.b-navigation-menu-group__header:focus-visible .b-navigation-menu-group__icon--chevron[data-v-eb01071b]{animation:fade-in-ud7auqp-eb01071b var(--b-animation-duration-fast) var(--b-animation-easing-linear)}@keyframes fade-in-ud7auqp-eb01071b{0%{opacity:0}to{opacity:1}}}.b-navigation-menu-group__label[data-v-eb01071b]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-navigation-menu-group__content-wrapper[data-v-eb01071b]{overflow:clip;overflow-clip-margin:var(--b-spacer-020)}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__content-wrapper[data-v-eb01071b]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}}.b-navigation-menu-group__content[data-v-eb01071b]{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.b-navigation-menu-group__animation--content-enter-active[data-v-eb01071b]{overflow:hidden}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__animation--content-enter-active[data-v-eb01071b]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-in-ud7aurp-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-ud7aurp-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-ud7aurp-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-ud7aurp-eb01071b{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ud7aurp-eb01071b{0%{scale:1}to{scale:1}}@keyframes enter-ud7aurp-eb01071b{0%{translate:0 -8px}to{translate:0 0}}}.b-navigation-menu-group__animation--content-leave-active[data-v-eb01071b]{max-height:0!important;overflow:hidden}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__animation--content-leave-active[data-v-eb01071b]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-out-ud7aus6-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-ud7aus6-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-ud7aus6-eb01071b var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-ud7aus6-eb01071b{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ud7aus6-eb01071b{0%{scale:1}to{scale:1}}@keyframes exit-ud7aus6-eb01071b{0%{translate:0 0}to{translate:0 -8px}}}

package/dist/assets/secondary-nav.css

@@ -1 +1 @@
-button[data-v-c78eb243]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-c78eb243]:focus-visible{outline:none}.b-secondary-nav-item[data-v-c78eb243]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;margin-top:var(--b-spacer-020)}.b-secondary-nav-item[data-v-c78eb243],.b-secondary-nav-item[data-v-c78eb243]:before,.b-secondary-nav-item[data-v-c78eb243]:after{box-sizing:border-box}.b-secondary-nav-item[data-v-c78eb243] *,.b-secondary-nav-item[data-v-c78eb243] *:before,.b-secondary-nav-item[data-v-c78eb243] *:after{box-sizing:border-box}.b-secondary-nav-item[data-v-c78eb243] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-item[data-v-c78eb243] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-secondary-nav-item__wrapper[data-v-c78eb243]{position:relative}@media(hover:hover){.b-secondary-nav-item__wrapper:hover .b-secondary-nav-item__option[data-v-c78eb243]:not(:active){background-color:var(--b-color-background-primary-hover)}.b-secondary-nav-item__wrapper:hover .b-secondary-nav-item__option:not(:active).b-secondary-nav-item__option--active[data-v-c78eb243]{background-color:var(--b-color-background-navigation-hover)}}.b-secondary-nav-item__option[data-v-c78eb243]{align-items:center;border-radius:var(--b-border-radius-m);color:var(--b-color-label-primary);cursor:pointer;display:flex;justify-content:space-between;padding:var(--b-spacer-040) var(--b-spacer-050);width:100%}.b-secondary-nav-item__option[data-v-c78eb243]:active{background-color:var(--b-color-background-primary-active)}.b-secondary-nav-item__option--active[data-v-c78eb243]{background-color:var(--b-color-background-navigation)}.b-secondary-nav-item__option--active[data-v-c78eb243]:active{background-color:var(--b-color-background-navigation-active)}.b-secondary-nav-item__option[data-v-c78eb243]:focus-visible{animation:outer-ring-default-c78eb243 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-c78eb243{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-secondary-nav-item__option--sub-item[data-v-c78eb243]{padding-left:var(--b-spacer-080)}.b-secondary-nav-item__option--expandable[data-v-c78eb243]{padding-right:var(--b-spacer-100)}.b-secondary-nav-item__toggle[data-v-c78eb243]{position:absolute;right:var(--b-spacer-050);top:50%;transform:translateY(-50%)}.b-secondary-nav-item__toggle[data-v-c78eb243]:after{content:"";display:block;inset:calc(var(--b-spacer-050) * -1);position:absolute}.b-secondary-nav-item__error-counter[data-v-c78eb243]{cursor:inherit}.b-secondary-nav-item__sub-items[data-v-c78eb243]{list-style:none;padding:0}.b-secondary-nav-item__animation--content-enter-active[data-v-c78eb243]{overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-in-u2wlp6a-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-u2wlp6a-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-u2wlp6a-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-u2wlp6a-c78eb243{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u2wlp6a-c78eb243{0%{scale:1}to{scale:1}}@keyframes enter-u2wlp6a-c78eb243{0%{translate:0 -8px}to{translate:0 0}}.b-secondary-nav-item__animation--content-leave-active[data-v-c78eb243]{max-height:0!important;overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-out-u2wlp7a-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-u2wlp7a-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-u2wlp7a-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-u2wlp7a-c78eb243{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u2wlp7a-c78eb243{0%{scale:1}to{scale:1}}@keyframes exit-u2wlp7a-c78eb243{0%{translate:0 0}to{translate:0 -8px}}.b-secondary-nav-category[data-v-7b080ce9]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;margin-bottom:var(--b-spacer-080)}.b-secondary-nav-category[data-v-7b080ce9],.b-secondary-nav-category[data-v-7b080ce9]:before,.b-secondary-nav-category[data-v-7b080ce9]:after{box-sizing:border-box}.b-secondary-nav-category[data-v-7b080ce9] *,.b-secondary-nav-category[data-v-7b080ce9] *:before,.b-secondary-nav-category[data-v-7b080ce9] *:after{box-sizing:border-box}.b-secondary-nav-category[data-v-7b080ce9] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-category[data-v-7b080ce9] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-secondary-nav-category__label[data-v-7b080ce9]{color:var(--b-color-label-secondary);padding:0 var(--b-spacer-050) var(--b-spacer-020) var(--b-spacer-050)}.b-secondary-nav[data-v-2f777dea]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-secondary-nav[data-v-2f777dea],.b-secondary-nav[data-v-2f777dea]:before,.b-secondary-nav[data-v-2f777dea]:after{box-sizing:border-box}.b-secondary-nav[data-v-2f777dea] *,.b-secondary-nav[data-v-2f777dea] *:before,.b-secondary-nav[data-v-2f777dea] *:after{box-sizing:border-box}.b-secondary-nav[data-v-2f777dea] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav[data-v-2f777dea] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media(min-width:500px){.b-secondary-nav[data-v-2f777dea]{max-width:250px}}.b-secondary-nav[data-v-2f777dea] .b-secondary-nav__list{list-style:none;margin:0;padding:0}.b-secondary-nav__option[data-v-2f777dea]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-secondary-nav__nested-option[data-v-2f777dea]{padding-left:var(--b-spacer-070)}
+button[data-v-c78eb243]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-c78eb243]:focus-visible{outline:none}.b-secondary-nav-item[data-v-c78eb243]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;margin-top:var(--b-spacer-020)}.b-secondary-nav-item[data-v-c78eb243],.b-secondary-nav-item[data-v-c78eb243]:before,.b-secondary-nav-item[data-v-c78eb243]:after{box-sizing:border-box}.b-secondary-nav-item[data-v-c78eb243] *,.b-secondary-nav-item[data-v-c78eb243] *:before,.b-secondary-nav-item[data-v-c78eb243] *:after{box-sizing:border-box}.b-secondary-nav-item[data-v-c78eb243] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-item[data-v-c78eb243] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-secondary-nav-item__wrapper[data-v-c78eb243]{position:relative}@media(hover:hover){.b-secondary-nav-item__wrapper:hover .b-secondary-nav-item__option[data-v-c78eb243]:not(:active){background-color:var(--b-color-background-primary-hover)}.b-secondary-nav-item__wrapper:hover .b-secondary-nav-item__option:not(:active).b-secondary-nav-item__option--active[data-v-c78eb243]{background-color:var(--b-color-background-navigation-hover)}}.b-secondary-nav-item__option[data-v-c78eb243]{align-items:center;border-radius:var(--b-border-radius-m);color:var(--b-color-label-primary);cursor:pointer;display:flex;justify-content:space-between;padding:var(--b-spacer-040) var(--b-spacer-050);width:100%}.b-secondary-nav-item__option[data-v-c78eb243]:active{background-color:var(--b-color-background-primary-active)}.b-secondary-nav-item__option--active[data-v-c78eb243]{background-color:var(--b-color-background-navigation)}.b-secondary-nav-item__option--active[data-v-c78eb243]:active{background-color:var(--b-color-background-navigation-active)}.b-secondary-nav-item__option[data-v-c78eb243]:focus-visible{animation:outer-ring-default-c78eb243 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-c78eb243{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-secondary-nav-item__option--sub-item[data-v-c78eb243]{padding-left:var(--b-spacer-080)}.b-secondary-nav-item__option--expandable[data-v-c78eb243]{padding-right:var(--b-spacer-100)}.b-secondary-nav-item__toggle[data-v-c78eb243]{position:absolute;right:var(--b-spacer-050);top:50%;transform:translateY(-50%)}.b-secondary-nav-item__toggle[data-v-c78eb243]:after{content:"";display:block;inset:calc(var(--b-spacer-050) * -1);position:absolute}.b-secondary-nav-item__error-counter[data-v-c78eb243]{cursor:inherit}.b-secondary-nav-item__sub-items[data-v-c78eb243]{list-style:none;padding:0}.b-secondary-nav-item__animation--content-enter-active[data-v-c78eb243]{overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-in-ud7auww-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-ud7auww-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-ud7auww-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-ud7auww-c78eb243{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ud7auww-c78eb243{0%{scale:1}to{scale:1}}@keyframes enter-ud7auww-c78eb243{0%{translate:0 -8px}to{translate:0 0}}.b-secondary-nav-item__animation--content-leave-active[data-v-c78eb243]{max-height:0!important;overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-out-ud7auxw-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-ud7auxw-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-ud7auxw-c78eb243 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-ud7auxw-c78eb243{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ud7auxw-c78eb243{0%{scale:1}to{scale:1}}@keyframes exit-ud7auxw-c78eb243{0%{translate:0 0}to{translate:0 -8px}}.b-secondary-nav-category[data-v-7b080ce9]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;margin-bottom:var(--b-spacer-080)}.b-secondary-nav-category[data-v-7b080ce9],.b-secondary-nav-category[data-v-7b080ce9]:before,.b-secondary-nav-category[data-v-7b080ce9]:after{box-sizing:border-box}.b-secondary-nav-category[data-v-7b080ce9] *,.b-secondary-nav-category[data-v-7b080ce9] *:before,.b-secondary-nav-category[data-v-7b080ce9] *:after{box-sizing:border-box}.b-secondary-nav-category[data-v-7b080ce9] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-category[data-v-7b080ce9] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-secondary-nav-category__label[data-v-7b080ce9]{color:var(--b-color-label-secondary);padding:0 var(--b-spacer-050) var(--b-spacer-020) var(--b-spacer-050)}.b-secondary-nav[data-v-2f777dea]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-secondary-nav[data-v-2f777dea],.b-secondary-nav[data-v-2f777dea]:before,.b-secondary-nav[data-v-2f777dea]:after{box-sizing:border-box}.b-secondary-nav[data-v-2f777dea] *,.b-secondary-nav[data-v-2f777dea] *:before,.b-secondary-nav[data-v-2f777dea] *:after{box-sizing:border-box}.b-secondary-nav[data-v-2f777dea] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav[data-v-2f777dea] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media(min-width:500px){.b-secondary-nav[data-v-2f777dea]{max-width:250px}}.b-secondary-nav[data-v-2f777dea] .b-secondary-nav__list{list-style:none;margin:0;padding:0}.b-secondary-nav__option[data-v-2f777dea]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-secondary-nav__nested-option[data-v-2f777dea]{padding-left:var(--b-spacer-070)}

package/dist/assets/sidepanel.css

@@ -1 +1 @@
-.b-sidepanel-page[data-v-42613cdd]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.b-sidepanel-page[data-v-42613cdd],.b-sidepanel-page[data-v-42613cdd]:before,.b-sidepanel-page[data-v-42613cdd]:after{box-sizing:border-box}.b-sidepanel-page[data-v-42613cdd] *,.b-sidepanel-page[data-v-42613cdd] *:before,.b-sidepanel-page[data-v-42613cdd] *:after{box-sizing:border-box}.b-sidepanel-page[data-v-42613cdd] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-42613cdd] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-sidepanel-page__header[data-v-42613cdd]{align-items:center;background-color:var(--b-color-background-modal);border-top-left-radius:var(--b-border-radius-l);display:flex;overflow:hidden;padding:var(--b-spacer-070) var(--b-spacer-130) var(--b-spacer-070) var(--b-spacer-090);position:sticky;white-space:nowrap;width:100%}.b-sidepanel-page__title[data-v-42613cdd]{color:var(--b-color-label-primary);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-42613cdd]{color:var(--b-color-label-primary);flex-grow:1;overflow:auto;padding:0 var(--b-spacer-090)}.b-sidepanel-page__actions[data-v-42613cdd]{background-color:var(--b-color-background-modal);border-bottom-left-radius:var(--b-border-radius-l);color:var(--b-color-label-primary);padding:var(--b-spacer-070) var(--b-spacer-090)}.b-sidepanel[data-v-d01ab99f]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;background-color:var(--b-color-background-modal);border:0;height:100%;max-height:100%;max-width:100%;overflow:visible;padding:0;width:100%}.b-sidepanel[data-v-d01ab99f],.b-sidepanel[data-v-d01ab99f]:before,.b-sidepanel[data-v-d01ab99f]:after{box-sizing:border-box}.b-sidepanel[data-v-d01ab99f] *,.b-sidepanel[data-v-d01ab99f] *:before,.b-sidepanel[data-v-d01ab99f] *:after{box-sizing:border-box}.b-sidepanel[data-v-d01ab99f] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-d01ab99f] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media(min-width:500px){.b-sidepanel[data-v-d01ab99f]{border-radius:var(--b-border-radius-l) 0 0 var(--b-border-radius-l);margin:0 0 0 auto;width:480px}}@media(min-width:768px){.b-sidepanel[data-v-d01ab99f]{max-width:680px;min-width:480px;width:33%}}.b-sidepanel__close-button[data-v-d01ab99f]{align-items:center;display:flex;height:64px;position:absolute;right:var(--b-spacer-090);z-index:var(--b-z-index-local-tier-1)}.b-sidepanel--animation[data-v-d01ab99f]{overflow:hidden}.b-sidepanel[data-v-d01ab99f]::backdrop{background-color:var(--b-color-support-overlay, #00112c);opacity:.5}.b-sidepanel[open][data-v-d01ab99f]{animation:enter-u2wloj4-d01ab99f var(--b-animation-duration-slow, .25s) var(--b-animation-easing-enter)}@keyframes enter-u2wloj4-d01ab99f{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-d01ab99f]::backdrop{animation:fade-in-u2wlok2-d01ab99f var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-u2wlok2-d01ab99f{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-d01ab99f]{animation:exit-u2wlokp-d01ab99f var(--b-animation-duration-slow, .25s) var(--b-animation-easing-exit)}@keyframes exit-u2wlokp-d01ab99f{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-d01ab99f]::backdrop{animation:fade-out-u2wlokz-d01ab99f var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-u2wlokz-d01ab99f{0%{opacity:.5}to{opacity:0}}
+.b-sidepanel-page[data-v-42613cdd]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.b-sidepanel-page[data-v-42613cdd],.b-sidepanel-page[data-v-42613cdd]:before,.b-sidepanel-page[data-v-42613cdd]:after{box-sizing:border-box}.b-sidepanel-page[data-v-42613cdd] *,.b-sidepanel-page[data-v-42613cdd] *:before,.b-sidepanel-page[data-v-42613cdd] *:after{box-sizing:border-box}.b-sidepanel-page[data-v-42613cdd] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-42613cdd] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-sidepanel-page__header[data-v-42613cdd]{align-items:center;background-color:var(--b-color-background-modal);border-top-left-radius:var(--b-border-radius-l);display:flex;overflow:hidden;padding:var(--b-spacer-070) var(--b-spacer-130) var(--b-spacer-070) var(--b-spacer-090);position:sticky;white-space:nowrap;width:100%}.b-sidepanel-page__title[data-v-42613cdd]{color:var(--b-color-label-primary);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-42613cdd]{color:var(--b-color-label-primary);flex-grow:1;overflow:auto;padding:0 var(--b-spacer-090)}.b-sidepanel-page__actions[data-v-42613cdd]{background-color:var(--b-color-background-modal);border-bottom-left-radius:var(--b-border-radius-l);color:var(--b-color-label-primary);padding:var(--b-spacer-070) var(--b-spacer-090)}.b-sidepanel[data-v-d01ab99f]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;background-color:var(--b-color-background-modal);border:0;height:100%;max-height:100%;max-width:100%;overflow:visible;padding:0;width:100%}.b-sidepanel[data-v-d01ab99f],.b-sidepanel[data-v-d01ab99f]:before,.b-sidepanel[data-v-d01ab99f]:after{box-sizing:border-box}.b-sidepanel[data-v-d01ab99f] *,.b-sidepanel[data-v-d01ab99f] *:before,.b-sidepanel[data-v-d01ab99f] *:after{box-sizing:border-box}.b-sidepanel[data-v-d01ab99f] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-d01ab99f] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-label-tertiary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}@media(min-width:500px){.b-sidepanel[data-v-d01ab99f]{border-radius:var(--b-border-radius-l) 0 0 var(--b-border-radius-l);margin:0 0 0 auto;width:480px}}@media(min-width:768px){.b-sidepanel[data-v-d01ab99f]{max-width:680px;min-width:480px;width:33%}}.b-sidepanel__close-button[data-v-d01ab99f]{align-items:center;display:flex;height:64px;position:absolute;right:var(--b-spacer-090);z-index:var(--b-z-index-local-tier-1)}.b-sidepanel--animation[data-v-d01ab99f]{overflow:hidden}.b-sidepanel[data-v-d01ab99f]::backdrop{background-color:var(--b-color-support-overlay, #00112c);opacity:.5}.b-sidepanel[open][data-v-d01ab99f]{animation:enter-ud7au5e-d01ab99f var(--b-animation-duration-slow, .25s) var(--b-animation-easing-enter)}@keyframes enter-ud7au5e-d01ab99f{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-d01ab99f]::backdrop{animation:fade-in-ud7au6a-d01ab99f var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-ud7au6a-d01ab99f{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-d01ab99f]{animation:exit-ud7au6i-d01ab99f var(--b-animation-duration-slow, .25s) var(--b-animation-easing-exit)}@keyframes exit-ud7au6i-d01ab99f{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-d01ab99f]::backdrop{animation:fade-out-ud7au77-d01ab99f var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-ud7au77-d01ab99f{0%{opacity:.5}to{opacity:0}}

package/dist/card.js

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

package/dist/chunks/{accordion-item.l88yjGPT.js → accordion-item.BMxeTYDy.js}

@@ -5,7 +5,7 @@ import { _ as w } from "./chevron-down.DDkuHzKj.js";
 import { _ as J } from "./chevron-up.CE9uVcoS.js";
 import { g as h } from "./generate-uid.DBWe4g6T.js";
 import { u as U } from "./index.B875RXHM.js";
-import { u as q } from "./use-expandable-content-height.Bdd9hQwq.js";
+import { u as q } from "./use-expandable-content-height.DmFeas9-.js";
 import "../assets/accordion-item.css";
 const S = /* @__PURE__ */ Symbol("accordion title size injection key"), F = { class: "b-accordion" }, G = {}, K = /* @__PURE__ */ C({
   ...G,
@@ -130,4 +130,4 @@ export {
   le as a,
   ce as b
 };
-//# sourceMappingURL=accordion-item.l88yjGPT.js.map
+//# sourceMappingURL=accordion-item.BMxeTYDy.js.map

package/dist/chunks/{accordion-item.l88yjGPT.js.map → accordion-item.BMxeTYDy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.l88yjGPT.js","sources":["../../../vue2/src/components/accordion/accordion.keys.ts","../../../vue2/src/components/accordion/accordion.vue","../../../vue2/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 '@/utils/ts/generate-uid';\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<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\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 { 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        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\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","props","emit","__emit","t","useI18n","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value"],"mappings":";;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,oCAAA,iCCqDHC,IAAA,CAAA;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAXAC,GAWA,WAAA,CAAA;;;;;;;;;;;;;;;;mHCoHAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;AAvFA,UAAAC,IAAA,wCAEAC,IAAAJ,GAiBAK,IAAAC,GAOA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAN,EAAA,UAAA,GAGAQ,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAApB,GAAA,SAAA,GAGA,EAAA,eAAAqB,EAAA,IAAAC,EAAAT,GAAAE,CAAA,GAEAQ,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAjB,EAAA;AAAA,MACgB,CAAAkB,MAAA;AAER,QAAAX,EAAA,QAAAW;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAAV;AAAA,MACI,CAAAW,MAAA;AAGI,QAAAjB,EAAA,sBAAAiB,CAAA;AAAA,MAAgC;AAAA,MACpC,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"accordion-item.BMxeTYDy.js","sources":["../../../vue2/src/components/accordion/accordion.keys.ts","../../../vue2/src/components/accordion/accordion.vue","../../../vue2/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 '@/utils/ts/generate-uid';\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<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\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 { 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        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\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","props","emit","__emit","t","useI18n","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value"],"mappings":";;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,oCAAA,iCCqDHC,IAAA,CAAA;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAXAC,GAWA,WAAA,CAAA;;;;;;;;;;;;;;;;mHCoHAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;AAvFA,UAAAC,IAAA,wCAEAC,IAAAJ,GAiBAK,IAAAC,GAOA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAN,EAAA,UAAA,GAGAQ,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAApB,GAAA,SAAA,GAGA,EAAA,eAAAqB,EAAA,IAAAC,EAAAT,GAAAE,CAAA,GAEAQ,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAjB,EAAA;AAAA,MACgB,CAAAkB,MAAA;AAER,QAAAX,EAAA,QAAAW;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAAV;AAAA,MACI,CAAAW,MAAA;AAGI,QAAAjB,EAAA,sBAAAiB,CAAA;AAAA,MAAgC;AAAA,MACpC,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{card.ID7LqObu.js → card.a8QL14dy.js}

@@ -4,7 +4,7 @@ import { B as oe } from "./link.types.BGj7apK3.js";
 import { _ as le } from "./chevron-down.DDkuHzKj.js";
 import { _ as de } from "./chevron-up.CE9uVcoS.js";
 import { _ as se } from "./chevron-right-small.B8-YvBnS.js";
-import { u as ie } from "./use-expandable-content-height.Bdd9hQwq.js";
+import { u as ie } from "./use-expandable-content-height.DmFeas9-.js";
 import { u as re } from "./use-has-slot.CyMiImRQ.js";
 import { g as ce } from "./generate-uid.DBWe4g6T.js";
 import { u as ue } from "./index.B875RXHM.js";
@@ -251,4 +251,4 @@ export {
   p as a,
   Oe as c
 };
-//# sourceMappingURL=card.ID7LqObu.js.map
+//# sourceMappingURL=card.a8QL14dy.js.map

package/dist/chunks/{card.ID7LqObu.js.map → card.a8QL14dy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"card.ID7LqObu.js","sources":["../../../vue2/src/components/card/card.types.ts","../../../vue2/src/components/card/card.vue"],"sourcesContent":["import { type BentoLinkProps } from '../link';\n\nexport { type TitleDetailsReloadButton as BentoCardReloadButton } from '../internal/title-details/title-details.types';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n\nexport type BentoCardLink = Omit<BentoLinkProps, 'variant'>;\n","<template>\n    <div\n        class=\"b-card\"\n        :class=\"cardConditionalClasses\"\n        :tabindex=\"tabIndex\"\n        data-testid=\"card\"\n        @click=\"onClick\"\n        @keydown.enter=\"onKeyDown\"\n        @keydown.space=\"onKeyDown\"\n    >\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=\"headerTabIndex\"\n            :aria-controls=\"expandable && showCardBody ? 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('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n\n                        <template v-if=\"hasSlot('default')\">\n                            <bento-link\n                                v-if=\"link && isRegularCard\"\n                                class=\"b-card__link\"\n                                v-bind=\"link\"\n                                variant=\"quiet\"\n                                disable-typography\n                            >\n                                <bento-typography class=\"b-card__title\" v-bind=\"typography\" el=\"span\">\n                                    <slot />\n                                </bento-typography>\n\n                                <chevron-right-small-icon class=\"b-card__link-icon\" aria-hidden=\"true\" />\n                            </bento-link>\n\n                            <bento-typography v-else class=\"b-card__title\" v-bind=\"typography\">\n                                <slot />\n                            </bento-typography>\n                        </template>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <div v-if=\"hasSlot('description') || showLastUpdated\" class=\"b-card__title-details\">\n                    <title-details\n                        :last-updated=\"showLastUpdated ? lastUpdated : null\"\n                        :reload-button=\"showLastUpdated ? reloadButton : null\"\n                    >\n                        <template v-if=\"hasSlot('description')\" #description><slot name=\"description\" /></template>\n                    </title-details>\n                </div>\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, onMounted, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLink } from '@/components/link';\n    import { BentoButtonActions, BentoButtonActionsLayout, type BentoButtonActionsList } from '@/components/button';\n    import {\n        BentoCardBackground,\n        type BentoCardLink,\n        type BentoCardReloadButton,\n        BentoCardTitleSize,\n    } from '@/components/card/card.types';\n    import { TitleDetails } from '@/internal/title-details';\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    import ChevronRightSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\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/generate-uid';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { deprecate } from '@/utils/ts/deprecate';\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             * Makes the whole card clickable\n             */\n            clickable?: boolean;\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             * JavaScript \"Date\" object for when the content was last updated\n             *\n             * Only supported by regular (non-expandable) cards.\n             */\n            lastUpdated?: Date | number;\n\n            /**\n             * Reload button which shows next to the card's timestamp\n             *\n             * Only supported by regular (non-expandable) cards.\n             */\n            reloadButton?: BentoCardReloadButton;\n\n            /**\n             * Link properties to make the card title a navigable link. Can only be used with non-expandable cards.\n             */\n            link?: BentoCardLink;\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            clickable: false,\n            closed: false,\n            disabled: false,\n            expandable: false,\n            lastUpdated: null,\n            reloadButton: null,\n            link: undefined,\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 showLastUpdated = computed(() => !props.expandable && Boolean(props.lastUpdated));\n    const showHeader = computed(\n        () => hasSlot('default') || hasSlot('description') || hasSlot('header') || showLastUpdated.value\n    );\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.clickable && !props.disabled ? 0 : -1));\n    const headerTabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n    const isRegularCard = computed(() => !props.expandable);\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--clickable': props.clickable,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': (props.clickable || 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 { contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n\n            if (!props.clickable) {\n                deprecate(\n                    'BentoCard \"@click\" property',\n                    `Use the BentoCard \"@click\" with the \"clickable\" property to enable accessible styles.`,\n                    '2.0.0'\n                );\n            }\n        }\n    };\n\n    const onKeyDown = () => {\n        if (props.clickable && !props.disabled) {\n            emit('click');\n        }\n    };\n\n    onMounted(() => {\n        if (props.link && props.clickable) {\n            throw new Error(\n                'Do not combine the BentoCard \"link\" property with the \"clickable\" property. Nested interactive controls create a confusing and inaccessible experience for users of assistive technologies.'\n            );\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","props","__props","emit","__emit","contentDiv","ref","cardId","generateUid","showContent","watch","value","showLastUpdated","computed","showHeader","showTitleWrapper","showCardBody","tabIndex","headerTabIndex","isRegularCard","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","contentHeight","useExpandableContentHeight","contentMaxHeight","toggleExpansion","onClick","deprecate","onKeyDown","onMounted"],"mappings":"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"}
+{"version":3,"file":"card.a8QL14dy.js","sources":["../../../vue2/src/components/card/card.types.ts","../../../vue2/src/components/card/card.vue"],"sourcesContent":["import { type BentoLinkProps } from '../link';\n\nexport { type TitleDetailsReloadButton as BentoCardReloadButton } from '../internal/title-details/title-details.types';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n\nexport type BentoCardLink = Omit<BentoLinkProps, 'variant'>;\n","<template>\n    <div\n        class=\"b-card\"\n        :class=\"cardConditionalClasses\"\n        :tabindex=\"tabIndex\"\n        data-testid=\"card\"\n        @click=\"onClick\"\n        @keydown.enter=\"onKeyDown\"\n        @keydown.space=\"onKeyDown\"\n    >\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=\"headerTabIndex\"\n            :aria-controls=\"expandable && showCardBody ? 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('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n\n                        <template v-if=\"hasSlot('default')\">\n                            <bento-link\n                                v-if=\"link && isRegularCard\"\n                                class=\"b-card__link\"\n                                v-bind=\"link\"\n                                variant=\"quiet\"\n                                disable-typography\n                            >\n                                <bento-typography class=\"b-card__title\" v-bind=\"typography\" el=\"span\">\n                                    <slot />\n                                </bento-typography>\n\n                                <chevron-right-small-icon class=\"b-card__link-icon\" aria-hidden=\"true\" />\n                            </bento-link>\n\n                            <bento-typography v-else class=\"b-card__title\" v-bind=\"typography\">\n                                <slot />\n                            </bento-typography>\n                        </template>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <div v-if=\"hasSlot('description') || showLastUpdated\" class=\"b-card__title-details\">\n                    <title-details\n                        :last-updated=\"showLastUpdated ? lastUpdated : null\"\n                        :reload-button=\"showLastUpdated ? reloadButton : null\"\n                    >\n                        <template v-if=\"hasSlot('description')\" #description><slot name=\"description\" /></template>\n                    </title-details>\n                </div>\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, onMounted, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLink } from '@/components/link';\n    import { BentoButtonActions, BentoButtonActionsLayout, type BentoButtonActionsList } from '@/components/button';\n    import {\n        BentoCardBackground,\n        type BentoCardLink,\n        type BentoCardReloadButton,\n        BentoCardTitleSize,\n    } from '@/components/card/card.types';\n    import { TitleDetails } from '@/internal/title-details';\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    import ChevronRightSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\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/generate-uid';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { deprecate } from '@/utils/ts/deprecate';\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             * Makes the whole card clickable\n             */\n            clickable?: boolean;\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             * JavaScript \"Date\" object for when the content was last updated\n             *\n             * Only supported by regular (non-expandable) cards.\n             */\n            lastUpdated?: Date | number;\n\n            /**\n             * Reload button which shows next to the card's timestamp\n             *\n             * Only supported by regular (non-expandable) cards.\n             */\n            reloadButton?: BentoCardReloadButton;\n\n            /**\n             * Link properties to make the card title a navigable link. Can only be used with non-expandable cards.\n             */\n            link?: BentoCardLink;\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            clickable: false,\n            closed: false,\n            disabled: false,\n            expandable: false,\n            lastUpdated: null,\n            reloadButton: null,\n            link: undefined,\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 showLastUpdated = computed(() => !props.expandable && Boolean(props.lastUpdated));\n    const showHeader = computed(\n        () => hasSlot('default') || hasSlot('description') || hasSlot('header') || showLastUpdated.value\n    );\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.clickable && !props.disabled ? 0 : -1));\n    const headerTabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n    const isRegularCard = computed(() => !props.expandable);\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--clickable': props.clickable,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': (props.clickable || 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 { contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n\n            if (!props.clickable) {\n                deprecate(\n                    'BentoCard \"@click\" property',\n                    `Use the BentoCard \"@click\" with the \"clickable\" property to enable accessible styles.`,\n                    '2.0.0'\n                );\n            }\n        }\n    };\n\n    const onKeyDown = () => {\n        if (props.clickable && !props.disabled) {\n            emit('click');\n        }\n    };\n\n    onMounted(() => {\n        if (props.link && props.clickable) {\n            throw new Error(\n                'Do not combine the BentoCard \"link\" property with the \"clickable\" property. Nested interactive controls create a confusing and inaccessible experience for users of assistive technologies.'\n            );\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","props","__props","emit","__emit","contentDiv","ref","cardId","generateUid","showContent","watch","value","showLastUpdated","computed","showHeader","showTitleWrapper","showCardBody","tabIndex","headerTabIndex","isRegularCard","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","contentHeight","useExpandableContentHeight","contentMaxHeight","toggleExpansion","onClick","deprecate","onKeyDown","onMounted"],"mappings":"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"}

package/dist/chunks/{data-grid.Ca27H24r.js → data-grid.vBDlLHOW.js}

@@ -31,18 +31,18 @@ import { B as Ml } from "./directive.D1-d-C2K.js";
 import { j as zl, f as Fl } from "./dropdown.D_jkFrMd.js";
 import { _ as Pl } from "./search.mr5Q3y2z.js";
 import { B as gn } from "./checkbox.0RmIkniU.js";
-import { a as mn } from "./focus-trap.Co-S6goa.js";
 import { B as kl } from "./info-icon.Zlg6Sgz0.js";
 import { B as Ht } from "./popover.types.dhllh3NP.js";
 import { _ as Ul } from "./arrow-left.B3NvFWxZ.js";
 import { _ as $l } from "./arrow-right.DbMEaPcx.js";
 import { a as Bl, _ as xl } from "./show.RdHv7Hx9.js";
 import { l as Zt } from "./events.BQOQSSb7.js";
+import { a as mn } from "./focus-trap.Co-S6goa.js";
 import { _ as jt } from "./link.types.BGj7apK3.js";
 import { C as qt } from "./copy.C92qFRaR.js";
 import { _ as Vl } from "./chevron-down.DDkuHzKj.js";
 import { _ as Wl } from "./chevron-up.CE9uVcoS.js";
-import { u as Gl } from "./use-expandable-content-height.Bdd9hQwq.js";
+import { u as Gl } from "./use-expandable-content-height.DmFeas9-.js";
 import "../assets/data-grid.css";
 const Kt = (e) => {
   if (!e)
@@ -4197,4 +4197,4 @@ export {
   ke as h,
   Le as i
 };
-//# sourceMappingURL=data-grid.Ca27H24r.js.map
+//# sourceMappingURL=data-grid.vBDlLHOW.js.map