@transferwise/components 0.0.0-experimental-fa9fbe9 → 0.0.0-experimental-162ecb1

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

@@ -1,12 +1,21 @@
 import { AriaAttributes, ReactNode } from 'react';
+import { AvatarViewProps } from '../../avatarView';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePromptProps } from '../PrimitivePrompt';
-import { PromptMedia } from '../helpers/promptMedia';
+import { BadgeAssetsProps } from '../../badge';
 export type ActionPromptProps = {
     title: ReactNode;
     description?: ReactNode;
     /** @default {} */
-    media?: PromptMedia;
+    media?: {
+        imgSrc?: string;
+        avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+            asset?: AvatarViewProps['children'];
+            badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+        };
+        'aria-label'?: string;
+        'aria-hidden'?: boolean;
+    };
     action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
         label: ButtonProps['children'];
     };

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

@@ -1 +1 @@
-{"version":3,"file":"ActionPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAExE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kBAAkB;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACzD,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,CAAC,GAAG;IAC/E;;;OAGG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;CAC/C,CAAC;AAEJ;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,8IAY1B,iBAAiB,gCAkFnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActionPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAOzD,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kBAAkB;IAClB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;YACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;YACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;SAC5C,CAAC;QACF,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACzD,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,CAAC,GAAG;IAC/E;;;OAGG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;CAC/C,CAAC;AAEJ;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,8IAY1B,iBAAiB,gCA2HnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,16 +1,11 @@
-import { Emphasis, Sentiment } from '../../sentimentSurface';
+import { Sentiment } from '../../sentimentSurface';
 import { HTMLAttributes, ReactNode } from 'react';
 export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
     /**
-     * The sentiment determines the colour scheme.
+     * The sentiment determines the colour scheme
      * @default success
      */
     sentiment?: Sentiment;
-    /**
-     * The emphasis level affecting background and text contrast.
-     * @default 'base
-     */
-    emphasis?: Emphasis;
     /**
      * Media to be displayed on the prompt (icon/image/etc).
      */
@@ -31,32 +26,5 @@ export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
 /**
  * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.
  * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
-export declare const PrimitivePrompt: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The sentiment determines the colour scheme.
-     * @default success
-     */
-    sentiment?: Sentiment;
-    /**
-     * The emphasis level affecting background and text contrast.
-     * @default 'base
-     */
-    emphasis?: Emphasis;
-    /**
-     * Media to be displayed on the prompt (icon/image/etc).
-     */
-    media: ReactNode;
-    /**
-     * Any actions to be displayed on the prompt.
-     */
-    actions?: ReactNode;
-    /**
-     * Handler called when the close button is clicked. If not provided, then the close button is hidden.
-     */
-    onDismiss?: () => void;
-    /**
-     * Test ID for testing tools
-     */
-    'data-testid'?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PrimitivePrompt: ({ sentiment, media, actions, onDismiss, className, children, ...restProps }: PrimitivePromptProps) => import("react").JSX.Element;
 //# sourceMappingURL=PrimitivePrompt.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI/E,OAAO,EAAc,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;8GAE8G;AAC9G,eAAO,MAAM,eAAe;IA/B1B;;;OAGG;gBACS,SAAS;IACrB;;;OAGG;eACQ,QAAQ;IACnB;;OAEG;WACI,SAAS;IAChB;;OAEG;cACO,SAAS;IACnB;;OAEG;gBACS,MAAM,IAAI;IACtB;;OAEG;oBACa,MAAM;kDAqDvB,CAAC"}
+{"version":3,"file":"PrimitivePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAIrE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;8GAE8G;AAC9G,eAAO,MAAM,eAAe,GAAI,6EAQ7B,oBAAoB,gCA8BtB,CAAC"}

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

@@ -4,6 +4,4 @@ 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;AAG1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,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"}

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,8 +26,6 @@ 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;
@@ -113,8 +111,6 @@ 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": "0.0.0-experimental-fa9fbe9",
+  "version": "0.0.0-experimental-162ecb1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,8 +87,8 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "1.10.1",
     "@transferwise/neptune-css": "14.27.1",
+    "@wise/components-theming": "1.10.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
@@ -132,7 +132,7 @@
     "build:css": "gulp compileLess --dest=src",
     "build": "npm-run-all build:*",
     "build:clean": "rm -rf lib build",
-    "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --write src/i18n/*.json",
+    "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple",
     "build:js": "rollup --config --sourcemap",
     "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",

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/useResizeObserver.ts

@@ -5,7 +5,6 @@ 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(() => {
@@ -13,11 +12,11 @@ export function useResizeObserver(
       const resizeObserver = new ResizeObserver(([entry]) => {
         handleCallback(entry);
       });
-      resizeObserver.observe(ref.current, { box });
+      resizeObserver.observe(ref.current, { box: 'border-box' });
       return () => {
         resizeObserver.disconnect();
       };
     }
     return () => {};
-  }, [handleCallback, ref, box]);
+  }, [handleCallback, ref]);
 }

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,13 +1,9 @@
 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', 'deprecated'],
+  tags: ['!autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 type Story = StoryObj<typeof CriticalCommsBanner>;

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -51,9 +51,6 @@ 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,8 +16,6 @@
   "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/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, CriticalBannerProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps } 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, CriticalBanner } from './prompt';
+export { InfoPrompt, InlinePrompt, ActionPrompt } 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,5 @@
 .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,5 @@
 .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);
 }

package/src/logo/Logo.story.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import Logo, { LogoType } from '.';
+import Logo, { LogoType, LogoDisplay } from './Logo';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 /**
  * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
@@ -10,13 +11,19 @@ const meta: Meta<typeof Logo> = {
   title: 'Content/Logo',
   args: {
     type: 'WISE',
-    inverse: false,
+    display: 'responsive',
+    lockup: false,
+    secondary: false,
   },
   argTypes: {
     type: {
       control: 'radio',
       options: Object.values(LogoType),
     },
+    display: {
+      control: 'radio',
+      options: Object.values(LogoDisplay),
+    },
   },
   parameters: {
     docs: { toc: true },
@@ -29,18 +36,7 @@ type Story = StoryObj<typeof Logo>;
 
 /** Explore all props via the controls panel. */
 export const Playground: Story = {
-  render: (args) => (
-    <div
-      style={{
-        padding: '2rem',
-        ...(args.inverse
-          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
-          : {}),
-      }}
-    >
-      <Logo {...args} />
-    </div>
-  ),
+  render: (args) => <Logo {...args} />,
 };
 
 /**
@@ -59,9 +55,6 @@ export const Types: Story = {
         alignItems: 'center',
         padding: '2rem',
         borderRadius: '8px',
-        ...(args.inverse
-          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
-          : {}),
       }}
     >
       {Object.values(LogoType).map((type) => (
@@ -75,14 +68,7 @@ export const Types: Story = {
           }}
         >
           <Logo {...args} type={type} />
-          <span
-            style={{
-              fontSize: '12px',
-              ...(args.inverse ? { color: 'rgba(255,255,255,0.6)' } : { opacity: 0.6 }),
-            }}
-          >
-            {type}
-          </span>
+          <span style={{ fontSize: '12px' }}>{type}</span>
         </div>
       ))}
     </div>
@@ -99,99 +85,147 @@ export const Types: Story = {
 };
 
 /**
- * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
+ * When `display` is `"compact"`, only the fast-flag mark is rendered regardless of type.
  */
-export const Responsive: Story = {
+export const Compact: Story = {
   argTypes: {
     type: { table: { disable: true } },
-    inverse: { table: { disable: true } },
+    display: { table: { disable: true } },
   },
   render: (args) => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-      <div>
-        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'< 576px (flag only)'}
-        </span>
-        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
-          {Object.values(LogoType).map((type) => (
-            <span key={type} className="np-logo" style={{ display: 'inline-block' }}>
-              <style>{`.responsive-sm .np-logo-svg--size-md { display: none !important; } .responsive-sm .np-logo-svg--size-sm { display: block !important; }`}</style>
-              <span className="responsive-sm">
-                <Logo type={type} />
-              </span>
-            </span>
-          ))}
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
+      {Object.values(LogoType).map((type) => (
+        <div
+          key={type}
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
+        >
+          <Logo {...args} type={type} display="compact" />
+          <Logo {...args} type={type} secondary display="compact" />
+          <Logo {...args} type={type} lockup secondary display="compact" />
         </div>
-      </div>
-      <div>
-        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'\u2265 576px (full wordmark)'}
-        </span>
-        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
-          {Object.values(LogoType).map((type) => (
-            <Logo key={type} type={type} />
-          ))}
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo display="compact" />
+<Logo type="WISE_BUSINESS" lockup display="compact" />
+<Logo type="WISE_PLATFORM" lockup display="compact" />
+
+<Logo type="WISE_BUSINESS" lockup secondary display="compact" />
+<Logo type="WISE_PLATFORM" lockup secondary display="compact" />`,
+      },
+    },
+  },
+};
+
+/**
+ * The `lockup` prop shows the product name alongside the wordmark.
+ * Only applies to `WISE_BUSINESS` and `WISE_PLATFORM` types.
+ */
+export const Lockup: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+    lockup: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
+      {Object.values(LogoType).map((type) => (
+        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo {...args} type={type} />
+            <span style={{ fontSize: '12px', opacity: 0.6 }}>{type}</span>
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo {...args} type={type} lockup />
+            <span style={{ fontSize: '12px', opacity: 0.6 }}>{type} lockup</span>
+          </div>
         </div>
-      </div>
+      ))}
     </div>
   ),
   parameters: {
     docs: {
-      source: { code: null },
+      source: {
+        code: `<Logo type="WISE_BUSINESS" lockup />
+<Logo type="WISE_PLATFORM" lockup />`,
+      },
     },
   },
 };
 
 /**
- * All logo types on a dark background using the `inverse` prop, which renders a
- * light-coloured version suited for dark surfaces.
+ * The `secondary` prop (combined with `lockup`) uses a stacked two-line layout.
+ * Only applies to `WISE_BUSINESS` and `WISE_PLATFORM` types.
  */
-export const Inverse: Story = {
+export const Secondary: Story = {
   argTypes: {
     type: { table: { disable: true } },
-    inverse: { table: { disable: true } },
+    lockup: { table: { disable: true } },
+    secondary: { table: { disable: true } },
   },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          display: 'flex',
-          gap: '3rem',
-          alignItems: 'center',
-          backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)',
-          padding: '2rem',
-          borderRadius: '8px',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
   render: (args) => (
-    <>
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end', padding: '2rem' }}>
       {Object.values(LogoType).map((type) => (
-        <div
-          key={type}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '0.5rem',
-          }}
-        >
-          <Logo type={type} inverse />
-          <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>{type}</span>
+        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo {...args} type={type} lockup secondary />
+          </div>
         </div>
       ))}
-    </>
+    </div>
   ),
   parameters: {
     docs: {
       source: {
-        code: `<Logo type="WISE" inverse />
-<Logo type="WISE_BUSINESS" inverse />
-<Logo type="WISE_PLATFORM" inverse />`,
+        code: `<Logo type="WISE_BUSINESS" lockup secondary />
+<Logo type="WISE_PLATFORM" lockup secondary />`,
       },
     },
   },
 };
+
+export const Full: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end', padding: '2rem' }}>
+      {Object.values(LogoType).map((type) => (
+        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo type={type} lockup display="full" />
+            <Logo type={type} lockup secondary display="full" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+  ...withVariantConfig(['mobile']),
+};