@adyen/bento-vue3 1.87.1 → 1.88.0

package/dist/assets/modal-fullscreen.css

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

package/dist/assets/radio-input.css

@@ -1 +1 @@
-.b-radio-input[data-v-83888415]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:none;-moz-appearance:none;appearance:none;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-l);cursor:pointer;display:inline-block;height:16px;margin:0;min-height:16px;min-width:16px;outline:none;position:relative;top:var(--b-spacer-010);width:16px}.b-radio-input[data-v-83888415],.b-radio-input[data-v-83888415]:before,.b-radio-input[data-v-83888415]:after{box-sizing:border-box}.b-radio-input[data-v-83888415] *,.b-radio-input[data-v-83888415] *:before,.b-radio-input[data-v-83888415] *:after{box-sizing:border-box}.b-radio-input[data-v-83888415] ::-webkit-scrollbar{height:14px;width:14px}.b-radio-input[data-v-83888415] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-radio-input input[data-v-83888415]:disabled{cursor:inherit}.b-radio-input[data-v-83888415]:after{content:"";display:block;inset:calc(var(--b-spacer-020) * -1);position:absolute}.b-radio-input[data-v-83888415]:before{background-color:var(--b-color-label-inverse-primary);border-radius:var(--b-border-radius-l);content:"";display:block;height:8px;left:3px;opacity:0;position:absolute;top:3px;transform:scale(0);transition:transform var(--b-animation-duration-slow) var(--b-animation-easing-enter);width:8px}.b-radio-input[data-v-83888415]:hover:enabled{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary)}.b-radio-input[data-v-83888415]:active{background-color:var(--b-color-background-primary-active)}.b-radio-input[data-v-83888415]:focus-visible{animation:outer-ring-default-83888415 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-83888415{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-radio-input[data-v-83888415]:disabled{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);cursor:not-allowed}.b-radio-input[data-v-83888415]:disabled:before{background-color:var(--b-color-label-disabled)}.b-radio-input[data-v-83888415]:checked{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-radio-input[data-v-83888415]:checked:before{opacity:1;transform:scale(1)}.b-radio-input[data-v-83888415]:checked:disabled{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}.b-radio-input[data-v-83888415]:checked:active:not(:disabled){background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-radio-input[data-v-83888415]:checked:hover:not(:disabled){background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-radio-input--disabled[data-v-83888415]{cursor:not-allowed}.b-radio-input--error[data-v-83888415]{border:1.5px solid var(--b-color-outline-critical)}.b-radio-input--error[data-v-83888415]:before{left:2.5px;top:2.5px}.b-radio-input--error[data-v-83888415]:checked{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-radio-input--readonly[data-v-83888415]{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);pointer-events:none}.b-radio-input--readonly[data-v-83888415]:before{background-color:var(--b-color-label-primary)}.b-radio-input--readonly[data-v-83888415]:checked{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}
+.b-radio-input[data-v-31c4d5b7]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;display:flex;height:var(--b-text-body-line-height)}.b-radio-input[data-v-31c4d5b7],.b-radio-input[data-v-31c4d5b7]:before,.b-radio-input[data-v-31c4d5b7]:after{box-sizing:border-box}.b-radio-input[data-v-31c4d5b7] *,.b-radio-input[data-v-31c4d5b7] *:before,.b-radio-input[data-v-31c4d5b7] *:after{box-sizing:border-box}.b-radio-input[data-v-31c4d5b7] ::-webkit-scrollbar{height:14px;width:14px}.b-radio-input[data-v-31c4d5b7] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-radio-input input[data-v-31c4d5b7]:disabled{cursor:inherit}.b-radio-input__input[data-v-31c4d5b7]{-webkit-appearance:none;-moz-appearance:none;appearance:none;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-l);cursor:pointer;display:inline-block;height:16px;margin:0;min-height:16px;min-width:16px;outline:none;position:relative;width:16px}.b-radio-input__input[data-v-31c4d5b7]:after{content:"";display:block;inset:calc(var(--b-spacer-020) * -1);position:absolute}.b-radio-input__input[data-v-31c4d5b7]:before{background-color:var(--b-color-label-inverse-primary);border-radius:var(--b-border-radius-l);content:"";display:block;height:8px;left:3px;opacity:0;position:absolute;top:3px;transform:scale(0);transition:transform var(--b-animation-duration-slow) var(--b-animation-easing-enter);width:8px}.b-radio-input__input[data-v-31c4d5b7]:hover:enabled{background-color:var(--b-color-background-primary-hover);border-color:var(--b-color-outline-tertiary)}.b-radio-input__input[data-v-31c4d5b7]:active{background-color:var(--b-color-background-primary-active)}.b-radio-input__input[data-v-31c4d5b7]:focus-visible{animation:outer-ring-default-31c4d5b7 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-31c4d5b7{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-radio-input__input[data-v-31c4d5b7]:disabled{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);cursor:not-allowed}.b-radio-input__input[data-v-31c4d5b7]:disabled:before{background-color:var(--b-color-label-disabled)}.b-radio-input__input[data-v-31c4d5b7]:checked{background-color:var(--b-color-background-inverse-primary);border-color:var(--b-color-background-inverse-primary)}.b-radio-input__input[data-v-31c4d5b7]:checked:before{opacity:1;transform:scale(1)}.b-radio-input__input[data-v-31c4d5b7]:checked:disabled{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}.b-radio-input__input[data-v-31c4d5b7]:checked:active:not(:disabled){background-color:var(--b-color-background-inverse-primary-active);border-color:var(--b-color-background-inverse-primary-active)}.b-radio-input__input[data-v-31c4d5b7]:checked:hover:not(:disabled){background-color:var(--b-color-background-inverse-primary-hover);border-color:var(--b-color-background-inverse-primary-hover)}.b-radio-input__input--disabled[data-v-31c4d5b7]{cursor:not-allowed}.b-radio-input__input--error[data-v-31c4d5b7]{border:1.5px solid var(--b-color-outline-critical)}.b-radio-input__input--error[data-v-31c4d5b7]:before{left:2.5px;top:2.5px}.b-radio-input__input--error[data-v-31c4d5b7]:checked{background-color:var(--b-color-background-critical-strong);border-color:var(--b-color-outline-critical)}.b-radio-input__input--readonly[data-v-31c4d5b7]{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled);pointer-events:none}.b-radio-input__input--readonly[data-v-31c4d5b7]:before{background-color:var(--b-color-label-primary)}.b-radio-input__input--readonly[data-v-31c4d5b7]:checked{background-color:var(--b-color-background-disabled);border-color:var(--b-color-outline-disabled)}

package/dist/assets/sidepanel.css

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

package/dist/chunks/action-bar.BS2cJzG_.js

@@ -0,0 +1,355 @@
+import { defineComponent as ae, computed as l, ref as b, toRefs as ne, watch as T, provide as se, nextTick as w, openBlock as s, createBlock as r, Transition as x, withCtx as u, createElementVNode as O, unref as e, normalizeClass as R, createVNode as C, createElementBlock as m, normalizeStyle as oe, createCommentVNode as d, Fragment as F, createTextVNode as h, toDisplayString as f, renderSlot as ie } from "vue";
+import { B as p } from "./button.C6t9_lzm.js";
+import { B as P } from "./typography.B3J6_tYk.js";
+import { B as le } from "./loading-indicator.BPol9I84.js";
+import { B as ce } from "./button-actions-with-menu.Tba1ME79.js";
+import { C as re } from "./cross.CCHdi6v3.js";
+import { C as ue } from "./checkmark-circle-fill.DugX5fbG.js";
+import { C as de } from "./cross-circle-fill.BWCKKn0E.js";
+import { u as ve } from "./index.B875RXHM.js";
+import { u as me } from "./index.Dppy4qHk.js";
+import { P as fe, B as ye } from "./button-actions.BYBpjNqy.js";
+import { _ as be } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/action-bar.css";
+const V = {
+  "en-US": {
+    actionBar: "Action bar",
+    applying: "Applying...",
+    cancel: "Cancel",
+    close: "Close",
+    retry: "Retry",
+    save: "Save",
+    selected: "selected",
+    somethingWentWrong: "Something went wrong",
+    success: "Success!",
+    undo: "Undo",
+    unsavedChanges: "Unsaved changes | unsaved change | unsaved changes"
+  },
+  "ja-JP": {
+    actionBar: "アクションバー",
+    cancel: "キャンセル",
+    close: "閉じる",
+    save: "保存",
+    selected: "選択済み",
+    unsavedChanges: "保存されていない変更 | 保存されていない変更 | 保存されていない変更"
+  },
+  "pt-BR": {
+    actionBar: "Barra de ação",
+    cancel: "Cancelar",
+    close: "Fechar",
+    save: "Salvar",
+    selected: "selecionado",
+    unsavedChanges: "Alterações não salvas | alteração não salva | alterações não salvas"
+  }
+}, he = ["aria-label"], ge = {
+  key: 0,
+  class: "b-action-bar__container-inner"
+}, _e = {
+  key: 0,
+  class: "b-action-bar__close-button"
+}, Ce = {
+  key: 1,
+  class: "b-action-bar__container-inner"
+}, Be = { class: "b-action-bar__state-icon" }, Ae = {
+  key: 0,
+  class: "b-action-bar__state-actions"
+}, pe = {
+  i18n: { messages: V }
+}, ke = /* @__PURE__ */ ae({
+  ...pe,
+  __name: "action-bar",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * Required and used for the `default` variant.
+     *
+     * Each object in the list should have a `title`, an `event` and,
+     * optionally, an `icon`.
+     *
+     * The component will display 4 actions and the hide the rest inside a menu.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * How many actions should be visible outside the menu, cannot be more than 4
+     */
+    visibleActions: {
+      type: Number,
+      default: 4,
+      validator: (t) => t > 0 && t <= 4
+    },
+    /**
+     * Use when there are sticky elements at the bottom, like sticky pagination
+     */
+    extraBottomSpacing: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show how many items are selected.
+     * When omitted in the `confirmation` variant, a generic "Unsaved changes" label is displayed.
+     */
+    itemCounter: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Label for the selection, e.g. 'selected'/'changed'
+     */
+    selectionLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * State of the action bar.
+     * @values start, loading, success, fail
+     */
+    state: {
+      type: String,
+      default: "start"
+    },
+    /**
+     * Displays the undo action button in `success` state.
+     */
+    showUndoAction: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays the retry action button in `fail` state.
+     */
+    showRetryAction: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Variant for the action bar
+     * @values default, confirmation
+     */
+    variant: {
+      type: String,
+      default: "default"
+    }
+  },
+  emits: ["close", "cancel", "save", "undo-action", "retry-action", "cancel-action"],
+  setup(t, { emit: U }) {
+    const a = t, y = U, { t: i, tc: I, n: $ } = ve({ messages: V }), L = l(() => a.selectionLabel ? a.selectionLabel : i("selected")), G = l(() => {
+      switch (a.state) {
+        case "loading":
+          return i("applying");
+        case "success":
+          return i("success");
+        case "fail":
+          return i("somethingWentWrong");
+        default:
+          return "";
+      }
+    }), B = b(null), g = b(null), k = b(null), S = b(!1), M = l(
+      () => a.state === "loading" ? "out-in" : void 0
+    ), j = l(
+      () => a.state === "loading" || a.state === "success" && !a.showUndoAction
+    ), z = (n) => {
+      a.state === "loading" && (g.value = `${n.offsetWidth}px`, k.value = "100%");
+    }, K = (n) => {
+      if (a.state !== "loading")
+        return;
+      Object.assign(n.style, { width: "auto", maxWidth: "none" });
+      const o = n.offsetWidth;
+      Object.assign(n.style, { width: "100%", maxWidth: g.value }), requestAnimationFrame(() => {
+        g.value = `${o}px`;
+      });
+    }, D = () => {
+      g.value = null, k.value = null, a.state === "fail" && (S.value = !0);
+    }, J = (n) => {
+      n.animationName.startsWith("shake-") && (S.value = !1);
+    }, { extraBottomSpacing: Z, visibleActions: q } = ne(a), { width: A } = me(), c = b(null), E = b(null), _ = l(() => a.variant === "confirmation");
+    T(
+      () => q.value,
+      (n) => {
+        E.value = n <= 4 ? n : 4, c.value = E.value;
+      },
+      { immediate: !0 }
+    );
+    const Y = l(() => ({
+      "b-action-bar--extra-spacing": Z.value,
+      "b-action-bar--confirmation": _.value,
+      "b-action-bar__state-animation--shake": S.value
+    })), H = l(() => ({
+      [`b-action-bar__container--${a.state}`]: a.state !== "start"
+    }));
+    se(fe, 7);
+    const Q = l(() => {
+      const n = a.actions.map((te) => ({
+        ...te,
+        variant: "secondary"
+      })), o = n.slice(0, c.value).reverse(), v = n.slice(c.value);
+      return [...o, ...v];
+    }), X = l(() => [
+      {
+        title: i("save"),
+        event: () => y("save")
+      },
+      {
+        title: i("cancel"),
+        variant: "secondary",
+        event: () => y("cancel")
+      }
+    ]), ee = l(() => a.itemCounter == null || a.itemCounter < 1), N = async () => {
+      await w(), A.value > B.value.clientWidth + 32 + 100 && c.value < E.value && (c.value += 1, N());
+    }, W = async () => {
+      await w(), A.value < B.value.clientWidth + 32 && c.value > 0 && (c.value -= 1, W());
+    };
+    return T(
+      () => A.value,
+      async (n, o) => {
+        if (await w(), !B.value)
+          return;
+        const v = n > o;
+        A.value < 500 ? c.value = 0 : v ? N() : W();
+      },
+      { immediate: !0 }
+    ), (n, o) => (s(), r(x, {
+      name: "b-action-bar__animation",
+      appear: ""
+    }, {
+      default: u(() => [
+        O("section", {
+          class: R(["b-action-bar", Y.value]),
+          "aria-label": e(i)("actionBar"),
+          onAnimationend: J
+        }, [
+          C(x, {
+            name: `b-action-bar__state-animation--${t.state}`,
+            mode: M.value,
+            onBeforeLeave: z,
+            onEnter: K,
+            onAfterEnter: D
+          }, {
+            default: u(() => [
+              (s(), m("div", {
+                ref_key: "actionBar",
+                ref: B,
+                key: t.state,
+                class: R(["b-action-bar__container", H.value]),
+                style: oe({ width: k.value, maxWidth: g.value })
+              }, [
+                t.state === "start" ? (s(), m("div", ge, [
+                  _.value ? d("", !0) : (s(), m("div", _e, [
+                    C(e(p), {
+                      variant: "tertiary",
+                      inverse: "",
+                      "aria-label": e(i)("close"),
+                      onClick: o[0] || (o[0] = (v) => y("close"))
+                    }, {
+                      iconLeft: u(() => [
+                        C(e(re), { "aria-hidden": !0 })
+                      ]),
+                      _: 1
+                    }, 8, ["aria-label"])
+                  ])),
+                  C(e(P), {
+                    el: "span",
+                    stronger: "",
+                    class: "b-action-bar__selection"
+                  }, {
+                    default: u(() => [
+                      _.value && ee.value ? (s(), m(F, { key: 0 }, [
+                        h(f(e(I)("unsavedChanges", 0)), 1)
+                      ], 64)) : (s(), m(F, { key: 1 }, [
+                        h(f(e($)(t.itemCounter)) + " " + f(_.value ? e(I)("unsavedChanges", t.itemCounter) : L.value), 1)
+                      ], 64))
+                    ]),
+                    _: 1
+                  }),
+                  _.value ? (s(), r(e(ye), {
+                    key: 1,
+                    actions: X.value,
+                    class: "b-action-bar__actions",
+                    inverse: ""
+                  }, null, 8, ["actions"])) : (s(), r(ce, {
+                    key: 2,
+                    actions: Q.value,
+                    class: "b-action-bar__actions",
+                    "displayed-actions": c.value,
+                    "menu-position": "top-end",
+                    "disable-responsive-behavior": "",
+                    inverse: ""
+                  }, null, 8, ["actions", "displayed-actions"]))
+                ])) : (s(), m("div", Ce, [
+                  O("div", Be, [
+                    t.state === "loading" ? (s(), r(e(le), {
+                      key: 0,
+                      small: "",
+                      inverse: ""
+                    })) : d("", !0),
+                    t.state === "success" ? (s(), r(e(ue), {
+                      key: 1,
+                      "aria-hidden": !0
+                    })) : d("", !0),
+                    t.state === "fail" ? (s(), r(e(de), {
+                      key: 2,
+                      "aria-hidden": !0
+                    })) : d("", !0)
+                  ]),
+                  C(e(P), { stronger: "" }, {
+                    default: u(() => [
+                      ie(n.$slots, "stateLabel", {}, () => [
+                        h(f(G.value), 1)
+                      ], !0)
+                    ]),
+                    _: 3
+                  }),
+                  j.value ? d("", !0) : (s(), m("div", Ae, [
+                    t.state === "success" && t.showUndoAction ? (s(), r(e(p), {
+                      key: 0,
+                      variant: "tertiary",
+                      inverse: "",
+                      onClick: o[1] || (o[1] = (v) => y("undo-action"))
+                    }, {
+                      default: u(() => [
+                        h(f(e(i)("undo")), 1)
+                      ]),
+                      _: 1
+                    })) : d("", !0),
+                    t.state === "fail" && t.showRetryAction ? (s(), r(e(p), {
+                      key: 1,
+                      variant: "tertiary",
+                      inverse: "",
+                      onClick: o[2] || (o[2] = (v) => y("retry-action"))
+                    }, {
+                      default: u(() => [
+                        h(f(e(i)("retry")), 1)
+                      ]),
+                      _: 1
+                    })) : d("", !0),
+                    t.state === "fail" ? (s(), r(e(p), {
+                      key: 2,
+                      variant: "tertiary",
+                      inverse: "",
+                      onClick: o[3] || (o[3] = (v) => y("cancel-action"))
+                    }, {
+                      default: u(() => [
+                        h(f(e(i)("cancel")), 1)
+                      ]),
+                      _: 1
+                    })) : d("", !0)
+                  ]))
+                ]))
+              ], 6))
+            ]),
+            _: 3
+          }, 8, ["name", "mode"])
+        ], 42, he)
+      ]),
+      _: 3
+    }));
+  }
+}), Ge = /* @__PURE__ */ be(ke, [["__scopeId", "data-v-6ed0fae4"]]);
+export {
+  Ge as B
+};
+//# sourceMappingURL=action-bar.BS2cJzG_.js.map

package/dist/chunks/action-bar.BS2cJzG_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar.BS2cJzG_.js","sources":["../../../vue2/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=\"!isConfirmationVariant\" 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                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\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                    <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 { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } 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         * 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, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\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<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `confirmation` variant.\n         */\n        (e: 'cancel'): void;\n        /**\n         * Event emitted when the user clicks the save button in `confirmation` variant.\n         */\n        (e: 'save'): void;\n        /**\n         * Event emitted when the user clicks the undo button in `success` state.\n         */\n        (e: 'undo-action'): void;\n        /**\n         * Event emitted when the user clicks the retry button in `fail` state.\n         */\n        (e: 'retry-action'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `fail` state.\n         */\n        (e: 'cancel-action'): void;\n    }>();\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\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\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","props","__props","emit","__emit","t","tc","n","useI18n","label","computed","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}

package/dist/chunks/{code-snippet.Dl1MEedz.js → code-snippet.CJDFfbit.js}

@@ -1,7 +1,7 @@
 import { defineComponent as ee, useAttrs as te, ref as y, computed as m, shallowRef as $, onMounted as ae, watch as ne, watchEffect as oe, resolveComponent as se, openBlock as s, createElementBlock as _, normalizeClass as w, createElementVNode as S, createBlock as f, unref as r, mergeProps as re, createCommentVNode as u, createVNode as C, withCtx as h, createTextVNode as Q, toDisplayString as x, renderSlot as le, normalizeProps as ie, guardReactiveProps as ce } from "vue";
 import { s as de, H as pe, t as e, L as ue, a as ge, b as fe, c as me, p as he, j as be, d as Oe, x as ve, e as ye, E as _e, h as Se, k as Ce, i as Ne, C as N, f as Y, g as E, l as Pe, m as ke } from "./codemirror.D2BAltnu.js";
 import { c as Le, d as Te, e as xe, f as Ee } from "./es6.C1DXQV6f.js";
-import { B as Ie } from "./dropdown.Bdw2B-Cw.js";
+import { B as Ie } from "./dropdown.BXbfqIpi.js";
 import { B as W } from "./button.C6t9_lzm.js";
 import { B as D } from "./typography.B3J6_tYk.js";
 import { B as Ae } from "./loading-indicator.BPol9I84.js";
@@ -342,4 +342,4 @@ export {
   I as b,
   ft as c
 };
-//# sourceMappingURL=code-snippet.Dl1MEedz.js.map
+//# sourceMappingURL=code-snippet.CJDFfbit.js.map

package/dist/chunks/{code-snippet.Dl1MEedz.js.map → code-snippet.CJDFfbit.js.map}

@@ -1 +1 @@
-{"version":3,"file":"code-snippet.Dl1MEedz.js","sources":["../../../vue2/src/components/code-snippet/highlight.ts","../../../vue2/src/components/code-snippet/code-snippet.types.ts","../../../../node_modules/.pnpm/codemirror-lang-csv@0.1.1/node_modules/codemirror-lang-csv/dist/index.js","../../../vue2/src/components/code-snippet/utils/get-lang-loader.ts","../../../vue2/src/components/code-snippet/utils/indent-same-as-line-before-extension.ts","../../../vue2/src/components/code-snippet/code-snippet.vue"],"sourcesContent":["import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport {\n    BColorLabelOnBackgroundCriticalWeak,\n    BColorLabelOnBackgroundHighlightWeak,\n    BColorLabelOnBackgroundSuccessWeak,\n    BColorLabelOnBackgroundWarningWeak,\n} from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { type BentoCodeSnippetSupportedLanguage } from './code-snippet.types';\n\nconst lightThemeColors = {\n    red: BColorLabelOnBackgroundCriticalWeak,\n    orange: BColorLabelOnBackgroundWarningWeak,\n    green: BColorLabelOnBackgroundSuccessWeak,\n    blue: BColorLabelOnBackgroundHighlightWeak,\n    invalid: '#ffffff',\n};\n\nconst highlightStyle = (colors, language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) =>\n    HighlightStyle.define([\n        {\n            tag: t.keyword,\n            color: colors.red,\n        },\n        {\n            tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],\n            color: colors.green,\n        },\n        {\n            tag: [t.function(t.variableName), t.labelName],\n            color: colors.blue,\n        },\n        {\n            tag: [t.color, t.constant(t.name), t.standard(t.name)],\n            color: colors.red,\n        },\n        {\n            tag: [t.definition(t.name), ...(language !== 'json' ? [t.separator] : [])],\n            color: colors.red,\n        },\n        {\n            tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],\n            color: colors.orange,\n        },\n        {\n            tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],\n            color: colors.blue,\n        },\n        {\n            tag: [t.meta, t.comment],\n            color: colors.orange,\n        },\n        {\n            tag: t.strong,\n            fontWeight: 'bold',\n        },\n        {\n            tag: t.emphasis,\n            fontStyle: 'italic',\n        },\n        {\n            tag: t.strikethrough,\n            textDecoration: 'line-through',\n        },\n        {\n            tag: t.link,\n            color: colors.orange,\n            textDecoration: 'underline',\n        },\n        {\n            tag: t.heading,\n            fontWeight: 'bold',\n            color: colors.blue,\n        },\n        {\n            tag: [t.atom, t.bool, t.special(t.variableName)],\n            color: colors.red,\n        },\n        {\n            tag: [t.processingInstruction, t.string, t.inserted],\n            color: colors.blue,\n        },\n        {\n            tag: t.invalid,\n            color: colors.invalid,\n        },\n    ]);\n\nexport const lightThemeHighlight = (\n    language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`\n) => syntaxHighlighting(highlightStyle(lightThemeColors, language));\n","/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetVariant {\n    INLINE = 'inline',\n    SINGLELINE = 'singleline',\n    MULTILINE = 'multiline',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetSupportedLanguage {\n    JSON = 'json',\n    XML = 'xml',\n    JAVA = 'java',\n    JAVASCRIPT = 'javascript',\n    PYTHON = 'python',\n    CSV = 'csv',\n}\n\nexport enum BentoCodeSnippetEvent {\n    ACTION = 'action',\n    CHANGE = 'change',\n}\n\nexport interface BentoCodeSnippetProps {\n    /**\n     * Displays a button that when clicked will emit an action event\n     * Leaves to the parent component the logic of what to do with it\n     */\n    actionable?: boolean;\n\n    /**\n     * Displays a button that when clicked will emit a run event\n     * Leaves to the parent component the logic of what to do with it\n     */\n    actionableText?: string;\n\n    /**\n     * The code content\n     */\n    content?: string;\n\n    /**\n     * Displays a button that can expand the codeblock into a modal to easily\n     * view large blocks of code.\n     */\n    expandable?: boolean;\n\n    /**\n     * Allows editing of the code-snippet content by the user\n     */\n    editable?: boolean;\n\n    /**\n     * Language name for syntax highlighting rules\n     */\n    lang?: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`;\n\n    /**\n     * Label to show in the action-bar, describing the language\n     */\n    langLabel?: string;\n\n    /**\n     * Toggles the loading indicator within the action bar\n     */\n    loading?: boolean;\n\n    /**\n     * Defines the variant of code-snippet\n     */\n    variant?: BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`;\n}\n","import { LRParser } from '@lezer/lr';\nimport { LRLanguage, LanguageSupport } from '@codemirror/language';\nimport { styleTags, tags } from '@lezer/highlight';\n\n// This file was generated by lezer-generator. You probably shouldn't edit it.\nconst parser = LRParser.deserialize({\n  version: 14,\n  states: \"nQVQPOOOOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOOQO-E6_-E6_\",\n  stateData: \"g~OWOS~OQPORPOSPO~OQRSR~\",\n  goto: \"eYPPPPPZPPPaQRORSRTQOR\",\n  nodeNames: \"⚠ Program String Separator Value\",\n  maxTerm: 9,\n  skippedNodes: [0],\n  repeatNodeCount: 1,\n  tokenData: \"'Y~RZOYtYZ!cZrtrs!hs|t|}'T}!]t!]!^'T!^;'St;'S;=`!]<%lOt~yUS~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~!`P;=`<%lt~!hOW~~!m]S~OY!hYZ#fZr!hrs%Ss|!h|}#f}!]!h!]!^#f!^#O!h#O#P%m#P;'S!h;'S;=`&}<%lO!h~#iVOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|<%lO#f~$TOQ~~$WRO;'S#f;'S;=`$a;=`O#f~$dWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l#f<%lO#f~%PP;=`<%l#f~%ZUQ~S~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~%rYS~OY!hYZ#fZ|!h|}#f}!]!h!]!^#f!^;'S!h;'S;=`&b;=`<%l#f<%lO!h~&eWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l!h<%lO#f~'QP;=`<%l!h~'YOR~\",\n  tokenizers: [0],\n  topRules: {\"Program\":[0,1]},\n  tokenPrec: 18\n});\n\nconst csvLanguage = LRLanguage.define({\n    parser: parser.configure({\n        props: [\n            styleTags({\n                Separator: tags.separator,\n                Value: tags.string,\n                String: tags.string,\n                LineComment: tags.lineComment,\n                \"( )\": tags.paren,\n            }),\n        ],\n    }),\n});\nfunction csv() {\n    return new LanguageSupport(csvLanguage);\n}\n\nexport { csv, csvLanguage };\n","import { BentoCodeSnippetSupportedLanguage } from '@/components/code-snippet/code-snippet.types';\nimport { json } from '@codemirror/lang-json';\nimport { xml } from '@codemirror/lang-xml';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { java } from '@codemirror/lang-java';\nimport { python } from '@codemirror/lang-python';\nimport { csv } from 'codemirror-lang-csv';\nimport type { LanguageSupport } from '@codemirror/language';\n\n/**\n * TODO: This should be handled with dynamic imports,\n * without relying on importing every single language/package available.\n * These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/code-snippet.types.ts enum\n */\nconst importsMap: Record<BentoCodeSnippetSupportedLanguage, () => LanguageSupport> = {\n    [BentoCodeSnippetSupportedLanguage.JSON]: json,\n    [BentoCodeSnippetSupportedLanguage.XML]: xml,\n    [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n    [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n    [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n    [BentoCodeSnippetSupportedLanguage.CSV]: csv,\n};\n\n/**\n * Returns a language loder for `CodeMirror`.\n * Supported languages: json, xml, javascript & java\n *\n * @param language Language to be used\n * @returns Language configuration loader to be used in codemirror\n */\nexport const getLangLoader = (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => {\n    const loadLang = async () => importsMap[language];\n\n    return loadLang;\n};\n","import { EditorSelection, type EditorState, type SelectionRange } from '@codemirror/state';\n\n/**\n * Calculate indentation for a new line based on line before it.\n * @param state - The editor state\n * @param line - the selection range, in this case one line\n * @returns the indentation string to be pre-pended on a new line.\n */\nconst getIndentation = (state: EditorState, line: SelectionRange) => {\n    const currentLine = state.doc.lineAt(line.from);\n    const indentMatch = /^\\s*/.exec(currentLine.text);\n    return indentMatch ? indentMatch[0] : '';\n};\n\n/**\n * This extension to codemirror will, upon pressing the 'Enter' key, indent the new line\n * the same as the line before it.\n */\nexport const INDENT_SAME_AS_LINE_BEFORE = {\n    key: 'Enter',\n    run: ({ state, dispatch }) => {\n        const changes = state.changeByRange(range => {\n            const indentation = getIndentation(state, range);\n            const newText = `\\n${indentation}`;\n            return {\n                changes: { from: range.from, to: range.to, insert: newText },\n                range: EditorSelection.cursor(range.from + newText.length),\n            };\n        });\n        dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));\n        return true;\n    },\n};\n\nexport default INDENT_SAME_AS_LINE_BEFORE;\n","<template>\n    <div class=\"b-code-snippet\" :class=\"conditionalClasses\">\n        <section v-if=\"!isInlineVariant\" class=\"b-code-snippet__action-bar\">\n            <div class=\"b-code-snippet__action-bar--start\">\n                <bento-dropdown\n                    v-if=\"availableLanguages.length > 0\"\n                    v-model=\"selectedLanguage\"\n                    v-bind=\"$props\"\n                    :disabled=\"availableLanguages.length === 1\"\n                    :items=\"availableLanguages\"\n                    class=\"b-code-snippet__language-picker\"\n                    @input=\"handleChangeLanguage\"\n                />\n                <bento-typography el=\"span\" stronger>\n                    {{ displayedLang }}\n                </bento-typography>\n            </div>\n            <div class=\"b-code-snippet__action-bar--end\">\n                <bento-loading-indicator v-if=\"loading\" />\n                <copy v-if=\"currentContents !== null\" class=\"b-structured-list__icon\" :text=\"currentContents\" />\n                <bento-button\n                    v-if=\"expandable\"\n                    variant=\"tertiary\"\n                    condensed\n                    :aria-label=\"t('expand')\"\n                    @click=\"showModal = true\"\n                >\n                    <template #iconLeft>\n                        <expand-icon />\n                    </template>\n                </bento-button>\n                <bento-button v-if=\"actionable\" variant=\"primary\" tertiary condensed @click=\"onActionClicked\">\n                    <template #iconLeft>\n                        <bento-typography el=\"span\" class=\"b-code-snippet__action-button\">\n                            {{ runText }}\n                        </bento-typography>\n                    </template>\n                </bento-button>\n            </div>\n        </section>\n        <code v-if=\"content || editable\" class=\"b-code-snippet__code-area\">\n            <div ref=\"container\" class=\"b-code-snippet__code-area-content\" :class=\"codeAreaContentConditionalClasses\" />\n        </code>\n        <section v-else>\n            <slot name=\"empty-state\">\n                <!-- TODO: switch with empty-state component when ready -->\n                <div class=\"b-code-snippet__empty-state\">{{ t('nothingToDisplay') }}</div>\n            </slot>\n        </section>\n        <base-modal\n            v-if=\"expandable\"\n            class=\"b-code-snippet__modal\"\n            :hide-close-button=\"true\"\n            :custom-padding=\"'0px'\"\n            :is-dismissible=\"true\"\n            :is-open=\"showModal\"\n            size=\"large\"\n            @close-modal=\"showModal = false\"\n        >\n            <template #content>\n                <bento-code-snippet v-bind=\"{ ...$props, expandable: false }\" />\n            </template>\n        </base-modal>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type HTMLAttributes, onMounted, ref, shallowRef, useAttrs, watch, watchEffect } from 'vue';\n    import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';\n    import { Compartment, EditorState } from '@codemirror/state';\n    import { history, indentWithTab } from '@codemirror/commands';\n    import { lightThemeHighlight } from './highlight';\n    import { getLangLoader, INDENT_SAME_AS_LINE_BEFORE } from './utils';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { Copy } from '@/internal';\n    import {\n        BentoCodeSnippetEvent,\n        type BentoCodeSnippetProps,\n        BentoCodeSnippetSupportedLanguage,\n        BentoCodeSnippetVariant,\n    } from './code-snippet.types';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoCodeSnippetProps>(), {\n        actionable: false,\n        actionableText: null,\n        content: '',\n        editable: false,\n        expandable: false,\n        lang: BentoCodeSnippetSupportedLanguage.JSON,\n        langLabel: null,\n        loading: false,\n        variant: BentoCodeSnippetVariant.MULTILINE,\n    });\n\n    const emit = defineEmits([BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE]);\n\n    const attrs = useAttrs();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // language\n    const selectedLanguage = ref<string | null>(null);\n    const availableLanguages = []; // TODO: implement\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    const handleChangeLanguage = () => {};\n    const displayedLang = computed(() => props.langLabel ?? props.lang.toUpperCase());\n\n    const isInlineVariant = computed(() => props.variant === BentoCodeSnippetVariant.INLINE);\n\n    const conditionalClasses = computed(() => ({\n        'b-code-snippet--inline': isInlineVariant.value,\n        'b-code-snippet--scrollable': !isInlineVariant.value,\n    }));\n\n    const codeAreaContentConditionalClasses = computed(() => ({\n        'b-code-snippet__code-area-content--editable': props.editable,\n    }));\n\n    const loadLang = getLangLoader(props.lang);\n\n    const container = shallowRef<HTMLDivElement>();\n    const editor = shallowRef<EditorView>();\n    const languageConf = new Compartment();\n    const editorTheme = new Compartment();\n    const editorReadOnly = new Compartment();\n    const editorAttributes = new Compartment();\n\n    const currentContents = ref(null);\n    const contentLength = ref(0);\n\n    const runText = computed(() => props.actionableText || t('run'));\n\n    onMounted(async () => {\n        const language = await loadLang();\n\n        // alongside the updateListener plugin it acts as a watcher of changes to the editor state\n        currentContents.value = props.content;\n        const updateCurrentContents = ({ state }) => {\n            currentContents.value = state.doc.toString();\n        };\n\n        const extensions = [\n            highlightActiveLine(),\n            keymap.of([indentWithTab, INDENT_SAME_AS_LINE_BEFORE]),\n            languageConf.of(language()),\n            editorTheme.of(lightThemeHighlight(props.lang)),\n            editorReadOnly.of(EditorState.readOnly.of(!props.editable)),\n            editorAttributes.of(\n                EditorView.contentAttributes.of({\n                    'aria-label': (attrs['aria-label'] as HTMLAttributes['aria-label']) ?? t('codeSnippet'),\n                    ...(!isInlineVariant.value && { tabindex: '0' }),\n                })\n            ),\n            EditorView.updateListener.of(content => updateCurrentContents(content)),\n        ];\n\n        if (props.variant === 'multiline') {\n            extensions.push([lineNumbers(), history()]);\n        }\n\n        const state = EditorState.create({\n            doc: props.content,\n            extensions: [...extensions],\n        });\n        contentLength.value = state.doc.length;\n\n        editor.value = new EditorView({\n            state,\n            parent: container.value,\n        });\n    });\n    watch(\n        () => props.content,\n        () => {\n            if (props.content !== currentContents.value) {\n                const upcomingContentLength = props.content.length;\n                editor.value.dispatch({\n                    changes: {\n                        from: 0,\n                        to: contentLength.value,\n                        insert: props.content,\n                    },\n                });\n                contentLength.value = upcomingContentLength;\n            }\n        }\n    );\n\n    const onActionClicked = () => {\n        emit(BentoCodeSnippetEvent.ACTION, currentContents.value);\n    };\n\n    watchEffect(() => {\n        if (currentContents.value !== null) {\n            emit(BentoCodeSnippetEvent.CHANGE, currentContents.value);\n        }\n    });\n\n    const showModal = ref(false);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A code-snippet is a container to display code in a readable way.\n     * Come with added functionalities like syntax highlighting, editing and actioning the code\n     *\n     * @example\n     * import { BentoCodeSnippet } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCodeSnippet },\n     *     template: `\n     *          <bento-code-snippet :variant=\"BentoCodeSnippetVariant.MULTILINE\" content=\"{ example: 1234 }\" />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-code-snippet',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./code-snippet.scss\"></style>\n"],"names":["lightThemeColors","BColorLabelOnBackgroundCriticalWeak","BColorLabelOnBackgroundWarningWeak","BColorLabelOnBackgroundSuccessWeak","BColorLabelOnBackgroundHighlightWeak","highlightStyle","colors","language","HighlightStyle","tags","lightThemeHighlight","syntaxHighlighting","BentoCodeSnippetVariant","BentoCodeSnippetVariant2","BentoCodeSnippetSupportedLanguage","BentoCodeSnippetSupportedLanguage2","BentoCodeSnippetEvent","BentoCodeSnippetEvent2","parser","LRParser","csvLanguage","LRLanguage","styleTags","csv","LanguageSupport","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","__default__","messages","props","__props","emit","__emit","attrs","useAttrs","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","editorAttributes","currentContents","contentLength","runText","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","onActionClicked","watchEffect","showModal"],"mappings":";;;;;;;;;;;;;AAUA,MAAAA,KAAA;AAAA,EAAyB,KAAAC;AAAA,EAChB,QAAAC;AAAA,EACG,OAAAC;AAAA,EACD,MAAAC;AAAA,EACD,SAAA;AAEV,GAEAC,KAAA,CAAAC,GAAAC,MAAAC,GAAA,OAAA;AAAA,EAC0B;AAAA,IAClB,KAAAC,EAAA;AAAA,IACW,OAAAH,EAAA;AAAA,EACO;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,MAAAA,EAAA,SAAAA,EAAA,WAAAA,EAAA,cAAAA,EAAA,SAAA;AAAA,IACqE,OAAAH,EAAA;AAAA,EACnD;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,SAAAA,EAAA,YAAA,GAAAA,EAAA,SAAA;AAAA,IACiD,OAAAH,EAAA;AAAA,EAC/B;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,OAAAA,EAAA,SAAAA,EAAA,IAAA,GAAAA,EAAA,SAAAA,EAAA,IAAA,CAAA;AAAA,IACyD,OAAAH,EAAA;AAAA,EACvC;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,WAAAA,EAAA,IAAA,GAAA,GAAAF,MAAA,SAAA,CAAAE,EAAA,SAAA,IAAA,CAAA,CAAA;AAAA,IAC6E,OAAAH,EAAA;AAAA,EAC3D;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,UAAAA,EAAA,WAAAA,EAAA,QAAAA,EAAA,SAAAA,EAAA,YAAAA,EAAA,UAAAA,EAAA,MAAAA,EAAA,SAAA;AAAA,IACqG,OAAAH,EAAA;AAAA,EACnF;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,UAAAA,EAAA,iBAAAA,EAAA,KAAAA,EAAA,QAAAA,EAAA,QAAAA,EAAA,MAAAA,EAAA,QAAAA,EAAA,MAAA,CAAA;AAAA,IAC+F,OAAAH,EAAA;AAAA,EAC7E;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,MAAAA,EAAA,OAAA;AAAA,IAC2B,OAAAH,EAAA;AAAA,EACT;AAAA,EAClB;AAAA,IACA,KAAAG,EAAA;AAAA,IACW,YAAA;AAAA,EACK;AAAA,EAChB;AAAA,IACA,KAAAA,EAAA;AAAA,IACW,WAAA;AAAA,EACI;AAAA,EACf;AAAA,IACA,KAAAA,EAAA;AAAA,IACW,gBAAA;AAAA,EACS;AAAA,EACpB;AAAA,IACA,KAAAA,EAAA;AAAA,IACW,OAAAH,EAAA;AAAA,IACO,gBAAA;AAAA,EACE;AAAA,EACpB;AAAA,IACA,KAAAG,EAAA;AAAA,IACW,YAAA;AAAA,IACK,OAAAH,EAAA;AAAA,EACE;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,MAAAA,EAAA,MAAAA,EAAA,QAAAA,EAAA,YAAA,CAAA;AAAA,IACmD,OAAAH,EAAA;AAAA,EACjC;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,uBAAAA,EAAA,QAAAA,EAAA,QAAA;AAAA,IACuD,OAAAH,EAAA;AAAA,EACrC;AAAA,EAClB;AAAA,IACA,KAAAG,EAAA;AAAA,IACW,OAAAH,EAAA;AAAA,EACO;AAEtB,CAAA,GAEGI,KAAA,CAAAH,MAAAI,GAAAN,GAAAL,IAAAO,CAAA,CAAA;ACrFA,IAAAK,IAAA,kBAAAC,OACHA,EAAA,SAAA,UACAA,EAAA,aAAA,cACAA,EAAA,YAAA,aAHQA,IAAAD,KAAA,CAAA,CAAA,GASLE,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,MAAA,OACAA,EAAA,OAAA,QACAA,EAAA,aAAA,cACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OANQA,IAAAD,KAAA,CAAA,CAAA,GASLE,IAAA,kBAAAC,OACHA,EAAA,SAAA,UACAA,EAAA,SAAA,UAFQA,IAAAD,KAAA,CAAA,CAAA;AChBZ,MAAAE,KAAAC,GAAA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA,CAAA,CAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,CAAA,CAAA;AAAA,EACA,UAAA,EAAA,SAAA,CAAA,GAAA,CAAA,EAAA;AAAA,EACA,WAAA;AACA,CAAA,GAEAC,KAAAC,GAAA,OAAA;AAAA,EACA,QAAAH,GAAA,UAAA;AAAA,IACA,OAAA;AAAA,MACAI,GAAA;AAAA,QACA,WAAAb,EAAA;AAAA,QACA,OAAAA,EAAA;AAAA,QACA,QAAAA,EAAA;AAAA,QACA,aAAAA,EAAA;AAAA,QACA,OAAAA,EAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA,CAAA;AACA,CAAA;AACA,SAAAc,KAAA;AACA,SAAA,IAAAC,GAAAJ,EAAA;AACA;ACrBA,MAAAK,KAAA;AAAA,EAAqF,CAAAX,EAAA,IAAA,GAAAY;AAAA,EACvC,CAAAZ,EAAA,GAAA,GAAAa;AAAA,EACD,CAAAb,EAAA,UAAA,GAAAc;AAAA,EACO,CAAAd,EAAA,IAAA,GAAAe;AAAA,EACN,CAAAf,EAAA,MAAA,GAAAgB;AAAA,EACE,CAAAhB,EAAA,GAAA,GAAAS;AAEhD,GASOQ,KAAA,CAAAxB,MACH,YAAAkB,GAAAlB,CAAA,GCvBJyB,KAAA,CAAAC,GAAAC,MAAA;AACI,QAAAC,IAAAF,EAAA,IAAA,OAAAC,EAAA,IAAA,GACAE,IAAA,OAAA,KAAAD,EAAA,IAAA;AACA,SAAAC,IAAAA,EAAA,CAAA,IAAA;AACJ,GAMOC,KAAA;AAAA,EAAmC,KAAA;AAAA,EACjC,KAAA,CAAA,EAAA,OAAAJ,GAAA,UAAAK,EAAA,MAAA;AAED,UAAAC,IAAAN,EAAA,cAAA,CAAAO,MAAA;AAEI,YAAAC,IAAA;AAAA,EADAT,GAAAC,GAAAO,CAAA,CACgB;AAChB,aAAA;AAAA,QAAO,SAAA,EAAA,MAAAA,EAAA,MAAA,IAAAA,EAAA,IAAA,QAAAC,EAAA;AAAA,QACwD,OAAAC,GAAA,OAAAF,EAAA,OAAAC,EAAA,MAAA;AAAA,MACF;AAAA,IAC7D,CAAA;AAEJ,WAAAH,EAAAL,EAAA,OAAAM,GAAA,EAAA,gBAAA,IAAA,WAAA,QAAA,CAAA,CAAA,GACA;AAAA,EAAO;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;mECgMII,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;;;AAxIA,UAAAC,IAAAC,GAYAC,IAAAC,GAEAC,IAAAC,GAAA,GACA,EAAA,GAAAC,EAAA,IAAAC,GAAA,EAAA,UAAAR,EAAA,CAAA,GAGAS,IAAAC,EAAA,IAAA,GACAC,IAAA,CAAA,GAEAC,IAAA,MAAA;AAAA,IAAmC,GACnCC,IAAAC,EAAA,MAAAb,EAAA,aAAAA,EAAA,KAAA,YAAA,CAAA,GAEAc,IAAAD,EAAA,MAAAb,EAAA,YAAAjC,EAAA,MAAA,GAEAgD,IAAAF,EAAA,OAAA;AAAA,MAA2C,0BAAAC,EAAA;AAAA,MACG,8BAAA,CAAAA,EAAA;AAAA,IACK,EAAA,GAGnDE,IAAAH,EAAA,OAAA;AAAA,MAA0D,+CAAAb,EAAA;AAAA,IACD,EAAA,GAGzDiB,IAAA/B,GAAAc,EAAA,IAAA,GAEAkB,IAAAC,EAAA,GACAC,IAAAD,EAAA,GACAE,IAAA,IAAAC,EAAA,GACAC,IAAA,IAAAD,EAAA,GACAE,IAAA,IAAAF,EAAA,GACAG,IAAA,IAAAH,EAAA,GAEAI,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,CAAA,GAEAmB,IAAAf,EAAA,MAAAb,EAAA,kBAAAM,EAAA,KAAA,CAAA;AAEA,IAAAuB,GAAA,YAAA;AACI,YAAAnE,IAAA,MAAAuD,EAAA;AAGA,MAAAS,EAAA,QAAA1B,EAAA;AACA,YAAA8B,IAAA,CAAA,EAAA,OAAAC,EAAA,MAAA;AACI,QAAAL,EAAA,QAAAK,EAAA,IAAA,SAAA;AAAA,MAA2C,GAG/CC,IAAA;AAAA,QAAmBC,GAAA;AAAA,QACKC,GAAA,GAAA,CAAAC,IAAA3C,EAAA,CAAA;AAAA,QACiC6B,EAAA,GAAA3D,EAAA,CAAA;AAAA,QAC3B6D,EAAA,GAAA1D,GAAAmC,EAAA,IAAA,CAAA;AAAA,QACoBwB,EAAA,GAAAY,EAAA,SAAA,GAAA,CAAApC,EAAA,QAAA,CAAA;AAAA,QACYyB,EAAA;AAAA,UACzCY,EAAA,kBAAA,GAAA;AAAA,YACmB,cAAAjC,EAAA,YAAA,KAAAE,EAAA,aAAA;AAAA,YAC0D,GAAA,CAAAQ,EAAA,SAAA,EAAA,UAAA,IAAA;AAAA,UACxC,CAAA;AAAA,QACjD;AAAA,QACLuB,EAAA,eAAA,GAAA,CAAAC,MAAAR,EAAAQ,CAAA,CAAA;AAAA,MACsE;AAG1E,MAAAtC,EAAA,YAAA,eACIgC,EAAA,KAAA,CAAAO,GAAA,GAAAC,GAAA,CAAA,CAAA;AAGJ,YAAApD,IAAAgD,EAAA,OAAA;AAAA,QAAiC,KAAApC,EAAA;AAAA,QAClB,YAAA,CAAA,GAAAgC,CAAA;AAAA,MACe,CAAA;AAE9B,MAAAL,EAAA,QAAAvC,EAAA,IAAA,QAEAgC,EAAA,QAAA,IAAAiB,EAAA;AAAA,QAA8B,OAAAjD;AAAA,QAC1B,QAAA8B,EAAA;AAAA,MACkB,CAAA;AAAA,IACrB,CAAA,GAELuB;AAAA,MAAA,MAAAzC,EAAA;AAAA,MACgB,MAAA;AAER,YAAAA,EAAA,YAAA0B,EAAA,OAAA;AACI,gBAAAgB,IAAA1C,EAAA,QAAA;AACA,UAAAoB,EAAA,MAAA,SAAA;AAAA,YAAsB,SAAA;AAAA,cACT,MAAA;AAAA,cACC,IAAAO,EAAA;AAAA,cACY,QAAA3B,EAAA;AAAA,YACJ;AAAA,UAClB,CAAA,GAEJ2B,EAAA,QAAAe;AAAA,QAAsB;AAAA,MAC1B;AAAA,IACJ;AAGJ,UAAAC,IAAA,MAAA;AACI,MAAAzC,EAAA/B,EAAA,QAAAuD,EAAA,KAAA;AAAA,IAAwD;AAG5D,IAAAkB,GAAA,MAAA;AACI,MAAAlB,EAAA,UAAA,QACIxB,EAAA/B,EAAA,QAAAuD,EAAA,KAAA;AAAA,IACJ,CAAA;AAGJ,UAAAmB,IAAApC,EAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[2]}
+{"version":3,"file":"code-snippet.CJDFfbit.js","sources":["../../../vue2/src/components/code-snippet/highlight.ts","../../../vue2/src/components/code-snippet/code-snippet.types.ts","../../../../node_modules/.pnpm/codemirror-lang-csv@0.1.1/node_modules/codemirror-lang-csv/dist/index.js","../../../vue2/src/components/code-snippet/utils/get-lang-loader.ts","../../../vue2/src/components/code-snippet/utils/indent-same-as-line-before-extension.ts","../../../vue2/src/components/code-snippet/code-snippet.vue"],"sourcesContent":["import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport {\n    BColorLabelOnBackgroundCriticalWeak,\n    BColorLabelOnBackgroundHighlightWeak,\n    BColorLabelOnBackgroundSuccessWeak,\n    BColorLabelOnBackgroundWarningWeak,\n} from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { type BentoCodeSnippetSupportedLanguage } from './code-snippet.types';\n\nconst lightThemeColors = {\n    red: BColorLabelOnBackgroundCriticalWeak,\n    orange: BColorLabelOnBackgroundWarningWeak,\n    green: BColorLabelOnBackgroundSuccessWeak,\n    blue: BColorLabelOnBackgroundHighlightWeak,\n    invalid: '#ffffff',\n};\n\nconst highlightStyle = (colors, language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) =>\n    HighlightStyle.define([\n        {\n            tag: t.keyword,\n            color: colors.red,\n        },\n        {\n            tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],\n            color: colors.green,\n        },\n        {\n            tag: [t.function(t.variableName), t.labelName],\n            color: colors.blue,\n        },\n        {\n            tag: [t.color, t.constant(t.name), t.standard(t.name)],\n            color: colors.red,\n        },\n        {\n            tag: [t.definition(t.name), ...(language !== 'json' ? [t.separator] : [])],\n            color: colors.red,\n        },\n        {\n            tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],\n            color: colors.orange,\n        },\n        {\n            tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],\n            color: colors.blue,\n        },\n        {\n            tag: [t.meta, t.comment],\n            color: colors.orange,\n        },\n        {\n            tag: t.strong,\n            fontWeight: 'bold',\n        },\n        {\n            tag: t.emphasis,\n            fontStyle: 'italic',\n        },\n        {\n            tag: t.strikethrough,\n            textDecoration: 'line-through',\n        },\n        {\n            tag: t.link,\n            color: colors.orange,\n            textDecoration: 'underline',\n        },\n        {\n            tag: t.heading,\n            fontWeight: 'bold',\n            color: colors.blue,\n        },\n        {\n            tag: [t.atom, t.bool, t.special(t.variableName)],\n            color: colors.red,\n        },\n        {\n            tag: [t.processingInstruction, t.string, t.inserted],\n            color: colors.blue,\n        },\n        {\n            tag: t.invalid,\n            color: colors.invalid,\n        },\n    ]);\n\nexport const lightThemeHighlight = (\n    language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`\n) => syntaxHighlighting(highlightStyle(lightThemeColors, language));\n","/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetVariant {\n    INLINE = 'inline',\n    SINGLELINE = 'singleline',\n    MULTILINE = 'multiline',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetSupportedLanguage {\n    JSON = 'json',\n    XML = 'xml',\n    JAVA = 'java',\n    JAVASCRIPT = 'javascript',\n    PYTHON = 'python',\n    CSV = 'csv',\n}\n\nexport enum BentoCodeSnippetEvent {\n    ACTION = 'action',\n    CHANGE = 'change',\n}\n\nexport interface BentoCodeSnippetProps {\n    /**\n     * Displays a button that when clicked will emit an action event\n     * Leaves to the parent component the logic of what to do with it\n     */\n    actionable?: boolean;\n\n    /**\n     * Displays a button that when clicked will emit a run event\n     * Leaves to the parent component the logic of what to do with it\n     */\n    actionableText?: string;\n\n    /**\n     * The code content\n     */\n    content?: string;\n\n    /**\n     * Displays a button that can expand the codeblock into a modal to easily\n     * view large blocks of code.\n     */\n    expandable?: boolean;\n\n    /**\n     * Allows editing of the code-snippet content by the user\n     */\n    editable?: boolean;\n\n    /**\n     * Language name for syntax highlighting rules\n     */\n    lang?: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`;\n\n    /**\n     * Label to show in the action-bar, describing the language\n     */\n    langLabel?: string;\n\n    /**\n     * Toggles the loading indicator within the action bar\n     */\n    loading?: boolean;\n\n    /**\n     * Defines the variant of code-snippet\n     */\n    variant?: BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`;\n}\n","import { LRParser } from '@lezer/lr';\nimport { LRLanguage, LanguageSupport } from '@codemirror/language';\nimport { styleTags, tags } from '@lezer/highlight';\n\n// This file was generated by lezer-generator. You probably shouldn't edit it.\nconst parser = LRParser.deserialize({\n  version: 14,\n  states: \"nQVQPOOOOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOOQO-E6_-E6_\",\n  stateData: \"g~OWOS~OQPORPOSPO~OQRSR~\",\n  goto: \"eYPPPPPZPPPaQRORSRTQOR\",\n  nodeNames: \"⚠ Program String Separator Value\",\n  maxTerm: 9,\n  skippedNodes: [0],\n  repeatNodeCount: 1,\n  tokenData: \"'Y~RZOYtYZ!cZrtrs!hs|t|}'T}!]t!]!^'T!^;'St;'S;=`!]<%lOt~yUS~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~!`P;=`<%lt~!hOW~~!m]S~OY!hYZ#fZr!hrs%Ss|!h|}#f}!]!h!]!^#f!^#O!h#O#P%m#P;'S!h;'S;=`&}<%lO!h~#iVOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|<%lO#f~$TOQ~~$WRO;'S#f;'S;=`$a;=`O#f~$dWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l#f<%lO#f~%PP;=`<%l#f~%ZUQ~S~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~%rYS~OY!hYZ#fZ|!h|}#f}!]!h!]!^#f!^;'S!h;'S;=`&b;=`<%l#f<%lO!h~&eWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l!h<%lO#f~'QP;=`<%l!h~'YOR~\",\n  tokenizers: [0],\n  topRules: {\"Program\":[0,1]},\n  tokenPrec: 18\n});\n\nconst csvLanguage = LRLanguage.define({\n    parser: parser.configure({\n        props: [\n            styleTags({\n                Separator: tags.separator,\n                Value: tags.string,\n                String: tags.string,\n                LineComment: tags.lineComment,\n                \"( )\": tags.paren,\n            }),\n        ],\n    }),\n});\nfunction csv() {\n    return new LanguageSupport(csvLanguage);\n}\n\nexport { csv, csvLanguage };\n","import { BentoCodeSnippetSupportedLanguage } from '@/components/code-snippet/code-snippet.types';\nimport { json } from '@codemirror/lang-json';\nimport { xml } from '@codemirror/lang-xml';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { java } from '@codemirror/lang-java';\nimport { python } from '@codemirror/lang-python';\nimport { csv } from 'codemirror-lang-csv';\nimport type { LanguageSupport } from '@codemirror/language';\n\n/**\n * TODO: This should be handled with dynamic imports,\n * without relying on importing every single language/package available.\n * These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/code-snippet.types.ts enum\n */\nconst importsMap: Record<BentoCodeSnippetSupportedLanguage, () => LanguageSupport> = {\n    [BentoCodeSnippetSupportedLanguage.JSON]: json,\n    [BentoCodeSnippetSupportedLanguage.XML]: xml,\n    [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n    [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n    [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n    [BentoCodeSnippetSupportedLanguage.CSV]: csv,\n};\n\n/**\n * Returns a language loder for `CodeMirror`.\n * Supported languages: json, xml, javascript & java\n *\n * @param language Language to be used\n * @returns Language configuration loader to be used in codemirror\n */\nexport const getLangLoader = (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => {\n    const loadLang = async () => importsMap[language];\n\n    return loadLang;\n};\n","import { EditorSelection, type EditorState, type SelectionRange } from '@codemirror/state';\n\n/**\n * Calculate indentation for a new line based on line before it.\n * @param state - The editor state\n * @param line - the selection range, in this case one line\n * @returns the indentation string to be pre-pended on a new line.\n */\nconst getIndentation = (state: EditorState, line: SelectionRange) => {\n    const currentLine = state.doc.lineAt(line.from);\n    const indentMatch = /^\\s*/.exec(currentLine.text);\n    return indentMatch ? indentMatch[0] : '';\n};\n\n/**\n * This extension to codemirror will, upon pressing the 'Enter' key, indent the new line\n * the same as the line before it.\n */\nexport const INDENT_SAME_AS_LINE_BEFORE = {\n    key: 'Enter',\n    run: ({ state, dispatch }) => {\n        const changes = state.changeByRange(range => {\n            const indentation = getIndentation(state, range);\n            const newText = `\\n${indentation}`;\n            return {\n                changes: { from: range.from, to: range.to, insert: newText },\n                range: EditorSelection.cursor(range.from + newText.length),\n            };\n        });\n        dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));\n        return true;\n    },\n};\n\nexport default INDENT_SAME_AS_LINE_BEFORE;\n","<template>\n    <div class=\"b-code-snippet\" :class=\"conditionalClasses\">\n        <section v-if=\"!isInlineVariant\" class=\"b-code-snippet__action-bar\">\n            <div class=\"b-code-snippet__action-bar--start\">\n                <bento-dropdown\n                    v-if=\"availableLanguages.length > 0\"\n                    v-model=\"selectedLanguage\"\n                    v-bind=\"$props\"\n                    :disabled=\"availableLanguages.length === 1\"\n                    :items=\"availableLanguages\"\n                    class=\"b-code-snippet__language-picker\"\n                    @input=\"handleChangeLanguage\"\n                />\n                <bento-typography el=\"span\" stronger>\n                    {{ displayedLang }}\n                </bento-typography>\n            </div>\n            <div class=\"b-code-snippet__action-bar--end\">\n                <bento-loading-indicator v-if=\"loading\" />\n                <copy v-if=\"currentContents !== null\" class=\"b-structured-list__icon\" :text=\"currentContents\" />\n                <bento-button\n                    v-if=\"expandable\"\n                    variant=\"tertiary\"\n                    condensed\n                    :aria-label=\"t('expand')\"\n                    @click=\"showModal = true\"\n                >\n                    <template #iconLeft>\n                        <expand-icon />\n                    </template>\n                </bento-button>\n                <bento-button v-if=\"actionable\" variant=\"primary\" tertiary condensed @click=\"onActionClicked\">\n                    <template #iconLeft>\n                        <bento-typography el=\"span\" class=\"b-code-snippet__action-button\">\n                            {{ runText }}\n                        </bento-typography>\n                    </template>\n                </bento-button>\n            </div>\n        </section>\n        <code v-if=\"content || editable\" class=\"b-code-snippet__code-area\">\n            <div ref=\"container\" class=\"b-code-snippet__code-area-content\" :class=\"codeAreaContentConditionalClasses\" />\n        </code>\n        <section v-else>\n            <slot name=\"empty-state\">\n                <!-- TODO: switch with empty-state component when ready -->\n                <div class=\"b-code-snippet__empty-state\">{{ t('nothingToDisplay') }}</div>\n            </slot>\n        </section>\n        <base-modal\n            v-if=\"expandable\"\n            class=\"b-code-snippet__modal\"\n            :hide-close-button=\"true\"\n            :custom-padding=\"'0px'\"\n            :is-dismissible=\"true\"\n            :is-open=\"showModal\"\n            size=\"large\"\n            @close-modal=\"showModal = false\"\n        >\n            <template #content>\n                <bento-code-snippet v-bind=\"{ ...$props, expandable: false }\" />\n            </template>\n        </base-modal>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type HTMLAttributes, onMounted, ref, shallowRef, useAttrs, watch, watchEffect } from 'vue';\n    import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';\n    import { Compartment, EditorState } from '@codemirror/state';\n    import { history, indentWithTab } from '@codemirror/commands';\n    import { lightThemeHighlight } from './highlight';\n    import { getLangLoader, INDENT_SAME_AS_LINE_BEFORE } from './utils';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { Copy } from '@/internal';\n    import {\n        BentoCodeSnippetEvent,\n        type BentoCodeSnippetProps,\n        BentoCodeSnippetSupportedLanguage,\n        BentoCodeSnippetVariant,\n    } from './code-snippet.types';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoCodeSnippetProps>(), {\n        actionable: false,\n        actionableText: null,\n        content: '',\n        editable: false,\n        expandable: false,\n        lang: BentoCodeSnippetSupportedLanguage.JSON,\n        langLabel: null,\n        loading: false,\n        variant: BentoCodeSnippetVariant.MULTILINE,\n    });\n\n    const emit = defineEmits([BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE]);\n\n    const attrs = useAttrs();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // language\n    const selectedLanguage = ref<string | null>(null);\n    const availableLanguages = []; // TODO: implement\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    const handleChangeLanguage = () => {};\n    const displayedLang = computed(() => props.langLabel ?? props.lang.toUpperCase());\n\n    const isInlineVariant = computed(() => props.variant === BentoCodeSnippetVariant.INLINE);\n\n    const conditionalClasses = computed(() => ({\n        'b-code-snippet--inline': isInlineVariant.value,\n        'b-code-snippet--scrollable': !isInlineVariant.value,\n    }));\n\n    const codeAreaContentConditionalClasses = computed(() => ({\n        'b-code-snippet__code-area-content--editable': props.editable,\n    }));\n\n    const loadLang = getLangLoader(props.lang);\n\n    const container = shallowRef<HTMLDivElement>();\n    const editor = shallowRef<EditorView>();\n    const languageConf = new Compartment();\n    const editorTheme = new Compartment();\n    const editorReadOnly = new Compartment();\n    const editorAttributes = new Compartment();\n\n    const currentContents = ref(null);\n    const contentLength = ref(0);\n\n    const runText = computed(() => props.actionableText || t('run'));\n\n    onMounted(async () => {\n        const language = await loadLang();\n\n        // alongside the updateListener plugin it acts as a watcher of changes to the editor state\n        currentContents.value = props.content;\n        const updateCurrentContents = ({ state }) => {\n            currentContents.value = state.doc.toString();\n        };\n\n        const extensions = [\n            highlightActiveLine(),\n            keymap.of([indentWithTab, INDENT_SAME_AS_LINE_BEFORE]),\n            languageConf.of(language()),\n            editorTheme.of(lightThemeHighlight(props.lang)),\n            editorReadOnly.of(EditorState.readOnly.of(!props.editable)),\n            editorAttributes.of(\n                EditorView.contentAttributes.of({\n                    'aria-label': (attrs['aria-label'] as HTMLAttributes['aria-label']) ?? t('codeSnippet'),\n                    ...(!isInlineVariant.value && { tabindex: '0' }),\n                })\n            ),\n            EditorView.updateListener.of(content => updateCurrentContents(content)),\n        ];\n\n        if (props.variant === 'multiline') {\n            extensions.push([lineNumbers(), history()]);\n        }\n\n        const state = EditorState.create({\n            doc: props.content,\n            extensions: [...extensions],\n        });\n        contentLength.value = state.doc.length;\n\n        editor.value = new EditorView({\n            state,\n            parent: container.value,\n        });\n    });\n    watch(\n        () => props.content,\n        () => {\n            if (props.content !== currentContents.value) {\n                const upcomingContentLength = props.content.length;\n                editor.value.dispatch({\n                    changes: {\n                        from: 0,\n                        to: contentLength.value,\n                        insert: props.content,\n                    },\n                });\n                contentLength.value = upcomingContentLength;\n            }\n        }\n    );\n\n    const onActionClicked = () => {\n        emit(BentoCodeSnippetEvent.ACTION, currentContents.value);\n    };\n\n    watchEffect(() => {\n        if (currentContents.value !== null) {\n            emit(BentoCodeSnippetEvent.CHANGE, currentContents.value);\n        }\n    });\n\n    const showModal = ref(false);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A code-snippet is a container to display code in a readable way.\n     * Come with added functionalities like syntax highlighting, editing and actioning the code\n     *\n     * @example\n     * import { BentoCodeSnippet } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCodeSnippet },\n     *     template: `\n     *          <bento-code-snippet :variant=\"BentoCodeSnippetVariant.MULTILINE\" content=\"{ example: 1234 }\" />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-code-snippet',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./code-snippet.scss\"></style>\n"],"names":["lightThemeColors","BColorLabelOnBackgroundCriticalWeak","BColorLabelOnBackgroundWarningWeak","BColorLabelOnBackgroundSuccessWeak","BColorLabelOnBackgroundHighlightWeak","highlightStyle","colors","language","HighlightStyle","tags","lightThemeHighlight","syntaxHighlighting","BentoCodeSnippetVariant","BentoCodeSnippetVariant2","BentoCodeSnippetSupportedLanguage","BentoCodeSnippetSupportedLanguage2","BentoCodeSnippetEvent","BentoCodeSnippetEvent2","parser","LRParser","csvLanguage","LRLanguage","styleTags","csv","LanguageSupport","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","__default__","messages","props","__props","emit","__emit","attrs","useAttrs","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","editorAttributes","currentContents","contentLength","runText","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","onActionClicked","watchEffect","showModal"],"mappings":";;;;;;;;;;;;;AAUA,MAAAA,KAAA;AAAA,EAAyB,KAAAC;AAAA,EAChB,QAAAC;AAAA,EACG,OAAAC;AAAA,EACD,MAAAC;AAAA,EACD,SAAA;AAEV,GAEAC,KAAA,CAAAC,GAAAC,MAAAC,GAAA,OAAA;AAAA,EAC0B;AAAA,IAClB,KAAAC,EAAA;AAAA,IACW,OAAAH,EAAA;AAAA,EACO;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,MAAAA,EAAA,SAAAA,EAAA,WAAAA,EAAA,cAAAA,EAAA,SAAA;AAAA,IACqE,OAAAH,EAAA;AAAA,EACnD;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,SAAAA,EAAA,YAAA,GAAAA,EAAA,SAAA;AAAA,IACiD,OAAAH,EAAA;AAAA,EAC/B;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,OAAAA,EAAA,SAAAA,EAAA,IAAA,GAAAA,EAAA,SAAAA,EAAA,IAAA,CAAA;AAAA,IACyD,OAAAH,EAAA;AAAA,EACvC;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,WAAAA,EAAA,IAAA,GAAA,GAAAF,MAAA,SAAA,CAAAE,EAAA,SAAA,IAAA,CAAA,CAAA;AAAA,IAC6E,OAAAH,EAAA;AAAA,EAC3D;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,UAAAA,EAAA,WAAAA,EAAA,QAAAA,EAAA,SAAAA,EAAA,YAAAA,EAAA,UAAAA,EAAA,MAAAA,EAAA,SAAA;AAAA,IACqG,OAAAH,EAAA;AAAA,EACnF;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,UAAAA,EAAA,iBAAAA,EAAA,KAAAA,EAAA,QAAAA,EAAA,QAAAA,EAAA,MAAAA,EAAA,QAAAA,EAAA,MAAA,CAAA;AAAA,IAC+F,OAAAH,EAAA;AAAA,EAC7E;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,MAAAA,EAAA,OAAA;AAAA,IAC2B,OAAAH,EAAA;AAAA,EACT;AAAA,EAClB;AAAA,IACA,KAAAG,EAAA;AAAA,IACW,YAAA;AAAA,EACK;AAAA,EAChB;AAAA,IACA,KAAAA,EAAA;AAAA,IACW,WAAA;AAAA,EACI;AAAA,EACf;AAAA,IACA,KAAAA,EAAA;AAAA,IACW,gBAAA;AAAA,EACS;AAAA,EACpB;AAAA,IACA,KAAAA,EAAA;AAAA,IACW,OAAAH,EAAA;AAAA,IACO,gBAAA;AAAA,EACE;AAAA,EACpB;AAAA,IACA,KAAAG,EAAA;AAAA,IACW,YAAA;AAAA,IACK,OAAAH,EAAA;AAAA,EACE;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,MAAAA,EAAA,MAAAA,EAAA,QAAAA,EAAA,YAAA,CAAA;AAAA,IACmD,OAAAH,EAAA;AAAA,EACjC;AAAA,EAClB;AAAA,IACA,KAAA,CAAAG,EAAA,uBAAAA,EAAA,QAAAA,EAAA,QAAA;AAAA,IACuD,OAAAH,EAAA;AAAA,EACrC;AAAA,EAClB;AAAA,IACA,KAAAG,EAAA;AAAA,IACW,OAAAH,EAAA;AAAA,EACO;AAEtB,CAAA,GAEGI,KAAA,CAAAH,MAAAI,GAAAN,GAAAL,IAAAO,CAAA,CAAA;ACrFA,IAAAK,IAAA,kBAAAC,OACHA,EAAA,SAAA,UACAA,EAAA,aAAA,cACAA,EAAA,YAAA,aAHQA,IAAAD,KAAA,CAAA,CAAA,GASLE,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,MAAA,OACAA,EAAA,OAAA,QACAA,EAAA,aAAA,cACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OANQA,IAAAD,KAAA,CAAA,CAAA,GASLE,IAAA,kBAAAC,OACHA,EAAA,SAAA,UACAA,EAAA,SAAA,UAFQA,IAAAD,KAAA,CAAA,CAAA;AChBZ,MAAAE,KAAAC,GAAA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA,CAAA,CAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,CAAA,CAAA;AAAA,EACA,UAAA,EAAA,SAAA,CAAA,GAAA,CAAA,EAAA;AAAA,EACA,WAAA;AACA,CAAA,GAEAC,KAAAC,GAAA,OAAA;AAAA,EACA,QAAAH,GAAA,UAAA;AAAA,IACA,OAAA;AAAA,MACAI,GAAA;AAAA,QACA,WAAAb,EAAA;AAAA,QACA,OAAAA,EAAA;AAAA,QACA,QAAAA,EAAA;AAAA,QACA,aAAAA,EAAA;AAAA,QACA,OAAAA,EAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA,CAAA;AACA,CAAA;AACA,SAAAc,KAAA;AACA,SAAA,IAAAC,GAAAJ,EAAA;AACA;ACrBA,MAAAK,KAAA;AAAA,EAAqF,CAAAX,EAAA,IAAA,GAAAY;AAAA,EACvC,CAAAZ,EAAA,GAAA,GAAAa;AAAA,EACD,CAAAb,EAAA,UAAA,GAAAc;AAAA,EACO,CAAAd,EAAA,IAAA,GAAAe;AAAA,EACN,CAAAf,EAAA,MAAA,GAAAgB;AAAA,EACE,CAAAhB,EAAA,GAAA,GAAAS;AAEhD,GASOQ,KAAA,CAAAxB,MACH,YAAAkB,GAAAlB,CAAA,GCvBJyB,KAAA,CAAAC,GAAAC,MAAA;AACI,QAAAC,IAAAF,EAAA,IAAA,OAAAC,EAAA,IAAA,GACAE,IAAA,OAAA,KAAAD,EAAA,IAAA;AACA,SAAAC,IAAAA,EAAA,CAAA,IAAA;AACJ,GAMOC,KAAA;AAAA,EAAmC,KAAA;AAAA,EACjC,KAAA,CAAA,EAAA,OAAAJ,GAAA,UAAAK,EAAA,MAAA;AAED,UAAAC,IAAAN,EAAA,cAAA,CAAAO,MAAA;AAEI,YAAAC,IAAA;AAAA,EADAT,GAAAC,GAAAO,CAAA,CACgB;AAChB,aAAA;AAAA,QAAO,SAAA,EAAA,MAAAA,EAAA,MAAA,IAAAA,EAAA,IAAA,QAAAC,EAAA;AAAA,QACwD,OAAAC,GAAA,OAAAF,EAAA,OAAAC,EAAA,MAAA;AAAA,MACF;AAAA,IAC7D,CAAA;AAEJ,WAAAH,EAAAL,EAAA,OAAAM,GAAA,EAAA,gBAAA,IAAA,WAAA,QAAA,CAAA,CAAA,GACA;AAAA,EAAO;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;mECgMII,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;;;AAxIA,UAAAC,IAAAC,GAYAC,IAAAC,GAEAC,IAAAC,GAAA,GACA,EAAA,GAAAC,EAAA,IAAAC,GAAA,EAAA,UAAAR,EAAA,CAAA,GAGAS,IAAAC,EAAA,IAAA,GACAC,IAAA,CAAA,GAEAC,IAAA,MAAA;AAAA,IAAmC,GACnCC,IAAAC,EAAA,MAAAb,EAAA,aAAAA,EAAA,KAAA,YAAA,CAAA,GAEAc,IAAAD,EAAA,MAAAb,EAAA,YAAAjC,EAAA,MAAA,GAEAgD,IAAAF,EAAA,OAAA;AAAA,MAA2C,0BAAAC,EAAA;AAAA,MACG,8BAAA,CAAAA,EAAA;AAAA,IACK,EAAA,GAGnDE,IAAAH,EAAA,OAAA;AAAA,MAA0D,+CAAAb,EAAA;AAAA,IACD,EAAA,GAGzDiB,IAAA/B,GAAAc,EAAA,IAAA,GAEAkB,IAAAC,EAAA,GACAC,IAAAD,EAAA,GACAE,IAAA,IAAAC,EAAA,GACAC,IAAA,IAAAD,EAAA,GACAE,IAAA,IAAAF,EAAA,GACAG,IAAA,IAAAH,EAAA,GAEAI,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,CAAA,GAEAmB,IAAAf,EAAA,MAAAb,EAAA,kBAAAM,EAAA,KAAA,CAAA;AAEA,IAAAuB,GAAA,YAAA;AACI,YAAAnE,IAAA,MAAAuD,EAAA;AAGA,MAAAS,EAAA,QAAA1B,EAAA;AACA,YAAA8B,IAAA,CAAA,EAAA,OAAAC,EAAA,MAAA;AACI,QAAAL,EAAA,QAAAK,EAAA,IAAA,SAAA;AAAA,MAA2C,GAG/CC,IAAA;AAAA,QAAmBC,GAAA;AAAA,QACKC,GAAA,GAAA,CAAAC,IAAA3C,EAAA,CAAA;AAAA,QACiC6B,EAAA,GAAA3D,EAAA,CAAA;AAAA,QAC3B6D,EAAA,GAAA1D,GAAAmC,EAAA,IAAA,CAAA;AAAA,QACoBwB,EAAA,GAAAY,EAAA,SAAA,GAAA,CAAApC,EAAA,QAAA,CAAA;AAAA,QACYyB,EAAA;AAAA,UACzCY,EAAA,kBAAA,GAAA;AAAA,YACmB,cAAAjC,EAAA,YAAA,KAAAE,EAAA,aAAA;AAAA,YAC0D,GAAA,CAAAQ,EAAA,SAAA,EAAA,UAAA,IAAA;AAAA,UACxC,CAAA;AAAA,QACjD;AAAA,QACLuB,EAAA,eAAA,GAAA,CAAAC,MAAAR,EAAAQ,CAAA,CAAA;AAAA,MACsE;AAG1E,MAAAtC,EAAA,YAAA,eACIgC,EAAA,KAAA,CAAAO,GAAA,GAAAC,GAAA,CAAA,CAAA;AAGJ,YAAApD,IAAAgD,EAAA,OAAA;AAAA,QAAiC,KAAApC,EAAA;AAAA,QAClB,YAAA,CAAA,GAAAgC,CAAA;AAAA,MACe,CAAA;AAE9B,MAAAL,EAAA,QAAAvC,EAAA,IAAA,QAEAgC,EAAA,QAAA,IAAAiB,EAAA;AAAA,QAA8B,OAAAjD;AAAA,QAC1B,QAAA8B,EAAA;AAAA,MACkB,CAAA;AAAA,IACrB,CAAA,GAELuB;AAAA,MAAA,MAAAzC,EAAA;AAAA,MACgB,MAAA;AAER,YAAAA,EAAA,YAAA0B,EAAA,OAAA;AACI,gBAAAgB,IAAA1C,EAAA,QAAA;AACA,UAAAoB,EAAA,MAAA,SAAA;AAAA,YAAsB,SAAA;AAAA,cACT,MAAA;AAAA,cACC,IAAAO,EAAA;AAAA,cACY,QAAA3B,EAAA;AAAA,YACJ;AAAA,UAClB,CAAA,GAEJ2B,EAAA,QAAAe;AAAA,QAAsB;AAAA,MAC1B;AAAA,IACJ;AAGJ,UAAAC,IAAA,MAAA;AACI,MAAAzC,EAAA/B,EAAA,QAAAuD,EAAA,KAAA;AAAA,IAAwD;AAG5D,IAAAkB,GAAA,MAAA;AACI,MAAAlB,EAAA,UAAA,QACIxB,EAAA/B,EAAA,QAAAuD,EAAA,KAAA;AAAA,IACJ,CAAA;AAGJ,UAAAmB,IAAApC,EAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[2]}