@adyen/bento-vue2 2.0.0 → 2.0.1

package/dist/assets/inspector.css

@@ -1 +1 @@
-.b-inspector[data-v-110ca0c0]{-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-110ca0c0],.b-inspector[data-v-110ca0c0]:before,.b-inspector[data-v-110ca0c0]:after{box-sizing:border-box}.b-inspector *[data-v-110ca0c0],.b-inspector *[data-v-110ca0c0]:before,.b-inspector *[data-v-110ca0c0]:after{box-sizing:border-box}.b-inspector[data-v-110ca0c0] ::-webkit-scrollbar{height:14px;width:14px}.b-inspector[data-v-110ca0c0] ::-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-110ca0c0]{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-110ca0c0],.b-inspector--multi-paged .b-inspector__focus-trap[data-v-110ca0c0]{height:100%}.b-inspector__page-wrapper[data-v-110ca0c0]{flex-grow:1;height:100%;overflow:auto}.b-inspector__page[data-v-110ca0c0]{height:100%}.b-inspector__container-wrapper[data-v-110ca0c0]{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-110ca0c0]{display:flex;flex-direction:column;height:100%}.b-inspector__container--padded[data-v-110ca0c0]{padding:var(--b-spacer-070) var(--b-spacer-090)}.b-inspector__header[data-v-110ca0c0]{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-110ca0c0]{flex-grow:1}.b-inspector__icons[data-v-110ca0c0]{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-110ca0c0]{flex-grow:1;height:100%}.b-inspector__loading-indicator[data-v-110ca0c0]{inset:50%;transform:translate(-50%,-50%)}.b-inspector__return-content[data-v-110ca0c0]{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-110ca0c0]: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-110ca0c0]{display:none}.b-inspector--small .b-inspector__container-wrapper[data-v-110ca0c0]{width:420px}.b-inspector--small .b-inspector__container[data-v-110ca0c0]{width:419px}@keyframes expand-small-110ca0c0{0%{width:0}to{width:420px}}@keyframes shrink-small-110ca0c0{0%{width:420px}to{width:0}}.b-inspector--small .b-inspector__animation-enter-active[data-v-110ca0c0]{animation:expand-small-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}.b-inspector--small .b-inspector__animation-enter-active .b-inspector__icons[data-v-110ca0c0]{animation:enter-uara2bx-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-uara2bx-110ca0c0{0%{translate:120px 0}to{translate:0 0}}.b-inspector--small .b-inspector__animation-enter-active .b-inspector__icons[data-v-110ca0c0]{animation-delay:calc(var(--b-animation-duration-slow) * .3);animation-fill-mode:backwards}.b-inspector--small .b-inspector__animation-leave-active[data-v-110ca0c0]{animation:shrink-small-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}.b-inspector--small .b-inspector__animation-leave-active .b-inspector__icons[data-v-110ca0c0]{animation:exit-uara2c8-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-uara2c8-110ca0c0{0%{translate:0 0}to{translate:120px 0}}.b-inspector--small.b-inspector--is-compact .b-inspector__container-wrapper[data-v-110ca0c0]{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-110ca0c0]{width:100%}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-110ca0c0]{animation:enter-uara2d7-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-uara2d7-110ca0c0{0%{translate:100% 0}to{translate:0 0}}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-110ca0c0]{animation:exit-uara2e4-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-uara2e4-110ca0c0{0%{translate:0 0}to{translate:100% 0}}.b-inspector--large .b-inspector__container-wrapper[data-v-110ca0c0]{width:595px}.b-inspector--large .b-inspector__container[data-v-110ca0c0]{width:594px}@keyframes expand-large-110ca0c0{0%{width:0}to{width:595px}}@keyframes shrink-large-110ca0c0{0%{width:595px}to{width:0}}.b-inspector--large .b-inspector__animation-enter-active[data-v-110ca0c0]{animation:expand-large-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}.b-inspector--large .b-inspector__animation-enter-active .b-inspector__icons[data-v-110ca0c0]{animation:enter-uara2em-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-uara2em-110ca0c0{0%{translate:120px 0}to{translate:0 0}}.b-inspector--large .b-inspector__animation-enter-active .b-inspector__icons[data-v-110ca0c0]{animation-delay:calc(var(--b-animation-duration-slow) * .3);animation-fill-mode:backwards}.b-inspector--large .b-inspector__animation-leave-active[data-v-110ca0c0]{animation:shrink-large-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}.b-inspector--large .b-inspector__animation-leave-active .b-inspector__icons[data-v-110ca0c0]{animation:exit-uara2es-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-uara2es-110ca0c0{0%{translate:0 0}to{translate:120px 0}}.b-inspector--large.b-inspector--is-compact .b-inspector__container-wrapper[data-v-110ca0c0]{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-110ca0c0]{width:100%}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-110ca0c0]{animation:enter-uara2ew-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-uara2ew-110ca0c0{0%{translate:100% 0}to{translate:0 0}}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-110ca0c0]{animation:exit-uara2fc-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-uara2fc-110ca0c0{0%{translate:0 0}to{translate:100% 0}}
+.b-inspector[data-v-110ca0c0]{-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-110ca0c0],.b-inspector[data-v-110ca0c0]:before,.b-inspector[data-v-110ca0c0]:after{box-sizing:border-box}.b-inspector *[data-v-110ca0c0],.b-inspector *[data-v-110ca0c0]:before,.b-inspector *[data-v-110ca0c0]:after{box-sizing:border-box}.b-inspector[data-v-110ca0c0] ::-webkit-scrollbar{height:14px;width:14px}.b-inspector[data-v-110ca0c0] ::-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-110ca0c0]{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-110ca0c0],.b-inspector--multi-paged .b-inspector__focus-trap[data-v-110ca0c0]{height:100%}.b-inspector__page-wrapper[data-v-110ca0c0]{flex-grow:1;height:100%;overflow:auto}.b-inspector__page[data-v-110ca0c0]{height:100%}.b-inspector__container-wrapper[data-v-110ca0c0]{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-110ca0c0]{display:flex;flex-direction:column;height:100%}.b-inspector__container--padded[data-v-110ca0c0]{padding:var(--b-spacer-070) var(--b-spacer-090)}.b-inspector__header[data-v-110ca0c0]{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-110ca0c0]{flex-grow:1}.b-inspector__icons[data-v-110ca0c0]{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-110ca0c0]{flex-grow:1;height:100%}.b-inspector__loading-indicator[data-v-110ca0c0]{inset:50%;transform:translate(-50%,-50%)}.b-inspector__return-content[data-v-110ca0c0]{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-110ca0c0]: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-110ca0c0]{display:none}.b-inspector--small .b-inspector__container-wrapper[data-v-110ca0c0]{width:420px}.b-inspector--small .b-inspector__container[data-v-110ca0c0]{width:419px}@keyframes expand-small-110ca0c0{0%{width:0}to{width:420px}}@keyframes shrink-small-110ca0c0{0%{width:420px}to{width:0}}.b-inspector--small .b-inspector__animation-enter-active[data-v-110ca0c0]{animation:expand-small-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}.b-inspector--small .b-inspector__animation-enter-active .b-inspector__icons[data-v-110ca0c0]{animation:enter-ucqnhks-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-ucqnhks-110ca0c0{0%{translate:120px 0}to{translate:0 0}}.b-inspector--small .b-inspector__animation-enter-active .b-inspector__icons[data-v-110ca0c0]{animation-delay:calc(var(--b-animation-duration-slow) * .3);animation-fill-mode:backwards}.b-inspector--small .b-inspector__animation-leave-active[data-v-110ca0c0]{animation:shrink-small-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}.b-inspector--small .b-inspector__animation-leave-active .b-inspector__icons[data-v-110ca0c0]{animation:exit-ucqnhl5-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-ucqnhl5-110ca0c0{0%{translate:0 0}to{translate:120px 0}}.b-inspector--small.b-inspector--is-compact .b-inspector__container-wrapper[data-v-110ca0c0]{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-110ca0c0]{width:100%}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-110ca0c0]{animation:enter-ucqnhlx-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-ucqnhlx-110ca0c0{0%{translate:100% 0}to{translate:0 0}}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-110ca0c0]{animation:exit-ucqnhm1-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-ucqnhm1-110ca0c0{0%{translate:0 0}to{translate:100% 0}}.b-inspector--large .b-inspector__container-wrapper[data-v-110ca0c0]{width:595px}.b-inspector--large .b-inspector__container[data-v-110ca0c0]{width:594px}@keyframes expand-large-110ca0c0{0%{width:0}to{width:595px}}@keyframes shrink-large-110ca0c0{0%{width:595px}to{width:0}}.b-inspector--large .b-inspector__animation-enter-active[data-v-110ca0c0]{animation:expand-large-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}.b-inspector--large .b-inspector__animation-enter-active .b-inspector__icons[data-v-110ca0c0]{animation:enter-ucqnhmw-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-ucqnhmw-110ca0c0{0%{translate:120px 0}to{translate:0 0}}.b-inspector--large .b-inspector__animation-enter-active .b-inspector__icons[data-v-110ca0c0]{animation-delay:calc(var(--b-animation-duration-slow) * .3);animation-fill-mode:backwards}.b-inspector--large .b-inspector__animation-leave-active[data-v-110ca0c0]{animation:shrink-large-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}.b-inspector--large .b-inspector__animation-leave-active .b-inspector__icons[data-v-110ca0c0]{animation:exit-ucqnhmz-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-ucqnhmz-110ca0c0{0%{translate:0 0}to{translate:120px 0}}.b-inspector--large.b-inspector--is-compact .b-inspector__container-wrapper[data-v-110ca0c0]{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-110ca0c0]{width:100%}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-110ca0c0]{animation:enter-ucqnhnj-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-enter)}@keyframes enter-ucqnhnj-110ca0c0{0%{translate:100% 0}to{translate:0 0}}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-110ca0c0]{animation:exit-ucqnhnu-110ca0c0 var(--b-animation-duration-slow) var(--b-animation-easing-exit)}@keyframes exit-ucqnhnu-110ca0c0{0%{translate:0 0}to{translate:100% 0}}

package/dist/assets/modal-fullscreen.css

@@ -1 +1 @@
-.b-modal-fullscreen-page[data-v-50f40dc1]{-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-50f40dc1],.b-modal-fullscreen-page[data-v-50f40dc1]:before,.b-modal-fullscreen-page[data-v-50f40dc1]:after{box-sizing:border-box}.b-modal-fullscreen-page *[data-v-50f40dc1],.b-modal-fullscreen-page *[data-v-50f40dc1]:before,.b-modal-fullscreen-page *[data-v-50f40dc1]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-50f40dc1] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-50f40dc1] ::-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-50f40dc1]{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-50f40dc1]{flex:0 1 auto}.b-modal-fullscreen-page__header-section[data-v-50f40dc1]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-50f40dc1]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-50f40dc1]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-50f40dc1]{align-items:center;gap:var(--b-spacer-090);justify-content:end}.b-modal-fullscreen-page__title[data-v-50f40dc1]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-50f40dc1]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-50f40dc1]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-50f40dc1] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-50f40dc1]{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-50f40dc1]{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-1b7c2e64]{-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-1b7c2e64],.b-modal-fullscreen[data-v-1b7c2e64]:before,.b-modal-fullscreen[data-v-1b7c2e64]:after{box-sizing:border-box}.b-modal-fullscreen *[data-v-1b7c2e64],.b-modal-fullscreen *[data-v-1b7c2e64]:before,.b-modal-fullscreen *[data-v-1b7c2e64]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-1b7c2e64] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-1b7c2e64] ::-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-1b7c2e64]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen[data-v-1b7c2e64]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-1b7c2e64]{animation:fade-in-uara1oj-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-uara1oj-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-uara1oj-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-uara1oj-1b7c2e64{0%{opacity:0}to{opacity:1}}@keyframes scale-up-uara1oj-1b7c2e64{0%{scale:1}to{scale:1}}@keyframes enter-uara1oj-1b7c2e64{0%{translate:0 64px}to{translate:0 0}}.b-modal-fullscreen--hide[open][data-v-1b7c2e64]{animation:fade-out-uara1pg-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-uara1pg-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-uara1pg-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-uara1pg-1b7c2e64{0%{opacity:1}to{opacity:0}}@keyframes scale-down-uara1pg-1b7c2e64{0%{scale:1}to{scale:1}}@keyframes exit-uara1pg-1b7c2e64{0%{translate:0 0}to{translate:0 64px}}
+.b-modal-fullscreen-page[data-v-50f40dc1]{-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-50f40dc1],.b-modal-fullscreen-page[data-v-50f40dc1]:before,.b-modal-fullscreen-page[data-v-50f40dc1]:after{box-sizing:border-box}.b-modal-fullscreen-page *[data-v-50f40dc1],.b-modal-fullscreen-page *[data-v-50f40dc1]:before,.b-modal-fullscreen-page *[data-v-50f40dc1]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-50f40dc1] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-50f40dc1] ::-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-50f40dc1]{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-50f40dc1]{flex:0 1 auto}.b-modal-fullscreen-page__header-section[data-v-50f40dc1]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-50f40dc1]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-50f40dc1]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-50f40dc1]{align-items:center;gap:var(--b-spacer-090);justify-content:end}.b-modal-fullscreen-page__title[data-v-50f40dc1]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-50f40dc1]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-50f40dc1]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-50f40dc1] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-50f40dc1]{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-50f40dc1]{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-1b7c2e64]{-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-1b7c2e64],.b-modal-fullscreen[data-v-1b7c2e64]:before,.b-modal-fullscreen[data-v-1b7c2e64]:after{box-sizing:border-box}.b-modal-fullscreen *[data-v-1b7c2e64],.b-modal-fullscreen *[data-v-1b7c2e64]:before,.b-modal-fullscreen *[data-v-1b7c2e64]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-1b7c2e64] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-1b7c2e64] ::-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-1b7c2e64]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen[data-v-1b7c2e64]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-1b7c2e64]{animation:fade-in-ucqngyc-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-ucqngyc-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-ucqngyc-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-ucqngyc-1b7c2e64{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ucqngyc-1b7c2e64{0%{scale:1}to{scale:1}}@keyframes enter-ucqngyc-1b7c2e64{0%{translate:0 64px}to{translate:0 0}}.b-modal-fullscreen--hide[open][data-v-1b7c2e64]{animation:fade-out-ucqngyu-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-ucqngyu-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-ucqngyu-1b7c2e64 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-ucqngyu-1b7c2e64{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ucqngyu-1b7c2e64{0%{scale:1}to{scale:1}}@keyframes exit-ucqngyu-1b7c2e64{0%{translate:0 0}to{translate:0 64px}}

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

@@ -1 +1 @@
-.b-navigation-menu[data-v-42a8ca0b]{-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-42a8ca0b],.b-navigation-menu[data-v-42a8ca0b]:before,.b-navigation-menu[data-v-42a8ca0b]:after{box-sizing:border-box}.b-navigation-menu *[data-v-42a8ca0b],.b-navigation-menu *[data-v-42a8ca0b]:before,.b-navigation-menu *[data-v-42a8ca0b]:after{box-sizing:border-box}.b-navigation-menu[data-v-42a8ca0b] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu[data-v-42a8ca0b] ::-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-42a8ca0b]{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-42a8ca0b]{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-42a8ca0b],.b-navigation-menu__actions[data-v-42a8ca0b]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-navigation-menu__actions-container[data-v-42a8ca0b] .b-button--icon-only{padding:var(--b-spacer-030)}.b-navigation-menu__content[data-v-42a8ca0b]{display:flex;flex-direction:column;gap:var(--b-spacer-010);list-style:none;margin:0;padding:0}.b-navigation-menu__content[data-v-42a8ca0b] a{text-decoration:none}.b-navigation-menu-item[data-v-37d1d215]{-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-37d1d215],.b-navigation-menu-item[data-v-37d1d215]:before,.b-navigation-menu-item[data-v-37d1d215]:after{box-sizing:border-box}.b-navigation-menu-item *[data-v-37d1d215],.b-navigation-menu-item *[data-v-37d1d215]:before,.b-navigation-menu-item *[data-v-37d1d215]:after{box-sizing:border-box}.b-navigation-menu-item[data-v-37d1d215] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu-item[data-v-37d1d215] ::-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-37d1d215]{padding-left:var(--b-spacer-060)}.b-navigation-menu-item[data-v-37d1d215]:hover{background-color:var(--b-color-background-tertiary-hover)}.b-navigation-menu-item[data-v-37d1d215]:active{background-color:var(--b-color-background-tertiary-active)}.b-navigation-menu-item__link[data-v-37d1d215]{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-37d1d215]:focus-visible{border-radius:var(--b-border-radius-m)}.b-navigation-menu-item__icon[data-v-37d1d215]{display:flex;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-item__label[data-v-37d1d215]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-navigation-menu-item__icon[data-v-37d1d215],.b-navigation-menu-item__label[data-v-37d1d215]{color:var(--b-color-label-primary)}.b-navigation-menu-item__action[data-v-37d1d215]{display:none;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-item:hover .b-navigation-menu-item__action[data-v-37d1d215],.b-navigation-menu-item:focus-within .b-navigation-menu-item__action[data-v-37d1d215],.b-navigation-menu-item--always-show-actions .b-navigation-menu-item__action[data-v-37d1d215]{display:flex}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-item:hover .b-navigation-menu-item__action[data-v-37d1d215],.b-navigation-menu-item:focus-within .b-navigation-menu-item__action[data-v-37d1d215],.b-navigation-menu-item--always-show-actions .b-navigation-menu-item__action[data-v-37d1d215]{animation:fade-in-uara24j-37d1d215 var(--b-animation-duration-fast) var(--b-animation-easing-linear)}@keyframes fade-in-uara24j-37d1d215{0%{opacity:0}to{opacity:1}}}.b-navigation-menu-item--selected[data-v-37d1d215]{background-color:var(--b-color-background-navigation)}.b-navigation-menu-item--selected[data-v-37d1d215]:hover{background-color:var(--b-color-background-navigation-hover)}.b-navigation-menu-item--selected[data-v-37d1d215]:active{background-color:var(--b-color-background-navigation-active)}.b-navigation-menu-item--nested[data-v-37d1d215]{margin-top:var(--b-spacer-010)}.b-navigation-menu-item--nested .b-navigation-menu-item__link[data-v-37d1d215]{padding-left:36px}.b-navigation-menu-item--nested .b-navigation-menu-item__label[data-v-37d1d215]{color:var(--b-color-label-secondary)}.b-navigation-menu-item--nested:hover .b-navigation-menu-item__label[data-v-37d1d215],.b-navigation-menu-item--nested:active .b-navigation-menu-item__label[data-v-37d1d215],.b-navigation-menu-item--nested.b-navigation-menu-item--selected .b-navigation-menu-item__label[data-v-37d1d215]{color:var(--b-color-label-primary)}.b-navigation-menu-item--hidden[data-v-37d1d215]{margin-top:0;max-height:0;min-height:0;opacity:0}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-item--hidden[data-v-37d1d215]{transition:all var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}}.b-navigation-menu-item--hidden .b-navigation-menu-item__link[data-v-37d1d215]{padding-bottom:0;padding-top:0}.b-navigation-menu-group[data-v-3537bc81]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-navigation-menu-group button[data-v-3537bc81]{background-color:transparent;border:0;font:inherit;text-align:inherit}.b-navigation-menu-group button[data-v-3537bc81]:focus-visible{outline:none}.b-navigation-menu-group[data-v-3537bc81],.b-navigation-menu-group[data-v-3537bc81]:before,.b-navigation-menu-group[data-v-3537bc81]:after{box-sizing:border-box}.b-navigation-menu-group *[data-v-3537bc81],.b-navigation-menu-group *[data-v-3537bc81]:before,.b-navigation-menu-group *[data-v-3537bc81]:after{box-sizing:border-box}.b-navigation-menu-group[data-v-3537bc81] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu-group[data-v-3537bc81] ::-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-3537bc81]{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-3537bc81]:hover{background-color:var(--b-color-background-tertiary-hover)}.b-navigation-menu-group__header[data-v-3537bc81]:active{background-color:var(--b-color-background-tertiary-active)}.b-navigation-menu-group__header[data-v-3537bc81]:focus-visible{outline:none;animation:outer-ring-default-3537bc81 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-3537bc81{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-3537bc81]{padding-left:var(--b-spacer-050)}.b-navigation-menu-group__icon[data-v-3537bc81]{display:flex;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-group__icon--chevron[data-v-3537bc81]{display:none}.b-navigation-menu-group__header:hover .b-navigation-menu-group__icon--chevron[data-v-3537bc81],.b-navigation-menu-group__header:focus-visible .b-navigation-menu-group__icon--chevron[data-v-3537bc81]{display:flex}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__header:hover .b-navigation-menu-group__icon--chevron[data-v-3537bc81],.b-navigation-menu-group__header:focus-visible .b-navigation-menu-group__icon--chevron[data-v-3537bc81]{animation:fade-in-uara24t-3537bc81 var(--b-animation-duration-fast) var(--b-animation-easing-linear)}@keyframes fade-in-uara24t-3537bc81{0%{opacity:0}to{opacity:1}}}.b-navigation-menu-group__label[data-v-3537bc81]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-navigation-menu-group__content-wrapper[data-v-3537bc81]{overflow:clip;overflow-clip-margin:var(--b-spacer-020)}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__content-wrapper[data-v-3537bc81]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}}.b-navigation-menu-group__content[data-v-3537bc81]{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.b-navigation-menu-group__animation--content-enter-active[data-v-3537bc81]{overflow:hidden}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__animation--content-enter-active[data-v-3537bc81]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-in-uara257-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-uara257-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-uara257-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-uara257-3537bc81{0%{opacity:0}to{opacity:1}}@keyframes scale-up-uara257-3537bc81{0%{scale:1}to{scale:1}}@keyframes enter-uara257-3537bc81{0%{translate:0 -8px}to{translate:0 0}}}.b-navigation-menu-group__animation--content-leave-active[data-v-3537bc81]{max-height:0!important;overflow:hidden}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__animation--content-leave-active[data-v-3537bc81]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-out-uara25l-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-uara25l-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-uara25l-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-uara25l-3537bc81{0%{opacity:1}to{opacity:0}}@keyframes scale-down-uara25l-3537bc81{0%{scale:1}to{scale:1}}@keyframes exit-uara25l-3537bc81{0%{translate:0 0}to{translate:0 -8px}}}
+.b-navigation-menu[data-v-42a8ca0b]{-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-42a8ca0b],.b-navigation-menu[data-v-42a8ca0b]:before,.b-navigation-menu[data-v-42a8ca0b]:after{box-sizing:border-box}.b-navigation-menu *[data-v-42a8ca0b],.b-navigation-menu *[data-v-42a8ca0b]:before,.b-navigation-menu *[data-v-42a8ca0b]:after{box-sizing:border-box}.b-navigation-menu[data-v-42a8ca0b] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu[data-v-42a8ca0b] ::-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-42a8ca0b]{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-42a8ca0b]{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-42a8ca0b],.b-navigation-menu__actions[data-v-42a8ca0b]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-navigation-menu__actions-container[data-v-42a8ca0b] .b-button--icon-only{padding:var(--b-spacer-030)}.b-navigation-menu__content[data-v-42a8ca0b]{display:flex;flex-direction:column;gap:var(--b-spacer-010);list-style:none;margin:0;padding:0}.b-navigation-menu__content[data-v-42a8ca0b] a{text-decoration:none}.b-navigation-menu-item[data-v-37d1d215]{-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-37d1d215],.b-navigation-menu-item[data-v-37d1d215]:before,.b-navigation-menu-item[data-v-37d1d215]:after{box-sizing:border-box}.b-navigation-menu-item *[data-v-37d1d215],.b-navigation-menu-item *[data-v-37d1d215]:before,.b-navigation-menu-item *[data-v-37d1d215]:after{box-sizing:border-box}.b-navigation-menu-item[data-v-37d1d215] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu-item[data-v-37d1d215] ::-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-37d1d215]{padding-left:var(--b-spacer-060)}.b-navigation-menu-item[data-v-37d1d215]:hover{background-color:var(--b-color-background-tertiary-hover)}.b-navigation-menu-item[data-v-37d1d215]:active{background-color:var(--b-color-background-tertiary-active)}.b-navigation-menu-item__link[data-v-37d1d215]{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-37d1d215]:focus-visible{border-radius:var(--b-border-radius-m)}.b-navigation-menu-item__icon[data-v-37d1d215]{display:flex;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-item__label[data-v-37d1d215]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-navigation-menu-item__icon[data-v-37d1d215],.b-navigation-menu-item__label[data-v-37d1d215]{color:var(--b-color-label-primary)}.b-navigation-menu-item__action[data-v-37d1d215]{display:none;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-item:hover .b-navigation-menu-item__action[data-v-37d1d215],.b-navigation-menu-item:focus-within .b-navigation-menu-item__action[data-v-37d1d215],.b-navigation-menu-item--always-show-actions .b-navigation-menu-item__action[data-v-37d1d215]{display:flex}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-item:hover .b-navigation-menu-item__action[data-v-37d1d215],.b-navigation-menu-item:focus-within .b-navigation-menu-item__action[data-v-37d1d215],.b-navigation-menu-item--always-show-actions .b-navigation-menu-item__action[data-v-37d1d215]{animation:fade-in-ucqnhed-37d1d215 var(--b-animation-duration-fast) var(--b-animation-easing-linear)}@keyframes fade-in-ucqnhed-37d1d215{0%{opacity:0}to{opacity:1}}}.b-navigation-menu-item--selected[data-v-37d1d215]{background-color:var(--b-color-background-navigation)}.b-navigation-menu-item--selected[data-v-37d1d215]:hover{background-color:var(--b-color-background-navigation-hover)}.b-navigation-menu-item--selected[data-v-37d1d215]:active{background-color:var(--b-color-background-navigation-active)}.b-navigation-menu-item--nested[data-v-37d1d215]{margin-top:var(--b-spacer-010)}.b-navigation-menu-item--nested .b-navigation-menu-item__link[data-v-37d1d215]{padding-left:36px}.b-navigation-menu-item--nested .b-navigation-menu-item__label[data-v-37d1d215]{color:var(--b-color-label-secondary)}.b-navigation-menu-item--nested:hover .b-navigation-menu-item__label[data-v-37d1d215],.b-navigation-menu-item--nested:active .b-navigation-menu-item__label[data-v-37d1d215],.b-navigation-menu-item--nested.b-navigation-menu-item--selected .b-navigation-menu-item__label[data-v-37d1d215]{color:var(--b-color-label-primary)}.b-navigation-menu-item--hidden[data-v-37d1d215]{margin-top:0;max-height:0;min-height:0;opacity:0}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-item--hidden[data-v-37d1d215]{transition:all var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}}.b-navigation-menu-item--hidden .b-navigation-menu-item__link[data-v-37d1d215]{padding-bottom:0;padding-top:0}.b-navigation-menu-group[data-v-3537bc81]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-navigation-menu-group button[data-v-3537bc81]{background-color:transparent;border:0;font:inherit;text-align:inherit}.b-navigation-menu-group button[data-v-3537bc81]:focus-visible{outline:none}.b-navigation-menu-group[data-v-3537bc81],.b-navigation-menu-group[data-v-3537bc81]:before,.b-navigation-menu-group[data-v-3537bc81]:after{box-sizing:border-box}.b-navigation-menu-group *[data-v-3537bc81],.b-navigation-menu-group *[data-v-3537bc81]:before,.b-navigation-menu-group *[data-v-3537bc81]:after{box-sizing:border-box}.b-navigation-menu-group[data-v-3537bc81] ::-webkit-scrollbar{height:14px;width:14px}.b-navigation-menu-group[data-v-3537bc81] ::-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-3537bc81]{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-3537bc81]:hover{background-color:var(--b-color-background-tertiary-hover)}.b-navigation-menu-group__header[data-v-3537bc81]:active{background-color:var(--b-color-background-tertiary-active)}.b-navigation-menu-group__header[data-v-3537bc81]:focus-visible{outline:none;animation:outer-ring-default-3537bc81 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-3537bc81{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-3537bc81]{padding-left:var(--b-spacer-050)}.b-navigation-menu-group__icon[data-v-3537bc81]{display:flex;flex-shrink:0;padding:var(--b-spacer-030)}.b-navigation-menu-group__icon--chevron[data-v-3537bc81]{display:none}.b-navigation-menu-group__header:hover .b-navigation-menu-group__icon--chevron[data-v-3537bc81],.b-navigation-menu-group__header:focus-visible .b-navigation-menu-group__icon--chevron[data-v-3537bc81]{display:flex}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__header:hover .b-navigation-menu-group__icon--chevron[data-v-3537bc81],.b-navigation-menu-group__header:focus-visible .b-navigation-menu-group__icon--chevron[data-v-3537bc81]{animation:fade-in-ucqnhey-3537bc81 var(--b-animation-duration-fast) var(--b-animation-easing-linear)}@keyframes fade-in-ucqnhey-3537bc81{0%{opacity:0}to{opacity:1}}}.b-navigation-menu-group__label[data-v-3537bc81]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-navigation-menu-group__content-wrapper[data-v-3537bc81]{overflow:clip;overflow-clip-margin:var(--b-spacer-020)}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__content-wrapper[data-v-3537bc81]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard)}}.b-navigation-menu-group__content[data-v-3537bc81]{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.b-navigation-menu-group__animation--content-enter-active[data-v-3537bc81]{overflow:hidden}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__animation--content-enter-active[data-v-3537bc81]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-in-ucqnhfn-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-ucqnhfn-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-ucqnhfn-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-ucqnhfn-3537bc81{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ucqnhfn-3537bc81{0%{scale:1}to{scale:1}}@keyframes enter-ucqnhfn-3537bc81{0%{translate:0 -8px}to{translate:0 0}}}.b-navigation-menu-group__animation--content-leave-active[data-v-3537bc81]{max-height:0!important;overflow:hidden}@media(prefers-reduced-motion:no-preference){.b-navigation-menu-group__animation--content-leave-active[data-v-3537bc81]{transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-out-ucqnhfq-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-ucqnhfq-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-ucqnhfq-3537bc81 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-ucqnhfq-3537bc81{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ucqnhfq-3537bc81{0%{scale:1}to{scale:1}}@keyframes exit-ucqnhfq-3537bc81{0%{translate:0 0}to{translate:0 -8px}}}

package/dist/assets/secondary-nav.css

@@ -1 +1 @@
-button[data-v-5153baa6]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-5153baa6]:focus-visible{outline:none}.b-secondary-nav-item[data-v-5153baa6]{-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-5153baa6],.b-secondary-nav-item[data-v-5153baa6]:before,.b-secondary-nav-item[data-v-5153baa6]:after{box-sizing:border-box}.b-secondary-nav-item *[data-v-5153baa6],.b-secondary-nav-item *[data-v-5153baa6]:before,.b-secondary-nav-item *[data-v-5153baa6]:after{box-sizing:border-box}.b-secondary-nav-item[data-v-5153baa6] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-item[data-v-5153baa6] ::-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-5153baa6]{position:relative}@media(hover:hover){.b-secondary-nav-item__wrapper:hover .b-secondary-nav-item__option[data-v-5153baa6]: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-5153baa6]{background-color:var(--b-color-background-navigation-hover)}}.b-secondary-nav-item__option[data-v-5153baa6]{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-5153baa6]:active{background-color:var(--b-color-background-primary-active)}.b-secondary-nav-item__option--active[data-v-5153baa6]{background-color:var(--b-color-background-navigation)}.b-secondary-nav-item__option--active[data-v-5153baa6]:active{background-color:var(--b-color-background-navigation-active)}.b-secondary-nav-item__option[data-v-5153baa6]:focus-visible{animation:outer-ring-default-5153baa6 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-5153baa6{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-5153baa6]{padding-left:var(--b-spacer-080)}.b-secondary-nav-item__option--expandable[data-v-5153baa6]{padding-right:var(--b-spacer-100)}.b-secondary-nav-item__toggle[data-v-5153baa6]{position:absolute;right:var(--b-spacer-050);top:50%;transform:translateY(-50%)}.b-secondary-nav-item__toggle[data-v-5153baa6]:after{content:"";display:block;inset:calc(var(--b-spacer-050) * -1);position:absolute}.b-secondary-nav-item__error-counter[data-v-5153baa6]{cursor:inherit}.b-secondary-nav-item__sub-items[data-v-5153baa6]{list-style:none;padding:0}.b-secondary-nav-item__animation--content-enter-active[data-v-5153baa6]{overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-in-uara2fx-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-uara2fx-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-uara2fx-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-uara2fx-5153baa6{0%{opacity:0}to{opacity:1}}@keyframes scale-up-uara2fx-5153baa6{0%{scale:1}to{scale:1}}@keyframes enter-uara2fx-5153baa6{0%{translate:0 -8px}to{translate:0 0}}.b-secondary-nav-item__animation--content-leave-active[data-v-5153baa6]{max-height:0!important;overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-out-uara2gr-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-uara2gr-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-uara2gr-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-uara2gr-5153baa6{0%{opacity:1}to{opacity:0}}@keyframes scale-down-uara2gr-5153baa6{0%{scale:1}to{scale:1}}@keyframes exit-uara2gr-5153baa6{0%{translate:0 0}to{translate:0 -8px}}.b-secondary-nav-category[data-v-777b2ce6]{-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-777b2ce6],.b-secondary-nav-category[data-v-777b2ce6]:before,.b-secondary-nav-category[data-v-777b2ce6]:after{box-sizing:border-box}.b-secondary-nav-category *[data-v-777b2ce6],.b-secondary-nav-category *[data-v-777b2ce6]:before,.b-secondary-nav-category *[data-v-777b2ce6]:after{box-sizing:border-box}.b-secondary-nav-category[data-v-777b2ce6] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-category[data-v-777b2ce6] ::-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-777b2ce6]{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-face0d1c]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-secondary-nav[data-v-face0d1c],.b-secondary-nav[data-v-face0d1c]:before,.b-secondary-nav[data-v-face0d1c]:after{box-sizing:border-box}.b-secondary-nav *[data-v-face0d1c],.b-secondary-nav *[data-v-face0d1c]:before,.b-secondary-nav *[data-v-face0d1c]:after{box-sizing:border-box}.b-secondary-nav[data-v-face0d1c] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav[data-v-face0d1c] ::-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-face0d1c]{max-width:250px}}.b-secondary-nav[data-v-face0d1c] .b-secondary-nav__list{list-style:none;margin:0;padding:0}.b-secondary-nav__option[data-v-face0d1c]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-secondary-nav__nested-option[data-v-face0d1c]{padding-left:var(--b-spacer-070)}
+button[data-v-5153baa6]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-5153baa6]:focus-visible{outline:none}.b-secondary-nav-item[data-v-5153baa6]{-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-5153baa6],.b-secondary-nav-item[data-v-5153baa6]:before,.b-secondary-nav-item[data-v-5153baa6]:after{box-sizing:border-box}.b-secondary-nav-item *[data-v-5153baa6],.b-secondary-nav-item *[data-v-5153baa6]:before,.b-secondary-nav-item *[data-v-5153baa6]:after{box-sizing:border-box}.b-secondary-nav-item[data-v-5153baa6] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-item[data-v-5153baa6] ::-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-5153baa6]{position:relative}@media(hover:hover){.b-secondary-nav-item__wrapper:hover .b-secondary-nav-item__option[data-v-5153baa6]: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-5153baa6]{background-color:var(--b-color-background-navigation-hover)}}.b-secondary-nav-item__option[data-v-5153baa6]{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-5153baa6]:active{background-color:var(--b-color-background-primary-active)}.b-secondary-nav-item__option--active[data-v-5153baa6]{background-color:var(--b-color-background-navigation)}.b-secondary-nav-item__option--active[data-v-5153baa6]:active{background-color:var(--b-color-background-navigation-active)}.b-secondary-nav-item__option[data-v-5153baa6]:focus-visible{animation:outer-ring-default-5153baa6 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-5153baa6{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-5153baa6]{padding-left:var(--b-spacer-080)}.b-secondary-nav-item__option--expandable[data-v-5153baa6]{padding-right:var(--b-spacer-100)}.b-secondary-nav-item__toggle[data-v-5153baa6]{position:absolute;right:var(--b-spacer-050);top:50%;transform:translateY(-50%)}.b-secondary-nav-item__toggle[data-v-5153baa6]:after{content:"";display:block;inset:calc(var(--b-spacer-050) * -1);position:absolute}.b-secondary-nav-item__error-counter[data-v-5153baa6]{cursor:inherit}.b-secondary-nav-item__sub-items[data-v-5153baa6]{list-style:none;padding:0}.b-secondary-nav-item__animation--content-enter-active[data-v-5153baa6]{overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-in-ucqnhop-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-ucqnhop-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-ucqnhop-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-ucqnhop-5153baa6{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ucqnhop-5153baa6{0%{scale:1}to{scale:1}}@keyframes enter-ucqnhop-5153baa6{0%{translate:0 -8px}to{translate:0 0}}.b-secondary-nav-item__animation--content-leave-active[data-v-5153baa6]{max-height:0!important;overflow:hidden;transition:max-height var(--b-animation-duration-moderate) var(--b-animation-easing-standard);animation:fade-out-ucqnhoy-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-ucqnhoy-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-ucqnhoy-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-ucqnhoy-5153baa6{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ucqnhoy-5153baa6{0%{scale:1}to{scale:1}}@keyframes exit-ucqnhoy-5153baa6{0%{translate:0 0}to{translate:0 -8px}}.b-secondary-nav-category[data-v-777b2ce6]{-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-777b2ce6],.b-secondary-nav-category[data-v-777b2ce6]:before,.b-secondary-nav-category[data-v-777b2ce6]:after{box-sizing:border-box}.b-secondary-nav-category *[data-v-777b2ce6],.b-secondary-nav-category *[data-v-777b2ce6]:before,.b-secondary-nav-category *[data-v-777b2ce6]:after{box-sizing:border-box}.b-secondary-nav-category[data-v-777b2ce6] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav-category[data-v-777b2ce6] ::-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-777b2ce6]{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-face0d1c]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-secondary-nav[data-v-face0d1c],.b-secondary-nav[data-v-face0d1c]:before,.b-secondary-nav[data-v-face0d1c]:after{box-sizing:border-box}.b-secondary-nav *[data-v-face0d1c],.b-secondary-nav *[data-v-face0d1c]:before,.b-secondary-nav *[data-v-face0d1c]:after{box-sizing:border-box}.b-secondary-nav[data-v-face0d1c] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav[data-v-face0d1c] ::-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-face0d1c]{max-width:250px}}.b-secondary-nav[data-v-face0d1c] .b-secondary-nav__list{list-style:none;margin:0;padding:0}.b-secondary-nav__option[data-v-face0d1c]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-secondary-nav__nested-option[data-v-face0d1c]{padding-left:var(--b-spacer-070)}

package/dist/assets/sidepanel.css

@@ -1 +1 @@
-.b-sidepanel-page[data-v-12d4c262]{-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-12d4c262],.b-sidepanel-page[data-v-12d4c262]:before,.b-sidepanel-page[data-v-12d4c262]:after{box-sizing:border-box}.b-sidepanel-page *[data-v-12d4c262],.b-sidepanel-page *[data-v-12d4c262]:before,.b-sidepanel-page *[data-v-12d4c262]:after{box-sizing:border-box}.b-sidepanel-page[data-v-12d4c262] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-12d4c262] ::-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-12d4c262]{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-12d4c262]{color:var(--b-color-label-primary);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-12d4c262]{color:var(--b-color-label-primary);flex-grow:1;overflow:auto;padding:0 var(--b-spacer-090)}.b-sidepanel-page__actions[data-v-12d4c262]{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-e0097c32]{-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-e0097c32],.b-sidepanel[data-v-e0097c32]:before,.b-sidepanel[data-v-e0097c32]:after{box-sizing:border-box}.b-sidepanel *[data-v-e0097c32],.b-sidepanel *[data-v-e0097c32]:before,.b-sidepanel *[data-v-e0097c32]:after{box-sizing:border-box}.b-sidepanel[data-v-e0097c32] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-e0097c32] ::-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-e0097c32]{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-e0097c32]{max-width:680px;min-width:480px;width:33%}}.b-sidepanel__close-button[data-v-e0097c32]{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-e0097c32]{overflow:hidden}.b-sidepanel[data-v-e0097c32]::backdrop{background-color:var(--b-color-support-overlay, #00112c);opacity:.5}.b-sidepanel[open][data-v-e0097c32]{animation:enter-uara223-e0097c32 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-enter)}@keyframes enter-uara223-e0097c32{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-e0097c32]::backdrop{animation:fade-in-uara22z-e0097c32 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-uara22z-e0097c32{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-e0097c32]{animation:exit-uara23v-e0097c32 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-exit)}@keyframes exit-uara23v-e0097c32{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-e0097c32]::backdrop{animation:fade-out-uara23z-e0097c32 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-uara23z-e0097c32{0%{opacity:.5}to{opacity:0}}
+.b-sidepanel-page[data-v-12d4c262]{-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-12d4c262],.b-sidepanel-page[data-v-12d4c262]:before,.b-sidepanel-page[data-v-12d4c262]:after{box-sizing:border-box}.b-sidepanel-page *[data-v-12d4c262],.b-sidepanel-page *[data-v-12d4c262]:before,.b-sidepanel-page *[data-v-12d4c262]:after{box-sizing:border-box}.b-sidepanel-page[data-v-12d4c262] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-12d4c262] ::-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-12d4c262]{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-12d4c262]{color:var(--b-color-label-primary);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-12d4c262]{color:var(--b-color-label-primary);flex-grow:1;overflow:auto;padding:0 var(--b-spacer-090)}.b-sidepanel-page__actions[data-v-12d4c262]{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-e0097c32]{-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-e0097c32],.b-sidepanel[data-v-e0097c32]:before,.b-sidepanel[data-v-e0097c32]:after{box-sizing:border-box}.b-sidepanel *[data-v-e0097c32],.b-sidepanel *[data-v-e0097c32]:before,.b-sidepanel *[data-v-e0097c32]:after{box-sizing:border-box}.b-sidepanel[data-v-e0097c32] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-e0097c32] ::-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-e0097c32]{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-e0097c32]{max-width:680px;min-width:480px;width:33%}}.b-sidepanel__close-button[data-v-e0097c32]{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-e0097c32]{overflow:hidden}.b-sidepanel[data-v-e0097c32]::backdrop{background-color:var(--b-color-support-overlay, #00112c);opacity:.5}.b-sidepanel[open][data-v-e0097c32]{animation:enter-ucqnhca-e0097c32 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-enter)}@keyframes enter-ucqnhca-e0097c32{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-e0097c32]::backdrop{animation:fade-in-ucqnhco-e0097c32 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-ucqnhco-e0097c32{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-e0097c32]{animation:exit-ucqnhcp-e0097c32 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-exit)}@keyframes exit-ucqnhcp-e0097c32{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-e0097c32]::backdrop{animation:fade-out-ucqnhdl-e0097c32 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-ucqnhdl-e0097c32{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.b9PEJ7hm.js";
+import { c as o, B as r, a as t } from "./chunks/card.BmpB0VbL.js";
 export {
   o as BentoCard,
   r as BentoCardBackground,

package/dist/checkbox.js

@@ -1,5 +1,5 @@
-import { B as a, a as t } from "./chunks/checkbox.Co4HoHKF.js";
-import { B as n, a as x } from "./chunks/checkbox-group.UYN1ljai.js";
+import { B as a, a as t } from "./chunks/checkbox.D5xZ5Nnh.js";
+import { B as n, a as x } from "./chunks/checkbox-group.D1uyc3z3.js";
 export {
   a as BentoCheckbox,
   t as BentoCheckboxEvent,

package/dist/chunks/{accordion-item.DOj7vqeL.js → accordion-item.B7lteJBu.js}

@@ -5,7 +5,7 @@ import { C as y } from "./chevron-down.B_QiVCoO.js";
 import { C as T } from "./chevron-up.YQRo8uKs.js";
 import { g as d } from "./generate-uid.DBWe4g6T.js";
 import { u as N } from "./index.CPOlyau9.js";
-import { u as O } from "./use-expandable-content-height.Bdd9hQwq.js";
+import { u as O } from "./use-expandable-content-height.DmFeas9-.js";
 import "../assets/accordion-item.css";
 const u = /* @__PURE__ */ Symbol("accordion title size injection key"), S = {}, A = /* @__PURE__ */ _({
   ...S,
@@ -104,4 +104,4 @@ export {
   L as a,
   X as b
 };
-//# sourceMappingURL=accordion-item.DOj7vqeL.js.map
+//# sourceMappingURL=accordion-item.B7lteJBu.js.map

package/dist/chunks/{accordion-item.DOj7vqeL.js.map → accordion-item.B7lteJBu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.DOj7vqeL.js","sources":["../../src/components/accordion/accordion.keys.ts","../../src/components/accordion/accordion.vue","../../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon\n                    v-if=\"isOpen\"\n                    class=\"b-accordion-item__icon\"\n                    :svg-title=\"t('collapse')\"\n                    aria-hidden=\"true\"\n                />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" :svg-title=\"t('expand')\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/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([\"update:is-expanded\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { 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","t","useI18n","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","emit"],"mappings":";;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,oCAAA,GCqDHC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GC+GAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;iBAlFAC,IAAA,wCAqBA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAGAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAP,EAAA,UAAA,GAGAS,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAjB,GAAA,SAAA,GAGA,EAAA,eAAAkB,EAAA,IAAAC,EAAAT,GAAAE,CAAA,GAEAQ,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACgB,CAAAmB,MAAA;AAER,QAAAX,EAAA,QAAAW;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAAV;AAAA,MACI,CAAAW,MAAA;AAGI,QAAAC,EAAA,sBAAAD,CAAA;AAAA,MAAgC;AAAA,MACpC,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"accordion-item.B7lteJBu.js","sources":["../../src/components/accordion/accordion.keys.ts","../../src/components/accordion/accordion.vue","../../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { type PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon\n                    v-if=\"isOpen\"\n                    class=\"b-accordion-item__icon\"\n                    :svg-title=\"t('collapse')\"\n                    aria-hidden=\"true\"\n                />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" :svg-title=\"t('expand')\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/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([\"update:is-expanded\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { 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","t","useI18n","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","emit"],"mappings":";;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,oCAAA,GCqDHC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GC+GAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;iBAlFAC,IAAA,wCAqBA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAGAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAP,EAAA,UAAA,GAGAS,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAjB,GAAA,SAAA,GAGA,EAAA,eAAAkB,EAAA,IAAAC,EAAAT,GAAAE,CAAA,GAEAQ,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACgB,CAAAmB,MAAA;AAER,QAAAX,EAAA,QAAAW;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAAV;AAAA,MACI,CAAAW,MAAA;AAGI,QAAAC,EAAA,sBAAAD,CAAA;AAAA,MAAgC;AAAA,MACpC,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{card.b9PEJ7hm.js → card.BmpB0VbL.js}

@@ -4,7 +4,7 @@ import { B as F } from "./link.Cls8XShm.js";
 import { C as W } from "./chevron-down.B_QiVCoO.js";
 import { C as P } from "./chevron-up.YQRo8uKs.js";
 import { C as K } from "./chevron-right-small.zD3HHYEi.js";
-import { u as Y } from "./use-expandable-content-height.Bdd9hQwq.js";
+import { u as Y } from "./use-expandable-content-height.DmFeas9-.js";
 import { u as q } from "./use-has-slot.C9lQZ6nz.js";
 import { g as j } from "./generate-uid.DBWe4g6T.js";
 import { u as G } from "./index.CPOlyau9.js";
@@ -136,4 +136,4 @@ export {
   r as a,
   ye as c
 };
-//# sourceMappingURL=card.b9PEJ7hm.js.map
+//# sourceMappingURL=card.BmpB0VbL.js.map

package/dist/chunks/{card.b9PEJ7hm.js.map → card.BmpB0VbL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"card.b9PEJ7hm.js","sources":["../../src/components/card/card.types.ts","../../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 = defineProps({\n  actions: { default: null },\n  actionsLayout: { default: BentoButtonActionsLayout.BUTTONS_END },\n  background: { default: BentoCardBackground.PRIMARY },\n  clickable: { type: Boolean, default: false },\n  closed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  expandable: { type: Boolean, default: false },\n  lastUpdated: { default: null },\n  reloadButton: { default: null },\n  link: { default: undefined },\n  titleSize: { default: BentoCardTitleSize.DEFAULT }\n});\n\n    const emit = defineEmits([\"click\", \"expanded\"]);\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","useI18n","slots","useSlots","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","props","watch","value","showLastUpdated","computed","showHeader","showTitleWrapper","showCardBody","tabIndex","headerTabIndex","isRegularCard","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","contentHeight","useExpandableContentHeight","contentMaxHeight","toggleExpansion","emit","onClick","deprecate","onKeyDown","onMounted"],"mappings":"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"}
+{"version":3,"file":"card.BmpB0VbL.js","sources":["../../src/components/card/card.types.ts","../../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 = defineProps({\n  actions: { default: null },\n  actionsLayout: { default: BentoButtonActionsLayout.BUTTONS_END },\n  background: { default: BentoCardBackground.PRIMARY },\n  clickable: { type: Boolean, default: false },\n  closed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  expandable: { type: Boolean, default: false },\n  lastUpdated: { default: null },\n  reloadButton: { default: null },\n  link: { default: undefined },\n  titleSize: { default: BentoCardTitleSize.DEFAULT }\n});\n\n    const emit = defineEmits([\"click\", \"expanded\"]);\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","useI18n","slots","useSlots","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","props","watch","value","showLastUpdated","computed","showHeader","showTitleWrapper","showCardBody","tabIndex","headerTabIndex","isRegularCard","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","contentHeight","useExpandableContentHeight","contentMaxHeight","toggleExpansion","emit","onClick","deprecate","onKeyDown","onMounted"],"mappings":";;;;;;;;;;;;;;;AAOO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;GCqQRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;;;;;iBA7JA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAkBAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MAAA,GACAC,IAAAH,EAAA,CAAAI,EAAA,MAAA;AACA,IAAAC;AAAA,MAAA,MAAAD,EAAA;AAAA,MACgB,CAAAE,MAAA;AAER,QAAAH,EAAA,QAAA,CAAAG;AAAA,MAAqB;AAAA,IACzB;AAEJ,UAAAC,IAAAC,EAAA,MAAA,CAAAJ,EAAA,cAAA,EAAAA,EAAA,WAAA,GACAK,IAAAD;AAAA,MAAmB,MAAAX,EAAA,SAAA,KAAAA,EAAA,aAAA,KAAAA,EAAA,QAAA,KAAAU,EAAA;AAAA,IAC4E,GAE/FG,IAAAF,EAAA,MAAAX,EAAA,SAAA,KAAAA,EAAA,QAAA,CAAA,GACAc,IAAAH;AAAA,MAAqB,OAAAX,EAAA,SAAA,KAAAO,EAAA,SAAA,YAAA,CAAAA,EAAA,cAAAA,EAAA,cAAAD,EAAA;AAAA,IAG0C,GAE/DS,IAAAJ,EAAA,MAAAJ,EAAA,aAAA,CAAAA,EAAA,WAAA,IAAA,EAAA,GACAS,IAAAL,EAAA,MAAAJ,EAAA,cAAA,CAAAA,EAAA,WAAA,IAAA,EAAA,GACAU,IAAAN,EAAA,MAAA,CAAAJ,EAAA,UAAA,GAEAW,IAAAP,EAAA,OAAA;AAAA,MAA+C,CAAA,WAAAJ,EAAA,UAAA,EAAA,GAAAA,EAAA;AAAA,MACJ,qBAAAA,EAAA;AAAA,MACZ,sBAAAA,EAAA;AAAA,MACC,qBAAAA,EAAA,aAAAA,EAAA,eAAAA,EAAA;AAAA,IACuC,EAAA,GAGvEY,IAAAR,EAAA,OAAA;AAAA,MAAqD,8BAAAJ,EAAA;AAAA,MACb,gCAAA,CAAAA,EAAA,cAAA,CAAAO,EAAA;AAAA,IAC+B,EAAA,GAGvEM,IAAAT,EAAA,OAAA;AAAA,MAAqD,8BAAAJ,EAAA,cAAAd,EAAA;AAAA,IACoB,EAAA,GAGzE4B,IAAAV,EAAA,OAAA;AAAA,MAAmD,4BAAAJ,EAAA,cAAAP,EAAA,SAAA;AAAA,MACkB,gCAAA,CAAAO,EAAA,cAAA,CAAAK,EAAA;AAAA,IACA,EAAA,GAGrEU,IAAAX,EAAA,OAAA;AAAA,MAAsD,mCAAA,CAAAJ,EAAA,cAAA,CAAAK,EAAA;AAAA,MACkB,+BAAAL,EAAA;AAAA,IAC/B,EAAA,GAGzCgB,IAAAZ,EAAA,MAAA;AACI,YAAAa,IAAA,CAAAjB,EAAA,cAAAA,EAAA,WAAA,CAAAP,EAAA,SAAA;AAEA,aAAA;AAAA,QAAO,oCAAAwB;AAAA,QACiC,oDAAAA,KAAAZ,EAAA;AAAA,MAC4D;AAAA,IACpG,CAAA,GAGJa,IAAAd,EAAA,OAAA;AAAA,MAA2D,oCAAAX,EAAA,QAAA;AAAA,IACH,EAAA,GAGxD0B,IAAAf;AAAA,MAAmB,OAAA;AAAA,QAEV,IAAA;AAAA,QACO,SAAAJ,EAAA,cAAAd,EAAA,UAAA,UAAA;AAAA,QACgE,WAAAc,EAAA,cAAAd,EAAA;AAAA,QAClB,MAAAc,EAAA,cAAAd,EAAA;AAAA,MACL;AAAA,IACjD,GAIR,EAAA,eAAAkC,EAAA,IAAAC,EAAA1B,GAAAI,CAAA,GAEAuB,IAAAlB;AAAA,MAAyB,MAAAJ,EAAA,cAAAoB,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA;AAAA,IAC8D,GAGvFG,IAAA,MAAA;AACI,MAAA,CAAAvB,EAAA,YAAAA,EAAA,eACID,EAAA,QAAA,CAAAA,EAAA,OACAyB,EAAA,YAAAzB,EAAA,KAAA;AAAA,IACJ,GAGJ0B,IAAA,MAAA;AACI,MAAAzB,EAAA,aACIwB,EAAA,OAAA,GAEAxB,EAAA,aACI0B;AAAA,QAAA;AAAA,QACI;AAAA,QACA;AAAA,MACA;AAAA,IAGZ,GAGJC,IAAA,MAAA;AACI,MAAA3B,EAAA,aAAA,CAAAA,EAAA,YACIwB,EAAA,OAAA;AAAA,IACJ;AAGJ,WAAAI,EAAA,MAAA;AACI,UAAA5B,EAAA,QAAAA,EAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{checkbox-group.UYN1ljai.js → checkbox-group.D1uyc3z3.js}

@@ -1,5 +1,5 @@
 import { defineComponent as b, useSlots as y, toRef as v, computed as u, watch as f, ref as g } from "vue";
-import { B as x } from "./checkbox.Co4HoHKF.js";
+import { B as x } from "./checkbox.D5xZ5Nnh.js";
 import { g as C } from "./generate-uid.DBWe4g6T.js";
 import { u as S } from "./use-form-layout-loading.CWbjZiwP.js";
 import { u as E } from "./form-field.B60VsF8d.js";
@@ -120,4 +120,4 @@ export {
   H as B,
   n as a
 };
-//# sourceMappingURL=checkbox-group.UYN1ljai.js.map
+//# sourceMappingURL=checkbox-group.D1uyc3z3.js.map

package/dist/chunks/{checkbox-group.UYN1ljai.js.map → checkbox-group.D1uyc3z3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.UYN1ljai.js","sources":["../../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import { type FormFieldEmits } from '../../../../types/form-field';\nimport type { BentoCheckboxTag } from '../../checkbox.types';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n    tag?: BentoCheckboxTag;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n\nexport type BentoCheckboxGroupEmits = FormFieldEmits<any>;\n","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :aria-describedby=\"shouldShowGroupError ? errorId : ''\"\n            :aria-required=\"required\"\n            component-name=\"bento-checkbox-group\"\n            :class=\"conditionalClasses\"\n            :description=\"description\"\n            :disabled=\"disabled\"\n            :form=\"formId\"\n            :hide-label=\"hideLabel\"\n            :label=\"label\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :tooltip-text=\"tooltipText\"\n        >\n            <bento-checkbox\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :has-error=\"shouldShowGroupError || item.hasError\"\n                :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n                :readonly=\"isReadOnly || item.readonly\"\n                :tag=\"item.tag\"\n                @update:model-value=\"onModelValueUpdate\"\n            >\n                <template #default>{{ item.label }}</template>\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n                <template v-if=\"hasContentSlot('content')\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n            </bento-checkbox>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowGroupError\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-checkbox-group__error-message\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, ref, toRef, useSlots, watch } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import {\n        type BentoCheckboxGroupEmits,\n        type BentoCheckboxGroupItems,\n        BentoCheckboxGroupVariant,\n    } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a disabled state.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Renders all checkboxes in an error state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n         */\n        formId: { type: String, default: null },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * The checkbox group's items.\n         */\n        items: { type: Array as PropType<BentoCheckboxGroupItems>, required: true },\n\n        /**\n         * The name associated with the group. Required for accessibility purposes.\n         */\n        label: { type: String, required: true },\n\n        /**\n         * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n         * Defaults to no value selected.\n         */\n        modelValue: { type: Array as PropType<Array<number | string | null>>, default: () => [] },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a readonly state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n         */\n        variant: {\n            type: String as PropType<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>,\n            default: BentoCheckboxGroupVariant.VERTICAL,\n            validator: (value: BentoCheckboxGroupVariant) => Object.values(BentoCheckboxGroupVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"update:model-value\"]);\n\n    const slots = useSlots();\n\n    const errorId = generateUid('error');\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n    const { emitValue } = useFormFieldEmits(emit);\n\n    const shouldShowGroupError = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n    const conditionalClasses = computed(() => ({\n        'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n    }));\n\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for\n    // vue3 named scoped slots\n    const hasContentSlot = (name: string) => !!slots[name];\n    const shouldShowSlotsError = computed(() => hasContentSlot('content') && props.variant !== 'vertical');\n\n    watch(\n        shouldShowSlotsError,\n        newValue => {\n            if (newValue) {\n                throw new Error('The content slot is only available for the vertical checkbox group layout');\n            }\n        },\n        { immediate: true }\n    );\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    const onModelValueUpdate = (value: any) => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n</script>\n\n<script lang=\"ts\">\n    const COMPONENT_NAME = 'bento-checkbox-group';\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default {\n        name: COMPONENT_NAME,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","__default__","slots","useSlots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","props","emitValue","useFormFieldEmits","emit","shouldShowGroupError","computed","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","value"],"mappings":";;;;;;;;;AAMO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;AC0KR,MAAAE,IAAA,wBAoBAC,IAAA;AAAA,EAAe,MAAAD;AAAA,EACL,OAAA,EAAA,MAAA,cAAA,OAAA,qBAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlEAE,IAAAC,EAAA,GAEAC,IAAAC,EAAA,OAAA,GACA,EAAA,YAAAC,EAAA,IAAAC,EAAAC,EAAAC,GAAA,UAAA,CAAA,GACA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA,CAAAL,EAAA,YAAA,CAAAH,EAAA,SAAA,CAAA,CAAAG,EAAA,YAAA,GAEAM,IAAAD,EAAA,OAAA;AAAA,MAA2C,4CAAAL,EAAA,YAAAX,EAAA;AAAA,IACiD,EAAA,GAM5FkB,IAAA,CAAAC,MAAA,CAAA,CAAAf,EAAAe,CAAA,GACAC,IAAAJ,EAAA,MAAAE,EAAA,SAAA,KAAAP,EAAA,YAAA,UAAA;AAEA,IAAAU;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA,MAAA,2EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAC,IAAAC,EAAAb,EAAA,UAAA;AACA,WAAAU;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,MAAA;AAER,QAAAY,EAAA,QAAAZ,EAAA;AAAA,MAAyB;AAAA,IAC7B,wOAGJ,CAAAc,MAAA;AACI,MAAAF,EAAA,QAAAE,GACAb,EAAAa,CAAA;AAAA,IAAe;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox-group.D1uyc3z3.js","sources":["../../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import { type FormFieldEmits } from '../../../../types/form-field';\nimport type { BentoCheckboxTag } from '../../checkbox.types';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n    tag?: BentoCheckboxTag;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n\nexport type BentoCheckboxGroupEmits = FormFieldEmits<any>;\n","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :aria-describedby=\"shouldShowGroupError ? errorId : ''\"\n            :aria-required=\"required\"\n            component-name=\"bento-checkbox-group\"\n            :class=\"conditionalClasses\"\n            :description=\"description\"\n            :disabled=\"disabled\"\n            :form=\"formId\"\n            :hide-label=\"hideLabel\"\n            :label=\"label\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :tooltip-text=\"tooltipText\"\n        >\n            <bento-checkbox\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :has-error=\"shouldShowGroupError || item.hasError\"\n                :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n                :readonly=\"isReadOnly || item.readonly\"\n                :tag=\"item.tag\"\n                @update:model-value=\"onModelValueUpdate\"\n            >\n                <template #default>{{ item.label }}</template>\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n                <template v-if=\"hasContentSlot('content')\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n            </bento-checkbox>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowGroupError\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-checkbox-group__error-message\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, ref, toRef, useSlots, watch } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import {\n        type BentoCheckboxGroupEmits,\n        type BentoCheckboxGroupItems,\n        BentoCheckboxGroupVariant,\n    } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a disabled state.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Renders all checkboxes in an error state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n         */\n        formId: { type: String, default: null },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * The checkbox group's items.\n         */\n        items: { type: Array as PropType<BentoCheckboxGroupItems>, required: true },\n\n        /**\n         * The name associated with the group. Required for accessibility purposes.\n         */\n        label: { type: String, required: true },\n\n        /**\n         * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n         * Defaults to no value selected.\n         */\n        modelValue: { type: Array as PropType<Array<number | string | null>>, default: () => [] },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a readonly state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n         */\n        variant: {\n            type: String as PropType<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>,\n            default: BentoCheckboxGroupVariant.VERTICAL,\n            validator: (value: BentoCheckboxGroupVariant) => Object.values(BentoCheckboxGroupVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"update:model-value\"]);\n\n    const slots = useSlots();\n\n    const errorId = generateUid('error');\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n    const { emitValue } = useFormFieldEmits(emit);\n\n    const shouldShowGroupError = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n    const conditionalClasses = computed(() => ({\n        'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n    }));\n\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for\n    // vue3 named scoped slots\n    const hasContentSlot = (name: string) => !!slots[name];\n    const shouldShowSlotsError = computed(() => hasContentSlot('content') && props.variant !== 'vertical');\n\n    watch(\n        shouldShowSlotsError,\n        newValue => {\n            if (newValue) {\n                throw new Error('The content slot is only available for the vertical checkbox group layout');\n            }\n        },\n        { immediate: true }\n    );\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    const onModelValueUpdate = (value: any) => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n</script>\n\n<script lang=\"ts\">\n    const COMPONENT_NAME = 'bento-checkbox-group';\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default {\n        name: COMPONENT_NAME,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","__default__","slots","useSlots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","props","emitValue","useFormFieldEmits","emit","shouldShowGroupError","computed","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","value"],"mappings":";;;;;;;;;AAMO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;AC0KR,MAAAE,IAAA,wBAoBAC,IAAA;AAAA,EAAe,MAAAD;AAAA,EACL,OAAA,EAAA,MAAA,cAAA,OAAA,qBAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlEAE,IAAAC,EAAA,GAEAC,IAAAC,EAAA,OAAA,GACA,EAAA,YAAAC,EAAA,IAAAC,EAAAC,EAAAC,GAAA,UAAA,CAAA,GACA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA,CAAAL,EAAA,YAAA,CAAAH,EAAA,SAAA,CAAA,CAAAG,EAAA,YAAA,GAEAM,IAAAD,EAAA,OAAA;AAAA,MAA2C,4CAAAL,EAAA,YAAAX,EAAA;AAAA,IACiD,EAAA,GAM5FkB,IAAA,CAAAC,MAAA,CAAA,CAAAf,EAAAe,CAAA,GACAC,IAAAJ,EAAA,MAAAE,EAAA,SAAA,KAAAP,EAAA,YAAA,UAAA;AAEA,IAAAU;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA,MAAA,2EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAC,IAAAC,EAAAb,EAAA,UAAA;AACA,WAAAU;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,MAAA;AAER,QAAAY,EAAA,QAAAZ,EAAA;AAAA,MAAyB;AAAA,IAC7B,wOAGJ,CAAAc,MAAA;AACI,MAAAF,EAAA,QAAAE,GACAb,EAAAa,CAAA;AAAA,IAAe;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{checkbox.Co4HoHKF.js → checkbox.D5xZ5Nnh.js}

@@ -1,15 +1,15 @@
 import { defineComponent as w, toRefs as g, computed as o, ref as k, onMounted as z, useAttrs as F } from "vue";
 import { B as H } from "./typography.D1OZJbEa.js";
-import { u as O } from "./use-default-slot-validator.BDn0wkYP.js";
-import { u as j } from "./use-has-slot.C9lQZ6nz.js";
+import { C as O } from "./checkbox-input.CIoy_QxO.js";
+import { u as j } from "./use-default-slot-validator.BDn0wkYP.js";
+import { u as G } from "./use-has-slot.C9lQZ6nz.js";
 import { g as C } from "./generate-uid.DBWe4g6T.js";
 import { g as c } from "./get-slot-text.DM_NdrUC.js";
-import { u as G } from "./index.CPOlyau9.js";
-import { u as J } from "./aria-label.CaUURpnB.js";
+import { u as J } from "./index.CPOlyau9.js";
+import { u as K } from "./aria-label.CaUURpnB.js";
 import { B as S } from "./minus-small.CAycYt5H.js";
-import { B as K } from "./tag.Dz1FQSZb.js";
-import { E as X } from "./error-message.DKnoUezI.js";
-import { C as Y } from "./checkbox-input.CIoy_QxO.js";
+import { B as X } from "./tag.Dz1FQSZb.js";
+import { E as Y } from "./error-message.DKnoUezI.js";
 import { n as Q } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/checkbox.css";
 var s = /* @__PURE__ */ ((a) => (a.UPDATE = "update:model-value", a.INPUT = "input", a))(s || {});
@@ -29,10 +29,10 @@ const W = {
   name: "bento-checkbox",
   i18n: { messages: W },
   components: {
-    BentoTag: K,
+    BentoTag: X,
     BentoTypography: H,
-    CheckboxInput: Y,
-    ErrorMessage: X
+    CheckboxInput: O,
+    ErrorMessage: Y
   },
   inheritAttrs: !1,
   model: { prop: "modelValue" },
@@ -99,8 +99,8 @@ const W = {
   },
   emits: [s.UPDATE, s.INPUT],
   setup(a, { attrs: e, emit: t, slots: r }) {
-    const { t: d } = G(), u = C("description"), b = C("error"), n = j(r), { disabled: p, indeterminate: A, modelValue: i, readonly: B, value: E } = g(a), h = c(r)("default"), f = c(r)("description");
-    O("bento-checkbox", r.default, r.description);
+    const { t: d } = J(), u = C("description"), b = C("error"), n = G(r), { disabled: p, indeterminate: A, modelValue: i, readonly: B, value: E } = g(a), h = c(r)("default"), f = c(r)("description");
+    j("bento-checkbox", r.default, r.description);
     const m = o(() => Array.isArray(i.value)), I = o(() => m.value ? i.value.some((l) => l === E.value) : i.value), _ = o(() => A.value), T = o(
       () => !a.disabled && !a.readonly && (a.hasError || !!a.errorMessage)
     ), v = o(() => !a.disabled && !a.readonly && !!a.errorMessage), y = o(() => n("content")), D = o(() => _?.value || I?.value), M = o(
@@ -112,7 +112,7 @@ const W = {
       x.value = d("checkbox");
     });
     const q = o(
-      () => J({
+      () => K({
         ariaLabel: P.value,
         // TODO: take this line away when the aria-label props is removed
         label: U,
@@ -169,4 +169,4 @@ export {
   _e as B,
   s as a
 };
-//# sourceMappingURL=checkbox.Co4HoHKF.js.map
+//# sourceMappingURL=checkbox.D5xZ5Nnh.js.map

package/dist/chunks/{checkbox.Co4HoHKF.js.map → checkbox.D5xZ5Nnh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox.Co4HoHKF.js","sources":["../../src/components/checkbox/checkbox.types.ts","../../src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTagProps } from '../tag/tag.types';\n\nexport enum BentoCheckboxEvent {\n    UPDATE = 'update:model-value',\n    INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = BentoTagProps;\n","<template>\n    <label class=\"b-checkbox\" :class=\"conditionalClass\" v-bind=\"styleAttrs\" :aria-hidden=\"getAriaHidden($attrs)\">\n        <checkbox-input\n            v-bind=\"$attrs\"\n            ref=\"input\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"ariaDescribedBy\"\n            :aria-required=\"required\"\n            :disabled=\"disabled\"\n            :has-error=\"shouldShowError\"\n            :indeterminate=\"isIndeterminate\"\n            :value=\"value\"\n            :model-value=\"modelValue\"\n            :readonly=\"readonly\"\n            @update:model-value=\"onChange\"\n        />\n        <span v-if=\"hasSlot('default') || shouldShowErrorMessage\" class=\"b-checkbox__text\">\n            <bento-typography v-if=\"hasSlot('default')\" class=\"b-checkbox__label\" el=\"span\" variant=\"body\">\n                <span><slot /></span>\n                <bento-typography v-if=\"optional\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >({{ t('optional') }})</bento-typography\n                >\n                <bento-typography v-else-if=\"required\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >*</bento-typography\n                >\n                <bento-tag v-if=\"tag\" class=\"b-checkbox__label-tag\" v-bind=\"tag\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                class=\"b-checkbox__description\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n            <error-message v-if=\"shouldShowErrorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"contentSlotAvailable\" class=\"b-checkbox__content\" el=\"span\" variant=\"body\">\n                <slot name=\"content\"></slot>\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import {\n        computed,\n        defineComponent,\n        type HTMLAttributes,\n        onMounted,\n        type PropType,\n        ref,\n        toRefs,\n        useAttrs,\n    } from 'vue';\n    import { BentoCheckboxEvent, type BentoCheckboxTag } from './checkbox.types';\n    import { BentoTypography } from '@/components/typography';\n    import { CheckboxInput } from '@/components/internal/checkbox-input';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { BentoCheckboxState, type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox';\n    import { BentoTag } from '@/components/tag';\n    import { type BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Checkboxes are used to make a binary choice about an option.\n     * The label tag area is also clickable.\n     *\n     * @usage\n     * import { BentoCheckbox } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckbox },\n     *     template: `\n     *         <bento-checkbox>\n     *             Label text\n     *             <template #description>Sub label text</template>\n     *         </bento-checkbox>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-checkbox',\n        i18n: { messages },\n        components: {\n            BentoTag,\n            BentoTypography,\n            CheckboxInput,\n            ErrorMessage,\n        },\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * @deprecated Since v2.0.0. Use `aria-label` instead.\n             * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Setting this property to true will disable the checkbox in your form.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Renders the checkbox in an error state with an error message.\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Setting this property to true will show the checkbox in error state.\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * The :indeterminate CSS pseudo-class represents any form element\n             * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n             * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n             * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n             * This property lets you control the input.indeterminate native property.\n             */\n            indeterminate: { type: Boolean, default: false },\n\n            /**\n             * When handling a single checkbox with a singular state, use a boolean.\n             *\n             * When handling multiple checkboxes, use an array of keys.\n             * These keys exist as a set \"value\" prop for each checkbox.\n             */\n            modelValue: {\n                type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>,\n                default: false,\n            },\n\n            /**\n             * Highlights the checkbox is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the checkbox to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Highlights the checkbox is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Sets the properties of the BentoTag component that is placed next to the label.\n             * {@see BentoTag}\n             */\n            tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined },\n\n            /**\n             * The value of the component. The DOM API casts this to a string.\n             * The browser uses \"on\" as the default value.\n             *\n             * In the case of multiple checkboxes this value is used as a unique key.\n             */\n            value: { type: [String, Number], default: null },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { attrs, emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const descriptionId = generateUid('description');\n            const errorId = generateUid('error');\n            const hasSlot = useHasSlot(slots);\n\n            const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-checkbox', slots.default, slots.description);\n\n            const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n            const isChecked = computed(() => {\n                if (!isCheckboxGroup.value) {\n                    return modelValue.value as boolean;\n                }\n\n                return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n            });\n            const isIndeterminate = computed(() => indeterminate.value);\n\n            const shouldShowError = computed(\n                () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage)\n            );\n            const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n            // Content slot logic\n            const hasContentSlot = computed(() => hasSlot('content'));\n            const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value);\n            const contentSlotAvailable = computed(\n                () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value\n            );\n\n            // ARIA fields\n            const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>(\n                () =>\n                    `${shouldShowErrorMessage.value ? errorId : ''} ${\n                        defaultSlotValue && descriptionSlotValue ? descriptionId : ''\n                    }`.trim() || null\n            );\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const checkboxTranslation = ref();\n            // Translations used in the script tag need to be inside onMounted otherwise they fail in Vue 3\n            onMounted(() => {\n                checkboxTranslation.value = t('checkbox');\n            });\n            // Only add aria-label if no label slot is present\n            const computedAriaLabel = computed(\n                () =>\n                    useAriaLabel({\n                        ariaLabel: ariaLabelAttribute.value as string,\n                        // TODO: take this line away when the aria-label props is removed\n                        label: ariaLabel,\n                        defaultFallback: hasSlot('default')\n                            ? (getSlotText(slots)('default') as string)\n                            : checkboxTranslation.value,\n                    }).value\n            );\n            const getAriaHidden = (attributes: HTMLAttributes) => attributes?.['aria-hidden'];\n\n            const styleAttrs = computed(() => {\n                const { style, class: cls } = useAttrs();\n                return {\n                    class: cls as HTMLAttributes['class'],\n                    style: style as HTMLAttributes['style'],\n                };\n            });\n\n            const conditionalClass = computed(() => ({\n                [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n                [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value,\n            }));\n\n            const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => {\n                if (disabled.value) {\n                    return;\n                }\n                emit(BentoCheckboxEvent.UPDATE, newValue);\n                emit(BentoCheckboxEvent.INPUT, newValue);\n            };\n\n            return {\n                // Values\n                descriptionId,\n                errorId,\n                ariaDescribedBy,\n                computedAriaLabel,\n                conditionalClass,\n                defaultSlotValue,\n                descriptionSlotValue,\n                isIndeterminate,\n                shouldShowError,\n                shouldShowErrorMessage,\n                contentSlotAvailable,\n                hasContentSlot,\n                styleAttrs,\n\n                // Methods\n                hasSlot,\n                onChange,\n                getAriaHidden,\n\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox.scss\" />\n"],"names":["BentoCheckboxEvent","BentoCheckboxEvent2","_sfc_main","defineComponent","messages","BentoTag","BentoTypography","CheckboxInput","ErrorMessage","props","attrs","emit","slots","t","useI18n","descriptionId","generateUid","errorId","hasSlot","useHasSlot","disabled","indeterminate","modelValue","readonly","value","toRefs","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","shouldShowError","shouldShowErrorMessage","hasContentSlot","isCheckedOrIntermediate","contentSlotAvailable","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","checkboxTranslation","onMounted","computedAriaLabel","useAriaLabel","getAriaHidden","attributes","styleAttrs","style","cls","useAttrs","conditionalClass","BentoCheckboxState","newValue"],"mappings":"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"}
+{"version":3,"file":"checkbox.D5xZ5Nnh.js","sources":["../../src/components/checkbox/checkbox.types.ts","../../src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTagProps } from '../tag/tag.types';\n\nexport enum BentoCheckboxEvent {\n    UPDATE = 'update:model-value',\n    INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = BentoTagProps;\n","<template>\n    <label class=\"b-checkbox\" :class=\"conditionalClass\" v-bind=\"styleAttrs\" :aria-hidden=\"getAriaHidden($attrs)\">\n        <checkbox-input\n            v-bind=\"$attrs\"\n            ref=\"input\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"ariaDescribedBy\"\n            :aria-required=\"required\"\n            :disabled=\"disabled\"\n            :has-error=\"shouldShowError\"\n            :indeterminate=\"isIndeterminate\"\n            :value=\"value\"\n            :model-value=\"modelValue\"\n            :readonly=\"readonly\"\n            @update:model-value=\"onChange\"\n        />\n        <span v-if=\"hasSlot('default') || shouldShowErrorMessage\" class=\"b-checkbox__text\">\n            <bento-typography v-if=\"hasSlot('default')\" class=\"b-checkbox__label\" el=\"span\" variant=\"body\">\n                <span><slot /></span>\n                <bento-typography v-if=\"optional\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >({{ t('optional') }})</bento-typography\n                >\n                <bento-typography v-else-if=\"required\" class=\"b-checkbox__label-requirement\" el=\"span\"\n                    >*</bento-typography\n                >\n                <bento-tag v-if=\"tag\" class=\"b-checkbox__label-tag\" v-bind=\"tag\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                class=\"b-checkbox__description\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"description\"></slot>\n            </bento-typography>\n            <error-message v-if=\"shouldShowErrorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"contentSlotAvailable\" class=\"b-checkbox__content\" el=\"span\" variant=\"body\">\n                <slot name=\"content\"></slot>\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import {\n        computed,\n        defineComponent,\n        type HTMLAttributes,\n        onMounted,\n        type PropType,\n        ref,\n        toRefs,\n        useAttrs,\n    } from 'vue';\n    import { BentoCheckboxEvent, type BentoCheckboxTag } from './checkbox.types';\n    import { BentoTypography } from '@/components/typography';\n    import { CheckboxInput } from '@/components/internal/checkbox-input';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { BentoCheckboxState, type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox';\n    import { BentoTag } from '@/components/tag';\n    import { type BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Checkboxes are used to make a binary choice about an option.\n     * The label tag area is also clickable.\n     *\n     * @usage\n     * import { BentoCheckbox } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckbox },\n     *     template: `\n     *         <bento-checkbox>\n     *             Label text\n     *             <template #description>Sub label text</template>\n     *         </bento-checkbox>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-checkbox',\n        i18n: { messages },\n        components: {\n            BentoTag,\n            BentoTypography,\n            CheckboxInput,\n            ErrorMessage,\n        },\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        props: {\n            /**\n             * @deprecated Since v2.0.0. Use `aria-label` instead.\n             * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Setting this property to true will disable the checkbox in your form.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Renders the checkbox in an error state with an error message.\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Setting this property to true will show the checkbox in error state.\n             */\n            hasError: { type: Boolean, default: false },\n\n            /**\n             * The :indeterminate CSS pseudo-class represents any form element\n             * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n             * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n             * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n             * This property lets you control the input.indeterminate native property.\n             */\n            indeterminate: { type: Boolean, default: false },\n\n            /**\n             * When handling a single checkbox with a singular state, use a boolean.\n             *\n             * When handling multiple checkboxes, use an array of keys.\n             * These keys exist as a set \"value\" prop for each checkbox.\n             */\n            modelValue: {\n                type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>,\n                default: false,\n            },\n\n            /**\n             * Highlights the checkbox is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the checkbox to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Highlights the checkbox is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Sets the properties of the BentoTag component that is placed next to the label.\n             * {@see BentoTag}\n             */\n            tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined },\n\n            /**\n             * The value of the component. The DOM API casts this to a string.\n             * The browser uses \"on\" as the default value.\n             *\n             * In the case of multiple checkboxes this value is used as a unique key.\n             */\n            value: { type: [String, Number], default: null },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { attrs, emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const descriptionId = generateUid('description');\n            const errorId = generateUid('error');\n            const hasSlot = useHasSlot(slots);\n\n            const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-checkbox', slots.default, slots.description);\n\n            const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n            const isChecked = computed(() => {\n                if (!isCheckboxGroup.value) {\n                    return modelValue.value as boolean;\n                }\n\n                return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n            });\n            const isIndeterminate = computed(() => indeterminate.value);\n\n            const shouldShowError = computed(\n                () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage)\n            );\n            const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n            // Content slot logic\n            const hasContentSlot = computed(() => hasSlot('content'));\n            const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value);\n            const contentSlotAvailable = computed(\n                () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value\n            );\n\n            // ARIA fields\n            const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>(\n                () =>\n                    `${shouldShowErrorMessage.value ? errorId : ''} ${\n                        defaultSlotValue && descriptionSlotValue ? descriptionId : ''\n                    }`.trim() || null\n            );\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const checkboxTranslation = ref();\n            // Translations used in the script tag need to be inside onMounted otherwise they fail in Vue 3\n            onMounted(() => {\n                checkboxTranslation.value = t('checkbox');\n            });\n            // Only add aria-label if no label slot is present\n            const computedAriaLabel = computed(\n                () =>\n                    useAriaLabel({\n                        ariaLabel: ariaLabelAttribute.value as string,\n                        // TODO: take this line away when the aria-label props is removed\n                        label: ariaLabel,\n                        defaultFallback: hasSlot('default')\n                            ? (getSlotText(slots)('default') as string)\n                            : checkboxTranslation.value,\n                    }).value\n            );\n            const getAriaHidden = (attributes: HTMLAttributes) => attributes?.['aria-hidden'];\n\n            const styleAttrs = computed(() => {\n                const { style, class: cls } = useAttrs();\n                return {\n                    class: cls as HTMLAttributes['class'],\n                    style: style as HTMLAttributes['style'],\n                };\n            });\n\n            const conditionalClass = computed(() => ({\n                [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n                [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value,\n            }));\n\n            const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => {\n                if (disabled.value) {\n                    return;\n                }\n                emit(BentoCheckboxEvent.UPDATE, newValue);\n                emit(BentoCheckboxEvent.INPUT, newValue);\n            };\n\n            return {\n                // Values\n                descriptionId,\n                errorId,\n                ariaDescribedBy,\n                computedAriaLabel,\n                conditionalClass,\n                defaultSlotValue,\n                descriptionSlotValue,\n                isIndeterminate,\n                shouldShowError,\n                shouldShowErrorMessage,\n                contentSlotAvailable,\n                hasContentSlot,\n                styleAttrs,\n\n                // Methods\n                hasSlot,\n                onChange,\n                getAriaHidden,\n\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox.scss\" />\n"],"names":["BentoCheckboxEvent","BentoCheckboxEvent2","_sfc_main","defineComponent","messages","BentoTag","BentoTypography","CheckboxInput","ErrorMessage","props","attrs","emit","slots","t","useI18n","descriptionId","generateUid","errorId","hasSlot","useHasSlot","disabled","indeterminate","modelValue","readonly","value","toRefs","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","shouldShowError","shouldShowErrorMessage","hasContentSlot","isCheckedOrIntermediate","contentSlotAvailable","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","checkboxTranslation","onMounted","computedAriaLabel","useAriaLabel","getAriaHidden","attributes","styleAttrs","style","cls","useAttrs","conditionalClass","BentoCheckboxState","newValue"],"mappings":"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"}