@transferwise/components 0.0.0-experimental-dddc218 → 0.0.0-experimental-9798491

package/build/styles/modal/Modal.css

@@ -1 +1 @@
-.tw-modal--scrollable{max-height:100%;max-height:-webkit-fill-available}.tw-modal .tw-modal-dialog{background:#fff;background:var(--color-background-elevated);box-shadow:0 5px 15px rgba(0,0,0,.2);transform:translateY(-25%);transition:transform .3s ease-out}.np-theme-personal .tw-modal .tw-modal-dialog{background:#fff;background:var(--color-background-elevated);border-radius:24px;border-radius:var(--radius-large);box-shadow:none}.tw-modal.in .tw-modal-dialog{transform:translate(0)}.tw-modal .tw-modal-content{width:100%}.tw-modal .tw-modal-content .tw-modal-body{flex:1;word-break:break-word}.tw-modal .tw-modal-content .tw-modal-body--scrollable{overflow-y:auto}.tw-modal .tw-modal-content .tw-modal-header{box-shadow:inset 0 -1px 0 0 #e2e6e8}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header{box-shadow:inset 0 -1px 0 0 #0000001a;box-shadow:inset 0 -1px 0 0 var(--color-border-neutral)}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header .np-close-button{margin:-8px -8px -8px 0;margin:calc(var(--size-8)*-1) calc(var(--size-8)*-1) calc(var(--size-8)*-1) 0}.tw-modal .tw-modal-content .tw-modal-header.modal--withoutborder{box-shadow:none}.tw-modal .tw-modal-content .tw-modal-header .tw-icon{fill:#0097c7;fill:var(--color-content-accent);cursor:pointer;display:block}.tw-modal .tw-modal-content .tw-modal-body,.tw-modal .tw-modal-content .tw-modal-footer,.tw-modal .tw-modal-content .tw-modal-header{padding:16px;padding:var(--size-16)}.tw-modal .tw-modal-content .tw-modal-title{max-width:85%}.tw-modal .tw-modal-content .tw-modal-footer{box-shadow:inset 0 1px 0 0 #e2e6e8;padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer{border-top:1px solid #0000001a;border-top:1px solid var(--color-border-neutral)}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,.tw-modal .tw-modal-content .tw-modal-footer.modal--withoutborder{box-shadow:none}.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-body{padding-top:0!important}.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-header{min-height:32px;min-height:var(--size-32);padding-bottom:4px!important}.tw-modal .table,.tw-modal table{background-color:transparent}@media (min-width:576px){.tw-modal .tw-modal-content .tw-modal-body,.tw-modal .tw-modal-content .tw-modal-footer,.tw-modal .tw-modal-content .tw-modal-header{padding:32px 24px;padding:var(--size-32) var(--size-24)}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-body,.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header{padding:24px;padding:var(--size-24)}.tw-modal .tw-modal-compact .tw-modal-header{min-height:56px;min-height:calc(var(--size-8)*7)}.tw-modal .tw-modal-compact .tw-modal-body,.tw-modal .tw-modal-compact .tw-modal-footer,.tw-modal .tw-modal-compact .tw-modal-header{padding-bottom:16px;padding-bottom:var(--size-16);padding-top:16px;padding-top:var(--size-16)}}@media (min-width:480px){.tw-modal-dialog.tw-modal-sm{width:300px}}@media (min-width:576px){.tw-modal{padding:40px;padding:var(--size-40)}.tw-modal .tw-modal-dialog .tw-modal-content{border-radius:10px;border-radius:var(--radius-small)}.tw-modal .tw-modal-dialog.tw-modal-md{width:540px}}@media (min-width:768px){.tw-modal-dialog.tw-modal-lg{width:720px}}@media (min-width:992px){.tw-modal-dialog.tw-modal-xl{width:1000px}}@media (-ms-high-contrast:none){:root .tw-modal,:root .tw-modal .tw-modal-dialog,_:-ms-fullscreen,_:-ms-fullscreen .tw-modal-dialog{height:100%}}
+.tw-modal--scrollable{max-height:100%;max-height:-webkit-fill-available}.tw-modal .tw-modal-dialog{background:#fff;background:var(--color-background-elevated);box-shadow:0 5px 15px rgba(0,0,0,.2);transform:translateY(-25%);transition:transform .3s ease-out}.np-theme-personal .tw-modal .tw-modal-dialog{background:#fff;background:var(--color-background-elevated);border-radius:24px;border-radius:var(--radius-large);box-shadow:none}.tw-modal.in .tw-modal-dialog{transform:translate(0)}.tw-modal .tw-modal-content{width:100%}.tw-modal .tw-modal-content .tw-modal-body{flex:1;word-break:break-word}.tw-modal .tw-modal-content .tw-modal-body--scrollable{overflow-y:auto}.tw-modal .tw-modal-content .tw-modal-header{box-shadow:inset 0 -1px 0 0 #e2e6e8}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header{box-shadow:inset 0 -1px 0 0 #0000001a;box-shadow:inset 0 -1px 0 0 var(--color-border-neutral)}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header .np-close-button{margin:-8px -8px -8px 0;margin:calc(var(--size-8)*-1) calc(var(--size-8)*-1) calc(var(--size-8)*-1) 0}.tw-modal .tw-modal-content .tw-modal-header.modal--withoutborder{box-shadow:none}.tw-modal .tw-modal-content .tw-modal-header .tw-icon{fill:#0097c7;fill:var(--color-content-accent);cursor:pointer;display:block}.tw-modal .tw-modal-content .tw-modal-body,.tw-modal .tw-modal-content .tw-modal-footer,.tw-modal .tw-modal-content .tw-modal-header{padding:16px;padding:var(--size-16)}.tw-modal .tw-modal-content .tw-modal-title{max-width:85%}.tw-modal .tw-modal-content .tw-modal-footer{box-shadow:inset 0 1px 0 0 #e2e6e8;padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer{border-top:1px solid #0000001a;border-top:1px solid var(--color-border-neutral)}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,.tw-modal .tw-modal-content .tw-modal-footer.modal--withoutborder{box-shadow:none}.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-body{padding-top:0!important}.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-header{min-height:32px;min-height:var(--size-32);padding-bottom:4px!important}.tw-modal .table,.tw-modal table{background-color:transparent}@media (min-width:576px){.tw-modal .tw-modal-content .tw-modal-body,.tw-modal .tw-modal-content .tw-modal-footer,.tw-modal .tw-modal-content .tw-modal-header{padding:32px 24px;padding:var(--size-32) var(--size-24)}.np-theme-personal .tw-modal .tw-modal-content .tw-modal-body,.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header{padding:24px;padding:var(--size-24)}.tw-modal .tw-modal-compact .tw-modal-header{min-height:56px;min-height:calc(var(--size-8)*7)}.tw-modal .tw-modal-compact .tw-modal-body,.tw-modal .tw-modal-compact .tw-modal-footer,.tw-modal .tw-modal-compact .tw-modal-header{padding-bottom:16px;padding-bottom:var(--size-16);padding-top:16px;padding-top:var(--size-16)}}@media (min-width:480px){.tw-modal-dialog.tw-modal-sm{width:300px}}@media (min-width:576px){.tw-modal{padding:40px;padding:var(--size-40)}.tw-modal .tw-modal-dialog .tw-modal-content{border-radius:10px;border-radius:var(--radius-small)}.tw-modal .tw-modal-dialog.tw-modal-md{width:540px}}@media (min-width:768px){.tw-modal-dialog.tw-modal-lg{width:720px}}@media (min-width:992px){.tw-modal-dialog.tw-modal-xl{width:1000px}}@media (-ms-high-contrast:none){:root .tw-modal,_:-ms-fullscreen{height:100%}:root .tw-modal .tw-modal-dialog,_:-ms-fullscreen .tw-modal-dialog{height:100%}}

package/build/styles/moneyInput/MoneyInput.css

@@ -1 +1 @@
-.tw-money-input .tw-money-input__fixed-currency{padding-left:0!important}[dir=rtl] .tw-money-input .tw-money-input__fixed-currency{padding-left:0!important;padding-right:0!important}.tw-money-input .tw-money-input__fixed-currency.input-md .currency-flag{margin-bottom:2px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency.input-md .currency-flag{margin-bottom:1px}.tw-money-input .tw-money-input__fixed-currency.input-lg .currency-flag{margin-bottom:4px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency.input-lg .currency-flag{margin-bottom:3px}.tw-money-input .tw-money-input__fixed-currency .currency-flag{vertical-align:middle}.tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection{font-weight:var(--font-weight-normal)}.tw-money-input__keyline{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border:1px solid #0000001a;border:1px solid var(--color-border-neutral);height:24px;height:var(--size-24);margin-right:24px;margin-right:var(--size-24);transform:translateY(4px);width:2px}[dir=rtl] .tw-money-input__keyline{margin-left:24px;margin-left:var(--size-24);margin-right:0}.tw-money-input__fixed-currency{position:relative}.tw-money-input__fixed-currency span{color:#5d7079;color:var(--color-content-secondary)}__text{font-size:1rem;font-size:var(--font-size-16)}.input-group-sm .np-text-title-subsection,.input-group-sm .tw-money-input__text{font-size:.875rem;font-size:var(--font-size-14)}.input-group-md .np-text-title-subsection{font-size:1rem;font-size:var(--font-size-16)}.input-group-lg .tw-money-input__text{font-size:1.375rem;font-size:var(--font-size-22)}.tw-money-input .amount-currency-select-btn>.np-select>.btn{align-items:center;display:flex;max-height:50px}.tw-money-input .amount-currency-select-btn>.np-select>.btn span:not(.tw-icon){font-weight:400;font-weight:var(--font-weight-regular);min-width:2.6em}.tw-money-input .amount-currency-select-btn>.np-select>.btn .currency-flag{display:inline-block!important;margin-left:2px;margin-right:2px}.tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle{padding:0 16px;padding:0 var(--padding-small);text-align:center}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle,.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle:active,.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle:hover:not(:focus){box-shadow:none}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle .np-text-body-large{overflow:visible;text-overflow:clip}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle .np-text-body-large .tw-money-input__text.np-text-title-subsection{font-weight:600;font-weight:var(--font-weight-semi-bold)}.tw-money-input .amount-currency-select-btn>.np-select>.np-btn>span.tw-icon{position:static}.np-theme-personal .tw-money-input__keyline{display:none}.np-theme-personal .tw-money-input.input-group-sm .form-control{min-height:34px}.np-theme-personal .tw-money-input.input-group-md .amount-currency-select-btn .btn-md,.np-theme-personal .tw-money-input.input-group-md .form-control{min-height:53px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection{color:#768e9c;color:var(--color-content-tertiary);font-weight:600;font-weight:var(--font-weight-semi-bold)}.np-theme-personal .tw-money-input button{border:none}.np-theme-personal .tw-money-input .np-text-title-subsection{color:var(--color-interactive-primary)}.np-theme-personal .tw-money-input .np-select-filter:focus{outline:none}.np-theme-personal .tw-money-input .amount-currency-select-btn .currency-flag{margin-right:0;margin-top:0}.np-theme-personal .tw-money-input .amount-currency-select-btn .np-btn-md .np-text-body-large{margin-left:4px;margin-right:4px}.np-theme-personal .tw-money-input .amount-currency-select-btn .np-btn-lg .np-text-body-large{margin-left:9px;margin-right:9px}
+.tw-money-input .tw-money-input__fixed-currency{padding-left:0!important}[dir=rtl] .tw-money-input .tw-money-input__fixed-currency{padding-left:0!important;padding-right:0!important}.tw-money-input .tw-money-input__fixed-currency.input-md .currency-flag{margin-bottom:2px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency.input-md .currency-flag{margin-bottom:1px}.tw-money-input .tw-money-input__fixed-currency.input-lg .currency-flag{margin-bottom:4px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency.input-lg .currency-flag{margin-bottom:3px}.tw-money-input .tw-money-input__fixed-currency .currency-flag{vertical-align:middle}.tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection{font-weight:var(--font-weight-normal)}.tw-money-input__keyline{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border:1px solid #0000001a;border:1px solid var(--color-border-neutral);height:24px;height:var(--size-24);margin-right:24px;margin-right:var(--size-24);transform:translateY(4px);width:2px}[dir=rtl] .tw-money-input__keyline{margin-left:24px;margin-left:var(--size-24);margin-right:0}.tw-money-input__fixed-currency{position:relative}.tw-money-input__fixed-currency span{color:#5d7079;color:var(--color-content-secondary)}__text{font-size:1rem;font-size:var(--font-size-16)}.input-group-sm .np-text-title-subsection,.input-group-sm .tw-money-input__text{font-size:.875rem;font-size:var(--font-size-14)}.input-group-md .np-text-title-subsection{font-size:1rem;font-size:var(--font-size-16)}.input-group-lg .tw-money-input__text{font-size:1.375rem;font-size:var(--font-size-22)}.tw-money-input .amount-currency-select-btn>.np-select>.btn{align-items:center;display:flex;max-height:50px}.tw-money-input .amount-currency-select-btn>.np-select>.btn span:not(.tw-icon){font-weight:400;font-weight:var(--font-weight-regular);min-width:2.6em}.tw-money-input .amount-currency-select-btn>.np-select>.btn .currency-flag{display:inline-block!important;margin-left:2px;margin-right:2px}.tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle{padding:0 16px;padding:0 var(--padding-small);text-align:center}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle{box-shadow:none}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle:active,.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle:hover:not(:focus){box-shadow:none}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle .np-text-body-large{overflow:visible;text-overflow:clip}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle .np-text-body-large .tw-money-input__text.np-text-title-subsection{font-weight:600;font-weight:var(--font-weight-semi-bold)}.tw-money-input .amount-currency-select-btn>.np-select>.np-btn>span.tw-icon{position:static}.np-theme-personal .tw-money-input__keyline{display:none}.np-theme-personal .tw-money-input.input-group-sm .form-control{min-height:34px}.np-theme-personal .tw-money-input.input-group-md .amount-currency-select-btn .btn-md,.np-theme-personal .tw-money-input.input-group-md .form-control{min-height:53px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection{color:#768e9c;color:var(--color-content-tertiary);font-weight:600;font-weight:var(--font-weight-semi-bold)}.np-theme-personal .tw-money-input button{border:none}.np-theme-personal .tw-money-input .np-text-title-subsection{color:var(--color-interactive-primary)}.np-theme-personal .tw-money-input .np-select-filter:focus{outline:none}.np-theme-personal .tw-money-input .amount-currency-select-btn .currency-flag{margin-right:0;margin-top:0}.np-theme-personal .tw-money-input .amount-currency-select-btn .np-btn-md .np-text-body-large{margin-left:4px;margin-right:4px}.np-theme-personal .tw-money-input .amount-currency-select-btn .np-btn-lg .np-text-body-large{margin-left:9px;margin-right:9px}

package/build/styles/navigationOption/NavigationOption.css

@@ -1 +1 @@
-.np-navigation-option{--ring-outline-offset:0;background-color:transparent;text-align:left;text-decoration:none;width:100%}[dir=rtl] .np-navigation-option{border-right:0}[dir=rtl] .np-navigation-option,html:not([dir=rtl]) .np-navigation-option{border-left:0}html:not([dir=rtl]) .np-navigation-option{border-right:0}[dir=rtl] .np-navigation-option{text-align:right}.np-navigation-option:focus,.np-navigation-option:hover{text-decoration:none}.np-navigation-option:not(.disabled,:disabled):hover .tw-avatar__content{background-color:#fff;background-color:var(--color-background-screen)}.np-theme-personal .np-navigation-option:not(.disabled,:disabled):hover .tw-avatar__content{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.np-navigation-option .circle{border:none}.np-navigation-option:focus{outline:none}.np-navigation-option:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-theme-personal .np-navigation-option{text-decoration:none}.np-navigation-option__chevron{background:none;border:none;outline:none;padding:0}.np-navigation-option__chevron:not(.disabled,:disabled):focus,.np-navigation-option__chevron:not(.disabled,:disabled):hover{color:#0084b3;color:var(--color-content-accent-hover)}.np-navigation-option__chevron:not(.disabled,:disabled):active{color:#0077a5;color:var(--color-content-accent-active)}.np-theme-personal .np-option__container-aligned{width:calc(100% + 32px);width:calc(100% + var(--space-content-horizontal)*2)}
+.np-navigation-option{--ring-outline-offset:0;background-color:transparent;text-align:left;text-decoration:none;width:100%}[dir=rtl] .np-navigation-option{border-right:0}html:not([dir=rtl]) .np-navigation-option{border-left:0}[dir=rtl] .np-navigation-option{border-left:0}html:not([dir=rtl]) .np-navigation-option{border-right:0}[dir=rtl] .np-navigation-option{text-align:right}.np-navigation-option:focus,.np-navigation-option:hover{text-decoration:none}.np-navigation-option:not(.disabled,:disabled):hover .tw-avatar__content{background-color:#fff;background-color:var(--color-background-screen)}.np-theme-personal .np-navigation-option:not(.disabled,:disabled):hover .tw-avatar__content{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.np-navigation-option .circle{border:none}.np-navigation-option:focus{outline:none}.np-navigation-option:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-theme-personal .np-navigation-option{text-decoration:none}.np-navigation-option__chevron{background:none;border:none;outline:none;padding:0}.np-navigation-option__chevron:not(.disabled,:disabled):focus,.np-navigation-option__chevron:not(.disabled,:disabled):hover{color:#0084b3;color:var(--color-content-accent-hover)}.np-navigation-option__chevron:not(.disabled,:disabled):active{color:#0077a5;color:var(--color-content-accent-active)}.np-theme-personal .np-option__container-aligned{width:calc(100% + 32px);width:calc(100% + var(--space-content-horizontal)*2)}

package/build/styles/overlayHeader/OverlayHeader.css

@@ -1 +1 @@
-.np-overlay-header .np-overlay-header__content{max-width:1164px;min-height:97px;min-width:320px;width:100%}.np-overlay-header .np-overlay-header__content .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);width:1px}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator,html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-left:16px!important}html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important}.np-theme-personal .np-overlay-header{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral)}.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,.np-theme-personal--dark .np-overlay-header .np-flow-header__left path,.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path{fill:var(--color-interactive-primary)}
+.np-overlay-header .np-overlay-header__content{max-width:1164px;min-height:97px;min-width:320px;width:100%}.np-overlay-header .np-overlay-header__content .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);width:1px}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important}html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-left:16px!important}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator{margin-left:16px!important}html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important}.np-theme-personal .np-overlay-header{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral)}.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,.np-theme-personal--dark .np-overlay-header .np-flow-header__left path,.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path{fill:var(--color-interactive-primary)}

package/build/styles/select/Select.css

@@ -1 +1 @@
-.np-select .np-dropdown-toggle{background-color:#fff;background-color:var(--color-background-screen);border:1px solid #c9cbce;border:1px solid var(--color-interactive-secondary);border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);font-weight:400;font-weight:var(--font-weight-regular);max-width:100%;overflow:hidden;padding-left:16px;padding-left:var(--size-16);text-align:left;text-overflow:ellipsis}[dir=rtl] .np-select .np-dropdown-toggle{text-align:right}.np-select .np-dropdown-toggle:focus-visible{outline:none}.np-theme-personal .np-select .np-dropdown-toggle{border-radius:10px;border-radius:var(--radius-small)}.has-error .np-select .np-dropdown-toggle{border:1px solid #e74848;border:1px solid var(--color-interactive-negative)}.np-select .np-dropdown-toggle-navy{--color-content-accent:#00b9ff;--color-content-primary:#fff;--color-content-secondary:#c9cbce;--color-background-screen:#2e4369;--color-interactive-secondary:#2e4369;--color-interactive-secondary-hover:#2e4369}.np-select .np-dropdown-toggle.np-btn-sm{padding-right:32px;padding-right:var(--size-32)}[dir=rtl] .np-select .np-dropdown-toggle.np-btn-sm{padding-left:32px;padding-left:var(--size-32);padding-right:0}.np-select .np-dropdown-toggle.np-btn-md{padding-right:40px;padding-right:var(--size-40)}[dir=rtl] .np-select .np-dropdown-toggle.np-btn-md{padding-left:40px;padding-left:var(--size-40);padding-right:0}.np-select .np-dropdown-toggle.np-btn-lg{padding-right:48px;padding-right:var(--size-48)}[dir=rtl] .np-select .np-dropdown-toggle.np-btn-lg{padding-left:48px;padding-left:var(--size-48);padding-right:0}.np-select .np-dropdown-toggle .np-select-chevron{margin:0;position:absolute;right:16px;right:var(--size-16);top:16px;top:var(--size-16)}[dir=rtl] .np-select .np-dropdown-toggle .np-select-chevron{left:16px;left:var(--size-16);margin:0;right:auto}.np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron{right:8px;right:var(--size-8);top:8px;top:var(--size-8)}[dir=rtl] .np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron{left:8px;left:var(--size-8);right:auto}.np-select .np-dropdown-toggle.np-btn-lg .np-select-chevron{top:27px}.np-select .btn:not(.disabled,:disabled){color:#37517e;color:var(--color-content-primary)}.np-select .btn:not(.disabled,:disabled):hover{border-color:#b5b7ba;border-color:var(--color-interactive-secondary-hover)}.np-select .btn:not(.disabled,:disabled):focus{border-color:#00a2dd;border-color:var(--color-interactive-accent)}.np-theme-personal .np-select .btn:not(.disabled,:disabled):focus{border-color:#c9cbce;border-color:var(--color-interactive-secondary)}.np-option-content{max-width:100%}.np-option-content .d-flex:last-child{max-width:calc(100% - 32px)}.np-dropdown-menu-desktop{max-height:70vh;max-height:70svh;max-width:calc(100vw - 32px);min-width:160px}@media (min-height:592px){.np-dropdown-menu-desktop{max-height:592px}}.np-dropdown-menu{background-color:#fff;background-color:var(--color-background-screen);border-radius:10px;border-radius:var(--radius-small);list-style:none;margin:0;overflow:auto;padding:0;text-align:left}[dir=rtl] .np-dropdown-menu{padding:0;text-align:right}.np-theme-personal .np-dropdown-menu{border-radius:10px;border-radius:var(--radius-small)}.np-dropdown-menu-sm{width:220px}.np-dropdown-menu-md{width:300px}.np-dropdown-menu-lg{width:420px}.np-dropdown-menu .np-dropdown-item--focused{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border-radius:10px;border-radius:var(--radius-small)}.np-dropdown-menu .np-dropdown-item>a{white-space:normal}.np-dropdown-menu>li>a{clear:both;color:#37517e;color:var(--color-content-primary);display:block;font-size:1rem;font-size:var(--font-size-16);font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);letter-spacing:-.006em;line-height:1.5;line-height:var(--line-height-body);line-height:155%;padding:12px 16px;padding:var(--size-12) var(--size-16);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.np-dropdown-menu>li>a,.np-theme-personal .np-dropdown-menu>li>a{border-radius:10px;border-radius:var(--radius-small)}.np-dropdown-menu>li:first-child>a{border-top-left-radius:3px;border-top-right-radius:3px}.np-theme-personal .np-dropdown-menu>li:first-child>a{border-top-left-radius:10px;border-top-left-radius:var(--radius-small);border-top-right-radius:10px;border-top-right-radius:var(--radius-small)}.np-dropdown-menu>li:last-child>a{border-bottom-left-radius:3px;border-bottom-right-radius:3px}.np-theme-personal .np-dropdown-menu>li:last-child>a{border-bottom-left-radius:10px;border-bottom-left-radius:var(--radius-small);border-bottom-right-radius:10px;border-bottom-right-radius:var(--radius-small)}.np-dropdown-menu>li:not(.active,.selected):not(:has(input))>a:not([disabled],.disabled):focus,.np-dropdown-menu>li:not(.active,.selected):not(:has(input))>a:not([disabled],.disabled):hover{background-color:#86a7bd1a;background-color:var(--color-background-neutral);color:#37517e;color:var(--color-content-primary)}.np-dropdown-menu>li:not(.active,.selected):not(:has(input))>a:not([disabled],.disabled):active{background-color:#37517e;color:#fff}.np-dropdown-menu>.active>a,.np-dropdown-menu>.active>a:focus,.np-dropdown-menu>.active>a:hover,.np-dropdown-menu>.selected>a,.np-dropdown-menu>.selected>a:focus,.np-dropdown-menu>.selected>a:hover{background-color:#37517e;color:#fff}.np-dropdown-menu>.active>a strong,.np-dropdown-menu>.selected>a strong{color:inherit}.np-dropdown-menu>.active>a .np-text-body-default,.np-dropdown-menu>.selected>a .np-text-body-default{color:#c9cbce}.np-dropdown-menu .input-group-addon,.np-dropdown-menu .np-select-filter{border:0}.np-dropdown-menu .np-separator{background-color:#86a7bd1a;background-color:var(--color-background-neutral);height:1px;margin:0;overflow:hidden}.np-dropdown-menu .np-dropdown-header{color:#5d7079;color:var(--color-content-secondary);display:block;font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);line-height:1.5;line-height:var(--line-height-body);padding:8px 16px;padding:var(--size-8) var(--size-16);white-space:nowrap}.np-dropdown-menu .currency-flag,.np-dropdown-menu .tw-icon,.np-select .currency-flag,.np-select .tw-icon{display:inline-block;margin-right:8px;margin-right:var(--size-8);vertical-align:middle}[dir=rtl] .np-dropdown-menu .currency-flag,[dir=rtl] .np-dropdown-menu .tw-icon,[dir=rtl] .np-select .currency-flag,[dir=rtl] .np-select .tw-icon{margin-left:8px;margin-left:var(--size-8);margin-right:0}.np-dropdown-menu .currency-flag,.np-select .currency-flag{margin-top:3px}.np-dropdown-menu .np-text-body-default,.np-select .np-text-body-default{color:#5d7079;color:var(--color-content-secondary)}.np-dropdown-menu .tw-icon-search,.np-select .tw-icon-search{margin-right:0}.np-theme-personal .currency-flag{margin-top:0}.np-theme-personal .np-select .np-dropdown-toggle{background-color:unset;border:none;box-shadow:inset 0 0 0 1px #c9cbce;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary);transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out}.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled,:disabled):hover{box-shadow:inset 0 0 0 2px #b5b7ba;box-shadow:inset 0 0 0 2px var(--color-interactive-secondary-hover)}.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus,.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus-visible,.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus-within{box-shadow:inset 0 0 0 3px var(--color-interactive-primary)}.np-theme-personal .has-error .np-select .np-dropdown-toggle,.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled,:disabled):hover{box-shadow:inset 0 0 0 2px var(--color-sentiment-negative)}.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus,.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus-visible,.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus-within{box-shadow:inset 0 0 0 3px var(--color-sentiment-negative)}.np-theme-personal .np-dropdown-menu{outline:none}.np-theme-personal .np-dropdown-menu .active a,.np-theme-personal .np-dropdown-menu .active a:focus,.np-theme-personal .np-dropdown-menu .active a:hover,.np-theme-personal .np-dropdown-menu .selected a,.np-theme-personal .np-dropdown-menu .selected a:focus,.np-theme-personal .np-dropdown-menu .selected a:hover{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary)}.np-theme-personal .np-dropdown-menu .active a .body-2,.np-theme-personal .np-dropdown-menu .active a .np-text-body-default,.np-theme-personal .np-dropdown-menu .active a:focus .body-2,.np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,.np-theme-personal .np-dropdown-menu .active a:hover .body-2,.np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,.np-theme-personal .np-dropdown-menu .selected a .body-2,.np-theme-personal .np-dropdown-menu .selected a .np-text-body-default,.np-theme-personal .np-dropdown-menu .selected a:focus .body-2,.np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,.np-theme-personal .np-dropdown-menu .selected a:hover .body-2,.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default{color:var(--color-interactive-primary)}.np-theme-personal .np-dropdown-menu li:not(.active,.selected):not(:has(input)) a:not([disabled],.disabled):active{background-color:var(--color-background-neutral-active)!important;color:var(--color-interactive-primary)!important}.np-theme-personal .np-dropdown-menu li:not(.active,.selected):not(:has(input)) a:not([disabled],.disabled):active .body-2,.np-theme-personal .np-dropdown-menu li:not(.active,.selected):not(:has(input)) a:not([disabled],.disabled):active .np-text-body-default{color:var(--color-interactive-primary)}.np-theme-personal .np-dropdown-menu .np-dropdown-item{outline:none}.np-theme-personal .np-dropdown-menu .np-dropdown-item--focused{box-shadow:inset 0 0 0 2px var(--color-interactive-primary)}
+.np-select .np-dropdown-toggle{background-color:#fff;background-color:var(--color-background-screen);border:1px solid #c9cbce;border:1px solid var(--color-interactive-secondary);border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);font-weight:400;font-weight:var(--font-weight-regular);max-width:100%;overflow:hidden;padding-left:16px;padding-left:var(--size-16);text-align:left;text-overflow:ellipsis}[dir=rtl] .np-select .np-dropdown-toggle{text-align:right}.np-select .np-dropdown-toggle:focus-visible{outline:none}.np-theme-personal .np-select .np-dropdown-toggle{border-radius:10px;border-radius:var(--radius-small)}.has-error .np-select .np-dropdown-toggle{border:1px solid #e74848;border:1px solid var(--color-interactive-negative)}.np-select .np-dropdown-toggle-navy{--color-content-accent:#00b9ff;--color-content-primary:#fff;--color-content-secondary:#c9cbce;--color-background-screen:#2e4369;--color-interactive-secondary:#2e4369;--color-interactive-secondary-hover:#2e4369}.np-select .np-dropdown-toggle.np-btn-sm{padding-right:32px;padding-right:var(--size-32)}[dir=rtl] .np-select .np-dropdown-toggle.np-btn-sm{padding-left:32px;padding-left:var(--size-32);padding-right:0}.np-select .np-dropdown-toggle.np-btn-md{padding-right:40px;padding-right:var(--size-40)}[dir=rtl] .np-select .np-dropdown-toggle.np-btn-md{padding-left:40px;padding-left:var(--size-40);padding-right:0}.np-select .np-dropdown-toggle.np-btn-lg{padding-right:48px;padding-right:var(--size-48)}[dir=rtl] .np-select .np-dropdown-toggle.np-btn-lg{padding-left:48px;padding-left:var(--size-48);padding-right:0}.np-select .np-dropdown-toggle .np-select-chevron{margin:0;position:absolute;right:16px;right:var(--size-16);top:16px;top:var(--size-16)}[dir=rtl] .np-select .np-dropdown-toggle .np-select-chevron{margin:0}[dir=rtl] .np-select .np-dropdown-toggle .np-select-chevron{left:16px;left:var(--size-16);right:auto}.np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron{right:8px;right:var(--size-8);top:8px;top:var(--size-8)}[dir=rtl] .np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron{left:8px;left:var(--size-8);right:auto}.np-select .np-dropdown-toggle.np-btn-lg .np-select-chevron{top:27px}.np-select .btn:not(.disabled,:disabled){color:#37517e;color:var(--color-content-primary)}.np-select .btn:not(.disabled,:disabled):hover{border-color:#b5b7ba;border-color:var(--color-interactive-secondary-hover)}.np-select .btn:not(.disabled,:disabled):focus{border-color:#00a2dd;border-color:var(--color-interactive-accent)}.np-theme-personal .np-select .btn:not(.disabled,:disabled):focus{border-color:#c9cbce;border-color:var(--color-interactive-secondary)}.np-option-content{max-width:100%}.np-option-content .d-flex:last-child{max-width:calc(100% - 32px)}.np-dropdown-menu-desktop{max-height:70vh;max-height:70svh;max-width:calc(100vw - 32px);min-width:160px}@media (min-height:592px){.np-dropdown-menu-desktop{max-height:592px}}.np-dropdown-menu{background-color:#fff;background-color:var(--color-background-screen);border-radius:10px;border-radius:var(--radius-small);list-style:none;margin:0;overflow:auto;padding:0;text-align:left}[dir=rtl] .np-dropdown-menu{padding:0}[dir=rtl] .np-dropdown-menu{text-align:right}.np-theme-personal .np-dropdown-menu{border-radius:10px;border-radius:var(--radius-small)}.np-dropdown-menu-sm{width:220px}.np-dropdown-menu-md{width:300px}.np-dropdown-menu-lg{width:420px}.np-dropdown-menu .np-dropdown-item--focused{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border-radius:10px;border-radius:var(--radius-small)}.np-dropdown-menu .np-dropdown-item>a{white-space:normal}.np-dropdown-menu>li>a{border-radius:10px;border-radius:var(--radius-small);clear:both;color:#37517e;color:var(--color-content-primary);display:block;font-size:1rem;font-size:var(--font-size-16);font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);letter-spacing:-.006em;line-height:1.5;line-height:var(--line-height-body);line-height:155%;padding:12px 16px;padding:var(--size-12) var(--size-16);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.np-theme-personal .np-dropdown-menu>li>a{border-radius:10px;border-radius:var(--radius-small)}.np-dropdown-menu>li:first-child>a{border-top-left-radius:3px;border-top-right-radius:3px}.np-theme-personal .np-dropdown-menu>li:first-child>a{border-top-left-radius:10px;border-top-left-radius:var(--radius-small);border-top-right-radius:10px;border-top-right-radius:var(--radius-small)}.np-dropdown-menu>li:last-child>a{border-bottom-left-radius:3px;border-bottom-right-radius:3px}.np-theme-personal .np-dropdown-menu>li:last-child>a{border-bottom-left-radius:10px;border-bottom-left-radius:var(--radius-small);border-bottom-right-radius:10px;border-bottom-right-radius:var(--radius-small)}.np-dropdown-menu>li:not(.active,.selected):not(:has(input))>a:not([disabled],.disabled):focus,.np-dropdown-menu>li:not(.active,.selected):not(:has(input))>a:not([disabled],.disabled):hover{background-color:#86a7bd1a;background-color:var(--color-background-neutral);color:#37517e;color:var(--color-content-primary)}.np-dropdown-menu>li:not(.active,.selected):not(:has(input))>a:not([disabled],.disabled):active{background-color:#37517e;color:#fff}.np-dropdown-menu>.active>a,.np-dropdown-menu>.active>a:focus,.np-dropdown-menu>.active>a:hover,.np-dropdown-menu>.selected>a,.np-dropdown-menu>.selected>a:focus,.np-dropdown-menu>.selected>a:hover{background-color:#37517e;color:#fff}.np-dropdown-menu>.active>a strong,.np-dropdown-menu>.selected>a strong{color:inherit}.np-dropdown-menu>.active>a .np-text-body-default,.np-dropdown-menu>.selected>a .np-text-body-default{color:#c9cbce}.np-dropdown-menu .input-group-addon,.np-dropdown-menu .np-select-filter{border:0}.np-dropdown-menu .np-separator{background-color:#86a7bd1a;background-color:var(--color-background-neutral);height:1px;margin:0;overflow:hidden}.np-dropdown-menu .np-dropdown-header{color:#5d7079;color:var(--color-content-secondary);display:block;font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);line-height:1.5;line-height:var(--line-height-body);padding:8px 16px;padding:var(--size-8) var(--size-16);white-space:nowrap}.np-dropdown-menu .currency-flag,.np-dropdown-menu .tw-icon,.np-select .currency-flag,.np-select .tw-icon{display:inline-block;margin-right:8px;margin-right:var(--size-8);vertical-align:middle}[dir=rtl] .np-dropdown-menu .currency-flag,[dir=rtl] .np-dropdown-menu .tw-icon,[dir=rtl] .np-select .currency-flag,[dir=rtl] .np-select .tw-icon{margin-left:8px;margin-left:var(--size-8);margin-right:0}.np-dropdown-menu .currency-flag,.np-select .currency-flag{margin-top:3px}.np-dropdown-menu .np-text-body-default,.np-select .np-text-body-default{color:#5d7079;color:var(--color-content-secondary)}.np-dropdown-menu .tw-icon-search,.np-select .tw-icon-search{margin-right:0}.np-theme-personal .currency-flag{margin-top:0}.np-theme-personal .np-select .np-dropdown-toggle{background-color:unset;border:none;box-shadow:inset 0 0 0 1px #c9cbce;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary);transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out}.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled,:disabled):hover{box-shadow:inset 0 0 0 2px #b5b7ba;box-shadow:inset 0 0 0 2px var(--color-interactive-secondary-hover)}.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus,.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus-visible,.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus-within{box-shadow:inset 0 0 0 3px var(--color-interactive-primary)}.np-theme-personal .has-error .np-select .np-dropdown-toggle,.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled,:disabled):hover{box-shadow:inset 0 0 0 2px var(--color-sentiment-negative)}.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus,.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus-visible,.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled,:disabled):focus-within{box-shadow:inset 0 0 0 3px var(--color-sentiment-negative)}.np-theme-personal .np-dropdown-menu{outline:none}.np-theme-personal .np-dropdown-menu .active a,.np-theme-personal .np-dropdown-menu .active a:focus,.np-theme-personal .np-dropdown-menu .active a:hover,.np-theme-personal .np-dropdown-menu .selected a,.np-theme-personal .np-dropdown-menu .selected a:focus,.np-theme-personal .np-dropdown-menu .selected a:hover{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary)}.np-theme-personal .np-dropdown-menu .active a .body-2,.np-theme-personal .np-dropdown-menu .active a .np-text-body-default,.np-theme-personal .np-dropdown-menu .active a:focus .body-2,.np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,.np-theme-personal .np-dropdown-menu .active a:hover .body-2,.np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,.np-theme-personal .np-dropdown-menu .selected a .body-2,.np-theme-personal .np-dropdown-menu .selected a .np-text-body-default,.np-theme-personal .np-dropdown-menu .selected a:focus .body-2,.np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,.np-theme-personal .np-dropdown-menu .selected a:hover .body-2,.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default{color:var(--color-interactive-primary)}.np-theme-personal .np-dropdown-menu li:not(.active,.selected):not(:has(input)) a:not([disabled],.disabled):active{background-color:var(--color-background-neutral-active)!important;color:var(--color-interactive-primary)!important}.np-theme-personal .np-dropdown-menu li:not(.active,.selected):not(:has(input)) a:not([disabled],.disabled):active .body-2,.np-theme-personal .np-dropdown-menu li:not(.active,.selected):not(:has(input)) a:not([disabled],.disabled):active .np-text-body-default{color:var(--color-interactive-primary)}.np-theme-personal .np-dropdown-menu .np-dropdown-item{outline:none}.np-theme-personal .np-dropdown-menu .np-dropdown-item--focused{box-shadow:inset 0 0 0 2px var(--color-interactive-primary)}

package/build/styles/slidingPanel/SlidingPanel.css

@@ -1 +1 @@
-.sliding-panel{background:#fff;background:var(--color-background-elevated);position:absolute;transform:translateX(-100%);transition:transform .35s cubic-bezier(0,.94,.62,1);z-index:1030}[dir=rtl] .sliding-panel{transform:translateX(100%)}.sliding-panel.sliding-panel--fixed{position:fixed}.sliding-panel.sliding-panel--open-left,.sliding-panel.sliding-panel--open-right{bottom:0;top:0}.sliding-panel.sliding-panel--open-right{right:0;transform:translateX(100%)}[dir=rtl] .sliding-panel.sliding-panel--open-right{left:0;right:auto;transform:translateX(-100%)}.sliding-panel.sliding-panel--open-left{left:0;transform:translateX(-100%)}[dir=rtl] .sliding-panel.sliding-panel--open-left{left:auto;right:0;transform:translateX(100%)}.sliding-panel.sliding-panel-enter-done.sliding-panel--open-left,.sliding-panel.sliding-panel-enter-done.sliding-panel--open-right{transform:translateX(0)}.sliding-panel.sliding-panel-enter-done.sliding-panel--open-bottom,.sliding-panel.sliding-panel-enter-done.sliding-panel--open-top{transform:translateY(0)}.sliding-panel.sliding-panel--open-bottom,.sliding-panel.sliding-panel--open-top{left:0;right:0;width:100%}[dir=rtl] .sliding-panel.sliding-panel--open-bottom,[dir=rtl] .sliding-panel.sliding-panel--open-top{left:0;left:auto;right:auto;right:0}.sliding-panel.sliding-panel--open-top{top:0;transform:translateY(-100%)}.sliding-panel.sliding-panel--open-bottom{bottom:0;transform:translateY(100%)}.sliding-panel.sliding-panel--border-top{box-shadow:inset 0 -1px 0 0 #e2e6e8}.sliding-panel.sliding-panel--border-right{box-shadow:inset 1px 0 0 0 #e2e6e8}.sliding-panel.sliding-panel--border-bottom{box-shadow:inset 0 1px 0 0 #e2e6e8}.sliding-panel.sliding-panel--border-left{box-shadow:inset -1px 0 0 0 #e2e6e8}.np-theme-personal .sliding-panel.sliding-panel--border-top{box-shadow:inset 0 -1px 0 0 #0000001a;box-shadow:inset 0 -1px 0 0 var(--color-border-neutral)}.np-theme-personal .sliding-panel.sliding-panel--border-right{box-shadow:inset 1px 0 0 0 #0000001a;box-shadow:inset 1px 0 0 0 var(--color-border-neutral)}.np-theme-personal .sliding-panel.sliding-panel--border-bottom{box-shadow:inset 0 1px 0 0 #0000001a;box-shadow:inset 0 1px 0 0 var(--color-border-neutral)}.np-theme-personal .sliding-panel.sliding-panel--border-left{box-shadow:inset -1px 0 0 0 #0000001a;box-shadow:inset -1px 0 0 0 var(--color-border-neutral)}
+.sliding-panel{background:#fff;background:var(--color-background-elevated);position:absolute;transform:translateX(-100%);transition:transform .35s cubic-bezier(0,.94,.62,1);z-index:1030}[dir=rtl] .sliding-panel{transform:translateX(100%)}.sliding-panel.sliding-panel--fixed{position:fixed}.sliding-panel.sliding-panel--open-left,.sliding-panel.sliding-panel--open-right{bottom:0;top:0}.sliding-panel.sliding-panel--open-right{right:0;transform:translateX(100%)}[dir=rtl] .sliding-panel.sliding-panel--open-right{transform:translateX(-100%)}[dir=rtl] .sliding-panel.sliding-panel--open-right{left:0;right:auto}.sliding-panel.sliding-panel--open-left{left:0;transform:translateX(-100%)}[dir=rtl] .sliding-panel.sliding-panel--open-left{transform:translateX(100%)}[dir=rtl] .sliding-panel.sliding-panel--open-left{left:auto;right:0}.sliding-panel.sliding-panel-enter-done.sliding-panel--open-left,.sliding-panel.sliding-panel-enter-done.sliding-panel--open-right{transform:translateX(0)}.sliding-panel.sliding-panel-enter-done.sliding-panel--open-bottom,.sliding-panel.sliding-panel-enter-done.sliding-panel--open-top{transform:translateY(0)}.sliding-panel.sliding-panel--open-bottom,.sliding-panel.sliding-panel--open-top{left:0;right:0;width:100%}[dir=rtl] .sliding-panel.sliding-panel--open-bottom,[dir=rtl] .sliding-panel.sliding-panel--open-top{left:0;right:auto}[dir=rtl] .sliding-panel.sliding-panel--open-bottom,[dir=rtl] .sliding-panel.sliding-panel--open-top{left:auto;right:0}.sliding-panel.sliding-panel--open-top{top:0;transform:translateY(-100%)}.sliding-panel.sliding-panel--open-bottom{bottom:0;transform:translateY(100%)}.sliding-panel.sliding-panel--border-top{box-shadow:inset 0 -1px 0 0 #e2e6e8}.sliding-panel.sliding-panel--border-right{box-shadow:inset 1px 0 0 0 #e2e6e8}.sliding-panel.sliding-panel--border-bottom{box-shadow:inset 0 1px 0 0 #e2e6e8}.sliding-panel.sliding-panel--border-left{box-shadow:inset -1px 0 0 0 #e2e6e8}.np-theme-personal .sliding-panel.sliding-panel--border-top{box-shadow:inset 0 -1px 0 0 #0000001a;box-shadow:inset 0 -1px 0 0 var(--color-border-neutral)}.np-theme-personal .sliding-panel.sliding-panel--border-right{box-shadow:inset 1px 0 0 0 #0000001a;box-shadow:inset 1px 0 0 0 var(--color-border-neutral)}.np-theme-personal .sliding-panel.sliding-panel--border-bottom{box-shadow:inset 0 1px 0 0 #0000001a;box-shadow:inset 0 1px 0 0 var(--color-border-neutral)}.np-theme-personal .sliding-panel.sliding-panel--border-left{box-shadow:inset -1px 0 0 0 #0000001a;box-shadow:inset -1px 0 0 0 var(--color-border-neutral)}

package/build/styles/snackbar/Snackbar.css

@@ -1 +1 @@
-.snackbar{bottom:0;left:0;position:fixed;right:0;text-align:center;z-index:1060}[dir=rtl] .snackbar{left:auto;left:0;right:0}.snackbar__text{align-items:center;background:#37517e;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.25);color:#fff;display:inline-flex;font-size:.875rem;font-size:var(--font-size-14);justify-content:space-between;margin:0 16px;margin:0 var(--size-16);padding:8px 16px;padding:var(--size-8) var(--size-16);text-align:left;transition:.4s cubic-bezier(.215,.61,.355,1);width:calc(100% - 32px);width:calc(100% - var(--size-32))}[dir=rtl] .snackbar__text{text-align:right}.np-theme-personal .snackbar__text{background:var(--color-contrast-theme);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 2px 4px 0 rgba(69,71,69,.35);color:var(--color-contrast-overlay);position:relative}.np-theme-personal .snackbar__text:after{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border-radius:inherit;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.np-theme-personal--dark .snackbar__text,.np-theme-personal--forest-green .snackbar__text{box-shadow:none}@media (min-width:576px){.snackbar__text{max-width:600px;width:auto}}.snackbar__text__action{flex-shrink:0;margin-left:16px;margin-left:var(--size-16)}[dir=rtl] .snackbar__text__action{margin-left:0;margin-right:16px;margin-right:var(--size-16)}.snackbar__text-container-enter,.snackbar__text-container-exit{transform:translateY(calc(100% + 10px))}.snackbar__text-container-enter-active{transform:translateY(-16px);transform:translateY(calc(-16px - env(safe-area-inset-bottom)))}@media (min-width:576px){.snackbar__text-container-enter-active{transform:translateY(-24px)}}
+.snackbar{bottom:0;left:0;position:fixed;right:0;text-align:center;z-index:1060}[dir=rtl] .snackbar{left:auto}[dir=rtl] .snackbar{left:0;right:0}.snackbar__text{align-items:center;background:#37517e;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.25);color:#fff;display:inline-flex;font-size:.875rem;font-size:var(--font-size-14);justify-content:space-between;margin:0 16px;margin:0 var(--size-16);padding:8px 16px;padding:var(--size-8) var(--size-16);text-align:left;transition:.4s cubic-bezier(.215,.61,.355,1);width:calc(100% - 32px);width:calc(100% - var(--size-32))}[dir=rtl] .snackbar__text{text-align:right}.np-theme-personal .snackbar__text{background:var(--color-contrast-theme);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 2px 4px 0 rgba(69,71,69,.35);color:var(--color-contrast-overlay);position:relative}.np-theme-personal .snackbar__text:after{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border-radius:inherit;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.np-theme-personal--dark .snackbar__text,.np-theme-personal--forest-green .snackbar__text{box-shadow:none}@media (min-width:576px){.snackbar__text{max-width:600px;width:auto}}.snackbar__text__action{flex-shrink:0;margin-left:16px;margin-left:var(--size-16)}[dir=rtl] .snackbar__text__action{margin-left:0;margin-right:16px;margin-right:var(--size-16)}.snackbar__text-container-enter,.snackbar__text-container-exit{transform:translateY(calc(100% + 10px))}.snackbar__text-container-enter-active{transform:translateY(-16px);transform:translateY(calc(-16px - env(safe-area-inset-bottom)))}@media (min-width:576px){.snackbar__text-container-enter-active{transform:translateY(-24px)}}

package/build/styles/stepper/Stepper.css

@@ -1 +1 @@
-.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default;font-weight:600}.np-theme-personal .tw-stepper__step--active~li:not(.tw-stepper__step--has-tooltip:hover) .tw-stepper__step-label:not(:active,:focus){opacity:.45}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip:hover{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);font-weight:600;font-weight:var(--font-weight-semi-bold);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}
+.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default;font-weight:600}.np-theme-personal .tw-stepper__step--active~li:not(.tw-stepper__step--has-tooltip:hover) .tw-stepper__step-label:not(:active,:focus){opacity:.45}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip:hover{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);font-weight:600;font-weight:var(--font-weight-semi-bold);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left}[dir=rtl] .progress-bar:after{margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}

package/build/styles/tooltip/Tooltip.css

@@ -1 +1 @@
-.tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{-webkit-user-select:none;-ms-user-select:none;user-select:none;visibility:visible}.tw-tooltip-container .tooltip:not(.in){animation:tw-tooltip-disappear;animation-delay:.15s;animation-duration:0s;animation-fill-mode:both;pointer-events:none}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}.np-tooltip{z-index:1070}.np-panel[data-popper-placement^=right]>.np-panel__content.tooltip-inner .np-panel__arrow{left:-7px}.np-panel[data-popper-placement^=left]>.np-panel__content.tooltip-inner .np-panel__arrow{right:-7px}
+.tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:visible}.tw-tooltip-container .tooltip:not(.in){animation:tw-tooltip-disappear;animation-delay:.15s;animation-duration:0s;animation-fill-mode:both;pointer-events:none}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}.np-tooltip{z-index:1070}.np-panel[data-popper-placement^=right]>.np-panel__content.tooltip-inner .np-panel__arrow{left:-7px}.np-panel[data-popper-placement^=left]>.np-panel__content.tooltip-inner .np-panel__arrow{right:-7px}

package/package.json

@@ -1,31 +1,45 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-dddc218",
+  "version": "0.0.0-experimental-9798491",
   "description": "Neptune React components",
   "license": "Apache-2.0",
-  "main": "./build/umd/polyfill/main.js",
-  "module": "./build/es/polyfill/index.js",
-  "types": "./build/types/index.d.ts",
-  "style": "./build/main.css",
-  "sideEffects": [
-    "*.css"
-  ],
-  "files": [
-    "build",
-    "scripts"
-  ],
   "repository": {
     "type": "git",
     "fullname": "transferwise/neptune",
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
+  "author": "Wise Payments Ltd.",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./build/js/index.mjs",
+      "require": "./build/js/index.js"
+    },
+    "./build/i18n": "./build/i18n",
+    "./build/i18n/*.json": "./build/i18n/*.json",
+    "./build/main.css": "./build/main.css"
+  },
+  "main": "./build/js/index.js",
+  "types": "./build/js/index.d.ts",
+  "files": [
+    "build/",
+    "src/",
+    "!**/*.tsbuildinfo"
+  ],
   "devDependencies": {
     "@formatjs/cli": "^4.8.3",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-image": "^3.0.1",
-    "@rollup/plugin-json": "^4.0.3",
-    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@babel/core": "^7.22.15",
+    "@babel/plugin-transform-runtime": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.3",
     "@storybook/addon-a11y": "^7.0.6",
     "@storybook/addon-actions": "^7.0.6",
     "@storybook/addon-essentials": "^7.0.6",
@@ -48,6 +62,8 @@
     "@testing-library/user-event": "^13.2.1",
     "@transferwise/icons": "^3.6.0",
     "@transferwise/neptune-tokens": "^8.5.0",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/babel__core": "^7.20.1",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.31",
     "@types/react": "^17.0.59",
@@ -56,7 +72,8 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@wise/art": "^2.0.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "babel-plugin-inline-react-svg": "^2.0.1",
+    "babel-plugin-formatjs": "^10.5.3",
+    "babel-plugin-inline-react-svg": "^2.0.2",
     "enzyme": "^3.11.0",
     "html-loader": "^1.3.2",
     "jest": "^27.0.6",
@@ -65,20 +82,18 @@
     "lodash.times": "^4.3.2",
     "npm-watch": "^0.11.0",
     "react-intl": "^5.10.0",
-    "rollup": "^2.34.0",
-    "rollup-plugin-uglify": "^6.0.4",
+    "rollup": "^3.28.1",
     "storybook": "^7.0.6",
     "@transferwise/less-config": "3.0.6",
     "@transferwise/neptune-css": "14.5.2",
-    "@wise/components-theming": "0.8.2"
+    "@wise/components-theming": "0.0.0-experimental-9798491"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.6.0",
     "@transferwise/neptune-css": "^14.5.2",
     "@wise/art": "^2",
-    "@wise/components-theming": "^0.8.2",
+    "@wise/components-theming": "0.0.0-experimental-9798491",
     "currency-flags": "^4.0.2",
-    "prop-types": "^15.7.2",
     "react": ">=16.14",
     "react-dom": ">=16.14",
     "react-intl": "^5.10.0 || ^6"
@@ -86,18 +101,15 @@
   "peerDependenciesMeta": {
     "currency-flags": {
       "optional": true
-    },
-    "prop-types": {
-      "optional": true
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.22.15",
     "@formatjs/intl-locale": "^2.4.14",
     "@popperjs/core": "^2.6.0",
     "@react-spring/web": "~9.6.1",
     "@transferwise/formatting": "^2.1.0",
-    "@transferwise/neptune-validation": "^3.0.12",
+    "@transferwise/neptune-validation": "0.0.0-experimental-9798491",
     "@types/lodash.throttle": "^4.1.7",
     "classnames": "^2.2.6",
     "commonmark": "0.29.1",
@@ -107,6 +119,7 @@
     "lodash.difference": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "lodash.topairs": "^4.3.0",
+    "prop-types": "^15.7.2",
     "react-merge-refs": "^1.1.0",
     "react-popper": "^2.2.4",
     "react-required-if": "^1.0.3",
@@ -133,12 +146,9 @@
     "build": "npm-run-all build:*",
     "build:clean": "rm -rf lib build",
     "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --find-config-path --write src/i18n/*.json",
-    "build:es": "NODE_ENV=es babel src --extensions '.tsx,.js,.ts' -d build/es/polyfill --ignore '**/*.spec.js','**/*.story.js','**/__mocks__','**/test-utils'",
-    "build:es-nopolyfill": "NODE_ENV=es-nopolyfill babel src --extensions '.tsx,.js,.ts' -d build/es/no-polyfill --ignore '**/*.spec.js','**/*.story.js','**/__mocks__','**/test-utils'",
-    "build:umd": "NODE_ENV=umd rollup -c",
-    "build:umd-nopolyfill": "NODE_ENV=umd-nopolyfill rollup -c",
+    "build:js": "rollup --config --sourcemap",
     "build:generate-types": "tsc && node ./scripts/generate-type-declarations.js",
-    "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build/es/polyfill & cpx 'src/**/!(db)/*.{json,svg}' build/es/no-polyfill",
+    "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build/js",
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
     "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",
     "docs": "pnpm build",

package/src/accordion/Accordion.css

@@ -0,0 +1 @@
+.np-accordion-item{display:block;width:100%}.np-accordion-item--open .media{border:0!important}.np-accordion-item .decision:not(.disabled,:disabled):hover{background-color:transparent}.np-accordion-item.np-accordion-item--dark .media-body,.np-accordion-item.np-accordion-item--dark .np-text-title-body{color:#fff}.np-accordion-item__content{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);padding:0 12px 24px;padding:0 var(--size-12) var(--size-24) var(--size-12)}@media (min-width:480px){.np-accordion-item__content.has-icon{padding-left:68px}[dir=rtl] .np-accordion-item__content.has-icon{padding-left:0;padding-right:68px}}.np-accordion-item .np-option .np-option__title{font-weight:600;font-weight:var(--font-weight-semi-bold)}.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content{padding:0 56px 16px;padding:0 var(--size-56) var(--size-16)}.np-theme-personal .np-accordion-item .media{align-items:flex-start;display:flex}.np-theme-personal .np-accordion-item .decision__title{font-size:1.125rem;font-size:var(--font-size-18)}.np-theme-personal .np-accordion-item .np-option .np-option__title{font-size:1.125rem;font-size:var(--font-size-18);letter-spacing:-.01em;letter-spacing:var(--letter-spacing-negative-xs);line-height:1.5rem;line-height:var(--line-height-24);margin-bottom:0}.np-theme-personal .np-accordion-item .np-option .circle-sm{background-color:transparent;border-radius:0;height:24px;height:var(--size-24);width:24px;width:var(--size-24)}.np-theme-personal .np-accordion-item__content{border-bottom:none;color:#5d7079;color:var(--color-content-secondary);padding:0 56px 16px 16px;padding:0 var(--size-56) var(--size-16) var(--size-16)}

package/src/accordion/Accordion.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+
+import { Theme } from '../common';
+
+import AccordionItem from './AccordionItem';
+
+const Accordion = ({ items, onClick, indexOpen, theme }) => {
+  const [itemsOpen, setItemsOpen] = useState(() =>
+    items.map((value, index) => index === indexOpen),
+  );
+  const handleOnClick = (index) => {
+    if (onClick) {
+      onClick(index);
+    }
+    const newItems = [...itemsOpen];
+    newItems[index] = !itemsOpen[index];
+    setItemsOpen(newItems);
+  };
+
+  return items.map((item, index) => (
+    <AccordionItem
+      key={item.id || index}
+      open={itemsOpen[index]}
+      onClick={() => handleOnClick(index)}
+      {...item}
+      theme={theme}
+    />
+  ));
+};
+
+Accordion.propTypes = {
+  indexOpen: PropTypes.number,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      title: PropTypes.node.isRequired,
+      content: PropTypes.node.isRequired,
+      icon: PropTypes.node,
+    }),
+  ).isRequired,
+  onClick: PropTypes.func,
+  theme: PropTypes.oneOf(['light', 'dark']),
+};
+
+Accordion.defaultProps = {
+  indexOpen: -1,
+  onClick: null,
+  theme: Theme.LIGHT,
+};
+
+export default Accordion;

package/src/accordion/Accordion.less

@@ -0,0 +1,81 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+
+.np-accordion-item {
+  display: block;
+  width: 100%;
+
+  &--open {
+    .media {
+      border: 0 !important;
+    }
+  }
+
+  .decision:not(.disabled, :disabled):hover {
+    background-color: transparent;
+  }
+
+  &.np-accordion-item--dark {
+    .media-body,
+    .np-text-title-body {
+      color: @color-navy-content-primary;
+    }
+  }
+
+  &__content {
+    padding: 0 var(--size-12) var(--size-24) var(--size-12);
+    border-bottom: 1px solid var(--color-border-neutral);
+
+    @media (--screen-xs) {
+      &.has-icon {
+        .padding(left, 68px);
+      }
+    }
+  }
+
+  .np-option {
+    .np-option__title { 
+      font-weight: var(--font-weight-semi-bold);
+    } 
+  }
+
+  .np-theme-personal & {
+    &--with-icon {
+      .np-accordion-item__content {
+        padding: 0 var(--size-56) var(--size-16);
+      }
+    }
+
+    .media {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .decision__title {
+      font-size: var(--font-size-18);
+    }
+
+    .np-option {
+      .np-option__title {
+        margin-bottom: 0;
+        font-size: var(--font-size-18);
+        letter-spacing: var(--letter-spacing-negative-xs);
+        line-height: var(--line-height-24);
+      }
+
+      .circle-sm {
+        background-color: transparent;
+        width: var(--size-24);
+        height: var(--size-24);
+        border-radius: 0;
+      }
+    }
+
+    &__content {
+      padding: 0 var(--size-56) var(--size-16) var(--size-16);
+      border-bottom: none;
+      color: var(--color-content-secondary);
+    }
+  }
+}

package/src/accordion/Accordion.spec.js

@@ -0,0 +1,76 @@
+import { Freeze, HappyEmoji, New } from '@transferwise/icons';
+
+import { render, screen, userEvent } from '../test-utils';
+
+import Accordion from './Accordion';
+
+describe('Accordion', () => {
+  const items = [
+    {
+      title: 'Item 1 title',
+      content: 'Item 1 content',
+      icon: <Freeze />,
+    },
+    {
+      title: 'Item 2 title',
+      content: 'Item 2 content',
+      icon: <New />,
+    },
+    {
+      title: 'Item 3 title',
+      content: 'Item 3 content',
+      icon: <HappyEmoji />,
+    },
+  ];
+
+  describe('defaults', () => {
+    it('renders an empty list when no items are passed', () => {
+      expect(render(<Accordion items={[]} />).container).toMatchSnapshot();
+    });
+  });
+
+  describe('items', () => {
+    it('renders a list with all items closed if items passed', () => {
+      render(<Accordion items={items} />);
+
+      items.forEach((item) => {
+        expect(screen.getByText(item.title)).toBeInTheDocument();
+        expect(screen.queryByText(item.content)).not.toBeInTheDocument();
+      });
+    });
+
+    it('renders a list with a specified item open if indexOpen is set', () => {
+      render(<Accordion items={items} indexOpen={1} />);
+
+      expect(screen.queryByText(items[0].content)).not.toBeInTheDocument();
+      expect(screen.getByText(items[1].content)).toBeInTheDocument();
+      expect(screen.queryByText(items[2].content)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('open and close', () => {
+    it('can open and close an item when clicked', () => {
+      const item = items[0];
+      render(<Accordion items={items} />);
+
+      userEvent.click(screen.getByRole('button', { name: item.title }));
+      expect(screen.getByText(item.content)).toBeInTheDocument();
+
+      userEvent.click(screen.getByRole('button', { name: item.title }));
+      expect(screen.queryByText(item.content)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('onClick', () => {
+    it('calls onClick when an item is clicked', () => {
+      const onClick = jest.fn();
+
+      render(<Accordion items={items} onClick={onClick} />);
+
+      userEvent.click(screen.getAllByRole('button')[0]);
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(0);
+    });
+  });
+});

package/src/accordion/Accordion.story.tsx

@@ -0,0 +1,104 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FastFlag as FastFlagIcon } from '@transferwise/icons';
+
+import { Scroll, Size } from '../common';
+import Modal from '../modal';
+import { lorem10, lorem40, storyConfig } from '../test-utils';
+
+import Accordion from './Accordion';
+
+export default {
+  component: Accordion,
+  title: 'Content/Accordion',
+  args: {
+    items: [
+      {
+        title: 'Item 1',
+        content: lorem10,
+        id: 'Item 1',
+      },
+      {
+        title: 'Item 2',
+        content: lorem40,
+        id: 'Item 2',
+      },
+      {
+        title: 'Item 3',
+        content: lorem10,
+        id: 'Item 3',
+      },
+      {
+        title: 'Item 4',
+        content: lorem10,
+        id: 'Item 4',
+        icon: <FastFlagIcon size={24} />,
+      },
+    ],
+  },
+} satisfies Meta<typeof Accordion>;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const Basic: Story = {
+  args: {
+    indexOpen: 0,
+  },
+};
+
+export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
+
+export const Variants: Story = storyConfig(
+  {
+    args: {
+      indexOpen: 0,
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
+
+export const Multiple: Story = {
+  render: (args) => {
+    const items = args.items as Record<string, string>[];
+    return (
+      <>
+        <Accordion {...args} items={[items[0]]} />
+        <Accordion {...args} items={[items[0]]} indexOpen={0} />
+        <Accordion {...args} items={items} />
+      </>
+    );
+  },
+};
+
+export const InModal: Story = {
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: (args) => {
+    const items = args.items as Record<string, string>[];
+    return (
+      <Modal
+        body={
+          <div className="p-a-1">
+            <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
+            <Accordion {...args} items={[items[0]]} />
+            <Accordion {...args} items={[items[0]]} indexOpen={0} />
+            <Accordion {...args} items={items} />
+          </div>
+        }
+        scroll={Scroll.CONTENT}
+        size={Size.LARGE}
+        open
+        footer={
+          <div className="p-a-3 text-xs-center">
+            <a href="/large-amounts">Learn more</a>
+          </div>
+        }
+        onClose={() => void {}}
+      />
+    );
+  },
+};
+
+export const InModalMobile: Story = storyConfig(InModal, { variants: ['mobile'] });