@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/src/common/BottomSheet/BottomSheet.css

@@ -6,6 +6,7 @@
 }
 .np-bottom-sheet--top-bar {
   cursor: grab;
+  padding-block: 8px calc(16px + 4px);
   padding-block: var(--size-8) calc(var(--size-16) + var(--size-4));
   padding-inline: 0;
   display: flex;
@@ -23,16 +24,20 @@
 .np-bottom-sheet--handler {
   inline-size: 40px;
   block-size: 4px;
+  background: #c9cbce;
   background: var(--color-interactive-secondary);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-bottom-sheet--close-btn {
   position: absolute;
+  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
 }
 .np-bottom-sheet--content {
   overflow-y: auto;
   padding-block: 0;
+  padding-inline: 16px;
   padding-inline: var(--space-content-horizontal);
   padding-block-end: env(safe-area-inset-bottom);
 }
@@ -40,15 +45,21 @@
   box-shadow: 0 4px 40px rgba(69, 71, 69, 0.2);
 }
 .np-theme-personal .np-bottom-sheet {
+  border-start-start-radius: 32px;
   border-start-start-radius: var(--radius-xlarge, 32px);
+  border-start-end-radius: 32px;
   border-start-end-radius: var(--radius-xlarge, 32px);
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   margin-block: 0px;
+  margin-inline: 8px;
   margin-inline: var(--size-8);
+  inline-size: calc(100% - 16px) !important;
   inline-size: calc(100% - var(--size-16)) !important;
 }
 .np-theme-personal .np-bottom-sheet--content {
+  padding-block: 0 16px;
   padding-block: 0 var(--size-16);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
 }

package/src/common/Circle/Circle.css

@@ -1,4 +1,5 @@
 .np-circle {
+  border-radius: 9999px;
   border-radius: var(--radius-full);
   inline-size: var(--circle-size);
   block-size: var(--circle-size);
@@ -6,7 +7,8 @@
   --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
   font-size: var(--circle-font-size);
-  font-weight: var(--wds-font-weight-body-bold);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
   line-height: 1;
 }
 .np-circle .np-display {
@@ -18,6 +20,7 @@
 }
 .np-circle img,
 .np-circle .wds-flag {
+  border-radius: 9999px;
   border-radius: var(--radius-full);
   inline-size: 100%;
   block-size: 100%;
@@ -34,6 +37,7 @@
   inset-inline-start: 0;
   inline-size: 100%;
   block-size: 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/Circle/Circle.less

@@ -9,7 +9,7 @@
 
   // circle like components have custom typography styles for for default (Inter) font
   font-size: var(--circle-font-size);
-  font-weight: var(--wds-font-weight-body-bold);
+  font-weight: var(--font-weight-semi-bold);
   line-height: 1;
 
   // circle like components have custom typography styles for Wise Sand font

package/src/common/CloseButton/CloseButton.css

@@ -1,65 +1,86 @@
 .np-close-button {
   transition: color 0.15s ease-in-out;
+  color: #00a2dd;
   color: var(--color-interactive-accent);
   border: none;
   background: none;
   padding: 0;
+  block-size: 16px;
   block-size: var(--size-16);
   --ring-outline-offset: 0;
 }
 .np-close-button--large,
 .np-close-button--x-large {
+  block-size: 24px;
   block-size: 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);
+  block-size: 32px;
   block-size: var(--size-32);
+  inline-size: 32px;
   inline-size: 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 {
+    block-size: 64px;
     block-size: var(--size-64);
+    inline-size: 64px;
     inline-size: var(--size-64);
   }
 }
 .np-theme-personal .np-close-button--x-small {
+  block-size: 24px;
   block-size: var(--size-24);
+  inline-size: 24px;
   inline-size: var(--size-24);
   flex-shrink: 0;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-small {
+    block-size: 48px;
     block-size: var(--size-48);
+    inline-size: 48px;
     inline-size: var(--size-48);
   }
 }
 .np-theme-personal .np-close-button--large {
+  block-size: 40px;
   block-size: var(--size-40);
+  inline-size: 40px;
   inline-size: var(--size-40);
   flex-shrink: 0;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button--large {
+    block-size: 80px;
     block-size: var(--size-80);
+    inline-size: 80px;
     inline-size: var(--size-80);
   }
 }
 .np-theme-personal .np-close-button--x-large {
+  block-size: 48px;
   block-size: var(--size-48);
+  inline-size: 48px;
   inline-size: var(--size-48);
   flex-shrink: 0;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-large {
+    block-size: 96px;
     block-size: var(--size-96);
+    inline-size: 96px;
     inline-size: var(--size-96);
   }
 }

package/src/common/Option/Option.css

@@ -1,5 +1,6 @@
 .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;
 }
@@ -7,29 +8,40 @@
   outline: none;
 }
 .np-option .circle-sm {
+  inline-size: 40px;
   inline-size: var(--size-40);
+  block-size: 40px;
   block-size: var(--size-40);
 }
 .np-option__title {
+  color: #37517e;
   color: var(--color-content-primary);
   font-size: 1rem;
-  font-weight: var(--wds-font-weight-body-bold);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
   letter-spacing: 0;
-  line-height: var(--wds-line-height-body);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
   margin: 0;
 }
 .np-option__body {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
+  color: #5d7079;
   color: var(--color-content-secondary);
-  font-size: var(--wds-font-size-body);
-  font-weight: var(--wds-font-weight-body-regular);
+  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-inline-size: 48px;
   min-inline-size: var(--size-48);
+  max-inline-size: 64px;
   max-inline-size: var(--size-64);
   display: flex;
   justify-content: center;
@@ -46,44 +58,58 @@ button.np-option {
   overflow: visible;
 }
 .np-theme-personal .np-option .circle-sm {
+  inline-size: 48px;
   inline-size: var(--size-48);
+  block-size: 48px;
   block-size: var(--size-48);
+  line-height: 48px;
   line-height: var(--size-48);
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-option .circle-sm {
+    inline-size: 96px;
     inline-size: var(--size-96);
+    block-size: 96px;
     block-size: var(--size-96);
+    line-height: 96px;
     line-height: var(--size-96);
   }
 }
 .np-theme-personal .np-option__body {
+  margin-block: 4px 0;
   margin-block: var(--size-4) 0;
   margin-inline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 .np-theme-personal .np-option__container-aligned {
+  margin-inline-end: calc(-1 * 16px);
   margin-inline-end: calc(-1 * var(--space-content-horizontal));
+  margin-inline-start: calc(-1 * 16px);
   margin-inline-start: calc(-1 * var(--space-content-horizontal));
   max-inline-size: none;
   inline-size: auto;
 }
 @media (min-width: 600px) {
   .np-theme-personal .np-option {
+    border-radius: 10px;
     border-radius: var(--radius-small);
   }
 }
 .np-theme-personal .np-option-additional-content {
+  margin-inline-start: 80px;
   margin-inline-start: var(--size-80);
+  margin-inline-end: 16px;
   margin-inline-end: var(--size-16);
   margin-block-start: -10px;
+  padding-block-end: 16px;
   padding-block-end: var(--size-16);
   max-inline-size: -moz-fit-content;
   max-inline-size: fit-content;
 }
 @media (max-width: 320px) {
   .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
+    margin-inline-start: 16px;
     margin-inline-start: var(--size-16);
   }
   .np-theme-personal .np-option-additional-content {

package/src/common/Option/Option.less

@@ -18,17 +18,17 @@
   &__title {
     color: var(--color-content-primary);
     font-size: 1rem;
-    font-weight: var(--wds-font-weight-body-bold);
+    font-weight: var(--font-weight-semi-bold);
     letter-spacing: 0;
-    line-height: var(--wds-line-height-body);
+    line-height: var(--line-height-body);
     margin: 0;
   }
 
   &__body {
     margin-top: var(--size-4);
     color: var(--color-content-secondary);
-    font-size: var(--wds-font-size-body);
-    font-weight: var(--wds-font-weight-body-regular);
+    font-size: var(--font-size-14);
+    font-weight: var(--font-weight-regular);
     line-height: 1.42857;
   }
 

package/src/common/Panel/Panel.css

@@ -1,12 +1,15 @@
 .np-panel__content {
   opacity: 0;
   visibility: hidden;
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
+  border-radius: 10px;
   border-radius: var(--radius-small);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
   transition: opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1), transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1), visibility 0s linear 0.2s;
 }
 .np-theme-personal .np-panel__content {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-theme-personal--forest-green .np-panel__content,
@@ -30,6 +33,7 @@
   inset-inline-start: 0;
   content: "";
   transform: rotate(45deg);
+  background: #ffffff;
   background: var(--color-background-elevated);
 }
 .np-panel[data-popper-placement^="top"] > .np-panel__content {
@@ -65,11 +69,13 @@
   inset-inline-start: -7px;
 }
 .np-theme-personal .np-panel__content {
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
 .np-theme-personal--forest-green .np-dropdown-menu,
 .np-theme-personal--bright-green .np-dropdown-menu,
 .np-theme-personal--dark .np-dropdown-menu {
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }

package/src/common/PropsValues/typography.ts

@@ -6,13 +6,7 @@ export enum Typography {
   DISPLAY_LARGE = 'display-large',
   DISPLAY_MEDIUM = 'display-medium',
   DISPLAY_SMALL = 'display-small',
-  /**
-   * @deprecated Use {@link Typography.DISPLAY_NUMBER_SMALL} instead.
-   */
   DISPLAY_NUMBER = 'display-number',
-  DISPLAY_NUMBER_SMALL = 'display-number-small',
-  DISPLAY_NUMBER_MEDIUM = 'display-number-medium',
-  DISPLAY_NUMBER_LARGE = 'display-number-large',
 
   TITLE_SCREEN = 'title-screen',
   TITLE_SECTION = 'title-section',
@@ -36,23 +30,10 @@ export type DisplayExtraLarge = 'display-extra-large';
 export type DisplayLarge = 'display-large';
 export type DisplayMedium = 'display-medium';
 export type DisplaySmall = 'display-small';
-/**
- * @deprecated Use {@link DisplayNumberSmall} instead.
- */
 export type DisplayNumber = 'display-number';
-export type DisplayNumberSmall = 'display-number-small';
-export type DisplayNumberMedium = 'display-number-medium';
-export type DisplayNumberLarge = 'display-number-large';
 
 export type DisplayTypes =
-  | DisplayExtraLarge
-  | DisplayLarge
-  | DisplayMedium
-  | DisplaySmall
-  | DisplayNumber
-  | DisplayNumberSmall
-  | DisplayNumberMedium
-  | DisplayNumberLarge;
+  DisplayExtraLarge | DisplayLarge | DisplayMedium | DisplaySmall | DisplayNumber;
 
 export type TitleScreen = 'title-screen';
 export type TitleSection = 'title-section';

package/src/common/RadioButton/RadioButton.css

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

package/src/i18n/it.json

@@ -15,7 +15,7 @@
   "neptune.DateLookup.notAvailable": "non disponibile",
   "neptune.DateLookup.outOfRangeAfter": "Inserisci {min} o una data successiva.",
   "neptune.DateLookup.outOfRangeBefore": "Inserisci {max} o una data precedente.",
-  "neptune.DateLookup.outOfRangeBetween": "Seleziona una data tra {min} e {max}.",
+  "neptune.DateLookup.outOfRangeBetween": "Seleziona una data compresa tra {min} e {max}.",
   "neptune.DateLookup.previous": "indietro",
   "neptune.DateLookup.selected": "selezionata",
   "neptune.DateLookup.twentyYears": "20 anni",

package/src/i18n/th.json

@@ -35,7 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",
   "neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "รหัสประเทศ",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "คำนำหน้า",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
   "neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",

package/src/i18n/zh-CN.json

@@ -35,7 +35,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
   "neptune.PhoneNumberInput.countryCodeLabel": "国家/地区代码",
   "neptune.PhoneNumberInput.phoneNumberLabel": "电话号码",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "前缀",
   "neptune.Select.searchPlaceholder": "搜索",
   "neptune.SelectInput.noResultsFound": "找不到结果",
   "neptune.StatusIcon.iconLabel.error": "错误:",

package/src/index.ts

@@ -135,7 +135,7 @@ export type {
   SelectProps,
 } from './_deprecated/Select';
 export type { SlidingPanelProps } from './SlidingPanel';
-export type { SnackbarProps, SnackbarProviderProps } from './Snackbar';
+export type { SnackbarCreationProps, SnackbarProviderProps } from './Snackbar';
 export type { SnackbarContextType } from './Snackbar/SnackbarContext';
 export type { StatusIconProps, StatusIconSentiment } from './StatusIcon';
 export type { StickyProps } from './Sticky';