@transferwise/components 0.0.0-experimental-95dfe69 → 0.0.0-experimental-526a2be

package/src/Drawer/Drawer.css

@@ -15,11 +15,14 @@
   }
 }
 .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);
   }
 }
@@ -32,19 +35,23 @@
   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,25 +1,31 @@
 .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,7 +1,9 @@
 .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,9 +45,11 @@
   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;
 }
@@ -56,6 +58,7 @@
 }
 .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,18 +1,23 @@
 .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],
@@ -20,5 +25,6 @@
   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,6 +20,7 @@
   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,6 +21,8 @@
   }
 }
 .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 {
@@ -43,10 +45,13 @@
   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,22 +1,30 @@
 .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,6 +3,7 @@
 }
 .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 {
@@ -13,12 +14,15 @@
 }
 .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 {
@@ -36,6 +40,7 @@
 }
 .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,9 +5,13 @@
   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;
@@ -35,12 +39,16 @@
   --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) {
@@ -78,11 +86,14 @@
   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) {
@@ -115,15 +126,19 @@
 }
 @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) {
@@ -156,20 +171,26 @@
 }
 @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) {
@@ -203,12 +224,15 @@
 .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 {
@@ -231,8 +255,10 @@
   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,6 +3,7 @@
   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 > * {
@@ -10,28 +11,22 @@
   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) {
@@ -42,6 +37,7 @@
   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 {
@@ -54,16 +50,22 @@
   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,21 +14,11 @@
   .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);

package/src/Inputs/InputGroup/_stories/InputGroup.test.story.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search } from '@transferwise/icons';
 
@@ -20,9 +19,6 @@ type Story = StoryObj<typeof InputGroup>;
  * In RTL mode the start and end sides are mirrored, so an addonStart icon
  * should appear on the right and an addonEnd button should appear on the left.
  * All three placement combinations are included to verify each case.
- *
- * Each combination is also rendered with Latin and Arabic values: `dir="auto"`
- * can resolve the input opposite to the page, and the addons must not overlap the text.
  */
 export const RTLDiff: Story = {
   render: () => {
@@ -30,50 +26,46 @@ export const RTLDiff: Story = {
 
     return (
       <>
-        {[undefined, 'non-RTL value', 'مرحبا بالعالم'].map((value) => (
-          <Fragment key={value ?? 'placeholder'}>
-            <InputGroup
-              addonStart={{
-                content: <Search size={24} />,
-                initialContentWidth: 24,
-              }}
-            >
-              <Input placeholder={i18n.placeholder_start} defaultValue={value} />
-            </InputGroup>
+        <InputGroup
+          addonStart={{
+            content: <Search size={24} />,
+            initialContentWidth: 24,
+          }}
+        >
+          <Input placeholder={i18n.placeholder_start} />
+        </InputGroup>
 
-            <InputGroup
-              addonEnd={{
-                content: (
-                  <Button v2 size="sm">
-                    {i18n.copy}
-                  </Button>
-                ),
-                interactive: true,
-                padding: 'sm',
-              }}
-            >
-              <Input placeholder={i18n.placeholder_end} defaultValue={value} />
-            </InputGroup>
+        <InputGroup
+          addonEnd={{
+            content: (
+              <Button v2 size="sm">
+                {i18n.copy}
+              </Button>
+            ),
+            interactive: true,
+            padding: 'sm',
+          }}
+        >
+          <Input placeholder={i18n.placeholder_end} />
+        </InputGroup>
 
-            <InputGroup
-              addonStart={{
-                content: <Search size={24} />,
-                initialContentWidth: 24,
-              }}
-              addonEnd={{
-                content: (
-                  <Button v2 size="sm">
-                    {i18n.clear}
-                  </Button>
-                ),
-                interactive: true,
-                padding: 'sm',
-              }}
-            >
-              <Input placeholder={i18n.placeholder_both} defaultValue={value} />
-            </InputGroup>
-          </Fragment>
-        ))}
+        <InputGroup
+          addonStart={{
+            content: <Search size={24} />,
+            initialContentWidth: 24,
+          }}
+          addonEnd={{
+            content: (
+              <Button v2 size="sm">
+                {i18n.clear}
+              </Button>
+            ),
+            interactive: true,
+            padding: 'sm',
+          }}
+        >
+          <Input placeholder={i18n.placeholder_both} />
+        </InputGroup>
       </>
     );
   },

package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css

@@ -5,6 +5,7 @@
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
+  background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
   transition-property: opacity;
@@ -18,8 +19,11 @@
   position: fixed;
   inset: 0px;
   inset-block-end: env(keyboard-inset-height, 0px);
+  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
+  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
+  margin-block-start: 64px;
   margin-block-start: var(--size-64);
   display: flex;
   flex-direction: column;
@@ -33,6 +37,7 @@
   /* TODO: Tokenize */
   border-start-end-radius: 32px;
   /* TODO: Tokenize */
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
@@ -61,12 +66,15 @@
 }
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
+  padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
   display: grid;
   grid-template-rows: minmax(0, 1fr);
+  grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
+  row-gap: 8px;
   row-gap: var(--size-8);
   overflow: auto;
 }
@@ -74,12 +82,15 @@
   grid-template-rows: auto minmax(0, 1fr);
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
+  padding: 16px;
   padding: var(--size-16);
   padding-block-start: 0px;
 }
 .np-bottom-sheet-v2-title {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-bottom-sheet-v2-body {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/Inputs/SelectInput/ButtonInput/SelectInputButtonInput.css

@@ -2,6 +2,7 @@
   display: inline-grid;
   grid-auto-columns: minmax(0, 1fr);
   align-content: center;
+  border-radius: 10px;
   border-radius: var(--size-10);
   text-align: start;
 }
@@ -12,6 +13,8 @@
 .np-button-input:has(.np-select-input-option-description-in-trigger) {
   block-size: auto !important;
   align-content: start;
+  padding-block-start: 12px !important;
   padding-block-start: var(--size-12) !important;
+  padding-block-end: 12px !important;
   padding-block-end: var(--size-12) !important;
 }

package/src/Inputs/SelectInput/ClearButton/SelectInputClearButton.css

@@ -1,17 +1,21 @@
 .np-select-input-addon-container {
   pointer-events: none;
+  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
   display: inline-flex;
   align-items: center;
 }
 .np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
+  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
 .np-select-input-addon {
   border-width: 0;
   background: none;
   display: inline-flex;
+  block-size: 24px;
   block-size: var(--size-24);
+  inline-size: 24px;
   inline-size: var(--size-24);
   align-items: center;
   justify-content: center;
@@ -20,9 +24,11 @@
 }
 .np-select-input-addon--interactive {
   pointer-events: auto;
+  color: #c9cbce;
   color: var(--color-interactive-secondary);
 }
 .np-select-input-addon--interactive:hover {
+  color: #b5b7ba;
   color: var(--color-interactive-secondary-hover);
 }
 .np-select-input-addon--interactive:focus {
@@ -33,6 +39,8 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-select-input-addon-separator {
+  block-size: 24px;
   block-size: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
   border-inline-start: 1px solid var(--color-border-neutral);
 }