@transferwise/components 46.165.2 → 46.165.4

package/src/Chips/Chip/Chip.css

@@ -1,23 +1,16 @@
 .np-chip {
   background-color: transparent;
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
-  border-radius: 16px;
   border-radius: var(--size-16);
-  color: #5d7079;
   color: var(--color-content-secondary);
-  block-size: 32px;
   block-size: var(--size-32);
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
   padding-block: 0;
-  padding-inline: 12px;
   padding-inline: var(--size-12);
   transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
 @media (max-width: 320px) {
   .np-chip {
-    block-size: 40px;
     block-size: var(--size-40);
   }
 }
@@ -34,33 +27,26 @@
   margin-inline-end: 0;
 }
 .np-chip:active {
-  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
-  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
   color: #fff;
 }
 .np-chip--selected {
   color: #fff;
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
   pointer-events: none;
 }
 .np-chip--selected:hover,
 .np-chip--selected:active {
   color: #fff;
-  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
-  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .np-chip--selected .np-close-button {
   color: white;
 }
 .np-chip.has-error {
-  background: #e74848;
   background: var(--color-interactive-negative);
   color: #fff;
 }
@@ -84,29 +70,23 @@
   border-color: var(--color-sentiment-negative-active) !important;
 }
 .np-theme-personal .np-chip {
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   color: var(--color-interactive-primary);
   padding-block: 0;
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .np-theme-personal .np-chip:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-primary-hover);
   background-color: var(--color-background-screen-hover);
-  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .np-chip:not(.disabled):not(:disabled):active {
   color: var(--color-interactive-primary-active);
   background-color: var(--color-background-screen-active);
-  border-color: #a7a9ab;
   border-color: var(--color-interactive-secondary-active);
 }
 .np-theme-personal .np-chip .np-close-button {
-  margin-inline-end: calc(8px * -1);
   margin-inline-end: calc(var(--size-8) * -1);
   border-radius: inherit;
 }
@@ -135,12 +115,10 @@
   position: relative;
 }
 .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
-  padding-inline-end: 24px;
   padding-inline-end: var(--size-24);
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
-    padding-inline-end: 48px;
     padding-inline-end: var(--size-48);
   }
 }
@@ -149,7 +127,6 @@
   inset-block-start: 0;
   inset-inline-start: 0;
   position: absolute;
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
   block-size: 100%;
   inline-size: 100%;

package/src/Chips/_stories/Chips.test.story.tsx

@@ -163,7 +163,7 @@ export const RTLDiff: Story = {
       <>
         {/* Choice mode: chip row order reverses in RTL */}
         <Chips
-          chips={amountChips}
+          chips={amountChips.toSpliced(0, 1)}
           selected={300}
           multiple={false}
           aria-label={i18n.transferAmount}

package/src/Container/Container.css

@@ -6,7 +6,6 @@
   --wds-container-width-compact: 600px;
   inline-size: 100%;
   margin-inline: auto;
-  padding-inline: 16px;
   padding-inline: var(--wds-container-padding-inline);
 }
 @media (min-width: 600px) {

package/src/DateLookup/DateTrigger/DateTrigger.css

@@ -5,14 +5,11 @@
   inline-size: 100%;
 }
 .np-theme-personal .np-date-trigger {
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .clear-btn {
   position: absolute;
-  inset-block-start: 8px;
   inset-block-start: var(--size-8);
-  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
 }
 .clear-btn--sm {

package/src/Decision/Decision.css

@@ -2,16 +2,12 @@
   display: flex;
 }
 .np-decision__tile--small .np-text-title-subsection {
-  font-size: 1rem;
   font-size: var(--font-size-16);
-  line-height: 1.2;
   line-height: var(--line-height-title);
 }
 .np-decision:not(.flex-column) {
-  gap: 24px;
   gap: var(--size-24);
 }
 .np-decision:not(.flex-column).np-decision--small {
-  gap: 16px;
   gap: var(--size-16);
 }

package/src/DefinitionList/DefinitionList.css

@@ -31,22 +31,17 @@
     flex: 1;
     min-inline-size: 150px;
     max-inline-size: 30%;
-    margin-inline-end: 8px;
     margin-inline-end: var(--size-8);
   }
   .tw-definition-list.tw-definition-list--horizontal .tw-definition-list__item dd {
     flex: 1;
     align-items: center;
-    margin-block-end: 8px;
     margin-block-end: var(--size-8);
   }
   .tw-definition-list.tw-definition-list--horizontal-right-aligned {
     display: grid;
     grid-template-columns: minmax(0, max-content) minmax(0, max-content);
-    grid-column-gap: 52px;
     grid-column-gap: var(--size-52);
-    -moz-column-gap: 52px;
-         column-gap: 52px;
     -moz-column-gap: var(--size-52);
          column-gap: var(--size-52);
     justify-content: space-between;
@@ -67,6 +62,5 @@
   }
 }
 .np-theme-personal .tw-definition-list dt {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/DefinitionList/_stories/DefinitionList.test.story.tsx

@@ -203,7 +203,7 @@ export const RTLDiff: Story = {
     ];
 
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
+      <div>
         {layouts.map((layout) => (
           <section key={layout}>
             <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>{layout}</h3>
@@ -222,6 +222,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [8, 11, 8, 8, 8, 10, 12, 8, 8, 8] },
     i18n: {
       fullName: { en: 'Full name', ar: 'الاسم الكامل' },
       customerName: { en: 'Alice Smith', ar: 'أليس سميث' },

package/src/Divider/Divider.css

@@ -4,13 +4,10 @@
   --Divider-border-style: solid;
   --Divider-dash-length: 4px;
   --Divider-dash-spacing: 4px;
-  border-block-start: 4px solid rgba(0,0,0,0.10196);
-  border-block-start: 4px solid #0000001a;
   border-block-start: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
   display: inline-block;
   margin: 0;
   padding: 0;
-  block-size: 4px;
   block-size: var(--Divider-border-width);
   inline-size: 100%;
 }

package/src/Drawer/Drawer.css

@@ -15,14 +15,11 @@
   }
 }
 .np-drawer .np-drawer-header {
-  min-block-size: 56px;
   min-block-size: var(--size-56);
-  padding: 24px;
   padding: var(--size-24);
 }
 @media (max-width: 320px) {
   .np-drawer .np-drawer-header {
-    padding: 16px;
     padding: var(--size-16);
   }
 }
@@ -35,23 +32,19 @@
   background-color: transparent;
 }
 .np-drawer .np-drawer-footer {
-  padding: 16px;
   padding: var(--size-16);
 }
 .np-drawer .np-drawer-content {
   padding-block: 0;
-  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 @media (min-width: 840px) {
   .np-drawer .np-drawer-header,
   .np-drawer .np-drawer-footer {
-    padding: 24px;
     padding: var(--size-24);
   }
   .np-drawer .np-drawer-content {
     padding-block: 0;
-    padding-inline: 24px;
     padding-inline: var(--size-24);
   }
 }

package/src/Emphasis/Emphasis.css

@@ -1,31 +1,25 @@
 .emphasis {
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   font-style: normal;
 }
 .emphasis--important {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .emphasis--positive {
-  color: #008026;
   color: var(--color-content-positive);
 }
 .np-theme-personal .emphasis--positive {
   color: var(--color-sentiment-positive);
 }
 .emphasis--negative {
-  color: #cf2929;
   color: var(--color-content-negative);
 }
 .np-theme-personal .emphasis--negative {
   color: var(--color-sentiment-negative);
 }
 .emphasis--warning {
-  color: #9a6500;
   color: var(--color-content-warning);
 }
 .np-theme-personal .emphasis--warning {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/ExpressiveMoneyInput/Chevron/Chevron.css

@@ -1,9 +1,7 @@
 .wds-chevron-container {
-  inline-size: 32px;
   inline-size: var(--size-32);
   overflow: hidden;
   color: var(--color-interactive-primary);
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
   transition: width 0.3s ease;
 }

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css

@@ -45,11 +45,9 @@
   mix-blend-mode: initial !important;
 }
 .wds-chevron-container {
-  inline-size: 32px;
   inline-size: var(--size-32);
   overflow: hidden;
   color: var(--color-interactive-primary);
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
   transition: width 0.3s ease;
 }
@@ -58,7 +56,6 @@
 }
 .wds-expressive-money-input-currency-selector {
   flex-shrink: 0;
-  margin-inline-end: 24px;
   margin-inline-end: var(--size-24);
 }
 .wds-expressive-money-input-chevron {

package/src/Field/Field.css

@@ -1,23 +1,18 @@
 .np-field-control {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-field-validation {
   display: flex;
   align-items: flex-start;
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
-  gap: 8px;
   gap: var(--size-8);
 }
 .np-field-textarea-char-counter {
   min-inline-size: 55px;
   text-align: end;
   margin-inline-start: auto;
-  padding-block: 4px;
   padding-block: var(--size-4);
   padding-inline: 0;
-  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 .np-field .form-group--typeahead[class],
@@ -25,6 +20,5 @@
   margin-block-end: 0;
 }
 .np-field:has(.wds-radio-group) .np-field-validation {
-  margin-block-start: 12px;
   margin-block-start: var(--size-12);
 }

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.css

@@ -20,7 +20,6 @@
   transition: all 0.3s ease-in 0.3s;
 }
 .np-animated-label-option {
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-animated-label-option:not(.disabled):hover,

package/src/FlowNavigation/FlowNavigation.css

@@ -21,8 +21,6 @@
   }
 }
 .np-flow-navigation--border-bottom {
-  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);
 }
 .np-flow-navigation__content {
@@ -45,13 +43,10 @@
   block-size: auto;
 }
 .np-flow-navigation--xs-max .np-animated-label .tw-icon-chevron-down {
-  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
 .np-flow-navigation--sm .np-flow-navigation__stepper {
-  padding-inline-start: 24px !important;
   padding-inline-start: var(--size-24) !important;
-  padding-inline-end: 24px !important;
   padding-inline-end: var(--size-24) !important;
   min-block-size: 56px;
 }

package/src/Header/Header.css

@@ -1,30 +1,22 @@
 .np-header {
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-column-gap: 24px;
   grid-column-gap: var(--size-24);
-  -moz-column-gap: 24px;
-       column-gap: 24px;
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
   align-items: center;
-  margin-block-end: 8px;
   margin-block-end: var(--size-8);
   max-inline-size: 100%;
-  padding-block: 8px;
   padding-block: var(--size-8);
   padding-inline: 0;
   inline-size: 100%;
 }
 .np-header--group {
   align-items: flex-end;
-  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);
 }
 .np-header--group,
 .np-header--group .np-header__title {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-header__action {

package/src/Header/_stories/Header.test.story.tsx

@@ -134,7 +134,7 @@ export const RTLDiff: Story = {
   render: () => {
     const i18n = useRtlDiffI18n();
     return (
-      <>
+      <div>
         <Header title={i18n.groupWithoutAction} level="group" />
         <Header
           title={i18n.groupWithAction}
@@ -147,10 +147,11 @@ export const RTLDiff: Story = {
           level="section"
           action={{ 'aria-label': i18n.learnMore, text: i18n.learnMore, href: '#' }}
         />
-      </>
+      </div>
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [4, 4, 5, 5], hideSeparators: true },
     i18n: {
       groupWithoutAction: { en: 'Group level without action', ar: 'مستوى المجموعة بدون إجراء' },
       groupWithAction: { en: 'Group level with action', ar: 'مستوى المجموعة مع إجراء' },

package/src/IconButton/IconButton.css

@@ -3,7 +3,6 @@
 }
 .np-icon-button-tertiary-default {
   color: var(--color-interactive-primary);
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
@@ -14,15 +13,12 @@
 }
 .np-icon-button-primary-default {
   color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
-  background-color: #00a2dd;
   background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
-  background-color: #008fc9;
   background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
-  background-color: #0081ba;
   background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
 }
 .np-icon-button-primary-negative {
@@ -40,7 +36,6 @@
 }
 .np-icon-button-minimal-default {
   color: var(--color-interactive-primary);
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-color: transparent;
 }

package/src/Inputs/Input/Input.css

@@ -5,13 +5,9 @@
   background-color: transparent;
   min-block-size: 0;
   /* TODO: Remove this override once `.form-control` isn’t used anymore */
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
-  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
-  color: #37517e;
   color: var(--color-content-primary);
-  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;
@@ -39,16 +35,12 @@
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
-  font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
   word-wrap: break-word;
-  padding-block-start: 12px;
   padding-block-start: var(--size-12);
-  padding-block-end: 12px;
   padding-block-end: var(--size-12);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -86,14 +78,11 @@
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
   word-wrap: break-word;
-  block-size: 32px !important;
   block-size: var(--size-32) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -126,19 +115,15 @@
 }
 @media (max-width: 320px) {
   .np-form-control--size-sm {
-    block-size: 64px !important;
     block-size: var(--size-64) !important;
   }
 }
 .np-form-control--size-md {
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
-  font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
   word-wrap: break-word;
-  block-size: 48px !important;
   block-size: var(--size-48) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -171,26 +156,20 @@
 }
 @media (max-width: 320px) {
   .np-form-control--size-md {
-    block-size: 72px !important;
     block-size: var(--size-72) !important;
   }
 }
 .np-form-control--size-lg {
   margin: 0;
-  color: #37517e;
   color: var(--color-content-primary);
-  line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
-  font-size: 1.375rem;
   font-size: var(--font-size-22);
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   letter-spacing: -0.018em;
   line-height: 125%;
-  block-size: 72px !important;
   block-size: var(--size-72) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -224,15 +203,12 @@
 .np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .np-input::-moz-placeholder {
-  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 .np-input::placeholder {
-  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 [dir="rtl"] .np-input::-moz-placeholder {
@@ -255,10 +231,8 @@
   direction: ltr !important;
 }
 .np-input--shape-rectangle {
-  border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
 }
 .np-input--shape-pill {
-  border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }

package/src/Inputs/InputGroup/InputGroup.css

@@ -3,7 +3,6 @@
   inline-size: 100%;
   grid-auto-columns: minmax(0, 1fr);
   /* Prevent unwanted `group-hover/input` triggers */
-  border-radius: 9999px;
   border-radius: var(--radius-full);
 }
 .np-input-group > * {
@@ -11,22 +10,28 @@
   grid-row-start: 1;
 }
 .np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
-  padding-inline-start: 48px;
   padding-inline-start: var(--size-48);
 }
+/* `dir="auto"` can resolve opposite to the group, which would apply addon paddings to the wrong sides */
+.np-input-group:dir(ltr) > .np-input:dir(rtl) {
+  direction: ltr;
+  unicode-bidi: plaintext;
+}
+.np-input-group:dir(rtl) > .np-input:dir(ltr) {
+  direction: rtl;
+  unicode-bidi: plaintext;
+}
 .np-input-addon {
   pointer-events: none;
   z-index: 10;
   display: inline-flex;
   align-items: center;
-  color: #c9cbce;
   color: var(--color-interactive-secondary);
   transition-property: color, opacity;
   transition-timing-function: ease-out;
   transition-duration: 150ms;
 }
 .np-input-addon.np-input-addon--avatar > .np-avatar-view {
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
 }
 .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
@@ -37,7 +42,6 @@
   color: var(--color-interactive-primary);
 }
 .np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
-  color: #b5b7ba;
   color: var(--color-interactive-secondary-hover);
 }
 .np-input-addon--placement-start {
@@ -50,22 +54,16 @@
   pointer-events: auto;
 }
 .np-input-addon--padding-sm {
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
 }
 .np-input-addon--padding-md {
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
-  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 .np-input-addon--padding-md.np-input-addon--placement-start {
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
 }
 .np-input-addon--padding-md.np-input-addon--placement-end {
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }

package/src/Inputs/InputGroup/InputGroup.less

@@ -14,11 +14,21 @@
   .np-input-addon--avatar
     + fieldset
     .form-control.np-form-control.np-form-control--size-md.np-button-input {
-    padding-left: 48px;
     padding-left: var(--size-48);
   }
 }
 
+/* `dir="auto"` can resolve opposite to the group, which would apply addon paddings to the wrong sides */
+.np-input-group:dir(ltr) > .np-input:dir(rtl) {
+  direction: ltr;
+  unicode-bidi: plaintext;
+}
+
+.np-input-group:dir(rtl) > .np-input:dir(ltr) {
+  direction: rtl;
+  unicode-bidi: plaintext;
+}
+
 .np-input-addon {
   &.np-input-addon--avatar > .np-avatar-view {
     margin-right: var(--size-8);