@transferwise/components 0.0.0-experimental-a9c89de → 0.0.0-experimental-b6ae643

package/build/styles/css/neptune.css

@@ -2334,6 +2334,18 @@
   src: url("styles/fonts/WiseSans-Heavy.woff2") format("woff2");
 }
 
+/**
+ * 🚨🚨🚨 ONLY FOR TESTING. BE REMOVED BEFORE MERGING 🚨🚨🚨
+ */
+
+@font-face {
+  font-family: 'Wise Sans';
+  font-style: normal;
+  font-display: swap;
+  src: url("styles/fonts/WiseSansJP-Heavy.woff2") format('woff2');
+  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FAF, U+2605, U+2606, U+2190-2195, U+203B;
+}
+
 /* stylelint-disable selector-max-empty-lines */
 
 /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@@ -3492,10 +3504,66 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
 }
 
+:lang(ja) .display-1,
+:lang(ja) .display-2,
+:lang(ja) .display-3,
+:lang(ja) .display-4,
+:lang(ja) .display-5,
+:lang(ja) .np-text-display-extra-large,
+:lang(ja) .np-text-display-large,
+:lang(ja) .np-text-display-medium,
+:lang(ja) .np-text-display-small,
+:lang(id) .display-1,
+:lang(id) .display-2,
+:lang(id) .display-3,
+:lang(id) .display-4,
+:lang(id) .display-5,
+:lang(id) .np-text-display-extra-large,
+:lang(id) .np-text-display-large,
+:lang(id) .np-text-display-medium,
+:lang(id) .np-text-display-small,
+:lang(th) .display-1,
+:lang(th) .display-2,
+:lang(th) .display-3,
+:lang(th) .display-4,
+:lang(th) .display-5,
+:lang(th) .np-text-display-extra-large,
+:lang(th) .np-text-display-large,
+:lang(th) .np-text-display-medium,
+:lang(th) .np-text-display-small,
+:lang(zh-CN) .display-1,
+:lang(zh-CN) .display-2,
+:lang(zh-CN) .display-3,
+:lang(zh-CN) .display-4,
+:lang(zh-CN) .display-5,
+:lang(zh-CN) .np-text-display-extra-large,
+:lang(zh-CN) .np-text-display-large,
+:lang(zh-CN) .np-text-display-medium,
+:lang(zh-CN) .np-text-display-small,
+:lang(zh-HK) .display-1,
+:lang(zh-HK) .display-2,
+:lang(zh-HK) .display-3,
+:lang(zh-HK) .display-4,
+:lang(zh-HK) .display-5,
+:lang(zh-HK) .np-text-display-extra-large,
+:lang(zh-HK) .np-text-display-large,
+:lang(zh-HK) .np-text-display-medium,
+:lang(zh-HK) .np-text-display-small {
+  /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/build/styles/main.css

@@ -2334,6 +2334,18 @@
   src: url("styles/fonts/WiseSans-Heavy.woff2") format("woff2");
 }
 
+/**
+ * 🚨🚨🚨 ONLY FOR TESTING. BE REMOVED BEFORE MERGING 🚨🚨🚨
+ */
+
+@font-face {
+  font-family: 'Wise Sans';
+  font-style: normal;
+  font-display: swap;
+  src: url("styles/fonts/WiseSansJP-Heavy.woff2") format('woff2');
+  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FAF, U+2605, U+2606, U+2190-2195, U+203B;
+}
+
 /* stylelint-disable selector-max-empty-lines */
 
 /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@@ -3492,10 +3504,66 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
 }
 
+:lang(ja) .display-1,
+:lang(ja) .display-2,
+:lang(ja) .display-3,
+:lang(ja) .display-4,
+:lang(ja) .display-5,
+:lang(ja) .np-text-display-extra-large,
+:lang(ja) .np-text-display-large,
+:lang(ja) .np-text-display-medium,
+:lang(ja) .np-text-display-small,
+:lang(id) .display-1,
+:lang(id) .display-2,
+:lang(id) .display-3,
+:lang(id) .display-4,
+:lang(id) .display-5,
+:lang(id) .np-text-display-extra-large,
+:lang(id) .np-text-display-large,
+:lang(id) .np-text-display-medium,
+:lang(id) .np-text-display-small,
+:lang(th) .display-1,
+:lang(th) .display-2,
+:lang(th) .display-3,
+:lang(th) .display-4,
+:lang(th) .display-5,
+:lang(th) .np-text-display-extra-large,
+:lang(th) .np-text-display-large,
+:lang(th) .np-text-display-medium,
+:lang(th) .np-text-display-small,
+:lang(zh-CN) .display-1,
+:lang(zh-CN) .display-2,
+:lang(zh-CN) .display-3,
+:lang(zh-CN) .display-4,
+:lang(zh-CN) .display-5,
+:lang(zh-CN) .np-text-display-extra-large,
+:lang(zh-CN) .np-text-display-large,
+:lang(zh-CN) .np-text-display-medium,
+:lang(zh-CN) .np-text-display-small,
+:lang(zh-HK) .display-1,
+:lang(zh-HK) .display-2,
+:lang(zh-HK) .display-3,
+:lang(zh-HK) .display-4,
+:lang(zh-HK) .display-5,
+:lang(zh-HK) .np-text-display-extra-large,
+:lang(zh-HK) .np-text-display-large,
+:lang(zh-HK) .np-text-display-medium,
+:lang(zh-HK) .np-text-display-small {
+  /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,
@@ -28096,10 +28164,6 @@ a[data-toggle="tooltip"] {
   --Card-padding: var(--size-16);
 }
 
-.wds-LiveRegion {
-  width: 100%;
-}
-
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }

package/build/styles/styles/less/neptune.css

@@ -2334,6 +2334,18 @@
   src: url("styles/fonts/WiseSans-Heavy.woff2") format("woff2");
 }
 
+/**
+ * 🚨🚨🚨 ONLY FOR TESTING. BE REMOVED BEFORE MERGING 🚨🚨🚨
+ */
+
+@font-face {
+  font-family: 'Wise Sans';
+  font-style: normal;
+  font-display: swap;
+  src: url("styles/fonts/WiseSansJP-Heavy.woff2") format('woff2');
+  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FAF, U+2605, U+2606, U+2190-2195, U+203B;
+}
+
 /* stylelint-disable selector-max-empty-lines */
 
 /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@@ -3492,10 +3504,66 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
 }
 
+:lang(ja) .display-1,
+:lang(ja) .display-2,
+:lang(ja) .display-3,
+:lang(ja) .display-4,
+:lang(ja) .display-5,
+:lang(ja) .np-text-display-extra-large,
+:lang(ja) .np-text-display-large,
+:lang(ja) .np-text-display-medium,
+:lang(ja) .np-text-display-small,
+:lang(id) .display-1,
+:lang(id) .display-2,
+:lang(id) .display-3,
+:lang(id) .display-4,
+:lang(id) .display-5,
+:lang(id) .np-text-display-extra-large,
+:lang(id) .np-text-display-large,
+:lang(id) .np-text-display-medium,
+:lang(id) .np-text-display-small,
+:lang(th) .display-1,
+:lang(th) .display-2,
+:lang(th) .display-3,
+:lang(th) .display-4,
+:lang(th) .display-5,
+:lang(th) .np-text-display-extra-large,
+:lang(th) .np-text-display-large,
+:lang(th) .np-text-display-medium,
+:lang(th) .np-text-display-small,
+:lang(zh-CN) .display-1,
+:lang(zh-CN) .display-2,
+:lang(zh-CN) .display-3,
+:lang(zh-CN) .display-4,
+:lang(zh-CN) .display-5,
+:lang(zh-CN) .np-text-display-extra-large,
+:lang(zh-CN) .np-text-display-large,
+:lang(zh-CN) .np-text-display-medium,
+:lang(zh-CN) .np-text-display-small,
+:lang(zh-HK) .display-1,
+:lang(zh-HK) .display-2,
+:lang(zh-HK) .display-3,
+:lang(zh-HK) .display-4,
+:lang(zh-HK) .display-5,
+:lang(zh-HK) .np-text-display-extra-large,
+:lang(zh-HK) .np-text-display-large,
+:lang(zh-HK) .np-text-display-medium,
+:lang(zh-HK) .np-text-display-small {
+  /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/build/types/common/liveRegion/LiveRegion.d.ts

@@ -1,13 +1,10 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 export type AriaLive = 'off' | 'polite' | 'assertive';
-export declare const resetLiveRegionAnnouncementQueue: () => void;
 export interface LiveRegionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-live' | 'aria-atomic'> {
     /**
      * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.
      */
     'aria-live': AriaLive;
-    /** Optional stable key that triggers a new announcement when it changes. */
-    announceOnChange?: string | number;
     /** Test ID for testing tools */
     'data-testid'?: string;
     children?: ReactNode;
@@ -17,10 +14,10 @@ export interface LiveRegionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'r
  *
  * - `aria-live="polite"` → `role="status"`
  * - `aria-live="assertive"` → `role="alert"`
- * - `aria-live="off"` → no live region (renders children unwrapped)
+ * - `aria-live="off"` → no live region
  *
  * The `role` prop is intentionally excluded from the public API
  * to prevent mismatches between `aria-live` and `role`.
  */
-export declare const LiveRegion: ({ "aria-live": ariaLive, announceOnChange, children, className, ...props }: LiveRegionProps) => import("react").JSX.Element;
+export declare const LiveRegion: ({ "aria-live": ariaLive, children, ...props }: LiveRegionProps) => import("react").JSX.Element;
 //# sourceMappingURL=LiveRegion.d.ts.map

package/build/types/common/liveRegion/LiveRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiveRegion.d.ts","sourceRoot":"","sources":["../../../../src/common/liveRegion/LiveRegion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AA6BtD,eAAO,MAAM,gCAAgC,QAAO,IAGnD,CAAC;AAaF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,GAAG,WAAW,GAAG,aAAa,CACrC;IACC;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC;IACtB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnC,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,4EAMxB,eAAe,gCAoCjB,CAAC"}
+{"version":3,"file":"LiveRegion.d.ts","sourceRoot":"","sources":["../../../../src/common/liveRegion/LiveRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,GAAG,WAAW,GAAG,aAAa,CACrC;IACC;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC;IACtB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,+CAA+C,eAAe,gCAgBxF,CAAC"}

package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC,GAChG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,wIAWxB,eAAe,gCA6EjB,CAAC"}
+{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC,GAChG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,wIAWxB,eAAe,gCA4EjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a9c89de",
+  "version": "0.0.0-experimental-b6ae643",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,9 +87,9 @@
     "storybook-addon-tag-badges": "^3.0.6",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.27.0",
-    "@wise/components-theming": "1.10.1",
-    "@wise/wds-configs": "0.0.0"
+    "@transferwise/neptune-css": "0.0.0-experimental-b6ae643",
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/common/liveRegion/LiveRegion.test.tsx

@@ -1,43 +1,23 @@
-import { act, render, screen } from '@testing-library/react';
-import { WDS_LIVE_REGION_DELAY_MS } from '../constants';
-import { LiveRegion, LiveRegionProps, resetLiveRegionAnnouncementQueue } from './LiveRegion';
+import { render, screen } from '@testing-library/react';
+import { LiveRegion, LiveRegionProps } from './LiveRegion';
 
 describe('LiveRegion', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-    resetLiveRegionAnnouncementQueue();
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
-  });
-
   const renderLiveRegion = (props: Partial<LiveRegionProps> & Pick<LiveRegionProps, 'aria-live'>) =>
     render(<LiveRegion {...props}>{props.children ?? 'Live content'}</LiveRegion>);
 
-  const enableLiveRegion = (delay = WDS_LIVE_REGION_DELAY_MS) => {
-    act(() => {
-      jest.advanceTimersByTime(delay);
-    });
-  };
-
   describe('when aria-live is "polite"', () => {
     it('renders with role="status"', () => {
       renderLiveRegion({ 'aria-live': 'polite' });
-      enableLiveRegion();
       expect(screen.getByRole('status')).toBeInTheDocument();
     });
 
     it('sets aria-live="polite"', () => {
       renderLiveRegion({ 'aria-live': 'polite' });
-      enableLiveRegion();
       expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite');
     });
 
     it('sets aria-atomic="true"', () => {
       renderLiveRegion({ 'aria-live': 'polite' });
-      enableLiveRegion();
       expect(screen.getByRole('status')).toHaveAttribute('aria-atomic', 'true');
     });
   });
@@ -45,79 +25,32 @@ describe('LiveRegion', () => {
   describe('when aria-live is "assertive"', () => {
     it('renders with role="alert"', () => {
       renderLiveRegion({ 'aria-live': 'assertive' });
-      enableLiveRegion();
       expect(screen.getByRole('alert')).toBeInTheDocument();
     });
 
     it('sets aria-live="assertive"', () => {
       renderLiveRegion({ 'aria-live': 'assertive' });
-      enableLiveRegion();
       expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
     });
 
     it('sets aria-atomic="true"', () => {
       renderLiveRegion({ 'aria-live': 'assertive' });
-      enableLiveRegion();
       expect(screen.getByRole('alert')).toHaveAttribute('aria-atomic', 'true');
     });
   });
 
-  it('delays live-region activation before the configured timeout', () => {
-    renderLiveRegion({ 'aria-live': 'polite', children: 'Delayed content' });
-
-    const liveRegion = screen.getByRole('status');
-    expect(liveRegion).toBeInTheDocument();
-    expect(liveRegion.firstElementChild).toHaveAttribute('aria-hidden', 'true');
-
-    enableLiveRegion(WDS_LIVE_REGION_DELAY_MS - 1);
-    expect(liveRegion.firstElementChild).toHaveAttribute('aria-hidden', 'true');
-
-    enableLiveRegion(1);
-    expect(liveRegion.firstElementChild).not.toHaveAttribute('aria-hidden');
-    expect(liveRegion).toHaveTextContent('Delayed content');
-  });
-
-  it('queues multiple assertive regions so each one gets announced', () => {
-    render(
-      <>
-        <LiveRegion aria-live="assertive">First prompt</LiveRegion>
-        <LiveRegion aria-live="assertive">Second prompt</LiveRegion>
-      </>,
-    );
-
-    const liveRegions = screen.getAllByRole('alert');
-    expect(liveRegions).toHaveLength(2);
-    expect(liveRegions[0].firstElementChild).toHaveAttribute('aria-hidden', 'true');
-    expect(liveRegions[1].firstElementChild).toHaveAttribute('aria-hidden', 'true');
-
-    enableLiveRegion();
-    const firstEnabledLiveRegions = screen.getAllByRole('alert');
-    expect(firstEnabledLiveRegions[0].firstElementChild).not.toHaveAttribute('aria-hidden');
-    expect(firstEnabledLiveRegions[1].firstElementChild).toHaveAttribute('aria-hidden', 'true');
-    expect(firstEnabledLiveRegions[0]).toHaveTextContent('First prompt');
-
-    enableLiveRegion();
-    const secondEnabledLiveRegions = screen.getAllByRole('alert');
-    expect(secondEnabledLiveRegions[1].firstElementChild).not.toHaveAttribute('aria-hidden');
-    expect(secondEnabledLiveRegions[0]).toHaveTextContent('First prompt');
-    expect(secondEnabledLiveRegions[1]).toHaveTextContent('Second prompt');
-  });
-
   it('renders children', () => {
     renderLiveRegion({ 'aria-live': 'polite', children: 'Transfer sent' });
-    enableLiveRegion();
     expect(screen.getByText('Transfer sent')).toBeInTheDocument();
   });
 
   it('passes additional HTML attributes to the wrapper div', () => {
     renderLiveRegion({ 'aria-live': 'polite', className: 'custom' });
-    enableLiveRegion();
     expect(screen.getByRole('status')).toHaveClass('custom');
   });
 
   it('supports data-testid prop', () => {
     renderLiveRegion({ 'aria-live': 'polite', 'data-testid': 'live-region' });
-    enableLiveRegion();
     expect(screen.getByTestId('live-region')).toBeInTheDocument();
   });
 });

package/src/common/liveRegion/LiveRegion.tsx

@@ -1,52 +1,11 @@
-import { useEffect, useState } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
 
-import { WDS_LIVE_REGION_DELAY_MS } from '../constants';
-
-export type AriaLive = 'off' | 'polite' | 'assertive';
-
-type LivePoliteness = Exclude<AriaLive, 'off'>;
-
-const LIVE_REGION_ROLE_BY_POLITENESS: Record<LivePoliteness, 'status' | 'alert'> = {
+const ARIA_LIVE_ROLE_MAP = {
   assertive: 'alert',
   polite: 'status',
-};
-
-let nextPoliteAnnouncementAt = 0;
-let nextAssertiveAnnouncementAt = 0;
+} as const;
 
-const getNextAnnouncementAt = (politeness: LivePoliteness): number => {
-  if (politeness === 'polite') {
-    return nextPoliteAnnouncementAt;
-  }
-
-  return nextAssertiveAnnouncementAt;
-};
-
-const setNextAnnouncementAt = (politeness: LivePoliteness, value: number): void => {
-  if (politeness === 'polite') {
-    nextPoliteAnnouncementAt = value;
-    return;
-  }
-
-  nextAssertiveAnnouncementAt = value;
-};
-
-export const resetLiveRegionAnnouncementQueue = (): void => {
-  nextPoliteAnnouncementAt = 0;
-  nextAssertiveAnnouncementAt = 0;
-};
-
-const calcAnnouncementDelayMs = (politeness: LivePoliteness, now: number): number => {
-  return Math.max(now + WDS_LIVE_REGION_DELAY_MS, getNextAnnouncementAt(politeness)) - now;
-};
-
-const scheduleAnnouncement = (politeness: LivePoliteness): number => {
-  const now = Date.now();
-  const delayMs = calcAnnouncementDelayMs(politeness, now);
-  setNextAnnouncementAt(politeness, now + delayMs + WDS_LIVE_REGION_DELAY_MS);
-  return delayMs;
-};
+export type AriaLive = 'off' | 'polite' | 'assertive';
 
 export interface LiveRegionProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -56,8 +15,6 @@ export interface LiveRegionProps extends Omit<
    * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.
    */
   'aria-live': AriaLive;
-  /** Optional stable key that triggers a new announcement when it changes. */
-  announceOnChange?: string | number;
   /** Test ID for testing tools */
   'data-testid'?: string;
   children?: ReactNode;
@@ -68,51 +25,25 @@ export interface LiveRegionProps extends Omit<
  *
  * - `aria-live="polite"` → `role="status"`
  * - `aria-live="assertive"` → `role="alert"`
- * - `aria-live="off"` → no live region (renders children unwrapped)
+ * - `aria-live="off"` → no live region
  *
  * The `role` prop is intentionally excluded from the public API
  * to prevent mismatches between `aria-live` and `role`.
  */
-export const LiveRegion = ({
-  'aria-live': ariaLive,
-  announceOnChange,
-  children,
-  className,
-  ...props
-}: LiveRegionProps) => {
-  const [shouldAnnounce, setShouldAnnounce] = useState(false);
-  const announcementTrigger =
-    announceOnChange ??
-    (typeof children === 'string' || typeof children === 'number' ? children : undefined);
-
-  useEffect(() => {
-    setShouldAnnounce(false);
-
-    if (ariaLive === 'off') {
-      return;
-    }
-
-    const timeoutId = window.setTimeout(
-      () => setShouldAnnounce(true),
-      scheduleAnnouncement(ariaLive),
-    );
-
-    return () => window.clearTimeout(timeoutId);
-  }, [ariaLive, announcementTrigger]);
-
+export const LiveRegion = ({ 'aria-live': ariaLive, children, ...props }: LiveRegionProps) => {
   if (ariaLive === 'off') {
     return <>{children}</>;
   }
 
   return (
     <div
-      role={LIVE_REGION_ROLE_BY_POLITENESS[ariaLive]}
+      role={ARIA_LIVE_ROLE_MAP[ariaLive]}
       aria-live={ariaLive}
       aria-atomic="true"
-      className={`wds-LiveRegion ${className ?? ''}`}
+      style={{ display: 'contents' }}
       {...props}
     >
-      <div aria-hidden={shouldAnnounce ? undefined : 'true'}>{children}</div>
+      {children}
     </div>
   );
 };

package/src/display/Display.story.tsx

@@ -14,6 +14,8 @@ export const Basic = () => {
   const DE = 'äöüßabcdefghijklmnopqrstuvwxyz';
   const UA = 'Ми будуємо найбільш міжнародний рахунок у світі';
   const JA = 'ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてで';
+  const ZN =
+    '的一是在不了有和人这中大为上个国我以要他时来用们生到作地于出就分对成会可主发年样能下过子说产种面而方后多定行学法所民得经十三之进着等部度家电力里如水化高自二理起小物现实加量都两体制机当使点从业本去最性性齉龘龘靐齉爩鱻猋驫麤籲爨癵驫鲙鬯鬻厵纛';
   return (
     <>
       <div lang="en">
@@ -77,7 +79,7 @@ export const Basic = () => {
       </div>
       <hr />
       <div lang="ja">
-        <h1>Everything eles, e.g 🇯🇵</h1>
+        <h1>Japanese</h1>
         Large
         <Display type={Typography.DISPLAY_LARGE}>{JA}</Display>
         <hr />
@@ -87,6 +89,18 @@ export const Basic = () => {
         Small
         <Display type={Typography.DISPLAY_SMALL}>{JA}</Display>
       </div>
+      <hr />
+      <div lang="zh-CN">
+        <h1>Simplified Chinese</h1>
+        Large
+        <Display type={Typography.DISPLAY_LARGE}>{ZN}</Display>
+        <hr />
+        Medium
+        <Display type={Typography.DISPLAY_MEDIUM}>{ZN}</Display>
+        <hr />
+        Small
+        <Display type={Typography.DISPLAY_SMALL}>{ZN}</Display>
+      </div>
     </>
   );
 };