@transferwise/components 46.160.4 → 46.160.6

package/build/main.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,7 +1974,9 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2409,6 +2421,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2557,6 +2570,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
@@ -19795,6 +19809,10 @@ a[data-toggle="tooltip"] {
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
+.wds-sentiment-surface strong,
+.wds-sentiment-surface b {
+  color: var(--color-sentiment-content-primary);
+}
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -22589,6 +22607,25 @@ button.np-option {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+[dir="rtl"] .np-input::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input::placeholder,
+[dir="rtl"] .np-input:placeholder-shown {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder[type="email"], [dir="rtl"] .np-input:-moz-placeholder[type="tel"], [dir="rtl"] .np-input:-moz-placeholder[type="number"], [dir="rtl"] .np-input:-moz-placeholder[type="url"] {
+  direction: ltr !important;
+}
+[dir="rtl"] .np-input:placeholder-shown[type="email"],
+[dir="rtl"] .np-input:placeholder-shown[type="tel"],
+[dir="rtl"] .np-input:placeholder-shown[type="number"],
+[dir="rtl"] .np-input:placeholder-shown[type="url"] {
+  direction: ltr !important;
+}
 .np-input--shape-rectangle {
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
@@ -23776,10 +23813,25 @@ button.np-option {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.np-text-area::placeholder {
+.np-text-area:-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+.np-text-area::placeholder,
+.np-text-area:placeholder-shown {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+[dir="rtl"] .np-text-area::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area::placeholder,
+[dir="rtl"] .np-text-area:placeholder-shown {
+  direction: rtl !important;
+}
 .tw-instructions {
   /* Reset */
   margin: 0;
@@ -24190,6 +24242,9 @@ button.np-link {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
+[dir="rtl"] .tw-money-input .money-input__number-input {
+  text-align: end;
+}
 .tw-money-input .money-input-currency-flag {
   display: flex;
   align-items: center;
@@ -24258,6 +24313,10 @@ button.np-link {
   overflow: hidden;
   margin-block-end: 0 !important;
 }
+[dir="rtl"] .wds-amount-input-input-container {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-amount-input-input-container {
     transition: none;
@@ -24270,6 +24329,8 @@ button.np-link {
   text-align: end;
   background-color: transparent;
   line-height: inherit;
+  field-sizing: content;
+  block-size: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;
@@ -24534,6 +24595,9 @@ button.np-link {
   margin-inline-start: 12px;
   margin-inline-start: var(--size-12);
 }
+[dir="rtl"] .tw-telephone__number-input-field {
+  text-align: end;
+}
 .tw-telephone__country-select {
   flex-basis: 120px;
   flex-shrink: 0;
@@ -24541,6 +24605,10 @@ button.np-link {
 .tw-telephone__country-select .np-input-group {
   inline-size: 100%;
 }
+[dir="rtl"] .tw-telephone__country-select .np-select-input-content {
+  text-align: end;
+  direction: ltr;
+}
 .tw-telephone__country-select--with-input-group-addon-start .np-button-input {
   padding-inline-start: 48px;
   padding-inline-start: var(--size-48);

package/build/styles/ExpressiveMoneyInput/AmountInput/AmountInput.css

@@ -10,6 +10,10 @@
   overflow: hidden;
   margin-block-end: 0 !important;
 }
+[dir="rtl"] .wds-amount-input-input-container {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-amount-input-input-container {
     transition: none;
@@ -22,6 +26,8 @@
   text-align: end;
   background-color: transparent;
   line-height: inherit;
+  field-sizing: content;
+  block-size: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;

package/build/styles/ExpressiveMoneyInput/ExpressiveMoneyInput.css

@@ -10,6 +10,10 @@
   overflow: hidden;
   margin-block-end: 0 !important;
 }
+[dir="rtl"] .wds-amount-input-input-container {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-amount-input-input-container {
     transition: none;
@@ -22,6 +26,8 @@
   text-align: end;
   background-color: transparent;
   line-height: inherit;
+  field-sizing: content;
+  block-size: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;

package/build/styles/Inputs/Input/Input.css

@@ -147,6 +147,25 @@
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+[dir="rtl"] .np-input::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input::placeholder,
+[dir="rtl"] .np-input:placeholder-shown {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder[type="email"], [dir="rtl"] .np-input:-moz-placeholder[type="tel"], [dir="rtl"] .np-input:-moz-placeholder[type="number"], [dir="rtl"] .np-input:-moz-placeholder[type="url"] {
+  direction: ltr !important;
+}
+[dir="rtl"] .np-input:placeholder-shown[type="email"],
+[dir="rtl"] .np-input:placeholder-shown[type="tel"],
+[dir="rtl"] .np-input:placeholder-shown[type="number"],
+[dir="rtl"] .np-input:placeholder-shown[type="url"] {
+  direction: ltr !important;
+}
 .np-input--shape-rectangle {
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;

package/build/styles/Inputs/TextArea/TextArea.css

@@ -154,7 +154,22 @@
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.np-text-area::placeholder {
+.np-text-area:-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+.np-text-area::placeholder,
+.np-text-area:placeholder-shown {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+[dir="rtl"] .np-text-area::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area::placeholder,
+[dir="rtl"] .np-text-area:placeholder-shown {
+  direction: rtl !important;
+}

package/build/styles/MoneyInput/MoneyInput.css

@@ -10,6 +10,9 @@
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
+[dir="rtl"] .tw-money-input .money-input__number-input {
+  text-align: end;
+}
 .tw-money-input .money-input-currency-flag {
   display: flex;
   align-items: center;

package/build/styles/PhoneNumberInput/PhoneNumberInput.css

@@ -5,6 +5,9 @@
   margin-inline-start: 12px;
   margin-inline-start: var(--size-12);
 }
+[dir="rtl"] .tw-telephone__number-input-field {
+  text-align: end;
+}
 .tw-telephone__country-select {
   flex-basis: 120px;
   flex-shrink: 0;
@@ -12,6 +15,10 @@
 .tw-telephone__country-select .np-input-group {
   inline-size: 100%;
 }
+[dir="rtl"] .tw-telephone__country-select .np-select-input-content {
+  text-align: end;
+  direction: ltr;
+}
 .tw-telephone__country-select--with-input-group-addon-start .np-button-input {
   padding-inline-start: 48px;
   padding-inline-start: var(--size-48);

package/build/styles/PocketSurface/PocketSurface.css

@@ -146,6 +146,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/build/styles/SentimentSurface/SentimentSurface.css

@@ -442,6 +442,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 .wds-sentiment-surface {
   --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -449,3 +450,7 @@
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
+.wds-sentiment-surface strong,
+.wds-sentiment-surface b {
+  color: var(--color-sentiment-content-primary);
+}

package/build/styles/css/neptune.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,6 +1974,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 @font-face {
   font-family: Inter;

package/build/styles/main.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,7 +1974,9 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2409,6 +2421,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2557,6 +2570,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
@@ -19795,6 +19809,10 @@ a[data-toggle="tooltip"] {
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
+.wds-sentiment-surface strong,
+.wds-sentiment-surface b {
+  color: var(--color-sentiment-content-primary);
+}
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -22589,6 +22607,25 @@ button.np-option {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+[dir="rtl"] .np-input::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input::placeholder,
+[dir="rtl"] .np-input:placeholder-shown {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder[type="email"], [dir="rtl"] .np-input:-moz-placeholder[type="tel"], [dir="rtl"] .np-input:-moz-placeholder[type="number"], [dir="rtl"] .np-input:-moz-placeholder[type="url"] {
+  direction: ltr !important;
+}
+[dir="rtl"] .np-input:placeholder-shown[type="email"],
+[dir="rtl"] .np-input:placeholder-shown[type="tel"],
+[dir="rtl"] .np-input:placeholder-shown[type="number"],
+[dir="rtl"] .np-input:placeholder-shown[type="url"] {
+  direction: ltr !important;
+}
 .np-input--shape-rectangle {
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
@@ -23776,10 +23813,25 @@ button.np-option {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.np-text-area::placeholder {
+.np-text-area:-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+.np-text-area::placeholder,
+.np-text-area:placeholder-shown {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+[dir="rtl"] .np-text-area::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area::placeholder,
+[dir="rtl"] .np-text-area:placeholder-shown {
+  direction: rtl !important;
+}
 .tw-instructions {
   /* Reset */
   margin: 0;
@@ -24190,6 +24242,9 @@ button.np-link {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
+[dir="rtl"] .tw-money-input .money-input__number-input {
+  text-align: end;
+}
 .tw-money-input .money-input-currency-flag {
   display: flex;
   align-items: center;
@@ -24258,6 +24313,10 @@ button.np-link {
   overflow: hidden;
   margin-block-end: 0 !important;
 }
+[dir="rtl"] .wds-amount-input-input-container {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-amount-input-input-container {
     transition: none;
@@ -24270,6 +24329,8 @@ button.np-link {
   text-align: end;
   background-color: transparent;
   line-height: inherit;
+  field-sizing: content;
+  block-size: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;
@@ -24534,6 +24595,9 @@ button.np-link {
   margin-inline-start: 12px;
   margin-inline-start: var(--size-12);
 }
+[dir="rtl"] .tw-telephone__number-input-field {
+  text-align: end;
+}
 .tw-telephone__country-select {
   flex-basis: 120px;
   flex-shrink: 0;
@@ -24541,6 +24605,10 @@ button.np-link {
 .tw-telephone__country-select .np-input-group {
   inline-size: 100%;
 }
+[dir="rtl"] .tw-telephone__country-select .np-select-input-content {
+  text-align: end;
+  direction: ltr;
+}
 .tw-telephone__country-select--with-input-group-addon-start .np-button-input {
   padding-inline-start: 48px;
   padding-inline-start: var(--size-48);