@transferwise/components 46.136.0 → 46.137.0

package/build/types/prompt/common/Expander/Expander.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../../src/prompt/common/Expander/Expander.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAGF,wBAAgB,gBAAgB,CAAC,eAAe,UAAO,GAAG,aAAa,CAYtE;AAGD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,UAAU,EACV,UAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,OAAO,CAMV;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAGF,eAAO,MAAM,cAAc,GAAI,iEAM5B,mBAAmB,gCAsBrB,CAAC"}

package/build/types/prompt/common/Expander/Expander.messages.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    expandAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    collapseAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=Expander.messages.d.ts.map

package/build/types/prompt/common/Expander/Expander.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.messages.d.ts","sourceRoot":"","sources":["../../../../../src/prompt/common/Expander/Expander.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;AAEA,wBAWG"}

package/build/types/prompt/helpers/promptMedia.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { AvatarViewProps } from '../../avatarView';
+import { BadgeAssetsProps } from '../../badge';
+import { PrimitivePromptProps } from '../PrimitivePrompt';
+export type PromptMedia = {
+    imgSrc?: string;
+    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+        asset?: AvatarViewProps['children'];
+        badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+    };
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+};
+type RenderPromptMediaOptions = {
+    media: PromptMedia;
+    sentiment: PrimitivePromptProps['sentiment'];
+    mediaId: string;
+    imgClassName: string;
+};
+export declare function renderPromptMedia({ media, sentiment, mediaId, imgClassName, }: RenderPromptMediaOptions): ReactNode;
+export {};
+//# sourceMappingURL=promptMedia.d.ts.map

package/build/types/prompt/helpers/promptMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promptMedia.d.ts","sourceRoot":"","sources":["../../../../src/prompt/helpers/promptMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAG/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;QACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;QACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;KAC5C,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,OAAO,EACP,YAAY,GACb,EAAE,wBAAwB,GAAG,SAAS,CA+CtC"}

package/build/types/prompt/index.d.ts

@@ -4,4 +4,6 @@ export type { ActionPromptProps } from './ActionPrompt';
 export { ActionPrompt } from './ActionPrompt';
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './InfoPrompt';
 export { InfoPrompt } from './InfoPrompt';
+export type { CriticalBannerProps } from './CriticalBanner';
+export { CriticalBanner } from './CriticalBanner';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/build/types/table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/table/Table.tsx"],"names":[],"mappings":"AAEA,OAAoB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAiB,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAW3E,MAAM,WAAW,UAAU;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;QAC5B,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,qBAAqB,EAAE,CAAC;QAChD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,qBAAqB,KAAK,IAAI,CAAC;KACtE,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE;YACP,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;CACH;AAED,QAAA,MAAM,KAAK,GAAI,oFAOZ,UAAU,gCA4HZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/table/Table.tsx"],"names":[],"mappings":"AAEA,OAAoB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAiB,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAW3E,MAAM,WAAW,UAAU;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;QAC5B,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,qBAAqB,EAAE,CAAC;QAChD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,qBAAqB,KAAK,IAAI,CAAC;KACtE,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE;YACP,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;CACH;AAED,QAAA,MAAM,KAAK,GAAI,oFAOZ,UAAU,gCA6HZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/test-utils/index.d.ts

@@ -26,6 +26,8 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
         "neptune.DateLookup.selected": string;
         "neptune.DateLookup.twentyYears": string;
         "neptune.DateLookup.year": string;
+        "neptune.Expander.collapseAriaLabel": string;
+        "neptune.Expander.expandAriaLabel": string;
         "neptune.ExpressiveMoneyInput.currency.search.placeholder": string;
         "neptune.ExpressiveMoneyInput.currency.select.currency": string;
         "neptune.FlowNavigation.back": string;
@@ -111,6 +113,8 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
         "neptune.DateLookup.selected": string;
         "neptune.DateLookup.twentyYears": string;
         "neptune.DateLookup.year": string;
+        "neptune.Expander.collapseAriaLabel": string;
+        "neptune.Expander.expandAriaLabel": string;
         "neptune.ExpressiveMoneyInput.currency.search.placeholder": string;
         "neptune.ExpressiveMoneyInput.currency.select.currency": string;
         "neptune.FlowNavigation.back": string;

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.136.0",
+  "version": "46.137.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -43,7 +43,7 @@
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@formatjs/cli": "^6.14.1",
+    "@formatjs/cli": "^6.14.3",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -81,13 +81,13 @@
     "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
-    "rollup": "^4.60.1",
+    "rollup": "^4.60.2",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^10.3.5",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
-    "@transferwise/neptune-css": "14.27.1",
     "@transferwise/less-config": "3.1.2",
+    "@transferwise/neptune-css": "14.27.1",
     "@wise/components-theming": "1.10.1",
     "@wise/wds-configs": "0.0.0"
   },
@@ -104,9 +104,9 @@
     "@babel/runtime": "^7.29.2",
     "@floating-ui/react": "^0.27.19",
     "@headlessui/react": "^2.2.10",
-    "@react-aria/focus": "^3.21.5",
-    "@react-aria/overlays": "^3.31.2",
-    "@transferwise/formatting": "^2.14.0",
+    "@react-aria/focus": "^3.22.0",
+    "@react-aria/overlays": "^3.32.0",
+    "@transferwise/formatting": "^2.14.1",
     "@transferwise/neptune-tokens": "^8.21.0",
     "@transferwise/neptune-validation": "^3.3.3",
     "clsx": "^2.1.1",

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -5,7 +5,7 @@ import { fireEvent, within } from 'storybook/test';
 import { FastFlag } from '@transferwise/icons';
 import { lorem10, lorem100, lorem500 } from '../../test-utils';
 import { Typography } from '../propsValues/typography';
-import Alert from '../../alert';
+import { InfoPrompt } from '../../prompt/InfoPrompt';
 import Body from '../../body';
 import Button from '../../button';
 import Title from '../../title';
@@ -45,10 +45,11 @@ export const SmoothScrollReset: Story = {
     children: (
       <>
         <Title type={Typography.TITLE_SECTION}>Observe the document</Title>
-        <Alert className="m-t-2" type="warning">
-          Once the <code>BottomSheet</code> opens, the document underneath should be static and
-          should not scroll.
-        </Alert>
+        <InfoPrompt
+          className="m-t-2"
+          sentiment="warning"
+          description="Once the BottomSheet opens, the document underneath should be static and should not scroll."
+        />
         <Body as="p">{lorem100}</Body>
         <Body as="p">{lorem100}</Body>
       </>

package/src/common/hooks/useContainerSize.test.tsx

@@ -0,0 +1,125 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { mockResizeObserver } from '../../test-utils/window-mock';
+
+import { useContainerSize } from './useContainerSize';
+
+mockResizeObserver();
+
+describe('useContainerSize', () => {
+  let resizeObserverCallback: ResizeObserverCallback | null = null;
+  const OriginalResizeObserver = global.ResizeObserver;
+
+  beforeEach(() => {
+    resizeObserverCallback = null;
+
+    // Capture the ResizeObserver callback for testing
+    global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
+      resizeObserverCallback = callback;
+      const instance = new OriginalResizeObserver(callback);
+      return instance;
+    }) as unknown as typeof ResizeObserver;
+  });
+
+  afterEach(() => {
+    global.ResizeObserver = OriginalResizeObserver;
+  });
+
+  // Helper to create a test component
+  function TestComponent({
+    breakpoint,
+    onStateChange,
+  }: {
+    breakpoint: number;
+    onStateChange: (state: boolean) => void;
+  }) {
+    const [ref, isAboveBreakpoint] = useContainerSize(breakpoint);
+
+    // Call the callback whenever state changes
+    React.useEffect(() => {
+      onStateChange(isAboveBreakpoint);
+    }, [isAboveBreakpoint, onStateChange]);
+
+    return (
+      <div ref={ref} data-testid="container">
+        Test
+      </div>
+    );
+  }
+
+  // Helper to simulate container resize
+  function simulateResize(width: number, options?: { noBorderBoxSize?: boolean }) {
+    const container = screen.getByTestId('container');
+
+    act(() => {
+      if (resizeObserverCallback) {
+        const entry = {
+          target: container,
+          borderBoxSize: options?.noBorderBoxSize
+            ? undefined
+            : [{ inlineSize: width, blockSize: 100 }],
+          contentRect: {
+            width,
+            height: 100,
+            x: 0,
+            y: 0,
+            top: 0,
+            right: width,
+            bottom: 100,
+            left: 0,
+            toJSON: () => ({}),
+          },
+          contentBoxSize: [{ inlineSize: width, blockSize: 100 }],
+          devicePixelContentBoxSize: [{ inlineSize: width, blockSize: 100 }],
+        } as ResizeObserverEntry;
+
+        resizeObserverCallback([entry], {} as ResizeObserver);
+      }
+    });
+  }
+
+  it('returns initial state as false', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    // Initial call with false
+    expect(onStateChange).toHaveBeenCalledWith(false);
+  });
+
+  it('updates to true when container width is above breakpoint', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    simulateResize(600);
+    expect(onStateChange).toHaveBeenCalledWith(true);
+  });
+
+  it('remains false when container width is below breakpoint', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    simulateResize(400);
+    expect(onStateChange).toHaveBeenCalledWith(false);
+    expect(onStateChange).not.toHaveBeenCalledWith(true);
+  });
+
+  it('returns true when container width equals breakpoint', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    simulateResize(480);
+    expect(onStateChange).toHaveBeenCalledWith(true);
+  });
+
+  it('updates state when container crosses breakpoint from below to above', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    simulateResize(400);
+    expect(onStateChange).toHaveBeenCalledWith(false);
+
+    simulateResize(600);
+    expect(onStateChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/common/hooks/useContainerSize.ts

@@ -0,0 +1,32 @@
+import { useRef, useState } from 'react';
+
+import { useResizeObserver } from './useResizeObserver';
+
+/**
+ * Hook that returns a ref and a boolean indicating if the container
+ * has a width >= the specified breakpoint.
+ *
+ * Useful for synchronizing React state with CSS container queries.
+ *
+ * Uses content-box measurements to match CSS container query behavior
+ * (excludes padding and border).
+ *
+ * @param breakpoint - Minimum width in pixels
+ * @returns [ref, isAboveBreakpoint] tuple
+ */
+export function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean] {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);
+
+  useResizeObserver(
+    ref,
+    (entry) => {
+      // Use contentRect.width to match CSS container query box model (content-box)
+      const inlineSize = entry.contentRect.width;
+      setIsAboveBreakpoint(inlineSize >= breakpoint);
+    },
+    'content-box',
+  );
+
+  return [ref, isAboveBreakpoint];
+}

package/src/common/hooks/useResizeObserver.ts

@@ -5,6 +5,7 @@ import { useEffectEvent } from './useEffectEvent';
 export function useResizeObserver(
   ref: React.MutableRefObject<Element | null>,
   callback: (entry: ResizeObserverEntry) => void,
+  box: ResizeObserverBoxOptions = 'border-box',
 ) {
   const handleCallback = useEffectEvent(callback);
   useEffect(() => {
@@ -12,11 +13,11 @@ export function useResizeObserver(
       const resizeObserver = new ResizeObserver(([entry]) => {
         handleCallback(entry);
       });
-      resizeObserver.observe(ref.current, { box: 'border-box' });
+      resizeObserver.observe(ref.current, { box });
       return () => {
         resizeObserver.disconnect();
       };
     }
     return () => {};
-  }, [handleCallback, ref]);
+  }, [handleCallback, ref, box]);
 }

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,9 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CriticalCommsBanner from '.';
 
+/**
+ * @deprecated Use **`CriticalBanner`** component instead.
+ */
 export default {
   component: CriticalCommsBanner,
   title: 'Prompts/CriticalCommsBanner',
+  tags: ['deprecated'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 type Story = StoryObj<typeof CriticalCommsBanner>;

package/src/criticalBanner/CriticalCommsBanner.test.story.tsx

@@ -6,7 +6,7 @@ import { withVariantConfig } from '../../.storybook/helpers';
 export default {
   component: CriticalCommsBanner,
   title: 'Prompts/CriticalCommsBanner/Tests',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'deprecated'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 type Story = StoryObj<typeof CriticalCommsBanner>;

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -51,6 +51,9 @@ const iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {
   ),
 };
 
+/**
+ * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.
+ */
 function CriticalCommsBanner({
   title,
   subtitle,

package/src/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.Expander.collapseAriaLabel": "Collapse",
+  "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",

package/src/icons/Icons.story.tsx

@@ -17,57 +17,65 @@ type IconComponent = React.FunctionComponent<{
   title?: string;
 }>;
 
-const ALIAS_TO_CANONICAL: Record<string, string> = {
-  Investments: 'Balance',
+const OLD_ICON_NAMES_MAP: Record<string, string> = {
+  Alert: 'Warning',
+  Ach: 'BankTransfer',
+  OfficeExpenses: 'Stationery',
+  Chat: 'SpeechBubble',
   Holidays: 'Beach',
-  Rent: 'Building',
-  Insights: 'Bulb',
-  CardTransferwise: 'CardWise',
-  SalesAndRoyalties: 'CashRegister',
+  Cs: 'Headset',
+  Family: 'Heart',
   Settings: 'Cog',
-  Boxes: 'CostOfGoodsSold',
-  Car: 'DriversLicense',
+  Lightning: 'LightningBolt',
+  Atm: 'InsertCard',
+  SalesAndRoyalties: 'CashRegister',
+  Tax: 'PercentageCircle',
+  Recipients: 'People',
+  Marketing: 'Target',
+  DriversLicense: 'Car',
+  PinCode: 'Dial',
+  Rent: 'Building',
+  Unlock: 'PadlockUnlocked',
+  Lock: 'Padlock',
+  CardNumber: 'CardDetail',
   Invite: 'GiftBox',
-  ContractServices: 'Handshake',
-  Do: 'HappyEmoji',
-  Emoji: 'HappyEmoji',
-  Cs: 'Headset',
+  Dont: 'SadEmoji',
+  CardTransferwise: 'CardWise',
+  ChipPin: 'Chip',
+  Profile: 'Person',
   Home: 'House',
-  Picture: 'Image',
-  Atm: 'InsertCard',
+  PendingCircle: 'Clock',
   Activity: 'List',
+  ExchangeRate: 'UpwardGraph',
+  ContractServices: 'Handshake',
+  Travel: 'Suitcase',
   TwoStep: 'MobileLock',
-  Unlock: 'PadlockUnlocked',
-  Lock: 'Padlock',
+  EmailAndPhone: 'EmailAndMobile',
+  Insights: 'Bulb',
   Salary: 'PayIn',
-  Recipients: 'People',
-  Tax: 'PercentageCircle',
-  Profile: 'Person',
+  Picture: 'Image',
+  ECommerce: 'ShoppingBag',
+  Feedback: 'SpeechBubbleMessage',
+  Refresh: 'Reload',
+  CostOfGoodsSold: 'Boxes',
   Expenses: 'PieChart',
+  Pending: 'SpeechBubblePending',
   Help: 'QuestionMark',
   HelpCircle: 'QuestionMarkCircle',
-  Refresh: 'Reload',
-  Dont: 'SadEmoji',
-  ECommerce: 'ShoppingBag',
-  Chat: 'SpeechBubble',
-  Pending: 'SpeechBubblePending',
-  Feedback: 'SpeechBubbleMessage',
+  CalendarSuccess: 'CalendarCheck',
   Comments: 'SpeechBubbles',
-  OfficeExpenses: 'Stationery',
-  Travel: 'Suitcase',
-  Marketing: 'Target',
-  ExchangeRate: 'UpwardGraph',
   OwnersWithdrawal: 'Withdrawal',
-  Family: 'Heart',
-  CalendarSuccess: 'CalendarCheck',
-  Dial: 'PinCode',
-  PendingCircle: 'Clock',
+  Do: 'HappyEmoji',
+  Emoji: 'HappyEmoji',
+  Balance: 'BarChart',
+  Investments: 'BarChart',
   Verified: 'Check',
+  FacebookSquare: 'Facebook',
   SoftwareAndWebHosting: 'SoftwareAndHosting',
 };
 
 const CANONICAL_TO_ALIASES: Record<string, string[]> = {};
-for (const [alias, canonical] of Object.entries(ALIAS_TO_CANONICAL)) {
+for (const [alias, canonical] of Object.entries(OLD_ICON_NAMES_MAP)) {
   if (!CANONICAL_TO_ALIASES[canonical]) {
     CANONICAL_TO_ALIASES[canonical] = [];
   }
@@ -82,7 +90,7 @@ type IconEntry = {
 };
 
 const iconEntries: IconEntry[] = Object.entries(AllIcons as Record<string, IconComponent>)
-  .filter(([name]) => !ALIAS_TO_CANONICAL[name])
+  .filter(([name]) => !OLD_ICON_NAMES_MAP[name])
   .map(([name, component]) => {
     const aliases = CANONICAL_TO_ALIASES[name] ?? [];
     return {

package/src/index.ts

@@ -36,7 +36,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps, ActionPromptProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps, CriticalBannerProps } from './prompt';
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
@@ -175,7 +175,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InfoPrompt, InlinePrompt, ActionPrompt } from './prompt';
+export { InfoPrompt, InlinePrompt, ActionPrompt, CriticalBanner } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';

package/src/logo/Logo.css

@@ -1,26 +1,6 @@
 .np-logo {
   display: inline-block;
-}
-.np-theme-personal--forest-green .np-logo-svg path,
-.np-theme-personal--bright-green .np-logo-svg path {
-  fill: var(--color-interactive-primary);
-}
-.np-theme-personal--dark .np-logo-svg path {
-  fill: var(--color-white);
-}
-.np-logo-svg--size-sm {
-  display: block;
-}
-@media (min-width: 576px) {
-  .np-logo-svg--size-sm {
-    display: none;
-  }
-}
-.np-logo-svg--size-md {
-  display: none;
-}
-@media (min-width: 576px) {
-  .np-logo-svg--size-md {
-    display: block;
-  }
+  color: var(--color-interactive-primary);
+  width: var(--wds-logo-width);
+  height: var(--wds-logo-height);
 }

package/src/logo/Logo.less

@@ -1,32 +1,6 @@
 .np-logo {
   display: inline-block;
-}
-
-.np-logo-svg {
-  path {
-    .np-theme-personal--forest-green &,
-    .np-theme-personal--bright-green & {
-      fill: var(--color-interactive-primary);
-    }
-
-    .np-theme-personal--dark & {
-      fill: var(--color-white);
-    }
-  }
-  
-  &--size-sm {
-    display: block;
-  
-    @media (--screen-sm) {
-      display: none;
-    }
-  }
-  
-  &--size-md {
-    display: none;
-  
-    @media (--screen-sm) {
-      display: block;
-    }
-  }
+  color: var(--color-interactive-primary);
+  width: var(--wds-logo-width);
+  height: var(--wds-logo-height);
 }