@transferwise/components 0.0.0-experimental-4eedb45 → 0.0.0-experimental-b50b79b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/build/main.css +38 -50
  2. package/build/styles/css/neptune.css +38 -50
  3. package/build/styles/main.css +38 -50
  4. package/build/styles/styles/less/neptune.css +38 -50
  5. package/package.json +1 -1
  6. package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx +43 -0
  7. package/src/main.css +38 -50
  8. package/src/styles/less/core/_typography.less +6 -18
  9. package/src/styles/less/neptune.css +38 -50
package/build/main.css CHANGED
@@ -3244,66 +3244,54 @@ a,
3244
3244
  font-synthesis: none;
3245
3245
  }
3246
3246
 
3247
- :lang(ja) .display-1,
3248
- :lang(ja) .display-2,
3249
- :lang(ja) .display-3,
3250
- :lang(ja) .display-4,
3251
- :lang(ja) .display-5,
3252
- :lang(ja) .np-text-display-extra-large,
3253
- :lang(ja) .np-text-display-large,
3254
- :lang(ja) .np-text-display-medium,
3255
- :lang(ja) .np-text-display-small,
3256
- :lang(th) .display-1,
3257
- :lang(th) .display-2,
3258
- :lang(th) .display-3,
3259
- :lang(th) .display-4,
3260
- :lang(th) .display-5,
3261
- :lang(th) .np-text-display-extra-large,
3262
- :lang(th) .np-text-display-large,
3263
- :lang(th) .np-text-display-medium,
3264
- :lang(th) .np-text-display-small,
3265
- :lang(zh-CN) .display-1,
3266
- :lang(zh-CN) .display-2,
3267
- :lang(zh-CN) .display-3,
3268
- :lang(zh-CN) .display-4,
3269
- :lang(zh-CN) .display-5,
3270
- :lang(zh-CN) .np-text-display-extra-large,
3271
- :lang(zh-CN) .np-text-display-large,
3272
- :lang(zh-CN) .np-text-display-medium,
3273
- :lang(zh-CN) .np-text-display-small,
3274
- :lang(zh-HK) .display-1,
3275
- :lang(zh-HK) .display-2,
3276
- :lang(zh-HK) .display-3,
3277
- :lang(zh-HK) .display-4,
3278
- :lang(zh-HK) .display-5,
3279
- :lang(zh-HK) .np-text-display-extra-large,
3280
- :lang(zh-HK) .np-text-display-large,
3281
- :lang(zh-HK) .np-text-display-medium,
3282
- :lang(zh-HK) .np-text-display-small {
3247
+ :lang(ja) .display-1:not(.wds-text-display--forced),
3248
+ :lang(ja) .display-2:not(.wds-text-display--forced),
3249
+ :lang(ja) .display-3:not(.wds-text-display--forced),
3250
+ :lang(ja) .display-4:not(.wds-text-display--forced),
3251
+ :lang(ja) .display-5:not(.wds-text-display--forced),
3252
+ :lang(ja) .np-text-display-extra-large:not(.wds-text-display--forced),
3253
+ :lang(ja) .np-text-display-large:not(.wds-text-display--forced),
3254
+ :lang(ja) .np-text-display-medium:not(.wds-text-display--forced),
3255
+ :lang(ja) .np-text-display-small:not(.wds-text-display--forced),
3256
+ :lang(th) .display-1:not(.wds-text-display--forced),
3257
+ :lang(th) .display-2:not(.wds-text-display--forced),
3258
+ :lang(th) .display-3:not(.wds-text-display--forced),
3259
+ :lang(th) .display-4:not(.wds-text-display--forced),
3260
+ :lang(th) .display-5:not(.wds-text-display--forced),
3261
+ :lang(th) .np-text-display-extra-large:not(.wds-text-display--forced),
3262
+ :lang(th) .np-text-display-large:not(.wds-text-display--forced),
3263
+ :lang(th) .np-text-display-medium:not(.wds-text-display--forced),
3264
+ :lang(th) .np-text-display-small:not(.wds-text-display--forced),
3265
+ :lang(zh-CN) .display-1:not(.wds-text-display--forced),
3266
+ :lang(zh-CN) .display-2:not(.wds-text-display--forced),
3267
+ :lang(zh-CN) .display-3:not(.wds-text-display--forced),
3268
+ :lang(zh-CN) .display-4:not(.wds-text-display--forced),
3269
+ :lang(zh-CN) .display-5:not(.wds-text-display--forced),
3270
+ :lang(zh-CN) .np-text-display-extra-large:not(.wds-text-display--forced),
3271
+ :lang(zh-CN) .np-text-display-large:not(.wds-text-display--forced),
3272
+ :lang(zh-CN) .np-text-display-medium:not(.wds-text-display--forced),
3273
+ :lang(zh-CN) .np-text-display-small:not(.wds-text-display--forced),
3274
+ :lang(zh-HK) .display-1:not(.wds-text-display--forced),
3275
+ :lang(zh-HK) .display-2:not(.wds-text-display--forced),
3276
+ :lang(zh-HK) .display-3:not(.wds-text-display--forced),
3277
+ :lang(zh-HK) .display-4:not(.wds-text-display--forced),
3278
+ :lang(zh-HK) .display-5:not(.wds-text-display--forced),
3279
+ :lang(zh-HK) .np-text-display-extra-large:not(.wds-text-display--forced),
3280
+ :lang(zh-HK) .np-text-display-large:not(.wds-text-display--forced),
3281
+ :lang(zh-HK) .np-text-display-medium:not(.wds-text-display--forced),
3282
+ :lang(zh-HK) .np-text-display-small:not(.wds-text-display--forced) {
3283
3283
  /**
3284
3284
  * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
3285
3285
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3286
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3287
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3288
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3289
+ * numeric input of ExpressiveMoneyInput. Add .wds-text-display--forced to opt out.
3288
3290
  */
3289
3291
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3292
  font-family: var(--font-family-regular);
3291
3293
  }
3292
3294
 
3293
- /**
3294
- * WiseSans is not supported for some locales, but there are some exceptions on small UI parts
3295
- * where it's fine or even expected to use - e.g. numeric input of the ExpressiveMoneyInput.
3296
- */
3297
-
3298
- .wds-text-display--forced,
3299
- :lang(ja) .wds-text-display--forced,
3300
- :lang(th) .wds-text-display--forced,
3301
- :lang(zh-CN) .wds-text-display--forced,
3302
- :lang(zh-HK) .wds-text-display--forced {
3303
- font-family: 'Wise Sans', 'Inter', sans-serif;
3304
- font-family: var(--font-family-display);
3305
- }
3306
-
3307
3295
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
3308
3296
 
3309
3297
  .np-text-display-extra-large,
package/build/styles/css/neptune.css CHANGED
@@ -3244,66 +3244,54 @@ a,
3244
3244
  font-synthesis: none;
3245
3245
  }
3246
3246
 
3247
- :lang(ja) .display-1,
3248
- :lang(ja) .display-2,
3249
- :lang(ja) .display-3,
3250
- :lang(ja) .display-4,
3251
- :lang(ja) .display-5,
3252
- :lang(ja) .np-text-display-extra-large,
3253
- :lang(ja) .np-text-display-large,
3254
- :lang(ja) .np-text-display-medium,
3255
- :lang(ja) .np-text-display-small,
3256
- :lang(th) .display-1,
3257
- :lang(th) .display-2,
3258
- :lang(th) .display-3,
3259
- :lang(th) .display-4,
3260
- :lang(th) .display-5,
3261
- :lang(th) .np-text-display-extra-large,
3262
- :lang(th) .np-text-display-large,
3263
- :lang(th) .np-text-display-medium,
3264
- :lang(th) .np-text-display-small,
3265
- :lang(zh-CN) .display-1,
3266
- :lang(zh-CN) .display-2,
3267
- :lang(zh-CN) .display-3,
3268
- :lang(zh-CN) .display-4,
3269
- :lang(zh-CN) .display-5,
3270
- :lang(zh-CN) .np-text-display-extra-large,
3271
- :lang(zh-CN) .np-text-display-large,
3272
- :lang(zh-CN) .np-text-display-medium,
3273
- :lang(zh-CN) .np-text-display-small,
3274
- :lang(zh-HK) .display-1,
3275
- :lang(zh-HK) .display-2,
3276
- :lang(zh-HK) .display-3,
3277
- :lang(zh-HK) .display-4,
3278
- :lang(zh-HK) .display-5,
3279
- :lang(zh-HK) .np-text-display-extra-large,
3280
- :lang(zh-HK) .np-text-display-large,
3281
- :lang(zh-HK) .np-text-display-medium,
3282
- :lang(zh-HK) .np-text-display-small {
3247
+ :lang(ja) .display-1:not(.wds-text-display--forced),
3248
+ :lang(ja) .display-2:not(.wds-text-display--forced),
3249
+ :lang(ja) .display-3:not(.wds-text-display--forced),
3250
+ :lang(ja) .display-4:not(.wds-text-display--forced),
3251
+ :lang(ja) .display-5:not(.wds-text-display--forced),
3252
+ :lang(ja) .np-text-display-extra-large:not(.wds-text-display--forced),
3253
+ :lang(ja) .np-text-display-large:not(.wds-text-display--forced),
3254
+ :lang(ja) .np-text-display-medium:not(.wds-text-display--forced),
3255
+ :lang(ja) .np-text-display-small:not(.wds-text-display--forced),
3256
+ :lang(th) .display-1:not(.wds-text-display--forced),
3257
+ :lang(th) .display-2:not(.wds-text-display--forced),
3258
+ :lang(th) .display-3:not(.wds-text-display--forced),
3259
+ :lang(th) .display-4:not(.wds-text-display--forced),
3260
+ :lang(th) .display-5:not(.wds-text-display--forced),
3261
+ :lang(th) .np-text-display-extra-large:not(.wds-text-display--forced),
3262
+ :lang(th) .np-text-display-large:not(.wds-text-display--forced),
3263
+ :lang(th) .np-text-display-medium:not(.wds-text-display--forced),
3264
+ :lang(th) .np-text-display-small:not(.wds-text-display--forced),
3265
+ :lang(zh-CN) .display-1:not(.wds-text-display--forced),
3266
+ :lang(zh-CN) .display-2:not(.wds-text-display--forced),
3267
+ :lang(zh-CN) .display-3:not(.wds-text-display--forced),
3268
+ :lang(zh-CN) .display-4:not(.wds-text-display--forced),
3269
+ :lang(zh-CN) .display-5:not(.wds-text-display--forced),
3270
+ :lang(zh-CN) .np-text-display-extra-large:not(.wds-text-display--forced),
3271
+ :lang(zh-CN) .np-text-display-large:not(.wds-text-display--forced),
3272
+ :lang(zh-CN) .np-text-display-medium:not(.wds-text-display--forced),
3273
+ :lang(zh-CN) .np-text-display-small:not(.wds-text-display--forced),
3274
+ :lang(zh-HK) .display-1:not(.wds-text-display--forced),
3275
+ :lang(zh-HK) .display-2:not(.wds-text-display--forced),
3276
+ :lang(zh-HK) .display-3:not(.wds-text-display--forced),
3277
+ :lang(zh-HK) .display-4:not(.wds-text-display--forced),
3278
+ :lang(zh-HK) .display-5:not(.wds-text-display--forced),
3279
+ :lang(zh-HK) .np-text-display-extra-large:not(.wds-text-display--forced),
3280
+ :lang(zh-HK) .np-text-display-large:not(.wds-text-display--forced),
3281
+ :lang(zh-HK) .np-text-display-medium:not(.wds-text-display--forced),
3282
+ :lang(zh-HK) .np-text-display-small:not(.wds-text-display--forced) {
3283
3283
  /**
3284
3284
  * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
3285
3285
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3286
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3287
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3288
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3289
+ * numeric input of ExpressiveMoneyInput. Add .wds-text-display--forced to opt out.
3288
3290
  */
3289
3291
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3292
  font-family: var(--font-family-regular);
3291
3293
  }
3292
3294
 
3293
- /**
3294
- * WiseSans is not supported for some locales, but there are some exceptions on small UI parts
3295
- * where it's fine or even expected to use - e.g. numeric input of the ExpressiveMoneyInput.
3296
- */
3297
-
3298
- .wds-text-display--forced,
3299
- :lang(ja) .wds-text-display--forced,
3300
- :lang(th) .wds-text-display--forced,
3301
- :lang(zh-CN) .wds-text-display--forced,
3302
- :lang(zh-HK) .wds-text-display--forced {
3303
- font-family: 'Wise Sans', 'Inter', sans-serif;
3304
- font-family: var(--font-family-display);
3305
- }
3306
-
3307
3295
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
3308
3296
 
3309
3297
  .np-text-display-extra-large,
package/build/styles/main.css CHANGED
@@ -3244,66 +3244,54 @@ a,
3244
3244
  font-synthesis: none;
3245
3245
  }
3246
3246
 
3247
- :lang(ja) .display-1,
3248
- :lang(ja) .display-2,
3249
- :lang(ja) .display-3,
3250
- :lang(ja) .display-4,
3251
- :lang(ja) .display-5,
3252
- :lang(ja) .np-text-display-extra-large,
3253
- :lang(ja) .np-text-display-large,
3254
- :lang(ja) .np-text-display-medium,
3255
- :lang(ja) .np-text-display-small,
3256
- :lang(th) .display-1,
3257
- :lang(th) .display-2,
3258
- :lang(th) .display-3,
3259
- :lang(th) .display-4,
3260
- :lang(th) .display-5,
3261
- :lang(th) .np-text-display-extra-large,
3262
- :lang(th) .np-text-display-large,
3263
- :lang(th) .np-text-display-medium,
3264
- :lang(th) .np-text-display-small,
3265
- :lang(zh-CN) .display-1,
3266
- :lang(zh-CN) .display-2,
3267
- :lang(zh-CN) .display-3,
3268
- :lang(zh-CN) .display-4,
3269
- :lang(zh-CN) .display-5,
3270
- :lang(zh-CN) .np-text-display-extra-large,
3271
- :lang(zh-CN) .np-text-display-large,
3272
- :lang(zh-CN) .np-text-display-medium,
3273
- :lang(zh-CN) .np-text-display-small,
3274
- :lang(zh-HK) .display-1,
3275
- :lang(zh-HK) .display-2,
3276
- :lang(zh-HK) .display-3,
3277
- :lang(zh-HK) .display-4,
3278
- :lang(zh-HK) .display-5,
3279
- :lang(zh-HK) .np-text-display-extra-large,
3280
- :lang(zh-HK) .np-text-display-large,
3281
- :lang(zh-HK) .np-text-display-medium,
3282
- :lang(zh-HK) .np-text-display-small {
3247
+ :lang(ja) .display-1:not(.wds-text-display--forced),
3248
+ :lang(ja) .display-2:not(.wds-text-display--forced),
3249
+ :lang(ja) .display-3:not(.wds-text-display--forced),
3250
+ :lang(ja) .display-4:not(.wds-text-display--forced),
3251
+ :lang(ja) .display-5:not(.wds-text-display--forced),
3252
+ :lang(ja) .np-text-display-extra-large:not(.wds-text-display--forced),
3253
+ :lang(ja) .np-text-display-large:not(.wds-text-display--forced),
3254
+ :lang(ja) .np-text-display-medium:not(.wds-text-display--forced),
3255
+ :lang(ja) .np-text-display-small:not(.wds-text-display--forced),
3256
+ :lang(th) .display-1:not(.wds-text-display--forced),
3257
+ :lang(th) .display-2:not(.wds-text-display--forced),
3258
+ :lang(th) .display-3:not(.wds-text-display--forced),
3259
+ :lang(th) .display-4:not(.wds-text-display--forced),
3260
+ :lang(th) .display-5:not(.wds-text-display--forced),
3261
+ :lang(th) .np-text-display-extra-large:not(.wds-text-display--forced),
3262
+ :lang(th) .np-text-display-large:not(.wds-text-display--forced),
3263
+ :lang(th) .np-text-display-medium:not(.wds-text-display--forced),
3264
+ :lang(th) .np-text-display-small:not(.wds-text-display--forced),
3265
+ :lang(zh-CN) .display-1:not(.wds-text-display--forced),
3266
+ :lang(zh-CN) .display-2:not(.wds-text-display--forced),
3267
+ :lang(zh-CN) .display-3:not(.wds-text-display--forced),
3268
+ :lang(zh-CN) .display-4:not(.wds-text-display--forced),
3269
+ :lang(zh-CN) .display-5:not(.wds-text-display--forced),
3270
+ :lang(zh-CN) .np-text-display-extra-large:not(.wds-text-display--forced),
3271
+ :lang(zh-CN) .np-text-display-large:not(.wds-text-display--forced),
3272
+ :lang(zh-CN) .np-text-display-medium:not(.wds-text-display--forced),
3273
+ :lang(zh-CN) .np-text-display-small:not(.wds-text-display--forced),
3274
+ :lang(zh-HK) .display-1:not(.wds-text-display--forced),
3275
+ :lang(zh-HK) .display-2:not(.wds-text-display--forced),
3276
+ :lang(zh-HK) .display-3:not(.wds-text-display--forced),
3277
+ :lang(zh-HK) .display-4:not(.wds-text-display--forced),
3278
+ :lang(zh-HK) .display-5:not(.wds-text-display--forced),
3279
+ :lang(zh-HK) .np-text-display-extra-large:not(.wds-text-display--forced),
3280
+ :lang(zh-HK) .np-text-display-large:not(.wds-text-display--forced),
3281
+ :lang(zh-HK) .np-text-display-medium:not(.wds-text-display--forced),
3282
+ :lang(zh-HK) .np-text-display-small:not(.wds-text-display--forced) {
3283
3283
  /**
3284
3284
  * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
3285
3285
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3286
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3287
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3288
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3289
+ * numeric input of ExpressiveMoneyInput. Add .wds-text-display--forced to opt out.
3288
3290
  */
3289
3291
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3292
  font-family: var(--font-family-regular);
3291
3293
  }
3292
3294
 
3293
- /**
3294
- * WiseSans is not supported for some locales, but there are some exceptions on small UI parts
3295
- * where it's fine or even expected to use - e.g. numeric input of the ExpressiveMoneyInput.
3296
- */
3297
-
3298
- .wds-text-display--forced,
3299
- :lang(ja) .wds-text-display--forced,
3300
- :lang(th) .wds-text-display--forced,
3301
- :lang(zh-CN) .wds-text-display--forced,
3302
- :lang(zh-HK) .wds-text-display--forced {
3303
- font-family: 'Wise Sans', 'Inter', sans-serif;
3304
- font-family: var(--font-family-display);
3305
- }
3306
-
3307
3295
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
3308
3296
 
3309
3297
  .np-text-display-extra-large,
package/build/styles/styles/less/neptune.css CHANGED
@@ -3244,66 +3244,54 @@ a,
3244
3244
  font-synthesis: none;
3245
3245
  }
3246
3246
 
3247
- :lang(ja) .display-1,
3248
- :lang(ja) .display-2,
3249
- :lang(ja) .display-3,
3250
- :lang(ja) .display-4,
3251
- :lang(ja) .display-5,
3252
- :lang(ja) .np-text-display-extra-large,
3253
- :lang(ja) .np-text-display-large,
3254
- :lang(ja) .np-text-display-medium,
3255
- :lang(ja) .np-text-display-small,
3256
- :lang(th) .display-1,
3257
- :lang(th) .display-2,
3258
- :lang(th) .display-3,
3259
- :lang(th) .display-4,
3260
- :lang(th) .display-5,
3261
- :lang(th) .np-text-display-extra-large,
3262
- :lang(th) .np-text-display-large,
3263
- :lang(th) .np-text-display-medium,
3264
- :lang(th) .np-text-display-small,
3265
- :lang(zh-CN) .display-1,
3266
- :lang(zh-CN) .display-2,
3267
- :lang(zh-CN) .display-3,
3268
- :lang(zh-CN) .display-4,
3269
- :lang(zh-CN) .display-5,
3270
- :lang(zh-CN) .np-text-display-extra-large,
3271
- :lang(zh-CN) .np-text-display-large,
3272
- :lang(zh-CN) .np-text-display-medium,
3273
- :lang(zh-CN) .np-text-display-small,
3274
- :lang(zh-HK) .display-1,
3275
- :lang(zh-HK) .display-2,
3276
- :lang(zh-HK) .display-3,
3277
- :lang(zh-HK) .display-4,
3278
- :lang(zh-HK) .display-5,
3279
- :lang(zh-HK) .np-text-display-extra-large,
3280
- :lang(zh-HK) .np-text-display-large,
3281
- :lang(zh-HK) .np-text-display-medium,
3282
- :lang(zh-HK) .np-text-display-small {
3247
+ :lang(ja) .display-1:not(.wds-text-display--forced),
3248
+ :lang(ja) .display-2:not(.wds-text-display--forced),
3249
+ :lang(ja) .display-3:not(.wds-text-display--forced),
3250
+ :lang(ja) .display-4:not(.wds-text-display--forced),
3251
+ :lang(ja) .display-5:not(.wds-text-display--forced),
3252
+ :lang(ja) .np-text-display-extra-large:not(.wds-text-display--forced),
3253
+ :lang(ja) .np-text-display-large:not(.wds-text-display--forced),
3254
+ :lang(ja) .np-text-display-medium:not(.wds-text-display--forced),
3255
+ :lang(ja) .np-text-display-small:not(.wds-text-display--forced),
3256
+ :lang(th) .display-1:not(.wds-text-display--forced),
3257
+ :lang(th) .display-2:not(.wds-text-display--forced),
3258
+ :lang(th) .display-3:not(.wds-text-display--forced),
3259
+ :lang(th) .display-4:not(.wds-text-display--forced),
3260
+ :lang(th) .display-5:not(.wds-text-display--forced),
3261
+ :lang(th) .np-text-display-extra-large:not(.wds-text-display--forced),
3262
+ :lang(th) .np-text-display-large:not(.wds-text-display--forced),
3263
+ :lang(th) .np-text-display-medium:not(.wds-text-display--forced),
3264
+ :lang(th) .np-text-display-small:not(.wds-text-display--forced),
3265
+ :lang(zh-CN) .display-1:not(.wds-text-display--forced),
3266
+ :lang(zh-CN) .display-2:not(.wds-text-display--forced),
3267
+ :lang(zh-CN) .display-3:not(.wds-text-display--forced),
3268
+ :lang(zh-CN) .display-4:not(.wds-text-display--forced),
3269
+ :lang(zh-CN) .display-5:not(.wds-text-display--forced),
3270
+ :lang(zh-CN) .np-text-display-extra-large:not(.wds-text-display--forced),
3271
+ :lang(zh-CN) .np-text-display-large:not(.wds-text-display--forced),
3272
+ :lang(zh-CN) .np-text-display-medium:not(.wds-text-display--forced),
3273
+ :lang(zh-CN) .np-text-display-small:not(.wds-text-display--forced),
3274
+ :lang(zh-HK) .display-1:not(.wds-text-display--forced),
3275
+ :lang(zh-HK) .display-2:not(.wds-text-display--forced),
3276
+ :lang(zh-HK) .display-3:not(.wds-text-display--forced),
3277
+ :lang(zh-HK) .display-4:not(.wds-text-display--forced),
3278
+ :lang(zh-HK) .display-5:not(.wds-text-display--forced),
3279
+ :lang(zh-HK) .np-text-display-extra-large:not(.wds-text-display--forced),
3280
+ :lang(zh-HK) .np-text-display-large:not(.wds-text-display--forced),
3281
+ :lang(zh-HK) .np-text-display-medium:not(.wds-text-display--forced),
3282
+ :lang(zh-HK) .np-text-display-small:not(.wds-text-display--forced) {
3283
3283
  /**
3284
3284
  * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
3285
3285
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3286
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3287
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3288
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3289
+ * numeric input of ExpressiveMoneyInput. Add .wds-text-display--forced to opt out.
3288
3290
  */
3289
3291
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3292
  font-family: var(--font-family-regular);
3291
3293
  }
3292
3294
 
3293
- /**
3294
- * WiseSans is not supported for some locales, but there are some exceptions on small UI parts
3295
- * where it's fine or even expected to use - e.g. numeric input of the ExpressiveMoneyInput.
3296
- */
3297
-
3298
- .wds-text-display--forced,
3299
- :lang(ja) .wds-text-display--forced,
3300
- :lang(th) .wds-text-display--forced,
3301
- :lang(zh-CN) .wds-text-display--forced,
3302
- :lang(zh-HK) .wds-text-display--forced {
3303
- font-family: 'Wise Sans', 'Inter', sans-serif;
3304
- font-family: var(--font-family-display);
3305
- }
3306
-
3307
3295
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
3308
3296
 
3309
3297
  .np-text-display-extra-large,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-4eedb45",
3
+ "version": "0.0.0-experimental-b50b79b",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { fn } from 'storybook/test';
2
3
  import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
3
4
 
4
5
  const meta: Meta<typeof ExpressiveMoneyInput> = {
@@ -21,3 +22,45 @@ export const WithAutofocus: Story = {
21
22
  autoFocus: true,
22
23
  },
23
24
  };
25
+
26
+ const locales = [
27
+ { lang: 'en', label: 'English', currency: 'GBP' },
28
+ { lang: 'cs', label: 'Czech', currency: 'CZK' },
29
+ { lang: 'de', label: 'German', currency: 'EUR' },
30
+ { lang: 'es', label: 'Spanish', currency: 'EUR' },
31
+ { lang: 'fr', label: 'French', currency: 'EUR' },
32
+ { lang: 'hu', label: 'Hungarian', currency: 'HUF', supportsDecimals: false },
33
+ { lang: 'id', label: 'Indonesian', currency: 'IDR', supportsDecimals: false },
34
+ { lang: 'it', label: 'Italian', currency: 'EUR' },
35
+ { lang: 'ja', label: 'Japanese', currency: 'JPY', supportsDecimals: false },
36
+ { lang: 'nl', label: 'Dutch', currency: 'EUR' },
37
+ { lang: 'pl', label: 'Polish', currency: 'PLN' },
38
+ { lang: 'pt', label: 'Portuguese', currency: 'EUR' },
39
+ { lang: 'ro', label: 'Romanian', currency: 'RON' },
40
+ { lang: 'ru', label: 'Russian', currency: 'RUB' },
41
+ { lang: 'th', label: 'Thai', currency: 'THB' },
42
+ { lang: 'tr', label: 'Turkish', currency: 'TRY' },
43
+ { lang: 'uk', label: 'Ukrainian', currency: 'UAH' },
44
+ { lang: 'zh-CN', label: 'Simplified Chinese', currency: 'CNY' },
45
+ { lang: 'zh-HK', label: 'Traditional Chinese', currency: 'HKD' },
46
+ ];
47
+
48
+ /**
49
+ * Verifies that the .wds-text-display--forced class correctly overrides locale-specific
50
+ * font restrictions (ja, zh-HK, zh-CN, th) so amounts render in Wise Sans across all
51
+ * supported locales. Each row represents a different language context.
52
+ */
53
+ export const LocaleFontOverride = () => (
54
+ <>
55
+ {locales.map(({ lang, label, currency, supportsDecimals = true }) => (
56
+ <div key={lang} lang={lang} className="m-b-4">
57
+ <ExpressiveMoneyInput
58
+ label={`${label} locale (${lang})`}
59
+ currency={currency}
60
+ amount={supportsDecimals ? 1234.56 : 123456}
61
+ onAmountChange={fn()}
62
+ />
63
+ </div>
64
+ ))}
65
+ </>
66
+ );
package/src/main.css CHANGED
@@ -3244,66 +3244,54 @@ a,
3244
3244
  font-synthesis: none;
3245
3245
  }
3246
3246
 
3247
- :lang(ja) .display-1,
3248
- :lang(ja) .display-2,
3249
- :lang(ja) .display-3,
3250
- :lang(ja) .display-4,
3251
- :lang(ja) .display-5,
3252
- :lang(ja) .np-text-display-extra-large,
3253
- :lang(ja) .np-text-display-large,
3254
- :lang(ja) .np-text-display-medium,
3255
- :lang(ja) .np-text-display-small,
3256
- :lang(th) .display-1,
3257
- :lang(th) .display-2,
3258
- :lang(th) .display-3,
3259
- :lang(th) .display-4,
3260
- :lang(th) .display-5,
3261
- :lang(th) .np-text-display-extra-large,
3262
- :lang(th) .np-text-display-large,
3263
- :lang(th) .np-text-display-medium,
3264
- :lang(th) .np-text-display-small,
3265
- :lang(zh-CN) .display-1,
3266
- :lang(zh-CN) .display-2,
3267
- :lang(zh-CN) .display-3,
3268
- :lang(zh-CN) .display-4,
3269
- :lang(zh-CN) .display-5,
3270
- :lang(zh-CN) .np-text-display-extra-large,
3271
- :lang(zh-CN) .np-text-display-large,
3272
- :lang(zh-CN) .np-text-display-medium,
3273
- :lang(zh-CN) .np-text-display-small,
3274
- :lang(zh-HK) .display-1,
3275
- :lang(zh-HK) .display-2,
3276
- :lang(zh-HK) .display-3,
3277
- :lang(zh-HK) .display-4,
3278
- :lang(zh-HK) .display-5,
3279
- :lang(zh-HK) .np-text-display-extra-large,
3280
- :lang(zh-HK) .np-text-display-large,
3281
- :lang(zh-HK) .np-text-display-medium,
3282
- :lang(zh-HK) .np-text-display-small {
3247
+ :lang(ja) .display-1:not(.wds-text-display--forced),
3248
+ :lang(ja) .display-2:not(.wds-text-display--forced),
3249
+ :lang(ja) .display-3:not(.wds-text-display--forced),
3250
+ :lang(ja) .display-4:not(.wds-text-display--forced),
3251
+ :lang(ja) .display-5:not(.wds-text-display--forced),
3252
+ :lang(ja) .np-text-display-extra-large:not(.wds-text-display--forced),
3253
+ :lang(ja) .np-text-display-large:not(.wds-text-display--forced),
3254
+ :lang(ja) .np-text-display-medium:not(.wds-text-display--forced),
3255
+ :lang(ja) .np-text-display-small:not(.wds-text-display--forced),
3256
+ :lang(th) .display-1:not(.wds-text-display--forced),
3257
+ :lang(th) .display-2:not(.wds-text-display--forced),
3258
+ :lang(th) .display-3:not(.wds-text-display--forced),
3259
+ :lang(th) .display-4:not(.wds-text-display--forced),
3260
+ :lang(th) .display-5:not(.wds-text-display--forced),
3261
+ :lang(th) .np-text-display-extra-large:not(.wds-text-display--forced),
3262
+ :lang(th) .np-text-display-large:not(.wds-text-display--forced),
3263
+ :lang(th) .np-text-display-medium:not(.wds-text-display--forced),
3264
+ :lang(th) .np-text-display-small:not(.wds-text-display--forced),
3265
+ :lang(zh-CN) .display-1:not(.wds-text-display--forced),
3266
+ :lang(zh-CN) .display-2:not(.wds-text-display--forced),
3267
+ :lang(zh-CN) .display-3:not(.wds-text-display--forced),
3268
+ :lang(zh-CN) .display-4:not(.wds-text-display--forced),
3269
+ :lang(zh-CN) .display-5:not(.wds-text-display--forced),
3270
+ :lang(zh-CN) .np-text-display-extra-large:not(.wds-text-display--forced),
3271
+ :lang(zh-CN) .np-text-display-large:not(.wds-text-display--forced),
3272
+ :lang(zh-CN) .np-text-display-medium:not(.wds-text-display--forced),
3273
+ :lang(zh-CN) .np-text-display-small:not(.wds-text-display--forced),
3274
+ :lang(zh-HK) .display-1:not(.wds-text-display--forced),
3275
+ :lang(zh-HK) .display-2:not(.wds-text-display--forced),
3276
+ :lang(zh-HK) .display-3:not(.wds-text-display--forced),
3277
+ :lang(zh-HK) .display-4:not(.wds-text-display--forced),
3278
+ :lang(zh-HK) .display-5:not(.wds-text-display--forced),
3279
+ :lang(zh-HK) .np-text-display-extra-large:not(.wds-text-display--forced),
3280
+ :lang(zh-HK) .np-text-display-large:not(.wds-text-display--forced),
3281
+ :lang(zh-HK) .np-text-display-medium:not(.wds-text-display--forced),
3282
+ :lang(zh-HK) .np-text-display-small:not(.wds-text-display--forced) {
3283
3283
  /**
3284
3284
  * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
3285
3285
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3286
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3287
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3288
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3289
+ * numeric input of ExpressiveMoneyInput. Add .wds-text-display--forced to opt out.
3288
3290
  */
3289
3291
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3292
  font-family: var(--font-family-regular);
3291
3293
  }
3292
3294
 
3293
- /**
3294
- * WiseSans is not supported for some locales, but there are some exceptions on small UI parts
3295
- * where it's fine or even expected to use - e.g. numeric input of the ExpressiveMoneyInput.
3296
- */
3297
-
3298
- .wds-text-display--forced,
3299
- :lang(ja) .wds-text-display--forced,
3300
- :lang(th) .wds-text-display--forced,
3301
- :lang(zh-CN) .wds-text-display--forced,
3302
- :lang(zh-HK) .wds-text-display--forced {
3303
- font-family: 'Wise Sans', 'Inter', sans-serif;
3304
- font-family: var(--font-family-display);
3305
- }
3306
-
3307
3295
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
3308
3296
 
3309
3297
  .np-text-display-extra-large,
package/src/styles/less/core/_typography.less CHANGED
@@ -222,34 +222,22 @@ a,
222
222
  font-family: var(--font-family-display);
223
223
  font-synthesis: none;
224
224
 
225
- :lang(ja) &,
226
- :lang(th) &,
227
- :lang(zh-CN) &,
228
- :lang(zh-HK) & {
225
+ :lang(ja) &:not(.wds-text-display--forced),
226
+ :lang(th) &:not(.wds-text-display--forced),
227
+ :lang(zh-CN) &:not(.wds-text-display--forced),
228
+ :lang(zh-HK) &:not(.wds-text-display--forced) {
229
229
  /**
230
230
  * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
231
231
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
232
232
  * font files are browser-cached and we carried over to launchpad, where it causes issues
233
233
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
234
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
235
+ * numeric input of ExpressiveMoneyInput. Add .wds-text-display--forced to opt out.
234
236
  */
235
237
  font-family: var(--font-family-regular);
236
238
  }
237
239
  }
238
240
 
239
- /**
240
- * WiseSans is not supported for some locales, but there are some exceptions on small UI parts
241
- * where it's fine or even expected to use - e.g. numeric input of the ExpressiveMoneyInput.
242
- */
243
- .wds-text-display--forced {
244
- &,
245
- :lang(ja) &,
246
- :lang(th) &,
247
- :lang(zh-CN) &,
248
- :lang(zh-HK) & {
249
- font-family: var(--font-family-display);
250
- }
251
- }
252
-
253
241
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
254
242
  .np-text-display-extra-large,
255
243
  .np-text-display-large,
package/src/styles/less/neptune.css CHANGED
@@ -3244,66 +3244,54 @@ a,
3244
3244
  font-synthesis: none;
3245
3245
  }
3246
3246
 
3247
- :lang(ja) .display-1,
3248
- :lang(ja) .display-2,
3249
- :lang(ja) .display-3,
3250
- :lang(ja) .display-4,
3251
- :lang(ja) .display-5,
3252
- :lang(ja) .np-text-display-extra-large,
3253
- :lang(ja) .np-text-display-large,
3254
- :lang(ja) .np-text-display-medium,
3255
- :lang(ja) .np-text-display-small,
3256
- :lang(th) .display-1,
3257
- :lang(th) .display-2,
3258
- :lang(th) .display-3,
3259
- :lang(th) .display-4,
3260
- :lang(th) .display-5,
3261
- :lang(th) .np-text-display-extra-large,
3262
- :lang(th) .np-text-display-large,
3263
- :lang(th) .np-text-display-medium,
3264
- :lang(th) .np-text-display-small,
3265
- :lang(zh-CN) .display-1,
3266
- :lang(zh-CN) .display-2,
3267
- :lang(zh-CN) .display-3,
3268
- :lang(zh-CN) .display-4,
3269
- :lang(zh-CN) .display-5,
3270
- :lang(zh-CN) .np-text-display-extra-large,
3271
- :lang(zh-CN) .np-text-display-large,
3272
- :lang(zh-CN) .np-text-display-medium,
3273
- :lang(zh-CN) .np-text-display-small,
3274
- :lang(zh-HK) .display-1,
3275
- :lang(zh-HK) .display-2,
3276
- :lang(zh-HK) .display-3,
3277
- :lang(zh-HK) .display-4,
3278
- :lang(zh-HK) .display-5,
3279
- :lang(zh-HK) .np-text-display-extra-large,
3280
- :lang(zh-HK) .np-text-display-large,
3281
- :lang(zh-HK) .np-text-display-medium,
3282
- :lang(zh-HK) .np-text-display-small {
3247
+ :lang(ja) .display-1:not(.wds-text-display--forced),
3248
+ :lang(ja) .display-2:not(.wds-text-display--forced),
3249
+ :lang(ja) .display-3:not(.wds-text-display--forced),
3250
+ :lang(ja) .display-4:not(.wds-text-display--forced),
3251
+ :lang(ja) .display-5:not(.wds-text-display--forced),
3252
+ :lang(ja) .np-text-display-extra-large:not(.wds-text-display--forced),
3253
+ :lang(ja) .np-text-display-large:not(.wds-text-display--forced),
3254
+ :lang(ja) .np-text-display-medium:not(.wds-text-display--forced),
3255
+ :lang(ja) .np-text-display-small:not(.wds-text-display--forced),
3256
+ :lang(th) .display-1:not(.wds-text-display--forced),
3257
+ :lang(th) .display-2:not(.wds-text-display--forced),
3258
+ :lang(th) .display-3:not(.wds-text-display--forced),
3259
+ :lang(th) .display-4:not(.wds-text-display--forced),
3260
+ :lang(th) .display-5:not(.wds-text-display--forced),
3261
+ :lang(th) .np-text-display-extra-large:not(.wds-text-display--forced),
3262
+ :lang(th) .np-text-display-large:not(.wds-text-display--forced),
3263
+ :lang(th) .np-text-display-medium:not(.wds-text-display--forced),
3264
+ :lang(th) .np-text-display-small:not(.wds-text-display--forced),
3265
+ :lang(zh-CN) .display-1:not(.wds-text-display--forced),
3266
+ :lang(zh-CN) .display-2:not(.wds-text-display--forced),
3267
+ :lang(zh-CN) .display-3:not(.wds-text-display--forced),
3268
+ :lang(zh-CN) .display-4:not(.wds-text-display--forced),
3269
+ :lang(zh-CN) .display-5:not(.wds-text-display--forced),
3270
+ :lang(zh-CN) .np-text-display-extra-large:not(.wds-text-display--forced),
3271
+ :lang(zh-CN) .np-text-display-large:not(.wds-text-display--forced),
3272
+ :lang(zh-CN) .np-text-display-medium:not(.wds-text-display--forced),
3273
+ :lang(zh-CN) .np-text-display-small:not(.wds-text-display--forced),
3274
+ :lang(zh-HK) .display-1:not(.wds-text-display--forced),
3275
+ :lang(zh-HK) .display-2:not(.wds-text-display--forced),
3276
+ :lang(zh-HK) .display-3:not(.wds-text-display--forced),
3277
+ :lang(zh-HK) .display-4:not(.wds-text-display--forced),
3278
+ :lang(zh-HK) .display-5:not(.wds-text-display--forced),
3279
+ :lang(zh-HK) .np-text-display-extra-large:not(.wds-text-display--forced),
3280
+ :lang(zh-HK) .np-text-display-large:not(.wds-text-display--forced),
3281
+ :lang(zh-HK) .np-text-display-medium:not(.wds-text-display--forced),
3282
+ :lang(zh-HK) .np-text-display-small:not(.wds-text-display--forced) {
3283
3283
  /**
3284
3284
  * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
3285
3285
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3286
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3287
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3288
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3289
+ * numeric input of ExpressiveMoneyInput. Add .wds-text-display--forced to opt out.
3288
3290
  */
3289
3291
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3292
  font-family: var(--font-family-regular);
3291
3293
  }
3292
3294
 
3293
- /**
3294
- * WiseSans is not supported for some locales, but there are some exceptions on small UI parts
3295
- * where it's fine or even expected to use - e.g. numeric input of the ExpressiveMoneyInput.
3296
- */
3297
-
3298
- .wds-text-display--forced,
3299
- :lang(ja) .wds-text-display--forced,
3300
- :lang(th) .wds-text-display--forced,
3301
- :lang(zh-CN) .wds-text-display--forced,
3302
- :lang(zh-HK) .wds-text-display--forced {
3303
- font-family: 'Wise Sans', 'Inter', sans-serif;
3304
- font-family: var(--font-family-display);
3305
- }
3306
-
3307
3295
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
3308
3296
 
3309
3297
  .np-text-display-extra-large,