@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-9f6647e

package/src/checkboxButton/CheckboxButton.css

@@ -0,0 +1,43 @@
+.np-checkbox-button input[type="checkbox"] {
+  position: absolute;
+  width: 24px;
+  width: var(--size-24);
+  height: 24px;
+  height: var(--size-24);
+  opacity: 0;
+}
+.np-checkbox-button input[type="checkbox"]:not(:disabled) {
+  cursor: pointer;
+}
+.np-checkbox-button .tw-checkbox-check,
+.np-checkbox-button .np-tw-checkbox-indeterminate {
+  pointer-events: none;
+}
+.checkbox .np-checkbox-button input[type="checkbox"] {
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+[dir="rtl"] .checkbox .np-checkbox-button input[type="checkbox"] {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+.np-tw-checkbox-indeterminate {
+  position: relative;
+}
+.np-tw-checkbox-indeterminate::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  top: 55%;
+  left: 50%;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  transform: translate(-50%, -50%);
+}
+.np-tw-checkbox-indeterminate .has-error::after {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}

package/src/checkboxButton/CheckboxButton.less

@@ -1,5 +1,5 @@
-@import (reference) "./../neptune-css/variables/neptune-tokens.less";
-@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 
 .np-checkbox-button {
   input[type="checkbox"] {

package/src/chips/Chip.css

@@ -0,0 +1,190 @@
+.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);
+  height: 32px;
+  height: var(--size-32);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  padding: 0 12px;
+  padding: 0 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 {
+    height: 40px;
+    height: var(--size-40);
+  }
+}
+.np-chip:hover {
+  cursor: pointer;
+}
+.np-chip .np-chip-label {
+  padding-top: 2px;
+}
+.np-chip .np-close-button {
+  pointer-events: auto;
+}
+.np-chip:last-child {
+  margin-right: 0;
+}
+[dir="rtl"] .np-chip:last-child {
+  margin-left: 0;
+  margin-right: 0;
+  margin-right: initial;
+}
+.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;
+}
+.np-chip.has-error .np-close-button {
+  color: white;
+}
+.np-theme-personal .np-chip.has-error {
+  background: var(--color-sentiment-negative);
+}
+.np-theme-personal .np-chip.has-error,
+.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):hover,
+.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):active {
+  color: var(--color-contrast);
+}
+.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):hover {
+  background: var(--color-sentiment-negative-hover);
+  border-color: var(--color-sentiment-negative-hover) !important;
+}
+.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):active {
+  background: var(--color-sentiment-negative-active);
+  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: 0 16px;
+  padding: 0 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-right: calc(8px * -1);
+  margin-right: calc(var(--size-8) * -1);
+  border-radius: inherit;
+}
+.np-theme-personal .np-chip .np-close-button,
+.np-theme-personal .np-chip .np-close-button:hover,
+.np-theme-personal .np-chip .np-close-button:not(.disabled):not(:disabled):hover,
+.np-theme-personal .np-chip .np-close-button:not(.disabled):not(:disabled):active {
+  color: inherit !important;
+  background-color: transparent !important;
+}
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):focus-visible,
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):focus-visible .np-close-button,
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):has(:focus-visible) .np-close-button {
+  background: transparent;
+  outline: none;
+}
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):focus-visible .np-close-button:hover,
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):has(:focus-visible) .np-close-button:hover {
+  color: inherit !important;
+}
+.np-theme-personal .np-chip.np-chip--removable {
+  position: relative;
+}
+.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
+  padding-right: 24px;
+  padding-right: var(--size-24);
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
+    padding-right: 48px;
+    padding-right: var(--size-48);
+  }
+}
+.np-theme-personal .np-chip.np-chip--removable .np-close-button {
+  justify-content: flex-end;
+  top: 0;
+  left: 0;
+  position: absolute;
+  padding-right: 8px;
+  padding-right: var(--size-8);
+  height: 100%;
+  width: 100%;
+}
+.np-theme-personal .np-chip:has(.disabled, :disabled):focus-visible {
+  outline: none;
+}
+.np-theme-personal .np-chip--selected,
+.np-theme-personal .np-chip--valid {
+  color: var(--color-interactive-contrast);
+  background-color: var(--color-interactive-primary);
+  border-color: var(--color-interactive-primary);
+}
+.np-theme-personal .np-chip--selected:not(.disabled):not(:disabled):hover,
+.np-theme-personal .np-chip--valid:not(.disabled):not(:disabled):hover {
+  color: var(--color-interactive-contrast-hover);
+  background-color: var(--color-interactive-primary-hover);
+  border-color: var(--color-interactive-primary-hover);
+}
+.np-theme-personal .np-chip--selected:not(.disabled):not(:disabled):active,
+.np-theme-personal .np-chip--valid:not(.disabled):not(:disabled):active {
+  color: var(--color-interactive-contrast-active);
+  background-color: var(--color-interactive-primary-active);
+  border-color: var(--color-interactive-primary-active);
+}
+.np-theme-personal .np-chip--selected .np-close-button,
+.np-theme-personal .np-chip--valid .np-close-button {
+  color: inherit;
+}
+.np-theme-personal .np-chip--selected .np-close-button:focus,
+.np-theme-personal .np-chip--valid .np-close-button:focus,
+.np-theme-personal .np-chip--selected .np-close-button:focus-within,
+.np-theme-personal .np-chip--valid .np-close-button:focus-within {
+  outline: none;
+}

package/src/chips/Chip.less

@@ -1,6 +1,6 @@
-@import (reference) "./../neptune-css/variables/neptune-tokens.less";
-@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
-@import (reference) "./../neptune-css/less/ring.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .np-chip {
   background-color: transparent;

package/src/circularButton/CircularButton.css

@@ -0,0 +1,34 @@
+.np-circular-btn {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+.np-circular-btn-primary-default .np-circular-btn-label,
+.np-circular-btn-secondary-default .np-circular-btn-label {
+  text-align: center;
+  color: var(--color-interactive-primary);
+}
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: var(--color-interactive-primary-hover);
+}
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: var(--color-interactive-primary-active);
+}
+.np-circular-btn-primary-negative .np-circular-btn-label,
+.np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: var(--color-sentiment-negative-primary);
+}
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.np-circular-btn-disabled {
+  cursor: not-allowed;
+}

package/src/common/Option/Option.css

@@ -0,0 +1,122 @@
+.np-option:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
+  outline-offset: var(--ring-outline-offset);
+  --ring-outline-offset: 0;
+}
+.np-option:has(:focus-visible) *:focus-visible {
+  outline: none;
+}
+.np-option .circle-sm {
+  width: 40px;
+  width: var(--size-40);
+  height: 40px;
+  height: var(--size-40);
+}
+.np-option__title {
+  color: #37517e;
+  color: var(--color-content-primary);
+  font-size: 1rem;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: 0;
+  line-height: 1.5;
+  line-height: var(--line-height-body);
+  margin: 0;
+}
+.np-option__body {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  color: #5d7079;
+  color: var(--color-content-secondary);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  line-height: 1.42857;
+}
+.np-option__sm-media.decision .media-left {
+  display: block;
+}
+.np-option__no-media-circle {
+  min-width: 48px;
+  min-width: var(--size-48);
+  max-width: 64px;
+  max-width: var(--size-64);
+  display: flex;
+  justify-content: center;
+}
+.np-option__no-media-circle > * {
+  max-height: 76px;
+}
+button.np-option {
+  background-color: transparent;
+  width: 100%;
+  text-align: left;
+}
+[dir="rtl"] button.np-option {
+  text-align: right;
+}
+.np-theme-personal .np-option .circle {
+  overflow: visible;
+}
+.np-theme-personal .np-option .circle-sm {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  line-height: 48px;
+  line-height: var(--size-48);
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-option .circle-sm {
+    width: 96px;
+    width: var(--size-96);
+    height: 96px;
+    height: var(--size-96);
+    line-height: 96px;
+    line-height: var(--size-96);
+  }
+}
+.np-theme-personal .np-option__body {
+  margin: 4px 0 0;
+  margin: var(--size-4) 0 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.np-theme-personal .np-option__container-aligned {
+  margin-right: calc(-1 * 16px);
+  margin-right: calc(-1 * var(--space-content-horizontal));
+  margin-left: calc(-1 * 16px);
+  margin-left: calc(-1 * var(--space-content-horizontal));
+  max-width: none;
+  width: auto;
+}
+@media (min-width: 576px) {
+  .np-theme-personal .np-option {
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+  }
+}
+.np-theme-personal .np-option-additional-content {
+  margin-left: 80px;
+  margin-left: var(--size-80);
+  margin-right: 16px;
+  margin-right: var(--size-16);
+  margin-top: -10px;
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+@media (max-width: 480px) {
+  .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
+    margin-left: 16px;
+    margin-left: var(--size-16);
+  }
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-option-additional-content {
+    margin-top: -3px;
+  }
+}

package/src/common/Option/Option.less

@@ -1,5 +1,5 @@
-@import (reference) "../../neptune-css/less/mixins/_logical-properties.less";
-@import (reference) "../../neptune-css/less/ring.less";
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .np-option {
   &:has(:focus-visible) {

package/src/common/RadioButton/RadioButton.css

@@ -0,0 +1,4 @@
+.radio:hover {
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+}

package/src/common/baseCard/BaseCard.css

@@ -0,0 +1,49 @@
+/* @define Card */
+.np-Card {
+  --Card-background-color: var(--color-background-neutral);
+  --Card-border-radius: var(--size-32);
+  --Card-flex-gap: var(--size-16);
+  --Card-padding: var(--size-24);
+  --Card-closeButton-position: var(--size-16);
+  --Card-max-width: initial;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--Card-background-color);
+  border-radius: 32px;
+  border-radius: var(--Card-border-radius);
+  gap: 16px;
+  gap: var(--Card-flex-gap);
+  padding: 24px;
+  padding: var(--Card-padding);
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+@media (min-width: 576px) {
+  .np-Card {
+    max-width: var(--Card-max-width);
+  }
+}
+.np-Card.is-disabled .np-Card-closeButton {
+  cursor: not-allowed;
+}
+.np-theme-personal--dark .np-Card {
+  --Card-background-color: var(--color-background-elevated);
+}
+.np-Card-closeButton {
+  position: absolute;
+  z-index: 100;
+  top: var(--Card-closeButton-position);
+  right: var(--Card-closeButton-position);
+}
+[dir="rtl"] .np-Card-closeButton {
+  left: var(--Card-closeButton-position);
+  right: auto;
+}
+.np-Card--small {
+  --Card-border-radius: var(--size-16);
+  --Card-closeButton-position: var(--size-8);
+  --Card-padding: var(--size-16);
+}

package/src/common/bottomSheet/BottomSheet.css

@@ -0,0 +1,53 @@
+.np-bottom-sheet {
+  border-radius: 10px 10px 0 0;
+}
+.np-bottom-sheet--top-bar {
+  cursor: grab;
+  padding: 8px 0 calc(16px + 4px);
+  padding: var(--size-8) 0 calc(var(--size-16) + var(--size-4));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.np-bottom-sheet--top-bar--shadow {
+  box-shadow: 0 4px 40px rgba(34, 48, 73, 0.2);
+}
+.np-theme-personal--forest-green .np-bottom-sheet--top-bar--shadow,
+.np-theme-personal--bright-green .np-bottom-sheet--top-bar--shadow,
+.np-theme-personal--dark .np-bottom-sheet--top-bar--shadow {
+  box-shadow: none;
+}
+.np-bottom-sheet--handler {
+  width: 40px;
+  height: 4px;
+  background: #c9cbce;
+  background: var(--color-interactive-secondary);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-bottom-sheet--close-btn {
+  position: absolute;
+  right: 8px;
+  right: var(--size-8);
+}
+.np-bottom-sheet--content {
+  overflow-y: auto;
+  padding: 0 16px;
+  padding: 0 var(--space-content-horizontal);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.np-theme-personal .np-bottom-sheet--top-bar--shadow {
+  box-shadow: 0 4px 40px rgba(69, 71, 69, 0.2);
+}
+.np-theme-personal .np-bottom-sheet {
+  border-radius: 32px 32px 0 0;
+  border-radius: var(--radius-xlarge, 32px) var(--radius-xlarge, 32px) 0 0;
+  margin: 0px 8px;
+  margin: 0px var(--size-8);
+  width: calc(100% - 16px) !important;
+  width: calc(100% - var(--size-16)) !important;
+}
+.np-theme-personal .np-bottom-sheet--content {
+  padding: 0 16px 16px;
+  padding: 0 var(--size-16) var(--size-16);
+}

package/src/common/bottomSheet/BottomSheet.less

@@ -1,4 +1,4 @@
-@import (reference) "../../neptune-css/less/mixins/_theming.less";
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
 
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;

package/src/common/circle/Circle.css

@@ -0,0 +1,43 @@
+.np-circle {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  flex-shrink: 0;
+  --circle-border-color: var(--color-border-neutral);
+  --circle-border-width: 1px;
+  font-size: var(--circle-font-size);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+}
+.np-circle .np-display {
+  font-size: var(--circle-font-size);
+}
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}
+.np-circle img,
+.np-circle .wds-flag {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.np-circle-border {
+  position: relative;
+}
+.np-circle-border::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
+}

package/src/common/closeButton/CloseButton.css

@@ -0,0 +1,94 @@
+.np-close-button {
+  transition: color 0.15s ease-in-out;
+  color: #00a2dd;
+  color: var(--color-interactive-accent);
+  border: none;
+  background: none;
+  padding: 0;
+  height: 16px;
+  height: var(--size-16);
+  --ring-outline-offset: 0;
+}
+.np-close-button--large,
+.np-close-button--x-large {
+  height: 24px;
+  height: var(--size-24);
+}
+.np-close-button:hover {
+  color: #008fc9;
+  color: var(--color-interactive-accent-hover);
+}
+.np-theme-personal .np-close-button {
+  color: var(--color-interactive-primary);
+  height: 32px;
+  height: var(--size-32);
+  width: 32px;
+  width: var(--size-32);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  transition: background-color 0.1s ease;
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-close-button {
+    height: 64px;
+    height: var(--size-64);
+    width: 64px;
+    width: var(--size-64);
+  }
+}
+.np-theme-personal .np-close-button--x-small {
+  height: 24px;
+  height: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  flex-shrink: 0;
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-close-button--x-small {
+    height: 48px;
+    height: var(--size-48);
+    width: 48px;
+    width: var(--size-48);
+  }
+}
+.np-theme-personal .np-close-button--large {
+  height: 40px;
+  height: var(--size-40);
+  width: 40px;
+  width: var(--size-40);
+  flex-shrink: 0;
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-close-button--large {
+    height: 80px;
+    height: var(--size-80);
+    width: 80px;
+    width: var(--size-80);
+  }
+}
+.np-theme-personal .np-close-button--x-large {
+  height: 48px;
+  height: var(--size-48);
+  width: 48px;
+  width: var(--size-48);
+  flex-shrink: 0;
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-close-button--x-large {
+    height: 96px;
+    height: var(--size-96);
+    width: 96px;
+    width: var(--size-96);
+  }
+}
+.np-theme-personal .np-close-button:not(.disabled):not(:disabled):hover {
+  color: var(--color-interactive-primary-hover);
+  background-color: var(--color-background-neutral-hover);
+}
+.np-theme-personal .np-close-button:not(.disabled):not(:disabled):active {
+  color: var(--color-interactive-primary-active);
+  background-color: var(--color-background-neutral-active);
+}

package/src/common/closeButton/CloseButton.less

@@ -1,4 +1,4 @@
-@import (reference) "../../neptune-css/less/ring.less";
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .np-close-button {
   transition: color 0.15s ease-in-out;