@transferwise/components 0.0.0-experimental-975c35d → 0.0.0-experimental-6075266

package/build/main.css

@@ -29148,7 +29148,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: 1164px;
+  max-width: calc(100% - 36px);
 }
 
 .np-flow-navigation__stepper {

package/build/styles/flowNavigation/FlowNavigation.css

@@ -10,7 +10,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: 1164px;
+  max-width: calc(100% - 36px);
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;

package/build/styles/main.css

@@ -29148,7 +29148,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: 1164px;
+  max-width: calc(100% - 36px);
 }
 
 .np-flow-navigation__stepper {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-975c35d",
+  "version": "0.0.0-experimental-6075266",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -40,20 +40,20 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-env": "^7.29.3",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@formatjs/cli": "^6.14.3",
+    "@formatjs/cli": "^6.14.4",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react-webpack5": "^10.3.5",
+    "@storybook/react-webpack5": "^10.3.6",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -69,11 +69,14 @@
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
+    "@monaco-editor/react": "^4.7.0",
+    "monaco-editor": "^0.55.1",
+    "monaco-editor-webpack-plugin": "^7.1.1",
     "@wise/art": "^2.30.1",
     "@wise/eslint-config": "^13.3.0",
     "babel-plugin-formatjs": "^10.5.41",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.3.5",
+    "eslint-plugin-storybook": "^10.3.6",
     "gulp": "^5.0.1",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -81,13 +84,14 @@
     "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
+    "react-live": "^4.1.8",
     "rollup": "^4.60.2",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.3.5",
+    "storybook": "^10.3.6",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "0.0.0-experimental-975c35d",
+    "@transferwise/neptune-css": "0.0.0-experimental-6075266",
     "@wise/components-theming": "1.10.1",
     "@wise/wds-configs": "0.0.0"
   },
@@ -117,7 +121,7 @@
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.48.8"
+    "virtua": "^0.49.1"
   },
   "publishConfig": {
     "access": "public",

package/src/alert/Alert.story.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
 import { ClockBorderless } from '@transferwise/icons';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import { lorem40 } from '../test-utils';
 import { Sentiment, Status } from '../common';
@@ -48,6 +49,34 @@ type Story = StoryObj<typeof Alert>;
 
 export const Basic: Story = {};
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [dismissed, setDismissed] = React.useState(false);
+
+  if (dismissed) {
+    return (
+      <Button v2 size="md" onClick={() => setDismissed(false)}>
+        Show alert again
+      </Button>
+    );
+  }
+
+  return (
+    <Alert
+      action={{
+        'aria-label': 'Learn more',
+        text: 'Learn more',
+        href: '#',
+      }}
+      message="Payments sent to your bank details **today** might not arrive in time for the holidays."
+      onDismiss={() => setDismissed(true)}
+      type="positive"
+    />
+  );
+};`,
+  scope: { Alert, Button, React },
+});
+
 export const Variants: Story = {
   render: ({ message }) => {
     const variants = [

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -81,7 +81,7 @@ export const All: Story = {
           <div>
             <AvatarWrapper
               badgeStatusIcon={Sentiment.NEGATIVE}
-              url="https://wise.com/web-art/assets/flags/hrk.svg"
+              url="https://wise.com/web-art/assets/flags/hr.svg"
               profileType={ProfileType.BUSINESS}
               avatarProps={avatarProps}
             />

package/src/button/_stories/Button.story.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import { Flag } from '@wise/art';
 import { lorem10, lorem20 } from '../../test-utils';
 import SentimentSurface from '../../sentimentSurface';
@@ -317,6 +321,13 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Button v2 size="md" onClick={console.log}>
+  Click me
+</Button>`,
+  scope: globalScope,
+});
+
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />

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

@@ -0,0 +1,85 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import CriticalCommsBanner from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+export default {
+  component: CriticalCommsBanner,
+  title: 'Prompts/CriticalCommsBanner/Tests',
+  tags: ['!autodocs', 'deprecated'],
+} satisfies Meta<typeof CriticalCommsBanner>;
+
+type Story = StoryObj<typeof CriticalCommsBanner>;
+
+export const Sentiments: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig([
+    'default',
+    'dark',
+    'bright-green',
+    'forest-green',
+    'business',
+    'business--forest-green',
+    'business--bright-green',
+  ]),
+};
+
+export const RTL: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+export const Mobile: Story = {
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['mobile']),
+};
+
+export const Zoom: Story = {
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['400%']),
+};
+
+export const WithoutAction: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['default']),
+};

package/src/flowNavigation/FlowNavigation.css

@@ -10,7 +10,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: 1164px;
+  max-width: calc(100% - 36px);
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;

package/src/flowNavigation/FlowNavigation.less

@@ -14,7 +14,7 @@
   &__content {
     width: 100%;
     min-width: 320px;
-    max-width: 1164px;
+    max-width: calc(100% - 36px);
   }
 
   &__stepper {

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -309,6 +309,9 @@ export const WithOverlayHeaderComparison: Story = {
     done: false,
     avatarURL: '../tapestry-01.png',
   },
+  parameters: {
+    padding: '0',
+  },
   render: (args) => {
     const [activeStep, setActiveStep] = useState(4);
     const [closed, setClosed] = useState(false);

package/src/main.css

@@ -29148,7 +29148,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: 1164px;
+  max-width: calc(100% - 36px);
 }
 
 .np-flow-navigation__stepper {

package/src/radio/Radio.story.tsx

@@ -52,7 +52,7 @@ export const Variants: StoryObj<RadioProps> = {
             id="radioGroup2"
             avatar={
               <AvatarView>
-                <Flag code="IMP" />
+                <Flag code="IM" />
               </AvatarView>
             }
             value="option2"