@transferwise/neptune-css 14.6.1 → 14.7.0

package/dist/css/process.css

@@ -1 +1 @@
-.process{display:block;margin:auto;position:relative}.process svg{height:100%;width:100%}.process-circle{stroke:#0097c7;stroke:var(--color-content-accent);stroke-opacity:1;stroke-linecap:round;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:ease-out;transform-origin:center center;transition:stroke 1s linear .2s}.np-theme-personal .process-circle{stroke:#37517e;stroke:var(--color-content-primary)}.np-theme-personal--bright-green .process-circle,.np-theme-personal--dark .process-circle,.np-theme-personal--forest-green .process-circle{stroke:var(--color-interactive-primary)}.process-inverse .process-circle{stroke:#fff;stroke:var(--color-background-screen)}.process-icon-container{display:inline-block;height:50%;left:25%;position:absolute;top:25%;transform:rotate(45deg);width:50%}.process-icon-horizontal,.process-icon-vertical{display:block;height:0;position:absolute;width:0}.process-success .process-icon-horizontal{background-color:#008026;background-color:var(--color-content-positive);bottom:0;left:0}.np-theme-personal .process-success .process-icon-horizontal{background-color:var(--color-sentiment-positive)}.process-success .process-icon-vertical{background-color:#008026;background-color:var(--color-content-positive);right:0;top:100%}.np-theme-personal .process-success .process-icon-vertical{background-color:var(--color-sentiment-positive)}.process-success .process-circle{stroke:#008026;stroke:var(--color-content-positive)}.np-theme-personal .process-success .process-circle{stroke:var(--color-sentiment-positive)}.process-danger .process-icon-horizontal{background-color:#cf2929;background-color:var(--color-content-negative);left:0}.np-theme-personal .process-danger .process-icon-horizontal{background-color:var(--color-sentiment-negative)}.process-danger .process-icon-vertical{background-color:#cf2929;background-color:var(--color-content-negative);top:0}.np-theme-personal .process-danger .process-icon-vertical{background-color:var(--color-sentiment-negative)}.process-danger .process-circle{stroke:#cf2929;stroke:var(--color-content-negative)}.np-theme-personal .process-danger .process-circle{stroke:var(--color-sentiment-negative)}.process-danger .process-circle,.process-success .process-circle{animation-delay:1ms;animation-duration:1.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:ease-out}.process-danger .process-icon-horizontal,.process-success .process-icon-horizontal{animation:process-width .3s ease 1.2s forwards}.process-danger .process-icon-vertical,.process-success .process-icon-vertical{animation:process-height .3s ease 1.5s forwards}.process-stopped .process-circle{animation:none}.process-stopped .process-icon-container{display:none}.process-xs{height:24px;width:24px}.process-xs .process-circle{stroke-dashoffset:69.11503838px;stroke-dasharray:69.11503838px;stroke-width:2px}.process-xs.process-danger .process-icon-horizontal{height:2px;top:5px}.process-xs.process-danger .process-icon-vertical{left:5px;width:2px}.process-xs .process-icon-horizontal,.process-xs .process-icon-vertical{border-radius:1px}.process-xs.process-success .process-icon-container{height:10px;left:9px;width:5px}.process-xs.process-success .process-icon-horizontal{height:2px}.process-xs.process-success .process-icon-vertical{width:2px}.process-sm{height:48px;width:48px}.process-sm .process-circle{stroke-dashoffset:144.51326207px;stroke-dasharray:144.51326207px;stroke-width:2.4px}.process-sm.process-danger .process-icon-horizontal{height:3px;top:10.5px}.process-sm.process-danger .process-icon-vertical{left:10.5px;width:3px}.process-sm .process-icon-horizontal,.process-sm .process-icon-vertical{border-radius:1.5px}.process-sm.process-success .process-icon-container{height:21px;left:18px;width:10.5px}.process-sm.process-success .process-icon-horizontal{height:3px}.process-sm.process-success .process-icon-vertical{width:3px}.process-xl{height:128px;width:128px}.process-xl .process-circle{stroke-dashoffset:395.84067435px;stroke-dasharray:395.84067435px;stroke-width:3px}.process-xl.process-danger .process-icon-horizontal{height:8px;top:28px}.process-xl.process-danger .process-icon-vertical{left:28px;width:8px}.process-xl .process-icon-horizontal,.process-xl .process-icon-vertical{border-radius:4px}.process-xl.process-success .process-icon-container{height:56px;left:48px;width:28px}.process-xl.process-success .process-icon-horizontal{height:8px}.process-xl.process-success .process-icon-vertical{width:8px}.process-xs .process-circle{animation-name:process-chase-circle-xs}.process-xs.process-danger .process-circle,.process-xs.process-success .process-circle{animation-name:process-success-circle-xs}.process-sm .process-circle{animation-name:process-chase-circle-sm}.process-sm.process-danger .process-circle,.process-sm.process-success .process-circle{animation-name:process-success-circle-sm}.process-xl .process-circle{animation-name:process-chase-circle-xl}.process-xl.process-danger .process-circle,.process-xl.process-success .process-circle{animation-name:process-success-circle-xl}@keyframes process-chase-circle-xs{0%{stroke-dashoffset:206.34511514px;stroke-dasharray:69.11503838px;transform:rotate(0deg)}25%{stroke-dashoffset:68.11503838px;stroke-dasharray:34.55751919px}75%{stroke-dashoffset:68.11503838px;stroke-dasharray:51.83627878px}to{stroke-dashoffset:68.11503838px;stroke-dasharray:69.11503838px;transform:rotate(1turn)}}@keyframes process-success-circle-xs{0%{stroke-dashoffset:68.11503838px;stroke-dasharray:69.11503838px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:69.11503838px;transform:rotate(1turn)}}@keyframes process-chase-circle-sm{0%{stroke-dashoffset:432.5397862px;stroke-dasharray:144.51326207px;transform:rotate(0deg)}25%{stroke-dashoffset:143.51326207px;stroke-dasharray:72.25663103px}75%{stroke-dashoffset:143.51326207px;stroke-dasharray:108.38494655px}to{stroke-dashoffset:143.51326207px;stroke-dasharray:144.51326207px;transform:rotate(1turn)}}@keyframes process-success-circle-sm{0%{stroke-dashoffset:143.51326207px;stroke-dasharray:144.51326207px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:144.51326207px;transform:rotate(1turn)}}@keyframes process-chase-circle-xl{0%{stroke-dashoffset:1186.52202306px;stroke-dasharray:395.84067435px;transform:rotate(0deg)}25%{stroke-dashoffset:394.84067435px;stroke-dasharray:197.92033718px}75%{stroke-dashoffset:394.84067435px;stroke-dasharray:296.88050576px}to{stroke-dashoffset:394.84067435px;stroke-dasharray:395.84067435px;transform:rotate(1turn)}}@keyframes process-success-circle-xl{0%{stroke-dashoffset:394.84067435px;stroke-dasharray:395.84067435px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:395.84067435px;transform:rotate(1turn)}}@keyframes process-width{to{width:100%}}@keyframes process-height{to{height:100%;top:0}}.btn .process:first-child{float:left;margin-left:-12px;margin-right:12px}[dir=rtl] .btn .process:first-child{float:right;margin-left:0;margin-left:12px;margin-right:-12px;margin-right:0}.btn-block .process:first-child{position:absolute}.btn .process-circle{transition:stroke .5s linear 0s}.btn-primary .process-circle,.btn-success .process-circle{stroke:#fff}.btn-primary .process-icon-horizontal,.btn-primary .process-icon-vertical,.btn-success .process-icon-horizontal,.btn-success .process-icon-vertical{background-color:#fff}.btn:focus .process-circle,.btn:hover .process-circle{stroke:#fff}.btn:focus .process-icon-horizontal,.btn:focus .process-icon-vertical,.btn:hover .process-icon-horizontal,.btn:hover .process-icon-vertical,.btn[disabled] .process-icon-horizontal,.btn[disabled] .process-icon-vertical{background-color:#fff}
+.process{display:block;margin:auto;position:relative}.process svg{height:100%;width:100%}.process-circle{stroke:#0097c7;stroke:var(--color-content-accent);stroke-opacity:1;stroke-linecap:round;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:ease-out;transform-origin:center center;transition:stroke 1s linear .2s}.np-theme-personal .process-circle{stroke:#37517e;stroke:var(--color-content-primary)}.np-theme-personal--bright-green .process-circle,.np-theme-personal--dark .process-circle,.np-theme-personal--forest-green .process-circle{stroke:var(--color-interactive-primary)}.process-inverse .process-circle{stroke:#fff;stroke:var(--color-background-screen)}.process-icon-container{display:inline-block;height:50%;left:25%;position:absolute;top:25%;transform:rotate(45deg);width:50%}.process-icon-horizontal,.process-icon-vertical{display:block;height:0;position:absolute;width:0}.process-success .process-icon-horizontal{background-color:#008026;background-color:var(--color-content-positive);bottom:0;left:0}.np-theme-personal .process-success .process-icon-horizontal{background-color:var(--color-sentiment-positive)}.process-success .process-icon-vertical{background-color:#008026;background-color:var(--color-content-positive);right:0;top:100%}.np-theme-personal .process-success .process-icon-vertical{background-color:var(--color-sentiment-positive)}.process-success .process-circle{stroke:#008026;stroke:var(--color-content-positive)}.np-theme-personal .process-success .process-circle{stroke:var(--color-sentiment-positive)}.process-danger .process-icon-horizontal{background-color:#cf2929;background-color:var(--color-content-negative);left:0}.np-theme-personal .process-danger .process-icon-horizontal{background-color:var(--color-sentiment-negative)}.process-danger .process-icon-vertical{background-color:#cf2929;background-color:var(--color-content-negative);top:0}.np-theme-personal .process-danger .process-icon-vertical{background-color:var(--color-sentiment-negative)}.process-danger .process-circle{stroke:#cf2929;stroke:var(--color-content-negative)}.np-theme-personal .process-danger .process-circle{stroke:var(--color-sentiment-negative)}.process-danger .process-circle,.process-success .process-circle{animation-delay:1ms;animation-duration:1.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:ease-out}.process-danger .process-icon-horizontal,.process-success .process-icon-horizontal{animation:process-width .3s ease 1.2s forwards}.process-danger .process-icon-vertical,.process-success .process-icon-vertical{animation:process-height .3s ease 1.5s forwards}.process-stopped .process-circle{animation:none}.process-stopped .process-icon-container{display:none}.process-xs{height:12px;width:12px}.process-xs .process-circle{stroke-dashoffset:31.41592654px;stroke-dasharray:31.41592654px;stroke-width:1.5px}.process-xs.process-danger .process-icon-horizontal{height:1px;top:2.5px}.process-xs.process-danger .process-icon-vertical{left:2.5px;width:1px}.process-xs .process-icon-horizontal,.process-xs .process-icon-vertical{border-radius:.5px}.process-xs.process-success .process-icon-container{height:5px;left:4.5px;width:2.5px}.process-xs.process-success .process-icon-horizontal{height:1px}.process-xs.process-success .process-icon-vertical{width:1px}.process-xs{height:24px;width:24px}.process-xs .process-circle{stroke-dashoffset:69.11503838px;stroke-dasharray:69.11503838px;stroke-width:2px}.process-xs.process-danger .process-icon-horizontal{height:2px;top:5px}.process-xs.process-danger .process-icon-vertical{left:5px;width:2px}.process-xs .process-icon-horizontal,.process-xs .process-icon-vertical{border-radius:1px}.process-xs.process-success .process-icon-container{height:10px;left:9px;width:5px}.process-xs.process-success .process-icon-horizontal{height:2px}.process-xs.process-success .process-icon-vertical{width:2px}.process-sm{height:48px;width:48px}.process-sm .process-circle{stroke-dashoffset:144.51326207px;stroke-dasharray:144.51326207px;stroke-width:2.4px}.process-sm.process-danger .process-icon-horizontal{height:3px;top:10.5px}.process-sm.process-danger .process-icon-vertical{left:10.5px;width:3px}.process-sm .process-icon-horizontal,.process-sm .process-icon-vertical{border-radius:1.5px}.process-sm.process-success .process-icon-container{height:21px;left:18px;width:10.5px}.process-sm.process-success .process-icon-horizontal{height:3px}.process-sm.process-success .process-icon-vertical{width:3px}.process-xl{height:128px;width:128px}.process-xl .process-circle{stroke-dashoffset:395.84067435px;stroke-dasharray:395.84067435px;stroke-width:3px}.process-xl.process-danger .process-icon-horizontal{height:8px;top:28px}.process-xl.process-danger .process-icon-vertical{left:28px;width:8px}.process-xl .process-icon-horizontal,.process-xl .process-icon-vertical{border-radius:4px}.process-xl.process-success .process-icon-container{height:56px;left:48px;width:28px}.process-xl.process-success .process-icon-horizontal{height:8px}.process-xl.process-success .process-icon-vertical{width:8px}.process-xxs .process-circle{animation-name:process-chase-circle-xxs}.process-xxs.process-danger .process-circle,.process-xxs.process-success .process-circle{animation-name:process-success-circle-xxs}.process-xs .process-circle{animation-name:process-chase-circle-xs}.process-xs.process-danger .process-circle,.process-xs.process-success .process-circle{animation-name:process-success-circle-xs}.process-sm .process-circle{animation-name:process-chase-circle-sm}.process-sm.process-danger .process-circle,.process-sm.process-success .process-circle{animation-name:process-success-circle-sm}.process-xl .process-circle{animation-name:process-chase-circle-xl}.process-xl.process-danger .process-circle,.process-xl.process-success .process-circle{animation-name:process-success-circle-xl}@keyframes process-chase-circle-xxs{0%{stroke-dashoffset:93.24777961px;stroke-dasharray:31.41592654px;transform:rotate(0deg)}25%{stroke-dashoffset:30.41592654px;stroke-dasharray:15.70796327px}75%{stroke-dashoffset:30.41592654px;stroke-dasharray:23.5619449px}to{stroke-dashoffset:30.41592654px;stroke-dasharray:31.41592654px;transform:rotate(1turn)}}@keyframes process-success-circle-xxs{0%{stroke-dashoffset:30.41592654px;stroke-dasharray:31.41592654px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:31.41592654px;transform:rotate(1turn)}}@keyframes process-chase-circle-xs{0%{stroke-dashoffset:206.34511514px;stroke-dasharray:69.11503838px;transform:rotate(0deg)}25%{stroke-dashoffset:68.11503838px;stroke-dasharray:34.55751919px}75%{stroke-dashoffset:68.11503838px;stroke-dasharray:51.83627878px}to{stroke-dashoffset:68.11503838px;stroke-dasharray:69.11503838px;transform:rotate(1turn)}}@keyframes process-success-circle-xs{0%{stroke-dashoffset:68.11503838px;stroke-dasharray:69.11503838px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:69.11503838px;transform:rotate(1turn)}}@keyframes process-chase-circle-sm{0%{stroke-dashoffset:432.5397862px;stroke-dasharray:144.51326207px;transform:rotate(0deg)}25%{stroke-dashoffset:143.51326207px;stroke-dasharray:72.25663103px}75%{stroke-dashoffset:143.51326207px;stroke-dasharray:108.38494655px}to{stroke-dashoffset:143.51326207px;stroke-dasharray:144.51326207px;transform:rotate(1turn)}}@keyframes process-success-circle-sm{0%{stroke-dashoffset:143.51326207px;stroke-dasharray:144.51326207px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:144.51326207px;transform:rotate(1turn)}}@keyframes process-chase-circle-xl{0%{stroke-dashoffset:1186.52202306px;stroke-dasharray:395.84067435px;transform:rotate(0deg)}25%{stroke-dashoffset:394.84067435px;stroke-dasharray:197.92033718px}75%{stroke-dashoffset:394.84067435px;stroke-dasharray:296.88050576px}to{stroke-dashoffset:394.84067435px;stroke-dasharray:395.84067435px;transform:rotate(1turn)}}@keyframes process-success-circle-xl{0%{stroke-dashoffset:394.84067435px;stroke-dasharray:395.84067435px;transform:rotate(0deg)}to{stroke-dashoffset:0;stroke-dasharray:395.84067435px;transform:rotate(1turn)}}@keyframes process-width{to{width:100%}}@keyframes process-height{to{height:100%;top:0}}.btn .process:first-child{float:left;margin-left:-12px;margin-right:12px}[dir=rtl] .btn .process:first-child{float:right;margin-left:0;margin-left:12px;margin-right:-12px;margin-right:0}.btn-block .process:first-child{position:absolute}.btn .process-circle{transition:stroke .5s linear 0s}.btn-primary .process-circle,.btn-success .process-circle{stroke:#fff}.btn-primary .process-icon-horizontal,.btn-primary .process-icon-vertical,.btn-success .process-icon-horizontal,.btn-success .process-icon-vertical{background-color:#fff}.btn:focus .process-circle,.btn:hover .process-circle{stroke:#fff}.btn:focus .process-icon-horizontal,.btn:focus .process-icon-vertical,.btn:hover .process-icon-horizontal,.btn:hover .process-icon-vertical,.btn[disabled] .process-icon-horizontal,.btn[disabled] .process-icon-vertical{background-color:#fff}

package/dist/css/table.css

@@ -1 +1 @@
-table{background-color:#fff;background-color:var(--color-background-screen);border-collapse:separate}table td[class*=col-],table th[class*=col-]{display:table-cell;float:none;position:static}caption{color:#5d7079;color:var(--color-content-secondary);padding-bottom:16px;padding-top:16px;text-align:left}[dir=rtl] caption{text-align:right}th{text-align:left}[dir=rtl] th{text-align:right}.table{margin-bottom:24px;margin-bottom:var(--size-24);max-width:100%;width:100%}.table>.tbody>dl>dd,.table>.tfoot>ol>li,.table>.thead>ol>li,.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{border-bottom:0;border-top:1px solid #0000001a;border-top:1px solid var(--color-border-neutral);line-height:1.5;line-height:var(--line-height-body);padding:24px 16px;padding:var(--size-24) 16px;transition:border .15s ease;vertical-align:top}.table>.thead>ol>li,.table>thead>tr>th{vertical-align:bottom}.table>.thead>ol>li a,.table>thead>tr>th a{text-decoration:none}.table>.thead>ol>li .tw-icon,.table>thead>tr>th .tw-icon{margin-top:-3px}.table>.thead:first-child>ol:first-child>li,.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:1px solid #0000001a;border-top:1px solid var(--color-border-neutral)}.table .table{background-color:#fff;background-color:var(--color-background-screen)}.table>.tfoot,.table>.thead,.table>tfoot,.table>thead{color:#37517e;color:var(--color-content-primary);font-size:.875rem;font-size:var(--font-size-14)}.table>.tbody,.table>tbody{font-size:.875rem;font-size:var(--font-size-14)}.table>.tbody>dl>.th,.table>tbody>tr>th{color:#37517e;color:var(--color-content-primary)}.table-condensed>.tbody>dl>dd,.table-condensed>.thead>ol>li,.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:8px}.table-bordered{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:3px}.table-bordered .thead,.table-bordered thead{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}@media (max-width:767px){div.table-bordered:not(.table-responsive){border:0}}.table-striped>tbody>tr:nth-of-type(odd){background-color:#86a7bd1a;background-color:var(--color-background-neutral)}@media (min-width:768px){.table-striped>.tbody>dl:nth-of-type(odd){background-color:#86a7bd1a;background-color:var(--color-background-neutral)}}table col[class*=col-]{display:table-column;float:none;position:static}.table-hover>tbody>tr.primary:hover>td,.table-hover>tbody>tr.primary:hover>th,.table-hover>tbody>tr:hover>.primary,.table-hover>tbody>tr>td.primary:hover,.table-hover>tbody>tr>th.primary:hover,.table>tbody>tr.primary>td,.table>tbody>tr.primary>th,.table>tbody>tr>td.primary,.table>tbody>tr>th.primary,.table>tfoot>tr.primary>td,.table>tfoot>tr.primary>th,.table>tfoot>tr>td.primary,.table>tfoot>tr>th.primary,.table>thead>tr.primary>td,.table>thead>tr.primary>th,.table>thead>tr>td.primary,.table>thead>tr>th.primary{background-color:#37517e}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#fff;background-color:var(--color-background-screen)}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#36c7971a;background-color:var(--color-background-positive)}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#38c8ff1a;background-color:var(--color-background-accent)}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#ffac001a;background-color:var(--color-background-warning)}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#ff87871a;background-color:var(--color-background-negative)}.table-hover>tbody>tr.default:hover>td,.table-hover>tbody>tr.default:hover>th,.table-hover>tbody>tr:hover>.default,.table-hover>tbody>tr>td.default:hover,.table-hover>tbody>tr>th.default:hover,.table>tbody>tr.default>td,.table>tbody>tr.default>th,.table>tbody>tr>td.default,.table>tbody>tr>th.default,.table>tfoot>tr.default>td,.table>tfoot>tr.default>th,.table>tfoot>tr>td.default,.table>tfoot>tr>th.default,.table>thead>tr.default>td,.table>thead>tr.default>th,.table>thead>tr>td.default,.table>thead>tr>th.default{background-color:var(--color-background-secondary)}.table-responsive{min-height:.01%;overflow-x:auto}.table-responsive.table-bordered{border:0}@media screen and (max-width:767px){.table-responsive{-ms-overflow-style:-ms-autohiding-scrollbar;margin-bottom:24px;margin-bottom:var(--size-24);overflow-y:hidden;width:100%}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.table-responsive.table-bordered{border:1px solid #86a7bd1a;border:1px solid var(--color-background-neutral);border-radius:3px}}@media (min-width:768px){.table{display:table}.table>.thead{display:table-header-group}.table>.thead>ol{display:table-row}.table>.thead>ol>li{color:#37517e;color:var(--color-content-primary);display:table-cell;font-weight:800;font-weight:var(--font-weight-bold)}.table>.tbody{display:table-row-group}.table>.tbody>dl{display:table-row}.table>.tbody>dl>dt{display:none}.table>.tbody>dl>dd{color:#5d7079;color:var(--color-content-secondary);display:table-cell;font-size:.875rem;font-size:var(--font-size-14)}.table>.tfoot{display:table-footer-group}}@media (max-width:767px){.table>.thead{display:none}.table>.tbody>dl{border:1px solid #c9cbce;border:1px solid var(--color-interactive-secondary);border-radius:3px;margin-bottom:24px;margin-bottom:var(--size-24);padding:24px 1.5 0;padding:var(--size-24) var(--line-height-body) 0}.table>.tbody>dl>dd{border:0;padding:0}.table>.tbody>dl>dd:empty{margin:0}}@media (max-width:575px){.table>.tbody>dl{padding-bottom:8px}}.table-calendar{min-width:300px}.table-calendar>tbody>tr>td{padding:0}.table-calendar>tbody>tr>td>a{border-radius:3px;display:block;margin:4px 2px;padding:4px 0;text-align:center;text-decoration:none}.table-calendar>tbody>tr>td>a.active{background-color:#37517e;color:#fff}.table-calendar>tbody>tr>td>a:not([disabled]):hover{background-color:#0097c7;background-color:var(--color-content-accent);color:#fff}.table-calendar>thead>tr>th{text-align:center}
+table{background-color:#fff;background-color:var(--color-background-screen);border-collapse:separate}table td[class*=col-],table th[class*=col-]{display:table-cell;float:none;position:static}caption{color:#5d7079;color:var(--color-content-secondary);padding-bottom:16px;padding-top:16px;text-align:left}[dir=rtl] caption{text-align:right}th{text-align:left}[dir=rtl] th{text-align:right}.table{margin-bottom:24px;margin-bottom:var(--size-24);max-width:100%;width:100%}.table>.tbody>dl>dd,.table>.tfoot>ol>li,.table>.thead>ol>li,.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{border-bottom:0;border-top:1px solid #0000001a;border-top:1px solid var(--color-border-neutral);line-height:1.5;line-height:var(--line-height-body);padding:24px 16px;padding:var(--size-24) var(--size-16);transition:border .15s ease;vertical-align:top}.table>.thead>ol>li,.table>thead>tr>th{vertical-align:bottom}.table>.thead>ol>li a,.table>thead>tr>th a{text-decoration:none}.table>.thead>ol>li .tw-icon,.table>thead>tr>th .tw-icon{margin-top:-3px}.table>.thead:first-child>ol:first-child>li,.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:1px solid #0000001a;border-top:1px solid var(--color-border-neutral)}.table .table{background-color:#fff;background-color:var(--color-background-screen)}.table>.tfoot,.table>.thead,.table>tfoot,.table>thead{color:#37517e;color:var(--color-content-primary);font-size:.875rem;font-size:var(--font-size-14)}.table>.tbody,.table>tbody{font-size:.875rem;font-size:var(--font-size-14)}.table>.tbody>dl>.th,.table>tbody>tr>th{color:#37517e;color:var(--color-content-primary)}.table-condensed>.tbody>dl>dd,.table-condensed>.thead>ol>li,.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:8px;padding:var(--size-8)}.table-bordered{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:3px}.table-bordered .thead,.table-bordered thead{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}@media (max-width:767px){div.table-bordered:not(.table-responsive){border:0}}.table-striped>tbody>tr:nth-of-type(odd){background-color:#86a7bd1a;background-color:var(--color-background-neutral)}@media (min-width:768px){.table-striped>.tbody>dl:nth-of-type(odd){background-color:#86a7bd1a;background-color:var(--color-background-neutral)}}table col[class*=col-]{display:table-column;float:none;position:static}.table-hover>tbody>tr.primary:hover>td,.table-hover>tbody>tr.primary:hover>th,.table-hover>tbody>tr:hover>.primary,.table-hover>tbody>tr>td.primary:hover,.table-hover>tbody>tr>th.primary:hover,.table>tbody>tr.primary>td,.table>tbody>tr.primary>th,.table>tbody>tr>td.primary,.table>tbody>tr>th.primary,.table>tfoot>tr.primary>td,.table>tfoot>tr.primary>th,.table>tfoot>tr>td.primary,.table>tfoot>tr>th.primary,.table>thead>tr.primary>td,.table>thead>tr.primary>th,.table>thead>tr>td.primary,.table>thead>tr>th.primary{background-color:#37517e}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#fff;background-color:var(--color-background-screen)}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#36c7971a;background-color:var(--color-background-positive)}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#38c8ff1a;background-color:var(--color-background-accent)}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#ffac001a;background-color:var(--color-background-warning)}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#ff87871a;background-color:var(--color-background-negative)}.table-hover>tbody>tr.default:hover>td,.table-hover>tbody>tr.default:hover>th,.table-hover>tbody>tr:hover>.default,.table-hover>tbody>tr>td.default:hover,.table-hover>tbody>tr>th.default:hover,.table>tbody>tr.default>td,.table>tbody>tr.default>th,.table>tbody>tr>td.default,.table>tbody>tr>th.default,.table>tfoot>tr.default>td,.table>tfoot>tr.default>th,.table>tfoot>tr>td.default,.table>tfoot>tr>th.default,.table>thead>tr.default>td,.table>thead>tr.default>th,.table>thead>tr>td.default,.table>thead>tr>th.default{background-color:var(--color-background-secondary)}.table-responsive{min-height:.01%;overflow-x:auto}.table-responsive.table-bordered{border:0}@media screen and (max-width:767px){.table-responsive{-ms-overflow-style:-ms-autohiding-scrollbar;margin-bottom:24px;margin-bottom:var(--size-24);overflow-y:hidden;width:100%}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.table-responsive.table-bordered{border:1px solid #86a7bd1a;border:1px solid var(--color-background-neutral);border-radius:3px}}@media (min-width:768px){.table{display:table}.table>.thead{display:table-header-group}.table>.thead>ol{display:table-row}.table>.thead>ol>li{color:#37517e;color:var(--color-content-primary);display:table-cell;font-weight:800;font-weight:var(--font-weight-bold)}.table>.tbody{display:table-row-group}.table>.tbody>dl{display:table-row}.table>.tbody>dl>dt{display:none}.table>.tbody>dl>dd{color:#5d7079;color:var(--color-content-secondary);display:table-cell;font-size:.875rem;font-size:var(--font-size-14)}.table>.tfoot{display:table-footer-group}}@media (max-width:767px){.table>.thead{display:none}.table>.tbody>dl{border:1px solid #c9cbce;border:1px solid var(--color-interactive-secondary);border-radius:3px;margin-bottom:24px;margin-bottom:var(--size-24);padding:24px 1.5 0;padding:var(--size-24) var(--line-height-body) 0}.table>.tbody>dl>dd{border:0;padding:0}.table>.tbody>dl>dd:empty{margin:0}}@media (max-width:575px){.table>.tbody>dl{padding-bottom:8px}}.table-calendar{min-width:300px}.table-calendar>tbody>tr>td{padding:0}.table-calendar>tbody>tr>td>a{border-radius:3px;display:block;margin:4px 2px;padding:4px 0;text-align:center;text-decoration:none}.table-calendar>tbody>tr>td>a.active{background-color:#37517e;color:#fff}.table-calendar>tbody>tr>td>a:not([disabled]):hover{background-color:#0097c7;background-color:var(--color-content-accent);color:#fff}.table-calendar>thead>tr>th{text-align:center}

package/dist/less/neptune-tokens.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 02 Oct 2023 12:07:17 GMT
+// Generated on Thu, 16 Nov 2023 16:38:15 GMT
 
 @color-dark-content-primary: #e2e6e8;
 @color-dark-content-secondary: #c9cbce;
@@ -219,7 +219,7 @@
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
 // Do not edit directly
-// Generated on Mon, 02 Oct 2023 12:07:17 GMT
+// Generated on Thu, 16 Nov 2023 16:38:15 GMT
 
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;

package/dist/props/custom-media.css

@@ -7,3 +7,5 @@
 @custom-media --screen-lg (min-width: 992px);
 @custom-media --screen-lg-max (max-width: 1199px); /* --screen-xl - 1 */
 @custom-media --screen-xl (min-width: 1200px);
+
+@custom-media --screen-400-zoom (max-width: 320px); /* ~400% zoom viewport */

package/dist/props/neptune-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Oct 2023 12:07:17 GMT
+ * Generated on Thu, 16 Nov 2023 16:38:15 GMT
  */
 
 :root {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.6.1",
+  "version": "14.7.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "scripts"
   ],
   "dependencies": {
-    "@transferwise/neptune-tokens": "^8.5.1"
+    "@transferwise/neptune-tokens": "^8.7.0"
   },
   "devDependencies": {
     "modern-normalize": "^2.0.0",

package/src/less/addons/_spacing-utilities.less

@@ -1,28 +1,23 @@
-@import (reference) "../../variables/neptune-tokens.less";
 @import "../mixins/_spacing.less";
 
-// These variables are not exposed in _spacing because they shouldn't be used outside of this file.
-@size-72: 72px;
-@size-96: 96px;
-
 .spacing(0, 0);
-.spacing(1, @size-8);
-.spacing(2, @size-16);
-.spacing(3, @size-24);
-.spacing(4, @size-32);
-.spacing(5, @size-40);
+.spacing(1, var(--size-8));
+.spacing(2, var(--size-16));
+.spacing(3, var(--size-24));
+.spacing(4, var(--size-32));
+.spacing(5, var(--size-40));
 
-.spacing-vertical(4, @size-32);
-.spacing-vertical(5, @size-40);
+.spacing-vertical(4, var(--size-32));
+.spacing-vertical(5, var(--size-40));
 
 .gap-y-1 {
   row-gap: var(--size-8);
 }
 
-.responsive-spacing(panel, @size-16, @size-24, @size-32);
-.responsive-spacing-vertical(section-1, @size-16, @size-24, @size-32);
-.responsive-spacing-vertical(section-2, @size-32, @size-48, @size-64);
-.responsive-spacing-vertical(section-3, @size-48, @size-72, @size-96);
+.responsive-spacing(panel, var(--size-16), var(--size-24), var(--size-32));
+.responsive-spacing-vertical(section-1, var(--size-16), var(--size-24), var(--size-32));
+.responsive-spacing-vertical(section-2, var(--size-32), var(--size-48), var(--size-64));
+.responsive-spacing-vertical(section-3, var(--size-48), var(--size-72), var(--size-96));
 
 .m-x-auto {
   .margin(right,auto) !important;
@@ -38,16 +33,16 @@
 }
 
 .section {
-  padding-top: @size-48;
-  padding-bottom: @size-48;
+  padding-top: var(--size-48);
+  padding-bottom: var(--size-48);
 
   @media (--screen-sm) {
-    padding-top: @size-72;
-    padding-bottom: @size-72;
+    padding-top: var(--size-72);
+    padding-bottom: var(--size-72);
   }
 
   @media (--screen-lg) {
-    padding-top: @size-96;
-    padding-bottom: @size-96;
+    padding-top: var(--size-96);
+    padding-bottom: var(--size-96);
   }
 }

package/src/less/buttons.less

@@ -29,7 +29,7 @@
     var(--font-size-16);
     var(--line-height-24);
     var(--btn-radius-base);
-    @btn-height
+    var(--btn-height);
   );
 
   .np-theme-personal & {
@@ -79,6 +79,7 @@
   fieldset[disabled] & {
     outline: none;
     box-shadow: none;
+    pointer-events: none;
   }
 
   a& {
@@ -459,7 +460,7 @@
     var(--font-size-18);
     var(--line-height-28);
     var(--btn-lg-radius-base);
-    @btn-lg-height
+    var(--btn-lg-height)
   );
 
   .np-theme-personal & {
@@ -479,7 +480,7 @@
     var(--font-size-14);
     var(--line-height-22);
     var(--btn-sm-radius-base);
-    @btn-sm-height
+    var(--btn-sm-height);
   );
 
   .np-theme-personal & {
@@ -516,14 +517,14 @@
       var(--font-size-16);
       var(--line-height-24);
       var(border-radius-base);
-      @btn-height
+      var(--btn-height);
     );
 
     .np-theme-personal & {
       font-size: @btn-font-size;
       line-height: @btn-line-height;
 
-      max-height: @btn-height;
+      max-height: var(--btn-height);
     }
   }
 }
@@ -535,7 +536,7 @@
 
 // Vertically space out multiple block buttons
 .btn-block + .btn-block {
-  margin-top: 8px;
+  margin-top: var(--size-8);
 }
 
 input[type="submit"],
@@ -639,27 +640,41 @@ input[type="button"] {
   margin-bottom: -8px;
   background-repeat: no-repeat;
   background-position: center;
-  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlNwaW5uZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjkuMjA1NjQzNzklIiB4Mj0iMTAwJSIgeTI9IjIwLjc0NzEwMDclIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+ICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E4QUFBQyIgb2Zmc2V0PSIwJSI+PC9zdG9wPiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBOEFBQUMiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+ICAgICAgICA8L2xpbmVhckdyYWRpZW50PiAgICA8L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPiAgICAgICAgPGcgaWQ9IlNwaW5uZXIiIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMiwyNCBDNS4zNzI1ODMsMjQgMCwxOC42Mjc0MTcgMCwxMiBDMCw1LjM3MjU4MyA1LjM3MjU4MywwIDEyLDAgTDEyLDIgQzYuNDc3MTUyNSwyIDIsNi40NzcxNTI1IDIsMTIgQzIsMTcuNTIyODQ3NSA2LjQ3NzE1MjUsMjIgMTIsMjIgQzE3LjUyMjg0NzUsMjIgMjIsMTcuNTIyODQ3NSAyMiwxMiBMMjQsMTIgQzI0LDE4LjYyNzQxNyAxOC42Mjc0MTcsMjQgMTIsMjQgWiIgaWQ9InNwaW4iIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==");
-  animation: rotating 0.4s linear infinite;
+
+  .process-circle {
+    .np-theme-personal--dark &,
+    .np-theme-personal--bright-green &,
+    .np-theme-personal--forest-green & {
+      stroke: var(--color-interactive-negative);
+    }
+  }
 }
 
-.np-theme-personal {
-  .btn-loading {
-    &:not(.btn-block) {
-      display: inline-flex;
-      align-items: center;
+.btn-loading {
+  &:not(.btn-block) {
+    display: inline-flex;
+    align-items: center;
+
+    .btn-loader {
+      margin-bottom: 0;
 
-      .btn-loader {
-        margin-bottom: 0;
+      :not([dir="rtl"]) & {
+        margin-left: 16px;
+        margin-right: 0;
+      }
+  
+      [dir="rtl"] & {
+        margin-left: 0 !important;
+        margin-right: 16px !important;
       }
     }
+  }
 
-    &.btn-block .btn-loader {
-      top: 0;
-      bottom: 0;
-      margin-top: auto;
-      margin-bottom: auto;
-    }
+  &.btn-block .btn-loader {
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
   }
 }
 

package/src/less/core/_scaffolding.less

@@ -8,8 +8,6 @@
 @import "../../variables/legacy-variables.less";
 
 :root {
-  --radius-small: 3px;
-  --radius-medium: 10px;
   // page default font size should be set in absolute units (pixels)
   --base-font-size: 16px;
   --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif;
@@ -36,9 +34,6 @@
 
   font-family: var(--font-family-regular);
   line-height: var(--line-height-body);
-
-  --radius-small: 3px !important;
-  --radius-medium: 10px !important;
 }
 
 .np-theme-personal,
@@ -53,6 +48,13 @@
   --btn-xs-padding: calc(@btn-xs-padding-vertical - @btn-border-width) @btn-xs-padding-horizontal;
   --btn-sm-padding: calc(@btn-sm-padding-vertical - @btn-border-width) @btn-sm-padding-horizontal;
   --btn-lg-padding: calc(@btn-lg-padding-vertical - @btn-border-width) @btn-lg-padding-horizontal;
+  --btn-height: @btn-height;
+  --btn-xs-height: @btn-xs-height;
+  --btn-sm-height: @btn-sm-height;
+  --btn-lg-height: @btn-lg-height;
+  --input-height-base: @input-height-base;
+  --input-height-large: @input-height-large;
+  --input-height-small: @input-height-small;
   --input-padding: @padding-large-vertical @padding-base-horizontal;
   --input-padding-small: @padding-small-vertical @padding-small-horizontal;
   --input-padding-large: @padding-large-vertical @padding-large-horizontal;
@@ -187,7 +189,7 @@ textarea {
 ol,
 ul {
   margin: 0 0 var(--size-24);
-  .padding-shorthand(0, 0, 0, 38px);
+  .padding-shorthand(0, 0, 0, calc(var(--size-48) - var(--size-10)));
 
   ol,
   ul {

package/src/less/core/viewport-themes.less

@@ -0,0 +1,64 @@
+@import '@transferwise/neptune-tokens/themes/personal/tokens.less';
+
+@media (--screen-400-zoom) {
+  .np-theme-personal {
+    --delta: 2;
+
+    --size-4: calc(@size-4 / var(--delta));
+    --size-8: calc(@size-8 / var(--delta));
+    --size-10: calc(@size-10 / var(--delta));
+    --size-12: calc(@size-12 / var(--delta));
+    --size-14: calc(@size-14 / var(--delta));
+    --size-16: calc(@size-16 / var(--delta));
+    --size-24: calc(@size-24 / var(--delta));
+    --size-32: calc(@size-32 / var(--delta));
+    --size-40: calc(@size-40 / var(--delta));
+    --size-48: calc(@size-48 / var(--delta));
+    --size-52: calc(@size-52 / var(--delta));
+    --size-56: calc(@size-56 / var(--delta));
+    --size-60: calc(@size-60 / var(--delta));
+    --size-64: calc(@size-64 / var(--delta));
+    --size-72: calc(@size-72 / var(--delta));
+    --size-80: calc(@size-80 / var(--delta));
+    --size-88: calc(@size-88 / var(--delta));
+    --size-96: calc(@size-96 / var(--delta));
+    --size-104: calc(@size-104 / var(--delta));
+    --size-112: calc(@size-112 / var(--delta));
+    --size-120: calc(@size-120 / var(--delta));
+    --size-126: calc(@size-126 / var(--delta));
+    --size-128: calc(@size-128 / var(--delta));
+    --size-146: calc(@size-146 / var(--delta));
+    --size-154: calc(@size-154 / var(--delta));
+    --size-x-small: calc(@size-x-small / var(--delta));
+    --size-small: calc(@size-small / var(--delta));
+    --size-medium: calc(@size-medium / var(--delta));
+    --size-large: calc(@size-large / var(--delta));
+    --size-x-large: calc(@size-x-large / var(--delta));
+    --size-2x-large: calc(@size-2x-large / var(--delta));
+    --space-content-horizontal: calc(@space-content-horizontal / var(--delta));
+    --space-small: calc(@space-small / var(--delta));
+    --space-medium: calc(@space-medium / var(--delta));
+    --space-large: calc(@space-large / var(--delta));
+    --space-x-large: calc(@space-x-large / var(--delta));
+    --padding-x-small: var(--size-8);
+    --padding-small: var(--size-16);
+    --padding-medium: var(--size-24);
+    --padding-large: var(--size-32);
+
+    --input-height-base: var(--size-32);
+    --input-height-large: var(--input-height-small);
+    --input-padding: var(--input-padding-small);
+    --input-padding-large: var(--input-padding-small);
+    --input-group-addon-padding: var(--input-group-addon-sm-padding);
+    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
+
+    --btn-height: var(--input-height-base);
+    --btn-lg-height: var(--btn-height);
+    --btn-sm-height: var(--btn-height);
+    --btn-padding: var(--input-padding);
+    --btn-sm-padding: var(--btn-padding);
+    --btn-lg-padding: var(--btn-padding);
+
+    --dropdown-link-padding: var(--size-12) var(--size-16);
+  }
+}

package/src/less/forms/bootstrap-forms.less

@@ -44,7 +44,7 @@ legend {
 label {
   display: inline-block;
   max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
-  margin-bottom: 4px;
+  margin-bottom: var(--size-4);
 }
 
 label,
@@ -149,7 +149,7 @@ output {
   font-size: var(--font-size-16);
 
   .input-size(
-    @input-height-base,
+    var(--input-height-base),
     var(--input-padding),
     @input-border-radius
   );
@@ -221,16 +221,16 @@ input[type='search'] {
   input[type='time'],
   input[type='datetime-local'],
   input[type='month'] {
-    line-height: @input-height-base;
+    line-height: var(--input-height-base);
 
     &.input-sm,
     .input-group-sm & {
-      line-height: @input-height-small;
+      line-height: var(--input-height-small);
     }
 
     &.input-lg,
     .input-group-lg & {
-      line-height: calc(@input-height-large - var(--line-height-body));
+      line-height: calc(var(--input-height-large) - var(--line-height-body));
     }
   }
 }
@@ -271,7 +271,7 @@ input[type='search'] {
   // margin-bottom: (@padding-base-vertical * 1.5);
 
   label {
-    min-height: @input-height-base; 
+    min-height: var(--input-height-base); 
     margin-bottom: 0;
     cursor: pointer;
   }
@@ -421,7 +421,7 @@ input[type="password"] {
 
 .input-lg {
   .input-size(
-    @input-height-large;
+    var(--input-height-large);
     var(--input-padding-large);
     @input-border-radius-large
   );
@@ -434,7 +434,7 @@ input[type="password"] {
   .input-lg,
   .input-group-lg > .form-control,
   .input-group-lg > .input-group-addon {
-    height: @input-height-large;
+    height: var(--input-height-large);
     padding: calc(@padding-small-vertical + var(--size-24)) @padding-small-horizontal
       @padding-small-vertical;
     font-size: @input-font-size-large;
@@ -442,7 +442,7 @@ input[type="password"] {
   }
 
   select.form-control {
-    line-height: @input-height-large;
+    line-height: var(--input-height-large);
   }
 
   textarea.form-control,
@@ -451,7 +451,7 @@ input[type="password"] {
   }
 
   .form-control-static {
-    height: @input-height-large;
+    height: var(--input-height-large);
     min-height: calc(var(--line-height-control) + @input-font-size-large);
     padding: var(--input-padding-large);
     font-size: @input-font-size-large;
@@ -478,7 +478,7 @@ input[type="password"] {
 
   // Ensure icons don't overlap text
   .form-control {
-    .padding(right, @input-height-base);
+    .padding(right, var(--input-height-base));
   }
 }
 // Feedback icon (requires .glyphicon classes)
@@ -498,8 +498,8 @@ input[type="password"] {
 .input-lg + .form-control-feedback,
 .input-group-lg + .form-control-feedback,
 .form-group-lg .form-control + .form-control-feedback {
-  width: @input-height-large;
-  height: @input-height-large;
+  width: var(--input-height-large);
+  height: var(--input-height-large);
 }
 
 .input-sm + .form-control-feedback,
@@ -922,7 +922,7 @@ input[type="password"] {
   &.checkbox-lg,
   &.radio-lg {
     > label {
-      min-height: 72px;
+      min-height: var(--size-72);
 
       small,
       .small,

package/src/less/grid.less

@@ -83,7 +83,7 @@
 [class*="col-md"],
 [class*="col-lg"],
 [class*="col-xl"] {
-  margin-bottom: (@spacer-y * 2);
+  margin-bottom: calc(var(--size-8) * 2);
 }
 
 [class*="col-xs"] {
@@ -124,7 +124,7 @@
 
   @media (max-width: @screen-xs-max) {
     .col-xs-12 {
-      margin-bottom: 12px;
+      margin-bottom: var(--size-12);
     }
   }
 }
@@ -132,13 +132,13 @@
 // Make grid gutters smaller on mobile
 @media (max-width: @screen-xs-max) {
   .row {
-    margin-right: -8px;
-    margin-left: -8px;
+    margin-right: calc(var(--size-8) * -1);
+    margin-left: calc(var(--size-8) * -1);
   }
 
   [class*="col-"] {
-    padding-right: 8px;
-    padding-left: 8px;
+    padding-right: var(--size-8);
+    padding-left: var(--size-8);
   }
 }
 

package/src/less/media.less

@@ -37,6 +37,13 @@
   .padding(right, var(--size-16));
 }
 
+@media (--screen-400-zoom) {
+  .media-right,
+  .media-left {
+    .padding(left, var(--size-32));
+  }
+}
+
 /* Headings */
 
 .media-heading {

package/src/less/neptune.bundle.less

@@ -1,5 +1,10 @@
 @import "@transferwise/neptune-tokens/tokens.css";
+@import '@transferwise/neptune-tokens/themes/personal/tokens.css';
+@import '@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css';
+@import '@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css';
+@import '@transferwise/neptune-tokens/themes/personal--dark/tokens.css';
 @import "./neptune-core.less";
+@import './core/viewport-themes.less';
 @import "./neptune-addons.less";
 
 // Components

package/src/less/process.less

@@ -33,6 +33,12 @@
 @process-xs-icon-size: 12px;
 @process-xs-icon-stroke: 2px;
 
+@process-xxs-radius: 6px;
+@process-xxs-circumference: (pi() * (2 * (@process-xxs-radius - 1)));
+@process-xxs-stroke: 1.5px;
+@process-xxs-icon-size: 6px;
+@process-xxs-icon-stroke: 1px;
+
 .process {
   position: relative;
   margin: auto;
@@ -223,6 +229,9 @@
     }
   }
 }
+.process-size(
+  xs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
+);
 .process-size(
   xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke
 );
@@ -233,6 +242,19 @@
   xl, @process-xl-radius, @process-xl-circumference, @process-xl-stroke, @process-xl-icon-size, @process-xl-icon-stroke
 );
 
+.process-xxs {
+  .process-circle {
+    animation-name: process-chase-circle-xxs;
+  }
+
+  &.process-success,
+  &.process-danger {
+    .process-circle {
+      animation-name: process-success-circle-xxs;
+    }
+  }
+}
+
 .process-xs {
   .process-circle {
     animation-name: process-chase-circle-xs;
@@ -310,6 +332,14 @@
   }
 }
 
+@keyframes process-chase-circle-xxs {
+  .chase-circle(@process-xxs-circumference);
+}
+
+@keyframes process-success-circle-xxs {
+  .complete-circle(@process-xxs-circumference);
+}
+
 @keyframes process-chase-circle-xs {
   .chase-circle(@process-xs-circumference);
 }