@transferwise/components 0.0.0-experimental-8032b6c → 0.0.0-experimental-31e4d9a

package/src/button/LegacyButton.css

@@ -3,17 +3,20 @@
 }
 .np-btn.np-btn-block > span.btn-loader {
   position: absolute;
-  inset-inline-start: var(--size-24);
+  left: 24px;
+  left: var(--size-24);
 }
 [dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
-  inset-inline-end: var(--size-24);
-  inset-inline-start: initial;
+  right: 24px;
+  right: var(--size-24);
+  left: auto;
+  left: initial;
 }
 .np-btn.np-btn-xs > span.btn-loader {
   background-size: 16px 16px;
 }
 .np-btn.np-btn-xs.btn-block > span.btn-loader {
-  inset-block-start: 0;
+  top: 0;
 }
 .np-btn.disabled[class] {
   pointer-events: auto;

package/src/card/Card.css

@@ -8,7 +8,9 @@
   border: 0;
 }
 .np-card--expanded {
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
+  box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
   box-shadow: 0 1px 10px var(--color-border-neutral);
 }
 .np-theme-personal .np-card--expanded {
@@ -22,25 +24,25 @@
 .np-card--inactive .decision {
   cursor: default;
 }
-@media (--screen-xs) {
+@media (min-width: 480px) {
   .np-card--has-icon .np-card__content {
-    padding-block: var(--size-24);
-    padding-inline: var(--size-72);
+    padding: 24px 72px;
+    padding: var(--size-24) var(--size-72);
   }
 }
-@media (--screen-xs) {
+@media (min-width: 480px) {
   .np-card--has-icon .np-card__divider--expanded {
-    margin-block: 0;
-    margin-inline: var(--size-72);
+    margin: 0 72px;
+    margin: 0 var(--size-72);
   }
 }
 .np-card__button {
   background-color: transparent;
-  text-align: start;
-  inline-size: 100%;
+  text-align: left;
+  width: 100%;
 }
 [dir="rtl"] .np-card__button {
-  text-align: end;
+  text-align: right;
 }
 .np-theme-personal .np-card__button:focus {
   outline: none;
@@ -50,24 +52,27 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-card__content {
-  padding-block: var(--size-24);
-  padding-inline: var(--size-16);
+  padding: 24px 16px;
+  padding: var(--size-24) var(--size-16);
 }
 .np-theme-personal .np-card__content {
-  padding-block: var(--size-16) var(--size-24);
-  padding-inline: var(--size-16);
+  padding: 16px 16px 24px;
+  padding: var(--size-16) var(--size-16) var(--size-24);
 }
 .np-card__divider {
   transition: margin 0.35s ease;
 }
 .np-card__divider--expanded {
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
-  block-size: 1px;
-  margin-block: 0;
-  margin-inline: var(--size-16);
+  height: 1px;
+  margin: 0 16px;
+  margin: 0 var(--size-16);
 }
 .np-theme-personal .np-card {
+  overflow: visible;
   overflow: initial;
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
@@ -77,6 +82,7 @@
   margin: 0;
 }
 .np-theme-personal .np-card__button {
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   --ring-outline-width: 3px;
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
@@ -89,8 +95,6 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-theme-personal .np-card--expanded .np-card__button {
-  border-start-start-radius: var(--radius-medium);
-  border-start-end-radius: var(--radius-medium);
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
+  border-radius: 16px 16px 0 0;
+  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
 }

package/src/card/Card.story.tsx

@@ -8,13 +8,14 @@ import Card from '.';
 type Story = StoryObj<typeof Card>;
 
 /**
- * @deprecated use Navigation pattern (via `NavigationOption` component)
+ * ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs).
  *
  * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
  */
 const meta: Meta<typeof Card> = {
   component: Card,
-  title: 'Layouts/Card (Deprecated)',
+  title: 'Layouts/Card',
+  tags: ['deprecated'],
   args: {
     title: 'A card',
     details: 'Some details about this card',

package/src/card/Card.tsx

@@ -21,7 +21,7 @@ export interface CardProps {
 }
 
 /**
- * @deprecated use Navigation pattern (via `NavigationOption` component)
+ * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.
  * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
  */
 const Card = forwardRef(function Card(

package/src/carousel/Carousel.css

@@ -8,11 +8,14 @@
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
+  gap: 16px;
   gap: var(--size-16);
+  padding: 8px;
   padding: var(--size-8);
 }
-@media (--screen-sm-max) {
+@media (max-width: 767px) {
   .carousel {
+    gap: 8px;
     gap: var(--size-8);
   }
 }
@@ -20,13 +23,16 @@
   display: flex;
   align-items: center;
   overflow: hidden;
-  min-block-size: var(--size-32);
-  padding-block-end: var(--size-16);
+  min-height: 32px;
+  min-height: var(--size-32);
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
 }
 .carousel__card,
 .carousel__card:hover,
 .carousel__card:focus,
 .carousel__card:focus-within {
+  -webkit-text-decoration: none;
   text-decoration: none;
   transition: none !important;
   box-shadow: none !important;
@@ -34,43 +40,45 @@
 .carousel__card {
   display: block;
   position: relative;
-  text-align: start;
+  text-align: left;
   border: none;
   overflow: hidden;
+  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
+  border-radius: 32px;
   border-radius: var(--size-32);
   scroll-snap-align: center;
   -webkit-scroll-snap-align: center;
   transition: all 0.4s !important;
 }
-@media (--screen-xl) {
+@media (min-width: 1200px) {
   .carousel__card {
-    min-inline-size: 280px;
-    inline-size: 280px;
-    block-size: 280px;
+    min-width: 280px;
+    width: 280px;
+    height: 280px;
   }
 }
-@media (--screen-md) {
+@media (min-width: 768px) {
   .carousel-wrapper {
     overflow: visible;
   }
   .carousel {
-    margin-block: 0;
-    margin-inline: calc(-1 * var(--size-8));
+    margin: 0 calc(-1 * 8px);
+    margin: 0 calc(-1 * var(--size-8));
   }
 }
-@media (--screen-lg-max) {
+@media (max-width: 1199px) {
   .carousel__card {
-    min-inline-size: 242px;
-    inline-size: 242px;
-    block-size: 242px;
+    min-width: 242px;
+    width: 242px;
+    height: 242px;
   }
 }
-@media (--screen-sm-max) {
+@media (max-width: 767px) {
   .carousel__card {
-    min-inline-size: 336px;
-    inline-size: 336px;
-    block-size: 336px;
+    min-width: 336px;
+    width: 336px;
+    height: 336px;
     scroll-snap-stop: always;
   }
 }
@@ -86,30 +94,41 @@
   background-color: var(--color-background-neutral-hover);
 }
 .carousel__card-content {
-  block-size: 100%;
+  height: 100%;
   font-weight: normal;
+  padding: 24px;
   padding: var(--size-24);
 }
 .carousel__indicators {
   display: flex;
   justify-content: center;
-  padding-block-start: var(--size-8);
+  padding-top: 8px;
+  padding-top: var(--size-8);
+  gap: 8px;
   gap: var(--size-8);
 }
 .carousel__indicator {
-  inline-size: var(--size-12);
-  block-size: var(--size-12);
+  width: 12px;
+  width: var(--size-12);
+  height: 12px;
+  height: var(--size-12);
+  border-radius: 8px;
   border-radius: var(--size-8);
+  background: #c9cbce;
   background: var(--color-interactive-secondary);
   border: none;
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   transition: all 0.1s;
 }
 .carousel__indicator:hover {
-  inline-size: var(--size-16);
+  width: 16px;
+  width: var(--size-16);
 }
 .carousel__indicator--selected,
 .carousel__indicator--selected:hover {
   background: var(--color-interactive-primary);
-  inline-size: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
 }

package/src/checkboxButton/CheckboxButton.css

@@ -1,7 +1,9 @@
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
-  inline-size: var(--size-24);
-  block-size: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  height: 24px;
+  height: var(--size-24);
   opacity: 0;
 }
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
@@ -12,13 +14,14 @@
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  top: 0;
+  left: 0;
   margin: 0;
 }
 [dir="rtl"] .checkbox .np-checkbox-button input[type="checkbox"] {
-  inset-inline-end: 0;
-  inset-inline-start: initial;
+  right: 0;
+  left: auto;
+  left: initial;
 }
 .np-tw-checkbox-indeterminate {
   position: relative;
@@ -26,13 +29,15 @@
 .np-tw-checkbox-indeterminate::after {
   content: "";
   position: absolute;
-  inline-size: 12px;
-  block-size: 2px;
-  inset-block-start: 55%;
-  inset-inline-start: 50%;
+  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/chips/Chip.css

@@ -1,56 +1,70 @@
 .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: var(--size-32);
-  margin-inline-end: var(--size-8);
-  padding-block: 0;
-  padding-inline: var(--size-12);
+  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 (--screen-400-zoom) {
+@media (max-width: 320px) {
   .np-chip {
-    block-size: var(--size-40);
+    height: 40px;
+    height: var(--size-40);
   }
 }
 .np-chip:hover {
   cursor: pointer;
 }
 .np-chip .np-chip-label {
-  padding-block-start: 2px;
+  padding-top: 2px;
 }
 .np-chip .np-close-button {
   pointer-events: auto;
 }
 .np-chip:last-child {
-  margin-inline-end: 0;
+  margin-right: 0;
 }
 [dir="rtl"] .np-chip:last-child {
-  margin-inline-start: 0;
-  margin-inline-end: initial;
+  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;
 }
@@ -61,79 +75,87 @@
   background: var(--color-sentiment-negative);
 }
 .np-theme-personal .np-chip.has-error,
-.np-theme-personal .np-chip.has-error:not(.disabled, :disabled):hover,
-.np-theme-personal .np-chip.has-error:not(.disabled, :disabled):active {
+.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, :disabled):hover {
+.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, :disabled):active {
+.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-block: 0;
-  padding-inline: var(--size-16);
+  padding: 0 16px;
+  padding: 0 var(--size-16);
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
-.np-theme-personal .np-chip:not(.disabled, :disabled):hover {
+.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, :disabled):active {
+.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(var(--size-8) * -1);
+  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, :disabled):hover,
-.np-theme-personal .np-chip .np-close-button:not(.disabled, :disabled):active {
+.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, :disabled):focus-visible,
-.np-theme-personal .np-chip:not(.disabled, :disabled):has(:focus-visible) {
+.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, :disabled):focus-visible .np-close-button,
-.np-theme-personal .np-chip:not(.disabled, :disabled):has(:focus-visible) .np-close-button {
+.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, :disabled):focus-visible .np-close-button:hover,
-.np-theme-personal .np-chip:not(.disabled, :disabled):has(:focus-visible) .np-close-button:hover {
+.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-inline-end: var(--size-24);
+  padding-right: 24px;
+  padding-right: var(--size-24);
 }
-@media (--screen-400-zoom) {
+@media (max-width: 320px) {
   .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
-    padding-inline-end: var(--size-48);
+    padding-right: 48px;
+    padding-right: var(--size-48);
   }
 }
 .np-theme-personal .np-chip.np-chip--removable .np-close-button {
   justify-content: flex-end;
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  top: 0;
+  left: 0;
   position: absolute;
-  padding-inline-end: var(--size-8);
-  block-size: 100%;
-  inline-size: 100%;
+  padding-right: 8px;
+  padding-right: var(--size-8);
+  height: 100%;
+  width: 100%;
 }
 .np-theme-personal .np-chip:has(.disabled, :disabled):focus-visible {
   outline: none;
@@ -144,14 +166,14 @@
   background-color: var(--color-interactive-primary);
   border-color: var(--color-interactive-primary);
 }
-.np-theme-personal .np-chip--selected:not(.disabled, :disabled):hover,
-.np-theme-personal .np-chip--valid:not(.disabled, :disabled):hover {
+.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, :disabled):active,
-.np-theme-personal .np-chip--valid:not(.disabled, :disabled):active {
+.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);

package/src/circularButton/CircularButton.css

@@ -9,24 +9,24 @@
   text-align: center;
   color: var(--color-interactive-primary);
 }
-.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled, :disabled):hover,
-.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled, :disabled):hover {
+.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, :disabled):active,
-.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled, :disabled):active {
+.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, :disabled):hover,
-.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled, :disabled):hover {
+.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, :disabled):active,
-.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled, :disabled):active {
+.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 {