@transferwise/components 46.165.2 → 46.165.4

package/build/styles/SegmentedControl/SegmentedControl.css

@@ -6,14 +6,11 @@
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
-  padding: 4px;
   padding: var(--size-4);
   inline-size: 100%;
   justify-content: center;
   align-items: center;
-  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
-  border-radius: 24px;
   border-radius: var(--size-24);
   transition: outline 300ms;
   outline: 2px solid transparent;
@@ -25,15 +22,11 @@
   content: "";
   position: absolute;
   inline-size: var(--segment-highlight-width);
-  inset-block-start: 4px;
   inset-block-start: var(--size-4);
-  inset-block-end: 4px;
   inset-block-end: var(--size-4);
   inset-inline-start: var(--segment-highlight-x);
   z-index: 0;
-  background: #ffffff;
   background: var(--color-background-screen);
-  border-radius: 24px;
   border-radius: var(--size-24);
   transition: left 300ms,
     right 300ms;
@@ -45,19 +38,15 @@
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
-  padding-block: 8px;
   padding-block: var(--size-8);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
   margin-block: 0 0;
-  margin-inline: 4px 0;
   margin-inline: var(--size-4) 0;
   min-inline-size: 0;
   line-height: inherit;
   align-items: center;
   text-align: center;
   vertical-align: middle;
-  border-radius: 24px;
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
@@ -68,7 +57,6 @@
   margin-inline-start: 0;
 }
 .segmented-control__segment:hover {
-  background: rgba(0,0,0,0.10196);
   background: var(--color-background-overlay);
 }
 .segmented-control__radio-input {

package/build/styles/SlidingPanel/SlidingPanel.css

@@ -1,7 +1,6 @@
 .sliding-panel {
   transform: translateX(-100%)  ;
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
-  background: #ffffff;
   background: var(--color-background-elevated);
   z-index: 1030;
   position: absolute;
@@ -66,26 +65,20 @@
   box-shadow: inset -1px 0 0 0 #e2e6e8;
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-top {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
   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 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
 [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-right {
-  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
   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 rgba(0,0,0,0.10196);
   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 rgba(0,0,0,0.10196);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }
 [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
-  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }

package/build/styles/Snackbar/Snackbar.css

@@ -15,16 +15,11 @@
   align-items: center;
   justify-content: space-between;
   text-align: start;
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
   margin-block: 0;
-  margin-inline: 16px;
   margin-inline: var(--size-16);
-  padding-block: 8px;
   padding-block: var(--size-8);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  inline-size: calc(100% - 32px);
   inline-size: calc(100% - var(--size-32));
   transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
@@ -32,7 +27,6 @@
   box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
   position: relative;
   background: var(--color-contrast-theme);
-  border-radius: 10px;
   border-radius: var(--radius-small);
   color: var(--color-contrast-overlay);
 }
@@ -46,7 +40,6 @@
   inset-inline-start: 0;
   inset-block-start: 0;
   z-index: -1;
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-theme-personal--dark .snackbar__text,
@@ -61,7 +54,6 @@
 }
 .snackbar__text__action {
   flex-shrink: 0;
-  margin-inline-start: 16px;
   margin-inline-start: var(--size-16);
 }
 .snackbar__text-container-enter,

package/build/styles/StatusIcon/StatusIcon.css

@@ -24,7 +24,6 @@
 }
 .status-circle.neutral,
 .status-circle.info {
-  background-color: #5d7079;
   background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
 }
 .status-circle.neutral .status-icon,

package/build/styles/Stepper/Stepper.css

@@ -14,18 +14,15 @@
 }
 .tw-stepper__step--active .tw-stepper__step-label {
   cursor: default;
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .tw-stepper__step--clickable .tw-stepper__step-label {
-  color: #0097c7;
   color: var(--color-content-accent);
   transition: color 0.15s ease-in-out;
   line-height: 0;
   border-radius: 2px;
 }
 .np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label {
-  color: #5d7079;
   color: var(--color-content-secondary);
   inset-block-start: 0;
 }
@@ -43,7 +40,6 @@
 .tw-stepper__step-label {
   position: absolute;
   inset-block-start: 0;
-  color: #5d7079;
   color: var(--color-content-secondary);
   transition: color 0.6s ease-in-out;
   white-space: nowrap;

package/build/styles/Sticky/Sticky.css

@@ -1,4 +1,3 @@
 .wds-sticky.sliding-panel--open-bottom {
-  padding-block-end: env(safe-area-inset-bottom, 0px);
   padding-block-end: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
 }

package/build/styles/Switch/Switch.css

@@ -26,14 +26,12 @@
   color: #fff;
 }
 .np-switch--unchecked {
-  background: #c9cbce;
   background: var(--color-interactive-secondary);
 }
 .np-switch--unchecked .switch--thumb {
   transform: translateX(0);
 }
 .np-switch--checked {
-  background: #00a2dd;
   background: var(--color-interactive-accent);
 }
 .np-switch--checked .np-switch--thumb {
@@ -59,6 +57,5 @@
   block-size: 20px;
   margin: 3px;
   border-radius: 50%;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }

package/build/styles/Table/Table.css

@@ -3,7 +3,6 @@
   background-color: transparent;
 }
 .np-table-outer-container {
-  border-radius: 16px;
   border-radius: var(--radius-medium);
 }
 .np-table-outer-container:focus {
@@ -29,9 +28,7 @@
   inline-size: 100%;
 }
 .np-table-container {
-  padding: 8px;
   padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
@@ -83,11 +80,9 @@
 }
 .np-table-row--clickable .np-table-cell:first-child:before,
 .np-table-row--clickable .np-table-cell:last-child:before {
-  inline-size: calc(100% - 8px);
   inline-size: calc(100% - var(--size-8));
 }
 .np-table-row--clickable .np-table-cell:first-child:before {
-  inset-inline-start: 8px;
   inset-inline-start: var(--size-8);
   border-start-start-radius: 6px;
   border-end-start-radius: 6px;
@@ -107,7 +102,6 @@
   inset-inline-start: 0;
 }
 .np-table-row--cosmetic .np-table-cell {
-  block-size: 8px;
   block-size: var(--size-8);
   padding: 0;
 }
@@ -117,7 +111,6 @@
 }
 .np-table-header:first-child,
 .np-table-cell:first-child {
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .np-table-header:first-child .np-table-header-content,
@@ -128,7 +121,6 @@
 }
 .np-table-header:last-child,
 .np-table-cell:last-child {
-  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 .np-table-header:last-child .np-table-header-content,
@@ -143,7 +135,6 @@
 }
 .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
 .np-table-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
-  padding-inline-start: calc(8px + 12px);
   padding-inline-start: calc(var(--size-8) + var(--size-12));
 }
 .np-table-header.np-table-header--right .np-table-header-content,
@@ -158,13 +149,9 @@
 }
 .np-table-header {
   min-inline-size: 160px;
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
-  padding-block-end: 8px;
   padding-block-end: var(--size-8);
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
@@ -172,9 +159,7 @@
   padding-block-start: 5px;
   padding-block-end: 5px;
   white-space: nowrap;
-  line-height: 1.375rem;
   line-height: var(--line-height-22);
-  letter-spacing: 0.0125em;
   letter-spacing: var(--letter-spacing-sm);
 }
 .np-table-header--error {
@@ -185,9 +170,7 @@
   padding: 0;
 }
 .np-table-cell {
-  padding-block: 16px;
   padding-block: var(--size-16);
-  padding-inline: 8px;
   padding-inline: var(--size-8);
   position: relative;
 }
@@ -201,23 +184,18 @@
   white-space: nowrap;
 }
 .np-table-cell .tw-chevron {
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
 }
 .np-table-cell-separator {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
-  margin-block-end: 4px;
   margin-block-end: var(--size-4);
   block-size: 1px;
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   padding: 0;
 }
 .np-table-cell .np-text-body-default-bold {
   display: flex;
   align-items: center;
-  color: #37517e;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
@@ -238,12 +216,10 @@
   }
 }
 .np-table-content {
-  gap: 12px;
   gap: var(--size-12);
 }
 .np-table-content--success,
 .np-table-content--error {
-  gap: 4px;
   gap: var(--size-4);
 }
 .np-table-content--success .np-table-content-text,
@@ -256,9 +232,7 @@
 .np-table-content-body {
   display: flex;
   flex-direction: column;
-  font-size: 0.75rem;
   font-size: var(--font-size-12);
-  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 .np-table-content--reversed {
@@ -272,6 +246,5 @@
   align-items: center;
 }
 .np-table-empty-data .status-circle {
-  margin-inline-end: 12px;
   margin-inline-end: var(--size-12);
 }

package/build/styles/Tabs/Tabs.css

@@ -5,35 +5,27 @@
   display: inline-block;
   outline: none;
   text-align: center;
-  padding: 8px;
   padding: var(--size-8);
   margin-block-end: -2px;
-  color: #37517e;
   color: var(--color-content-primary);
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   transition: color 0.15s ease-in-out;
 }
 .np-theme-personal .tabs__tab {
-  color: #5d7079;
   color: var(--color-content-secondary);
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 .tabs__tab--selected {
-  color: #0097c7;
   color: var(--color-content-accent);
 }
 .np-theme-personal .tabs__tab--selected {
   color: var(--color-interactive-primary);
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
 .tabs__tab__content {
   border-radius: 2px;
 }
 .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
@@ -43,7 +35,6 @@
 }
 @media (min-width: 1160px) {
   .tabs__tab:not(.disabled):not(:disabled):hover {
-    color: #0084b3;
     color: var(--color-content-accent-hover);
   }
   .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
@@ -52,7 +43,6 @@
 }
 @media (hover: hover) {
   .tabs__tab:not(.disabled):not(:disabled):hover {
-    color: #0084b3;
     color: var(--color-content-accent-hover);
   }
   .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
@@ -63,13 +53,10 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  border-block-end: 1px solid rgba(0,0,0,0.10196);
-  border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
 .tabs__line {
   block-size: 2px;
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
   position: relative;
@@ -85,7 +72,6 @@
   display: flex;
 }
 .tabs__panel--selected {
-  padding: 8px;
   padding: var(--size-8);
 }
 .tabs__panel.enter {
@@ -98,8 +84,6 @@
   opacity: 0;
 }
 .tabs--inverse .tabs__tab-list {
-  border-block-end-color: rgba(0,0,0,0.10196);
-  border-block-end-color: #0000001a;
   border-block-end-color: var(--color-border-neutral);
 }
 .tabs--inverse .tabs__tab:not(.tabs__tab--selected) {
@@ -107,10 +91,8 @@
 }
 .tabs.tabs--auto-width .tabs__tab {
   display: inline-flex;
-  min-block-size: 40px;
   min-block-size: var(--size-40);
   padding-block: 0;
-  padding-inline: 12px;
   padding-inline: var(--size-12);
   justify-content: center;
   align-items: center;
@@ -119,7 +101,6 @@
 @media (min-width: 600px) {
   .tabs.tabs--auto-width .tabs__tab {
     padding-block: 0;
-    padding-inline: 24px;
     padding-inline: var(--size-24);
   }
 }

package/build/styles/Tag/Tag.css

@@ -11,10 +11,8 @@
 }
 .wds-tag--small {
   border-radius: 6px;
-  font-size: 0.75rem;
   font-size: var(--font-size-12);
   padding-block: 1px;
-  padding-inline: 4px;
   padding-inline: var(--size-4);
 }
 .wds-tag--large {

package/build/styles/Tile/Tile.css

@@ -1,11 +1,9 @@
 .np-tile {
   min-inline-size: 120px;
-  border-radius: 10px;
   border-radius: var(--radius-small);
   inline-size: 100%;
 }
 .np-theme-personal .np-tile {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
@@ -13,7 +11,6 @@
 }
 .np-tile.decision {
   margin-block-start: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
 }
 .np-theme-personal .np-tile.decision {
@@ -26,7 +23,6 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-theme-personal .np-tile.decision .np-text-body-default {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-tile.np-decision__tile--fixed-width {
@@ -36,9 +32,7 @@
   inline-size: 100%;
 }
 .np-tile__description {
-  color: #5d7079;
   color: var(--color-content-secondary);
-  margin-block-start: 12px;
   margin-block-start: var(--size-12);
   display: inline-block;
 }
@@ -46,23 +40,17 @@
   inline-size: 260px;
 }
 .np-tile--small .np-tile__description {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-tile:hover .tw-avatar {
   pointer-events: none;
 }
 .np-tile:hover .tw-avatar .tw-avatar__content {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-tile__description {
-  color: #5d7079;
   color: var(--color-content-secondary);
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
-  line-height: 1.5;
   line-height: var(--line-height-body);
-  margin-block-start: 12px;
   margin-block-start: var(--size-12);
 }

package/build/styles/Typeahead/Typeahead.css

@@ -7,11 +7,8 @@
 .typeahead .dropdown-menu {
   max-inline-size: 100%;
   inline-size: 100%;
-  margin-block-start: 8px;
   margin-block-start: var(--size-8);
-  scroll-padding-top: 8px;
   scroll-padding-top: var(--size-8);
-  scroll-padding-bottom: 8px;
   scroll-padding-bottom: var(--size-8);
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
@@ -25,7 +22,6 @@
 .np-theme-personal--forest-green .typeahead .dropdown-menu,
 .np-theme-personal--bright-green .typeahead .dropdown-menu,
 .np-theme-personal--dark .typeahead .dropdown-menu {
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }
 .typeahead--multiple .np-chip {
@@ -75,21 +71,17 @@
   inline-size: auto;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-container {
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .typeahead--multiple.typeahead--has-value .input-group-addon + .typeahead__input-container {
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
-  margin-block-end: calc(-1 * 8px + 1px);
   margin-block-end: calc(-1 * var(--size-8) + 1px);
-  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
-  block-size: calc(8px - 1);
   block-size: calc(var(--size-8) - 1);
   inline-size: 100%;
 }
@@ -109,7 +101,6 @@
   margin: 0;
 }
 .typeahead--prompt {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
@@ -125,11 +116,9 @@
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
-  padding-block-start: calc(8px - 1);
   padding-block-start: calc(var(--size-8) - 1);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
-  padding-block-end: 8px;
   padding-block-end: var(--size-8);
   margin: 0;
 }
@@ -174,19 +163,16 @@
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .typeahead .tw-icon-search {
-  color: #c9cbce;
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
   margin-block-start: 9px !important;
 }
 .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
-  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
   .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
-    padding-inline-end: 32px;
     padding-inline-end: var(--size-32);
   }
 }

package/build/styles/Typeahead/TypeaheadOption/TypeaheadOption.css

@@ -2,9 +2,7 @@
   color: #ffffff;
 }
 .typeahead__option.tw-dropdown-item--focused {
-  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,

package/build/styles/Upload/Upload.css

@@ -20,10 +20,7 @@
   outline-offset: var(--ring-outline-offset);
 }
 .upload-error-message {
-  margin-block-start: 24px;
   margin-block-start: var(--padding-medium);
-  border-block-start: 1px solid rgba(0,0,0,0.10196);
-  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   text-align: start;
 }

package/build/styles/UploadInput/UploadButton/UploadButton.css

@@ -1,13 +1,10 @@
 .np-upload-input__upload-button {
   position: relative;
-  padding: 16px;
   padding: var(--size-16);
   display: flex;
   align-items: center;
   margin: 0;
-  border-end-start-radius: 10px;
   border-end-start-radius: var(--radius-small);
-  border-end-end-radius: 10px;
   border-end-end-radius: var(--radius-small);
   border: var(--outerBorder);
   cursor: pointer;
@@ -19,11 +16,9 @@
   text-underline-offset: 0.3em;
 }
 .np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-upload-input__upload-button .np-upload-input__icon {
-  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
   color: var(--color-interactive-primary);
 }
@@ -60,24 +55,19 @@
   display: block;
   position: absolute;
   block-size: 1px;
-  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
-  inset-inline-start: 16px;
   inset-inline-start: var(--size-16);
-  inline-size: calc(100% - 2 * 16px);
   inline-size: calc(100% - 2 * var(--size-16));
   inset-block-start: 0;
 }
 .np-upload-input__upload-button--without-entries {
   border-block-start: var(--outerBorder);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-upload-input__upload-button--enabled.is-dropping,
 .np-upload-input__upload-button--enabled:hover,
 .np-upload-input__upload-button--enabled:active {
-  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
 }
 .np-upload-input__upload-button--enabled.is-dropping:before,

package/build/styles/UploadInput/UploadInput.css

@@ -1,13 +1,11 @@
 .np-upload-input {
   --outerBorder: 1px solid var(--color-interactive-secondary);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-upload-input .np-upload-input__section {
   margin: 0;
 }
 .np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
-  border-radius: 10px;
   border-radius: var(--radius-small);
   border-block-end: var(--outerBorder);
 }