@transferwise/components 0.0.0-experimental-010a0a4 → 0.0.0-experimental-666b489

package/build/withNextPortal/withNextPortal.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var componentsTheming = require('@wise/components-theming');
 var React = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -13,10 +12,8 @@ function withNextPortalWrapper(Component) {
     React.useEffect(() => {
       setMounted(true);
     }, [setMounted]);
-    return mounted ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemedLayer, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Component, {
-        ...props
-      })
+    return mounted ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(Component, {
+      ...props
     }), document.body) : null;
   };
 }

package/build/withNextPortal/withNextPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"withNextPortal.js","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { ThemedLayer } from '@wise/components-theming';\nimport { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n  Component: React.ComponentType<T>,\n) {\n  return function (props: T) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n      setMounted(true);\n    }, [setMounted]);\n\n    return mounted\n      ? createPortal(\n          <ThemedLayer>\n            <Component {...props} />\n          </ThemedLayer>,\n          document.body,\n        )\n      : null;\n  };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","ThemedLayer","children","document","body"],"mappings":";;;;;;;;;AAIwB,SAAAA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AAE7CC,IAAAA,eAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAEhB,IAAA,OAAOD,OAAO,gBACVI,qBAAY,eACVC,cAAA,CAACC,6BAAW,EAAA;MAAAC,QAAA,eACVF,cAAA,CAACP,SAAS,EAAA;QAAA,GAAKC,KAAAA;OACjB,CAAA;AAAA,KAAa,CAAC,EACdS,QAAQ,CAACC,IAAI,CACd,GACD,IAAI,CAAA;GACT,CAAA;AACH;;;;"}
+{"version":3,"file":"withNextPortal.js","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n  Component: React.ComponentType<T>,\n) {\n  return function (props: T) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n      setMounted(true);\n    }, [setMounted]);\n    return mounted ? createPortal(<Component {...props} />, document.body) : null;\n  };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;;;;;AAGwB,SAAAA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAE7CC,IAAAA,eAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC;AAChB,IAAA,OAAOD,OAAO,gBAAGI,qBAAY,cAACC,cAAA,CAACP,SAAS,EAAA;MAAA,GAAKC;AAAK,KAAI,CAAA,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI;GAC9E;AACH;;;;"}

package/build/withNextPortal/withNextPortal.mjs

@@ -1,4 +1,3 @@
-import { ThemedLayer } from '@wise/components-theming';
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx } from 'react/jsx-runtime';
@@ -9,10 +8,8 @@ function withNextPortalWrapper(Component) {
     useEffect(() => {
       setMounted(true);
     }, [setMounted]);
-    return mounted ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ThemedLayer, {
-      children: /*#__PURE__*/jsx(Component, {
-        ...props
-      })
+    return mounted ? /*#__PURE__*/createPortal(/*#__PURE__*/jsx(Component, {
+      ...props
     }), document.body) : null;
   };
 }

package/build/withNextPortal/withNextPortal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"withNextPortal.mjs","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { ThemedLayer } from '@wise/components-theming';\nimport { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n  Component: React.ComponentType<T>,\n) {\n  return function (props: T) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n      setMounted(true);\n    }, [setMounted]);\n\n    return mounted\n      ? createPortal(\n          <ThemedLayer>\n            <Component {...props} />\n          </ThemedLayer>,\n          document.body,\n        )\n      : null;\n  };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","ThemedLayer","children","document","body"],"mappings":";;;;;AAIwB,SAAAA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAE7CC,IAAAA,SAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAEhB,IAAA,OAAOD,OAAO,gBACVI,YAAY,eACVC,GAAA,CAACC,WAAW,EAAA;MAAAC,QAAA,eACVF,GAAA,CAACP,SAAS,EAAA;QAAA,GAAKC,KAAAA;OACjB,CAAA;AAAA,KAAa,CAAC,EACdS,QAAQ,CAACC,IAAI,CACd,GACD,IAAI,CAAA;GACT,CAAA;AACH;;;;"}
+{"version":3,"file":"withNextPortal.mjs","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n  Component: React.ComponentType<T>,\n) {\n  return function (props: T) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n      setMounted(true);\n    }, [setMounted]);\n    return mounted ? createPortal(<Component {...props} />, document.body) : null;\n  };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;AAGwB,SAAAA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAE7CC,IAAAA,SAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC;AAChB,IAAA,OAAOD,OAAO,gBAAGI,YAAY,cAACC,GAAA,CAACP,SAAS,EAAA;MAAA,GAAKC;AAAK,KAAI,CAAA,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI;GAC9E;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-010a0a4",
+  "version": "0.0.0-experimental-666b489",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,95 +38,95 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@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",
+    "@babel/core": "^7.27.3",
+    "@babel/plugin-transform-runtime": "^7.27.3",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
-    "@formatjs/cli": "^6.2.12",
+    "@formatjs/cli": "^6.7.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@rollup/plugin-url": "^8.0.2",
-    "@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-a11y": "^8.6.14",
+    "@storybook/addon-actions": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-knobs": "^8.0.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.7",
+    "@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",
+    "@transferwise/icons": "^3.22.0",
+    "@tsconfig/recommended": "^1.0.8",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
-    "@types/enzyme": "^3.10.18",
-    "@types/jest": "^29.5.12",
-    "@types/lodash": "4.17.6",
+    "@types/enzyme": "^3.10.19",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "4.17.17",
     "@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.10",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-transition-group": "4.4.12",
     "@wise/art": "^2.21.1",
     "@wise/eslint-config": "^12.3.0",
-    "babel-plugin-formatjs": "^10.5.16",
+    "babel-plugin-formatjs": "^10.5.38",
     "enzyme": "^3.11.0",
-    "eslint": "^9.26.0",
+    "eslint": "^9.27.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": "^6.6.8",
-    "rollup": "^4.18.1",
-    "rollup-preserve-directives": "^1.1.1",
-    "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.1",
+    "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-666b489",
     "@transferwise/neptune-css": "14.24.4",
-    "@wise/components-theming": "0.0.0-experimental-010a0a4",
+    "@wise/components-theming": "0.0.0-experimental-666b489",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
-    "@transferwise/icons": "^3.21.0",
+    "@transferwise/icons": "^3.22.0",
     "@transferwise/neptune-css": "^14.24",
-    "@wise/art": "^2.16",
-    "@wise/components-theming": "0.0.0-experimental-010a0a4",
+    "@wise/art": "^2.21",
+    "@wise/components-theming": "0.0.0-experimental-666b489",
     "react": ">=18",
     "react-dom": ">=18",
     "react-intl": "^5.10.0 || ^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.8",
-    "@floating-ui/react": "^0.25.4",
+    "@babel/runtime": "^7.27.3",
+    "@floating-ui/react": "^0.27.9",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@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",
+    "@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-666b489",
     "clsx": "^2.1.1",
-    "commonmark": "0.29.1",
-    "core-js": "^3.37.1",
+    "commonmark": "^0.31.2",
+    "core-js": "^3.42.0",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.33.3"
+    "virtua": "^0.41.2"
   },
   "publishConfig": {
     "access": "public"

package/src/alert/Alert.spec.tsx

@@ -328,6 +328,7 @@ 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(),
@@ -335,6 +336,7 @@ describe('Alert', () => {
     });
 
     afterAll(() => {
+      // @ts-expect-error TypeScript doesn't allow assigning a plain object to window.location
       window.location = location;
     });
 
@@ -356,10 +358,6 @@ 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
  */
-export default {
+const meta: Meta<typeof Card> = {
   component: Card,
   title: 'Layouts/Card (Deprecated)',
   args: {
@@ -23,7 +23,9 @@ export default {
     as: 'div',
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof Card>;
+};
+
+export default meta;
 
 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';
 
-export default {
+const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   title: 'Forms/Checkbox',
   args: {
@@ -14,7 +14,8 @@ export default {
     onChange: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof Checkbox>;
+};
+export default meta;
 
 type Story = StoryObj<typeof Checkbox>;
 

package/src/common/bottomSheet/BottomSheet.spec.tsx

@@ -1,4 +1,3 @@
-import { ThemeProvider } from '@wise/components-theming';
 import { render, mockMatchMedia } from '../../test-utils';
 
 import BottomSheet from './BottomSheet';
@@ -8,11 +7,9 @@ mockMatchMedia();
 describe('BottomSheet', () => {
   it('renders content when open', () => {
     const { baseElement } = render(
-      <ThemeProvider theme="personal" screenMode="light">
-        <BottomSheet open onClose={jest.fn()}>
-          <b>Test Content</b>
-        </BottomSheet>
-      </ThemeProvider>,
+      <BottomSheet open onClose={jest.fn()}>
+        <b>Test Content</b>
+      </BottomSheet>,
     );
     expect(baseElement).toMatchSnapshot();
   });

package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap

@@ -2,11 +2,7 @@
 
 exports[`BottomSheet renders content when open 1`] = `
 <body>
-  <div>
-    <div
-      class="np-theme-personal"
-    />
-  </div>
+  <div />
   <div
     class="np-theme-personal"
   >

package/src/dateInput/DateInput.story.tsx

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

package/src/dimmer/Dimmer.tsx

@@ -1,5 +1,6 @@
+import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { MouseEvent, ReactNode, useCallback, useEffect, useRef } from 'react';
+import { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import {
@@ -58,6 +59,7 @@ const Dimmer = ({
   onClose,
   onExited: handleExited,
 }: DimmerProps) => {
+  const [hasNotExited, setHasNotExited] = useState(false);
   const dimmerReference = useRef<HTMLDivElement>(null);
 
   const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {
@@ -89,11 +91,15 @@ const Dimmer = ({
   );
 
   const onEnter = () => {
+    setHasNotExited(true);
+
     if (dimmerReference.current) {
       dimmerManager.add(dimmerReference.current);
     }
   };
   const onExited = () => {
+    setHasNotExited(false);
+
     if (dimmerReference.current) {
       dimmerManager.remove(dimmerReference.current);
     }
@@ -116,54 +122,76 @@ const Dimmer = ({
   }, [handleKeyDown, open]);
 
   return (
-    <CSSTransition
-      nodeRef={dimmerReference}
-      in={open}
-      appear
-      // Wait for animation to finish before unmount.
-      timeout={{ enter: 0, exit: EXIT_ANIMATION }}
-      classNames={{
-        enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),
-        enterDone: clsx('dimmer--enter-done', {
-          'dimmer--enter-fade': fadeContentOnEnter,
-        }),
-        exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),
-      }}
-      unmountOnExit
-      onEnter={onEnter}
-      onExited={onExited}
-    >
-      <DimmerContentWrapper scrollBody={!transparent}>
-        <FocusBoundary>
-          <div
-            ref={dimmerReference}
-            className={clsx(
-              'dimmer',
-              { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },
-              className,
-            )}
-            role="presentation"
-            onClick={handleClick}
-          >
+    <DimmerWrapper open={open} hasNotExited={hasNotExited}>
+      <CSSTransition
+        nodeRef={dimmerReference}
+        in={open}
+        appear
+        // Wait for animation to finish before unmount.
+        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
+        classNames={{
+          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),
+          enterDone: clsx('dimmer--enter-done', {
+            'dimmer--enter-fade': fadeContentOnEnter,
+          }),
+          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),
+        }}
+        unmountOnExit
+        onEnter={onEnter}
+        onExited={onExited}
+      >
+        <DimmerContentWrapper scrollBody={!transparent}>
+          <FocusBoundary>
             <div
+              ref={dimmerReference}
               className={clsx(
-                'dimmer-content-positioner',
-                contentPosition != null && [
-                  'd-flex justify-content-center',
-                  {
-                    'align-items-start': contentPosition === 'top',
-                    'align-items-center': contentPosition === 'center',
-                    'align-items-end': contentPosition === 'bottom',
-                  },
-                ],
+                'dimmer',
+                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },
+                className,
               )}
+              role="presentation"
+              onClick={handleClick}
             >
-              {children}
+              <div
+                className={clsx(
+                  'dimmer-content-positioner',
+                  contentPosition != null && [
+                    'd-flex justify-content-center',
+                    {
+                      'align-items-start': contentPosition === 'top',
+                      'align-items-center': contentPosition === 'center',
+                      'align-items-end': contentPosition === 'bottom',
+                    },
+                  ],
+                )}
+              >
+                {children}
+              </div>
             </div>
-          </div>
-        </FocusBoundary>
-      </DimmerContentWrapper>
-    </CSSTransition>
+          </FocusBoundary>
+        </DimmerContentWrapper>
+      </CSSTransition>
+    </DimmerWrapper>
+  );
+};
+
+const DimmerWrapper: React.ComponentType<{
+  open: boolean;
+  hasNotExited: boolean;
+  children: React.ReactNode;
+}> = ({ open, hasNotExited, children }) => {
+  const { screenMode, theme } = useTheme();
+
+  return open || hasNotExited ? (
+    <ThemeProvider
+      theme="personal"
+      screenMode={theme === 'personal' ? screenMode : 'light'}
+      isNotRootProvider
+    >
+      {children}
+    </ThemeProvider>
+  ) : (
+    <>{children}</>
   );
 };
 

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 = {
+const meta: Meta<typeof InputWithDisplayFormat> = {
   title: 'Forms/InputWithDisplayFormat',
   component: InputWithDisplayFormat,
   render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {

package/src/inputs/SelectInput.tsx

@@ -14,7 +14,7 @@ import {
   useState,
 } from 'react';
 import { useIntl } from 'react-intl';
-import { Virtualizer } from 'virtua';
+import { Virtualizer, type VirtualizerHandle } from 'virtua';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
@@ -553,6 +553,7 @@ function SelectInputOptions<T = string>({
   listBoxLabelledBy,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
+  const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
   const [initialRender, setInitialRender] = useState(true);
 
@@ -711,16 +712,24 @@ function SelectInputOptions<T = string>({
             filteredItems.map((_, index) => getItemNode(index))
           ) : (
             <Virtualizer
+              ref={virtualiserHandlerRef}
               key={needle}
               count={filteredItems.length}
               keepMounted={mountedIndexes}
               scrollRef={listboxRef} // `VList` doesn't expose this
-              onRangeChange={(startIndex, endIndex) => {
+              onScroll={async () => {
+                if (!virtualiserHandlerRef.current) return;
+
+                const startIndex = virtualiserHandlerRef.current.findStartIndex();
+                const endIndex = virtualiserHandlerRef.current.findStartIndex();
+
                 setMountedIndexes((prevMountedIndexes) => {
                   const indexes = new Set(prevMountedIndexes);
+
                   for (let index = startIndex; index <= endIndex; index += 1) {
                     indexes.add(index);
                   }
+
                   return [...indexes].sort((a, b) => a - b);
                 });
               }}

package/src/inputs/_BottomSheet.tsx

@@ -8,7 +8,7 @@ import {
 } from '@floating-ui/react';
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
-import { ThemedLayer } from '@wise/components-theming';
+import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { Fragment, useState } from 'react';
 
@@ -60,6 +60,8 @@ export function BottomSheet({
 
   const [floatingKey, setFloatingKey] = useState(0);
 
+  const { theme, screenMode } = useTheme();
+
   return (
     <>
       {open ? <PreventScroll /> : null}
@@ -69,7 +71,11 @@ export function BottomSheet({
       })}
 
       <FloatingPortal>
-        <ThemedLayer>
+        <ThemeProvider
+          theme="personal"
+          screenMode={theme === 'personal' ? screenMode : 'light'}
+          isNotRootProvider
+        >
           <Transition
             show={open}
             className="np-bottom-sheet-v2-container"
@@ -125,7 +131,7 @@ export function BottomSheet({
               </FocusScope>
             </div>
           </Transition>
-        </ThemedLayer>
+        </ThemeProvider>
       </FloatingPortal>
     </>
   );