@transferwise/components 0.0.0-experimental-acbc541 → 0.0.0-experimental-6075266

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-acbc541",
+  "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-acbc541",
+    "@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/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"