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

package/build/styles/progress/Progress.css

@@ -1,21 +1,29 @@
 .np-progress {
+  border-radius: 10px;
   border-radius: var(--radius-small);
-  inline-size: 100%;
-  block-size: var(--size-8);
+  width: 100%;
+  height: 8px;
+  height: var(--size-8);
 }
 .np-progress::-webkit-progress-bar {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-progress::-webkit-progress-value {
+  background-color: #0097c7;
   background-color: var(--color-content-accent);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-theme-personal .np-progress::-webkit-progress-value {
   background-color: var(--color-interactive-primary);
 }
 .np-progress::-moz-progress-bar {
+  background-color: #0097c7;
   background-color: var(--color-content-accent);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-theme-personal .np-progress::-moz-progress-bar {
@@ -23,10 +31,12 @@
 }
 @media (prefers-reduced-motion: no-preference) {
   .np-progress::-webkit-progress-value {
+    -webkit-transition: width 0.5s ease;
     transition: width 0.5s ease;
     transition-delay: 0.2s;
   }
   .np-progress::-moz-progress-bar {
+    -moz-transition: width 0.5s ease;
     transition: width 0.5s ease;
     transition-delay: 0.2s;
   }

package/build/styles/progressBar/ProgressBar.css

@@ -1,9 +1,14 @@
 .np-progress-bar__title .h4 {
+  color: #37517e;
   color: var(--color-content-primary);
-  margin-block-end: var(--size-4);
+  margin-bottom: 4px;
+  margin-bottom: var(--size-4);
 }
 .np-progress-bar p {
+  color: #37517e;
   color: var(--color-content-primary);
-  margin-block-start: var(--size-4);
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }

package/build/styles/promoCard/PromoCard.css

@@ -17,37 +17,45 @@
 .np-Card-image {
   transform: scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));
   transition: transform 0.5s ease-in-out;
-  margin-block: 0;
-  margin-inline: auto;
-  inline-size: 100%;
-  block-size: auto;
-  inline-size: calc(100% + var(--size-48));
-  inset-inline-start: calc(var(--size-24) * -1);
+  margin: 0 auto;
+  width: 100%;
+  height: auto;
+  width: calc(100% + 48px);
+  width: calc(100% + var(--size-48));
+  left: calc(24px * -1);
+  left: calc(var(--size-24) * -1);
   position: relative;
 }
 [dir="rtl"] .np-Card-image {
-  inset-inline-start: auto;
-  inset-inline-end: calc(var(--size-24) * -1);
+  left: auto;
+  right: calc(24px * -1);
+  right: calc(var(--size-24) * -1);
 }
 .np-Card-description {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-Card-indicator {
   position: absolute;
-  inset-inline-end: var(--size-8);
-  inset-block-end: var(--size-8);
+  right: 8px;
+  right: var(--size-8);
+  bottom: 8px;
+  bottom: var(--size-8);
   display: flex;
+  gap: 4px;
   gap: var(--size-4);
 }
 [dir="rtl"] .np-Card-indicator {
-  inset-inline-end: auto;
-  inset-inline-start: var(--size-8);
+  right: auto;
+  left: 8px;
+  left: var(--size-8);
 }
 .np-Card-indicatorText {
   display: inline-block;
   vertical-align: middle;
-  text-align: start;
+  text-align: left;
   background: var(--Card-indicator-text-background-color);
+  padding: 16px;
   padding: var(--size-16);
   border-radius: 100px;
 }
@@ -65,8 +73,8 @@
   transform: scale(1);
   transition: box-shadow 0.2s ease-in-out, transform 0.5s ease-in-out;
 }
-.np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--bright-green, .np-theme-personal--forest-green) .np-Card--checked,
-.np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--bright-green, .np-theme-personal--forest-green) .np-Card--link {
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--bright-green):not(.np-theme-personal--forest-green) .np-Card--checked,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--bright-green):not(.np-theme-personal--forest-green) .np-Card--link {
   --Card-box-shadow: 0px 20px var(--size-40) 0px var(--color-background-neutral);
   --Card-check-color: var(--color-interactive-accent);
 }
@@ -80,29 +88,31 @@
     transition: none;
   }
 }
-.np-Card--checked:hover:not(.is-disabled, :disabled, .is-checked, :focus-within),
-.np-Card--link:hover:not(.is-disabled, :disabled, .is-checked, :focus-within) {
+.np-Card--checked:hover:not(.is-disabled):not(:disabled):not(.is-checked):not(:focus-within),
+.np-Card--link:hover:not(.is-disabled):not(:disabled):not(.is-checked):not(:focus-within) {
   --Card-image-scale: 1.1;
   box-shadow: var(--Card-box-shadow);
 }
-.np-Card--checked:active:not(.is-disabled, :disabled, .is-checked),
-.np-Card--link:active:not(.is-disabled, :disabled, .is-checked) {
+.np-Card--checked:active:not(.is-disabled):not(:disabled):not(.is-checked),
+.np-Card--link:active:not(.is-disabled):not(:disabled):not(.is-checked) {
   --Card-background-color: var(--color-background-neutral-active);
   --Card-image-scale: 1.1;
   --Card-image-translate: var(--size-8);
   transform: scale(98%);
   box-shadow: var(--Card-box-shadow);
 }
-.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled, :disabled, .is-checked),
-.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled, :disabled, .is-checked) {
+.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled):not(:disabled):not(.is-checked),
+.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled):not(:disabled):not(.is-checked) {
   --Card-background-color: var(--color-background-neutral);
 }
 .np-Card--checked:has(:focus-visible):not(.np-Card--checked),
 .np-Card--link:has(:focus-visible):not(.np-Card--checked),
-.np-Card--checked:focus-visible:not(.is-disabled, :disabled),
-.np-Card--link:focus-visible:not(.is-disabled, :disabled) {
+.np-Card--checked:focus-visible:not(.is-disabled):not(:disabled),
+.np-Card--link:focus-visible:not(.is-disabled):not(:disabled) {
   --Card-image-scale: 1.1;
+  outline: var(--ring-outline-color) solid 4px;
   outline: var(--ring-outline-color) solid var(--size-4);
+  outline-offset: 4px;
   outline-offset: var(--size-4);
   box-shadow: var(--Card-box-shadow);
 }
@@ -111,7 +121,9 @@
   outline: none;
 }
 .np-Card--link .np-Card-titleLink {
+  color: #37517e;
   color: var(--color-content-primary);
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 .np-Card--link .np-Card-titleLink:focus-visible {
@@ -120,47 +132,55 @@
 .np-Card--link .np-Card-titleLink::after {
   content: '';
   display: block;
-  inline-size: 100%;
-  block-size: 100%;
-  inset-inline-start: 0;
-  inset-block-start: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
   position: absolute;
   z-index: 10;
 }
 .np-Card--checked.is-checked {
+  box-shadow: 0 0 0 4px var(--color-interactive-primary);
   box-shadow: 0 0 0 var(--size-4) var(--color-interactive-primary);
 }
 .np-Card--checked.is-checked .np-Card-check {
   color: var(--Card-check-color);
   background: var(--Card-check-background-color);
+  border-radius: 9999px;
   border-radius: var(--radius-full);
   display: flex;
-  block-size: var(--size-40);
+  height: 40px;
+  height: var(--size-40);
   position: absolute;
-  inset-inline-end: var(--size-8);
-  inset-block-start: var(--size-8);
-  inline-size: var(--size-40);
+  right: 8px;
+  right: var(--size-8);
+  top: 8px;
+  top: var(--size-8);
+  width: 40px;
+  width: var(--size-40);
   justify-content: center;
   align-items: center;
 }
 [dir="rtl"] .np-Card--checked.is-checked .np-Card-check {
-  inset-inline-end: auto;
-  inset-inline-start: var(--size-8);
+  right: auto;
+  left: 8px;
+  left: var(--size-8);
 }
-.np-Card--checked.is-checked:focus-visible:not(.is-disabled, :disabled) {
+.np-Card--checked.is-checked:focus-visible:not(.is-disabled):not(:disabled) {
   box-shadow: none;
 }
 .np-CardGroup {
   display: flex;
   flex-direction: column;
+  gap: 24px;
   gap: var(--size-24);
-  inline-size: 100%;
+  width: 100%;
 }
-@media (--screen-md) {
+@media (min-width: 768px) {
   .np-CardGroup {
     flex-direction: row;
   }
 }
 .np-CardGroup .np-Card.np-Card--promoCard {
-  max-inline-size: 100%;
+  max-width: 100%;
 }

package/build/styles/prompt/ActionPrompt/ActionPrompt.css

@@ -5,16 +5,21 @@
   --Prompt-border-radius: var(--radius-large);
 }
 .wds-action-prompt--media-image {
-  inline-size: var(--size-48);
-  block-size: var(--size-48);
-  object-fit: contain;
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
 }
-@media (--screen-sm-max) {
+@media (max-width: 767px) {
   .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
     flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-inline-size: fit-content;
+    min-width: -moz-fit-content;
+    min-width: fit-content;
   }
 }
 .wds-action-prompt__content {
-  max-inline-size: calc(var(--size-48) * 10);
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
 }

package/build/styles/prompt/InfoPrompt/InfoPrompt.css

@@ -7,7 +7,8 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-inline-size: calc(var(--size-48) * 10);
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
 }
 .wds-info-prompt__content:has(.wds-info-prompt__title) {
   justify-content: flex-start;
@@ -19,11 +20,13 @@
 }
 .wds-info-prompt__action {
   align-self: flex-start;
-  margin-block-start: var(--Prompt-gap);
+  margin-top: var(--Prompt-gap);
 }
 .wds-info-prompt__media svg {
-  inline-size: var(--size-24);
-  block-size: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;

package/build/styles/prompt/InlinePrompt/InlinePrompt.css

@@ -2,6 +2,7 @@
   --Prompt-gap: calc(var(--size-12) / 2);
   --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
   display: inline-flex;
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .wds-inline-prompt:has(a),
@@ -18,7 +19,8 @@
   background-color: var(--color-sentiment-background-surface-active);
 }
 .wds-inline-prompt--auto-width {
-  inline-size: unset;
+  width: auto;
+  width: initial;
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
@@ -27,6 +29,7 @@
 .wds-inline-prompt a,
 .wds-inline-prompt button {
   color: var(--color-sentiment-content-primary);
+  text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
 .wds-inline-prompt a:hover,
@@ -44,8 +47,10 @@
   inset: 0;
 }
 .wds-inline-prompt .wds-inline-prompt-process-indicator {
-  inline-size: var(--size-16);
-  block-size: var(--size-16);
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
 }
 .wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
   stroke: currentColor;

package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -1,25 +1,32 @@
 .wds-prompt {
+  border-radius: 10px;
   border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
+  gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
-  overflow-wrap: break-word;
+  word-wrap: break-word;
+  padding: 8px;
   padding: var(--Prompt-padding, var(--padding-x-small));
-  text-align: start;
+  text-align: left;
   word-break: break-word;
-  inline-size: 100%;
+  width: 100%;
 }
 .wds-prompt__content-wrapper {
   display: grid;
+  grid-gap: 16px;
+  grid-gap: var(--Prompt-gap, var(--size-16));
+  gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   grid-template-columns: auto 1fr;
-  inline-size: 100%;
+  width: 100%;
 }
 .wds-prompt__content-wrapper--with-dismiss {
   grid-template-columns: auto 1fr auto;
 }
 .wds-prompt__media-wrapper {
   align-self: flex-start;
-  padding-block-start: calc(var(--size-4) - 1px);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
 }
 .wds-prompt__media-wrapper .tw-icon-tags,
 .wds-prompt__media-wrapper .tw-icon-confetti {
@@ -28,14 +35,15 @@
 .wds-prompt__actions-wrapper {
   display: flex;
   flex-wrap: wrap;
+  gap: 8px;
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
   grid-column-end: 3;
 }
-@media (--screen-sm-max) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
-    inline-size: 100%;
+    width: 100%;
   }
   .wds-prompt__content-wrapper--with-dismiss .wds-prompt__actions-wrapper {
     grid-column: span 3;

package/build/styles/radioGroup/RadioGroup.css

@@ -1,3 +1,3 @@
 .wds-radio-group .np-radio:last-child label {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }

package/build/styles/section/Section.css

@@ -1,7 +1,10 @@
 .np-section {
-  margin-block-start: var(--size-32);
+  margin-top: 32px;
+  margin-top: var(--size-32);
 }
 .np-section--with-horizontal-padding {
-  padding-inline-end: var(--space-content-horizontal);
-  padding-inline-start: var(--space-content-horizontal);
+  padding-right: 16px;
+  padding-right: var(--space-content-horizontal);
+  padding-left: 16px;
+  padding-left: var(--space-content-horizontal);
 }

package/build/styles/segmentedControl/SegmentedControl.css

@@ -6,11 +6,14 @@
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
+  padding: 4px;
   padding: var(--size-4);
-  inline-size: 100%;
+  width: 100%;
   justify-content: center;
   align-items: center;
+  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
+  border-radius: 24px;
   border-radius: var(--size-24);
   transition: outline 300ms;
   outline: 2px solid transparent;
@@ -21,12 +24,16 @@
 .segmented-control__segments::after {
   content: "";
   position: absolute;
-  inline-size: var(--segment-highlight-width);
-  inset-block-start: var(--size-4);
-  inset-block-end: var(--size-4);
-  inset-inline-start: var(--segment-highlight-x);
+  width: var(--segment-highlight-width);
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
   z-index: 0;
+  background: #ffffff;
   background: var(--color-background-screen);
+  border-radius: 24px;
   border-radius: var(--size-24);
   transition: left 300ms;
 }
@@ -37,15 +44,16 @@
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
-  padding-block: var(--size-8);
-  padding-inline: var(--size-16);
-  margin-block: 0 0;
-  margin-inline: 0 var(--size-4);
-  min-inline-size: 0;
+  padding: 8px 16px;
+  padding: var(--size-8) var(--size-16);
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
+  min-width: 0;
   line-height: inherit;
   align-items: center;
   text-align: center;
   vertical-align: middle;
+  border-radius: 24px;
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
@@ -53,9 +61,10 @@
   color: var(--color-interactive-primary);
 }
 .segmented-control__segment:first-child {
-  margin-inline-start: 0;
+  margin-left: 0;
 }
 .segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
   background: var(--color-background-overlay);
 }
 .segmented-control__radio-input {
@@ -64,10 +73,12 @@
   pointer-events: none;
 }
 .segmented-control__button {
-  inline-size: 100%;
-  block-size: 100%;
+  width: 100%;
+  height: 100%;
   background: none;
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   border: none;
   outline: none;
   font: inherit;