@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

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);
 }

package/src/Inputs/SelectInput/ItemView/SelectInputItemView.css

@@ -1,13 +1,16 @@
 .np-select-input-group-item--without-needle:first-child {
+  margin-block-start: calc(-1 * 8px);
   margin-block-start: calc(-1 * var(--size-8));
 }
 .np-select-input-group-item-header {
   position: sticky;
   inset-block-start: 0px;
   z-index: 10;
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }
 .np-select-input-separator-item {
+  margin: 8px;
   margin: var(--size-8);
   border-block-start-width: 1px;
 }

package/src/Inputs/SelectInput/Option/SelectInputOption.css

@@ -5,10 +5,15 @@
      -moz-user-select: none;
           user-select: none;
   align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
+  border-radius: 10px;
   border-radius: var(--radius-small);
+  padding-block: 12px;
   padding-block: var(--size-12);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
   color: var(--color-interactive-primary);
 }
@@ -16,6 +21,7 @@
   outline: none;
 }
 .np-select-input-option-container--active {
+  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .np-select-input-option-container--disabled {

package/src/Inputs/SelectInput/Option/SelectInputOption.tsx

@@ -34,7 +34,7 @@ export function SelectInputOption<T = string>({
       disabled={disabled}
       className={({ active, disabled: uiDisabled }) =>
         clsx(
-          'np-select-input-option-container np-text-body-large wds-text-body-large',
+          'np-select-input-option-container np-text-body-large',
           active && 'np-select-input-option-container--active',
           uiDisabled && 'np-select-input-option-container--disabled',
         )

package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.css

@@ -1,8 +1,11 @@
 .np-select-input-option-content-container {
   display: flex;
   align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-select-input-option-content-icon {
@@ -18,6 +21,7 @@
   overflow: hidden;
 }
 .np-select-input-option-content-text-secondary {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-select-input-option-content-text-within-trigger {
@@ -26,6 +30,8 @@
   white-space: nowrap;
 }
 .np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
+  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
+  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
 }

package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx

@@ -28,7 +28,7 @@ export function SelectInputOptionContent({
     <div
       className={clsx(
         'np-select-input-option-content-container',
-        (note || description) && 'np-text-body-large wds-text-body-large',
+        (note || description) && 'np-text-body-large',
         className,
       )}
     >
@@ -52,7 +52,7 @@ export function SelectInputOptionContent({
         >
           <div className="d-inline np-select-input-option-content-title">{title}</div>
           {note ? (
-            <span className="np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default">
+            <span className="np-select-input-option-content-text-secondary np-text-body-default">
               {note}
             </span>
           ) : null}
@@ -61,7 +61,7 @@ export function SelectInputOptionContent({
         {description ? (
           <div
             className={clsx(
-              'np-select-input-option-content-text-secondary np-text-body-default wds-text-body-default',
+              'np-select-input-option-content-text-secondary np-text-body-default',
               withinTrigger &&
                 'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',
             )}

package/src/Inputs/SelectInput/Options/SelectInputOptions.css

@@ -14,25 +14,34 @@
 .np-select-input-options-status {
   display: flex;
   align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
+  padding-block: 8px 0px;
   padding-block: var(--size-8) 0px;
+  padding-inline: 24px;
   padding-inline: var(--size-24);
 }
 .np-select-input-options-status-icon {
   padding-block: 0;
+  padding-inline: 4px;
   padding-inline: var(--size-4);
+  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 .np-select-input-query-container {
   display: flex;
   flex-direction: column;
+  padding: 8px;
   padding: var(--size-8);
 }
 .np-select-input-listbox-container {
   position: relative;
   block-size: var(--initial-height);
+  scroll-padding-top: 8px;
   scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
@@ -46,10 +55,13 @@
   block-size: 100vh;
 }
 .np-select-input-listbox-container--has-group {
+  scroll-padding-top: 32px;
   scroll-padding-top: var(--size-32);
 }
 .np-select-input-listbox {
+  border-radius: 10px;
   border-radius: var(--radius-small);
+  padding: 8px;
   padding: var(--size-8);
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
@@ -67,6 +79,8 @@
   block-size: 100%;
 }
 .np-select-input-footer {
+  padding-block: 4px 16px;
   padding-block: var(--size-4) var(--size-16);
+  padding-inline: 24px;
   padding-inline: var(--size-24);
 }

package/src/Inputs/SelectInput/Popover/SelectInputPopover.css

@@ -5,7 +5,9 @@
   inline-size: var(--width);
   flex-direction: column;
   overflow: hidden;
+  border-radius: 10px;
   border-radius: var(--radius-small);
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
@@ -20,7 +22,9 @@
 }
 .np-popover-v2 {
   display: grid;
+  grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
+  row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
   grid-template-rows: minmax(0, 1fr);
@@ -29,11 +33,14 @@
   grid-template-rows: auto minmax(0, 1fr);
 }
 .np-popover-v2--padding-md {
+  padding: 16px;
   padding: var(--size-16);
 }
 .np-popover-v2-title {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-popover-v2-content {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx

@@ -124,13 +124,9 @@ export function SelectInputPopover({
                     })}
                   >
                     {title ? (
-                      <h2 className="np-popover-v2-title np-text-title-body wds-text-title-body">
-                        {title}
-                      </h2>
+                      <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
                     ) : null}
-                    <div className="np-popover-v2-content np-text-body-default wds-text-body-default">
-                      {children}
-                    </div>
+                    <div className="np-popover-v2-content np-text-body-default">{children}</div>
                   </div>
                 </div>
               </FloatingFocusManager>

package/src/Inputs/SelectInput/SelectInput.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,19 +82,23 @@
   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);
 }
 .np-button-input {
   display: inline-grid;
   grid-auto-columns: minmax(0, 1fr);
   align-content: center;
+  border-radius: 10px;
   border-radius: var(--size-10);
   text-align: start;
 }
@@ -97,7 +109,9 @@
 .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;
 }
 .np-popover-v2-container {
@@ -107,7 +121,9 @@
   inline-size: var(--width);
   flex-direction: column;
   overflow: hidden;
+  border-radius: 10px;
   border-radius: var(--radius-small);
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
@@ -122,7 +138,9 @@
 }
 .np-popover-v2 {
   display: grid;
+  grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
+  row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
   grid-template-rows: minmax(0, 1fr);
@@ -131,12 +149,15 @@
   grid-template-rows: auto minmax(0, 1fr);
 }
 .np-popover-v2--padding-md {
+  padding: 16px;
   padding: var(--size-16);
 }
 .np-popover-v2-title {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-popover-v2-content {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-select-input-option-container {
@@ -146,10 +167,15 @@
      -moz-user-select: none;
           user-select: none;
   align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
+  border-radius: 10px;
   border-radius: var(--radius-small);
+  padding-block: 12px;
   padding-block: var(--size-12);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
   color: var(--color-interactive-primary);
 }
@@ -157,6 +183,7 @@
   outline: none;
 }
 .np-select-input-option-container--active {
+  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .np-select-input-option-container--disabled {
@@ -171,8 +198,11 @@
 .np-select-input-option-content-container {
   display: flex;
   align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-select-input-option-content-icon {
@@ -188,6 +218,7 @@
   overflow: hidden;
 }
 .np-select-input-option-content-text-secondary {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-select-input-option-content-text-within-trigger {
@@ -196,19 +227,24 @@
   white-space: nowrap;
 }
 .np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
+  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
+  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
 }
 .np-select-input-group-item--without-needle:first-child {
+  margin-block-start: calc(-1 * 8px);
   margin-block-start: calc(-1 * var(--size-8));
 }
 .np-select-input-group-item-header {
   position: sticky;
   inset-block-start: 0px;
   z-index: 10;
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }
 .np-select-input-separator-item {
+  margin: 8px;
   margin: var(--size-8);
   border-block-start-width: 1px;
 }
@@ -228,25 +264,34 @@
 .np-select-input-options-status {
   display: flex;
   align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
+  padding-block: 8px 0px;
   padding-block: var(--size-8) 0px;
+  padding-inline: 24px;
   padding-inline: var(--size-24);
 }
 .np-select-input-options-status-icon {
   padding-block: 0;
+  padding-inline: 4px;
   padding-inline: var(--size-4);
+  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 .np-select-input-query-container {
   display: flex;
   flex-direction: column;
+  padding: 8px;
   padding: var(--size-8);
 }
 .np-select-input-listbox-container {
   position: relative;
   block-size: var(--initial-height);
+  scroll-padding-top: 8px;
   scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
@@ -260,10 +305,13 @@
   block-size: 100vh;
 }
 .np-select-input-listbox-container--has-group {
+  scroll-padding-top: 32px;
   scroll-padding-top: var(--size-32);
 }
 .np-select-input-listbox {
+  border-radius: 10px;
   border-radius: var(--radius-small);
+  padding: 8px;
   padding: var(--size-8);
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
@@ -281,23 +329,29 @@
   block-size: 100%;
 }
 .np-select-input-footer {
+  padding-block: 4px 16px;
   padding-block: var(--size-4) var(--size-16);
+  padding-inline: 24px;
   padding-inline: var(--size-24);
 }
 .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;
@@ -306,9 +360,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 {
@@ -319,7 +375,9 @@
   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);
 }
 .np-select-input-content {
@@ -328,5 +386,6 @@
   white-space: nowrap;
 }
 .np-select-input-placeholder {
+  color: #768e9c;
   color: var(--color-content-tertiary);
 }

package/src/Inputs/SelectInput/_stories/SelectInput.rtl.test.story.tsx

@@ -88,7 +88,6 @@ export const TriggerVariants: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: 'auto' },
     i18n: {
       ...currencyNames,
       selectCurrency: { en: 'Select currency', ar: 'اختر العملة' },

package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx

@@ -1276,7 +1276,7 @@ export const WithBuiltInSearchResultSorting: Story<CountryWithCurrency> = {
   decorators: [
     (Story) => (
       <div>
-        <p className="m-b-3 wds-text-body-default" style={{ maxWidth: '600px' }}>
+        <p className="m-b-3 np-text-body-default" style={{ maxWidth: '600px' }}>
           This example uses the built-in <code>SelectInput.sortByRelevance</code> helper to sort
           filtered results by relevance (You can implement your own). This one prioritises: exact
           matches → starts with → contains → alphabetical.