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

package/src/inputs/_Popover.tsx

@@ -3,10 +3,10 @@ import {
   flip,
   FloatingFocusManager,
   FloatingPortal,
-  size as floatingSize,
   offset,
   type Placement,
   shift,
+  size as floatingSize,
   useDismiss,
   useFloating,
   useInteractions,
@@ -14,7 +14,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 { useState } from 'react';
 
@@ -79,6 +79,8 @@ export function Popover({
 
   const [floatingKey, setFloatingKey] = useState(0);
 
+  const { theme, screenMode } = useTheme();
+
   return (
     <>
       {open ? <PreventScroll /> : null}
@@ -88,7 +90,11 @@ export function Popover({
       })}
 
       <FloatingPortal>
-        <ThemedLayer>
+        <ThemeProvider
+          theme="personal"
+          screenMode={theme === 'personal' ? screenMode : 'light'}
+          isNotRootProvider
+        >
           <Transition
             show={open}
             leave="transition-opacity"
@@ -124,7 +130,7 @@ export function Popover({
               </FloatingFocusManager>
             </FocusScope>
           </Transition>
-        </ThemedLayer>
+        </ThemeProvider>
       </FloatingPortal>
     </>
   );

package/src/markdown/Markdown.tsx

@@ -1,4 +1,5 @@
-import commonmark, { Node as MarkdownNode } from 'commonmark';
+import * as commonmark from 'commonmark';
+import type { 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 '..';
 
-export default {
+const meta: Meta<typeof PrimitiveAnchor> = {
   component: PrimitiveAnchor,
   title: 'Primitives/Anchor',
   args: {
@@ -16,7 +16,8 @@ export default {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof PrimitiveAnchor>;
+};
+export default meta;
 
 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 '..';
 
-export default {
+const meta: Meta<typeof PrimitiveButton> = {
   component: PrimitiveButton,
   title: 'Primitives/Button',
   args: {
@@ -15,7 +15,8 @@ export default {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof PrimitiveButton>;
+};
+export default meta;
 
 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 = {
+export const Basic: Story = {
   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/typeahead/Typeahead.story.tsx

@@ -22,7 +22,7 @@ const validateOptionAsEmail = (option: TypeaheadOption) => {
   );
 };
 
-export default {
+const meta: Meta<typeof Typeahead> = {
   component: Typeahead,
   title: 'Forms/Typeahead',
   args: {
@@ -54,7 +54,8 @@ export default {
       options: [Size.MEDIUM, Size.LARGE],
     },
   },
-} satisfies Meta<typeof Typeahead>;
+};
+export default meta;
 
 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 = {
+export const Basic: Story = {
   args: {
     maxSize: MAX_SIZE_DEFAULT,
     usAccept: 'image/*',

package/src/withNextPortal/withNextPortal.spec.tsx

@@ -16,7 +16,7 @@ describe('withNextPortalWrapper', () => {
     };
     render(<RandomComponentForTest {...data} />);
 
-    const componentDomRef = document.body.lastChild?.firstChild;
+    const componentDomRef = document.body.lastChild;
     expect(componentDomRef).toHaveAttribute('aria-label', data['aria-label']);
     expect(componentDomRef).toHaveTextContent(data.children as string);
     expect(componentDomRef).toHaveAttribute('id', data.id);

package/src/withNextPortal/withNextPortal.tsx

@@ -1,4 +1,3 @@
-import { ThemedLayer } from '@wise/components-theming';
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -11,14 +10,6 @@ export default function withNextPortalWrapper<T extends Record<string, any>>(
     useEffect(() => {
       setMounted(true);
     }, [setMounted]);
-
-    return mounted
-      ? createPortal(
-          <ThemedLayer>
-            <Component {...props} />
-          </ThemedLayer>,
-          document.body,
-        )
-      : null;
+    return mounted ? createPortal(<Component {...props} />, document.body) : null;
   };
 }