@adyen/bento-vue2 2.0.1 → 2.1.1

package/dist/assets/textarea.css

@@ -1 +1 @@
-.b-textarea[data-v-37961b3b]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent}.b-textarea[data-v-37961b3b],.b-textarea[data-v-37961b3b]:before,.b-textarea[data-v-37961b3b]:after{box-sizing:border-box}.b-textarea *[data-v-37961b3b],.b-textarea *[data-v-37961b3b]:before,.b-textarea *[data-v-37961b3b]:after{box-sizing:border-box}.b-textarea[data-v-37961b3b] ::-webkit-scrollbar{height:14px;width:14px}.b-textarea[data-v-37961b3b] ::-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-37961b3b]{display:flex;justify-content:space-between;min-width:200px}.b-textarea__label-box--no-label[data-v-37961b3b]{justify-content:flex-end}.b-textarea__label-item[data-v-37961b3b]{color:var(--b-color-label-secondary)}.b-textarea__label-item--error[data-v-37961b3b]{color:var(--b-color-label-critical)}.b-textarea__input-box[data-v-37961b3b]{margin-bottom:var(--b-spacer-040);position:relative}.b-textarea__input[data-v-37961b3b]{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-37961b3b]{scrollbar-width:none}.b-textarea__input--error[data-v-37961b3b]{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-37961b3b]: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-37961b3b]:focus-visible{box-shadow:none}.b-textarea__input[data-v-37961b3b]:hover:enabled{border-color:var(--b-color-outline-tertiary-active);outline:unset}.b-textarea__input[data-v-37961b3b]: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-37961b3b]:disabled::placeholder{background:transparent}.b-textarea__input[data-v-37961b3b]::placeholder{color:var(--b-color-label-tertiary);opacity:1}.b-textarea__input--readonly[data-v-37961b3b]{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}.b-textarea__input--readonly[data-v-37961b3b]:hover:enabled{border-color:var(--b-color-outline-disabled)}.b-textarea__input--clearable[data-v-37961b3b]{padding:var(--b-spacer-060) var(--b-spacer-110) var(--b-spacer-040) var(--b-spacer-060)}.b-textarea__clear-button[data-v-37961b3b]{position:absolute;right:12px;top:12px}.b-textarea__description[data-v-37961b3b]{color:var(--b-color-label-secondary);display:flex;margin-top:var(--b-spacer-020)}.b-textarea--disabled *[data-v-37961b3b]{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}.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}

package/dist/assets/toggle.css

@@ -1 +1 @@
-.b-toggle[data-v-334f1395]{-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-334f1395],.b-toggle[data-v-334f1395]:before,.b-toggle[data-v-334f1395]:after{box-sizing:border-box}.b-toggle *[data-v-334f1395],.b-toggle *[data-v-334f1395]:before,.b-toggle *[data-v-334f1395]:after{box-sizing:border-box}.b-toggle[data-v-334f1395] ::-webkit-scrollbar{height:14px;width:14px}.b-toggle[data-v-334f1395] ::-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-334f1395]{cursor:not-allowed;display:flex}.b-toggle--readonly[data-v-334f1395]{pointer-events:none}.b-toggle--label-first[data-v-334f1395]{align-items:flex-start;flex-direction:row-reverse;justify-content:flex-end}.b-toggle__input[data-v-334f1395]{cursor:inherit;opacity:0;position:absolute}.b-toggle__track[data-v-334f1395]{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-334f1395]{animation:outer-ring-default-334f1395 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-334f1395{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-334f1395]{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-334f1395]{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-334f1395]{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-334f1395]{background-color:var(--b-color-background-secondary);border-color:var(--b-color-outline-disabled)}.b-toggle__input:checked+.b-toggle__track[data-v-334f1395]{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-334f1395]{background-color:var(--b-color-background-inverse-primary-hover)}.b-toggle__input:checked:active:enabled+.b-toggle__track[data-v-334f1395]{background-color:var(--b-color-background-inverse-primary-active)}.b-toggle__input:checked:disabled+.b-toggle__track[data-v-334f1395]{background-color:var(--b-color-background-disabled)}.b-toggle--readonly .b-toggle__input:checked+.b-toggle__track[data-v-334f1395]{background-color:var(--b-color-background-disabled)}.b-toggle__handle[data-v-334f1395]{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-334f1395]{background-color:var(--b-color-label-disabled);cursor:not-allowed}.b-toggle__input:checked+* .b-toggle__handle[data-v-334f1395]{background-color:var(--b-color-background-primary);height:16px;transform:translate(100%);width:16px}.b-toggle__input:checked:disabled+* .b-toggle__handle[data-v-334f1395]{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-334f1395]{background-color:var(--b-color-background-disabled)}.b-toggle__label-container[data-v-334f1395]{display:flex;flex-direction:column;padding-left:var(--b-spacer-070)}.b-toggle--label-first>.b-toggle__label-container[data-v-334f1395]{padding-left:0;padding-right:var(--b-spacer-070)}.b-toggle__label[data-v-334f1395]{vertical-align:baseline}.b-toggle__description[data-v-334f1395]{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__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/assets/typography.css

@@ -1 +1 @@
-.b-typography[data-v-33897a3a]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;margin:0;font-variant-numeric:var(--b-text-font-variant-numeric)}.b-typography[data-v-33897a3a],.b-typography[data-v-33897a3a]:before,.b-typography[data-v-33897a3a]:after{box-sizing:border-box}.b-typography *[data-v-33897a3a],.b-typography *[data-v-33897a3a]:before,.b-typography *[data-v-33897a3a]:after{box-sizing:border-box}.b-typography[data-v-33897a3a] ::-webkit-scrollbar{height:14px;width:14px}.b-typography[data-v-33897a3a] ::-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-typography--rich-text[data-v-33897a3a]>:first-child{margin-top:0}.b-typography--rich-text h1[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h1{font-family:var(--b-text-title-l-font-family);font-size:var(--b-text-title-l-mobile-font-size);font-size:clamp(var(--b-text-title-l-mobile-font-size),.44vw + 18.34px,var(--b-text-title-l-font-size));font-weight:var(--b-text-title-l-font-weight);letter-spacing:var(--b-text-title-l-letter-spacing);line-height:clamp(var(--b-text-title-l-mobile-line-height),.44vw + 28.34px,var(--b-text-title-l-line-height))}.b-typography--rich-text h2[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h2{font-family:var(--b-text-title-m-font-family);font-size:clamp(var(--b-text-title-m-mobile-font-size),.22vw + 17.17px,var(--b-text-title-m-font-size));font-weight:var(--b-text-title-m-font-weight);letter-spacing:var(--b-text-title-m-letter-spacing);line-height:clamp(var(--b-text-title-m-mobile-line-height),.22vw + 27.17px,var(--b-text-title-m-line-height))}.b-typography--rich-text h3[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h3{font-family:var(--b-text-title-font-family);font-size:clamp(var(--b-text-title-mobile-font-size),16px,var(--b-text-title-font-size));font-weight:var(--b-text-title-font-weight);letter-spacing:var(--b-text-title-letter-spacing);line-height:clamp(var(--b-text-title-mobile-line-height),26px,var(--b-text-title-line-height))}.b-typography--rich-text h4[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h4,.b-typography--rich-text h5[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h5,.b-typography--rich-text h6[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h6{font-family:var(--b-text-body-font-family);font-size:var(--b-text-body-font-size);font-weight:var(--b-text-body-font-weight);letter-spacing:var(--b-text-body-letter-spacing);line-height:var(--b-text-body-line-height);font-weight:var(--b-text-rich-text-heading-font-weight)}.b-typography--rich-text h1[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h1,.b-typography--rich-text h2[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h2,.b-typography--rich-text h3[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h3,.b-typography--rich-text h4[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h4,.b-typography--rich-text h5[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h5,.b-typography--rich-text h6[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] h6{margin:var(--b-text-rich-text-heading-margin)}.b-typography--rich-text p[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] p{margin:var(--b-text-rich-text-paragraph-margin)}.b-typography--rich-text ul[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] ul,.b-typography--rich-text ol[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] ol{margin:0;padding-left:var(--b-text-rich-text-list-padding-left)}.b-typography--rich-text li[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] li{margin:var(--b-text-rich-text-list-margin)}.b-typography--rich-text ul li[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] ul li{list-style-type:disc}.b-typography--rich-text pre[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] pre{background-color:var(--b-text-rich-text-code-background-color);font-family:var(--b-text-rich-text-code-font-family);font-weight:var(--b-text-rich-text-code-font-weight);line-height:var(--b-text-rich-text-pre-line-height);margin:var(--b-text-rich-text-pre-margin);padding:var(--b-text-rich-text-pre-padding)}.b-typography--rich-text code[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] code{background-color:var(--b-text-rich-text-code-background-color);font-family:var(--b-text-rich-text-code-font-family);font-weight:var(--b-text-rich-text-code-font-weight)}.b-typography--rich-text mark[data-v-33897a3a]{background-color:var(--b-text-rich-text-mark-background-color)}.b-typography--rich-text[data-v-33897a3a] mark{background-color:var(--b-text-rich-text-mark-background-color)}.b-typography--rich-text blockquote[data-v-33897a3a],.b-typography--rich-text[data-v-33897a3a] blockquote{font-style:italic;font-weight:var(--b-text-rich-text-blockquote-font-weight);margin:var(--b-text-rich-text-blockquote-margin)}.b-typography--rich-text table[data-v-33897a3a]{border-collapse:collapse;border-spacing:0;line-height:var(--b-text-rich-text-table-line-height);margin:var(--b-text-rich-text-table-margin);text-align:left}.b-typography--rich-text table th[data-v-33897a3a]{font-weight:var(--b-text-rich-text-table-header-font-weight)}.b-typography--rich-text table thead[data-v-33897a3a]{border-bottom:var(--b-text-rich-text-table-border)}.b-typography--rich-text table tfoot[data-v-33897a3a]{border-top:var(--b-text-rich-text-table-border)}.b-typography--rich-text table th[data-v-33897a3a],.b-typography--rich-text table td[data-v-33897a3a]{padding:var(--b-text-rich-text-table-padding)}.b-typography--rich-text table tbody tr[data-v-33897a3a]:hover{background-color:var(--b-text-rich-text-table-hover-background-color)}.b-typography--rich-text table caption[data-v-33897a3a]{font-style:italic;line-height:var(--b-text-rich-text-table-caption-line-height);margin:var(--b-text-rich-text-table-caption-margin);text-align:left}.b-typography--rich-text[data-v-33897a3a] table{border-collapse:collapse;border-spacing:0;line-height:var(--b-text-rich-text-table-line-height);margin:var(--b-text-rich-text-table-margin);text-align:left}.b-typography--rich-text[data-v-33897a3a] table th{font-weight:var(--b-text-rich-text-table-header-font-weight)}.b-typography--rich-text[data-v-33897a3a] table thead{border-bottom:var(--b-text-rich-text-table-border)}.b-typography--rich-text[data-v-33897a3a] table tfoot{border-top:var(--b-text-rich-text-table-border)}.b-typography--rich-text[data-v-33897a3a] table th,.b-typography--rich-text[data-v-33897a3a] table td{padding:var(--b-text-rich-text-table-padding)}.b-typography--rich-text[data-v-33897a3a] table tbody tr:hover{background-color:var(--b-text-rich-text-table-hover-background-color)}.b-typography--rich-text[data-v-33897a3a] table caption{font-style:italic;line-height:var(--b-text-rich-text-table-caption-line-height);margin:var(--b-text-rich-text-table-caption-margin);text-align:left}.b-typography--rich-text.b-typography--caption p[data-v-33897a3a],.b-typography--rich-text.b-typography--caption[data-v-33897a3a] p{margin:var(--b-text-rich-text-caption-paragraph-margin)}.b-typography--rich-text.b-typography--caption ul[data-v-33897a3a],.b-typography--rich-text.b-typography--caption[data-v-33897a3a] ul,.b-typography--rich-text.b-typography--caption ol[data-v-33897a3a],.b-typography--rich-text.b-typography--caption[data-v-33897a3a] ol{padding-left:var(--b-text-rich-text-caption-list-padding-left)}.b-typography--rich-text.b-typography--caption li[data-v-33897a3a],.b-typography--rich-text.b-typography--caption[data-v-33897a3a] li{margin:var(--b-text-rich-text-caption-list-margin)}.b-typography--rich-text.b-typography--caption blockquote[data-v-33897a3a],.b-typography--rich-text.b-typography--caption[data-v-33897a3a] blockquote{margin:var(--b-text-rich-text-caption-blockquote-margin)}.b-typography--rich-text.b-typography--caption table th[data-v-33897a3a],.b-typography--rich-text.b-typography--caption[data-v-33897a3a] table th,.b-typography--rich-text.b-typography--caption table td[data-v-33897a3a],.b-typography--rich-text.b-typography--caption[data-v-33897a3a] table td{padding:var(--b-text-rich-text-caption-table-padding)}.b-typography--rich-text.b-typography--caption pre[data-v-33897a3a],.b-typography--rich-text.b-typography--caption[data-v-33897a3a] pre{line-height:var(--b-text-rich-text-caption-pre-line-height)}.b-typography--caption[data-v-33897a3a]{font-family:var(--b-text-caption-font-family);font-size:var(--b-text-caption-font-size);font-weight:var(--b-text-caption-font-weight);letter-spacing:var(--b-text-caption-letter-spacing);line-height:var(--b-text-caption-line-height)}.b-typography--caption.b-typography--monospace[data-v-33897a3a]{font-family:var(--b-text-caption-font-family-secondary)}.b-typography--caption-wide[data-v-33897a3a]{line-height:var(--b-text-caption-wide-line-height)}.b-typography--caption-stronger[data-v-33897a3a]{font-weight:var(--b-text-caption-stronger-font-weight)}.b-typography--body[data-v-33897a3a]{font-family:var(--b-text-body-font-family);font-size:var(--b-text-body-font-size);font-weight:var(--b-text-body-font-weight);letter-spacing:var(--b-text-body-letter-spacing);line-height:var(--b-text-body-line-height)}.b-typography--body.b-typography--monospace[data-v-33897a3a]{font-family:var(--b-text-body-font-family-secondary)}.b-typography--body-wide[data-v-33897a3a]{line-height:var(--b-text-body-wide-line-height)}.b-typography--body-stronger[data-v-33897a3a]{font-weight:var(--b-text-body-stronger-font-weight)}.b-typography--body-strongest[data-v-33897a3a]{font-weight:var(--b-text-body-strongest-font-weight)}.b-typography--subtitle[data-v-33897a3a]{font-family:var(--b-text-subtitle-font-family);font-size:var(--b-text-subtitle-font-size);font-weight:var(--b-text-subtitle-font-weight);letter-spacing:var(--b-text-subtitle-letter-spacing);line-height:var(--b-text-subtitle-line-height)}.b-typography--subtitle.b-typography--monospace[data-v-33897a3a]{font-family:var(--b-text-title-font-family-secondary)}.b-typography--subtitle-stronger[data-v-33897a3a]{font-weight:var(--b-text-subtitle-stronger-font-weight)}.b-typography--title[data-v-33897a3a]{font-family:var(--b-text-title-font-family);font-size:clamp(var(--b-text-title-mobile-font-size),16px,var(--b-text-title-font-size));font-weight:var(--b-text-title-font-weight);letter-spacing:var(--b-text-title-letter-spacing);line-height:clamp(var(--b-text-title-mobile-line-height),26px,var(--b-text-title-line-height))}.b-typography--title.b-typography--monospace[data-v-33897a3a]{font-family:var(--b-text-title-font-family-secondary)}.b-typography--title-m[data-v-33897a3a]{font-family:var(--b-text-title-m-font-family);font-size:clamp(var(--b-text-title-m-mobile-font-size),.22vw + 17.17px,var(--b-text-title-m-font-size));font-weight:var(--b-text-title-m-font-weight);letter-spacing:var(--b-text-title-m-letter-spacing);line-height:clamp(var(--b-text-title-m-mobile-line-height),.22vw + 27.17px,var(--b-text-title-m-line-height))}.b-typography--title-m.b-typography--monospace[data-v-33897a3a]{font-family:var(--b-text-title-font-family-secondary)}.b-typography--title-l[data-v-33897a3a]{font-family:var(--b-text-title-l-font-family);font-size:var(--b-text-title-l-mobile-font-size);font-size:clamp(var(--b-text-title-l-mobile-font-size),.44vw + 18.34px,var(--b-text-title-l-font-size));font-weight:var(--b-text-title-l-font-weight);letter-spacing:var(--b-text-title-l-letter-spacing);line-height:clamp(var(--b-text-title-l-mobile-line-height),.44vw + 28.34px,var(--b-text-title-l-line-height))}.b-typography--title-l.b-typography--monospace[data-v-33897a3a]{font-family:var(--b-text-title-font-family-secondary)}
+.b-typography[data-v-a3728f5f]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--b-color-label-tertiary) transparent;margin:0;font-variant-numeric:var(--b-text-font-variant-numeric)}.b-typography[data-v-a3728f5f],.b-typography[data-v-a3728f5f]:before,.b-typography[data-v-a3728f5f]:after{box-sizing:border-box}.b-typography *[data-v-a3728f5f],.b-typography *[data-v-a3728f5f]:before,.b-typography *[data-v-a3728f5f]:after{box-sizing:border-box}.b-typography[data-v-a3728f5f] ::-webkit-scrollbar{height:14px;width:14px}.b-typography[data-v-a3728f5f] ::-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-typography--rich-text[data-v-a3728f5f]>:first-child{margin-top:0}.b-typography--rich-text h1[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h1{font-family:var(--b-text-title-l-font-family);font-size:var(--b-text-title-l-mobile-font-size);font-size:clamp(var(--b-text-title-l-mobile-font-size),.44vw + 18.34px,var(--b-text-title-l-font-size));font-weight:var(--b-text-title-l-font-weight);letter-spacing:var(--b-text-title-l-letter-spacing);line-height:clamp(var(--b-text-title-l-mobile-line-height),.44vw + 28.34px,var(--b-text-title-l-line-height))}.b-typography--rich-text h2[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h2{font-family:var(--b-text-title-m-font-family);font-size:clamp(var(--b-text-title-m-mobile-font-size),.22vw + 17.17px,var(--b-text-title-m-font-size));font-weight:var(--b-text-title-m-font-weight);letter-spacing:var(--b-text-title-m-letter-spacing);line-height:clamp(var(--b-text-title-m-mobile-line-height),.22vw + 27.17px,var(--b-text-title-m-line-height))}.b-typography--rich-text h3[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h3{font-family:var(--b-text-title-font-family);font-size:clamp(var(--b-text-title-mobile-font-size),16px,var(--b-text-title-font-size));font-weight:var(--b-text-title-font-weight);letter-spacing:var(--b-text-title-letter-spacing);line-height:clamp(var(--b-text-title-mobile-line-height),26px,var(--b-text-title-line-height))}.b-typography--rich-text h4[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h4,.b-typography--rich-text h5[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h5,.b-typography--rich-text h6[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h6{font-family:var(--b-text-body-font-family);font-size:var(--b-text-body-font-size);font-weight:var(--b-text-body-font-weight);letter-spacing:var(--b-text-body-letter-spacing);line-height:var(--b-text-body-line-height);font-weight:var(--b-text-rich-text-heading-font-weight)}.b-typography--rich-text h1[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h1,.b-typography--rich-text h2[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h2,.b-typography--rich-text h3[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h3,.b-typography--rich-text h4[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h4,.b-typography--rich-text h5[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h5,.b-typography--rich-text h6[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] h6{margin:var(--b-text-rich-text-heading-margin)}.b-typography--rich-text p[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] p{margin:var(--b-text-rich-text-paragraph-margin)}.b-typography--rich-text ul[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] ul,.b-typography--rich-text ol[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] ol{margin:0;padding-left:var(--b-text-rich-text-list-padding-left)}.b-typography--rich-text li[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] li{margin:var(--b-text-rich-text-list-margin)}.b-typography--rich-text ul li[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] ul li{list-style-type:disc}.b-typography--rich-text pre[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] pre{background-color:var(--b-text-rich-text-code-background-color);font-family:var(--b-text-rich-text-code-font-family);font-weight:var(--b-text-rich-text-code-font-weight);line-height:var(--b-text-rich-text-pre-line-height);margin:var(--b-text-rich-text-pre-margin);padding:var(--b-text-rich-text-pre-padding)}.b-typography--rich-text code[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] code{background-color:var(--b-text-rich-text-code-background-color);font-family:var(--b-text-rich-text-code-font-family);font-weight:var(--b-text-rich-text-code-font-weight)}.b-typography--rich-text mark[data-v-a3728f5f]{background-color:var(--b-text-rich-text-mark-background-color);color:inherit}.b-typography--rich-text[data-v-a3728f5f] mark{background-color:var(--b-text-rich-text-mark-background-color);color:inherit}.b-typography--rich-text blockquote[data-v-a3728f5f],.b-typography--rich-text[data-v-a3728f5f] blockquote{font-style:italic;font-weight:var(--b-text-rich-text-blockquote-font-weight);margin:var(--b-text-rich-text-blockquote-margin)}.b-typography--rich-text table[data-v-a3728f5f]{border-collapse:collapse;border-spacing:0;line-height:var(--b-text-rich-text-table-line-height);margin:var(--b-text-rich-text-table-margin);text-align:left}.b-typography--rich-text table th[data-v-a3728f5f]{font-weight:var(--b-text-rich-text-table-header-font-weight)}.b-typography--rich-text table thead[data-v-a3728f5f]{border-bottom:var(--b-text-rich-text-table-border)}.b-typography--rich-text table tfoot[data-v-a3728f5f]{border-top:var(--b-text-rich-text-table-border)}.b-typography--rich-text table th[data-v-a3728f5f],.b-typography--rich-text table td[data-v-a3728f5f]{padding:var(--b-text-rich-text-table-padding)}.b-typography--rich-text table tbody tr[data-v-a3728f5f]:hover{background-color:var(--b-text-rich-text-table-hover-background-color)}.b-typography--rich-text table caption[data-v-a3728f5f]{font-style:italic;line-height:var(--b-text-rich-text-table-caption-line-height);margin:var(--b-text-rich-text-table-caption-margin);text-align:left}.b-typography--rich-text[data-v-a3728f5f] table{border-collapse:collapse;border-spacing:0;line-height:var(--b-text-rich-text-table-line-height);margin:var(--b-text-rich-text-table-margin);text-align:left}.b-typography--rich-text[data-v-a3728f5f] table th{font-weight:var(--b-text-rich-text-table-header-font-weight)}.b-typography--rich-text[data-v-a3728f5f] table thead{border-bottom:var(--b-text-rich-text-table-border)}.b-typography--rich-text[data-v-a3728f5f] table tfoot{border-top:var(--b-text-rich-text-table-border)}.b-typography--rich-text[data-v-a3728f5f] table th,.b-typography--rich-text[data-v-a3728f5f] table td{padding:var(--b-text-rich-text-table-padding)}.b-typography--rich-text[data-v-a3728f5f] table tbody tr:hover{background-color:var(--b-text-rich-text-table-hover-background-color)}.b-typography--rich-text[data-v-a3728f5f] table caption{font-style:italic;line-height:var(--b-text-rich-text-table-caption-line-height);margin:var(--b-text-rich-text-table-caption-margin);text-align:left}.b-typography--rich-text.b-typography--caption p[data-v-a3728f5f],.b-typography--rich-text.b-typography--caption[data-v-a3728f5f] p{margin:var(--b-text-rich-text-caption-paragraph-margin)}.b-typography--rich-text.b-typography--caption ul[data-v-a3728f5f],.b-typography--rich-text.b-typography--caption[data-v-a3728f5f] ul,.b-typography--rich-text.b-typography--caption ol[data-v-a3728f5f],.b-typography--rich-text.b-typography--caption[data-v-a3728f5f] ol{padding-left:var(--b-text-rich-text-caption-list-padding-left)}.b-typography--rich-text.b-typography--caption li[data-v-a3728f5f],.b-typography--rich-text.b-typography--caption[data-v-a3728f5f] li{margin:var(--b-text-rich-text-caption-list-margin)}.b-typography--rich-text.b-typography--caption blockquote[data-v-a3728f5f],.b-typography--rich-text.b-typography--caption[data-v-a3728f5f] blockquote{margin:var(--b-text-rich-text-caption-blockquote-margin)}.b-typography--rich-text.b-typography--caption table th[data-v-a3728f5f],.b-typography--rich-text.b-typography--caption[data-v-a3728f5f] table th,.b-typography--rich-text.b-typography--caption table td[data-v-a3728f5f],.b-typography--rich-text.b-typography--caption[data-v-a3728f5f] table td{padding:var(--b-text-rich-text-caption-table-padding)}.b-typography--rich-text.b-typography--caption pre[data-v-a3728f5f],.b-typography--rich-text.b-typography--caption[data-v-a3728f5f] pre{line-height:var(--b-text-rich-text-caption-pre-line-height)}.b-typography--caption[data-v-a3728f5f]{font-family:var(--b-text-caption-font-family);font-size:var(--b-text-caption-font-size);font-weight:var(--b-text-caption-font-weight);letter-spacing:var(--b-text-caption-letter-spacing);line-height:var(--b-text-caption-line-height)}.b-typography--caption.b-typography--monospace[data-v-a3728f5f]{font-family:var(--b-text-caption-font-family-secondary)}.b-typography--caption-wide[data-v-a3728f5f]{line-height:var(--b-text-caption-wide-line-height)}.b-typography--caption-stronger[data-v-a3728f5f]{font-weight:var(--b-text-caption-stronger-font-weight)}.b-typography--body[data-v-a3728f5f]{font-family:var(--b-text-body-font-family);font-size:var(--b-text-body-font-size);font-weight:var(--b-text-body-font-weight);letter-spacing:var(--b-text-body-letter-spacing);line-height:var(--b-text-body-line-height)}.b-typography--body.b-typography--monospace[data-v-a3728f5f]{font-family:var(--b-text-body-font-family-secondary)}.b-typography--body-wide[data-v-a3728f5f]{line-height:var(--b-text-body-wide-line-height)}.b-typography--body-stronger[data-v-a3728f5f]{font-weight:var(--b-text-body-stronger-font-weight)}.b-typography--body-strongest[data-v-a3728f5f]{font-weight:var(--b-text-body-strongest-font-weight)}.b-typography--subtitle[data-v-a3728f5f]{font-family:var(--b-text-subtitle-font-family);font-size:var(--b-text-subtitle-font-size);font-weight:var(--b-text-subtitle-font-weight);letter-spacing:var(--b-text-subtitle-letter-spacing);line-height:var(--b-text-subtitle-line-height)}.b-typography--subtitle.b-typography--monospace[data-v-a3728f5f]{font-family:var(--b-text-title-font-family-secondary)}.b-typography--subtitle-stronger[data-v-a3728f5f]{font-weight:var(--b-text-subtitle-stronger-font-weight)}.b-typography--title[data-v-a3728f5f]{font-family:var(--b-text-title-font-family);font-size:clamp(var(--b-text-title-mobile-font-size),16px,var(--b-text-title-font-size));font-weight:var(--b-text-title-font-weight);letter-spacing:var(--b-text-title-letter-spacing);line-height:clamp(var(--b-text-title-mobile-line-height),26px,var(--b-text-title-line-height))}.b-typography--title.b-typography--monospace[data-v-a3728f5f]{font-family:var(--b-text-title-font-family-secondary)}.b-typography--title-m[data-v-a3728f5f]{font-family:var(--b-text-title-m-font-family);font-size:clamp(var(--b-text-title-m-mobile-font-size),.22vw + 17.17px,var(--b-text-title-m-font-size));font-weight:var(--b-text-title-m-font-weight);letter-spacing:var(--b-text-title-m-letter-spacing);line-height:clamp(var(--b-text-title-m-mobile-line-height),.22vw + 27.17px,var(--b-text-title-m-line-height))}.b-typography--title-m.b-typography--monospace[data-v-a3728f5f]{font-family:var(--b-text-title-font-family-secondary)}.b-typography--title-l[data-v-a3728f5f]{font-family:var(--b-text-title-l-font-family);font-size:var(--b-text-title-l-mobile-font-size);font-size:clamp(var(--b-text-title-l-mobile-font-size),.44vw + 18.34px,var(--b-text-title-l-font-size));font-weight:var(--b-text-title-l-font-weight);letter-spacing:var(--b-text-title-l-letter-spacing);line-height:clamp(var(--b-text-title-l-mobile-line-height),.44vw + 28.34px,var(--b-text-title-l-line-height))}.b-typography--title-l.b-typography--monospace[data-v-a3728f5f]{font-family:var(--b-text-title-font-family-secondary)}

package/dist/avatar.js

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

package/dist/button.js

@@ -1,6 +1,6 @@
-import { B as n, a as B, b as a } from "./chunks/button.DII5Ifwa.js";
-import { a as s } from "./chunks/ai-button.BnFk5CzK.js";
-import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.bkcLUE1G.js";
+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 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.BmpB0VbL.js";
+import { c as o, B as r, a as t } from "./chunks/card.BhhC01dV.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.D5xZ5Nnh.js";
-import { B as n, a as x } from "./chunks/checkbox-group.D1uyc3z3.js";
+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";
 export {
   a as BentoCheckbox,
   t as BentoCheckboxEvent,

package/dist/chip.js

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

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

@@ -1,6 +1,6 @@
 import { defineComponent as _, provide as I, toRef as b, ref as p, inject as h, computed as E, watch as l } from "vue";
 import { n as m } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as g } from "./typography.D1OZJbEa.js";
+import { B as g } from "./typography.Cd386LC_.js";
 import { C as y } from "./chevron-down.B_QiVCoO.js";
 import { C as T } from "./chevron-up.YQRo8uKs.js";
 import { g as d } from "./generate-uid.DBWe4g6T.js";
@@ -49,10 +49,10 @@ const L = B.exports, D = {
   "pt-BR": { collapse: "Recolher", expand: "Expandir" },
   "zh-CN": { collapse: "折叠", expand: "展开" }
 }, $ = {
-  i18n: { messages: D }
+  i18n: { messages: D },
+  name: "bento-accordion-item"
 }, M = /* @__PURE__ */ _({
   ...$,
-  __name: "accordion-item",
   props: {
     /**
      * Sets the title of the accordion item.
@@ -97,11 +97,11 @@ var H = function() {
   U,
   !1,
   null,
-  "117d4ec7"
+  "1f85d8ed"
 );
 const X = j.exports;
 export {
   L as a,
   X as b
 };
-//# sourceMappingURL=accordion-item.B7lteJBu.js.map
+//# sourceMappingURL=accordion-item.C158YxId.js.map

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

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

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

@@ -1,14 +1,14 @@
 import { defineComponent as q, useSlots as Q, computed as s, ref as c, toRefs as X, watch as k, provide as Y, nextTick as B } from "vue";
-import { B as Z } from "./button.DII5Ifwa.js";
-import { B as H } from "./typography.D1OZJbEa.js";
+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.BY394ars.js";
+import { B as ne } from "./button-actions-with-menu.1vZJWN1K.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.bkcLUE1G.js";
+import { P as re, B as ce } from "./button-actions.CdetBz3J.js";
 import { n as le } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/action-bar.css";
 const ue = {
@@ -24,10 +24,10 @@ const ue = {
   "pt-BR": { actionBar: "Barra de ação", applying: "Aplicando...", cancel: "Cancelar", close: "Fechar", retry: "Tentar de novo", save: "Salvar", selected: "selecionado", somethingWentWrong: "Algo deu errado", success: "Sucesso!", undo: "Desfazer", unsavedChanges: "Alterações não salvas | alteração não salva | alterações não salvas" },
   "zh-CN": { actionBar: "操作栏", applying: "申请...", cancel: "取消", close: "关闭", retry: "重试", save: "保存", selected: "已选", somethingWentWrong: "出了点问题", success: "成功！", undo: "撤销", unsavedChanges: "未保存的更改 | 未保存的更改 | 未保存的更改" }
 }, de = {
-  i18n: { messages: ue }
+  i18n: { messages: ue },
+  name: "bento-action-bar"
 }, ve = /* @__PURE__ */ q({
   ...de,
-  __name: "action-bar",
   props: {
     /**
      * List of actions that will be used to render the buttons.
@@ -126,12 +126,12 @@ const ue = {
         default:
           return "";
       }
-    }), g = c(null), u = c(null), _ = c(null), p = c(!1), T = s(
+    }), g = c(null), u = c(null), b = c(null), p = c(!1), T = s(
       () => t.state === "loading" ? "out-in" : void 0
     ), F = s(
       () => t.state === "loading" || t.state === "success" && !t.showUndoAction
     ), U = (a) => {
-      t.state === "loading" && (u.value = `${a.offsetWidth}px`, _.value = "100%");
+      t.state === "loading" && (u.value = `${a.offsetWidth}px`, b.value = "100%");
     }, N = (a) => {
       if (t.state !== "loading")
         return;
@@ -141,7 +141,7 @@ const ue = {
         u.value = `${m}px`;
       });
     }, O = () => {
-      u.value = null, _.value = null, t.state === "fail" && (p.value = !0);
+      u.value = null, b.value = null, t.state === "fail" && (p.value = !0);
     }, M = (a) => {
       a.animationName.startsWith("shake-") && (p.value = !1);
     }, { extraBottomSpacing: L, visibleActions: I } = X(t), { width: d } = ie(), o = c(null), h = c(null), v = s(() => t.variant === "confirmation"), P = s(
@@ -178,8 +178,8 @@ const ue = {
         variant: "secondary",
         event: () => n("cancel")
       }
-    ]), J = s(() => t.itemCounter == null || t.itemCounter < 1), b = async () => {
-      await B(), d.value > g.value.clientWidth + f + e && o.value < h.value && (o.value += 1, b());
+    ]), J = s(() => t.itemCounter == null || t.itemCounter < 1), _ = async () => {
+      await B(), d.value > g.value.clientWidth + f + e && o.value < h.value && (o.value += 1, _());
     }, C = async () => {
       await B(), d.value < g.value.clientWidth + f && o.value > 0 && (o.value -= 1, C());
     };
@@ -189,10 +189,10 @@ const ue = {
         if (await B(), !g.value)
           return;
         const y = a > m;
-        d.value < A ? o.value = 0 : y ? b() : C();
+        d.value < A ? o.value = 0 : y ? _() : C();
       },
       { immediate: !0 }
-    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: e, MENU_OFFSET: r, RESPONSIVE_BREAKPOINT: A, SPACING: f, props: t, emit: n, t: i, tc: S, n: x, slots: W, hasSelectionLabelSlot: w, label: E, defaultStateLabel: R, actionBar: g, containerMaxWidth: u, containerWidth: _, isShaking: p, stateTransitionMode: T, hideStateActions: F, onBeforeLeave: U, onEnter: N, onAfterEnter: O, onAnimationEnd: M, extraBottomSpacing: L, visibleActions: I, width: d, internalDisplayedActions: o, internalVisibleActions: h, isConfirmationVariant: v, computedSelectionLabel: P, showCloseButton: V, showSelectionLabel: $, conditionalClasses: z, containerClasses: D, actionsInternal: G, confirmationActions: j, noItemCounter: J, showActions: b, hideActions: C, BentoButton: Z, BentoButtonActions: ce, BentoTypography: H, BentoLoadingIndicator: ee, ButtonActionsWithMenu: ne, CrossIcon: te, CheckmarkCircleFill: ae, CrossCircleFill: se };
+    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: e, MENU_OFFSET: r, RESPONSIVE_BREAKPOINT: A, SPACING: f, props: t, emit: n, t: i, tc: S, n: x, slots: W, hasSelectionLabelSlot: w, label: E, defaultStateLabel: R, actionBar: g, containerMaxWidth: u, containerWidth: b, isShaking: p, stateTransitionMode: T, hideStateActions: F, onBeforeLeave: U, onEnter: N, onAfterEnter: O, onAnimationEnd: M, extraBottomSpacing: L, visibleActions: I, width: d, internalDisplayedActions: o, internalVisibleActions: h, isConfirmationVariant: v, computedSelectionLabel: P, showCloseButton: V, showSelectionLabel: $, conditionalClasses: z, containerClasses: D, actionsInternal: G, confirmationActions: j, noItemCounter: J, showActions: _, hideActions: C, BentoButton: Z, BentoButtonActions: ce, BentoTypography: H, BentoLoadingIndicator: ee, ButtonActionsWithMenu: ne, CrossIcon: te, CheckmarkCircleFill: ae, CrossCircleFill: se };
   }
 });
 var me = function() {
@@ -216,10 +216,10 @@ var me = function() {
   ge,
   !1,
   null,
-  "93b90274"
+  "63d0192b"
 );
 const Le = pe.exports;
 export {
   Le as B
 };
-//# sourceMappingURL=action-bar.BsXW7BI2.js.map
+//# sourceMappingURL=action-bar.D29UQHoA.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"action-bar.BsXW7BI2.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    };\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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"}
+{"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":"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"}

package/dist/chunks/{ai-button.BnFk5CzK.js → ai-button.qEaHYybv.js}

@@ -1,8 +1,8 @@
 import { defineComponent as r, useSlots as c, computed as u, onMounted as d } from "vue";
-import { B as p } from "./button.DII5Ifwa.js";
+import { B as p } from "./button.tsTeQRcP.js";
 import { A as f } from "./artificial-intelligence-ai-filled.BnsciZlb.js";
 import { u as _ } from "./use-has-slot.C9lQZ6nz.js";
-import { p as b } from "./typography.D1OZJbEa.js";
+import { p as b } from "./typography.Cd386LC_.js";
 import { n as m } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/ai-button.css";
 const v = {
@@ -48,4 +48,4 @@ const F = k.exports;
 export {
   F as a
 };
-//# sourceMappingURL=ai-button.BnFk5CzK.js.map
+//# sourceMappingURL=ai-button.qEaHYybv.js.map

package/dist/chunks/{ai-button.BnFk5CzK.js.map → ai-button.qEaHYybv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-button.BnFk5CzK.js","sources":["../../src/components/button/components/ai-button/ai-button.vue"],"sourcesContent":["<template>\n    <div class=\"b-ai-button\" :class=\"conditionalClass\">\n        <div class=\"b-ai-button__animation\" />\n\n        <bento-button\n            class=\"b-ai-button__button\"\n            :condensed=\"condensed\"\n            :disabled=\"disabled\"\n            :inverse=\"inverse\"\n            variant=\"secondary\"\n            @click.capture.stop=\"onClick\"\n        >\n            <template #iconLeft>\n                <ai-filled-icon aria-hidden=\"true\" class=\"b-ai-button__icon\" />\n            </template>\n\n            <slot></slot>\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import BentoButton from '../../button.vue';\n    import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAiButtonProps } from './ai-button.types';\n\n    const props = defineProps({\n  condensed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  inverse: { type: Boolean, default: false },\n  link: { default: undefined },\n  type: { default: 'button' }\n});\n\n    const emit = defineEmits([\"click\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClass = computed(() => ({\n        'b-ai-button--disabled': props.disabled,\n        'b-ai-button--inverse': props.inverse,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        emit('click', e);\n    };\n\n    onMounted(() => {\n        if (!hasSlot('default')) {\n            printDevelopmentWarning('An icon-only button cannot be a AI button');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * AI Button component is used for cases where pressing a button starts an AI-related action.\n     *\n     * @example\n     * import { BentoAiButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiButton },\n     *     template: `\n     *        <bento-ai-button @click=\"onClick\">Generate with AI</bento-ai-button>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-ai-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-button.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","props","onClick","e","emit","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AA2EI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBAtCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAC,EAAA;AAAA,MACN,wBAAAA,EAAA;AAAA,IACD,EAAA,GAGlCC,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAC,EAAA,SAAAD,CAAA;AAAA,IAAe;AAGnB,WAAAE,EAAA,MAAA;AACI,MAAAR,EAAA,SAAA,KACIS,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-button.qEaHYybv.js","sources":["../../src/components/button/components/ai-button/ai-button.vue"],"sourcesContent":["<template>\n    <div class=\"b-ai-button\" :class=\"conditionalClass\">\n        <div class=\"b-ai-button__animation\" />\n\n        <bento-button\n            class=\"b-ai-button__button\"\n            :condensed=\"condensed\"\n            :disabled=\"disabled\"\n            :inverse=\"inverse\"\n            variant=\"secondary\"\n            @click.capture.stop=\"onClick\"\n        >\n            <template #iconLeft>\n                <ai-filled-icon aria-hidden=\"true\" class=\"b-ai-button__icon\" />\n            </template>\n\n            <slot></slot>\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import BentoButton from '../../button.vue';\n    import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAiButtonProps } from './ai-button.types';\n\n    const props = defineProps({\n  condensed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  inverse: { type: Boolean, default: false },\n  link: { default: undefined },\n  type: { default: 'button' }\n});\n\n    const emit = defineEmits([\"click\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClass = computed(() => ({\n        'b-ai-button--disabled': props.disabled,\n        'b-ai-button--inverse': props.inverse,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        emit('click', e);\n    };\n\n    onMounted(() => {\n        if (!hasSlot('default')) {\n            printDevelopmentWarning('An icon-only button cannot be a AI button');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * AI Button component is used for cases where pressing a button starts an AI-related action.\n     *\n     * @example\n     * import { BentoAiButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiButton },\n     *     template: `\n     *        <bento-ai-button @click=\"onClick\">Generate with AI</bento-ai-button>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-ai-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-button.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","props","onClick","e","emit","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AA2EI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBAtCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAC,EAAA;AAAA,MACN,wBAAAA,EAAA;AAAA,IACD,EAAA,GAGlCC,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAC,EAAA,SAAAD,CAAA;AAAA,IAAe;AAGnB,WAAAE,EAAA,MAAA;AACI,MAAAR,EAAA,SAAA,KACIS,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 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.bkcLUE1G.js";
-import { B as A } from "./typography.D1OZJbEa.js";
+import { u as v, c as m, h as I } from "./button-actions.CdetBz3J.js";
+import { B as A } from "./typography.Cd386LC_.js";
 import "./index.Cl4_42j5.js";
 import { u as x } from "./index.CPOlyau9.js";
 import { g as y } from "./generate-uid.DBWe4g6T.js";
@@ -78,4 +78,4 @@ const F = P.exports;
 export {
   F as a
 };
-//# sourceMappingURL=ai-tag.D2Q0xhFK.js.map
+//# sourceMappingURL=ai-tag.BLi-Xoh_.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ai-tag.D2Q0xhFK.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.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;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 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.D1OZJbEa.js";
-import { B as T } from "./button.DII5Ifwa.js";
+import { c as C, a as S, B as b } from "./typography.Cd386LC_.js";
+import { B as T } from "./button.tsTeQRcP.js";
 import { C as H } from "./cross-small.B9l4YLVX.js";
 /* empty css              */
 import { n as a } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -117,4 +117,4 @@ export {
   n as b,
   i as c
 };
-//# sourceMappingURL=alert.DJDHwVeR.js.map
+//# sourceMappingURL=alert.BddJPWMN.js.map