@adyen/bento-vue2 2.1.1 → 2.2.0

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-ugnnt0z-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-ugnnt0z-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-ugnnt0z-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-ugnnt0z-5153baa6{0%{opacity:0}to{opacity:1}}@keyframes scale-up-ugnnt0z-5153baa6{0%{scale:1}to{scale:1}}@keyframes enter-ugnnt0z-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-ugnnt1p-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-ugnnt1p-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-ugnnt1p-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-ugnnt1p-5153baa6{0%{opacity:1}to{opacity:0}}@keyframes scale-down-ugnnt1p-5153baa6{0%{scale:1}to{scale:1}}@keyframes exit-ugnnt1p-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-dc49f43a]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-secondary-nav[data-v-dc49f43a],.b-secondary-nav[data-v-dc49f43a]:before,.b-secondary-nav[data-v-dc49f43a]:after{box-sizing:border-box}.b-secondary-nav *[data-v-dc49f43a],.b-secondary-nav *[data-v-dc49f43a]:before,.b-secondary-nav *[data-v-dc49f43a]:after{box-sizing:border-box}.b-secondary-nav[data-v-dc49f43a] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav[data-v-dc49f43a] ::-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-dc49f43a]{max-width:250px}}.b-secondary-nav[data-v-dc49f43a] .b-secondary-nav__list{list-style:none;margin:0;padding:0}.b-secondary-nav__option[data-v-dc49f43a]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-secondary-nav__nested-option[data-v-dc49f43a]{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-u76sd3o-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),enter-u76sd3o-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-enter),scale-up-u76sd3o-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-in-u76sd3o-5153baa6{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u76sd3o-5153baa6{0%{scale:1}to{scale:1}}@keyframes enter-u76sd3o-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-u76sd4h-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear),exit-u76sd4h-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-exit),scale-down-u76sd4h-5153baa6 var(--b-animation-duration-moderate) var(--b-animation-easing-linear)}@keyframes fade-out-u76sd4h-5153baa6{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u76sd4h-5153baa6{0%{scale:1}to{scale:1}}@keyframes exit-u76sd4h-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-dc49f43a]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-secondary-nav[data-v-dc49f43a],.b-secondary-nav[data-v-dc49f43a]:before,.b-secondary-nav[data-v-dc49f43a]:after{box-sizing:border-box}.b-secondary-nav *[data-v-dc49f43a],.b-secondary-nav *[data-v-dc49f43a]:before,.b-secondary-nav *[data-v-dc49f43a]:after{box-sizing:border-box}.b-secondary-nav[data-v-dc49f43a] ::-webkit-scrollbar{height:14px;width:14px}.b-secondary-nav[data-v-dc49f43a] ::-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-dc49f43a]{max-width:250px}}.b-secondary-nav[data-v-dc49f43a] .b-secondary-nav__list{list-style:none;margin:0;padding:0}.b-secondary-nav__option[data-v-dc49f43a]{align-items:center;display:flex;gap:var(--b-spacer-040)}.b-secondary-nav__nested-option[data-v-dc49f43a]{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-1b728c73]{-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-1b728c73],.b-sidepanel[data-v-1b728c73]:before,.b-sidepanel[data-v-1b728c73]:after{box-sizing:border-box}.b-sidepanel *[data-v-1b728c73],.b-sidepanel *[data-v-1b728c73]:before,.b-sidepanel *[data-v-1b728c73]:after{box-sizing:border-box}.b-sidepanel[data-v-1b728c73] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-1b728c73] ::-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-1b728c73]{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-1b728c73]{max-width:680px;min-width:480px;width:33%}}.b-sidepanel__close-button[data-v-1b728c73]{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-1b728c73]{overflow:hidden}.b-sidepanel[data-v-1b728c73]::backdrop{background-color:var(--b-color-support-overlay, #00112c);opacity:.5}.b-sidepanel[open][data-v-1b728c73]{animation:enter-ugnnsog-1b728c73 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-enter)}@keyframes enter-ugnnsog-1b728c73{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-1b728c73]::backdrop{animation:fade-in-ugnnsoj-1b728c73 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-ugnnsoj-1b728c73{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-1b728c73]{animation:exit-ugnnsok-1b728c73 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-exit)}@keyframes exit-ugnnsok-1b728c73{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-1b728c73]::backdrop{animation:fade-out-ugnnsoy-1b728c73 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-ugnnsoy-1b728c73{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-06088a46]{-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-06088a46],.b-sidepanel[data-v-06088a46]:before,.b-sidepanel[data-v-06088a46]:after{box-sizing:border-box}.b-sidepanel *[data-v-06088a46],.b-sidepanel *[data-v-06088a46]:before,.b-sidepanel *[data-v-06088a46]:after{box-sizing:border-box}.b-sidepanel[data-v-06088a46] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-06088a46] ::-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-06088a46]{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-06088a46]{max-width:680px;min-width:480px;width:33%}}.b-sidepanel__close-button[data-v-06088a46]{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-06088a46]{overflow:hidden}.b-sidepanel[data-v-06088a46]::backdrop{background-color:var(--b-color-support-overlay, #00112c);opacity:.5}.b-sidepanel[open][data-v-06088a46]{animation:enter-u76scsr-06088a46 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-enter)}@keyframes enter-u76scsr-06088a46{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-06088a46]::backdrop{animation:fade-in-u76scsy-06088a46 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-u76scsy-06088a46{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-06088a46]{animation:exit-u76sctk-06088a46 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-exit)}@keyframes exit-u76sctk-06088a46{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-06088a46]::backdrop{animation:fade-out-u76scu1-06088a46 var(--b-animation-duration-slow, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-u76scu1-06088a46{0%{opacity:.5}to{opacity:0}}

package/dist/assets/table-of-contents.css

@@ -1 +1 @@
-.b-table-of-contents__toc[data-v-182a94f1]{all:unset;list-style-type:none}.b-table-of-contents__item[data-v-182a94f1]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-table-of-contents__item[data-v-182a94f1],.b-table-of-contents__item[data-v-182a94f1]:before,.b-table-of-contents__item[data-v-182a94f1]:after{box-sizing:border-box}.b-table-of-contents__item *[data-v-182a94f1],.b-table-of-contents__item *[data-v-182a94f1]:before,.b-table-of-contents__item *[data-v-182a94f1]:after{box-sizing:border-box}.b-table-of-contents__item[data-v-182a94f1] ::-webkit-scrollbar{height:14px;width:14px}.b-table-of-contents__item[data-v-182a94f1] ::-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-table-of-contents__item-title[data-v-182a94f1]{align-items:center;color:var(--b-color-label-primary);cursor:pointer;display:flex;min-height:24px;text-decoration:underline}.b-table-of-contents__item-title[data-v-182a94f1]:focus-visible{outline:none}.b-table-of-contents__item-title[data-v-182a94f1]:focus-visible{border-radius:var(--b-border-radius-xs);animation:outer-ring-default-182a94f1 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-182a94f1{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)}}@media(min-width:376px){.b-table-of-contents__item-title[data-v-182a94f1]{border-left:var(--b-border-width-m) solid var(--b-color-separator-primary);color:var(--b-color-label-secondary);padding-left:var(--b-spacer-070);text-decoration:none}}@media(min-width:376px)and (hover:hover){.b-table-of-contents__item-title[data-v-182a94f1]:hover{color:var(--b-color-label-primary)}}@media(min-width:376px){.b-table-of-contents__item-title[data-v-182a94f1]:focus-visible{border-radius:0}}.b-table-of-contents__item-label[data-v-182a94f1]{min-width:0;overflow-wrap:break-word}@media(min-width:376px){.b-table-of-contents__item--active .b-table-of-contents__item-title[data-v-182a94f1]{border-left:var(--b-border-width-m) solid var(--b-color-background-inverse-primary);color:var(--b-color-label-primary)}}.b-table-of-contents__item--level-2 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:var(--b-spacer-070)}@media(min-width:376px){.b-table-of-contents__item--level-2 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060))}}.b-table-of-contents__item--level-3 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060))}@media(min-width:376px){.b-table-of-contents__item--level-3 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060) * 2)}}.b-table-of-contents__item--level-4 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060) * 2)}@media(min-width:376px){.b-table-of-contents__item--level-4 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060) * 3)}}.b-table-of-contents__item-separator[data-v-182a94f1]{height:10px}@media(min-width:376px){.b-table-of-contents__item-separator[data-v-182a94f1]{border-left:var(--b-border-width-m) solid var(--b-color-separator-primary)}}.b-table-of-contents[data-v-5fd75030]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;flex-direction:column;gap:var(--b-spacer-080)}.b-table-of-contents[data-v-5fd75030],.b-table-of-contents[data-v-5fd75030]:before,.b-table-of-contents[data-v-5fd75030]:after{box-sizing:border-box}.b-table-of-contents *[data-v-5fd75030],.b-table-of-contents *[data-v-5fd75030]:before,.b-table-of-contents *[data-v-5fd75030]:after{box-sizing:border-box}.b-table-of-contents[data-v-5fd75030] ::-webkit-scrollbar{height:14px;width:14px}.b-table-of-contents[data-v-5fd75030] ::-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-table-of-contents__header[data-v-5fd75030]{color:var(--b-color-label-primary);min-width:0;overflow-wrap:break-word}
+.b-table-of-contents__toc[data-v-182a94f1]{all:unset;list-style-type:none}.b-table-of-contents__item[data-v-182a94f1]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-table-of-contents__item[data-v-182a94f1],.b-table-of-contents__item[data-v-182a94f1]:before,.b-table-of-contents__item[data-v-182a94f1]:after{box-sizing:border-box}.b-table-of-contents__item *[data-v-182a94f1],.b-table-of-contents__item *[data-v-182a94f1]:before,.b-table-of-contents__item *[data-v-182a94f1]:after{box-sizing:border-box}.b-table-of-contents__item[data-v-182a94f1] ::-webkit-scrollbar{height:14px;width:14px}.b-table-of-contents__item[data-v-182a94f1] ::-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-table-of-contents__item-title[data-v-182a94f1]{align-items:center;color:var(--b-color-label-primary);cursor:pointer;display:flex;min-height:24px;text-decoration:underline}.b-table-of-contents__item-title[data-v-182a94f1]:focus-visible{outline:none}.b-table-of-contents__item-title[data-v-182a94f1]:focus-visible{border-radius:var(--b-border-radius-xs);animation:outer-ring-default-182a94f1 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-182a94f1{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)}}@media(min-width:376px){.b-table-of-contents__item-title[data-v-182a94f1]{border-left:var(--b-border-width-m) solid var(--b-color-separator-primary);color:var(--b-color-label-secondary);padding-left:var(--b-spacer-070);text-decoration:none}}@media(min-width:376px)and (hover:hover){.b-table-of-contents__item-title[data-v-182a94f1]:hover{color:var(--b-color-label-primary)}}@media(min-width:376px){.b-table-of-contents__item-title[data-v-182a94f1]:focus-visible{border-radius:0}}.b-table-of-contents__item-label[data-v-182a94f1]{min-width:0;overflow-wrap:break-word}@media(min-width:376px){.b-table-of-contents__item--active .b-table-of-contents__item-title[data-v-182a94f1]{border-left:var(--b-border-width-m) solid var(--b-color-outline-primary-active);color:var(--b-color-label-primary)}}.b-table-of-contents__item--level-2 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:var(--b-spacer-070)}@media(min-width:376px){.b-table-of-contents__item--level-2 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060))}}.b-table-of-contents__item--level-3 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060))}@media(min-width:376px){.b-table-of-contents__item--level-3 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060) * 2)}}.b-table-of-contents__item--level-4 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060) * 2)}@media(min-width:376px){.b-table-of-contents__item--level-4 .b-table-of-contents__item-title[data-v-182a94f1]{padding-left:calc(var(--b-spacer-070) + var(--b-spacer-060) * 3)}}.b-table-of-contents__item-separator[data-v-182a94f1]{height:10px}@media(min-width:376px){.b-table-of-contents__item-separator[data-v-182a94f1]{border-left:var(--b-border-width-m) solid var(--b-color-separator-primary)}}.b-table-of-contents[data-v-5fd75030]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;display:flex;flex-direction:column;gap:var(--b-spacer-080)}.b-table-of-contents[data-v-5fd75030],.b-table-of-contents[data-v-5fd75030]:before,.b-table-of-contents[data-v-5fd75030]:after{box-sizing:border-box}.b-table-of-contents *[data-v-5fd75030],.b-table-of-contents *[data-v-5fd75030]:before,.b-table-of-contents *[data-v-5fd75030]:after{box-sizing:border-box}.b-table-of-contents[data-v-5fd75030] ::-webkit-scrollbar{height:14px;width:14px}.b-table-of-contents[data-v-5fd75030] ::-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-table-of-contents__header[data-v-5fd75030]{color:var(--b-color-label-primary);min-width:0;overflow-wrap:break-word}

package/dist/assets/textarea.css

@@ -1 +1 @@
-.b-textarea[data-v-4550fdcd]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-textarea[data-v-4550fdcd],.b-textarea[data-v-4550fdcd]:before,.b-textarea[data-v-4550fdcd]:after{box-sizing:border-box}.b-textarea *[data-v-4550fdcd],.b-textarea *[data-v-4550fdcd]:before,.b-textarea *[data-v-4550fdcd]:after{box-sizing:border-box}.b-textarea[data-v-4550fdcd] ::-webkit-scrollbar{height:14px;width:14px}.b-textarea[data-v-4550fdcd] ::-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-textarea__label-box[data-v-4550fdcd]{display:flex;justify-content:space-between;min-width:200px}.b-textarea__label-box--no-label[data-v-4550fdcd]{justify-content:flex-end}.b-textarea__label-item[data-v-4550fdcd]{color:var(--b-color-label-secondary)}.b-textarea__label-item--error[data-v-4550fdcd]{color:var(--b-color-label-critical)}.b-textarea__input-box[data-v-4550fdcd]{margin-bottom:var(--b-spacer-040);position:relative}.b-textarea__input[data-v-4550fdcd]{background-color:var(--b-color-background-primary);border:var(--b-border-width-s) solid var(--b-color-outline-tertiary);border-radius:var(--b-border-radius-m);color:var(--b-color-label-primary);display:block;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;min-height:44px;min-width:200px;padding:var(--b-spacer-060) var(--b-spacer-060) var(--b-spacer-040) var(--b-spacer-060);width:100%}.b-textarea__input--dynamic-height[data-v-4550fdcd]{scrollbar-width:none}.b-textarea__input--error[data-v-4550fdcd]{border-color:var(--b-color-outline-critical);outline:calc(var(--b-border-width-attention) - var(--b-border-width-s)) solid var(--b-color-outline-critical)}.b-textarea__input[data-v-4550fdcd]:focus{border-color:var(--b-color-outline-tertiary-active);outline:calc(var(--b-border-width-attention) - var(--b-border-width-s)) solid var(--b-color-outline-tertiary-active)}.b-textarea__input[data-v-4550fdcd]:focus-visible{box-shadow:none}.b-textarea__input[data-v-4550fdcd]:hover:enabled{border-color:var(--b-color-outline-tertiary-active);outline:unset}.b-textarea__input[data-v-4550fdcd]:disabled{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);color:var(--b-color-label-disabled)}.b-textarea__input[data-v-4550fdcd]:disabled::placeholder{background:transparent}.b-textarea__input[data-v-4550fdcd]::placeholder{color:var(--b-color-label-tertiary);opacity:1}.b-textarea__input--readonly[data-v-4550fdcd]{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}.b-textarea__input--readonly[data-v-4550fdcd]:hover:enabled{border-color:var(--b-color-outline-disabled)}.b-textarea__input--clearable[data-v-4550fdcd]{padding:var(--b-spacer-060) var(--b-spacer-110) var(--b-spacer-040) var(--b-spacer-060)}.b-textarea__clear-button[data-v-4550fdcd]{position:absolute;right:12px;top:12px}.b-textarea__description[data-v-4550fdcd]{color:var(--b-color-label-secondary);display:flex;margin-top:var(--b-spacer-020)}.b-textarea--disabled *[data-v-4550fdcd]{cursor:not-allowed}
+.b-textarea[data-v-4550fdcd]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-textarea[data-v-4550fdcd],.b-textarea[data-v-4550fdcd]:before,.b-textarea[data-v-4550fdcd]:after{box-sizing:border-box}.b-textarea *[data-v-4550fdcd],.b-textarea *[data-v-4550fdcd]:before,.b-textarea *[data-v-4550fdcd]:after{box-sizing:border-box}.b-textarea[data-v-4550fdcd] ::-webkit-scrollbar{height:14px;width:14px}.b-textarea[data-v-4550fdcd] ::-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-textarea__label-box[data-v-4550fdcd]{display:flex;justify-content:space-between;min-width:200px}.b-textarea__label-box--no-label[data-v-4550fdcd]{justify-content:flex-end}.b-textarea__label-item[data-v-4550fdcd]{color:var(--b-color-label-secondary)}.b-textarea__label-item--error[data-v-4550fdcd]{color:var(--b-color-label-critical)}.b-textarea__input-box[data-v-4550fdcd]{margin-bottom:var(--b-spacer-040);position:relative}.b-textarea__input[data-v-4550fdcd]{background-color:var(--b-color-background-primary);border:var(--b-border-width-s) solid var(--b-color-outline-tertiary);border-radius:var(--b-border-radius-m);color:var(--b-color-label-primary);display:block;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;min-height:44px;min-width:200px;padding:var(--b-spacer-060) var(--b-spacer-060) var(--b-spacer-040) var(--b-spacer-060);width:100%}.b-textarea__input--dynamic-height[data-v-4550fdcd]{scrollbar-width:none}.b-textarea__input--error[data-v-4550fdcd]{border-color:var(--b-color-outline-critical);outline:calc(var(--b-border-width-attention) - var(--b-border-width-s)) solid var(--b-color-outline-critical)}.b-textarea__input[data-v-4550fdcd]:focus{border-color:var(--b-color-outline-tertiary-active);outline:calc(var(--b-border-width-attention) - var(--b-border-width-s)) solid var(--b-color-outline-tertiary-active)}.b-textarea__input[data-v-4550fdcd]:focus-visible{box-shadow:none}.b-textarea__input[data-v-4550fdcd]:hover:enabled{border-color:var(--b-color-outline-tertiary-active);outline:unset}.b-textarea__input[data-v-4550fdcd]:disabled{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);color:var(--b-color-label-disabled)}.b-textarea__input[data-v-4550fdcd]:disabled::placeholder{background:transparent;color:var(--b-color-label-disabled)}.b-textarea__input[data-v-4550fdcd]::placeholder{color:var(--b-color-label-secondary);opacity:1}.b-textarea__input--readonly[data-v-4550fdcd]{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}.b-textarea__input--readonly[data-v-4550fdcd]:hover:enabled{border-color:var(--b-color-outline-disabled)}.b-textarea__input--readonly[data-v-4550fdcd]::placeholder{color:var(--b-color-label-disabled)}.b-textarea__input--clearable[data-v-4550fdcd]{padding:var(--b-spacer-060) var(--b-spacer-110) var(--b-spacer-040) var(--b-spacer-060)}.b-textarea__clear-button[data-v-4550fdcd]{position:absolute;right:12px;top:12px}.b-textarea__description[data-v-4550fdcd]{color:var(--b-color-label-secondary);display:flex;margin-top:var(--b-spacer-020)}.b-textarea--disabled *[data-v-4550fdcd]{cursor:not-allowed}

package/dist/assets/timeline-item.css

@@ -1 +1 @@
-.b-timeline[data-v-1524dd4e]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;max-width:500px}.b-timeline[data-v-1524dd4e],.b-timeline[data-v-1524dd4e]:before,.b-timeline[data-v-1524dd4e]:after{box-sizing:border-box}.b-timeline *[data-v-1524dd4e],.b-timeline *[data-v-1524dd4e]:before,.b-timeline *[data-v-1524dd4e]:after{box-sizing:border-box}.b-timeline[data-v-1524dd4e] ::-webkit-scrollbar{height:14px;width:14px}.b-timeline[data-v-1524dd4e] ::-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-timeline__add-note-section[data-v-1524dd4e]{padding-bottom:var(--b-spacer-090)}.b-timeline__items[data-v-1524dd4e]{all:unset}.b-timeline-item[data-v-6761dfab]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;list-style-type:none;max-width:500px}.b-timeline-item[data-v-6761dfab],.b-timeline-item[data-v-6761dfab]:before,.b-timeline-item[data-v-6761dfab]:after{box-sizing:border-box}.b-timeline-item *[data-v-6761dfab],.b-timeline-item *[data-v-6761dfab]:before,.b-timeline-item *[data-v-6761dfab]:after{box-sizing:border-box}.b-timeline-item[data-v-6761dfab] ::-webkit-scrollbar{height:14px;width:14px}.b-timeline-item[data-v-6761dfab] ::-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-timeline-item__row[data-v-6761dfab]{display:flex;gap:var(--b-spacer-070)}.b-timeline-item__marker[data-v-6761dfab]{display:flex;flex-flow:column;max-width:16px;width:100%}.b-timeline-item__separator[data-v-6761dfab]{flex-grow:1;position:relative}.b-timeline-item__separator[data-v-6761dfab]:before{background-color:var(--b-color-separator-secondary);content:"";height:100%;left:50%;position:absolute;transform:translate(-50%);width:1px}.b-timeline-item__icon[data-v-6761dfab]{color:var(--b-color-label-primary);margin:var(--b-spacer-010) 0}.b-timeline-item__icon--grey[data-v-6761dfab]{color:var(--b-color-decorative-grey)}.b-timeline-item__icon--blue[data-v-6761dfab]{color:var(--b-color-decorative-blue)}.b-timeline-item__icon--green[data-v-6761dfab]{color:var(--b-color-decorative-green)}.b-timeline-item__icon--yellow[data-v-6761dfab]{color:var(--b-color-decorative-yellow)}.b-timeline-item__icon--orange[data-v-6761dfab]{color:var(--b-color-decorative-orange)}.b-timeline-item__icon--red[data-v-6761dfab]{color:var(--b-color-decorative-red)}.b-timeline-item__icon--timegap[data-v-6761dfab]{border-bottom:var(--b-border-width-s) solid var(--b-color-separator-secondary);border-top:var(--b-border-width-s) solid var(--b-color-separator-secondary);margin:var(--b-spacer-030) auto;padding-bottom:var(--b-spacer-030);width:9px}.b-timeline-item__content[data-v-6761dfab]{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;padding-bottom:var(--b-spacer-100)}.b-timeline-item__title[data-v-6761dfab]{color:var(--b-color-label-primary);margin-bottom:var(--b-spacer-010)}.b-timeline-item__timestamp[data-v-6761dfab]{align-items:baseline;color:var(--b-color-label-secondary);column-gap:var(--b-spacer-030);display:flex;flex-wrap:wrap}.b-timeline-item__timestamp[data-v-6761dfab] .b-date{color:var(--b-color-label-secondary)}.b-timeline-item__description[data-v-6761dfab]{color:var(--b-color-label-primary);margin-top:var(--b-spacer-050)}.b-timeline-item__data-list[data-v-6761dfab]{margin-top:var(--b-spacer-050);width:100%}.b-timeline-item__tag[data-v-6761dfab]{margin-top:var(--b-spacer-050)}.b-timeline-item__timegap[data-v-6761dfab]{color:var(--b-color-label-secondary)}.b-timeline-item--note .b-timeline-item__description[data-v-6761dfab]{margin-top:unset}.b-timeline-item--note .b-timeline-item__timestamp[data-v-6761dfab]{margin-top:var(--b-spacer-050)}.b-timeline-item:last-of-type .b-timeline-item__row:last-of-type .b-timeline-item__content[data-v-6761dfab]{padding-bottom:0}
+.b-timeline[data-v-1524dd4e]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;max-width:500px}.b-timeline[data-v-1524dd4e],.b-timeline[data-v-1524dd4e]:before,.b-timeline[data-v-1524dd4e]:after{box-sizing:border-box}.b-timeline *[data-v-1524dd4e],.b-timeline *[data-v-1524dd4e]:before,.b-timeline *[data-v-1524dd4e]:after{box-sizing:border-box}.b-timeline[data-v-1524dd4e] ::-webkit-scrollbar{height:14px;width:14px}.b-timeline[data-v-1524dd4e] ::-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-timeline__add-note-section[data-v-1524dd4e]{padding-bottom:var(--b-spacer-090)}.b-timeline__items[data-v-1524dd4e]{all:unset}.b-timeline-item[data-v-4427ba30]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;list-style-type:none;max-width:500px}.b-timeline-item[data-v-4427ba30],.b-timeline-item[data-v-4427ba30]:before,.b-timeline-item[data-v-4427ba30]:after{box-sizing:border-box}.b-timeline-item *[data-v-4427ba30],.b-timeline-item *[data-v-4427ba30]:before,.b-timeline-item *[data-v-4427ba30]:after{box-sizing:border-box}.b-timeline-item[data-v-4427ba30] ::-webkit-scrollbar{height:14px;width:14px}.b-timeline-item[data-v-4427ba30] ::-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-timeline-item__row[data-v-4427ba30]{display:flex;gap:var(--b-spacer-070)}.b-timeline-item__marker[data-v-4427ba30]{display:flex;flex-flow:column;max-width:16px;width:100%}.b-timeline-item__separator[data-v-4427ba30]{flex-grow:1;position:relative}.b-timeline-item__separator[data-v-4427ba30]:before{background-color:var(--b-color-separator-secondary);content:"";height:100%;left:50%;position:absolute;transform:translate(-50%);width:1px}.b-timeline-item__icon[data-v-4427ba30]{color:var(--b-color-label-primary);margin:var(--b-spacer-010) 0}.b-timeline-item__icon--grey[data-v-4427ba30]{color:var(--b-color-decorative-grey)}.b-timeline-item__icon--blue[data-v-4427ba30]{color:var(--b-color-decorative-blue)}.b-timeline-item__icon--green[data-v-4427ba30]{color:var(--b-color-decorative-green)}.b-timeline-item__icon--yellow[data-v-4427ba30]{color:var(--b-color-decorative-yellow)}.b-timeline-item__icon--orange[data-v-4427ba30]{color:var(--b-color-decorative-orange)}.b-timeline-item__icon--red[data-v-4427ba30]{color:var(--b-color-decorative-red)}.b-timeline-item__icon--timegap[data-v-4427ba30]{border-bottom:var(--b-border-width-s) solid var(--b-color-separator-secondary);border-top:var(--b-border-width-s) solid var(--b-color-separator-secondary);margin:var(--b-spacer-030) auto;padding-bottom:var(--b-spacer-030);width:9px}.b-timeline-item__content[data-v-4427ba30]{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;padding-bottom:var(--b-spacer-100)}.b-timeline-item__title[data-v-4427ba30]{color:var(--b-color-label-primary);margin-bottom:var(--b-spacer-010)}.b-timeline-item__timestamp[data-v-4427ba30]{align-items:baseline;color:var(--b-color-label-secondary);column-gap:var(--b-spacer-030);display:flex;flex-wrap:wrap}.b-timeline-item__timestamp[data-v-4427ba30] .b-date{color:var(--b-color-label-secondary)}.b-timeline-item__description[data-v-4427ba30]{color:var(--b-color-label-primary);margin-top:var(--b-spacer-050)}.b-timeline-item__data-list[data-v-4427ba30]{margin-top:var(--b-spacer-050);width:100%}.b-timeline-item__tag[data-v-4427ba30]{margin-top:var(--b-spacer-050)}.b-timeline-item__timegap[data-v-4427ba30]{color:var(--b-color-label-secondary)}.b-timeline-item--note .b-timeline-item__description[data-v-4427ba30]{margin-top:unset}.b-timeline-item--note .b-timeline-item__timestamp[data-v-4427ba30]{margin-top:var(--b-spacer-050)}.b-timeline-item:last-of-type .b-timeline-item__row:last-of-type .b-timeline-item__content[data-v-4427ba30]{padding-bottom:0}

package/dist/assets/toggle.css

@@ -1 +1 @@
-.b-toggle[data-v-94574583]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;color:var(--b-color-label-primary);cursor:pointer;display:flex;-webkit-user-select:none;user-select:none;width:auto}.b-toggle[data-v-94574583],.b-toggle[data-v-94574583]:before,.b-toggle[data-v-94574583]:after{box-sizing:border-box}.b-toggle *[data-v-94574583],.b-toggle *[data-v-94574583]:before,.b-toggle *[data-v-94574583]:after{box-sizing:border-box}.b-toggle[data-v-94574583] ::-webkit-scrollbar{height:14px;width:14px}.b-toggle[data-v-94574583] ::-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-toggle--disabled[data-v-94574583]{cursor:not-allowed;display:flex}.b-toggle--readonly[data-v-94574583]{pointer-events:none}.b-toggle--label-first[data-v-94574583]{align-items:flex-start;flex-direction:row-reverse;justify-content:flex-end}.b-toggle__input[data-v-94574583]{cursor:inherit;opacity:0;position:absolute}.b-toggle__track[data-v-94574583]{align-items:center;background-color:var(--b-color-background-primary);border:1px solid var(--b-color-outline-tertiary);border-radius:var(--b-border-radius-xl);display:flex;height:20px;min-width:36px;padding:var(--b-spacer-010) var(--b-spacer-020);position:relative}.b-toggle__input:focus-visible+.b-toggle__track[data-v-94574583]{animation:outer-ring-default-94574583 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-94574583{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-toggle__input:hover:enabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary-hover)}.b-toggle__input:active:enabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-primary-active);border-color:var(--b-color-outline-tertiary-active)}.b-toggle__input:disabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-secondary);border-color:var(--b-color-outline-disabled);cursor:not-allowed}.b-toggle--readonly .b-toggle__input+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-secondary);border-color:var(--b-color-outline-disabled)}.b-toggle__input:checked+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-inverse-primary);border:0;padding:var(--b-spacer-010)}.b-toggle__input:checked:hover:enabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-inverse-primary-hover)}.b-toggle__input:checked:active:enabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-inverse-primary-active)}.b-toggle__input:checked:disabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-disabled)}.b-toggle--readonly .b-toggle__input:checked+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-disabled)}.b-toggle__handle[data-v-94574583]{background-color:var(--b-color-background-inverse-primary);border-radius:var(--b-border-radius-l);color:var(--b-color-label-primary);display:inline-flex;height:12px;place-content:center center;transition:transform var(--b-animation-duration-moderate) var(--b-animation-easing-standard);width:12px}.b-toggle__input:disabled+* .b-toggle__handle[data-v-94574583]{background-color:var(--b-color-label-disabled);cursor:not-allowed}.b-toggle__input:checked+* .b-toggle__handle[data-v-94574583]{background-color:var(--b-color-background-primary);height:16px;transform:translate(100%);width:16px}.b-toggle__input:checked:disabled+* .b-toggle__handle[data-v-94574583]{background-color:var(--b-color-background-disabled);color:var(--b-color-label-disabled);cursor:not-allowed}.b-toggle--readonly .b-toggle__input:checked+* .b-toggle__handle[data-v-94574583]{background-color:var(--b-color-background-disabled)}.b-toggle__label-container[data-v-94574583]{display:flex;flex-direction:column;padding-left:var(--b-spacer-070)}.b-toggle--label-first>.b-toggle__label-container[data-v-94574583]{padding-left:0;padding-right:var(--b-spacer-070)}.b-toggle__label[data-v-94574583]{vertical-align:baseline}.b-toggle__description[data-v-94574583]{color:var(--b-color-label-secondary);padding-top:var(--b-spacer-020)}
+.b-toggle[data-v-94574583]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;color:var(--b-color-label-primary);cursor:pointer;display:flex;-webkit-user-select:none;user-select:none;width:auto}.b-toggle[data-v-94574583],.b-toggle[data-v-94574583]:before,.b-toggle[data-v-94574583]:after{box-sizing:border-box}.b-toggle *[data-v-94574583],.b-toggle *[data-v-94574583]:before,.b-toggle *[data-v-94574583]:after{box-sizing:border-box}.b-toggle[data-v-94574583] ::-webkit-scrollbar{height:14px;width:14px}.b-toggle[data-v-94574583] ::-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-toggle--disabled[data-v-94574583]{cursor:not-allowed;display:flex}.b-toggle--readonly[data-v-94574583]{pointer-events:none}.b-toggle--label-first[data-v-94574583]{align-items:flex-start;flex-direction:row-reverse;justify-content:flex-end}.b-toggle__input[data-v-94574583]{cursor:inherit;opacity:0;position:absolute}.b-toggle__track[data-v-94574583]{align-items:center;background-color:var(--b-color-background-primary);border:1px solid var(--b-color-outline-tertiary);border-radius:var(--b-border-radius-xl);display:flex;height:20px;min-width:36px;padding:var(--b-spacer-010) var(--b-spacer-020);position:relative}.b-toggle__input:focus-visible+.b-toggle__track[data-v-94574583]{animation:outer-ring-default-94574583 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-94574583{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-toggle__input:hover:enabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary-hover)}.b-toggle__input:active:enabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-primary-active);border-color:var(--b-color-outline-tertiary-active)}.b-toggle__input:disabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-secondary);border-color:var(--b-color-outline-disabled);cursor:not-allowed}.b-toggle--readonly .b-toggle__input+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-secondary);border-color:var(--b-color-outline-disabled)}.b-toggle__input:checked+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-inverse-primary);border:0;padding:var(--b-spacer-010)}.b-toggle__input:checked:hover:enabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-inverse-primary-hover)}.b-toggle__input:checked:active:enabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-inverse-primary-active)}.b-toggle__input:checked:disabled+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-disabled)}.b-toggle--readonly .b-toggle__input:checked+.b-toggle__track[data-v-94574583]{background-color:var(--b-color-background-disabled)}.b-toggle__handle[data-v-94574583]{background-color:var(--b-color-background-inverse-primary);border-radius:var(--b-border-radius-l);color:var(--b-color-label-primary);display:inline-flex;height:12px;place-content:center center;transition:transform var(--b-animation-duration-moderate) var(--b-animation-easing-standard);width:12px}.b-toggle__input:disabled+* .b-toggle__handle[data-v-94574583]{background-color:var(--b-color-label-disabled);cursor:not-allowed}.b-toggle--readonly .b-toggle__input:enabled:not(:checked)+* .b-toggle__handle[data-v-94574583]{background-color:var(--b-color-label-primary)}.b-toggle__input:checked+* .b-toggle__handle[data-v-94574583]{background-color:var(--b-color-background-primary);height:16px;transform:translate(100%);width:16px}.b-toggle__input:checked:disabled+* .b-toggle__handle[data-v-94574583]{background-color:var(--b-color-background-disabled);color:var(--b-color-label-disabled);cursor:not-allowed}.b-toggle--readonly .b-toggle__input:checked+* .b-toggle__handle[data-v-94574583]{background-color:var(--b-color-background-disabled)}.b-toggle__label-container[data-v-94574583]{display:flex;flex-direction:column;padding-left:var(--b-spacer-070)}.b-toggle--label-first>.b-toggle__label-container[data-v-94574583]{padding-left:0;padding-right:var(--b-spacer-070)}.b-toggle__label[data-v-94574583]{vertical-align:baseline}.b-toggle__description[data-v-94574583]{color:var(--b-color-label-secondary);padding-top:var(--b-spacer-020)}

package/dist/button.js

@@ -1,6 +1,6 @@
 import { B as n, a as B, b as a } from "./chunks/button.tsTeQRcP.js";
 import { a as s } from "./chunks/ai-button.qEaHYybv.js";
-import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.CdetBz3J.js";
+import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.B332AjJp.js";
 import { B as A, a as L, b as d } from "./chunks/button-actions.types.BptAXjD8.js";
 export {
   s as BentoAiButton,

package/dist/card.js

@@ -1,4 +1,4 @@
-import { c as o, B as r, a as t } from "./chunks/card.BhhC01dV.js";
+import { c as o, B as r, a as t } from "./chunks/card.CW8CUymm.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.CnuIUi4-.js";
-import { B as n, a as x } from "./chunks/checkbox-group.C-1v4X3c.js";
+import { B as a, a as t } from "./chunks/checkbox.D-S3f_zM.js";
+import { B as n, a as x } from "./chunks/checkbox-group.4OUTLAFJ.js";
 export {
   a as BentoCheckbox,
   t as BentoCheckboxEvent,

package/dist/chunks/{action-bar.D29UQHoA.js → action-bar.DCknEWYe.js}

@@ -2,13 +2,13 @@ import { defineComponent as q, useSlots as Q, computed as s, ref as c, toRefs as
 import { B as Z } from "./button.tsTeQRcP.js";
 import { B as H } from "./typography.Cd386LC_.js";
 import { B as ee } from "./loading-indicator.PxbRzshH.js";
-import { B as ne } from "./button-actions-with-menu.1vZJWN1K.js";
+import { B as ne } from "./button-actions-with-menu.DnzDde3w.js";
 import { C as te } from "./cross.szJ_ZUTI.js";
 import { C as ae } from "./checkmark-circle-fill.Ds9Mwqpi.js";
 import { C as se } from "./cross-circle-fill.D3dEmLeQ.js";
 import { u as oe } from "./index.CPOlyau9.js";
 import { b as ie } from "./index.CL3TXc0a.js";
-import { P as re, B as ce } from "./button-actions.CdetBz3J.js";
+import { P as re, B as ce } from "./button-actions.B332AjJp.js";
 import { n as le } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/action-bar.css";
 const ue = {
@@ -222,4 +222,4 @@ const Le = pe.exports;
 export {
   Le as B
 };
-//# sourceMappingURL=action-bar.D29UQHoA.js.map
+//# sourceMappingURL=action-bar.DCknEWYe.js.map

package/dist/chunks/{action-bar.D29UQHoA.js.map → action-bar.DCknEWYe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.D29UQHoA.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"showCloseButton\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n\n                        <bento-typography\n                            v-if=\"showSelectionLabel()\"\n                            el=\"span\"\n                            stronger\n                            class=\"b-action-bar__selection\"\n                        >\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n\n                            <template v-else>\n                                <slot\n                                    v-if=\"!isConfirmationVariant && hasSelectionLabelSlot()\"\n                                    name=\"selectionLabel\"\n                                    :item-counter=\"itemCounter\"\n                                    :label=\"label\"\n                                />\n\n                                <template v-else>\n                                    {{ n(itemCounter) }}\n                                    {{ computedSelectionLabel }}\n                                </template>\n                            </template>\n                        </bento-typography>\n\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import {\n        computed,\n        nextTick,\n        type PropType,\n        provide,\n        ref,\n        toRefs,\n        type TransitionProps,\n        useSlots,\n        watch,\n    } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * Determines whether the close button is displayed in the `default` variant.\n         */\n        dismissible: {\n            type: Boolean,\n            default: true,\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection in the `default` variant, e.g. 'selected'/'changed'.\n         * Pass `null` to hide it. In the `confirmation` variant, this prop is ignored.\n         */\n        selectionLabel: {\n            type: String,\n            default: undefined,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\", \"undo-action\", \"retry-action\", \"cancel-action\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const slots = useSlots();\n\n    const hasSelectionLabelSlot = () => Boolean(slots.selectionLabel);\n\n    const label = computed(() => (props.selectionLabel === undefined ? t('selected') : props.selectionLabel));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n    const computedSelectionLabel = computed(() =>\n        isConfirmationVariant.value ? tc('unsavedChanges', props.itemCounter) : label.value\n    );\n    const showCloseButton = computed(() => !isConfirmationVariant.value && props.dismissible !== false);\n    const showSelectionLabel = () =>\n        isConfirmationVariant.value || hasSelectionLabelSlot() || props.selectionLabel !== null;\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-action-bar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","slots","useSlots","hasSelectionLabelSlot","label","computed","props","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","computedSelectionLabel","showCloseButton","showSelectionLabel","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;GA+bIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApTAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA0FA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,GAAA,GACAC,IAAAC,EAAA,GAEAC,IAAA,MAAA,EAAAF,EAAA,gBAEAG,IAAAC,EAAA,MAAAC,EAAA,mBAAA,SAAAT,EAAA,UAAA,IAAAS,EAAA,cAAA,GAEAC,IAAAF,EAAA,MAAA;AACI,cAAAC,EAAA,OAAA;AAAA,QAAqB,KAAA;AAEb,iBAAAT,EAAA,UAAA;AAAA,QAAmB,KAAA;AAEnB,iBAAAA,EAAA,SAAA;AAAA,QAAkB,KAAA;AAElB,iBAAAA,EAAA,oBAAA;AAAA,QAA6B;AAE7B,iBAAA;AAAA,MAAO;AAAA,IACf,CAAA,GAIJW,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,EAAA,GAEAI,IAAAR;AAAA,MAA4B,MAAAC,EAAA,UAAA,YAAA,WAAA;AAAA,IACsB,GAGlDQ,IAAAT;AAAA,MAAyB,MAAAC,EAAA,UAAA,aAAAA,EAAA,UAAA,aAAA,CAAAA,EAAA;AAAA,IACmD,GAG5ES,IAAA,CAAAC,MAAA;AACI,MAAAV,EAAA,UAAA,cAIAI,EAAA,QAAA,GAAAM,EAAA,WAAA,MACAL,EAAA,QAAA;AAAA,IAAuB,GAG3BM,IAAA,CAAAD,MAAA;AACI,UAAAV,EAAA,UAAA;AACI;AAIJ,aAAA,OAAAU,EAAA,OAAA,EAAA,OAAA,QAAA,UAAA,OAAA,CAAA;AACA,YAAAE,IAAAF,EAAA;AAGA,aAAA,OAAAA,EAAA,OAAA,EAAA,OAAA,QAAA,UAAAN,EAAA,MAAA,CAAA,GAEA,sBAAA,MAAA;AACI,QAAAA,EAAA,QAAA,GAAAQ,CAAA;AAAA,MAAqC,CAAA;AAAA,IACxC,GAGLC,IAAA,MAAA;AACI,MAAAT,EAAA,QAAA,MACAC,EAAA,QAAA,MAEAL,EAAA,UAAA,WACIM,EAAA,QAAA;AAAA,IACJ,GAGJQ,IAAA,CAAAC,MAAA;AACI,MAAAA,EAAA,cAAA,WAAA,QAAA,MACIT,EAAA,QAAA;AAAA,IACJ,GAGJ,EAAA,oBAAAU,GAAA,gBAAAC,EAAA,IAAAC,EAAAlB,CAAA,GACA,EAAA,OAAAmB,EAAA,IAAAC,GAAA,GACAC,IAAAlB,EAAA,IAAA,GACAmB,IAAAnB,EAAA,IAAA,GAEAoB,IAAAxB,EAAA,MAAAC,EAAA,YAAA,cAAA,GACAwB,IAAAzB;AAAA,MAA+B,MAAAwB,EAAA,QAAA/B,EAAA,kBAAAQ,EAAA,WAAA,IAAAF,EAAA;AAAA,IACmD,GAElF2B,IAAA1B,EAAA,MAAA,CAAAwB,EAAA,SAAAvB,EAAA,gBAAA,EAAA,GACA0B,IAAA,MAAAH,EAAA,SAAA1B,EAAA,KAAAG,EAAA,mBAAA;AAGA,IAAA2B;AAAA,MAAA,MAAAV,EAAA;AAAA,MACyB,CAAAW,MAAA;AAEjB,QAAAN,EAAA,QAAAM,KAAA,IAAAA,IAAA,GACAP,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAO,IAAA9B,EAAA,OAAA;AAAA,MAA2C,+BAAAiB,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,MACE,wCAAAjB,EAAA;AAAA,IACF,EAAA,GAGtDwB,IAAA/B,EAAA,OAAA;AAAA,MAAyC,CAAA,4BAAAC,EAAA,KAAA,EAAA,GAAAA,EAAA,UAAA;AAAA,IACwB,EAAA;AAIjE,IAAA+B,EAAAC,IAAA5C,CAAA;AAGA,UAAA6C,IAAAlC,EAAA,MAAA;AAEI,YAAAmC,IAAAlC,EAAA,QAAA,IAAA,CAAAmC,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAb,EAAA,KAAA,EAAA,QAAA,GACAgB,IAAAH,EAAA,MAAAb,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAe,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAvC,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAR,EAAA,MAAA;AAAA,QACmB,OAAA,MAAAgD,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAAhD,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAAgD,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAGJC,IAAAzC,EAAA,MACIC,EAAA,eAAA,QAAAA,EAAA,cAAA,CAAwD,GAI5DyC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAvB,EAAA,QAAAjB,EAAA,MAAA,cAAAZ,IAAAH,KAAAkC,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAoB,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAvB,EAAA,QAAAjB,EAAA,MAAA,cAAAZ,KAAA+B,EAAA,QAAA,MACIA,EAAA,SAAA,GACAsB,EAAA;AAAA,IACJ;AAIJ,WAAAhB;AAAA,MAAA,MAAAR,EAAA;AAAA,MACgB,OAAAyB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAxC,EAAA;AACI;AAEJ,cAAA4C,IAAAF,IAAAC;AACA,QAAA1B,EAAA,QAAA9B,IACIgC,EAAA,QAAA,IAAiCyB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"action-bar.DCknEWYe.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"showCloseButton\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n\n                        <bento-typography\n                            v-if=\"showSelectionLabel()\"\n                            el=\"span\"\n                            stronger\n                            class=\"b-action-bar__selection\"\n                        >\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n\n                            <template v-else>\n                                <slot\n                                    v-if=\"!isConfirmationVariant && hasSelectionLabelSlot()\"\n                                    name=\"selectionLabel\"\n                                    :item-counter=\"itemCounter\"\n                                    :label=\"label\"\n                                />\n\n                                <template v-else>\n                                    {{ n(itemCounter) }}\n                                    {{ computedSelectionLabel }}\n                                </template>\n                            </template>\n                        </bento-typography>\n\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import {\n        computed,\n        nextTick,\n        type PropType,\n        provide,\n        ref,\n        toRefs,\n        type TransitionProps,\n        useSlots,\n        watch,\n    } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * Determines whether the close button is displayed in the `default` variant.\n         */\n        dismissible: {\n            type: Boolean,\n            default: true,\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection in the `default` variant, e.g. 'selected'/'changed'.\n         * Pass `null` to hide it. In the `confirmation` variant, this prop is ignored.\n         */\n        selectionLabel: {\n            type: String,\n            default: undefined,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\", \"undo-action\", \"retry-action\", \"cancel-action\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const slots = useSlots();\n\n    const hasSelectionLabelSlot = () => Boolean(slots.selectionLabel);\n\n    const label = computed(() => (props.selectionLabel === undefined ? t('selected') : props.selectionLabel));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n    const computedSelectionLabel = computed(() =>\n        isConfirmationVariant.value ? tc('unsavedChanges', props.itemCounter) : label.value\n    );\n    const showCloseButton = computed(() => !isConfirmationVariant.value && props.dismissible !== false);\n    const showSelectionLabel = () =>\n        isConfirmationVariant.value || hasSelectionLabelSlot() || props.selectionLabel !== null;\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-action-bar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","slots","useSlots","hasSelectionLabelSlot","label","computed","props","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","computedSelectionLabel","showCloseButton","showSelectionLabel","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}

package/dist/chunks/{ai-tag.BLi-Xoh_.js → ai-tag.DfnRfKPR.js}

@@ -1,5 +1,5 @@
 import { defineComponent as u, ref as n, watch as f, computed as _ } from "vue";
-import { u as v, c as m, h as I } from "./button-actions.CdetBz3J.js";
+import { u as v, c as m, h as I } from "./button-actions.B332AjJp.js";
 import { B as A } from "./typography.Cd386LC_.js";
 import "./index.Cl4_42j5.js";
 import { u as x } from "./index.CPOlyau9.js";
@@ -78,4 +78,4 @@ const F = P.exports;
 export {
   F as a
 };
-//# sourceMappingURL=ai-tag.BLi-Xoh_.js.map
+//# sourceMappingURL=ai-tag.DfnRfKPR.js.map

package/dist/chunks/{ai-tag.BLi-Xoh_.js.map → ai-tag.DfnRfKPR.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-tag.BLi-Xoh_.js","sources":["../../src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  title: null,\n  description: null,\n  influencedValue: { default: undefined },\n  toggled: { type: Boolean, default: false },\n  action: { default: undefined }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits([\"update:toggled\"]);\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","useI18n","toggled","ref","props","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","onToggle","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAuIIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBA/DA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAC,EAAA,OAAA,GACAC,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,CAAAM,MAAA;AAER,QAAAR,EAAA,QAAAQ;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAV,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAKVW,IAAA,CAAAL,MAAA;AACI,MAAAR,EAAA,QAAAQ,GACAM,EAAA,kBAAAN,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAV,EAAA,SACIa,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-tag.DfnRfKPR.js","sources":["../../src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  title: null,\n  description: null,\n  influencedValue: { default: undefined },\n  toggled: { type: Boolean, default: false },\n  action: { default: undefined }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits([\"update:toggled\"]);\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","useI18n","toggled","ref","props","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","onToggle","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAuIIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBA/DA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAC,EAAA,OAAA,GACAC,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,CAAAM,MAAA;AAER,QAAAR,EAAA,QAAAQ;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAV,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAKVW,IAAA,CAAAL,MAAA;AACI,MAAAR,EAAA,QAAAQ,GACAM,EAAA,kBAAAN,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAV,EAAA,SACIa,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{alert.BddJPWMN.js → alert.DNS4RH4N.js}

@@ -1,52 +1,35 @@
-import { getCurrentInstance as u, defineComponent as m, useSlots as y, computed as c, onMounted as w } from "vue";
-import { c as C, a as S, B as b } from "./typography.Cd386LC_.js";
-import { B as T } from "./button.tsTeQRcP.js";
+import { getCurrentInstance as m, defineComponent as v, useSlots as y, computed as c, onMounted as S } from "vue";
+import { c as l, a as b, B as T } from "./typography.Cd386LC_.js";
+import { B as w } from "./button.tsTeQRcP.js";
 import { C as H } from "./cross-small.B9l4YLVX.js";
+import { W as L } from "./warning-filled.DI6aB6vH.js";
+import { C as B } from "./cross-circle-fill.D3dEmLeQ.js";
+import { C as E } from "./checkmark-circle-fill.Ds9Mwqpi.js";
 /* empty css              */
-import { n as a } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as L } from "./cross-circle-fill.D3dEmLeQ.js";
-import { C as B } from "./checkmark-circle-fill.Ds9Mwqpi.js";
-import { u as $ } from "./use-has-slot.C9lQZ6nz.js";
-import { u as x } from "./index.CPOlyau9.js";
+import { n as C } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as R } from "./use-has-slot.C9lQZ6nz.js";
+import { u as G } from "./index.CPOlyau9.js";
 import "../assets/alert.css";
-var i = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.TIP = "tip", o))(i || {}), n = /* @__PURE__ */ ((o) => (o.WARNING = "warning", o.CRITICAL = "critical", o.HIGHLIGHT = "highlight", o.SUCCESS = "success", o))(n || {}), _ = /* @__PURE__ */ ((o) => (o.CLOSE_ALERT = "close-alert", o))(_ || {});
-const E = {
-  __name: "warning-filled",
-  setup(o) {
-    const t = u(), s = String(t?.uid ?? t?.proxy?._uid);
-    return { __sfc: !0, instance: t, uuid: s };
-  }
-};
-var R = function() {
-  var t = this, s = t._self._c;
-  return t._self._setupProxy, s("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#001222", d: "M5.72456 2.45856C6.84306 0.797505 9.35301 0.852915 10.3789 2.62457L15 10.6246C16.0585 12.4537 14.7382 14.7493 12.6201 14.7496H3.37984C1.26177 14.7493 -0.0573711 12.4537 1.00093 10.6246L5.62105 2.62457L5.72456 2.45856ZM8.20991 10.3492C8.02 10.3092 7.80975 10.3298 7.62984 10.4097C7.44993 10.4897 7.28964 10.61 7.17964 10.7798C7.06984 10.9397 7.00984 11.1397 7.00972 11.3394C7.00972 11.6092 7.11997 11.8594 7.29976 12.0494C7.48973 12.2394 7.73976 12.3394 8.00972 12.3394L7.99995 12.3297C8.19979 12.3296 8.38964 12.2696 8.55952 12.1597C8.71947 12.0497 8.84966 11.8895 8.92964 11.7095C9.00952 11.5296 9.03016 11.3293 8.99019 11.1295C8.95014 10.9396 8.85955 10.7596 8.71968 10.6197C8.57975 10.4799 8.39975 10.3792 8.20991 10.3492ZM7.24995 4.57965V9.07965H8.74995V4.57965H7.24995Z" } })]);
-}, F = [], G = /* @__PURE__ */ a(
-  E,
-  R,
-  F,
-  !1,
-  null,
-  null
-);
-const V = G.exports, P = {
+var i = /* @__PURE__ */ ((s) => (s.DEFAULT = "default", s.TIP = "tip", s))(i || {}), n = /* @__PURE__ */ ((s) => (s.WARNING = "warning", s.CRITICAL = "critical", s.HIGHLIGHT = "highlight", s.SUCCESS = "success", s))(n || {}), u = /* @__PURE__ */ ((s) => (s.CLOSE_ALERT = "close-alert", s))(u || {});
+const x = {
   __name: "info-filled",
-  setup(o) {
-    const t = u(), s = String(t?.uid ?? t?.proxy?._uid);
-    return { __sfc: !0, instance: t, uuid: s };
+  setup(s) {
+    const t = m(), o = String(t?.uid ?? t?.proxy?._uid);
+    return { __sfc: !0, instance: t, uuid: o };
   }
 };
-var M = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("g", { attrs: { "clip-path": "url(#uia-ui-assets/icons-16-info_filled__a" + e.uuid + ")" } }, [s("path", { attrs: { fill: "#001222", "fill-rule": "evenodd", d: "M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z", "clip-rule": "evenodd" } })]), s("defs", [s("clipPath", { attrs: { id: "uia-ui-assets/icons-16-info_filled__a" + e.uuid } }, [s("rect", { attrs: { width: "16", height: "16", fill: "#fff" } })])])]);
-}, A = [], W = /* @__PURE__ */ a(
-  P,
-  M,
-  A,
+var F = function() {
+  var t = this, o = t._self._c, e = t._self._setupProxy;
+  return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("g", { attrs: { "clip-path": "url(#uia-ui-assets/icons-16-info_filled__a" + e.uuid + ")" } }, [o("path", { attrs: { fill: "#001222", "fill-rule": "evenodd", d: "M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z", "clip-rule": "evenodd" } })]), o("defs", [o("clipPath", { attrs: { id: "uia-ui-assets/icons-16-info_filled__a" + e.uuid } }, [o("rect", { attrs: { width: "16", height: "16", fill: "#fff" } })])])]);
+}, $ = [], V = /* @__PURE__ */ C(
+  x,
+  F,
+  $,
   !1,
   null,
   null
 );
-const N = W.exports, Z = {
+const P = V.exports, A = {
   "de-DE": { close: "Schließen", criticalIcon: "Kritisches Symbol", highlightIcon: "Symbol hervorheben", successIcon: "Erfolgssymbol", warningIcon: "Warnungssymbol" },
   "en-GB": { close: "Close", criticalIcon: "Critical icon", highlightIcon: "Highlight icon", successIcon: "Success icon", warningIcon: "Warning icon" },
   "en-US": { close: "Close", criticalIcon: "Critical icon", highlightIcon: "Highlight icon", successIcon: "Success icon", warningIcon: "Warning icon" },
@@ -58,63 +41,62 @@ const N = W.exports, Z = {
   "ja-JP": { close: "閉じる", criticalIcon: "重大アイコン", highlightIcon: "ハイライトアイコン", successIcon: "成功アイコン", warningIcon: "警告アイコン" },
   "pt-BR": { close: "Fechar", criticalIcon: "Ícone crítico", highlightIcon: "Ícone de destaque", successIcon: "Ícone de sucesso", warningIcon: "Ícone de aviso" },
   "zh-CN": { close: "关闭", criticalIcon: "关键图标", highlightIcon: "高亮图标", successIcon: "成功图标", warningIcon: "警告图标" }
-}, k = {
-  i18n: { messages: Z },
+}, W = {
+  i18n: { messages: A },
   name: "bento-alert"
-}, D = /* @__PURE__ */ m({
-  ...k,
+}, N = /* @__PURE__ */ v({
+  ...W,
   props: {
     closeButton: { type: Boolean, default: !1 },
     type: { default: n.HIGHLIGHT },
     variant: { default: i.DEFAULT }
   },
   emits: ["close-alert"],
-  setup(o, { emit: t }) {
-    const s = o, e = y(), d = $(e), { t: l } = x(), r = c(() => s.variant === i.TIP), I = c(() => ({
-      [`b-alert--${s.type}`]: s.type,
-      [`b-alert--${i.TIP}`]: r.value
-    })), p = c(() => l(`${s.type}Icon`)), g = c(() => {
-      switch (s.type) {
+  setup(s, { emit: t }) {
+    const o = s, e = y(), d = R(e), { t: r } = G(), a = c(() => o.variant === i.TIP), I = c(() => ({
+      [`b-alert--${o.type}`]: o.type,
+      [`b-alert--${i.TIP}`]: a.value
+    })), _ = c(() => r(`${o.type}Icon`)), p = c(() => {
+      switch (o.type) {
         case n.CRITICAL:
-          return L;
-        case n.SUCCESS:
           return B;
+        case n.SUCCESS:
+          return E;
         case n.WARNING:
-          return V;
+          return L;
         case n.HIGHLIGHT:
         default:
-          return N;
+          return P;
       }
     }), h = c(() => ({
-      el: S.DIV,
-      variant: r.value ? C.CAPTION : C.BODY,
+      el: b.DIV,
+      variant: a.value ? l.CAPTION : l.BODY,
       wide: !0
-    })), f = c(() => s.type === n.HIGHLIGHT ? "status" : "alert"), v = () => {
-      t(_.CLOSE_ALERT);
+    })), g = c(() => o.type === n.HIGHLIGHT ? "status" : "alert"), f = () => {
+      t(u.CLOSE_ALERT);
     };
-    return w(() => {
+    return S(() => {
       if (!e.default && !e.description)
         throw new Error("Alert Component requires a title or a description");
-    }), { __sfc: !0, slots: e, hasSlot: d, emit: t, props: s, t: l, isTipVariant: r, alertConditionalClasses: I, iconSvgTitle: p, iconComponent: g, descriptionTypography: h, computedRole: f, onCloseButtonClick: v, BentoTypography: b, BentoButton: T, CrossSmall: H };
+    }), { __sfc: !0, slots: e, hasSlot: d, emit: t, props: o, t: r, isTipVariant: a, alertConditionalClasses: I, iconSvgTitle: _, iconComponent: p, descriptionTypography: h, computedRole: g, onCloseButtonClick: f, BentoTypography: T, BentoButton: w, CrossSmall: H };
   }
 });
-var U = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("div", { staticClass: "b-alert", attrs: { role: e.computedRole } }, [s("div", { staticClass: "b-alert__inner-container", class: e.alertConditionalClasses }, [s("div", { staticClass: "b-alert__icon" }, [s(e.iconComponent, { tag: "component", attrs: { "aria-hidden": "true", "svg-title": e.iconSvgTitle } })], 1), s("div", { staticClass: "b-alert__content" }, [e.hasSlot("default") && !e.isTipVariant ? s(e.BentoTypography, { staticClass: "b-alert__title", attrs: { el: "div", variant: "body", strongest: "", wide: "" } }, [t._t("default")], 2) : t._e(), e.hasSlot("description") ? s(e.BentoTypography, t._b({ staticClass: "b-alert__description", attrs: { "data-testid": "alert-description" } }, "bento-typography", e.descriptionTypography, !1), [t._t("description")], 2) : t._e(), e.hasSlot("actions") && !e.isTipVariant ? s("div", { staticClass: "b-alert__actions", attrs: { "data-testid": "alert-actions" } }, [t._t("actions")], 2) : t._e()], 1), t.closeButton ? s(e.BentoButton, { staticClass: "b-alert__close-button", attrs: { variant: "tertiary", type: "button" }, on: { click: e.onCloseButtonClick } }, [s(e.CrossSmall, { attrs: { "svg-title": e.t("close") } })], 1) : t._e()], 1)]);
-}, z = [], q = /* @__PURE__ */ a(
+var k = function() {
+  var t = this, o = t._self._c, e = t._self._setupProxy;
+  return o("div", { staticClass: "b-alert", attrs: { role: e.computedRole } }, [o("div", { staticClass: "b-alert__inner-container", class: e.alertConditionalClasses }, [o("div", { staticClass: "b-alert__icon" }, [o(e.iconComponent, { tag: "component", attrs: { "aria-hidden": "true", "svg-title": e.iconSvgTitle } })], 1), o("div", { staticClass: "b-alert__content" }, [e.hasSlot("default") && !e.isTipVariant ? o(e.BentoTypography, { staticClass: "b-alert__title", attrs: { el: "div", variant: "body", strongest: "", wide: "" } }, [t._t("default")], 2) : t._e(), e.hasSlot("description") ? o(e.BentoTypography, t._b({ staticClass: "b-alert__description", attrs: { "data-testid": "alert-description" } }, "bento-typography", e.descriptionTypography, !1), [t._t("description")], 2) : t._e(), e.hasSlot("actions") && !e.isTipVariant ? o("div", { staticClass: "b-alert__actions", attrs: { "data-testid": "alert-actions" } }, [t._t("actions")], 2) : t._e()], 1), t.closeButton ? o(e.BentoButton, { staticClass: "b-alert__close-button", attrs: { variant: "tertiary", type: "button" }, on: { click: e.onCloseButtonClick } }, [o(e.CrossSmall, { attrs: { "svg-title": e.t("close") } })], 1) : t._e()], 1)]);
+}, D = [], M = /* @__PURE__ */ C(
+  N,
+  k,
   D,
-  U,
-  z,
   !1,
   null,
   "a8d6af45"
 );
-const ot = q.exports;
+const tt = M.exports;
 export {
-  ot as B,
-  V as W,
-  _ as a,
+  tt as B,
+  u as a,
   n as b,
   i as c
 };
-//# sourceMappingURL=alert.BddJPWMN.js.map
+//# sourceMappingURL=alert.DNS4RH4N.js.map

package/dist/chunks/alert.DNS4RH4N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.DNS4RH4N.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated Since v3.0.0. Use `@close-alert` instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#001222\" fill-rule=\"evenodd\" d=\"M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","instance","getCurrentInstance","uuid","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;;;;AChBZ,UAAAE,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GCmIIG,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAnB,EAAA,GAAA,GAEAoB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAnB,EAAA,GAAA,EAAA,GAAAiB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAjB,EAAA;AAEZ,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAEP,iBAAAuB;AAAA,QAAO,KAAAvB,EAAA;AAAA,QACe;AAEtB,iBAAAwB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAjB,EAAA,YAAA,WAAA,OAAA,GAEA6B,IAAA,MAAA;AACI,MAAAC,EAAA5B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA6B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{anchor-scroller.Clb_9RNz.js → anchor-scroller.BQc3CyTV.js}

@@ -7,7 +7,7 @@ import { u as k } from "./utils.DWmc2mUI.js";
 import { u as B, s as F, a as R } from "./scroll-to-section.CzeBpNj4.js";
 import { B as w } from "./button.tsTeQRcP.js";
 import { n as b } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { F as N } from "./fixed-scroller.CHmrgoTQ.js";
+import { F as N } from "./fixed-scroller.CkoOFRzH.js";
 import "../assets/anchor-scroller.css";
 const O = /* @__PURE__ */ f({
   __name: "anchor-scroller-list",
@@ -117,4 +117,4 @@ const ee = G.exports;
 export {
   ee as a
 };
-//# sourceMappingURL=anchor-scroller.Clb_9RNz.js.map
+//# sourceMappingURL=anchor-scroller.BQc3CyTV.js.map