@transferwise/components 0.0.0-experimental-3be76d0 → 0.0.0-experimental-2a50ad3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-3be76d0",
+  "version": "0.0.0-experimental-2a50ad3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,89 +38,89 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/plugin-transform-runtime": "^7.27.1",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/core": "^7.24.8",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
-    "@formatjs/cli": "^6.7.1",
+    "@formatjs/cli": "^6.2.12",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-a11y": "^8.2.2",
+    "@storybook/addon-actions": "^8.2.2",
+    "@storybook/addon-essentials": "^8.2.2",
+    "@storybook/addon-interactions": "^8.2.2",
     "@storybook/addon-knobs": "^8.0.1",
-    "@storybook/addon-viewport": "^8.6.14",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/components": "^8.6.14",
-    "@storybook/core-events": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@storybook/addon-viewport": "^8.2.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/components": "^8.2.2",
+    "@storybook/core-events": "^8.2.2",
+    "@storybook/manager-api": "^8.2.2",
+    "@storybook/react": "^8.2.2",
+    "@storybook/react-webpack5": "^8.2.2",
+    "@storybook/test": "^8.2.2",
+    "@storybook/theming": "^8.2.2",
+    "@testing-library/dom": "^10.3.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@transferwise/icons": "^3.21.0",
-    "@tsconfig/recommended": "^1.0.8",
+    "@tsconfig/recommended": "^1.0.7",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
-    "@types/enzyme": "^3.10.19",
-    "@types/jest": "^29.5.14",
-    "@types/lodash": "4.17.17",
+    "@types/enzyme": "^3.10.18",
+    "@types/jest": "^29.5.12",
+    "@types/lodash": "4.17.6",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
-    "@types/react-transition-group": "4.4.12",
+    "@types/react-transition-group": "4.4.10",
     "@wise/art": "^2.21.1",
     "@wise/eslint-config": "^12.3.0",
-    "babel-plugin-formatjs": "^10.5.38",
+    "babel-plugin-formatjs": "^10.5.16",
     "enzyme": "^3.11.0",
-    "eslint": "^9.27.0",
+    "eslint": "^9.26.0",
     "gulp": "^5.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
-    "react-intl": "^7.1.11",
-    "rollup": "^4.41.1",
-    "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^8.6.14",
-    "@transferwise/less-config": "0.0.0-experimental-3be76d0",
+    "react-intl": "^6.6.8",
+    "rollup": "^4.18.1",
+    "rollup-preserve-directives": "^1.1.1",
+    "storybook": "^8.2.2",
+    "@transferwise/less-config": "3.1.1",
     "@transferwise/neptune-css": "14.24.4",
-    "@wise/components-theming": "0.0.0-experimental-3be76d0",
+    "@wise/components-theming": "1.6.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.21.0",
     "@transferwise/neptune-css": "^14.24",
-    "@wise/art": "^2.21",
-    "@wise/components-theming": "0.0.0-experimental-3be76d0",
+    "@wise/art": "^2.16",
+    "@wise/components-theming": "^1.0.0",
     "react": ">=18",
     "react-dom": ">=18",
     "react-intl": "^5.10.0 || ^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.1",
-    "@floating-ui/react": "^0.27.9",
+    "@babel/runtime": "^7.24.8",
+    "@floating-ui/react": "^0.25.4",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.20.3",
-    "@react-aria/overlays": "^3.27.1",
-    "@react-spring/web": "~10.0.1",
-    "@transferwise/formatting": "^2.13.1",
-    "@transferwise/neptune-validation": "0.0.0-experimental-3be76d0",
+    "@react-aria/focus": "^3.17.1",
+    "@react-aria/overlays": "^3.22.1",
+    "@react-spring/web": "~9.7.3",
+    "@transferwise/formatting": "^2.13.0",
+    "@transferwise/neptune-validation": "^3.3.0",
     "clsx": "^2.1.1",
-    "commonmark": "^0.31.2",
-    "core-js": "^3.42.0",
+    "commonmark": "0.29.1",
+    "core-js": "^3.37.1",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",

package/src/alert/Alert.spec.tsx

@@ -328,7 +328,6 @@ describe('Alert', () => {
       jest.spyOn(window, 'open').mockImplementation();
       // @ts-expect-error value gets set right after its deletion
       delete window.location;
-      // @ts-expect-error TypeScript doesn't allow assigning a plain object to window.location
       window.location = {
         ...window.location,
         assign: jest.fn(),
@@ -336,7 +335,6 @@ describe('Alert', () => {
     });
 
     afterAll(() => {
-      // @ts-expect-error TypeScript doesn't allow assigning a plain object to window.location
       window.location = location;
     });
 
@@ -358,6 +356,10 @@ describe('Alert', () => {
         });
       });
 
+      afterEach(() => {
+        cleanup();
+      });
+
       it('loads action on tap', () => {
         fireEvent.touchStart(alert);
         expect(window.location.assign).not.toHaveBeenCalled();

package/src/card/Card.story.tsx

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Card>;
  *
  * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
  */
-const meta: Meta<typeof Card> = {
+export default {
   component: Card,
   title: 'Layouts/Card (Deprecated)',
   args: {
@@ -23,9 +23,7 @@ const meta: Meta<typeof Card> = {
     as: 'div',
   },
   tags: ['autodocs'],
-};
-
-export default meta;
+} satisfies Meta<typeof Card>;
 
 export const Basic: Story = {
   render: function Render(args) {

package/src/checkbox/Checkbox.story.tsx

@@ -6,7 +6,7 @@ import { lorem10, storyConfig } from '../test-utils';
 
 import Checkbox from './Checkbox';
 
-const meta: Meta<typeof Checkbox> = {
+export default {
   component: Checkbox,
   title: 'Forms/Checkbox',
   args: {
@@ -14,8 +14,7 @@ const meta: Meta<typeof Checkbox> = {
     onChange: fn(),
   },
   tags: ['autodocs'],
-};
-export default meta;
+} satisfies Meta<typeof Checkbox>;
 
 type Story = StoryObj<typeof Checkbox>;
 

package/src/dateInput/DateInput.story.tsx

@@ -3,7 +3,7 @@ import { fn } from '@storybook/test';
 
 import { DateInput } from '..';
 
-const meta: Meta<typeof DateInput> = {
+const meta = {
   component: DateInput,
   title: 'Forms/DateInput',
   tags: ['autodocs'],
@@ -13,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Basic: Story = {
+export const Basic = {
   args: {
     onChange: fn(),
   },

package/src/dateInput/DateInput.tests.story.tsx

@@ -7,7 +7,7 @@ import { lorem10, storyConfig } from '../test-utils';
 import Provider from '../provider/Provider';
 import translations from '../i18n';
 
-const meta: Meta<typeof DateInput> = {
+const meta = {
   component: DateInput,
   title: 'Forms/DateInput/Tests',
   args: {
@@ -16,15 +16,14 @@ const meta: Meta<typeof DateInput> = {
     monthLabel: 'Month select',
     yearLabel: 'Year input',
     yearAutoComplete: 'bday-year',
-    onChange: fn(),
   },
-};
+} satisfies Meta<typeof DateInput>;
 
 export default meta;
 
-type Story = StoryObj<typeof DateInput>;
+type Story = StoryObj<typeof meta>;
 
-const Basic: Story = {
+const Basic = {
   args: {
     onChange: fn(),
   },
@@ -32,9 +31,9 @@ const Basic: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('combobox'));
   },
-};
+} satisfies Story;
 
-export const WithLabel: Story = {
+export const WithLabel = {
   args: {
     onChange: fn(),
   },
@@ -45,18 +44,18 @@ export const WithLabel: Story = {
       </Field>
     );
   },
-};
+} satisfies Story;
 
-export const InputError: Story = {
+export const InputError = {
   ...Basic,
   render: (args) => (
     <Field sentiment="negative" message={lorem10}>
       <DateInput {...args} value={new Date('2010-04-05')} />
     </Field>
   ),
-};
+} satisfies Story;
 
-export const CustomPlaceholders: Story = {
+export const CustomPlaceholders = {
   ...Basic,
   args: {
     placeholders: {

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -6,7 +6,7 @@ import { Meta, type StoryObj } from '@storybook/react';
 
 type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
 
-const meta: Meta<typeof InputWithDisplayFormat> = {
+const meta = {
   title: 'Forms/InputWithDisplayFormat',
   component: InputWithDisplayFormat,
   render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {

package/src/markdown/Markdown.tsx

@@ -1,5 +1,4 @@
-import * as commonmark from 'commonmark';
-import type { Node as MarkdownNode } from 'commonmark';
+import commonmark, { Node as MarkdownNode } from 'commonmark';
 
 import { MarkdownNodeType } from '../common';
 import { logActionRequired } from '../utilities';

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveAnchor from '..';
 
-const meta: Meta<typeof PrimitiveAnchor> = {
+export default {
   component: PrimitiveAnchor,
   title: 'Primitives/Anchor',
   args: {
@@ -16,8 +16,7 @@ const meta: Meta<typeof PrimitiveAnchor> = {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-};
-export default meta;
+} satisfies Meta<typeof PrimitiveAnchor>;
 
 type Story = StoryObj<typeof PrimitiveAnchor>;
 

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveButton from '..';
 
-const meta: Meta<typeof PrimitiveButton> = {
+export default {
   component: PrimitiveButton,
   title: 'Primitives/Button',
   args: {
@@ -15,8 +15,7 @@ const meta: Meta<typeof PrimitiveButton> = {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-};
-export default meta;
+} satisfies Meta<typeof PrimitiveButton>;
 
 type Story = StoryObj<typeof PrimitiveButton>;
 

package/src/radioGroup/RadioGroup.story.tsx

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
 
-export const Basic: Story = {
+export const Basic = {
   args: {
     selectedValue: 'radio-2',
     name: 'radio-group',
@@ -45,7 +45,7 @@ export const WithAvatars = {
   ...Basic,
   args: {
     ...Basic.args,
-    radios: Basic?.args?.radios?.map(
+    radios: Basic.args.radios.map(
       (radio) =>
         ({
           ...radio,

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.spec.js

@@ -1,17 +1,18 @@
-import { shallow } from 'enzyme';
-
-import { TextArea } from '../inputs/TextArea';
-
+import { render, screen, userEvent } from '../test-utils';
 import TextareaWithDisplayFormat from '.';
 
 describe('TextareaWithDisplayFormat', () => {
   const props = { displayPattern: '**-**', onChange: jest.fn() };
 
   it('should render input with value prop', () => {
-    const view = shallow(<TextareaWithDisplayFormat {...props} />)
-      .find('WithDisplayFormat')
-      .renderProp('render')({ value: 'test' });
+    render(<TextareaWithDisplayFormat {...props} value="test" />);
+    expect(screen.getByRole('textbox')).toHaveValue('te-st');
+  });
 
-    expect(view.find(TextArea).props('value')).toStrictEqual({ value: 'test' });
+  it('should format as you type', async () => {
+    render(<TextareaWithDisplayFormat {...props} />);
+    await userEvent.tab();
+    await userEvent.keyboard('1234');
+    expect(screen.getByRole('textbox')).toHaveValue('12-34');
   });
 });

package/src/typeahead/Typeahead.story.tsx

@@ -22,7 +22,7 @@ const validateOptionAsEmail = (option: TypeaheadOption) => {
   );
 };
 
-const meta: Meta<typeof Typeahead> = {
+export default {
   component: Typeahead,
   title: 'Forms/Typeahead',
   args: {
@@ -54,8 +54,7 @@ const meta: Meta<typeof Typeahead> = {
       options: [Size.MEDIUM, Size.LARGE],
     },
   },
-};
-export default meta;
+} satisfies Meta<typeof Typeahead>;
 
 export const Basic: Story = {
   render: function Render(args) {

package/src/upload/Upload.story.tsx

@@ -22,7 +22,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Basic: Story = {
+export const Basic = {
   args: {
     maxSize: MAX_SIZE_DEFAULT,
     usAccept: 'image/*',