@transferwise/components 0.0.0-experimental-7be6e59 → 0.0.0-experimental-5f9d7b4

package/src/inputs/SelectInput/components.ts

@@ -0,0 +1,10 @@
+// Re-export all components from their new locations
+export * from './ClearButton';
+export * from './Option';
+export * from './OptionContent';
+export * from './TriggerButton';
+export * from './ItemView';
+export * from './Options';
+export * from './BottomSheet';
+export * from './Popover';
+export * from './ButtonInput';

package/src/inputs/SelectInput/index.ts

@@ -0,0 +1,12 @@
+// Export from the new structure
+export * from './SelectInput';
+export * from './SelectInput.types';
+
+// Export components directly
+export * from './ClearButton';
+export * from './Option';
+export * from './OptionContent';
+export * from './TriggerButton';
+export * from './DefaultRenderTrigger';
+export * from './ItemView';
+export * from './Options';

package/src/main.css

@@ -226,12 +226,12 @@
 .np-theme-platform.wds-sentiment-surface-success-elevated,
 .np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
 .np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
-  --color-sentiment-content-primary: #CEF1B8;
-  --color-sentiment-content-primary-hover: #E0FFCC;
-  --color-sentiment-content-primary-active: #E1F4D4;
-  --color-sentiment-interactive-primary: #CEF1B8;
-  --color-sentiment-interactive-primary-hover: #E0FFCC;
-  --color-sentiment-interactive-primary-active: #E1F4D4;
+  --color-sentiment-content-primary: #E2F6D5;
+  --color-sentiment-content-primary-hover: #D3F2C0;
+  --color-sentiment-content-primary-active: #C5EDAB;
+  --color-sentiment-interactive-primary: #E2F6D5;
+  --color-sentiment-interactive-primary-hover: #D3F2C0;
+  --color-sentiment-interactive-primary-active: #C5EDAB;
   --color-sentiment-interactive-secondary: #054D28;
   --color-sentiment-interactive-secondary-hover: #043A1E;
   --color-sentiment-interactive-secondary-active: #022614;
@@ -250,24 +250,24 @@
 .np-theme-personal--forest-green.wds-sentiment-surface-success-base,
 .np-theme-business--forest-green.wds-sentiment-surface-success-base,
 .np-theme-platform--forest-green.wds-sentiment-surface-success-base {
-  --color-sentiment-content-primary: #CEF1B8;
-  --color-sentiment-content-primary-hover: #E0FFCC;
-  --color-sentiment-content-primary-active: #E1F4D4;
-  --color-sentiment-interactive-primary: #CEF1B8;
-  --color-sentiment-interactive-primary-hover: #E0FFCC;
-  --color-sentiment-interactive-primary-active: #E1F4D4;
-  --color-sentiment-interactive-secondary: #054D28;
-  --color-sentiment-interactive-secondary-hover: #043A1E;
-  --color-sentiment-interactive-secondary-active: #022614;
-  --color-sentiment-interactive-secondary-neutral: #256A43;
-  --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
-  --color-sentiment-interactive-secondary-neutral-active: #329057;
-  --color-sentiment-interactive-control: #054D28;
-  --color-sentiment-interactive-control-hover: #043A1E;
-  --color-sentiment-interactive-control-active: #022614;
-  --color-sentiment-background-surface: #054D28;
-  --color-sentiment-background-surface-hover: #043A1E;
-  --color-sentiment-background-surface-active: #022614;
+  --color-sentiment-content-primary: #BAE5A0;
+  --color-sentiment-content-primary-hover: #C8EAB3;
+  --color-sentiment-content-primary-active: #D6F0C7;
+  --color-sentiment-interactive-primary: #BAE5A0;
+  --color-sentiment-interactive-primary-hover: #C8EAB3;
+  --color-sentiment-interactive-primary-active: #D6F0C7;
+  --color-sentiment-interactive-secondary: #252C20;
+  --color-sentiment-interactive-secondary-hover: #323B2B;
+  --color-sentiment-interactive-secondary-active: #3E4A36;
+  --color-sentiment-interactive-secondary-neutral: #37422F;
+  --color-sentiment-interactive-secondary-neutral-hover: #46533B;
+  --color-sentiment-interactive-secondary-neutral-active: #546548;
+  --color-sentiment-interactive-control: #252C20;
+  --color-sentiment-interactive-control-hover: #323B2B;
+  --color-sentiment-interactive-control-active: #3E4A36;
+  --color-sentiment-background-surface: #252C20;
+  --color-sentiment-background-surface-hover: #323B2B;
+  --color-sentiment-background-surface-active: #3E4A36;
 }
 .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
 .np-theme-business--dark.wds-sentiment-surface-success-elevated,
@@ -448,18 +448,18 @@
   --color-sentiment-interactive-primary: #E0F7F7;
   --color-sentiment-interactive-primary-hover: #CAF1F1;
   --color-sentiment-interactive-primary-active: #B6ECEC;
-  --color-sentiment-interactive-secondary: #054D4D;
-  --color-sentiment-interactive-secondary-hover: #043A3A;
-  --color-sentiment-interactive-secondary-active: #022626;
-  --color-sentiment-interactive-secondary-neutral: #1F6161;
-  --color-sentiment-interactive-secondary-neutral-hover: #247070;
-  --color-sentiment-interactive-secondary-neutral-active: #298080;
-  --color-sentiment-interactive-control: #054D4D;
-  --color-sentiment-interactive-control-hover: #043A3A;
-  --color-sentiment-interactive-control-active: #022626;
-  --color-sentiment-background-surface: #054D4D;
-  --color-sentiment-background-surface-hover: #043A3A;
-  --color-sentiment-background-surface-active: #022626;
+  --color-sentiment-interactive-secondary: #0B312F;
+  --color-sentiment-interactive-secondary-hover: #124F4C;
+  --color-sentiment-interactive-secondary-active: #176460;
+  --color-sentiment-interactive-secondary-neutral: #174E4D;
+  --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
+  --color-sentiment-interactive-secondary-neutral-active: #237675;
+  --color-sentiment-interactive-control: #0B312F;
+  --color-sentiment-interactive-control-hover: #124F4C;
+  --color-sentiment-interactive-control-active: #176460;
+  --color-sentiment-background-surface: #0B312F;
+  --color-sentiment-background-surface-hover: #124F4C;
+  --color-sentiment-background-surface-active: #176460;
 }
 .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
 .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
@@ -4002,14 +4002,91 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-.np-select-input-content {
+.np-select-input-option-container {
+  display: flex;
+  cursor: default;
+  -webkit-user-select: none;
+     -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: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
+}
+.np-select-input-option-container:focus {
+  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 {
+  opacity: 0.45;
+}
+.np-select-input-option-check--not-selected {
+  visibility: hidden;
+}
+.np-select-input-option {
+  flex: 1;
+}
+.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 {
+  display: flex;
+}
+.np-select-input-option-content-icon--not-within-trigger {
+  align-self: flex-start;
+}
+.np-select-input-option-content-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.np-select-input-option-content-text-secondary {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-select-input-option-content-text-within-trigger {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.np-select-input-placeholder {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
+.np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
+}
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 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-top-width: 1px;
 }
 .np-select-input-options-container {
   display: flex;
@@ -4088,92 +4165,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   contain: strict;
   height: 100%;
 }
-.np-select-input-separator-item {
-  margin: 8px;
-  margin: var(--size-8);
-  border-top-width: 1px;
-}
-.np-select-input-group-item--without-needle:first-child {
-  margin-top: calc(-1 * 8px);
-  margin-top: calc(-1 * var(--size-8));
-}
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: #ffffff;
-  background-color: var(--color-background-elevated);
-}
-.np-select-input-option-container {
-  display: flex;
-  cursor: default;
-  -webkit-user-select: none;
-     -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: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-interactive-primary);
-}
-.np-select-input-option-container:focus {
-  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 {
-  opacity: 0.45;
-}
-.np-select-input-option-check--not-selected {
-  visibility: hidden;
-}
-.np-select-input-option {
-  flex: 1;
-}
-.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 {
-  display: flex;
-}
-.np-select-input-option-content-icon--not-within-trigger {
-  align-self: flex-start;
-}
-.np-select-input-option-content-text {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-}
-.np-select-input-option-content-text-secondary {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.np-select-input-option-content-text-within-trigger {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
 .np-select-input-footer {
   padding: 4px 24px 16px;
   padding: var(--size-4) var(--size-24) var(--size-16);
@@ -4224,6 +4215,15 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-inline-start: 1px solid rgba(0,0,0,0.10196);
   border-inline-start: 1px solid var(--color-border-neutral);
 }
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.np-select-input-placeholder {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .np-text-area {
   min-height: 72px;
   min-height: var(--size-72);

package/src/main.less

@@ -44,7 +44,7 @@
 @import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
-@import "./inputs/SelectInput.less";
+@import "./inputs/SelectInput/SelectInput.less";
 @import "./inputs/TextArea.less";
 @import "./instructionsList/InstructionsList.less";
 @import "./link/Link.less";

package/src/sentimentSurface/SentimentSurface.css

@@ -226,12 +226,12 @@
 .np-theme-platform.wds-sentiment-surface-success-elevated,
 .np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
 .np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
-  --color-sentiment-content-primary: #CEF1B8;
-  --color-sentiment-content-primary-hover: #E0FFCC;
-  --color-sentiment-content-primary-active: #E1F4D4;
-  --color-sentiment-interactive-primary: #CEF1B8;
-  --color-sentiment-interactive-primary-hover: #E0FFCC;
-  --color-sentiment-interactive-primary-active: #E1F4D4;
+  --color-sentiment-content-primary: #E2F6D5;
+  --color-sentiment-content-primary-hover: #D3F2C0;
+  --color-sentiment-content-primary-active: #C5EDAB;
+  --color-sentiment-interactive-primary: #E2F6D5;
+  --color-sentiment-interactive-primary-hover: #D3F2C0;
+  --color-sentiment-interactive-primary-active: #C5EDAB;
   --color-sentiment-interactive-secondary: #054D28;
   --color-sentiment-interactive-secondary-hover: #043A1E;
   --color-sentiment-interactive-secondary-active: #022614;
@@ -250,24 +250,24 @@
 .np-theme-personal--forest-green.wds-sentiment-surface-success-base,
 .np-theme-business--forest-green.wds-sentiment-surface-success-base,
 .np-theme-platform--forest-green.wds-sentiment-surface-success-base {
-  --color-sentiment-content-primary: #CEF1B8;
-  --color-sentiment-content-primary-hover: #E0FFCC;
-  --color-sentiment-content-primary-active: #E1F4D4;
-  --color-sentiment-interactive-primary: #CEF1B8;
-  --color-sentiment-interactive-primary-hover: #E0FFCC;
-  --color-sentiment-interactive-primary-active: #E1F4D4;
-  --color-sentiment-interactive-secondary: #054D28;
-  --color-sentiment-interactive-secondary-hover: #043A1E;
-  --color-sentiment-interactive-secondary-active: #022614;
-  --color-sentiment-interactive-secondary-neutral: #256A43;
-  --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
-  --color-sentiment-interactive-secondary-neutral-active: #329057;
-  --color-sentiment-interactive-control: #054D28;
-  --color-sentiment-interactive-control-hover: #043A1E;
-  --color-sentiment-interactive-control-active: #022614;
-  --color-sentiment-background-surface: #054D28;
-  --color-sentiment-background-surface-hover: #043A1E;
-  --color-sentiment-background-surface-active: #022614;
+  --color-sentiment-content-primary: #BAE5A0;
+  --color-sentiment-content-primary-hover: #C8EAB3;
+  --color-sentiment-content-primary-active: #D6F0C7;
+  --color-sentiment-interactive-primary: #BAE5A0;
+  --color-sentiment-interactive-primary-hover: #C8EAB3;
+  --color-sentiment-interactive-primary-active: #D6F0C7;
+  --color-sentiment-interactive-secondary: #252C20;
+  --color-sentiment-interactive-secondary-hover: #323B2B;
+  --color-sentiment-interactive-secondary-active: #3E4A36;
+  --color-sentiment-interactive-secondary-neutral: #37422F;
+  --color-sentiment-interactive-secondary-neutral-hover: #46533B;
+  --color-sentiment-interactive-secondary-neutral-active: #546548;
+  --color-sentiment-interactive-control: #252C20;
+  --color-sentiment-interactive-control-hover: #323B2B;
+  --color-sentiment-interactive-control-active: #3E4A36;
+  --color-sentiment-background-surface: #252C20;
+  --color-sentiment-background-surface-hover: #323B2B;
+  --color-sentiment-background-surface-active: #3E4A36;
 }
 .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
 .np-theme-business--dark.wds-sentiment-surface-success-elevated,
@@ -448,18 +448,18 @@
   --color-sentiment-interactive-primary: #E0F7F7;
   --color-sentiment-interactive-primary-hover: #CAF1F1;
   --color-sentiment-interactive-primary-active: #B6ECEC;
-  --color-sentiment-interactive-secondary: #054D4D;
-  --color-sentiment-interactive-secondary-hover: #043A3A;
-  --color-sentiment-interactive-secondary-active: #022626;
-  --color-sentiment-interactive-secondary-neutral: #1F6161;
-  --color-sentiment-interactive-secondary-neutral-hover: #247070;
-  --color-sentiment-interactive-secondary-neutral-active: #298080;
-  --color-sentiment-interactive-control: #054D4D;
-  --color-sentiment-interactive-control-hover: #043A3A;
-  --color-sentiment-interactive-control-active: #022626;
-  --color-sentiment-background-surface: #054D4D;
-  --color-sentiment-background-surface-hover: #043A3A;
-  --color-sentiment-background-surface-active: #022626;
+  --color-sentiment-interactive-secondary: #0B312F;
+  --color-sentiment-interactive-secondary-hover: #124F4C;
+  --color-sentiment-interactive-secondary-active: #176460;
+  --color-sentiment-interactive-secondary-neutral: #174E4D;
+  --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
+  --color-sentiment-interactive-secondary-neutral-active: #237675;
+  --color-sentiment-interactive-control: #0B312F;
+  --color-sentiment-interactive-control-hover: #124F4C;
+  --color-sentiment-interactive-control-active: #176460;
+  --color-sentiment-background-surface: #0B312F;
+  --color-sentiment-background-surface-hover: #124F4C;
+  --color-sentiment-background-surface-active: #176460;
 }
 .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
 .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,

package/src/sentimentSurface/SentimentSurface.less

@@ -133,8 +133,8 @@
       }
       &-elevated {
         .sentiment-surface-tokens(
-                    #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
-                    #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
+                    #E2F6D5, #D3F2C0, #C5EDAB,  // content-primary
+                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-primary
                     #054D28, #043A1E, #022614,  // interactive-secondary
                     #256A43, #2A794C, #329057,  // interactive-secondary-neutral
                     #054D28, #043A1E, #022614,  // interactive-control
@@ -150,12 +150,12 @@
     .np-theme-platform--forest-green& {
       &-base {
         .sentiment-surface-tokens(
-                   #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
-                   #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
-                   #054D28, #043A1E, #022614,  // interactive-secondary
-                   #256A43, #2A794C, #329057,  // interactive-secondary-neutral
-                   #054D28, #043A1E, #022614,  // interactive-control
-                   #054D28, #043A1E, #022614   // background-surface
+                    #BAE5A0, #C8EAB3, #D6F0C7,  // content-primary
+                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-primary
+                    #252C20, #323B2B, #3E4A36,  // interactive-secondary
+                    #37422F, #46533B, #546548,  // interactive-secondary-neutral
+                    #252C20, #323B2B, #3E4A36,  // interactive-control
+                    #252C20, #323B2B, #3E4A36   // background-surface
                 );
       }
       &-elevated {
@@ -262,10 +262,10 @@
         .sentiment-surface-tokens(
                     #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
                     #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
-                    #054D4D, #043A3A, #022626,  // interactive-secondary
-                    #1F6161, #247070, #298080,  // interactive-secondary-neutral
-                    #054D4D, #043A3A, #022626,  // interactive-control
-                    #054D4D, #043A3A, #022626   // background-surface
+                    #0B312F, #124F4C, #176460,  // interactive-secondary
+                    #174E4D, #1D6261, #237675,  // interactive-secondary-neutral
+                    #0B312F, #124F4C, #176460,  // interactive-control
+                    #0B312F, #124F4C, #176460   // background-surface
                 );
       }
       &-elevated {