@transferwise/components 46.76.0 → 46.78.0

package/build/types/avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAOA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAOA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AAGnB;;GAEG;AACH,KAAK,eAAe,GAAG,UAAU,CAAC;AAElC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,WAAW,CAAC;AAShB,QAAA,MAAM,KAAK,qFAOR,UAAU,gCAoBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AAEnB;;GAEG;AACH,KAAK,eAAe,GAAG,UAAU,CAAC;AAElC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,KAAK,qFAOR,UAAU,gCAkBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/common/circle/Circle.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 export type Props = {
     /**
      * Modify underlying element, `div` by default

package/build/types/common/circle/Circle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM;IAfV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;4EAyBnB,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzD,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAenC,QAAA,MAAM,MAAM;IA5BV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;4EA8CnB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/build/types/statusIcon/StatusIcon.d.ts

@@ -1,7 +1,11 @@
 import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
+/**
+ * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead
+ */
+type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 export type StatusIconProps = {
-    sentiment: `${Sentiment}`;
-    size: SizeSmall | SizeMedium | SizeLarge;
+    sentiment?: `${Sentiment}`;
+    size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
     /**
      * Override for the sentiment's-derived, default, accessible
      * name announced by the screen readers. <br />
@@ -9,6 +13,6 @@ export type StatusIconProps = {
      * */
     iconLabel?: string | null;
 };
-declare const StatusIcon: ({ sentiment, size: sizeProp, iconLabel, }: StatusIconProps) => import("react").JSX.Element;
+declare const StatusIcon: ({ sentiment, size: sizeProp, iconLabel }: StatusIconProps) => import("react").JSX.Element;
 export default StatusIcon;
 //# sourceMappingURL=StatusIcon.d.ts.map

package/build/types/statusIcon/StatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,WAAW,CAAC;AAM1F,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,8CAIb,eAAe,gCA8DjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,WAAW,CAAC;AAM1F;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,6CAA+D,eAAe,gCA8D7F,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.76.0",
+  "version": "46.78.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
+    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.19.1",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/less-config": "3.1.0"
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/alert/Alert.spec.story.tsx

@@ -42,7 +42,7 @@ export const SimpleTrigger: Story = {
           Trigger Alert
         </Button>
 
-        {isActive && <Alert {...args} dynamicRender className="m-t-4" />}
+        {isActive && <Alert {...args} className="m-t-4" />}
       </>
     );
   },
@@ -79,13 +79,13 @@ export const ComplexTrigger: Story = {
           />
         </Field>
 
-        {isActive && <Alert dynamicRender {...args} className="m-t-2" />}
+        {isActive && <Alert {...args} className="m-t-2" />}
       </>
     );
   },
 };
 
-export const BackendForFrontend: Story = {
+export const MultipleDynamicAlerts: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(canvas.queryAllByRole('status')).toHaveLength(0);
@@ -125,9 +125,90 @@ export const BackendForFrontend: Story = {
         </Button>
 
         {alerts.map((props) => (
-          <Alert dynamicRender {...props} key={props.title} className="m-t-3" />
+          <Alert {...props} key={props.title} className="m-t-3" />
         ))}
       </>
     );
   },
 };
+
+/** Making sure using `active` is non-breaking **/
+export const SimpleTriggerDeprecated: Story = {
+  name: 'Deprecated: Simple Trigger',
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await wait();
+    await userEvent.tab();
+    await wait();
+    await userEvent.keyboard('{Enter}');
+
+    await waitFor(async () => expect(canvas.getByText(args.message || '')).toBeInTheDocument());
+    await wait(1000);
+    await userEvent.keyboard('{Enter}');
+    await wait();
+    await waitFor(async () =>
+      expect(canvas.queryByText(args.message || '')).not.toBeInTheDocument(),
+    );
+  },
+  render: function Render(args) {
+    const [isActive, setIsActive] = useState(false);
+
+    return (
+      <>
+        <Button htmlType="button" onClick={() => setIsActive((current) => !current)}>
+          Trigger Alert
+        </Button>
+
+        <Alert {...args} active={isActive} className="m-t-4" />
+      </>
+    );
+  },
+};
+
+/** Making sure using `active` is non-breaking **/
+export const ComplexTriggerDeprecated: Story = {
+  name: 'Deprecated: Complex Trigger',
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await wait();
+    await userEvent.tab();
+    await wait();
+    await userEvent.keyboard('{ArrowDown}');
+    await wait();
+    await userEvent.keyboard('{ArrowDown}');
+    await wait();
+    await userEvent.keyboard('{ArrowDown}');
+    await wait();
+    await userEvent.keyboard('{Enter}');
+
+    await waitFor(async () => expect(canvas.getByText(args.message || '')).toBeInTheDocument());
+    await wait(1000);
+    await userEvent.keyboard('{Enter}');
+    await wait();
+    await userEvent.keyboard('{ArrowUp}');
+    await wait();
+    await userEvent.keyboard('{Enter}');
+    // await waitFor(async () => expect(canvas.queryByText(args.message || '')).not.toBeInTheDocument());
+  },
+  render: function Render(args) {
+    const [isActive, setIsActive] = useState(false);
+    const [value, setValue] = useState<string>();
+
+    return (
+      <>
+        <Field label="Select option to triger Alert">
+          <SelectInput
+            items={[
+              { type: 'option', value: 'one' },
+              { type: 'option', value: 'two' },
+            ]}
+            onChange={setValue}
+            onClose={() => setIsActive(Boolean(value === 'two'))}
+          />
+        </Field>
+
+        <Alert {...args} active={isActive} className="m-t-2" />
+      </>
+    );
+  },
+};

package/src/alert/Alert.spec.tsx

@@ -4,7 +4,14 @@ import { ThemeProvider } from '@wise/components-theming';
 import React from 'react';
 
 import { Sentiment, Size, Theme, Variant } from '../common';
-import { render, cleanup, screen, userEvent, fireEvent, mockMatchMedia } from '../test-utils';
+import {
+  render,
+  cleanup,
+  screen,
+  userEvent as user,
+  fireEvent,
+  mockMatchMedia,
+} from '../test-utils';
 
 import Alert, { AlertAction, AlertArrowPosition, AlertType } from './Alert';
 
@@ -25,6 +32,9 @@ describe('Alert', () => {
   let alert: HTMLElement;
   let closeButton: HTMLElement;
   let action: AlertAction;
+  const userEvent = user.setup({
+    advanceTimers: jest.advanceTimersByTimeAsync,
+  });
 
   const classForType = (type: AlertType) => `alert-${type}`;
 
@@ -39,7 +49,6 @@ describe('Alert', () => {
   });
 
   afterEach(() => {
-    cleanup();
     jest.clearAllMocks();
   });
 
@@ -100,6 +109,24 @@ describe('Alert', () => {
       );
     });
 
+    it('active is ignored and a warning is logged', () => {
+      render(<Alert active message={message} />);
+
+      expect(screen.getByText(message)).toBeInTheDocument();
+      expect(mockedWarn).toHaveBeenCalledWith(
+        expect.stringMatching(/Alert component doesn't support `active`/),
+      );
+    });
+
+    it('dynamicRender is ignored and a warning is logged', () => {
+      render(<Alert dynamicRender message={message} />);
+
+      expect(screen.getByText(message)).toBeInTheDocument();
+      expect(mockedWarn).toHaveBeenCalledWith(
+        expect.stringMatching(/Alert component doesn't support.*?`dynamicRender`/),
+      );
+    });
+
     it('dismissible is ignored and a warning is logged', () => {
       ({ container } = render(<Alert dismissible message={message} />));
 
@@ -252,18 +279,17 @@ describe('Alert', () => {
   });
 
   describe('onDismiss', () => {
-    it('renders the close button if onDismiss is provided', () => {
+    it('renders the close button if onDismiss is provided', async () => {
       render(<Alert message={message} onDismiss={jest.fn()} />);
-
-      expect(screen.getByRole('button')).toBeInTheDocument();
+      const button = await screen.findByRole('button', { name: 'Close' });
+      expect(button).toBeEnabled();
     });
 
     it('calls onDismiss when the close button is clicked', async () => {
       const onDismiss = jest.fn();
-
       render(<Alert message={message} onDismiss={onDismiss} />);
-
-      await userEvent.click(screen.getByRole('button'));
+      const button = await screen.findByRole('button', { name: 'Close' });
+      await userEvent.click(button);
 
       expect(onDismiss).toHaveBeenCalledTimes(1);
     });
@@ -478,7 +504,7 @@ describe('Alert', () => {
     });
   });
 
-  describe('`active` prop', () => {
+  describe('`active` prop backward compatibility', () => {
     it('should render wrapper and alert if `active` is unset', () => {
       render(<Alert message={message} />);
       expect(screen.getByRole('status')).toBeInTheDocument();
@@ -492,13 +518,9 @@ describe('Alert', () => {
     });
 
     it('should render wrapper and alert if `active` is set', () => {
-      render(<Alert message={message} />);
+      render(<Alert message={message} active />);
       expect(screen.getByRole('status')).toBeInTheDocument();
       expect(screen.getByText(message)).toBeInTheDocument();
     });
   });
-
-  describe('dynamicRender', () => {
-    it('should', () => {});
-  });
 });

package/src/alert/Alert.story.tsx

@@ -12,10 +12,8 @@ export default {
   title: 'Feedback/Alert',
   args: {
     type: Sentiment.POSITIVE,
-    dynamicRender: false,
     message:
       'Payments sent to your bank details **today** might not arrive in time for the holidays.',
-    active: true,
   },
   argTypes: {
     arrow: {
@@ -107,35 +105,43 @@ export const WithTitle: Story = {
 };
 
 /**
- * For ARIA live region to function correctly with screen readers,
+ * For ARIA live region to function correctly with screen readers (SR),
  * the container with an appropriate ARIA role (in the case of this
  * component, it's `status` or `alert`) must be rendered first.
  * Once present in the accessibility tree (AT), its dynamic contents
  * will be announced correctly.
  *
  * It's not a problem if your page includes an Alert that is initially
- * visible upon the very first render, but if it appears as a result
- * of some interaction or is async, e.g. BE-driven then the screen
- * reader might not announce it correctly.
+ * visible at the very first render, but if it appears as a result of
+ * user interaction or is async, e.g. BE-driven, then the screen reader
+ * might not announce it correctly. It becomes even more tricky if an
+ * Alert is triggerred by a component that causes refocusing or introduces
+ * many modifications to the AT, such as MoneyInput, for example, as that
+ * entirely hijacks screen-reader's attention and prevents it from
+ * announcing live region changes.
  *
- * In order for this to work, we've introduced a small delay (175ms)
- * between mounting the Alert's live region wrapper and actual DOM
- * content injection to allow screen readers to process it correctly.
- * It also to compensates for focus and AT manipulations commonly
- * introduced by more complex triggers like e.g. `SelectInput`,
- * which prevent the screen readers from announcing simultaneous
- * changes on the page.
+ * In order for this to work, we've introduced a simple mechanism which
+ * overcomes all of the above:
+ * 1. On the component mount, we render the live region wrapper.
+ * 2. We also render the actual Alert but set `aria-hidden` on it.
+ * 3. After 175ms, which has been confirmed as sufficient delay for
+ * the SRs to become responsive after trigger's activity, we remove the
+ * `aria-hidden` attribute,  which, in turn, initiates the announcements.
  *
- * In those cases you should enable the `dynamicRender` prop.
+ * **NB:** While this approach has no visual side-effects (e.g. layout
+ * shift), it makes the Alert hidden from the assistive tech for 175ms.
+ * It's our belief that such short pause between announcements is
+ * negligible for the user.
  */
 export const DynamicRender: Story = {
   render: function Render(args) {
-    const [isActive, setIsActive] = useState(false);
+    const [isOneActive, setIsOneActive] = useState(false);
+    const [isTwoActive, setIsTwoActive] = useState(false);
     const [value, setValue] = useState<string>();
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setIsActive((current) => !current)}>
+        <Button htmlType="button" onClick={() => setIsOneActive(true)}>
           Trigger Alert
         </Button>
 
@@ -146,11 +152,16 @@ export const DynamicRender: Story = {
               { type: 'option', value: 'two' },
             ]}
             onChange={setValue}
-            onClose={() => setIsActive(value === 'two')}
+            onClose={() => setIsTwoActive(value === 'two')}
           />
         </Field>
 
-        {isActive && <Alert {...args} dynamicRender className="m-t-5" />}
+        {isOneActive && <Alert {...args}>This Alert has a simple trigger.</Alert>}
+        {isTwoActive && (
+          <Alert {...args} type={Sentiment.WARNING}>
+            This Alert has a complex trigger.
+          </Alert>
+        )}
       </>
     );
   },
@@ -159,27 +170,33 @@ export const DynamicRender: Story = {
       source: {
         code: `
 function Render(args) {
-  const [isActive, setIsActive] = useState(false);
-  const [value, setValue] = useState<string>();
+    const [isOneActive, setIsOneActive] = useState(false);
+    const [isTwoActive, setIsTwoActive] = useState(false);
+    const [value, setValue] = useState<string>();
 
   return (
     <>
-      <Button htmlType="button" onClick={() => setIsActive((current) => !current)}>
+      <Button htmlType="button" onClick={() => setIsOneActive(true)}>
         Trigger Alert
       </Button>
 
-      <Field label="Select 'two' to triger Alert" className="m-t-3">
+      <Field label="Select \`two\` to triger Alert" className="m-t-3">
         <SelectInput
           items={[
             { type: 'option', value: 'one' },
             { type: 'option', value: 'two' },
           ]}
           onChange={setValue}
-          onClose={() => setIsActive(value === 'two')}
+          onClose={() => setIsTwoActive(value === 'two')}
         />
       </Field>
-
-      {isActive && <Alert {...args} dynamicRender className="m-t-5" />}
+      
+      {isOneActive && <Alert {...args}>This Alert has a simple trigger.</Alert>}
+      {isTwoActive && (
+        <Alert {...args} type={Sentiment.WARNING}>
+          This Alert has a complex trigger.
+        </Alert>
+      )}
     </>
   );
 }`,
@@ -210,16 +227,15 @@ const getAlerts = () => {
 };
 
 /**
- * When dealing with Backend for Frontend (BFF), sometimes it's not
- * just about conditional rendering but also the fact you don't
- * know how many `Alert`s you're going to get and when.
- *
- * `dynamicRender` prop will work with those scenarios as well.
+ * Sometimes, especially when dealing with Backend for Frontend (BFF),
+ * it's not just about conditional rendering but also the fact that
+ * you don't know how many `Alert`s you'll need to render.
  *
- * **NB:** Screen readers do not guarantee the order in which they
- * read out multiple injected sibling nodes.
+ * If you have to inject multiple Alerts simultaneously into the page,
+ * please note that we currently have no means of guaranteeing the order
+ * in  which they screen reader will read them out.
  */
-export const BackendForFrontend: Story = {
+export const MultipleDynamicAlerts: Story = {
   render: function Render() {
     const [isActive, setIsActive] = useState(false);
     const [alerts, setAlerts] = useState<AlertProps[]>([]);
@@ -237,7 +253,7 @@ export const BackendForFrontend: Story = {
         </Button>
 
         {alerts.map((props) => (
-          <Alert {...props} key={props.title} dynamicRender className="m-t-3" />
+          <Alert {...props} key={props.title} className="m-t-3" />
         ))}
       </>
     );
@@ -267,7 +283,6 @@ function Render() {
           {...props} 
           key={props.title} 
           className="m-t-3" 
-          dynamicRender 
         />
       ))}
     </>

package/src/alert/Alert.tsx

@@ -64,17 +64,9 @@ export interface AlertProps {
   /** The type dictates which icon and colour will be used */
   type?: AlertType;
   variant?: `${Variant}`;
-  /**
-   * Controls rendering of the Alert component. <br />
-   * Toggle this prop instead using conditional rendering and logical AND (&&)
-   * operator, to make the component work with screen readers.
-   * @deprecated use `dynamicRender`
-   * */
+  /** @deprecated Safe to remove */
   active?: boolean;
-  /**
-   * Toggle this prop when dealing with multiple, dynamic Alerts, to make them
-   * work with screen readers. This is especially helpful for the BFF use cases.
-   * */
+  /** @deprecated Safe to remove */
   dynamicRender?: boolean;
   /** @deprecated Use `InlineAlert` instead. */
   arrow?: `${AlertArrowPosition}`;
@@ -100,22 +92,30 @@ function resolveType(type: AlertType): AlertTypeResolved {
 }
 
 export default function Alert({
-  arrow,
   action,
-  children,
   className,
-  dismissible,
   icon,
   statusIconLabel,
   onDismiss,
   message,
-  size,
   title,
   type = 'neutral',
   variant = 'desktop',
+  arrow,
+  children,
+  size,
+  dismissible,
   active = true,
-  dynamicRender = false,
+  dynamicRender,
 }: AlertProps) {
+  useEffect(() => {
+    if (active !== undefined || dynamicRender !== undefined) {
+      logActionRequired(
+        "Alert component doesn't support `active` or `dynamicRender` anymore, please remove that prop.",
+      );
+    }
+  }, [active, dynamicRender]);
+
   useEffect(() => {
     if (arrow !== undefined) {
       logActionRequired(
@@ -157,14 +157,12 @@ export default function Alert({
 
   const [shouldFire, setShouldFire] = useState<boolean>();
 
-  const [shouldShow, setShouldShow] = useState<boolean>();
+  const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);
   useEffect(() => {
-    if ((shouldShow === undefined && !dynamicRender) || !active) {
-      setShouldShow(active);
-    } else {
-      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);
-    }
-  }, [active, shouldShow, dynamicRender]);
+    setTimeout(() => {
+      setShouldAnnounce(true);
+    }, WDS_LIVE_REGION_DELAY_MS);
+  }, []);
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
 
@@ -173,8 +171,9 @@ export default function Alert({
       role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}
       className="wds-alert__liveRegion"
     >
-      {shouldShow && (
+      {active && (
         <div
+          aria-hidden={shouldAnnounce ? undefined : 'true'}
           className={clsx(
             'alert d-flex',
             `alert-${resolvedType}`,

package/src/avatar/Avatar.css

@@ -2,17 +2,26 @@
 }@media (min-width: 768px) {
 }.tw-avatar {
   position: relative;
+  border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
 }.tw-avatar .tw-avatar__content {
+  align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
   background-color: var(--color-background-neutral);
+  border-radius: 50%;
+  color: #37517e;
+  color: var(--color-content-primary);
+  display: flex;
+  height: 100%;
+  justify-content: center;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
+  width: 100%;
 }.tw-avatar--outlined {
   border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
@@ -46,6 +55,10 @@
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;
+}.tw-avatar--24 {
+  min-width: 24px;
+  width: 24px;
+  height: 24px;
 }.tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
@@ -70,6 +83,10 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
+}.tw-avatar--40 {
+  min-width: 40px;
+  width: 40px;
+  height: 40px;
 }.tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
@@ -94,6 +111,10 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
+}.tw-avatar--48 {
+  min-width: 48px;
+  width: 48px;
+  height: 48px;
 }.tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
@@ -118,6 +139,10 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
+}.tw-avatar--56 {
+  min-width: 56px;
+  width: 56px;
+  height: 56px;
 }.tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
@@ -142,6 +167,10 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
+}.tw-avatar--72 {
+  min-width: 72px;
+  width: 72px;
+  height: 72px;
 }.tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;

package/src/avatar/Avatar.less

@@ -10,15 +10,23 @@
 
 .tw-avatar {
   position: relative;
+  border-radius: 50%;
   user-select: none;
   box-sizing: border-box;
 
   & &__content {
+    align-items: center;
     background-color: #86a7bd1a;
     background-color: var(--color-background-neutral);
+    border-radius: 50%;
+    color: var(--color-content-primary);
+    display: flex;
+    height: 100%;
+    justify-content: center;
     max-height: 100%;
     max-width: 100%;
     overflow: hidden;
+    width: 100%;
   }
 
   &--outlined {
@@ -109,6 +117,10 @@
 .avatar-dimension(@avatar-size) {
   @mask-size: 2px;
 
+  min-width: @avatar-size;
+  width: @avatar-size;
+  height: @avatar-size;
+
   &.tw-avatar--emoji,
   &.tw-avatar--icon {
     font-size: @avatar-size * 0.5;